perform modifications

quartz.config.ts

@@ -3,30 +3,29 @@ import * as Plugin from "./quartz/plugins"
 
 const config: QuartzConfig = {
   configuration: {
-    pageTitle: "🪴 Quartz 4.0",
+    pageTitle: "kazbo public notes",
     enableSPA: true,
     enablePopovers: true,
     analytics: {
-      provider: "plausible",
+      provider: "google",
+      tagId: "G-JVXFC0DCRE",
     },
-    locale: "en-US",
-    baseUrl: "quartz.jzhao.xyz",
-    ignorePatterns: ["private", "templates", ".obsidian"],
-    defaultDateType: "created",
+    baseUrl: "kinoshita-lab.github.io/public_notes",
+    ignorePatterns: ["private", "templates", ".obsidian", "obsidian_templates_"],
+    defaultDateType: "modified",
     theme: {
-      cdnCaching: true,
       typography: {
-        header: "Schibsted Grotesk",
-        body: "Source Sans Pro",
-        code: "IBM Plex Mono",
+        header: "Noto Serif JP",
+        body: "Noto Serif JP",
+        code: "Noto Mono",
       },
       colors: {
         lightMode: {
           light: "#faf8f8",
           lightgray: "#e5e5e5",
-          gray: "#b8b8b8",
-          darkgray: "#4e4e4e",
-          dark: "#2b2b2b",
+          gray: "#000000",
+          darkgray: "#000000",
+          dark: "#000000",
           secondary: "#284b63",
           tertiary: "#84a59d",
           highlight: "rgba(143, 159, 169, 0.15)",
@@ -34,9 +33,9 @@ const config: QuartzConfig = {
         darkMode: {
           light: "#161618",
           lightgray: "#393639",
-          gray: "#646464",
-          darkgray: "#d4d4d4",
-          dark: "#ebebec",
+          gray: "#ffffff",
+          darkgray: "#ffffff",
+          dark: "#ffffff",
           secondary: "#7b97aa",
           tertiary: "#84a59d",
           highlight: "rgba(143, 159, 169, 0.15)",
@@ -47,16 +46,16 @@ const config: QuartzConfig = {
   plugins: {
     transformers: [
       Plugin.FrontMatter(),
+      Plugin.TableOfContents(),
       Plugin.CreatedModifiedDate({
         // you can add 'git' here for last modified from Git
         // if you do rely on git for dates, ensure defaultDateType is 'modified'
-        priority: ["frontmatter", "filesystem"],
+        priority: ["git"],
       }),
       Plugin.Latex({ renderEngine: "katex" }),
       Plugin.SyntaxHighlighting(),
       Plugin.ObsidianFlavoredMarkdown({ enableInHtmlEmbed: false }),
       Plugin.GitHubFlavoredMarkdown(),
-      Plugin.TableOfContents(),
       Plugin.CrawlLinks({ markdownLinkResolution: "shortest" }),
       Plugin.Description(),
     ],
@@ -68,7 +67,7 @@ const config: QuartzConfig = {
       Plugin.FolderPage(),
       Plugin.TagPage(),
       Plugin.ContentIndex({
-        enableSiteMap: true,
+        enableSiteMap: false,
         enableRSS: true,
       }),
       Plugin.Assets(),

quartz.layout.ts

@@ -5,45 +5,36 @@ import * as Component from "./quartz/components"
 export const sharedPageComponents: SharedLayout = {
   head: Component.Head(),
   header: [],
-  footer: Component.Footer({
-    links: {
-      GitHub: "https://github.com/jackyzha0/quartz",
-      "Discord Community": "https://discord.gg/cRFFHYye7t",
-    },
-  }),
+  footer: Component.Footer()
 }
 
 // components for pages that display a single page (e.g. a single note)
 export const defaultContentPageLayout: PageLayout = {
   beforeBody: [        
-    Component.Breadcrumbs(),
-    Component.ArticleTitle(),
-    Component.ContentMeta(),
-    Component.TagList(),
+    Component.ContentMeta({ showReadingTime: false }),
   ],
   left: [
     Component.PageTitle(),
     Component.MobileOnly(Component.Spacer()),
     Component.Search(),
     Component.Darkmode(),
-    Component.DesktopOnly(Component.Explorer()),
   ],
   right: [        
-    Component.Graph(),
-    Component.DesktopOnly(Component.TableOfContents()),
     Component.Backlinks(),
+    Component.DesktopOnly(Component.RecentNotes({title: "Recent", limit: 10})),
   ],
 }
 
 // components for pages that display lists of pages  (e.g. tags or folders)
 export const defaultListPageLayout: PageLayout = {
-  beforeBody: [Component.Breadcrumbs(), Component.ArticleTitle(), Component.ContentMeta()],
+  beforeBody: [Component.ArticleTitle(), Component.ContentMeta()],
   left: [
     Component.PageTitle(),
     Component.MobileOnly(Component.Spacer()),
     Component.Search(),
     Component.Darkmode(),
-    Component.DesktopOnly(Component.Explorer()),
   ],
-  right: [],
+  right: [
+    Component.DesktopOnly(Component.RecentNotes({title: "Recent"})),
+  ],
 }

quartz/components/RecentNotes.tsx

@@ -40,29 +40,12 @@ export default ((userOpts?: Partial<Options>) => {
               <li class="recent-li">
                 <div class="section">
                   <div class="desc">
-                    <h3>
+                    {/*<h3>*/}
                       <a href={resolveRelative(fileData.slug!, page.slug!)} class="internal">
                         {title}
                       </a>
-                    </h3>
+                    {/*</h3>*/}
                   </div>
-                  {page.dates && (
-                    <p class="meta">
-                      <Date date={getDate(cfg, page)!} locale={cfg.locale} />
-                    </p>
-                  )}
-                  <ul class="tags">
-                    {tags.map((tag) => (
-                      <li>
-                        <a
-                          class="internal tag-link"
-                          href={resolveRelative(fileData.slug!, `tags/${tag}` as FullSlug)}
-                        >
-                          #{tag}
-                        </a>
-                      </li>
-                    ))}
-                  </ul>
                 </div>
               </li>
             )

quartz/styles/custom.scss

@@ -1,3 +1,113 @@
 @use "./base.scss";
 
+$default-font-size: 0.8rem;
+$default-line-height: 1.3rem;
+$header-font-size-base : $default-font-size * 1.2;
+$header-font-size-h6 : $default-font-size * 1.2;
+$header-line-height : 120%;
+$header_font: sans-serif;
 // put your custom CSS here!
+
+h1 {
+    font-size: 1.75rem !important;
+    font-family: $header_font !important;
+    font-weight: bold !important;
+    letter-spacing: .1rem !important;
+    margin-top: 0rem;
+    margin-bottom: 0rem;
+    line-height: $header-line-height !important;
+}
+
+li {
+    line-height: $default-line-height;
+    font-size: $default-font-size;
+}
+
+div.left.sidebar {
+    padding-left: 1rem !important;
+}
+
+
+
+
+
+
+h2 {
+    font-size: 1rem !important;
+    font-family: $header_font !important;
+    font-weight: bold !important;
+    letter-spacing: .1rem !important;
+    line-height: $header-line-height !important;
+}
+
+h3 {
+    font-size: 1rem !important;
+    font-family: $header_font !important;
+    font-weight: bold !important;
+    letter-spacing: .1rem !important;
+    line-height: $header-line-height !important;
+}
+
+
+h4 {
+    font-size: 1rem !important;
+    font-family: $header_font !important;
+    letter-spacing: .1rem !important;
+    line-height: $header-line-height !important;
+}
+
+h5 {
+    font-size: 1rem !important;
+    font-family: $header_font !important;
+    letter-spacing: .1rem !important;
+    line-height: $header-line-height !important;
+}
+
+h6 {
+    font-size: 1rem !important;
+    font-family: $header_font !important;
+    letter-spacing: .1rem !important;
+    line-height: $header-line-height !important;
+}
+
+
+p {
+    font-size: 0.8rem;
+    line-height: $default-line-height;
+    letter-spacing: .05rem !important;
+    margin-left: 1rem !important;
+}
+
+p.content-meta {
+    font-family: sans-serif !important;
+    margin-left: 0 !important;
+}
+
+pre {
+    margin-left: 1rem;
+    font-family: monospace;
+}
+
+code {
+    font-size: 0.8rem !important;
+    font-family: monospace;
+}
+
+a.internal {
+    background-color: transparent !important;
+}
+
+a.tag-link {
+    margin-right: 1rem !important;
+}
+
+
+.right.sidebar {
+    padding-right: 1rem !important;
+}
+
+.recent-notes>ul.recent-ul>li {
+    font-size: 0.75rem !important;
+    margin: 0 !important;
+    margin-bottom: 0.5rem !important;
+}