From de5676e18867fd41fe0903b8344313cddded9fc7 Mon Sep 17 00:00:00 2001
From: Andrew Milne <andrew_milne@stormrook.com>
Date: Sat, 15 Mar 2025 20:37:45 +0000
Subject: [PATCH 1/2] Updates to search and darkmode styling, add mini-search
 mode, add tags button

---
 quartz.layout.ts                       |  8 +++--
 quartz/components/Search.tsx           |  9 ++++--
 quartz/components/Tags.tsx             | 32 ++++++++++++++++++++
 quartz/components/index.ts             |  2 ++
 quartz/components/styles/darkmode.scss |  8 +++--
 quartz/components/styles/search.scss   | 30 ++++++++++++++++--
 quartz/components/styles/tags.scss     | 42 ++++++++++++++++++++++++++
 7 files changed, 121 insertions(+), 10 deletions(-)
 create mode 100644 quartz/components/Tags.tsx
 create mode 100644 quartz/components/styles/tags.scss

diff --git a/quartz.layout.ts b/quartz.layout.ts
index 1c601a2b6..39ee2b382 100644
--- a/quartz.layout.ts
+++ b/quartz.layout.ts
@@ -28,11 +28,13 @@ export const defaultContentPageLayout: PageLayout = {
     Component.Flex({
       components: [
         {
-          Component: Component.Search(),
+          Component: Component.Search({miniButton: false}),
           grow: true,
         },
+        { Component: Component.Tags() },
         { Component: Component.Darkmode() },
       ],
+      gap: "0rem",
     }),
     Component.Explorer(),
   ],
@@ -52,11 +54,13 @@ export const defaultListPageLayout: PageLayout = {
     Component.Flex({
       components: [
         {
-          Component: Component.Search(),
+          Component: Component.Search({miniButton: false}),
           grow: true,
         },
+        { Component: Component.Tags() },
         { Component: Component.Darkmode() },
       ],
+      gap: "0rem",
     }),
     Component.Explorer(),
   ],
