feat: post styles, next/prev post btn, display-settings, etc.

(cherry picked from commit b7ddd92729d52a8c43d72010b743f7e3477f1001)
2026-01-11 23:02:53 +01:00 · 2023-10-02 01:52:08 +08:00
parent 8ed0aa071f
commit 26408b0b7e
19 changed files with 258 additions and 55 deletions
--- a/src/components/ArchivePanel.astro
+++ b/src/components/ArchivePanel.astro
@@ -69,7 +69,7 @@ function formatDate(date: Date) {
                    </div>
                    {group.posts.map(post => (
                            <a href={getPostUrlBySlug(post.slug)} class="group">
-                                <Button light height="40px" class="w-full hover:text-[initial]">
+                                <Button light height="40px" class="w-full rounded-lg hover:text-[initial]">
                                    <div class="flex flex-row justify-start items-center h-full">
                                        <!-- date -->
                                        <div class="w-[10%] transition text-sm text-right text-black/50 dark:text-white/50">{formatDate(post.data.pubDate)}</div>
--- a/src/components/GlobalStyles.astro
+++ b/src/components/GlobalStyles.astro
@@ -43,6 +43,9 @@ color_set(colors)
        if length(value) > 1
          {key}: oklch_fallback(value[1])

+rainbow-light = linear-gradient(to right, oklch(0.80 0.10 0), oklch(0.80 0.10 30), oklch(0.80 0.10 60), oklch(0.80 0.10 90), oklch(0.80 0.10 120), oklch(0.80 0.10 150), oklch(0.80 0.10 180), oklch(0.80 0.10 210), oklch(0.80 0.10 240), oklch(0.80 0.10 270), oklch(0.80 0.10 300), oklch(0.80 0.10 330), oklch(0.80 0.10 360))
+rainbow-dark = linear-gradient(to right, oklch(0.70 0.10 0), oklch(0.70 0.10 30), oklch(0.70 0.10 60), oklch(0.70 0.10 90), oklch(0.70 0.10 120), oklch(0.70 0.10 150), oklch(0.70 0.10 180), oklch(0.70 0.10 210), oklch(0.70 0.10 240), oklch(0.70 0.10 270), oklch(0.70 0.10 300), oklch(0.70 0.10 330), oklch(0.70 0.10 360))
+
 :root
  --radius-large 16px

@@ -53,7 +56,7 @@ color_set({
  --primary: oklch(0.70 0.14 var(--hue))
  --card-bg: white oklch(0.25 0.02 var(--hue))

-  --btn-content: oklch(0.55 0.12 var(--hue))
+  --btn-content: oklch(0.55 0.12 var(--hue)) oklch(0.75 0.1 var(--hue))

  --btn-regular-bg: oklch(0.95 0.025 var(--hue)) oklch(0.38 0.04 var(--hue))

@@ -70,6 +73,8 @@ color_set({
  --line-color: black(0.1) white(0.1)
  --meta-divider: black(0.2) white(0.2)
  --selection-bg: oklch(0.90 0.05 var(--hue)) oklch(0.40 0.08 var(--hue))
+
+  --color-selection-bar: rainbow-light rainbow-dark
 })


--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -1,25 +1,32 @@
 ---
 import Button from "./control/Button.astro";
 import { Icon } from 'astro-icon/components';
+import DisplaySetting from "./widget/DisplaySetting.astro";
 const className = Astro.props.class;
 ---
 <div class:list={[
    className,
    "card-base max-w-[var(--page-width)] h-[72px] rounded-t-none mx-auto flex items-center justify-between px-4"]}>
-    <a href="/"><Button height="52px" class="px-5 font-bold" light>
+    <a href="/"><Button height="52px" class="px-5 font-bold rounded-lg" light>
        <div class="flex flex-row text-[var(--primary)] items-center text-md">
            <Icon name="material-symbols:home-outline-rounded" size={28} class="mb-1 mr-2" />
            <div class="top-2"></div>Vivia Preview
        </div>
    </Button></a>
    <div>
-        <a href="/"><Button light class="font-bold px-5">Home</Button></a>
-        <a href="/archive"><Button light class="font-bold px-5">Archive</Button></a>
-        <a href="/about"><Button light class="font-bold px-5">About</Button></a>
+        <a href="/"><Button light class="font-bold px-5 rounded-lg">Home</Button></a>
+        <a href="/archive"><Button light class="font-bold px-5 rounded-lg">Archive</Button></a>
+        <a href="/about"><Button light class="font-bold px-5 rounded-lg">About</Button></a>
    </div>
-    <div>
-        <Button id="scheme-switch" iconName="material-symbols:wb-sunny-outline-rounded" iconSize={20} isIcon light></Button>
+    <div class="flex">
+        <div>
+            <Button class="rounded-lg" id="display-settings-switch" iconName="material-symbols:palette-outline" iconSize={20} isIcon light></Button>
+        </div>
+        <div>
+            <Button class="rounded-lg" id="scheme-switch" iconName="material-symbols:wb-sunny-outline-rounded" iconSize={20} isIcon light></Button>
+        </div>
    </div>
+    <DisplaySetting></DisplaySetting>

 </div>

@@ -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();
--- 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
--- a/src/components/TitleCardNew.astro
+++ b/src/components/TitleCardNew.astro
@@ -43,7 +43,7 @@ const { remarkPluginFrontmatter } = await entry.render();
        </a>

        <!-- metadata -->
-        <PostMetadata pubDate={pubDate} tags={tags} categories={categories} class="mb-4"></PostMetadata>
+        <PostMetadata pubDate={pubDate} tags={tags} categories={categories} class:list={{"mb-4": description, "mb-6": !description}}></PostMetadata>

        <div class="transition text-black/75 dark:text-white/75 mb-4">
            { description }
@@ -67,7 +67,7 @@ const { remarkPluginFrontmatter } = await entry.render();
            <Icon name="material-symbols:chevron-right-rounded"
                  class="transition opacity-0 group-hover:opacity-100 text-white text-5xl"></Icon>
        </div>
-        <ImageBox src="https://saicaca.github.io/vivia-preview/assets/79905307_p0.jpg"
+        <ImageBox src={cover}
                  class="w-full h-full">
        </ImageBox>
    </a>}
--- a/src/components/control/BackToTop.astro
+++ b/src/components/control/BackToTop.astro
@@ -5,7 +5,7 @@ import Button from "./Button.astro";

 <!-- There can't be a filter on parent element, or it will break `fixed` -->
 <div class="back-to-top-wrapper" transition:persist>
-    <div id="back-to-top-btn" class="back-to-top-btn hide flex items-center rounded-2xl overflow-hidden" onclick="topFunction()">
+    <div id="back-to-top-btn" class="back-to-top-btn hide flex items-center rounded-2xl overflow-hidden transition" onclick="topFunction()">
        <Button card height="60px" width="60px">
            <Icon name="material-symbols:keyboard-arrow-up-rounded" class="mx-auto"></Icon>
        </Button>
--- 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,
--- 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;
 ---
 <a href={href}>
-    <Button regular height="32px" class="text-[15px] px-3 flex flex-row items-center">
+    <Button regular height="32px" class="text-[15px] px-3 flex flex-row items-center rounded-lg">
        {dot && <div class="h-1 w-1 bg-[var(--btn-content)] dark:bg-[var(--card-bg)] transition rounded-md mr-2"></div>}
        <slot></slot>
    </Button>
--- a/src/components/control/Pagination.astro
+++ b/src/components/control/Pagination.astro
@@ -55,7 +55,7 @@ const commonUrl: string = parts.slice(0, -1).join('/') + '/';

 <div class:list={[className, "flex flex-row gap-3 justify-center"]}>
    <a href={page.url.prev}>
-        <Button isIcon card iconName="material-symbols:chevron-left-rounded" class="text-[var(--primary)]" iconSize={28}
+        <Button isIcon card iconName="material-symbols:chevron-left-rounded" class="text-[var(--primary)] rounded-lg" iconSize={28}
                disabled = {page.url.prev == undefined}
        ></Button>
    </a>
@@ -70,14 +70,14 @@ const commonUrl: string = parts.slice(0, -1).join('/') + '/';
                    {p}
                </div>
            return <a href={commonUrl + p}>
-                <Button card iconName="material-symbols:chevron-left-rounded" height="44px" width="44px">
+                <Button card iconName="material-symbols:chevron-left-rounded" class="rounded-lg" height="44px" width="44px">
                    {p}
                </Button>
            </a>
        })}
    </div>
    <a href={page.url.next}>
-        <Button isIcon card iconName="material-symbols:chevron-right-rounded" class="text-[var(--primary)]" iconSize={28}
+        <Button isIcon card iconName="material-symbols:chevron-right-rounded" class="text-[var(--primary)] rounded-lg" iconSize={28}
                disabled = {page.url.next == undefined}
        ></Button>
    </a>
--- a/src/components/widget/DisplaySetting.astro
+++ 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;
+
+---
+<div id="display-setting" class:list={["card-base closed absolute transition-all w-[320px] fixed right-4 border-[var(--primary)] px-4 py-4",
+    {"border-[3px]": !enableBanner}
+]}>
+    <div class="flex flex-row gap-2 mb-3 items-center justify-between">
+        <div class="font-bold text-lg text-neutral-900 dark:text-neutral-100 transition relative ml-3
+            before:w-1 before:h-4 before:rounded-md before:bg-[var(--primary)]
+            before:absolute before:left-[-12px] before:top-[5.5px]"
+        >
+            Primary Color
+        </div>
+        <div id="hueValue" class="transition bg-[var(--btn-regular-bg)] w-10 h-7 rounded-md flex justify-center font-bold transition text-sm items-center text-[var(--btn-content)]">
+            {0}
+        </div>
+    </div>
+    <div id="preset-list" class="flex flex-row gap-1 mb-4 hidden">
+        {hueSet.map((hue) => <div
+            class="h-7 w-8 rounded-md cursor-pointer
+                bg-[oklch(0.75_0.14_var(--hue))]
+                hover:bg-[oklch(0.70_0.12_var(--hue))]
+                active:bg-[oklch(0.65_0.11_var(--hue))]
+            "
+            style=`--hue: ${hue}` data-hue={hue}
+        >
+
+        </div>)}
+    </div>
+    <div class="w-full h-6 px-1 bg-[oklch(0.80_0.10_0)] dark:bg-[oklch(0.70_0.10_0)] rounded select-none">
+        <input type="range" min="0" max="360" value="0" class="slider" id="colorSlider" step="5" style="width: 100%;">
+    </div>
+
+</div>
+
+<script is:raw>
+(function () {
+    let presetList = document.getElementById("preset-list");
+    let output = document.getElementById("hueValue");
+    let slider = document.getElementById("colorSlider");
+    output.innerHTML = slider.value; // Display the default slider value
+
+    let r = document.querySelector(':root');
+    function setHue(hue) {
+        localStorage.setItem('hue', hue);
+        output.innerHTML = hue;
+        slider.value = hue;
+
+        r.style.setProperty(`--hue`, hue);
+    }
+
+    let storedHue = localStorage.getItem('hue');
+    if (storedHue) {
+        setHue(storedHue);
+    }
+
+    presetList.onclick = function(event) {
+        let hue = event.target.dataset.hue;
+        if (hue) {
+            setHue(hue);
+        }
+    }
+
+    slider.oninput = function() {
+        let hue = this.value;
+        output.innerHTML = this.value;
+        setHue(hue);
+    }
+
+    document.addEventListener("click", event => {
+        var cDom = document.getElementById("display-setting");
+        let settingBtn = document.getElementById("display-settings-switch");
+        var tDom = event.target;
+        if (cDom == tDom || cDom.contains(tDom) || settingBtn == tDom || settingBtn.contains(tDom)) {
+            return;
+        }
+        cDom.classList.add("closed");
+    });
+
+})();
+
+</script>
+
+<style lang="stylus" is:global>
+#display-setting
+    input[type="range"]
+        -webkit-appearance: none;
+        height: 24px;
+        background-image: var(--color-selection-bar)
+        transition: background-image 0.15s ease-in-out
+
+    /* Input Thumb */
+    ::-webkit-slider-thumb
+        -webkit-appearance: none;
+        height: 16px;
+        width: 8px;
+        border-radius: 2px;
+        background: rgba(255, 255, 255, 0.7);
+        box-shadow: none;
+
+    ::-moz-range-thumb
+        -webkit-appearance: none;
+        height: 24px;
+        width: 10px;
+        border-radius: 4px;
+        background: rgba(255, 255, 255, 0.7);
+        box-shadow: none;
+
+    &::-ms-thumb
+        -webkit-appearance: none;
+        height: 24px;
+        width: 10px;
+        border-radius: 4px;
+        background: rgba(255, 255, 255, 0.7);
+        box-shadow: none;
+</style>
+
+<style>
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+    #display-setting {
+        @apply top-[84px]
+    }
+    #display-setting.closed {
+        @apply top-[76px] opacity-0 pointer-events-none
+    }
+}
+</style>
--- 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();
    <div class="flex gap-2 mx-2 justify-center mb-4">
        {vConf.profile.links.map(item =>
            <a href={item.url} target="_blank">
-                <ButtonLight isIcon iconName={item.icon} regular height="40px"></ButtonLight>
+                <Button isIcon iconName={item.icon} regular height="40px" class="rounded-lg"></Button>
            </a>
        )}
    </div>