fix(style): scss, linting, fixes

.stylelintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "stylelint-config-standard-scss"
+}

api/routes/single-page.ts

@@ -18,7 +18,13 @@ import { fetcher } from 'itty-fetcher'
 
 // Look inside tbe docs directory
 const GITHUB_REPO = 'https://api.github.com/repos/fmhy/FMHYEdit/contents/docs/'
-const EXCLUDE_FILES = ['README.md', 'index.md', 'feedback.md', 'posts.md']
+const EXCLUDE_FILES = [
+  'README.md',
+  'index.md',
+  'feedback.md',
+  'posts.md',
+  'sandbox.md'
+]
 const EXCLUDE_DIRECTORIES = ['posts/']
 
 interface File {

docs/.vitepress/theme/index.ts

@@ -20,7 +20,7 @@ import { loadProgress } from './composables/nprogress'
 import Layout from './Layout.vue'
 import Post from './PostLayout.vue'
 
-import './style.css'
+import './style.scss'
 import 'uno.css'
 
 import Feedback from './components/Feedback.vue'

docs/.vitepress/theme/style.scss

@@ -24,19 +24,22 @@
   --vp-c-bg-mark: rgb(232, 232, 232);
 
   /* Colors: Custom Block */
+  /** Info */
   --vp-custom-block-info-bg: theme('colors.swarm.100');
   --vp-custom-block-info-border: theme('colors.swarm.800');
   --vp-custom-block-info-text: theme('colors.swarm.800');
   --vp-custom-block-info-text-deep: theme('colors.swarm.900');
+  /** Tip */
   --vp-custom-block-tip-bg: theme('colors.meadow.100');
   --vp-custom-block-tip-border: theme('colors.meadow.800');
   --vp-custom-block-tip-text: theme('colors.meadow.800');
   --vp-custom-block-tip-text-deep: theme('colors.meadow.900');
-  --vp-custom-block-warning-bg: rgba(253, 224, 71, 0.1);
-  --vp-custom-block-warning-border: rgba(202, 138, 4, 1);
-  --vp-custom-block-warning-text: rgba(234, 179, 8, 1);
-  --vp-custom-block-warning-text-deep: rgba(250, 204, 21, 1);
-  --vp-custom-block-danger-bg: theme('colors.carnation.100');
+  /** Warning */
+  --vp-custom-block-warning-bg: theme('colors.merlin.100'),
+    --vp-custom-block-warning-border: theme('colors.merlin.800'),
+    --vp-custom-block-warning-text: theme('colors.merlin.800'),
+    --vp-custom-block-warning-text-deep: theme('colors.merlin.900'),
+    /** Danger */ --vp-custom-block-danger-bg: theme('colors.carnation.100');
   --vp-custom-block-danger-border: theme('colors.carnation.800');
   --vp-custom-block-danger-text: theme('colors.carnation.800');
   --vp-custom-block-danger-text-deep: theme('colors.carnation.900');
@@ -55,22 +58,26 @@
   --vp-c-bg-elv: rgba(23, 23, 23, 0.8);
 
   /* Colors: Custom Block */
+  /** Info */
   --vp-custom-block-info-bg: theme('colors.swarm.950');
-  --vp-custom-block-info-border: theme('colors.swarm.600');
-  --vp-custom-block-info-text: theme('colors.swarm.500');
-  --vp-custom-block-info-text-deep: theme('colors.swarm.600');
+  --vp-custom-block-info-border: theme('colors.swarm.800');
+  --vp-custom-block-info-text: theme('colors.swarm.200');
+  --vp-custom-block-info-text-deep: theme('colors.swarm.200');
+  /** Tip */
   --vp-custom-block-tip-bg: theme('colors.meadow.950');
-  --vp-custom-block-tip-border: theme('colors.meadow.600');
-  --vp-custom-block-tip-text: theme('colors.meadow.500');
-  --vp-custom-block-tip-text-deep: theme('colors.meadow.600');
-  --vp-custom-block-warning-bg: rgba(253, 224, 71, 0.1);
-  --vp-custom-block-warning-border: rgba(202, 138, 4, 1);
-  --vp-custom-block-warning-text: rgba(234, 179, 8, 1);
-  --vp-custom-block-warning-text-deep: rgba(250, 204, 21, 1);
+  --vp-custom-block-tip-border: theme('colors.meadow.800');
+  --vp-custom-block-tip-text: theme('colors.meadow.200');
+  --vp-custom-block-tip-text-deep: theme('colors.meadow.200');
+  /** Warning */
+  --vp-custom-block-warning-bg: theme('colors.merlin.950');
+  --vp-custom-block-warning-border: theme('colors.merlin.800');
+  --vp-custom-block-warning-text: theme('colors.merlin.200');
+  --vp-custom-block-warning-text-deep: theme('colors.merlin.200');
+  /** Danger */
   --vp-custom-block-danger-bg: theme('colors.carnation.950');
-  --vp-custom-block-danger-border: theme('colors.carnation.600');
-  --vp-custom-block-danger-text: theme('colors.carnation.400');
-  --vp-custom-block-danger-text-deep: theme('colors.carnation.500');
+  --vp-custom-block-danger-border: theme('colors.carnation.800');
+  --vp-custom-block-danger-text: theme('colors.carnation.200');
+  --vp-custom-block-danger-text-deep: theme('colors.carnation.200');
 }
 
 .vp-doc a {
@@ -81,13 +88,13 @@
   text-decoration-color: transparent;
   -webkit-text-decoration-color: transparent;
   transition: text-decoration-color 0.25s;
-}
 
