From eb3520e7a8c2e9b4ea92f63911f3a2e04dc7f901 Mon Sep 17 00:00:00 2001 From: EveSunMaple Date: Fri, 29 Nov 2024 19:51:42 +0800 Subject: [PATCH 01/10] chore: fix transformers.js --- src/config/transformers.js | 171 +++++++++++++------------------------ 1 file changed, 60 insertions(+), 111 deletions(-) diff --git a/src/config/transformers.js b/src/config/transformers.js index 760a23a..16f58cd 100644 --- a/src/config/transformers.js +++ b/src/config/transformers.js @@ -1,108 +1,71 @@ -export const transformers = [ +const createSVG = (d, className) => ({ + type: "element", + tagName: "svg", + properties: { + viewBox: "0 -0.5 25 25", + fill: "none", + xmlns: "http://www.w3.org/2000/svg", + className: `stroke-current shrink-0 h-6 w-6 ${className}`, + }, + children: [ + { + type: "element", + tagName: "path", + properties: { d, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }, + }, + ], +}); + +const createButton = () => ({ + type: "element", + tagName: "div", + properties: { className: ["code-container"] }, + children: [ + { + type: "element", + tagName: "label", + properties: { className: ["swap", "swap-flip", "btn", "btn-ghost", "btn-sm", "copy-btn"] }, + children: [ + { type: "element", tagName: "input", properties: { className: ["copy-checkbox"], type: "checkbox" } }, + { + type: "element", + tagName: "div", + properties: { className: ["swap-on"] }, + children: [createSVG("M5.5 12.5L10.167 17L19.5 8", "")], + }, + { + type: "element", + tagName: "div", + properties: { className: ["swap-off"] }, + children: [createSVG("M17.676 14.248C17.676 15.8651 16.3651 17.176 14.748 17.176H7.428C5.81091 17.176 4.5 15.8651 4.5 14.248V6.928C4.5 5.31091 5.81091 4 7.428 4H14.748C16.3651 4 17.676 5.31091 17.676 6.928V14.248Z", "swap-off")], + }, + ], + }, + ], +}); + +const createCodeLine = (lineNumber) => ({ + type: "element", + tagName: "div", + properties: { className: ["line"] }, + children: [{ type: "text", value: String(lineNumber) }], +}); + +const transformers = [ { preprocess(code, { lang }) { this.lang = lang; return code; }, + root(node) { if (node.tagName === "pre") { node.tagName = "figure"; node.properties.className = ["highlight", this.lang]; } }, - pre(node) { - // 复制按钮 HTML - const copyButtonHTML = { - type: "element", - tagName: "div", - properties: { className: ["code-container"] }, - children: [ - { - type: "element", - tagName: "label", - properties: { className: ["swap", "swap-flip", "btn", "btn-ghost", "btn-sm", "copy-btn"] }, - children: [ - { - type: "element", - tagName: "input", - properties: { className: ["copy-checkbox"], type: "checkbox" }, - }, - { - type: "element", - tagName: "div", - properties: { className: ["swap-on"] }, - children: [ - { - type: "element", - tagName: "svg", - properties: { - viewBox: "0 -0.5 25 25", - fill: "none", - xmlns: "http://www.w3.org/2000/svg", - className: "stroke-current shrink-0 h-6 w-6", - }, - children: [ - { - type: "element", - tagName: "path", - properties: { - d: "M5.5 12.5L10.167 17L19.5 8", - strokeWidth: "1.5", - strokeLinecap: "round", - strokeLinejoin: "round", - }, - }, - ], - }, - ], - }, - { - type: "element", - tagName: "div", - properties: { className: ["swap-off"] }, - children: [ - { - type: "element", - tagName: "svg", - properties: { - viewBox: "0 -0.5 25 25", - fill: "none", - xmlns: "http://www.w3.org/2000/svg", - className: "stroke-current shrink-0 h-6 w-6", - }, - children: [ - { - type: "element", - tagName: "path", - properties: { - fillRule: "evenodd", - clipRule: "evenodd", - d: "M17.676 14.248C17.676 15.8651 16.3651 17.176 14.748 17.176H7.428C5.81091 17.176 4.5 15.8651 4.5 14.248V6.928C4.5 5.31091 5.81091 4 7.428 4H14.748C16.3651 4 17.676 5.31091 17.676 6.928V14.248Z", - strokeWidth: "1.5", - strokeLinecap: "round", - strokeLinejoin: "round", - }, - }, - { - type: "element", - tagName: "path", - properties: { - d: "M10.252 20H17.572C19.1891 20 20.5 18.689 20.5 17.072V9.75195", - strokeWidth: "1.5", - strokeLinecap: "round", - strokeLinejoin: "round", - }, - }, - ], - }, - ], - }, - ], - }, - ], - }; - // 生成工具栏（包含代码语言标签） + pre(node) { const toolsDiv = { type: "element", tagName: "div", @@ -114,11 +77,10 @@ export const transformers = [ properties: { className: ["code-lang"] }, children: [{ type: "text", value: this.lang.toUpperCase() }], }, - copyButtonHTML, + createButton(), ], }; - // 生成行号和代码内容结构 const lineNumberCode = { type: "element", tagName: "code", @@ -140,25 +102,11 @@ export const transformers = [ }; // 填充代码内容和行号 - node.children.forEach((lineNode, index, count) => { - count = 0; - lineNode.children.forEach(() => { - if (count % 2 === 1) { - lineNumberCode.children.push({ - type: "element", - tagName: "div", - properties: { className: ["line"] }, - children: [{ type: "text", value: String(index + 1) }], - }); - index++; - } - count++; - }); - + node.children.forEach((lineNode, index) => { + lineNumberCode.children.push(createCodeLine(index + 1)); codeContentPre.children.push(lineNode); }); - // 生成最终的代码块结构 const table = { type: "element", tagName: "div", @@ -176,3 +124,4 @@ export const transformers = [ }, ]; +export { transformers }; From fc2920f86d98c09f952da7daf10f007e78cfffe1 Mon Sep 17 00:00:00 2001 From: EveSunMaple Date: Fri, 29 Nov 2024 22:08:59 +0800 Subject: [PATCH 02/10] chore: overall structural modification --- src/components/BaseCard.astro | 144 ++++++++------- src/components/CategoryCard.astro | 10 +- src/components/EnvelopeCard.astro | 14 +- src/components/Footer.astro | 66 +++---- src/components/License.astro | 34 ++-- src/components/ProfileCard.astro | 2 +- src/components/ProfileCardFooter.astro | 2 +- src/components/TagCard.astro | 10 +- src/components/ToolCard.astro | 8 +- src/config/transformers.js | 169 ++++++++++++------ src/layouts/CardAside.astro | 14 ++ src/layouts/CardVertical.astro | 10 ++ src/pages/blog/[...page].astro | 5 +- .../categories/[category]/[...page].astro | 20 ++- src/pages/blog/tag/[tag]/[...page].astro | 34 +++- src/styles/global.scss | 4 - 16 files changed, 314 insertions(+), 232 deletions(-) create mode 100644 src/layouts/CardAside.astro create mode 100644 src/layouts/CardVertical.astro diff --git a/src/components/BaseCard.astro b/src/components/BaseCard.astro index 2e2600d..eb59b26 100644 --- a/src/components/BaseCard.astro +++ b/src/components/BaseCard.astro @@ -3,6 +3,7 @@ import dayjs from "dayjs"; import { Image } from "astro:assets"; import License from "../components/License.astro"; import CommentWaline from "./CommentWaline.astro"; +import CardVertical from "../layouts/CardVertical.astro"; import { DATE_FORMAT } from "../consts"; import type { CardInfo } from "../types"; import { t } from "i18next"; @@ -23,9 +24,7 @@ const hasTategories = categories && categories.length > 0; const hasTags = tags && tags.length > 0; --- -
+ { image && ( 0; alt={title} class="card-img" loading="eager" + slot="image" /> ) } -
- { - isBlog && ( - <> -

- {title} -

-
-
-
- {displayDate && ( -
{displayDate}
- )} - {badge &&
{badge}
} -
- {time && ( -
{`${time} ${t("label.readTime")}`}
+ { + isBlog && ( + <> +

+ {title} +

+
+
+
+ {displayDate && ( +
{displayDate}
)} + {badge &&
{badge}
}
-
-
- {hasTategories ? ( - categories.map((categoroy) => ( - <> - - {categoroy} - - - )) - ) : ( -
- {t("label.noCategory")} -
- )} - {hasTags ? ( - tags.map((tag) => ( - <> - - {tag} - - - )) - ) : ( -
- {t("label.noTag")} -
- )} -
- {word && ( -
{`${word} ${t("label.wordCount")}`}
+ {time && ( +
{`${time} ${t("label.readTime")}`}
+ )} +
+
+
+ {hasTategories ? ( + categories.map((categoroy) => ( + <> + + {categoroy} + + + )) + ) : ( +
+ {t("label.noCategory")} +
+ )} + {hasTags ? ( + tags.map((tag) => ( + <> + + {tag} + + + )) + ) : ( +
+ {t("label.noTag")} +
)}
+ {word && ( +
{`${word} ${t("label.wordCount")}`}
+ )}
-
- - ) - } - - { - isBlog && ( - <> - - - - ) - } -
-
+
+
+ + ) + } + + { + isBlog && ( + <> + + + + ) + } + diff --git a/src/components/CategoryCard.astro b/src/components/CategoryCard.astro index 7d277a5..1a18442 100644 --- a/src/components/CategoryCard.astro +++ b/src/components/CategoryCard.astro @@ -1,5 +1,6 @@ --- import { getCollection } from "astro:content"; +import CardAside from "../layouts/CardAside.astro"; import { t } from "i18next"; interface TagCount { @@ -24,12 +25,7 @@ export async function getTagsWithCounts(): Promise { const tagsWithCounts = await getTagsWithCounts(); --- -
-
-
- {t("label.categoryCard")} -
-
+
{ tagsWithCounts.map(({ category, count }) => ( @@ -44,4 +40,4 @@ const tagsWithCounts = await getTagsWithCounts(); )) }
-
+ diff --git a/src/components/EnvelopeCard.astro b/src/components/EnvelopeCard.astro index d78bac2..237656a 100644 --- a/src/components/EnvelopeCard.astro +++ b/src/components/EnvelopeCard.astro @@ -22,21 +22,21 @@ const target = "_self"; ---
-
+
-

+

{title}

{desc}
-
-
-
+
+
+
{ displayDate && (
{displayDate}
diff --git a/src/components/Footer.astro b/src/components/Footer.astro index acb0e79..f1b020c 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -4,38 +4,40 @@ import { USER_SITE } from "../consts"; ---
diff --git a/src/components/License.astro b/src/components/License.astro index 90b5d77..d5d2e0e 100644 --- a/src/components/License.astro +++ b/src/components/License.astro @@ -1,30 +1,22 @@ --- +import { USER_NAME } from "../consts"; const { title, url } = Astro.props; import { t } from "i18next"; ---
-