fallback svg gradient is back and it's better than ever

.vitepress/config.ts

@@ -6,9 +6,9 @@ import markdownItAttrs from "markdown-it-attrs";
 import markdownFootnote from "markdown-it-footnote";
 
 
-if (process.env.NODE_ENV === "development") {
-  console.debug("Vitepress env:\n", process.env);
-}
+// 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"
@@ -101,7 +101,7 @@ export default defineConfig({
     sidebar: generateSidebar({ 
       capitalizeFirst: true, // {{{
       collapsed: true,
-      debugPrint: true,
+      // debugPrint: true,
       documentRootPath: "./",
       excludeFilesByFrontmatterFieldName: "exclude",
       excludePattern: ["README", "LICENSE", "LICENSE.md", "README.md", "vitepress-default", "fragments.md", "dist", "public", "node_modules"],

.vitepress/theme/custom.scss

@@ -80,14 +80,10 @@
 }
 
 @supports (-moz-animation-delay:initial) {
-  :root {
-    // --vp-home-hero-image-background-image: linear-gradient(-45deg, #ea76cb 30%, #04a5e5 65%);
-    // --vp-home-hero-image-background-image: url("/blurgrad.svg");
-  }
   .VPHero.has-image.VPHomeHero > .container > .image > .image-container {
     background-image: url("/blurgrad.svg") !important;
     background-position: center center;
     background-repeat: no-repeat;
     background-size: cover;
   }
-}
+}

.vitepress/theme/index.ts

@@ -2,11 +2,11 @@ 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/sky.css";
+import "uno.css";
 import "./custom.scss";
 import { VPButton } from "vitepress/theme-without-fonts";
 import LayoutBottom from "./components/LayoutBottom.vue";

package.json

@@ -52,6 +52,7 @@
     "@types/eslint": "^9.6.1",
     "@types/eslint-plugin-markdown": "^2.0.2",
     "@types/eslint__js": "^8.42.3",
+    "@types/markdown-it": "^14",
     "@types/markdown-it-attrs": "^4",
     "@types/markdown-it-footnote": "^3.0.4",
     "@types/node": "^22.10.10",
@@ -64,8 +65,10 @@
     "eslint-plugin-markdown": "^5.1.0",
     "eslint-plugin-vue": "^9.32.0",
     "globals": "^15.15.0",
+    "markdown-it": "^14.1.0",
     "typescript-eslint": "^8.21.0",
-    "unocss-catppuccin": "^1.1.3",
+    "unocss-preset-catppuccin": "^0.1.0",
+    "vite": "^6.2.0",
     "vite-svg-loader": "^5.1.0",
     "vite-tsconfig-paths": "^5.1.4",
     "vue-eslint-parser": "^9.4.3"

uno.config.ts

@@ -1,24 +1,28 @@
 import {
   defineConfig,
   presetAttributify,
+  presetIcons,
   transformerDirectives,
   transformerVariantGroup,
 } from "unocss";
 import presetWind from "@unocss/preset-wind3";
-import { presetCatppuccin } from "unocss-catppuccin";
+import { presetCatppuccin } from "unocss-preset-catppuccin";
 
 export default defineConfig({
   presets: [
-    presetWind(),
     presetCatppuccin({
-      defaultFlavour: 'mocha',
-      prefix: false,
+      defaultFlavour: "mocha",
     }),
     presetAttributify(),
+    presetIcons({
+      scale: 1.2,
+      cdn: "https://esm.sh/",
+    }),
+    presetWind(),
   ],
   shortcuts: {
-    "btn": "rounded-full shadow-md py-2 px-4 bg-pink-200 dark:bg-pink-500 font-bold border-pink outline-pink outline-1 shadow-pink-500/50 m-[0.5rem] h-[3rem] focus:shadow-pink-500 active:shadow-lg border-1 p-3",
-    "input": "py-2 px-4 rounded-sm shadow-md focus:shadow-lg focus:shadow-blue-500 shadow-blue-200 py-2 px-4 border-1 border-pink-400 focus:border-pink-700 bg-pink-100 dark:bg-gray-700/50 dark:shadow-blue-500 caret-pink dark:caret-blue m-[0.5rem] h-[3rem] focus:outline-1 focus:outline-blue-400",
+    "btn": "rounded-full shadow-md py-2 px-4 bg-ctp-latte-pink dark:bg-ctp-latte-pink font-bold border-ctp-pink outline-ctp-pink outline-1 shadow-ctp-pink m-[0.5rem] h-[3rem] active:shadow-lg border-1 p-3",
+    "input": "py-2 px-4 rounded-sm shadow-md focus:shadow-lg focus:shadow-ctp-sky shadow-ctp-sky py-2 px-4 border-1 border-pink-400 focus:border-pink-700 bg-pink-100 dark:bg-gray-700/50 dark:shadow-ctp-sky caret-pink dark:caret-ctp-sky m-[0.5rem] h-[3rem] focus:outline-1 focus:outline-blue-400",
     "label": "py-2 px-4 text-md",
   },
   transformers: [

vite.config.ts

@@ -2,9 +2,9 @@ import { defineConfig } from "vite";
 import { gitCommitHashPlugin } from "vite-plugin-git-commit-hash";
 import Components from "unplugin-vue-components/vite";
 import { groupIconVitePlugin } from "vitepress-plugin-group-icons";
-import Icons from "unplugin-icons/vite";
+// import Icons from "unplugin-icons/vite";
 import { VueUseComponentsResolver } from "unplugin-vue-components/resolvers";
-import IconsResolver from "unplugin-icons/resolver";
+// import IconsResolver from "unplugin-icons/resolver";
 import UnoCSS from "unocss/vite";
 import Terminal from "vite-plugin-terminal";
 import vueDevTools from "vite-plugin-vue-devtools";
@@ -25,15 +25,15 @@ const vitePlugins: PluginOption = [
   UnoCSS(),
   groupIconVitePlugin(),
   svgLoader(),
-  Icons(),
+  // Icons(),
   Components({
     dirs: [".vitepress/theme/components"],
     extensions: ["vue", "md"],
     include: [/\.(vue|md)($|\?)/],
     dts: true,
     resolvers: [
       VueUseComponentsResolver(),
-      IconsResolver(),
+      // IconsResolver(),
     ],
   }),
   Terminal({

vitepress-default/components.md

@@ -67,3 +67,22 @@ Output:
 ## Speech
 
 <SpeechEasy/>
+
+## Icons via UnoCSS
+
+<div i-carbon-play-filled></div>
+<div i-carbon-pause-outline-filled></div>
+<div i-carbon-stop-filled></div>
+<div i-carbon-stop-outline-filled></div>
+<div i-carbon-logo-vue></div>
+<div i-mdi-play-circle></div>
+<div i-mdi-pause-circle></div>
+<div i-mdi-stop-circle></div>
+<div i-mdi-language-markdown></div>
+<div i-devicon-vitejs></div>
+<div i-devicon-archlinux></div>
+<div i-devicon-react></div>
+<div i-devicon-npm></div>
+<div i-devicon-vscode></div>
+<div i-devicon-vuejs></div>
+<div i-catppuccin-vue></div>