mirror of
https://github.com/m1ngsama/FUJI.git
synced 2025-12-25 02:56:38 +00:00
move plugins
This commit is contained in:
Clas Wen
parent
0a605d2e5a
commit
17f144c2c9
4 changed files with 213 additions and 209 deletions
210
astro.config.mts
210
astro.config.mts
|
|
@ -1,220 +1,16 @@
|
||||||
// @ts-check
|
|
||||||
|
|
||||||
import { defineConfig } from "astro/config"
|
import { defineConfig } from "astro/config"
|
||||||
import { SITE_URL } from "./src/consts"
|
import { SITE_URL } from "./src/consts"
|
||||||
import vue from "@astrojs/vue"
|
import vue from "@astrojs/vue"
|
||||||
import { visit } from "unist-util-visit"
|
|
||||||
import tailwind from "@astrojs/tailwind"
|
import tailwind from "@astrojs/tailwind"
|
||||||
import react from "@astrojs/react"
|
import react from "@astrojs/react"
|
||||||
import md5 from "md5"
|
import { handleLocalCoverPlugin } from "./src/plugins/cover"
|
||||||
import { type RehypePlugin } from "@astrojs/markdown-remark"
|
import { themePipeline } from "./src/plugins/theme"
|
||||||
import path from "path"
|
|
||||||
import { convertImageToBase64URL } from "./src/utils/image"
|
|
||||||
|
|
||||||
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-loaded image-asset image-${sign}`],
|
|
||||||
id: `lht${sign}`,
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
type: "element",
|
|
||||||
tagName: "picture",
|
|
||||||
properties: {
|
|
||||||
className: ["picture"],
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
type: "element",
|
|
||||||
tagName: "img",
|
|
||||||
properties: {
|
|
||||||
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++
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleLocalCoverPlugin: RehypePlugin = () => {
|
|
||||||
return async (tree, file) => {
|
|
||||||
const filePath = file.history[0]
|
|
||||||
type AstroData = {
|
|
||||||
frontmatter: {
|
|
||||||
cover:
|
|
||||||
| {
|
|
||||||
url: string
|
|
||||||
}
|
|
||||||
| string
|
|
||||||
| undefined
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const astroData = file.data.astro as AstroData
|
|
||||||
if (!astroData.frontmatter.cover) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const coverUrl = typeof astroData.frontmatter.cover === "string" ? astroData.frontmatter.cover : astroData.frontmatter.cover.url
|
|
||||||
if (coverUrl.includes("http")) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const url = path.resolve(path.dirname(filePath), coverUrl)
|
|
||||||
const dataURL = await convertImageToBase64URL(url)
|
|
||||||
if (typeof astroData.frontmatter.cover === "string") {
|
|
||||||
astroData.frontmatter.cover = dataURL
|
|
||||||
} else {
|
|
||||||
astroData.frontmatter.cover.url = dataURL
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// https://astro.build/config
|
// https://astro.build/config
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
site: SITE_URL,
|
site: SITE_URL,
|
||||||
markdown: {
|
markdown: {
|
||||||
rehypePlugins: [handleLocalCoverPlugin, ...pipeline()],
|
rehypePlugins: [handleLocalCoverPlugin, ...themePipeline],
|
||||||
syntaxHighlight: "prism",
|
syntaxHighlight: "prism",
|
||||||
},
|
},
|
||||||
integrations: [
|
integrations: [
|
||||||
|
|
|
||||||
30
src/plugins/cover.ts
Normal file
30
src/plugins/cover.ts
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
import path from "path"
|
||||||
|
import { type RehypePlugin } from "@astrojs/markdown-remark"
|
||||||
|
import { convertImageToBase64URL } from "../utils/image"
|
||||||
|
|
||||||
|
export const handleLocalCoverPlugin: RehypePlugin = () => {
|
||||||
|
return async (tree, file) => {
|
||||||
|
const filePath = file.history[0]
|
||||||
|
type AstroData = {
|
||||||
|
frontmatter: {
|
||||||
|
cover: { url: string } | string | undefined
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const astroData = file.data.astro as AstroData
|
||||||
|
if (!astroData.frontmatter.cover) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const coverUrl = typeof astroData.frontmatter.cover === "string" ? astroData.frontmatter.cover : astroData.frontmatter.cover.url
|
||||||
|
if (coverUrl.includes("http")) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const url = path.resolve(path.dirname(filePath), coverUrl)
|
||||||
|
const dataURL = await convertImageToBase64URL(url)
|
||||||
|
if (typeof astroData.frontmatter.cover === "string") {
|
||||||
|
astroData.frontmatter.cover = dataURL
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
astroData.frontmatter.cover.url = dataURL
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
179
src/plugins/theme.ts
Normal file
179
src/plugins/theme.ts
Normal file
|
|
@ -0,0 +1,179 @@
|
||||||
|
import { type RehypePlugin } from "@astrojs/markdown-remark"
|
||||||
|
import type { RehypePlugins } from "astro"
|
||||||
|
import { visit } from "unist-util-visit"
|
||||||
|
import md5 from "md5"
|
||||||
|
|
||||||
|
export const addSeparator: RehypePlugin = () =>
|
||||||
|
(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"],
|
||||||
|
},
|
||||||
|
children: [],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
index++
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const image: RehypePlugin = () => (tree) => {
|
||||||
|
visit(tree, "element", (node) => {
|
||||||
|
if (node.tagName === "p" && node.children[0].tagName === "img") {
|
||||||
|
node.tagName = "figure"
|
||||||
|
const img = node.children[0]
|
||||||
|
const sign = md5(img.properties.src)
|
||||||
|
const data = img.properties.alt.split("|")
|
||||||
|
const alt = data[0]
|
||||||
|
let size = "big"
|
||||||
|
if (data.length > 1) {
|
||||||
|
size = data[1]
|
||||||
|
}
|
||||||
|
const 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-loaded image-asset image-${sign}`],
|
||||||
|
id: `lht${sign}`,
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
type: "element",
|
||||||
|
tagName: "picture",
|
||||||
|
properties: {
|
||||||
|
className: ["picture"],
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
type: "element",
|
||||||
|
tagName: "img",
|
||||||
|
properties: {
|
||||||
|
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,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const code: RehypePlugin = () => (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')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const body: RehypePlugin = () => (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,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const themePipeline: RehypePlugins = [
|
||||||
|
addSeparator,
|
||||||
|
image,
|
||||||
|
code,
|
||||||
|
body,
|
||||||
|
]
|
||||||
|
|
@ -7,10 +7,9 @@ export const convertImageToBase64URL = async (filename: Filename, imageType: Ima
|
||||||
try {
|
try {
|
||||||
const buffer = await readFile(filename)
|
const buffer = await readFile(filename)
|
||||||
const base64String = Buffer.from(buffer).toString("base64")
|
const base64String = Buffer.from(buffer).toString("base64")
|
||||||
// console.log(`base64String`, base64String.slice(0, 100));
|
|
||||||
return `data:image/${imageType};base64,${base64String}`
|
return `data:image/${imageType};base64,${base64String}`
|
||||||
}
|
}
|
||||||
catch (error) {
|
catch (error) {
|
||||||
throw new Error(`file ${filename} no exist ❌`)
|
throw new Error(`file ${filename} no exist ❌`, error)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue