From d58061ccae8c64fdbdfdf3bf826ad09286617751 Mon Sep 17 00:00:00 2001 From: saicaca Date: Fri, 16 Aug 2024 00:08:27 +0800 Subject: [PATCH] wip --- astro.config.mjs | 24 +- package.json | 4 +- pnpm-lock.yaml | 67 +++++- postcss.config.mjs | 11 + src/components/Footer.astro | 2 +- src/components/GlobalStyles.astro | 318 -------------------------- src/components/LightDarkSwitch.svelte | 6 +- src/components/Navbar.astro | 4 +- src/components/Search.svelte | 2 +- src/components/misc/Markdown.astro | 195 ++-------------- src/layouts/Layout.astro | 7 +- src/pages/posts/[...slug].astro | 4 +- src/styles/common.css | 133 +++++++++++ src/styles/main.css | 3 + src/styles/markdown.css | 89 +++++++ src/styles/scrollbar.css | 42 ++++ src/styles/variables.styl | 92 ++++++++ 17 files changed, 466 insertions(+), 537 deletions(-) create mode 100644 postcss.config.mjs delete mode 100644 src/components/GlobalStyles.astro create mode 100644 src/styles/common.css create mode 100644 src/styles/main.css create mode 100644 src/styles/markdown.css create mode 100644 src/styles/scrollbar.css create mode 100644 src/styles/variables.styl diff --git a/astro.config.mjs b/astro.config.mjs index 877ca427..d1f29d24 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -5,7 +5,6 @@ import swup from '@swup/astro'; import Compress from "astro-compress" import icon from "astro-icon" import { defineConfig } from "astro/config" -import Color from "colorjs.io" import rehypeAutolinkHeadings from "rehype-autolink-headings" import rehypeComponents from "rehype-components"; /* Render the custom directive content */ import rehypeKatex from "rehype-katex" @@ -19,23 +18,15 @@ import {parseDirectiveNode} from "./src/plugins/remark-directive-rehype.js"; import { remarkReadingTime } from "./src/plugins/remark-reading-time.mjs" import {remarkExcerpt} from "./src/plugins/remark-excerpt.js"; -const oklchToHex = (str) => { - const DEFAULT_HUE = 250 - const regex = /-?\d+(\.\d+)?/g - const matches = str.string.match(regex) - const lch = [matches[0], matches[1], DEFAULT_HUE] - return new Color("oklch", lch).to("srgb").toString({ - format: "hex", - }) -} - // https://astro.build/config export default defineConfig({ site: "https://fuwari.vercel.app/", base: "/", trailingSlash: "always", integrations: [ - tailwind(), + tailwind({ + nesting: true + }), swup({ theme: false, animationClass: 'transition-swup-', // see https://swup.js.org/options/#animationselector @@ -120,14 +111,5 @@ export default defineConfig({ } } }, - css: { - preprocessorOptions: { - stylus: { - define: { - oklchToHex: oklchToHex, - }, - }, - }, - }, }, }) diff --git a/package.json b/package.json index 7982e6ab..24ee5939 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,6 @@ "astro": "^4.12.2", "astro-compress": "^2.3.0", "astro-icon": "1.1.0", - "colorjs.io": "^0.5.2", "hastscript": "^9.0.0", "markdown-it": "^14.1.0", "mdast-util-to-string": "^4.0.0", @@ -59,10 +58,11 @@ "@types/mdast": "^4.0.4", "@types/sanitize-html": "^2.11.0", "photoswipe": "^5.4.4", + "postcss-import": "^16.1.0", + "postcss-nesting": "^13.0.0", "prettier": "^3.3.3", "prettier-plugin-astro": "^0.14.1", "remark-github-admonitions-to-directives": "^1.0.5", - "sass": "^1.77.8", "stylus": "^0.63.0" }, "pnpm": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7b181066..c56f9b00 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -45,9 +45,6 @@ importers: astro-icon: specifier: 1.1.0 version: 1.1.0 - colorjs.io: - specifier: ^0.5.2 - version: 0.5.2 hastscript: specifier: ^9.0.0 version: 9.0.0 @@ -145,6 +142,12 @@ importers: photoswipe: specifier: ^5.4.4 version: 5.4.4 + postcss-import: + specifier: ^16.1.0 + version: 16.1.0(postcss@8.4.40) + postcss-nesting: + specifier: ^13.0.0 + version: 13.0.0(postcss@8.4.40) prettier: specifier: ^3.3.3 version: 3.3.3 @@ -154,9 +157,6 @@ importers: remark-github-admonitions-to-directives: specifier: ^1.0.5 version: 1.0.5 - sass: - specifier: ^1.77.8 - version: 1.77.8 stylus: specifier: ^0.63.0 version: 0.63.0 @@ -923,6 +923,18 @@ packages: cpu: [x64] os: [win32] + '@csstools/selector-resolve-nested@2.0.0': + resolution: {integrity: sha512-oklSrRvOxNeeOW1yARd4WNCs/D09cQjunGZUgSq6vM8GpzFswN+8rBZyJA29YFZhOTQ6GFzxgLDNtVbt9wPZMA==} + engines: {node: '>=18'} + peerDependencies: + postcss-selector-parser: ^6.1.0 + + '@csstools/selector-specificity@4.0.0': + resolution: {integrity: sha512-189nelqtPd8++phaHNwYovKZI0FOzH1vQEE3QhHHkNIGrg5fSs9CbYP3RvfEH5geztnIA9Jwq91wyOIwAW5JIQ==} + engines: {node: '>=18'} + peerDependencies: + postcss-selector-parser: ^6.1.0 + '@emmetio/abbreviation@2.3.3': resolution: {integrity: sha512-mgv58UrU3rh4YgbE/TzgLQwJ3pFsHHhCLqY20aJq+9comytTXUDNGG/SMtSeMJdkpxgXSXunBGLD8Boka3JyVA==} @@ -1990,9 +2002,6 @@ packages: colord@2.9.3: resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==} - colorjs.io@0.5.2: - resolution: {integrity: sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==} - comma-separated-tokens@2.0.3: resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==} @@ -3608,6 +3617,12 @@ packages: peerDependencies: postcss: ^8.0.0 + postcss-import@16.1.0: + resolution: {integrity: sha512-7hsAZ4xGXl4MW+OKEWCnF6T5jqBw80/EE9aXg1r2yyn1RsVEU8EtKXbijEODa+rg7iih4bKf7vlvTGYR4CnPNg==} + engines: {node: '>=18.0.0'} + peerDependencies: + postcss: ^8.0.0 + postcss-js@4.0.1: resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==} engines: {node: ^12 || ^14 || >= 16} @@ -3709,6 +3724,12 @@ packages: peerDependencies: postcss: ^8.2.14 + postcss-nesting@13.0.0: + resolution: {integrity: sha512-TCGQOizyqvEkdeTPM+t6NYwJ3EJszYE/8t8ILxw/YoeUvz2rz7aM8XTAmBWh9/DJjfaaabL88fWrsVHSPF2zgA==} + engines: {node: '>=18'} + peerDependencies: + postcss: ^8.4 + postcss-normalize-charset@5.1.0: resolution: {integrity: sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==} engines: {node: ^10 || ^12 || >=14.0} @@ -5729,6 +5750,14 @@ snapshots: '@biomejs/cli-win32-x64@1.8.3': optional: true + '@csstools/selector-resolve-nested@2.0.0(postcss-selector-parser@6.1.1)': + dependencies: + postcss-selector-parser: 6.1.1 + + '@csstools/selector-specificity@4.0.0(postcss-selector-parser@6.1.1)': + dependencies: + postcss-selector-parser: 6.1.1 + '@emmetio/abbreviation@2.3.3': dependencies: '@emmetio/scanner': 1.0.4 @@ -6904,8 +6933,6 @@ snapshots: colord@2.9.3: {} - colorjs.io@0.5.2: {} - comma-separated-tokens@2.0.3: {} commander@10.0.1: {} @@ -7737,7 +7764,8 @@ snapshots: dependencies: postcss: 8.4.40 - immutable@4.3.7: {} + immutable@4.3.7: + optional: true import-cwd@3.0.0: dependencies: @@ -8864,6 +8892,13 @@ snapshots: read-cache: 1.0.0 resolve: 1.22.8 + postcss-import@16.1.0(postcss@8.4.40): + dependencies: + postcss: 8.4.40 + postcss-value-parser: 4.2.0 + read-cache: 1.0.0 + resolve: 1.22.8 + postcss-js@4.0.1(postcss@8.4.40): dependencies: camelcase-css: 2.0.1 @@ -8959,6 +8994,13 @@ snapshots: postcss: 8.4.40 postcss-selector-parser: 6.1.1 + postcss-nesting@13.0.0(postcss@8.4.40): + dependencies: + '@csstools/selector-resolve-nested': 2.0.0(postcss-selector-parser@6.1.1) + '@csstools/selector-specificity': 4.0.0(postcss-selector-parser@6.1.1) + postcss: 8.4.40 + postcss-selector-parser: 6.1.1 + postcss-normalize-charset@5.1.0(postcss@8.4.40): dependencies: postcss: 8.4.40 @@ -9447,6 +9489,7 @@ snapshots: chokidar: 3.6.0 immutable: 4.3.7 source-map-js: 1.2.0 + optional: true sax@1.3.0: {} diff --git a/postcss.config.mjs b/postcss.config.mjs new file mode 100644 index 00000000..b65c48e5 --- /dev/null +++ b/postcss.config.mjs @@ -0,0 +1,11 @@ +import postcssImport from 'postcss-import'; +import postcssNesting from 'tailwindcss/nesting'; +import tailwindcss from 'tailwindcss'; + +export default { + plugins: { + 'postcss-import': postcssImport, // to combine multiple css files + 'tailwindcss/nesting': postcssNesting, + tailwindcss: tailwindcss, + } +}; diff --git a/src/components/Footer.astro b/src/components/Footer.astro index 14c535b2..bf1367db 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -4,7 +4,7 @@ import { profileConfig } from '../config' import { url } from '../utils/url-utils' --- -
+
© 2024 {profileConfig.name}. All Rights Reserved. / RSS / diff --git a/src/components/GlobalStyles.astro b/src/components/GlobalStyles.astro deleted file mode 100644 index ea6b8630..00000000 --- a/src/components/GlobalStyles.astro +++ /dev/null @@ -1,318 +0,0 @@ ---- - ---- - -
- -
- - - \ No newline at end of file diff --git a/src/components/LightDarkSwitch.svelte b/src/components/LightDarkSwitch.svelte index 6aacfff2..dbf8f193 100644 --- a/src/components/LightDarkSwitch.svelte +++ b/src/components/LightDarkSwitch.svelte @@ -73,21 +73,21 @@ function hidePanel() {