reorganize and implement unocss properly

holyspiritomb · Feb 23, 2025 · 5f3fba0 · 5f3fba0
1 parent bc432ae
commit 5f3fba0
Show file tree

Hide file tree

Showing 45 changed files with 574 additions and 462 deletions.
diff --git a/.vitepress/config.ts b/.vitepress/config.ts
@@ -1,83 +1,21 @@
 import { defineConfig } from "vitepress";
 import { generateSidebar } from "vitepress-sidebar";
-import { groupIconMdPlugin, groupIconVitePlugin } from "vitepress-plugin-group-icons";
-import MarkdownItLabel from "@sirenia/markdown-it-label";
+import { groupIconMdPlugin } from "vitepress-plugin-group-icons";
+// import MarkdownItLabel from "@sirenia/markdown-it-label";
 import markdownItAttrs from "markdown-it-attrs";
 import markdownFootnote from "markdown-it-footnote";
-import { gitCommitHashPlugin } from "vite-plugin-git-commit-hash";
-import Terminal from "vite-plugin-terminal";
-import vueDevTools from "vite-plugin-vue-devtools";
-import { NodePackageImporter } from "sass-embedded";
-import Components from "unplugin-vue-components/vite";
-import Icons from "unplugin-icons/vite";
-import { VueUseComponentsResolver } from "unplugin-vue-components/resolvers";
-import IconsResolver from "unplugin-icons/resolver";
-import UnoCSS from "unocss/vite";
-import svgLoader from "vite-svg-loader";
 
-import type { PluginOption, UserConfig } from "vite";
-import type { LogsOutput } from "vite-plugin-terminal";
 
-const extraPlugins: PluginOption = process.env.GITHUBRUNNER === "push" ? [] : [vueDevTools()];
-const terminalOutputOpts: LogsOutput = process.env.GITHUBRUNNER === "push" ? ["terminal"]
-  : process.env.ZSH === "/usr/share/oh-my-zsh" ? ["terminal", "console"]
-    : ["terminal"];
+if (process.env.NODE_ENV === "development") {
+  console.debug("Vitepress env:\n", process.env);
+}
+
 const distDir: string = process.env.GITHUBRUNNER === "push" ? "../web/autpunk.space/public_html"
   : process.env.ZSH === "/usr/share/oh-my-zsh" ? "./dist"
     : "../web/autpunk.space/public_html";
 
-const vitePlugins: PluginOption = [
-  ...extraPlugins,
-  groupIconVitePlugin(),
-  UnoCSS(),
-  svgLoader(),
-  Components({
-    dirs: [".vitepress/theme/components"],
-    extensions: ["vue", "md"],
-    include: [/\.(vue|md)($|\?)/],
-    dts: true,
-    resolvers: [
-      VueUseComponentsResolver(),
-      IconsResolver(),
-    ],
-  }),
-  Icons(),
-  Terminal({
-    console: "terminal",
-    output: terminalOutputOpts,
-  }),
-  gitCommitHashPlugin({
-    isLongHash: true,
-  }),
-];
-
-const viteOptions: UserConfig = {
-  css: {
-    preprocessorOptions: {
-      scss: {
-        api: "modern-compiler",
-        importers: [new NodePackageImporter()],
-      },
-    },
-    devSourcemap: true,
-  },
-  define: {
-    BUILD_DATE: JSON.stringify(new Date().toUTCString()),
-  },
-  plugins: vitePlugins,
-  resolve: {
-    alias: [
-      {
-        find: /^~([^/])/, 
-        replacement: "$1",
-      },
-    ],
-  },
-};
-
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
-  vite: viteOptions,
   title: "Autpunk Space",
   base: "/",
   // titleTemplate: 'Autpunk Dot Space',
