Updates to search and darkmode styling, add mini-search mode, add tags button

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(),
   ],

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">

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

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,
 }

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;
   }

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);
+    }
+  }
+}

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);
+      }
+    }
+  }
+}