From 5a5c6d80e8eab7006fd43c88462bfefa9293923c Mon Sep 17 00:00:00 2001 From: ClasWen Date: Mon, 15 Jul 2024 20:30:41 +0800 Subject: [PATCH] fix image style --- astro.config.mjs | 203 ----------------------------------------------- astro.config.mts | 194 ++++++++++++++++++++++++++++++++++++++++++++ package.json | 2 + pnpm-lock.yaml | 30 +++++++ 4 files changed, 226 insertions(+), 203 deletions(-) delete mode 100644 astro.config.mjs create mode 100644 astro.config.mts diff --git a/astro.config.mjs b/astro.config.mjs deleted file mode 100644 index 17f0a35..0000000 --- a/astro.config.mjs +++ /dev/null @@ -1,203 +0,0 @@ -import { defineConfig } from "astro/config" -import { SITE_URL } from "./src/consts" -import vue from "@astrojs/vue" -import tailwind from "@astrojs/tailwind" -import react from "@astrojs/react" - -function pipeline() { - return [ - // () => (tree) => { - // visit(tree, "element", (node, index) => { - // if (node.tagName === "p" && node.children[0].tagName === "img") { - // node.tagName = "figure" - // let img = node.children[0] - // let sign = md5(img.properties.src) - // let data = img.properties.alt.split("|") - // let alt = data[0] - // let size = "big" - // if (data.length > 1) { - // size = data[1] - // } - // let classes = [ - // "image component image-full-bleed body-copy-wide nr-scroll-animation nr-scroll-animation--on", - // ] - // classes.push(`image-${size}`) - // node.properties.className = classes - // node.children = [ - // { - // type: "element", - // tagName: "div", - // properties: { - // className: ["component-content"], - // }, - // children: [ - // { - // type: "element", - // tagName: "div", - // properties: { - // className: ["image-share-sheet"], - // }, - // children: [ - // { - // type: "element", - // tagName: "div", - // properties: { - // className: [ - // `image image-load image-asset image-${sign}`, - // ], - // id: `lht${sign}`, - // }, - // children: [ - // { - // type: "element", - // tagName: "picture", - // properties: { - // className: ["picture"], - // }, - // children: [ - // { - // type: "element", - // tagName: "img", - // properties: { - // "data-src": img.properties.src, - // alt: alt, - // className: ["picture-image"], - // }, - // }, - // ], - // }, - // ], - // }, - // ], - // }, - // { - // type: "element", - // tagName: "div", - // properties: { - // className: ["image-description"], - // }, - // children: [ - // { - // type: "element", - // tagName: "div", - // properties: { - // className: ["image-caption"], - // }, - // children: [ - // { - // type: "text", - // value: alt, - // }, - // ], - // }, - // ], - // }, - // ], - // }, - // ] - // } - // }) - // }, - () => (tree) => { - tree.children.forEach((node) => { - if (node.type === "raw") { - node.value = `
${node.value}
` - // node.value = node.value.replace(/astro-code/g, 'astro-code') - } - }) - }, - () => (tree) => { - for (let i = 0; i < tree.children.length; i++) { - const node = tree.children[i] - if ( - node.type === "element" - && ["p", "h1", "h2", "h3", "h4", "h5", "h6", "table"].includes( - node.tagName, - ) - ) { - let next = tree.children[i + 1] - const nodes = [node] - while ( - next - && !["figure"].includes(next.tagName) - && next.type != "raw" - ) { - nodes.push(next) - next = tree.children[tree.children.indexOf(next) + 1] - } - if (nodes.length > 1) { - // rename label - nodes.forEach((node) => { - if (node.tagName === "p") { - node.properties.className = ["page-body-copy"] - node.tagName = "div" - } - if (["h1", "h2", "h3", "h4", "h5", "h6"].includes(node.tagName)) { - node.properties.className = ["page-body-header"] - } - }) - tree.children.splice(i, nodes.length, { - type: "element", - tagName: "div", - properties: { - className: ["page-body text component"], - }, - children: [ - { - type: "element", - tagName: "div", - properties: { - className: ["component-content"], - }, - children: nodes, - }, - ], - }) - } - } - } - }, - () => (tree) => { - const len = tree.children.length - for (let index = 0; index < len; index++) { - const node = tree.children[index] - if (node.type === "element" && node.tagName === "figure") { - tree.children.splice(index, 0, { - type: "element", - tagName: "div", - properties: { - className: ["tertiary-nav component"], - }, - children: [ - { - type: "element", - tagName: "div", - properties: { - className: ["component-content"], - }, - }, - ], - }) - index++ - } - } - }, - ] -} - -// https://astro.build/config -export default defineConfig({ - site: SITE_URL, - markdown: { - rehypePlugins: pipeline(), - syntaxHighlight: "prism", - }, - integrations: [ - vue(), - tailwind(), - react({ - include: ["**/react/*"], - experimentalReactChildren: true, - }), - ], -}) diff --git a/astro.config.mts b/astro.config.mts new file mode 100644 index 0000000..04cadd5 --- /dev/null +++ b/astro.config.mts @@ -0,0 +1,194 @@ +// @ts-check + +import { defineConfig } from "astro/config" +import { SITE_URL } from "./src/consts" +import vue from "@astrojs/vue" +import { visit } from "unist-util-visit" +import tailwind from "@astrojs/tailwind" +import react from "@astrojs/react" +import md5 from "md5" + +function pipeline() { + return [ + () => tree => { + visit(tree, "element", (node, index) => { + if (node.tagName === "p" && node.children[0].tagName === "img") { + node.tagName = "figure" + let img = node.children[0] + let sign = md5(img.properties.src) + let data = img.properties.alt.split("|") + let alt = data[0] + let size = "big" + if (data.length > 1) { + size = data[1] + } + let classes = ["image component image-full-bleed body-copy-wide nr-scroll-animation nr-scroll-animation--on"] + classes.push(`image-${size}`) + node.properties.className = classes + node.children = [ + { + type: "element", + tagName: "div", + properties: { + className: ["component-content"], + }, + children: [ + { + type: "element", + tagName: "div", + properties: { + className: ["image-share-sheet"], + }, + children: [ + { + type: "element", + tagName: "div", + properties: { + className: [`image image-load image-asset image-${sign}`], + id: `lht${sign}`, + }, + children: [ + { + type: "element", + tagName: "picture", + properties: { + className: ["picture"], + }, + children: [ + { + type: "element", + tagName: "img", + properties: { + "data-src": img.properties.src, + alt: alt, + className: ["picture-image"], + }, + }, + ], + }, + ], + }, + ], + }, + { + type: "element", + tagName: "div", + properties: { + className: ["image-description"], + }, + children: [ + { + type: "element", + tagName: "div", + properties: { + className: ["image-caption"], + }, + children: [ + { + type: "text", + value: alt, + }, + ], + }, + ], + }, + ], + }, + ] + } + }) + }, + () => tree => { + tree.children.forEach(node => { + if (node.type === "raw") { + node.value = `
${node.value}
` + // node.value = node.value.replace(/astro-code/g, 'astro-code') + } + }) + }, + () => tree => { + for (let i = 0; i < tree.children.length; i++) { + const node = tree.children[i] + if (node.type === "element" && ["p", "h1", "h2", "h3", "h4", "h5", "h6", "table"].includes(node.tagName)) { + let next = tree.children[i + 1] + const nodes = [node] + while (next && !["figure"].includes(next.tagName) && next.type != "raw") { + nodes.push(next) + next = tree.children[tree.children.indexOf(next) + 1] + } + if (nodes.length > 1) { + // rename label + nodes.forEach(node => { + if (node.tagName === "p") { + node.properties.className = ["page-body-copy"] + node.tagName = "div" + } + if (["h1", "h2", "h3", "h4", "h5", "h6"].includes(node.tagName)) { + node.properties.className = ["page-body-header"] + } + }) + tree.children.splice(i, nodes.length, { + type: "element", + tagName: "div", + properties: { + className: ["page-body text component"], + }, + children: [ + { + type: "element", + tagName: "div", + properties: { + className: ["component-content"], + }, + children: nodes, + }, + ], + }) + } + } + } + }, + () => tree => { + const len = tree.children.length + for (let index = 0; index < len; index++) { + const node = tree.children[index] + if (node.type === "element" && node.tagName === "figure") { + tree.children.splice(index, 0, { + type: "element", + tagName: "div", + properties: { + className: ["tertiary-nav component"], + }, + children: [ + { + type: "element", + tagName: "div", + properties: { + className: ["component-content"], + }, + }, + ], + }) + index++ + } + } + }, + ] +} + +// https://astro.build/config +export default defineConfig({ + site: SITE_URL, + markdown: { + rehypePlugins: pipeline(), + syntaxHighlight: "prism", + }, + integrations: [ + vue(), + tailwind(), + react({ + include: ["**/react/*"], + experimentalReactChildren: true, + }), + ], +}) diff --git a/package.json b/package.json index 60ce1ac..9c3a0a5 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "@stylistic/eslint-plugin": "^2.1.0", "astro": "^4.5.12", "ical.js": "^1.5.0", + "md5": "^2.3.0", "npm": "^10.8.1", "openapi-fetch": "^0.10.2", "qrcode": "^1.5.3", @@ -38,6 +39,7 @@ "devDependencies": { "@cspell/eslint-plugin": "^8.8.1", "@types/eslint__js": "^8.42.3", + "@types/md5": "^2.3.5", "@types/qrcode": "^1.5.5", "@types/react": "^18.2.79", "@types/react-dom": "^18.2.25", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 71ddc51..bb2bb2b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,6 +38,9 @@ dependencies: ical.js: specifier: ^1.5.0 version: 1.5.0 + md5: + specifier: ^2.3.0 + version: 2.3.0 npm: specifier: ^10.8.1 version: 10.8.1 @@ -76,6 +79,9 @@ devDependencies: '@types/eslint__js': specifier: ^8.42.3 version: 8.42.3 + '@types/md5': + specifier: ^2.3.5 + version: 2.3.5 '@types/qrcode': specifier: ^1.5.5 version: 1.5.5 @@ -1851,6 +1857,10 @@ packages: resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==} dev: true + /@types/md5@2.3.5: + resolution: {integrity: sha512-/i42wjYNgE6wf0j2bcTX6kuowmdL/6PE4IVitMpm2eYKBUuYCprdcWVK+xEF0gcV6ufMCRhtxmReGfc6hIK7Jw==} + dev: true + /@types/mdast@4.0.4: resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==} dependencies: @@ -2681,6 +2691,10 @@ packages: resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==} dev: false + /charenc@0.0.2: + resolution: {integrity: sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==} + dev: false + /chokidar@3.6.0: resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==} engines: {node: '>= 8.10.0'} @@ -2850,6 +2864,10 @@ packages: shebang-command: 2.0.0 which: 2.0.2 + /crypt@0.0.2: + resolution: {integrity: sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==} + dev: false + /cspell-config-lib@8.10.0: resolution: {integrity: sha512-3rssZH65y4dYIQN0ZgTkTvqThIRVzn18hw7Gx1ZjTFdVMsyc0fRSqtCSOWgi8P5U+GPeyQ3ylvv2RxrTKWaNxw==} engines: {node: '>=18'} @@ -4154,6 +4172,10 @@ packages: has-tostringtag: 1.0.2 dev: true + /is-buffer@1.1.6: + resolution: {integrity: sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==} + dev: false + /is-callable@1.2.7: resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==} engines: {node: '>= 0.4'} @@ -4562,6 +4584,14 @@ packages: resolution: {integrity: sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==} dev: false + /md5@2.3.0: + resolution: {integrity: sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==} + dependencies: + charenc: 0.0.2 + crypt: 0.0.2 + is-buffer: 1.1.6 + dev: false + /mdast-util-definitions@6.0.0: resolution: {integrity: sha512-scTllyX6pnYNZH/AIp/0ePz6s4cZtARxImwoPJ7kS42n+MnVsI4XbnG6d4ibehRIldYMWM2LD7ImQblVhUejVQ==} dependencies: