build: initial build setup and layouts (#1)

* npm devDependencies, config and build scripts

* update README

* example content

* Layout and Collection layout and initial components

Author: petedavisdev

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc.js

@@ -0,0 +1,34 @@
+module.exports = {
+  root: true,
+
+  env: {
+    node: true,
+    jest: true,
+  },
+
+  extends: [
+    'plugin:vue/recommended',
+    'plugin:prettier/recommended',
+    'prettier/vue',
+  ],
+
+  parserOptions: {
+    parser: 'babel-eslint', // Support dynamic import
+  },
+
+  rules: {
+    'no-undef': ['error'],
+
+    'vue/match-component-file-name': [
+      'error',
+      {
+        extensions: ['js', 'vue'],
+        shouldMatchCase: false,
+      },
+    ],
+
+    'vue/prop-name-casing': 0,
+
+    'vue/require-default-prop': 0,
+  },
+}

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+.temp
+dist

.prettierrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  semi:false,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: 'es5',
+}

README.md

@@ -1,2 +1,60 @@
-# vuepress-theme-base
-If you want to create your own VuePress theme, fork this repo!
+# vuepress-theme-base (WIP)
+
+> Create your own VuePress themes
+
+**Note: this is work in progress - please watch for releases**
+
+## Aims
+
+Building themes from scratch can be daunting. Overriding a default theme can be limiting.
+
+The aim of this theme is to provide a starter kit for designers and developers who want to create their own VuePress themes.
+
+### This theme will include:
+
+- a starter set of layouts and components that output accessible, semantic html
+- the best tooling to help you develop, test and publish quality themes
+- example content so that you can try out your theme
+- no styles - styling is up to you!
+
+## Usage
+
+There are three options for using this theme:
+
+1. [Just add styles](#option-1-just-add-styles) for your website
+2. [Use as a parent theme](#option-2-use-as-a-parent-theme) for your own website theme
+3. [Fork this repo](#option-3-fork-and-develop-your-own-themes) to create and share your own VuePress themes.
+
+### Option 1: Just add styles
+
+If you only need to add styles for a one-off website, you can do that in your `.vuepress/styles/index.styl` file.
+
+### Option 2: Use as a parent theme
+
+If you are developing a one-off theme for your site, you can install this theme and then override layouts and components in your own `.vuepress/theme` folder.
+
+### Option 3: Fork and develop your own themes
+
+1. Fork this repo
+2. Rename your repo and edit the README and package.json files to describe you new theme
+3. Clone your repo to your computer and start making changes
+4. Run `npm start` to see your theme with the example content
+5. Run `npm test` to test your theme
+6. When you are happy with your theme, publish it to NPM so that it can be installed in any VuePress site
+
+This is what this theme was made for - every time I want to create and publish a new theme, I use a fork of this theme as a starting point.
+
+## Layouts
+
+This theme will have the following layouts:
+
+- Layout
+- Blog
+- Article
+- 404
+
+## Components
+
+- Header
+- Footer
+- Collection

example/.vuepress/config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  title: 'Example Website',
+  description: 'An example website built with vuepress-theme-base',
+  theme: require.resolve('../../theme'),
+}

example/blog/index.md

@@ -0,0 +1,5 @@
+---
+layout: Collection
+---
+
+# Blog

example/index.md

@@ -0,0 +1,7 @@
+---
+title: Home
+---
+
+# Homepage test
+
+This will update automatically on save!