diff --git a/quartz/components/Search.tsx b/quartz/components/Search.tsx
index 4c6664ae8..0b595576c 100644
--- a/quartz/components/Search.tsx
+++ b/quartz/components/Search.tsx
@@ -7,20 +7,23 @@ import { i18n } from "../i18n"
 
 export interface SearchOptions {
   enablePreview: boolean
+  miniButton: boolean
 }
 
 const defaultOptions: SearchOptions = {
   enablePreview: true,
+  miniButton: false,
 }
 
 export default ((userOpts?: Partial<SearchOptions>) => {
   const Search: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
     const opts = { ...defaultOptions, ...userOpts }
     const searchPlaceholder = i18n(cfg.locale).components.search.searchBarPlaceholder
+    const searchButtonText = opts.miniButton ? "" : <p>{i18n(cfg.locale).components.search.title}</p>
     return (
-      <div class={classNames(displayClass, "search")}>
-        <button class="search-button">
-          <p>{i18n(cfg.locale).components.search.title}</p>
+      <div class={classNames(displayClass, "search") + (opts.miniButton ? " search-mini" : "")}>
+        <button class={"search-button" + (opts.miniButton ? " search-button-mini" : "")}>
+        {searchButtonText}
           <svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7">
             <title>Search</title>
             <g class="search-path" fill="none">
diff --git a/quartz/components/Tags.tsx b/quartz/components/Tags.tsx
new file mode 100644
index 000000000..9334654d4
--- /dev/null
+++ b/quartz/components/Tags.tsx
@@ -0,0 +1,32 @@
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import style from "./styles/tags.scss"
+// @ts-ignore
+import { classNames } from "../util/lang"
+import { i18n } from "../i18n"
+
+export default (() => {
+  const Tags: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
+    return (
+      <a href="/tags" class="toggle tags-link" tabIndex={-1}>
+        <button class="tags-button" id="tags-button">
+          <svg
+            viewBox="0 0 25 25"
+            xmlns="http://www.w3.org/2000/svg">
+            <g>
+              <path
+                d="M 4.2086894,1.2393355 A 2.969084,2.9712454 0 0 0 1.2403355,4.2098501 V 11.59051 a 2.969084,2.9712454 0 0 0 0.8696829,2.101561 l 9.2194546,9.224802 a 2.969084,2.9712454 0 0 0 4.197341,-0.0014 l 7.373929,-7.379266 a 2.969084,2.9712454 0 0 0 0.0014,-4.200397 L 13.684012,2.1096514 A 2.969084,2.9712454 0 0 0 11.58398,1.2393355 Z" />
+              <circle
+                cy="6.5883951"
+                cx="6.5883951"
+                r="2.6196454" />
+            </g>
+          </svg>
+        </button>
+      </a>
+    )
+  }
+
+  Tags.css = style
+
+  return Tags
+}) satisfies QuartzComponentConstructor
diff --git a/quartz/components/index.ts b/quartz/components/index.ts
index 49a3cb6da..622bbc019 100644
--- a/quartz/components/index.ts
+++ b/quartz/components/index.ts
@@ -21,6 +21,7 @@ import RecentNotes from "./RecentNotes"
 import Breadcrumbs from "./Breadcrumbs"
 import Comments from "./Comments"
 import Flex from "./Flex"
+import Tags from "./Tags"
 
 export {
   ArticleTitle,
@@ -46,4 +47,5 @@ export {
   Breadcrumbs,
   Comments,
   Flex,
+  Tags,
 }
diff --git a/quartz/components/styles/darkmode.scss b/quartz/components/styles/darkmode.scss
index 5d1e078e9..e1b3d67c5 100644
--- a/quartz/components/styles/darkmode.scss
+++ b/quartz/components/styles/darkmode.scss
@@ -1,12 +1,13 @@
 .darkmode {
   cursor: pointer;
   padding: 0;
+  display: block;
   position: relative;
   background: none;
   border: none;
-  width: 20px;
-  height: 20px;
-  margin: 0 10px;
+  width: 2rem;
+  height: 2rem;
+  margin: 0;
   text-align: inherit;
   flex-shrink: 0;
 
@@ -15,6 +16,7 @@
     width: 20px;
     height: 20px;
     top: calc(50% - 10px);
+    left: calc(50% - 10px);
     fill: var(--darkgray);
     transition: opacity 0.1s ease;
   }
diff --git a/quartz/components/styles/search.scss b/quartz/components/styles/search.scss
index 182b56b78..a3120d6d1 100644
--- a/quartz/components/styles/search.scss
+++ b/quartz/components/styles/search.scss
@@ -3,6 +3,8 @@
 .search {
   min-width: fit-content;
   max-width: 14rem;
+  margin-right: 0.5rem;
+  
   @media all and ($mobile) {
     flex-grow: 0.3;
   }
@@ -30,8 +32,8 @@
 
     & svg {
       cursor: pointer;
-      width: 18px;
-      min-width: 18px;
+      width: 20px;
+      min-width: 20px;
       margin: 0 0.5rem;
 
       .search-path {
@@ -232,3 +234,27 @@
     }
   }
 }
+
+.search-mini {
+    width: 2rem;
+    height: 2rem;
+    margin: 0;
+
+  &>.search-button-mini {
+    display: inline;
+    position: relative;
+    background: none;
+    width: 2rem;
+    height: 2rem;
+
+    & svg {
+      position: absolute;
+      width: 20px;
+      height: 20px;
+      margin:0px;
+  
+      top: calc(50% - 10px);
+      left: calc(50% - 10px);
+    }
+  }
+}
\ No newline at end of file
diff --git a/quartz/components/styles/tags.scss b/quartz/components/styles/tags.scss
new file mode 100644
index 000000000..2e4b59e99
--- /dev/null
+++ b/quartz/components/styles/tags.scss
@@ -0,0 +1,42 @@
+@use "../../styles/variables.scss" as *;
+
+.tags-link {
+  display:block;
+  height: 2rem;
+  width: 2rem;
+
+  & .tags-button {
+
+    cursor: pointer;
+    padding: 0px;
+    position: relative;
+    background: none;
+    border: none;
+    height: 2rem;
+    width: 2rem;
+    margin: 0;
+    text-align: inherit;
+    flex-shrink: 0;
+
+    & svg {
+      position: absolute;
+      width: 20px;
+      height: 20px;
+
+      top: calc(50% - 10px);
+      left: calc(50% - 10px);
+
+      & path {
+        fill: none;
+        stroke: var(--darkgray);
+        stroke-width: 2px;
+        stroke-linecap: round;
+        transition: fill 0.5s ease;
+      }
+
+      & circle {
+        fill: var(--darkgray);
+      }
+    }
+  }
+}
\ No newline at end of file

From 3ac50f188b78e6ad91842d82a7645d70cffdfa43 Mon Sep 17 00:00:00 2001
From: Andrew Milne <andrew_milne@stormrook.com>
Date: Sat, 15 Mar 2025 20:59:56 +0000
Subject: [PATCH 2/2] Updates to search and darkmode styling, add mini-search
 mode, add tags button (run prettier)

---
 quartz.layout.ts                     |  4 ++--
 quartz/components/Search.tsx         |  8 ++++++--
 quartz/components/Tags.tsx           | 12 +++---------
 quartz/components/styles/search.scss | 16 ++++++++--------
 quartz/components/styles/tags.scss   |  5 ++---
 5 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/quartz.layout.ts b/quartz.layout.ts
index 39ee2b382..2e3188647 100644
--- a/quartz.layout.ts
+++ b/quartz.layout.ts
@@ -28,7 +28,7 @@ export const defaultContentPageLayout: PageLayout = {
     Component.Flex({
       components: [
         {
-          Component: Component.Search({miniButton: false}),
+          Component: Component.Search(),
           grow: true,
         },
         { Component: Component.Tags() },
@@ -54,7 +54,7 @@ export const defaultListPageLayout: PageLayout = {
     Component.Flex({
       components: [
         {
-          Component: Component.Search({miniButton: false}),
+          Component: Component.Search(),
           grow: true,
         },
         { Component: Component.Tags() },
diff --git a/quartz/components/Search.tsx b/quartz/components/Search.tsx
index 0b595576c..a6febb400 100644
--- a/quartz/components/Search.tsx
+++ b/quartz/components/Search.tsx
@@ -19,11 +19,15 @@ export default ((userOpts?: Partial<SearchOptions>) => {
   const Search: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
     const opts = { ...defaultOptions, ...userOpts }
     const searchPlaceholder = i18n(cfg.locale).components.search.searchBarPlaceholder
-    const searchButtonText = opts.miniButton ? "" : <p>{i18n(cfg.locale).components.search.title}</p>
+    const searchButtonText = opts.miniButton ? (
+      ""
+    ) : (
+      <p>{i18n(cfg.locale).components.search.title}</p>
+    )
     return (
       <div class={classNames(displayClass, "search") + (opts.miniButton ? " search-mini" : "")}>
         <button class={"search-button" + (opts.miniButton ? " search-button-mini" : "")}>
-        {searchButtonText}
+          {searchButtonText}
           <svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7">
             <title>Search</title>
             <g class="search-path" fill="none">
diff --git a/quartz/components/Tags.tsx b/quartz/components/Tags.tsx
index 9334654d4..6ce811cfe 100644
--- a/quartz/components/Tags.tsx
+++ b/quartz/components/Tags.tsx
@@ -9,16 +9,10 @@ export default (() => {
     return (
       <a href="/tags" class="toggle tags-link" tabIndex={-1}>
         <button class="tags-button" id="tags-button">
-          <svg
-            viewBox="0 0 25 25"
-            xmlns="http://www.w3.org/2000/svg">
+          <svg viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
             <g>
-              <path
-                d="M 4.2086894,1.2393355 A 2.969084,2.9712454 0 0 0 1.2403355,4.2098501 V 11.59051 a 2.969084,2.9712454 0 0 0 0.8696829,2.101561 l 9.2194546,9.224802 a 2.969084,2.9712454 0 0 0 4.197341,-0.0014 l 7.373929,-7.379266 a 2.969084,2.9712454 0 0 0 0.0014,-4.200397 L 13.684012,2.1096514 A 2.969084,2.9712454 0 0 0 11.58398,1.2393355 Z" />
-              <circle
-                cy="6.5883951"
-                cx="6.5883951"
-                r="2.6196454" />
+              <path d="M 4.2086894,1.2393355 A 2.969084,2.9712454 0 0 0 1.2403355,4.2098501 V 11.59051 a 2.969084,2.9712454 0 0 0 0.8696829,2.101561 l 9.2194546,9.224802 a 2.969084,2.9712454 0 0 0 4.197341,-0.0014 l 7.373929,-7.379266 a 2.969084,2.9712454 0 0 0 0.0014,-4.200397 L 13.684012,2.1096514 A 2.969084,2.9712454 0 0 0 11.58398,1.2393355 Z" />
+              <circle cy="6.5883951" cx="6.5883951" r="2.6196454" />
             </g>
           </svg>
         </button>
diff --git a/quartz/components/styles/search.scss b/quartz/components/styles/search.scss
index a3120d6d1..87e5c1da3 100644
--- a/quartz/components/styles/search.scss
+++ b/quartz/components/styles/search.scss
@@ -4,7 +4,7 @@
   min-width: fit-content;
   max-width: 14rem;
   margin-right: 0.5rem;
-  
+
   @media all and ($mobile) {
     flex-grow: 0.3;
   }
@@ -236,11 +236,11 @@
 }
 
 .search-mini {
-    width: 2rem;
-    height: 2rem;
-    margin: 0;
+  width: 2rem;
+  height: 2rem;
+  margin: 0;
 
-  &>.search-button-mini {
+  & > .search-button-mini {
     display: inline;
     position: relative;
     background: none;
@@ -251,10 +251,10 @@
       position: absolute;
       width: 20px;
       height: 20px;
-      margin:0px;
-  
+      margin: 0px;
+
       top: calc(50% - 10px);
       left: calc(50% - 10px);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/quartz/components/styles/tags.scss b/quartz/components/styles/tags.scss
index 2e4b59e99..669066baf 100644
--- a/quartz/components/styles/tags.scss
+++ b/quartz/components/styles/tags.scss
@@ -1,12 +1,11 @@
 @use "../../styles/variables.scss" as *;
 
 .tags-link {
-  display:block;
+  display: block;
   height: 2rem;
   width: 2rem;
 
   & .tags-button {
-
     cursor: pointer;
     padding: 0px;
     position: relative;
@@ -39,4 +38,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}