Merge pull request #2 from cssdao/develop

chore: update Node.js version and dependencies, modify footer links, …

.node-version

@@ -1 +1 @@
-v20.9.0
+v22

package.json

@@ -26,7 +26,7 @@
   },
   "engines": {
     "npm": ">=9.3.1",
-    "node": "20 || >=22"
+    "node": ">=22"
   },
   "keywords": [
     "site generator",

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:
+  regex-recursion@5.1.1:
-    resolution: {integrity: sha512-UwyOqeobrCCqTXPcsSqH4gDhOjD5cI/b8kjngWgSZbxYh5yVjAwTjO5+hAuPRNiuR70+5RlWSs+U9PVcVcW9Lw==}
+    resolution: {integrity: sha512-ae7SBCbzVNrIjgSbh7wMznPcQel1DNlDtzensnFxpiNpXt1U2ju/bHugH422r+4LAVS1FpW1YCwilmnNsjum9w==}
 
   regex-utilities@2.3.0:
     resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==}
 
-  regex@5.0.2:
+  regex@5.1.1:
-    resolution: {integrity: sha512-/pczGbKIQgfTMRV0XjABvc5RzLqQmwqxLHdQao2RTXPk+pmTXB2P0IaUHYdYyk412YLwUIkaeMd5T+RzVgTqnQ==}
+    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: 5.1.1
-      regex-recursion: 5.0.0
+      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
 

quartz.config.ts

@@ -24,8 +24,8 @@ const config: QuartzConfig = {
       fontOrigin: "googleFonts",
       cdnCaching: true,
       typography: {
-        header: "Schibsted Grotesk",
+        header: "Noto Sans Simplified Chinese",
-        body: "Source Sans Pro",
+        body: "Noto Sans Simplified Chinese",
         code: "IBM Plex Mono",
       },
       colors: {

quartz.layout.ts

@@ -8,8 +8,10 @@ export const sharedPageComponents: SharedLayout = {
   afterBody: [],
   footer: Component.Footer({
     links: {
-      GitHub: "https://github.com/jackyzha0/quartz",
+      GitHub: "https://github.com/cssdao",
-      "Discord Community": "https://discord.gg/cRFFHYye7t",
+      "Discord": "https://discord.gg/Yn26BZ5x",
+      "X(Twitter)": "https://x.com/cssdao",
+      "Telegram": "https://t.me/brotherblockchain",
     },
   }),
 }

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 class={`${displayClass ?? ""}`}>
-    //   <footer class={`${displayClass ?? ""}`}>
+        {/* <p>
-    //     <p>
+          {i18n(cfg.locale).components.footer.createdWith}{" "}
-    //       {i18n(cfg.locale).components.footer.createdWith}{" "}
+          <a href="https://quartz.jzhao.xyz/">Quartz v{version}</a> © {year}
-    //       <a href="https://quartz.jzhao.xyz/">Quartz v{version}</a> © {year}
+        </p> */}
-    //     </p>
+        <ul>
-    //     <ul>
+          {Object.entries(links).map(([text, link]) => (
-    //       {Object.entries(links).map(([text, link]) => (
+            <li>
-    //         <li>
+              <a href={link}>{text}</a>
-    //           <a href={link}>{text}</a>
+            </li>
-    //         </li>
+          ))}
-    //       ))}
+        </ul>
-    //     </ul>
+      </footer>
-    //   </footer>
+    )
-    // )
   }
 
   Footer.css = style

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: "#";
@@ -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,6 +128,7 @@ a {
 .page {
   max-width: calc(#{map.get($breakpoints, desktop)} + 300px);
   margin: 0 auto;
+
   & article {
     &>h1 {
       font-size: 2rem;
@@ -157,6 +162,7 @@ a {
     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 {
           display: none;
         }
       }
     }
+
     & .page-header,
     & .page-footer {
       margin-top: 1rem;
@@ -235,6 +249,7 @@ a {
     & .page-header {
       grid-area: grid-header;
       margin: $topSpacing 0 0 0;
+
       @media all and ($mobile) {
         margin-top: 0;
         padding: 0;
@@ -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;
     }
@@ -470,7 +488,7 @@ code {
 tbody,
 li,
 p {
-  line-height: 1.6rem;
+  line-height: 1.75em;
 }
 
 .table-container {
@@ -504,6 +522,7 @@ td {
 
 tr {
   border-bottom: 1px solid var(--lightgray);
+
   &:last-child {
     border-bottom: none;
   }
@@ -556,6 +575,7 @@ ol.overflow {
   &>li:last-of-type {
     margin-bottom: 30px;
   }
+
   /*&:after {
     pointer-events: none;
     content: "";