From 26408b0b7e063ddf93bd5f83c9430da26c22dc92 Mon Sep 17 00:00:00 2001 From: saicaca Date: Mon, 2 Oct 2023 01:52:08 +0800 Subject: [PATCH] feat: post styles, next/prev post btn, display-settings, etc. (cherry picked from commit b7ddd92729d52a8c43d72010b743f7e3477f1001) --- package.json | 2 +- pnpm-lock.yaml | 14 +-- src/components/ArchivePanel.astro | 2 +- src/components/GlobalStyles.astro | 7 +- src/components/Navbar.astro | 29 +++-- src/components/PostMetadata.astro | 2 +- src/components/TitleCardNew.astro | 4 +- src/components/control/BackToTop.astro | 2 +- src/components/control/Button.astro | 3 +- src/components/control/ButtonTag.astro | 2 +- src/components/control/Pagination.astro | 6 +- src/components/widget/DisplaySetting.astro | 135 +++++++++++++++++++++ src/components/widget/Profile.astro | 4 +- src/layouts/Layout.astro | 25 +++- src/layouts/MainGridLayout.astro | 16 ++- src/pages/posts/[slug].astro | 38 +++++- src/utils/content-utils.ts | 15 ++- tsconfig.json | 6 +- vivia.config.yml | 1 + 19 files changed, 258 insertions(+), 55 deletions(-) create mode 100644 src/components/widget/DisplaySetting.astro diff --git a/package.json b/package.json index 8286cd1..10d474d 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,6 @@ "dependencies": { "@astrojs/check": "^0.2.0", "@astrojs/tailwind": "^4.0.0", - "@astrojs/ts-plugin": "^1.1.3", "@fontsource/roboto": "^5.0.8", "astro": "^3.0.10", "astro-icon": "^1.0.0-next.2", @@ -23,6 +22,7 @@ "typescript": "^5.2.2" }, "devDependencies": { + "@astrojs/ts-plugin": "^1.1.3", "@iconify-json/fa6-brands": "^1.1.13", "@iconify-json/material-symbols": "^1.1.57", "@rollup/plugin-yaml": "^4.1.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 65abcc5..82ce6dd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,9 +11,6 @@ dependencies: '@astrojs/tailwind': specifier: ^4.0.0 version: 4.0.0(astro@3.0.10)(tailwindcss@3.3.3) - '@astrojs/ts-plugin': - specifier: ^1.1.3 - version: 1.1.3 '@fontsource/roboto': specifier: ^5.0.8 version: 5.0.8 @@ -40,6 +37,9 @@ dependencies: version: 5.2.2 devDependencies: + '@astrojs/ts-plugin': + specifier: ^1.1.3 + version: 1.1.3 '@iconify-json/fa6-brands': specifier: ^1.1.13 version: 1.1.13 @@ -103,7 +103,6 @@ packages: /@astrojs/compiler@1.5.7: resolution: {integrity: sha512-dFU7GAMbpTUGPkRoCoMQrGFlTe3qIiQMSOxIXp/nB1Do4My9uogjEmBHdR5Cwr4i6rc5/1R3Od9v8kU/pkHXGQ==} - dev: false /@astrojs/compiler@2.0.1: resolution: {integrity: sha512-DfBR7Cf+tOgQ4n7TIgTtU5x5SEA/08DNshpEPcT+91A0KbBlmUOYMBM/O6qAaHkmVo1KIoXQYhAmfdTT1zx9PQ==} @@ -216,7 +215,7 @@ packages: '@volar/language-core': 1.10.1 '@volar/typescript': 1.10.1 vscode-languageserver-textdocument: 1.0.8 - dev: false + dev: true /@babel/code-frame@7.22.13: resolution: {integrity: sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==} @@ -1117,7 +1116,6 @@ packages: resolution: {integrity: sha512-JnsM1mIPdfGPxmoOcK1c7HYAsL6YOv0TCJ4aW3AXPZN/Jb4R77epDyMZIVudSGjWMbvv/JfUa+rQ+dGKTmgwBA==} dependencies: '@volar/source-map': 1.10.1 - dev: false /@volar/language-server@1.10.1: resolution: {integrity: sha512-UXgRMAPKoy4EZBcBT1SFp8YIb5AJqe7Is1/TnqRUq0LBBV2M7HpEeHHI8E4fy05Eg4TlSVRcrlZtiTrY9fRjJg==} @@ -1148,13 +1146,11 @@ packages: resolution: {integrity: sha512-3/S6KQbqa7pGC8CxPrg69qHLpOvkiPHGJtWPkI/1AXCsktkJ6gIk/5z4hyuMp8Anvs6eS/Kvp/GZa3ut3votKA==} dependencies: muggle-string: 0.3.1 - dev: false /@volar/typescript@1.10.1: resolution: {integrity: sha512-+iiO9yUSRHIYjlteT+QcdRq8b44qH19/eiUZtjNtuh6D9ailYM7DVR0zO2sEgJlvCaunw/CF9Ov2KooQBpR4VQ==} dependencies: '@volar/language-core': 1.10.1 - dev: false /@vscode/emmet-helper@2.9.2: resolution: {integrity: sha512-MaGuyW+fa13q3aYsluKqclmh62Hgp0BpKIqS66fCxfOaBcVQ1OnMQxRRgQUYnCkxFISAQlkJ0qWWPyXjro1Qrg==} @@ -3029,7 +3025,6 @@ packages: /muggle-string@0.3.1: resolution: {integrity: sha512-ckmWDJjphvd/FvZawgygcUeQCxzvohjFO5RxTjj4eq8kw359gFF3E1brjfI+viLMxss5JrHTDRHZvu2/tuy0Qg==} - dev: false /mz@2.7.0: resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==} @@ -4328,7 +4323,6 @@ packages: /vscode-languageserver-textdocument@1.0.8: resolution: {integrity: sha512-1bonkGqQs5/fxGT5UchTgjGVnfysL0O8v1AYMBjqTbWQTFn721zaPGDYFkOKtfDgFiSgXM3KwaG3FMGfW4Ed9Q==} - dev: false /vscode-languageserver-types@3.17.3: resolution: {integrity: sha512-SYU4z1dL0PyIMd4Vj8YOqFvHu7Hz/enbWtpfnVbJHU4Nd1YNYx8u0ennumc6h48GQNeOLxmwySmnADouT/AuZA==} diff --git a/src/components/ArchivePanel.astro b/src/components/ArchivePanel.astro index 5f51643..33907f5 100644 --- a/src/components/ArchivePanel.astro +++ b/src/components/ArchivePanel.astro @@ -69,7 +69,7 @@ function formatDate(date: Date) { {group.posts.map(post => ( -
- - - + + +
-
- +
+
+ +
+
+ +
+
@@ -40,13 +47,15 @@ function switchTheme() { function loadThemeSwitchScript() { let switchBtn = document.getElementById("scheme-switch"); - if (switchBtn === null) { - console.log("test") - } switchBtn.addEventListener("click", function () { - console.log("test") switchTheme() }); + + let settingBtn = document.getElementById("display-settings-switch"); + settingBtn.addEventListener("click", function () { + let settingPanel = document.getElementById("display-setting"); + settingPanel.classList.toggle("closed"); + }); } loadThemeSwitchScript(); diff --git a/src/components/PostMetadata.astro b/src/components/PostMetadata.astro index 8d3a3b0..7367bed 100644 --- a/src/components/PostMetadata.astro +++ b/src/components/PostMetadata.astro @@ -68,7 +68,7 @@ const className = Astro.props.class; @layer components { .meta-icon { @apply w-8 h-8 transition rounded-md flex items-center justify-center bg-[var(--btn-regular-bg)] - text-[var(--btn-content)] dark:text-[var(--primary)] mr-2 + text-[var(--btn-content)] mr-2 } .with-divider { @apply before:content-['/'] before:mx-[6px] before:text-[var(--meta-divider)] before:text-sm diff --git a/src/components/TitleCardNew.astro b/src/components/TitleCardNew.astro index 83dfb7e..3e79c2d 100644 --- a/src/components/TitleCardNew.astro +++ b/src/components/TitleCardNew.astro @@ -43,7 +43,7 @@ const { remarkPluginFrontmatter } = await entry.render(); - +
{ description } @@ -67,7 +67,7 @@ const { remarkPluginFrontmatter } = await entry.render();
- } diff --git a/src/components/control/BackToTop.astro b/src/components/control/BackToTop.astro index 7236e07..9d4b627 100644 --- a/src/components/control/BackToTop.astro +++ b/src/components/control/BackToTop.astro @@ -5,7 +5,7 @@ import Button from "./Button.astro";
-
+
diff --git a/src/components/control/Button.astro b/src/components/control/Button.astro index dd9d84c..4dc415e 100644 --- a/src/components/control/Button.astro +++ b/src/components/control/Button.astro @@ -34,7 +34,6 @@ import { Icon } from 'astro-icon/components'; class:list={[ className, ` - rounded-lg transition h-[var(--height)] `, @@ -60,7 +59,7 @@ import { Icon } from 'astro-icon/components'; 'dark:hover:bg-[oklch(0.45_0.045_var(--hue))]': regular, 'dark:active:bg-[oklch(0.5_0.05_var(--hue))]': regular, - 'card-base': card, + 'bg-[var(--card-bg)]': card, 'enabled:hover:bg-[var(--btn-card-bg-hover)]': card, 'enabled:active:bg-[var(--btn-card-bg-active)]': card, 'disabled:text-black/10': card, diff --git a/src/components/control/ButtonTag.astro b/src/components/control/ButtonTag.astro index df90b47..e1d2281 100644 --- a/src/components/control/ButtonTag.astro +++ b/src/components/control/ButtonTag.astro @@ -8,7 +8,7 @@ interface Props { const { size, dot, href }: Props = Astro.props; --- - diff --git a/src/components/control/Pagination.astro b/src/components/control/Pagination.astro index ea683d6..95f4c34 100644 --- a/src/components/control/Pagination.astro +++ b/src/components/control/Pagination.astro @@ -55,7 +55,7 @@ const commonUrl: string = parts.slice(0, -1).join('/') + '/';
- @@ -70,14 +70,14 @@ const commonUrl: string = parts.slice(0, -1).join('/') + '/'; {p}
return - })}
- diff --git a/src/components/widget/DisplaySetting.astro b/src/components/widget/DisplaySetting.astro new file mode 100644 index 0000000..d337a3a --- /dev/null +++ b/src/components/widget/DisplaySetting.astro @@ -0,0 +1,135 @@ +--- +import {getConfig} from "../../utils/config-utils"; +const hueSet: number[] = [0, 30, 60, 180, 250, 270, 300, 330, 345]; + +const enableBanner = getConfig().banner.enable; + +--- +
+
+
+ Primary Color +
+
+ {0} +
+
+ +
+ +
+ +
+ + + + + + \ No newline at end of file diff --git a/src/components/widget/Profile.astro b/src/components/widget/Profile.astro index b60df36..a652b9c 100644 --- a/src/components/widget/Profile.astro +++ b/src/components/widget/Profile.astro @@ -1,6 +1,6 @@ --- import ImageBox from "../misc/ImageBox.astro"; -import ButtonLight from "../control/Button.astro"; +import Button from "../control/Button.astro"; import {getConfig} from "../../utils/config-utils"; interface props { @@ -18,7 +18,7 @@ const vConf = getConfig();
{vConf.profile.links.map(item => - + )}
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 73b3c41..f77cd20 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -46,11 +46,14 @@ const myFade = { // defines global css variables // why doing this in Layout instead of GlobalStyles: https://github.com/withastro/astro/issues/6728#issuecomment-1502203757 const viConf = getConfig(); -const hue = viConf.appearance.hue; +const configHue = viConf.appearance.hue; if (!banner || typeof banner !== 'string' || banner.trim() === '') { banner = viConf.banner.url; } +// TODO don't use post cover as banner for now +banner = viConf.banner.url; + --- @@ -71,7 +74,7 @@ if (!banner || typeof banner !== 'string' || banner.trim() === '') { - + {title} @@ -82,7 +85,7 @@ if (!banner || typeof banner !== 'string' || banner.trim() === '') { id="banner-wrapper" > - @@ -93,6 +96,7 @@ if (!banner || typeof banner !== 'string' || banner.trim() === '') {