m1ngsama/FUJI
1
0
Fork 0
mirror of https://github.com/m1ngsama/FUJI.git synced 2025-12-25 02:56:38 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix image style

Browse source
This commit is contained in:
ClasWen 2024-07-15 20:30:41 +08:00
parent 485e41a2e6
commit 5a5c6d80e8
4 changed files with 226 additions and 203 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

203
astro.config.mjs
View file

@ -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 = `<div class="page-body code component"><div class="component-content code"> ${node.value} </div></div>`
// 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,
}),
],
})

194
astro.config.mts Normal file
View file

@ -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 = `<div class="page-body code component"><div class="component-content code"> ${node.value} </div></div>`
// 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,
}),
],
})

2
package.json
View file

@ -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",

30
pnpm-lock.yaml
View file

@ -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: