Make a proper library

docs/.vuepress/config.js

@@ -1,34 +1,27 @@
+const glob = require('glob');
 const autoprefixer = require('autoprefixer');
 const tailwindcss = require('tailwindcss');
-const postcssPurgecss = require(`@fullhuman/postcss-purgecss`);
 
-const purgecss = postcssPurgecss({
-  // Specify the paths to all of the template files in your project.
-  content: [
-    './public/**/*.html',
-    './src/**/*.vue',
-  ],
-  // Include any special characters you're using in this regular expression.
-  // See: https://tailwindcss.com/docs/controlling-file-size/#understanding-the-regex
-  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
-  // Whitelist auto generated classes for transitions and router links.
-  // From: https://github.com/ky-is/vue-cli-plugin-tailwind
-  whitelistPatterns: [/-(leave|enter|appear)(|-(to|from|active))$/, /^(?!(|.*?:)cursor-move).+-move$/, /^router-link(|-exact)-active$/],
-});
+let paths = function(path) {
+    return glob.sync('docs'+path+'/**/*.md').map(f => f.replace("docs","").replace("README.md","")); 
+}
 
+let links = function(path) {
+    return [ path+'/', ...paths(path+'/*') ]
+}
 module.exports = {
   title: "Yuika documentation",
   description: "",
   themeConfig: {
-    sidebar: 'auto',
+    sidebar: [
+      { title: 'Yuika', path: '/', },
+      { title: 'Components', path: '/components/', children: links('/components') },
+    ]
   },
   postcss: {
     plugins: [
-      require("autoprefixer"),
-      require("tailwindcss")("./tailwind.config.js"),
-      ...process.env.NODE_ENV === 'production'
-        ? [purgecss]
-        : [],
+      tailwindcss,
+      autoprefixer,      
     ]
   }
 };

docs/.vuepress/enhanceApp.js

@@ -0,0 +1,15 @@
+import { Header, HeaderLeft, HeaderMiddle, HeaderRight } from '../../src/components';
+import '../../src/assets/css/tailwind.css';
+
+export default ({
+  Vue, // the version of Vue being used in the VuePress app
+  options, // the options for the root Vue instance
+  router, // the router instance for the app
+  siteData // site metadata
+}) => {
+  Vue.component('Header', Header);
+  Vue.component('HeaderLeft', HeaderLeft);
+  Vue.component('HeaderMiddle', HeaderMiddle);
+  Vue.component('HeaderRight', HeaderRight);
+}
+

docs/components/Header/README.md

@@ -0,0 +1,10 @@
+# Header
+<Header>
+  <HeaderLeft>
+  </HeaderLeft>
+  <HeaderMiddle>
+    <p>Yuika Mitsumine</p>
+  </HeaderMiddle>
+  <HeaderRight>
+  </HeaderRight>
+</Header>

docs/components/README.md

@@ -0,0 +1 @@
+# Components

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mitsuminedamillora/yuika",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "main": "./dist/yuika.common.js",
   "license": "MIT",
   "scripts": {

src/components/index.js

@@ -0,0 +1,10 @@
+import { Header, HeaderLeft, HeaderMiddle, HeaderRight } from './Header';
+import { NavigationBar, NavigationItem } from './Navigation';
+export {
+  Header,
+  HeaderLeft,
+  HeaderMiddle,
+  HeaderRight,
+  NavigationBar,
+  NavigationItem,
+}

src/main.js

@@ -1,9 +1,3 @@
-import Vue from 'vue'
-import App from './App.vue'
-import '@/assets/css/tailwind.css';
 
-Vue.config.productionTip = false
+export * from './components';
 
-new Vue({
-  render: h => h(App),
-}).$mount('#app')

yarn.lock

@@ -4063,7 +4063,7 @@ glob-to-regexp@^0.3.0:
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab"
   integrity sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=
 
-glob@^7.0.3, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4:
+glob@^7.0.3, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
   version "7.1.6"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
   integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==