-.vp-doc a:hover {
+  &:hover {
     color: var(--vp-c-brand-1);
     text-decoration-color: var(--vp-c-brand-1);
     -webkit-text-decoration-color: var(--vp-c-brand-1);
   }
+}
 
 .vp-doc .custom-block a {
   text-decoration: underline;
@@ -97,25 +104,25 @@
 
 ::selection {
   background-color: #5586a6;
-}
 
-.dark ::selection {
+  .dark & {
     background-color: #0f2c47;
   }
+}
 
 .VPFooter a {
   text-decoration-line: underline;
   text-decoration-style: dashed;
   text-underline-offset: 5px;
   transition: 0.3s;
-}
 
-.VPFooter a:hover {
+  &:hover {
     color: var(--vp-c-text-1);
     text-decoration-line: underline;
     text-decoration-style: dashed;
     text-underline-offset: 5px;
   }
+}
 
 /* Custom scrollbar */
 .VPSidebar::-webkit-scrollbar {
@@ -165,9 +172,8 @@
 /* Make clicks pass-through */
 #nprogress {
   pointer-events: none;
-}
 
-#nprogress .bar {
+  & .bar {
     background: var(--vp-c-brand-1);
     position: fixed;
     z-index: 1031;
@@ -178,7 +184,7 @@
   }
 
   /* Fancy blur effect */
-#nprogress .peg {
+  & .peg {
     display: block;
     position: absolute;
     right: 0px;
@@ -194,7 +200,7 @@
     transform: rotate(3deg) translate(0px, -4px);
   }
 
-#nprogress .spinner {
+  & .spinner {
     display: block;
     position: fixed;
     z-index: 1031;
@@ -202,7 +208,7 @@
     right: 15px;
   }
 
-#nprogress .spinner-icon {
+  & .spinner-icon {
     width: 18px;
     height: 18px;
     box-sizing: border-box;
@@ -215,7 +221,7 @@
     -webkit-animation: nprogress-spinner 400ms linear infinite;
     animation: nprogress-spinner 400ms linear infinite;
   }
-
+}
 .nprogress-custom-parent {
   overflow: hidden;
   position: relative;

docs/.vitepress/transformer/constants.ts

@@ -132,7 +132,13 @@ export const headers: Header = {
   }
 } as const
 
-export const excluded = ['readme.md', 'single-page', 'feedback.md', 'index.md']
+export const excluded = [
+  'readme.md',
+  'single-page',
+  'feedback.md',
+  'index.md',
+  'sandbox.md'
+]
 
 export function getHeader(id: string) {
   const title =

docs/sandbox.md

@@ -0,0 +1,25 @@
+---
+title: Sandbox
+---
+
+### Sandbox
+
+:::info
+Testing info
+:::
+
+:::tip
+Testing tip 
+:::
+
+:::warning
+Testing warning
+:::
+
+:::danger
+Testing danger
+:::
+
+:::details
+Testing details
+:::

package.json

@@ -52,6 +52,9 @@
     "prettier": "^3.3.3",
     "prettier-plugin-pkgsort": "^0.2.1",
     "prettier-plugin-tailwindcss": "^0.6.6",
+    "sass": "^1.77.8",
+    "stylelint": "^16.9.0",
+    "stylelint-config-standard-scss": "^13.1.0",
     "unplugin-auto-import": "^0.18.2",
     "wrangler": "^3.68.0"
   },