@@ -89,7 +27,6 @@ export default defineConfig({
   lang: "en-US",
   lastUpdated: true,
   appearance: "dark",
-  srcDir: "./src",
   outDir: distDir,
   srcExclude: ["**/README.md", "**/LICENSE.md"],
   markdown: {
@@ -104,11 +41,11 @@ export default defineConfig({
       md.use(markdownFootnote);
       md.use(markdownItAttrs);
       md.use(groupIconMdPlugin);
-      md.use(MarkdownItLabel, {
-        cssClassLabel: "mdi-label",
-        cssClassTextLight: "mdi-label-text-light",
-        cssClassTextDark: "mdi-label-text-dark",
-      });
+      // md.use(MarkdownItLabel, {
+      //   cssClassLabel: "mdi-label",
+      //   cssClassTextLight: "mdi-label-text-light",
+      //   cssClassTextDark: "mdi-label-text-dark",
+      // });
       md.renderer.rules.footnote_block_open = () => (
         /* eslint-disable stylistic/quotes */
         '<hr>\n' +
@@ -136,7 +73,7 @@ export default defineConfig({
       { text: "Thought Fossils", link: "/thought-fossils" },
       { text: "Unsorted Fragments", link: "/unsorted-fragments" },
       // { text: "Other People", link: "/other-people" },
-      // { text: "Vitepress Resources", link: "/vitepress-default" },
+      { text: "Demo", link: "/vitepress-default/components" },
     ],
     search: {
       // {{{

diff --git a/.vitepress/theme/components/CustomHeroImg.vue b/.vitepress/theme/components/CustomHeroImg.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import HeroSvg from "../../../src/heart.svg?component";
+import HeroSvg from "../../../heart.svg?component";
 </script>
 
 <template>

diff --git a/.vitepress/theme/components/SpeechEasy.vue b/.vitepress/theme/components/SpeechEasy.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import EasySpeech from "easy-speech";
-import { VPButton } from "vitepress/theme-without-fonts";
 import { useTemplateRef, onMounted, ref } from 'vue';
 
 const speechMe = (textInput) => {
@@ -41,11 +40,11 @@ onMounted(() => {
   <div>
     <input
       ref="read-this-aloud"
-      class="rounded-md border-1 focus:outline-1 focus:outline-blue-400 w-60 text-sm shadow-blue-400/50 focus:shadow-blue-400 shadow-md m-[0.5rem] h-[3rem]"
+      class="w-70 input"
       value="Workers of the world, unite! You have nothing to lose but your chains!"
     />
     <button
-      class="rounded-xl float-right bg-blue-400 text-bold text-black p-3 border-1 text-sm focus:shadow-blue-500/50 shadow-md m-[0.5rem] h-[3rem] pl-4 pr-4"
+      class="float-right max-w-20 text-sm btn"
       @click="speechMe(textToSynthesize.value)"
     >
       {{ buttonText }}

diff --git a/.vitepress/theme/components/TextInput.vue b/.vitepress/theme/components/TextInput.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+interface Props {
+  label?: string
+  value?: string
+  placeholder?: string
+}
+const props = withDefaults(defineProps<Props>(), {
+  value: '',
+  placeholder: '',
+})
+
+</script>
+<template>
+  <label class="label" v-if="label" for="">{{ label }}</label>
+  <input
+    type="text"
+    class="input"
+    :value="value"
+    :placeholder="placeholder"
+  />
+</template>
diff --git a/.vitepress/theme/custom.scss b/.vitepress/theme/custom.scss
@@ -1,4 +1,5 @@
 @use "sass:color";
+@use "sass:map";
 @use "pkg:@rose-pine/palette/dist/css/rose-pine.css" as *;
 @use "pkg:@catppuccin/palette/css/catppuccin.css" as *;
 
@@ -11,41 +12,38 @@
     #04a5e5
   );
 
-  --vp-home-hero-image-background-image: linear-gradient(-45deg, #ea76cb 50%, #04a5e5 50%);
-  --vp-home-hero-image-filter: blur(44px);
-  --vp-badge-info-text: var(--vp-custom-block-info-text);
+  --vp-badge-danger-bg: var(--vp-custom-block-danger-bg);
+  --vp-badge-danger-text: var(--vp-custom-block-danger-text);
   --vp-badge-info-bg: var(--vp-custom-block-info-bg);
-  --vp-badge-warning-text: var(--vp-custom-block-warning-text);
-  --vp-badge-warning-bg: var(--vp-custom-block-warning-bg);
-  --vp-badge-tip-text: var(--vp-custom-block-tip-text);
+  --vp-badge-info-text: var(--vp-custom-block-info-text);
   --vp-badge-tip-bg: var(--vp-custom-block-tip-bg);
-  --vp-badge-danger-text: var(--vp-custom-block-danger-text);
-  --vp-badge-danger-bg: var(--vp-custom-block-danger-bg);
+  --vp-badge-tip-text: var(--vp-custom-block-tip-text);
+  --vp-badge-warning-bg: var(--vp-custom-block-warning-bg);
+  --vp-badge-warning-text: var(--vp-custom-block-warning-text);
+  --vp-button-alt-bg: rgb(var(--ctp-mocha-pink-rgb) / 1 );
+  --vp-c-bg-soft: rgb(var(--ctp-mocha-pink-rgb) / .5);
+  /* --vp-c-gutter: rgb(var(--ctp-latte-base-rgb) / 1); */
+  /* --vp-code-block-bg: rgb(var(--ctp-latte-pink-rgb) / 1); */
+  /* --vp-code-lang-color: var(--ctp-latte-sky); */
+  --vp-home-hero-image-background-image: linear-gradient(-45deg, #ea76cb 50%, #04a5e5 50%);
+  --vp-home-hero-image-filter: blur(44px);
 }
 .dark {
-  --vp-c-bg: var(--rp-surface);
-  --vp-nav-bg-color: var(--rp-base);
-  --vp-c-bg-alt: var(--rp-base);
-  --vp-c-bg-elv: var(--rp-overlay);
-  --vp-c-bg-soft: var(--rp-overlay);
-
-  --vp-c-border: var(--rp-highlight-med);
-  --vp-c-divider: var(--rp-highlight-med);
-  --vp-c-gutter: var(--rp-highlight-med);
-
-  --vp-c-text-1: var(--rp-text);
-  --vp-c-text-2: color.mix(var(--rp-text), var(--rp-subtle), 50%);
-  --vp-c-text-3: var(--rp-subtle);
-  /* --vp-custom-block-info-bg: rgb(var(--ctp-mocha-sky-rgb) / 0.30); */
-  /* --vp-custom-block-tip-bg: rgb(var(--ctp-mocha-green-rgb) / 0.40); */
-  /* --vp-custom-block-warning-bg: rgb(var(--ctp-mocha-yellow-rgb) / 0.40); */
-  /* --vp-custom-block-danger-bg: rgb(var(--ctp-mocha-red-rgb) / 0.50); */
-  /* --vp-custom-block-details-bg: var(--rp-highlight-med); */
+  /* --vp-button-alt-bg: rgb(var(--ctp-mocha-pink-rgb) / 1 ); */
+  --vp-button-alt-text: var(--ctp-mocha-base);
+  /* --vp-c-bg-alt: rgb(var(--ctp-mocha-pink-rgb) / 0.05); */
+  /* --vp-c-bg-elv: var(--rp-overlay); */
+  --vp-c-bg-soft: rgb(var(--ctp-mocha-mantle-rgb));
+  /* --vp-c-bg: var(--rp-surface); */
+  --vp-c-border: rgb(var(--ctp-mocha-sky-rgb) / 0.5);
+  /* --vp-c-divider: var(--rp-highlight-med); */
+  /* --vp-c-gutter: rgb(var(--ctp-mocha-sky) / 1); */
+  --vp-code-lang-color: var(--ctp-macchiato-sky);
+  --vp-custom-block-danger-text: var(--ctp-mocha-red);
   --vp-custom-block-info-text: var(--ctp-mocha-sky);
   --vp-custom-block-tip-text: var(--ctp-mocha-green);
   --vp-custom-block-warning-text: var(--ctp-mocha-yellow);
-  --vp-custom-block-danger-text: var(--ctp-mocha-red);
-  --vp-custom-block-details-text: var(--rp-text);
+  --vp-nav-bg-color: var(--rp-base);
 }
 
 .footnotes {
@@ -55,36 +53,6 @@
   }
 }
 
-.mdi-label {
-  padding: 0.2em 0.6em 0.3em;
-  font-size: 85%;
-  font-weight: 600;
-  white-space: nowrap;
-  vertical-align: baseline;
-  border-radius: 0.85em;
-}
-
-.mdi-label[style="background-color:rgb(255, 255, 0);"] {
-  background-color: var(--rp-gold) !important;
-}
-.mdi-label[style="background-color:rgb(255, 0, 255);"] {
-  background-color: var(--rp-moon-love) !important;
-  color: #000000;
-}
-.mdi-label[style="background-color:rgb(0, 255, 255);"] {
-  background-color: var(--ctp-mocha-sky) !important;
-}
-.mdi-label[style="background-color:rgb(0, 255, 0);"] {
-  background-color: var(--ctp-mocha-green) !important;
-}
-
-.mdi-label-text-dark {
-  color: black;
-}
-.mdi-label-text-light {
-  color: white;
-}
-
 .group:has([role="button"]) .VPSidebarItem.level-0 .items {
   padding-left: 16px !important;
   border-left: 1px solid var(--vp-c-divider);
@@ -97,6 +65,6 @@
     background-image: url("/blur.svg");
     background-position: center center;
     background-repeat: none;
-    background-size: contain;
+    /* background-size: contain; */
   }
 }
diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts
@@ -2,16 +2,55 @@ import { h } from "vue";
 import type { Theme } from "vitepress";
 import DefaultTheme from "vitepress/theme-without-fonts";
 import "virtual:group-icons.css";
+import "uno.css";
 import "victormono";
 import "@infolektuell/noto-color-emoji";
 import "./fonts.scss";
-import "@catppuccin/vitepress/theme/mocha/red.css";
+import "@catppuccin/vitepress/theme/mocha/sky.css";
 import "./custom.scss";
-import "uno.css";
 import { VPButton } from "vitepress/theme-without-fonts";
 import LayoutBottom from "./components/LayoutBottom.vue";
 import SpeechEasy from "./components/SpeechEasy.vue";
 import CustomHeroImg from "./components/CustomHeroImg.vue";
+import TextInput from "./components/TextInput.vue";
+import { onDevToolsClientConnected, addCustomTab } from "@vue/devtools-api";
+
+// devtools stuff {{{
+if (process.env.NODE_ENV === "development") {
+  const SFC = /* vue */ `
+    <template>
+      <div class="h-full w-full flex flex-col items-center justify-center">
+        <div>
+          <a href="/__unocss">UnoCSS Inspector</a>
+        </div>
+        <div>
+          <a href="/__unocss" target="_blank">(in new window)</a>
+        </div>
+        <div>
+          <a href="/vitepress-default/components" target="_blank">Components</a>
+        </div>
+      </div>
+    </template>
+  `;
+
+  onDevToolsClientConnected(() => {
+    console.debug("devtools client connected");
+    addCustomTab({
+      // unique identifier
+      name: "unocss",
+      // title to display in the tab
+      title: "UnoCSS",
+      // any icon from material design icons or a URL to an image
+      icon: "/__unocss/favicon.svg",
+      view: {
+        type: "sfc",
+        sfc: SFC,
+      },
+      category: "app",
+    });
+  });
+}
+// }}}
 
 export default {
   extends: DefaultTheme,
@@ -25,6 +64,7 @@ export default {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   enhanceApp({ app, router, siteData }) {
     app.component("VPButton", VPButton).
+      component("TextInput", TextInput).
       component("SpeechEasy", SpeechEasy);
   },
 } satisfies Theme // eslint-disable-line stylistic/semi
diff --git a/.vitepress/uno.config.ts b/.vitepress/uno.config.ts
diff --git a/README.md b/README.md
@@ -1,2 +1,5 @@
 # autpunk.space
-my website's source files
+
+![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/holyspiritomb/autpunk.space/build.yml?event=push&style=for-the-badge&logo=vitepress&logoSize=auto)
+
+source files for [autpunk.space](https://autpunk.space)