proper vitepress

DeFUCC · Jan 19, 2023 · 07ad9cb · 07ad9cb
1 parent 771ce3b
commit 07ad9cb
Show file tree

Hide file tree

Showing 6 changed files with 123 additions and 61 deletions.
diff --git a/docs/.vitepress/components/page-header.vue b/docs/.vitepress/components/page-header.vue
@@ -0,0 +1,15 @@
+<script setup>
+
+</script>
+
+<template lang="pug">
+nav.header.sticky.top-0.w-full.p-8.bg-dark-200.text-white.text-2xl.font-bold.shadow-xl.mb-8.flex.flex-wrap.gap-6.items-center
+	h1.flex-auto Gun-avatar
+	a(href="https://codepen.io/Davay/pen/eYGeGMZ" title="Codepen playground" target="_blank")
+		.i-la-codepen
+	a(href="https://www.npmjs.com/package/gun-avatar" title="NPM package" target="_blank")
+		svg.iconify.iconify--la(xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32")
+			path(d="M0 10v11h9v2h7v-2h16V10H0zm1.777 1.777h7.114v7.668H7.11v-5.888H5.334v5.888H1.777v-7.668zm8.891 0H17.779v7.666h-3.556v1.78h-3.555v-9.446zm8.889 0H30.225v7.668h-1.78v-5.888h-1.777v5.888h-1.777v-5.888h-1.78v5.888h-3.554v-7.668zm-5.334 1.78v4.111H16v-4.111h-1.777z" fill="currentColor")
+	a(href="https://github.com/DeFUCC/gun-avatar" title="GitHub repository" target="_blank")
+		.i-la-github
+</template>
diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
@@ -1,12 +1,68 @@
 import { defineConfig } from "vitepress";
+import Unocss from 'unocss/vite'
+import { presetUno, presetIcons, transformerDirectives, extractorSplit } from "unocss";
+import extractorPug from '@unocss/extractor-pug'
+import Components from "unplugin-vue-components/vite";
 
 export default defineConfig({
 	title: 'Gun-avatar',
 	titleTemplate: "Gun-avatar public key visualizer",
 	outDir: "../public/docs/",
 	lang: 'en-US',
-	lastUpdated: true,
 	themeConfig: {
+		logo: '/avatar.png',
+		siteTitle: 'Gun-avatar',
 		repo: "https://github.com/defucc/gun-avatar",
+		nav: [
+			{ text: 'NPM package', link: "https://www.npmjs.com/package/gun-avatar" },
+			{ text: 'Codepen playground', link: "https://codepen.io/Davay/pen/eYGeGMZ" },
+		],
+		socialLinks: [
+			{ icon: "github", link: "https://github.com/defucc/gun-avatar" },
+		],
+		footer: {
+			message: 'Released under the MIT License.',
+			copyright: 'Copyright © 2020-PRESENT Davay42',
+		},
+
+	},
+	head: [
+		['meta', { name: 'theme-color', content: '#ffffff' }],
+		['meta', { name: 'author', content: 'Davay42' }],
+		['meta', { property: 'og:title', content: 'Gun-Avatar' }],
+		['meta', { property: 'og:image', content: 'https://gun-avatar.js.org/avatar.png' }],
+		['meta', { property: 'og:description', content: 'Public key  human recognizable visual hash' }],
+		['meta', { name: 'twitter:card', content: 'summary_large_image' }],
+		['meta', { name: 'twitter:creator', content: '@davay42' }],
+		['meta', { name: 'twitter:image', content: 'https://gun-avatar.js.org/avatar.png' }],
+	],
+	vite: {
+		plugins: [
+			Components({
+				dirs: ["./.vitepress/components/"],
+				extensions: ["html", "vue"],
+				globalNamespaces: ["global"],
+				include: [/\.vue$/, /\.vue\?vue/, /\.html$/, /\.md$/],
+				exclude: [/node_modules/, /\.git/],
+			}),
+			Unocss({
+				presets: [
+					presetIcons({
+						extraProperties: {
+							'display': 'inline-block',
+							'vertical-align': 'middle',
+						},
+					}),
+					presetUno()
+				],
+				transformers: [
+					transformerDirectives(),
+				],
+				extractors: [
+					extractorPug(),
+					extractorSplit,
+				],
+			}),
+		]
 	}
 })
diff --git a/docs/.vitepress/theme/Layout.vue b/docs/.vitepress/theme/Layout.vue
@@ -0,0 +1,11 @@
+<script setup>
+import DefaultTheme from 'vitepress/theme'
+
+const { Layout } = DefaultTheme
+</script>
+
+<template lang="pug">
+Layout
+	template(#home-hero-image)
+		.text-20rem ✨
+</template>
diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
@@ -0,0 +1,13 @@
+import DefaultTheme from 'vitepress/theme'
+import MyLayout from './Layout.vue'
+
+import "@unocss/reset/tailwind.css";
+import "uno.css";
+
+export default {
+	...DefaultTheme,
+	Layout: MyLayout,
+	enhanceApp({ app }) {
+
+	}
+}
diff --git a/docs/index.md b/docs/index.md
@@ -1,5 +1,28 @@
 ---
-title: Gun-avatar
+title: Gun-Avatar
+layout: home
+hero:
+  name: Gun-Avatar
+  text: Public key visualisation tool
+  tagline: User avatar and background generator
+  image:
+    src: /logo.png
+    alt: Gun-Avatar
+  actions:
+    - theme: brand
+      text: Get Started
+      link: /guide/what-is-vitepress
+    - theme: alt
+      text: View on GitHub
+      link: https://github.com/defucc/gun-avatar
+features:
+  - icon: 🛠️
+    title: Simple and minimal, always
+    details: Lorem ipsum...
+  - icon: ⚡️
+    title: Another cool feature
+    details: Lorem ipsum...
+  - icon: ✨
+    title: Another cool feature
+    details: Lorem ipsum...
 ---
-
-Welcome!
diff --git a/vite.config.js b/vite.config.js
@@ -1,9 +1,4 @@
-import path from "path";
 import { defineConfig } from "vite";
-import Components from "unplugin-vue-components/vite";
-import Icons from "unplugin-icons/vite";
-import IconsResolver from "unplugin-icons/resolver";
-import Vue from "@vitejs/plugin-vue";
 import Unocss from 'unocss/vite'
 import { presetUno, presetIcons, transformerDirectives, extractorSplit } from "unocss";
 import extractorPug from '@unocss/extractor-pug'
@@ -12,29 +7,8 @@ export default defineConfig({
   base: "./",
   build: {
     outDir: "./demo",
-    optimizeDeps: {
-      include: [
-        "gun",
-        "gun/gun",
-        "gun/sea",
-        "gun/sea.js",
-        "gun/lib/then",
-        "gun/lib/webrtc",
-        "gun/lib/radix",
-        "gun/lib/radisk",
-        "gun/lib/store",
-        "gun/lib/rindexed",
-      ],
-    },
   },
   plugins: [
-    Vue({
-      template: {
-        compilerOptions: {
-          isCustomElement: tag => tag == 'gun-avatar'
-        }
-      }
-    }),
     Unocss({
       presets: [
         presetIcons({
@@ -53,36 +27,6 @@ export default defineConfig({
         extractorSplit,
       ],
     }),
-    Icons({
-      /* options */
-    }),
-    Components({
-      dirs: ["src/demo/components/"],
-      extensions: ["html", "vue"],
-      directoryAsNamespace: true,
-      globalNamespaces: ["global"],
-      include: [/\.vue$/, /\.vue\?vue/, /\.html$/],
-      exclude: [/node_modules/, /\.git/],
-      resolvers: [
-        IconsResolver({
-          componentPrefix: "",
-        }),
-      ],
-    }),
+
   ],
 })
-
-
-
-function moduleExclude(match) {
-  const m = (id) => id.indexOf(match) > -1;
-  return {
-    name: `exclude-${match}`,
-    resolveId(id) {
-      if (m(id)) return id;
-    },
-    load(id) {
-      if (m(id)) return `export default {}`;
-    },
-  };
-}