From a826df3216840a23eed0008241821765a1b7dd68 Mon Sep 17 00:00:00 2001 From: Henry Zhang Date: Fri, 27 Dec 2024 12:31:55 +0800 Subject: [PATCH] chore: update Node.js version and dependencies, modify footer links, and adjust typography - Updated Node.js version in .node-version and package.json to v22. - Updated regex and regex-recursion dependencies to version 5.1.1 in pnpm-lock.yaml. - Changed typography fonts in quartz.config.ts to "Noto Sans Simplified Chinese". - Updated footer links in quartz.layout.ts and quartz/components/Footer.tsx to reflect new community links. - Made minor formatting adjustments in base.scss for consistency. --- .node-version | 2 +- package.json | 2 +- pnpm-lock.yaml | 17 +++++----- quartz.config.ts | 4 +-- quartz.layout.ts | 6 ++-- quartz/components/Footer.tsx | 31 ++++++++--------- quartz/styles/base.scss | 66 +++++++++++++++++++++++------------- 7 files changed, 75 insertions(+), 53 deletions(-) diff --git a/.node-version b/.node-version index 805b5a4e0..53d1c14db 100644 --- a/.node-version +++ b/.node-version @@ -1 +1 @@ -v20.9.0 +v22 diff --git a/package.json b/package.json index 83fac885b..d5e0c677e 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ }, "engines": { "npm": ">=9.3.1", - "node": "20 || >=22" + "node": ">=22" }, "keywords": [ "site generator", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 80ab67f82..ff8323b82 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2387,14 +2387,14 @@ packages: reading-time@1.5.0: resolution: {integrity: sha512-onYyVhBNr4CmAxFsKS7bz+uTLRakypIe4R+5A824vBSkQy/hB3fZepoVEf8OVAxzLvK+H/jm9TzpI3ETSm64Kg==} - regex-recursion@5.0.0: - resolution: {integrity: sha512-UwyOqeobrCCqTXPcsSqH4gDhOjD5cI/b8kjngWgSZbxYh5yVjAwTjO5+hAuPRNiuR70+5RlWSs+U9PVcVcW9Lw==} + regex-recursion@5.1.1: + resolution: {integrity: sha512-ae7SBCbzVNrIjgSbh7wMznPcQel1DNlDtzensnFxpiNpXt1U2ju/bHugH422r+4LAVS1FpW1YCwilmnNsjum9w==} regex-utilities@2.3.0: resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==} - regex@5.0.2: - resolution: {integrity: sha512-/pczGbKIQgfTMRV0XjABvc5RzLqQmwqxLHdQao2RTXPk+pmTXB2P0IaUHYdYyk412YLwUIkaeMd5T+RzVgTqnQ==} + regex@5.1.1: + resolution: {integrity: sha512-dN5I359AVGPnwzJm2jN1k0W9LPZ+ePvoOeVMMfqIMFz53sSwXkxaJoxr50ptnsC771lK95BnTrVSZxq0b9yCGw==} rehype-autolink-headings@7.1.0: resolution: {integrity: sha512-rItO/pSdvnvsP4QRB1pmPiNHUskikqtPojZKJPPPAVx9Hj8i8TwMBhofrrAYRhYOOBZH9tgmG5lPqDLuIWPWmw==} @@ -5184,8 +5184,8 @@ snapshots: oniguruma-to-es@0.8.1: dependencies: emoji-regex-xs: 1.0.0 - regex: 5.0.2 - regex-recursion: 5.0.0 + regex: 5.1.1 + regex-recursion: 5.1.1 package-json-from-dist@1.0.1: {} @@ -5305,13 +5305,14 @@ snapshots: reading-time@1.5.0: {} - regex-recursion@5.0.0: + regex-recursion@5.1.1: dependencies: + regex: 5.1.1 regex-utilities: 2.3.0 regex-utilities@2.3.0: {} - regex@5.0.2: + regex@5.1.1: dependencies: regex-utilities: 2.3.0 diff --git a/quartz.config.ts b/quartz.config.ts index e822892be..fb5f43f1f 100644 --- a/quartz.config.ts +++ b/quartz.config.ts @@ -24,8 +24,8 @@ const config: QuartzConfig = { fontOrigin: "googleFonts", cdnCaching: true, typography: { - header: "Schibsted Grotesk", - body: "Source Sans Pro", + header: "Noto Sans Simplified Chinese", + body: "Noto Sans Simplified Chinese", code: "IBM Plex Mono", }, colors: { diff --git a/quartz.layout.ts b/quartz.layout.ts index 4a78256aa..a70693cef 100644 --- a/quartz.layout.ts +++ b/quartz.layout.ts @@ -8,8 +8,10 @@ export const sharedPageComponents: SharedLayout = { afterBody: [], footer: Component.Footer({ links: { - GitHub: "https://github.com/jackyzha0/quartz", - "Discord Community": "https://discord.gg/cRFFHYye7t", + GitHub: "https://github.com/cssdao", + "Discord": "https://discord.gg/Yn26BZ5x", + "X(Twitter)": "https://x.com/cssdao", + "Telegram": "https://t.me/brotherblockchain", }, }), } diff --git a/quartz/components/Footer.tsx b/quartz/components/Footer.tsx index f08c4901c..05a9321c2 100644 --- a/quartz/components/Footer.tsx +++ b/quartz/components/Footer.tsx @@ -11,22 +11,21 @@ export default ((opts?: Options) => { const Footer: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => { const year = new Date().getFullYear() const links = opts?.links ?? [] - return null - // ( - // - // ) + return ( + + ) } Footer.css = style diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss index 99acd4e60..00893d5b1 100644 --- a/quartz/styles/base.scss +++ b/quartz/styles/base.scss @@ -24,6 +24,7 @@ section { padding: 0 0.1rem; border-radius: 5px; } + ::selection { background: color-mix(in srgb, var(--tertiary) 60%, rgba(255, 255, 255, 0)); color: var(--darkgray); @@ -90,6 +91,7 @@ a { border-radius: 0; padding: 0; } + &.tag-link { &::before { content: "#"; @@ -101,7 +103,7 @@ a { height: 1ex; margin: 0 0.15em; - > path { + >path { fill: var(--dark); } } @@ -109,6 +111,7 @@ a { .desktop-only { display: initial; + @media all and ($mobile) { display: none; } @@ -116,6 +119,7 @@ a { .mobile-only { display: none; + @media all and ($mobile) { display: initial; } @@ -124,8 +128,9 @@ a { .page { max-width: calc(#{map.get($breakpoints, desktop)} + 300px); margin: 0 auto; + & article { - & > h1 { + &>h1 { font-size: 2rem; } @@ -140,23 +145,24 @@ a { color: var(--gray); } - & li > * { + & li>* { margin-top: 0; margin-bottom: 0; } - p > strong { + p>strong { color: var(--dark); } } - & > #quartz-body { + &>#quartz-body { display: grid; grid-template-columns: #{map.get($desktopGrid, templateColumns)}; grid-template-rows: #{map.get($desktopGrid, templateRows)}; column-gap: #{map.get($desktopGrid, columnGap)}; row-gap: #{map.get($desktopGrid, rowGap)}; grid-template-areas: #{map.get($desktopGrid, templateAreas)}; + @media all and ($tablet) { grid-template-columns: #{map.get($tabletGrid, templateColumns)}; grid-template-rows: #{map.get($tabletGrid, templateRows)}; @@ -164,6 +170,7 @@ a { row-gap: #{map.get($tabletGrid, rowGap)}; grid-template-areas: #{map.get($tabletGrid, templateAreas)}; } + @media all and ($mobile) { grid-template-columns: #{map.get($mobileGrid, templateColumns)}; grid-template-rows: #{map.get($mobileGrid, templateRows)}; @@ -175,6 +182,7 @@ a { @media all and not ($desktop) { padding: 0 1rem; } + @media all and ($mobile) { margin: 0 auto; } @@ -193,6 +201,7 @@ a { z-index: 1; grid-area: grid-sidebar-left; flex-direction: column; + @media all and ($mobile) { gap: 0; align-items: center; @@ -209,24 +218,29 @@ a { grid-area: grid-sidebar-right; margin-right: 0; flex-direction: column; + @media all and ($mobile) { margin-left: inherit; margin-right: inherit; } + @media all and not ($desktop) { position: initial; height: unset; width: 100%; flex-direction: row; padding: 0; - & > * { + + &>* { flex: 1; } - & > .toc { + + &>.toc { display: none; } } } + & .page-header, & .page-footer { margin-top: 1rem; @@ -235,13 +249,14 @@ a { & .page-header { grid-area: grid-header; margin: $topSpacing 0 0 0; + @media all and ($mobile) { margin-top: 0; padding: 0; } } - & .center > article { + & .center>article { grid-area: grid-center; } @@ -255,14 +270,17 @@ a { min-width: 100%; margin-left: auto; margin-right: auto; + @media all and ($tablet) { margin-right: 0; } + @media all and ($mobile) { margin-right: 0; margin-left: 0; } } + & footer { margin-left: 0; } @@ -325,7 +343,7 @@ thead { font-weight: revert; margin-bottom: 0; - article > & > a[role="anchor"] { + article>&>a[role="anchor"] { color: var(--dark); background-color: transparent; } @@ -337,7 +355,7 @@ h3, h4, h5, h6 { - &[id] > a[href^="#"] { + &[id]>a[href^="#"] { margin: 0 0.5rem; opacity: 0; transition: opacity 0.2s ease; @@ -346,7 +364,7 @@ h6 { user-select: none; } - &[id]:hover > a { + &[id]:hover>a { opacity: 1; } } @@ -384,7 +402,7 @@ figure[data-rehype-pretty-code-figure] { line-height: 1.6rem; position: relative; - & > [data-rehype-pretty-code-title] { + &>[data-rehype-pretty-code-title] { font-family: var(--codeFont); font-size: 0.9rem; padding: 0.1rem 0.5rem; @@ -395,7 +413,7 @@ figure[data-rehype-pretty-code-figure] { color: var(--darkgray); } - & > pre { + &>pre { padding: 0; } } @@ -412,7 +430,7 @@ pre { border: none; } - & > code { + &>code { background: none; padding: 0; font-size: 0.85rem; @@ -427,7 +445,7 @@ pre { border-radius: 5px; } - & > [data-line] { + &>[data-line] { padding: 0 0.25rem; box-sizing: border-box; border-left: 3px solid transparent; @@ -448,11 +466,11 @@ pre { } } - &[data-line-numbers-max-digits="2"] > [data-line]::before { + &[data-line-numbers-max-digits="2"]>[data-line]::before { width: 2rem; } - &[data-line-numbers-max-digits="3"] > [data-line]::before { + &[data-line-numbers-max-digits="3"]>[data-line]::before { width: 3rem; } } @@ -470,13 +488,13 @@ code { tbody, li, p { - line-height: 1.6rem; + line-height: 1.75em; } .table-container { overflow-x: auto; - & > table { + &>table { margin: 1rem; padding: 1.5rem; border-collapse: collapse; @@ -486,7 +504,7 @@ p { min-width: 75px; } - & > * { + &>* { line-height: 2rem; } } @@ -504,6 +522,7 @@ td { tr { border-bottom: 1px solid var(--lightgray); + &:last-child { border-bottom: none; } @@ -515,7 +534,7 @@ img { margin: 1rem 0; } -p > img + em { +p>img+em { display: block; transform: translateY(-1rem); } @@ -553,9 +572,10 @@ ol.overflow { content: ""; clear: both; - & > li:last-of-type { + &>li:last-of-type { margin-bottom: 30px; } + /*&:after { pointer-events: none; content: ""; @@ -587,4 +607,4 @@ iframe.pdf { height: 100%; width: 100%; border-radius: 5px; -} +} \ No newline at end of file