m1ngsama/FUJI
1
0
Fork 0
mirror of https://github.com/m1ngsama/FUJI.git synced 2025-12-24 10:51:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #66 from wen-templari/update-style

Browse source 
feat: update style
This commit is contained in:
clas 2025-02-05 21:15:34 +08:00 committed by GitHub
commit ed93d5a43c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
18 changed files with 280 additions and 1630 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

218
astro.config.mts
View file

@ -1,221 +1,23 @@
// @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"
import { type RehypePlugin } from "@astrojs/markdown-remark"
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
}
}
}
import { handleLocalCoverPlugin } from "./src/plugins/cover"
import { themePipeline } from "./src/plugins/theme"
// https://astro.build/config
export default defineConfig({
site: SITE_URL,
markdown: {
rehypePlugins: [handleLocalCoverPlugin, ...pipeline()],
syntaxHighlight: "prism",
rehypePlugins: [handleLocalCoverPlugin, ...themePipeline],
syntaxHighlight: "shiki",
shikiConfig: {
themes: {
light: 'github-light',
dark: 'github-dark',
},
}
},
integrations: [
vue(),

1
cspell.json
View file

@ -19,6 +19,7 @@
"openapi",
"Rehype",
"rehypePlugins",
"shiki",
"tseslint"
]
}

10
public/static/css/github-dark.min.css vendored
View file

@ -1,10 +0,0 @@
pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
Theme: GitHub Dark
Description: Dark theme as seen on github.com
Author: github.com
Maintainer: @Hirse
Updated: 2021-05-15
Outdated base version: https://github.com/primer/github-syntax-dark
Current colors taken from GitHub's CSS
*/.hljs{color:#c9d1d9;background:#0d1117}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#79c0ff}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#a5d6ff}.hljs-built_in,.hljs-symbol{color:#ffa657}.hljs-code,.hljs-comment,.hljs-formula{color:#8b949e}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#7ee787}.hljs-subst{color:#c9d1d9}.hljs-section{color:#1f6feb;font-weight:700}.hljs-bullet{color:#f2cc60}.hljs-emphasis{color:#c9d1d9;font-style:italic}.hljs-strong{color:#c9d1d9;font-weight:700}.hljs-addition{color:#aff5b4;background-color:#033a16}.hljs-deletion{color:#ffdcd7;background-color:#67060c}

10
public/static/css/github.min.css vendored
View file

@ -1,10 +0,0 @@
pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
Theme: GitHub
Description: Light theme as seen on github.com
Author: github.com
Maintainer: @Hirse
Updated: 2021-05-15
Outdated base version: https://github.com/primer/github-syntax-light
Current colors taken from GitHub's CSS
*/.hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#005cc5}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-code,.hljs-comment,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{color:#005cc5;font-weight:700}.hljs-bullet{color:#735c0f}.hljs-emphasis{color:#24292e;font-style:italic}.hljs-strong{color:#24292e;font-weight:700}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}

1
public/static/css/googlecode.min.css vendored
View file

@ -1 +0,0 @@
pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{background:#fff;color:#000}.hljs-comment,.hljs-quote{color:#800}.hljs-keyword,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-title{color:#008}.hljs-template-variable,.hljs-variable{color:#660}.hljs-regexp,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-string{color:#080}.hljs-bullet,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-symbol{color:#066}.hljs-attr,.hljs-built_in,.hljs-doctag,.hljs-params,.hljs-title,.hljs-type{color:#606}.hljs-attribute,.hljs-subst{color:#000}.hljs-formula{background-color:#eee;font-style:italic}.hljs-selector-class,.hljs-selector-id{color:#9b703f}.hljs-addition{background-color:#baeeba}.hljs-deletion{background-color:#ffc8bd}.hljs-doctag,.hljs-strong{font-weight:700}.hljs-emphasis{font-style:italic}

13
public/static/css/stackoverflow-dark.min.css vendored
View file

@ -1,13 +0,0 @@
pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
Theme: StackOverflow Dark
Description: Dark theme as used on stackoverflow.com
Author: stackoverflow.com
Maintainer: @Hirse
Website: https://github.com/StackExchange/Stacks
License: MIT
Updated: 2021-05-15
Updated for @stackoverflow/stacks v0.64.0
Code Blocks: /blob/v0.64.0/lib/css/components/_stacks-code-blocks.less
Colors: /blob/v0.64.0/lib/css/exports/_stacks-constants-colors.less
*/.hljs{color:#fff;background:#1c1b1b}.hljs-subst{color:#fff}.hljs-comment{color:#999}.hljs-attr,.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-section,.hljs-selector-tag{color:#88aece}.hljs-attribute{color:#c59bc1}.hljs-name,.hljs-number,.hljs-quote,.hljs-selector-id,.hljs-template-tag,.hljs-type{color:#f08d49}.hljs-selector-class{color:#88aece}.hljs-link,.hljs-regexp,.hljs-selector-attr,.hljs-string,.hljs-symbol,.hljs-template-variable,.hljs-variable{color:#b5bd68}.hljs-meta,.hljs-selector-pseudo{color:#88aece}.hljs-built_in,.hljs-literal,.hljs-title{color:#f08d49}.hljs-bullet,.hljs-code{color:#ccc}.hljs-meta .hljs-string{color:#b5bd68}.hljs-deletion{color:#de7176}.hljs-addition{color:#76c490}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}

13
public/static/css/stackoverflow-light.min.css vendored
View file

@ -1,13 +0,0 @@
pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
Theme: StackOverflow Light
Description: Light theme as used on stackoverflow.com
Author: stackoverflow.com
Maintainer: @Hirse
Website: https://github.com/StackExchange/Stacks
License: MIT
Updated: 2021-05-15
Updated for @stackoverflow/stacks v0.64.0
Code Blocks: /blob/v0.64.0/lib/css/components/_stacks-code-blocks.less
Colors: /blob/v0.64.0/lib/css/exports/_stacks-constants-colors.less
*/.hljs{color:#2f3337;background:#f6f6f6}.hljs-subst{color:#2f3337}.hljs-comment{color:#656e77}.hljs-attr,.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-section,.hljs-selector-tag{color:#015692}.hljs-attribute{color:#803378}.hljs-name,.hljs-number,.hljs-quote,.hljs-selector-id,.hljs-template-tag,.hljs-type{color:#b75501}.hljs-selector-class{color:#015692}.hljs-link,.hljs-regexp,.hljs-selector-attr,.hljs-string,.hljs-symbol,.hljs-template-variable,.hljs-variable{color:#54790d}.hljs-meta,.hljs-selector-pseudo{color:#015692}.hljs-built_in,.hljs-literal,.hljs-title{color:#b75501}.hljs-bullet,.hljs-code{color:#535a60}.hljs-meta .hljs-string{color:#54790d}.hljs-deletion{color:#c02d2e}.hljs-addition{color:#2f6f44}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}

1
public/static/css/vs2015.min.css vendored
View file

@ -1 +0,0 @@
pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{background:#1e1e1e;color:#dcdcdc}.hljs-keyword,.hljs-literal,.hljs-name,.hljs-symbol{color:#569cd6}.hljs-link{color:#569cd6;text-decoration:underline}.hljs-built_in,.hljs-type{color:#4ec9b0}.hljs-class,.hljs-number{color:#b8d7a3}.hljs-meta .hljs-string,.hljs-string{color:#d69d85}.hljs-regexp,.hljs-template-tag{color:#9a5334}.hljs-formula,.hljs-function,.hljs-params,.hljs-subst,.hljs-title{color:#dcdcdc}.hljs-comment,.hljs-quote{color:#57a64a;font-style:italic}.hljs-doctag{color:#608b4e}.hljs-meta,.hljs-meta .hljs-keyword,.hljs-tag{color:#9b9b9b}.hljs-template-variable,.hljs-variable{color:#bd63c5}.hljs-attr,.hljs-attribute{color:#9cdcfe}.hljs-section{color:gold}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-bullet,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-selector-pseudo,.hljs-selector-tag{color:#d7ba7d}.hljs-addition{background-color:#144212;display:inline-block;width:100%}.hljs-deletion{background-color:#600;display:inline-block;width:100%}

1220
public/static/js/hljs.js
View file

File diff suppressed because one or more lines are too long

32
public/static/js/initPost.js
View file

@ -5,9 +5,7 @@ document.head.appendChild(scriptMd5)
scriptMd5.onload = function () {
console.log("md5.js loaded")
// step1. sythx highlighting
syntaxHighlight()
// step2. lazyload
// step1. lazyload
initLazyLoad()
}
@ -81,31 +79,3 @@ function renderStyle(sign, percent) {
}
};`
}
function syntaxHighlight() {
var script = document.createElement("script")
script.src = "/static/js/hljs.js"
document.head.appendChild(script)
var styleLight = document.createElement("link")
styleLight.rel = "stylesheet"
styleLight.href = "/static/css/stackoverflow-light.min.css"
var styleDark = document.createElement("link")
styleDark.rel = "stylesheet"
styleDark.href = "/static/css/stackoverflow-dark.min.css"
if (document.querySelector("body").classList.contains("theme-dark")) {
document.head.appendChild(styleDark)
}
else {
document.head.appendChild(styleLight)
}
script.onload = function () {
console.log("hljs.js loaded")
document.querySelectorAll("pre code").forEach(function (block) {
hljs.highlightBlock(block)
})
}
}

11
src/components/header/HeaderNavigation.tsx
View file

@ -1,6 +1,7 @@
import { useState } from "react"
import { Navbar, NavbarBrand, NavbarContent, NavbarItem, NavbarMenuToggle, NavbarMenu, NavbarMenuItem, Link } from "@nextui-org/react"
import { SITE_TITLE } from "../../consts"
import CALogoWhite from "./assets/CA-logo-white.png"
export default function App() {
const [isMenuOpen, setIsMenuOpen] = useState(false)
@ -31,10 +32,16 @@ export default function App() {
<img
src="https://oss.nbtca.space/CA-logo.svg"
alt=""
className="w-8 aspect-square cursor-pointer"
className="w-8 aspect-square cursor-pointer dark:hidden"
onClick={() => window.location.href = "/"}
/>
<span className="hidden sm:flex select-none cursor-default text-lg text-[#1d1d1f]">
<img
src={CALogoWhite.src}
alt=""
className="w-8 aspect-square cursor-pointer hidden dark:block"
onClick={() => window.location.href = "/"}
/>
<span className="hidden sm:flex select-none cursor-default text-lg text-[#1d1d1f] dark:text-white">
{SITE_TITLE}
</span>
</NavbarBrand>

BIN
src/components/header/assets/CA-logo-white.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 575 KiB

2
src/pages/posts/blogs/Tech/Git/basicprocess.md
View file

@ -5,7 +5,7 @@ pubDate: 2024-10-13
description: ' '
author: 'zzh0u'
tags: ["技术","开发","Git"]
theme: 'white'
theme: 'dark'
featured: true
---

33
src/plugins/cover.ts Normal file
View file

@ -0,0 +1,33 @@
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
}
if (coverUrl.includes("base64")) {
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
}
}
}

185
src/plugins/theme.ts Normal file
View file

@ -0,0 +1,185 @@
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 (node.tagName === "pre") {
const originalClassName = node.properties.className
node.properties.className = originalClassName instanceof Array
? [...originalClassName, "page-body-copy"]
: ["page-body-copy"]
}
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,
]

150
src/styles/global.css
View file

@ -12,6 +12,7 @@
--footer-pipe-color: #86868b;
--footer-directory-title-color: #1d1d1f;
--footer-directory-title-color-hover: #000;
--borer-radius: 10px;
}
*,
@ -30,6 +31,28 @@ body {
padding: 0;
}
body, input, textarea, select, button {
font-synthesis: none;
-moz-font-feature-settings: "kern";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing:grayscale
}
body.theme-dark .astro-code,
body.theme-dark .astro-code span {
color: var(--shiki-dark) !important;
background-color: var(--shiki-dark-bg) !important;
/* Optional, if you also want font styles */
font-style: var(--shiki-dark-font-style) !important;
font-weight: var(--shiki-dark-font-weight) !important;
text-decoration: var(--shiki-dark-text-decoration) !important;
}
.astro-code{
padding: 12px;
border-radius: var(--borer-radius);
background-color: var(--gray-primary) !important;
}
ul,
ol,
li,
@ -124,7 +147,7 @@ button:disabled {
}
html {
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica",
font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica",
"Arial", sans-serif;
font-size: 106.25%;
quotes: "“" "”";
@ -135,7 +158,7 @@ body {
line-height: 1.47059;
font-weight: 400;
letter-spacing: -0.022em;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica",
font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica",
"Arial", sans-serif;
background-color: #fff;
color: #1d1d1f;
@ -488,7 +511,7 @@ html.no-touch.no-reduced-motion .tile[data-focus-method="key"] .media--video {
line-height: 1.33337;
font-weight: 700;
letter-spacing: -0.01em;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica",
font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica",
"Arial", sans-serif;
}
@ -527,7 +550,7 @@ html.no-touch.no-reduced-motion .tile[data-focus-method="key"] .media--video {
}
.tile__category:lang(zh-CN) {
font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC",
font-family: system-ui, "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC",
"Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
@ -551,7 +574,7 @@ html.no-touch.no-reduced-motion .tile[data-focus-method="key"] .media--video {
line-height: 1.28577;
font-weight: 600;
letter-spacing: -0.016em;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica",
font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica",
"Arial", sans-serif;
display: flex;
justify-content: flex-start;
@ -592,7 +615,7 @@ html.no-touch.no-reduced-motion .tile[data-focus-method="key"] .media--video {
}
.tile__timestamp:lang(zh-CN) {
font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC",
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI' , "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC",
"Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
@ -5408,7 +5431,7 @@ html.no-touch.no-reduced-motion
line-height: 1.23536;
font-weight: 500;
letter-spacing: -0.022em;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica",
font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica",
"Arial", sans-serif;
text-align: center;
}
@ -5436,7 +5459,7 @@ html.no-touch.no-reduced-motion
line-height: 1.23536;
font-weight: 600;
letter-spacing: -0.022em;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica",
font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica",
"Arial", sans-serif;
border: 2px solid;
padding: 10px 24px 9px;
@ -5470,7 +5493,7 @@ html.no-touch.no-reduced-motion
line-height: 1.23536;
font-weight: 700;
letter-spacing: -0.022em;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica",
font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica",
"Arial", sans-serif;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
@ -5939,49 +5962,8 @@ html.no-touch.no-reduced-motion
"Arial", sans-serif;
}
.page-body:lang(ar) {
line-height: 1.57895;
font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons",
"Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.page-body:lang(ja) {
line-height: 1.47376;
font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons",
"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo",
"ＭＳ Ｐゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.page-body:lang(ko) {
line-height: 1.52632;
font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic",
"HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue",
"Helvetica", "Arial", sans-serif;
}
.page-body:lang(th) {
line-height: 1.36844;
font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue",
"Helvetica", "Arial", sans-serif;
}
.page-body:lang(zh-CN) {
font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC",
"Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.page-body:lang(zh-HK) {
font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK",
"Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.page-body:lang(zh-MO) {
font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons",
"PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.page-body:lang(zh-TW) {
font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC",
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI' , "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC",
"Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
@ -5991,62 +5973,13 @@ html.no-touch.no-reduced-motion
line-height: 1.47059;
font-weight: 400;
letter-spacing: -0.022em;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica",
font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica",
"Arial", sans-serif;
}
.page-body:lang(ar) {
line-height: 1.58824;
letter-spacing: 0em;
font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Text", "SF Pro Icons",
"Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.page-body:lang(ja) {
letter-spacing: 0em;
font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons",
"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo",
"ＭＳ Ｐゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.page-body:lang(ko) {
line-height: 1.58824;
letter-spacing: 0em;
font-family: "SF Pro KR", "SF Pro Text", "SF Pro Icons", "Apple Gothic",
"HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue",
"Helvetica", "Arial", sans-serif;
}
.page-body:lang(zh) {
letter-spacing: 0em;
}
.page-body:lang(th) {
line-height: 1.35296;
letter-spacing: 0em;
font-family: "SF Pro TH", "SF Pro Text", "SF Pro Icons", "Helvetica Neue",
"Helvetica", "Arial", sans-serif;
}
.page-body:lang(zh-CN) {
font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC",
"Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.page-body:lang(zh-HK) {
font-family: "SF Pro HK", "SF Pro Text", "SF Pro Icons", "PingFang HK",
"Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.page-body:lang(zh-MO) {
font-family: "SF Pro HK", "SF Pro TC", "SF Pro Text", "SF Pro Icons",
"PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.page-body:lang(zh-TW) {
font-family: "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang TC",
"Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
}
.page-body-media {
@ -6266,7 +6199,7 @@ html.no-touch.no-reduced-motion
line-height: 1.33337;
font-weight: 600;
letter-spacing: -0.01em;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica",
font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica",
"Arial", sans-serif;
}
@ -6832,21 +6765,12 @@ html.no-touch.no-reduced-motion
}
.picture {
/* position: absolute; */
/* left: 50%; */
/* top: 0;
height: 100%;
width: 100%; */
/* transform: translateX(-50%); */
/* max-width: min(calc(100% - 32px), 650px); */
position: relative;
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-left: auto;
margin-right: auto;
max-width: min(calc(100% - 32px), 650px);
}
.picture.no-dl {
@ -7383,7 +7307,7 @@ html.no-touch.no-reduced-motion
line-height: 1.33337;
font-weight: 700;
letter-spacing: -0.01em;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica",
font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica",
"Arial", sans-serif;
}
@ -7548,7 +7472,7 @@ html.no-touch.no-reduced-motion
line-height: 1.28577;
font-weight: 600;
letter-spacing: -0.016em;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica",
font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica",
"Arial", sans-serif;
}

3
src/utils/image.ts
View file

@ -7,10 +7,9 @@ export const convertImageToBase64URL = async (filename: Filename, imageType: Ima
try {
const buffer = await readFile(filename)
const base64String = Buffer.from(buffer).toString("base64")
// console.log(`base64String`, base64String.slice(0, 100));
return `data:image/${imageType};base64,${base64String}`
}
catch (error) {
throw new Error(`file ${filename} no exist ❌`)
throw new Error(`file ${filename} no exist ❌`, error)
}
}

7
tailwind.config.mjs
View file

@ -1,10 +1,7 @@
import { nextui } from "@nextui-org/react"
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}",
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
],
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}", "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
colors: {
@ -12,6 +9,6 @@ export default {
},
},
},
darkMode: "class",
darkMode: ["selector", "body.theme-dark"],
plugins: [nextui()],
}