Quartz sync: May 18, 2025, 1:24 PM

Author: codeyoma

quartz.config.ts

@@ -17,7 +17,11 @@ const config: QuartzConfig = {
         },
         locale: "en-US",
         baseUrl: "yoma.kr",
-        ignorePatterns: ["private", "templates", ".obsidian"],
+        ignorePatterns: [
+            "private",
+            "templates",
+            ".obsidian"
+        ],
         defaultDateType: "modified",
         theme: {
             fontOrigin: "googleFonts",

quartz.layout.ts

@@ -39,7 +39,8 @@ export const defaultContentPageLayout: PageLayout = {
         Component.TagList(),
     ],
     left: [
-        Component.PageTitle(),
+        Component.MobileOnly(Component.PageTitle()),
+        Component.DesktopOnly(Component.PageTitleWithLogo()),
         Component.MobileOnly(Component.Spacer()),
         Component.Flex({
             components: [
@@ -48,7 +49,7 @@ export const defaultContentPageLayout: PageLayout = {
                     grow: true,
                 },
                 { Component: Component.Darkmode() },
-                // { Component: Component.ReaderMode() },
+                { Component: Component.DesktopOnly(Component.ReaderMode()) },
             ],
         }),
         // Component.Explorer(),
@@ -59,9 +60,7 @@ export const defaultContentPageLayout: PageLayout = {
                 }
             },
         }),
-        // Component.RecentNotes({
-        //     limit: 5,
-        // }),
+        // Component.RecentNotes({ limit: 5}),
     ],
     right: [
         Component.Graph(),
@@ -74,7 +73,8 @@ export const defaultContentPageLayout: PageLayout = {
 export const defaultListPageLayout: PageLayout = {
     beforeBody: [Component.Breadcrumbs(), Component.ArticleTitle(), Component.ContentMeta()],
     left: [
-        Component.PageTitle(),
+        Component.MobileOnly(Component.PageTitle()),
+        Component.DesktopOnly(Component.PageTitleWithLogo()),
         Component.MobileOnly(Component.Spacer()),
         Component.Flex({
             components: [
@@ -83,6 +83,7 @@ export const defaultListPageLayout: PageLayout = {
                     grow: true,
                 },
                 { Component: Component.Darkmode() },
+                { Component: Component.DesktopOnly(Component.ReaderMode()) },
             ],
         }),
         // Component.Explorer(),

quartz/components/PageTitle.tsx

@@ -4,20 +4,32 @@ import { classNames } from "../util/lang"
 import { i18n } from "../i18n"
 
 const PageTitle: QuartzComponent = ({ fileData, cfg, displayClass }: QuartzComponentProps) => {
-  const title = cfg?.pageTitle ?? i18n(cfg.locale).propertyDefaults.title
-  const baseDir = pathToRoot(fileData.slug!)
-  return (
-    <h2 class={classNames(displayClass, "page-title")}>
-      <a href={baseDir}>{title}</a>
-    </h2>
-  )
+    const title = cfg?.pageTitle ?? i18n(cfg.locale).propertyDefaults.title
+    const baseDir = pathToRoot(fileData.slug!)
+    return (
+        <h2 class={classNames(displayClass, "page-title")}>
+            <a href={baseDir}>
+                {title}
+                <img class="logo" src="https://avatars.githubusercontent.com/u/71107230?v=4" />
+            </a>
+        </h2>
+    )
 }
 
 PageTitle.css = `
 .page-title {
   font-size: 1.75rem;
   margin: 0;
   font-family: var(--titleFont);
+  display: flex;
+  align-items: center;
+}
+.logo {
+  width: 2rem;
+  height: 2rem;
+  padding-left: 0.25rem;
+  margin: 0;
+  vertical-align: text-top;
 }
 `
 

quartz/components/PageTitleWithLogo.tsx

@@ -0,0 +1,33 @@
+import { pathToRoot } from "../util/path"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { classNames } from "../util/lang"
+import { i18n } from "../i18n"
+
+const PageTitle: QuartzComponent = ({ fileData, cfg, displayClass }: QuartzComponentProps) => {
+    const title = cfg?.pageTitle ?? i18n(cfg.locale).propertyDefaults.title
+    const baseDir = pathToRoot(fileData.slug!)
+    return (
+        <h2 class={classNames(displayClass, "page-title")}>
+            <a href={baseDir}>
+                {title}
+                <img class="page-logo" src="https://avatars.githubusercontent.com/u/71107230?v=4" />
+            </a>
+        </h2>
+    )
+}
+
+PageTitle.css = `
+.page-title {
+  font-size: 1.75rem;
+  margin: 0;
+  font-family: var(--titleFont);
+  display: flex;
+}
+.page-logo {
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+}
+`
+
+export default (() => PageTitle) satisfies QuartzComponentConstructor

quartz/components/index.ts

@@ -7,6 +7,7 @@ import Darkmode from "./Darkmode"
 import ReaderMode from "./ReaderMode"
 import Head from "./Head"
 import PageTitle from "./PageTitle"
+import PageTitleWithLogo from "./PageTitleWithLogo"
 import ContentMeta from "./ContentMeta"
 import Spacer from "./Spacer"
 import TableOfContents from "./TableOfContents"
@@ -25,29 +26,30 @@ import Flex from "./Flex"
 import ConditionalRender from "./ConditionalRender"
 
 export {
-  ArticleTitle,
-  Content,
-  TagContent,
-  FolderContent,
-  Darkmode,
-  ReaderMode,
-  Head,
-  PageTitle,
-  ContentMeta,
-  Spacer,
-  TableOfContents,
-  Explorer,
-  TagList,
-  Graph,
-  Backlinks,
-  Search,
-  Footer,
-  DesktopOnly,
-  MobileOnly,
-  RecentNotes,
-  NotFound,
-  Breadcrumbs,
-  Comments,
-  Flex,
-  ConditionalRender,
+    ArticleTitle,
+    Content,
+    TagContent,
+    FolderContent,
+    Darkmode,
+    ReaderMode,
+    Head,
+    PageTitle,
+    PageTitleWithLogo,
+    ContentMeta,
+    Spacer,
+    TableOfContents,
+    Explorer,
+    TagList,
+    Graph,
+    Backlinks,
+    Search,
+    Footer,
+    DesktopOnly,
+    MobileOnly,
+    RecentNotes,
+    NotFound,
+    Breadcrumbs,
+    Comments,
+    Flex,
+    ConditionalRender,
 }