[6.12.0] Minor redesign and new content

assets/jost/index.css

@@ -0,0 +1,15 @@
+/* Jost */
+@font-face {
+	font-family: 'Jost';
+	src: url('./Jost-VariableFont_wght.ttf');
+	font-weight: 100 1000;
+  font-style: normal;
+	font-stretch: 25% 151%;
+}
+@font-face {
+	font-family: 'Jost';
+	src: url('./Jost-Italic-VariableFont_wght.ttf');
+	font-weight: 100 1000;
+  font-style: italic;
+	font-stretch: 25% 151%;
+}

components/app/Footer/index.module.css

@@ -11,5 +11,5 @@ footer {
   color: var(--fg-color-5);
   background: none;
   font-family: var(--font-family-widget);
-  font-size: 0.75rem;
+  font-size: 85%;
 }

components/app/Footer/index.tsx

@@ -1,11 +1,14 @@
 import React from "react";
+import Link from "next/link";
 import config from "../../../config";
 
 const Footer = () => {
   return (
     <footer>
       <p>
-        Version {config.version}
+        <Link href={`/changelog?v=${config.version}`}>
+          Version {config.version}
+        </Link>
       </p>
       <p>
         &copy; 2023 Clarence Siew

components/app/NavBar/index.module.css

@@ -83,6 +83,7 @@ nav ul {
   align-items: center;
   justify-content: flex-end;
   gap: 0;
+  font-size: 90%;
 }
 nav li {
   height: 100%;
@@ -111,6 +112,7 @@ nav li a {
   border-color: transparent;
   font-weight: bold;
   text-decoration: none;
+  text-transform: uppercase;
   transition: var(--transition);
 }
 nav li a:hover {
@@ -169,6 +171,14 @@ nav.overlay-menu li :is(a, a.active) {
   display: none;
 }
 
+#desktop-search-bar {
+  background: none;
+  border-color: transparent;
+}
+#desktop-search-bar:focus {
+  border-color: var(--primary-color);
+}
+
 @media (max-width: 1023px) {
   header h1 {
     display: none;

components/app/NavBar/index.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, FocusEvent, KeyboardEvent, useEffect, useRef, useState } from "react";
+import React, { ChangeEvent, KeyboardEvent as ReactKeyboardEvent, useEffect, useRef, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import Fuse from "fuse.js";
@@ -39,7 +39,7 @@ const NavBar = ({ setShowSearchModal }: { setShowSearchModal: React.Dispatch<Rea
     setIsAtTop(rootEl?.scrollTop === 0);
   };
 
-  const handleSearchKeyDown = (ev: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+  const handleSearchKeyDown = (ev: ReactKeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     if (ev.key === "Escape") {
       clearSearch();
     }
@@ -67,6 +67,10 @@ const NavBar = ({ setShowSearchModal }: { setShowSearchModal: React.Dispatch<Rea
     setSearchResults([]);
   };
 
+  useEffect(() => {
+    if (searchResultsRef.current) positionSearchResults();
+  }, [handleSearch, searchBarRef.current, searchResultsRef.current]);
+
   useEffect(() => {
     const rootEl = document.getElementById(config.rootElementId);
     rootEl?.addEventListener("scroll", handleScrollEvent);
@@ -75,12 +79,14 @@ const NavBar = ({ setShowSearchModal }: { setShowSearchModal: React.Dispatch<Rea
         clearSearch();
       }
     });
+    window.addEventListener("keydown", (ev: KeyboardEvent) => {
+      if (ev.key === "/") {
+        ev.preventDefault();
+        setShowSearchModal(true);
+      }
+    });
   }, []);
 
-  useEffect(() => {
-    if (searchResultsRef.current) positionSearchResults();
-  }, [handleSearch, searchBarRef.current, searchResultsRef.current]);
-
   return (
     <>
       <header className={!isAtTop ? "with-shadow" : ""}>
@@ -115,11 +121,9 @@ const NavBar = ({ setShowSearchModal }: { setShowSearchModal: React.Dispatch<Rea
             name="search-keywords"
             placeholder="Search"
             forwardedRef={searchBarRef}
-            style={{ borderRadius: "32px" }}
             defaultValue={searchKeywords}
             onChange={handleSearch}
             onKeyDown={handleSearchKeyDown}
-            autoFocus
           />
           {
             !!searchKeywords.length && (

components/app/TagList/index.tsx

@@ -29,7 +29,7 @@ const TagList = ({ item, hooks }: TagListProps) => {
         fontWeight: "bold",
         fontSize: "0.9rem",
         textTransform: "uppercase"
-      }}><small><Link href="/tags" onClick={hooks?.onLinkClick}>Tags</Link>: </small></span>{item?.tags?.map((tag) => <Link key={`${item.slug}-tag-${tag}`} href={`/tags?t=${encodeURIComponent(tag)}`} onClick={hooks?.onLinkClick}><Badge>{tag}</Badge></Link>)}
+      }}><small><Link href="/tags" onClick={hooks?.onLinkClick}>Tags</Link>: </small></span>{item?.tags?.map((tag) => <Badge key={`${item.slug}-tag-${tag}`}><Link href={`/tags?t=${encodeURIComponent(tag)}`} onClick={hooks?.onLinkClick}>{tag}</Link></Badge>)}
     </span>
   );
 };

components/ui/Badge/index.module.css

@@ -18,12 +18,12 @@
 .badge {
   width: min-content;
   margin: 0;
-  padding: 0.06125rem 0.325rem;
+  padding: 0.01rem 0.325rem;
   color: var(--badge-fg-color);
   background: var(--badge-bg-color);
   border: 1px solid var(--badge-border-color);
   border-radius: var(--border-radius);
-  font-size: 70%;
+  font-size: 80%;
   font-weight: 500;
   font-family: var(--font-family-widget);
   letter-spacing: 0;
@@ -34,7 +34,8 @@
   -moz-user-select: none;
 }
 
-:is(a, a:hover, a:active) span.badge {
+.badge :is(a, a:hover, a:active) {
+  color: var(--badge-fg-color);
   text-decoration: none;
 }
 

components/ui/Breadcrumbs/index.module.css

@@ -48,3 +48,24 @@
   color: var(--fg-color-1);
   font-weight: normal;
 }
+
+.breadcrumbs-back-btn {
+  display: none !important;
+}
+
+@media (max-width: 767px) {
+  .breadcrumbs-back-btn {
+    display: inline-flex !important;
+    border-radius: 100% !important;
+  }
+
+  .breadcrumbs {
+    padding: 1rem;
+    color: var(--fg-color);
+    background: none;
+  }
+
+  .breadcrumbs ul {
+    display: none;
+  }
+}

components/ui/Breadcrumbs/index.tsx

@@ -1,5 +1,7 @@
 import Link from "next/link";
 import React from "react";
+import Button from "../Button";
+import { MdArrowBack } from "react-icons/md";
 
 type BreadcrumbsProps = {
   items: {
@@ -11,6 +13,18 @@ type BreadcrumbsProps = {
 const Breadcrumbs = ({ items }: BreadcrumbsProps) => {
   return (
     <div className="breadcrumbs">
+      {
+        (items.length > 1) && (
+          <Button
+            iconOnly
+            className="breadcrumbs-back-btn"
+            variant="link"
+            url={items[items.length - 2].href}
+          >
+            <MdArrowBack />
+          </Button>
+        )
+      }
       <ul>
         {
           items.map((i) => {

components/ui/Modal/ModalWindow.tsx

@@ -16,22 +16,28 @@ const ModalWindow = ({ children, className, classList, style, disabled, title, c
   }, []);
 
   return (
-    <div
-      className={["modal-window", disabled ? "disabled" : undefined, className, ...classList || []].join(" ")}
-      style={style}
-    >
-      <div className="modal-window-header">
-        <h2>
-          {title}
-        </h2>
-        <Button onClick={closeWindowCallback} alt="Close" iconOnly>
-          <MdClose />
-        </Button>
+    <>
+      <Button className="modal-close-btn" onClick={closeWindowCallback} alt="Close" iconOnly>
+        <MdClose />
+      </Button>
+      <div
+        className={["modal-window", disabled ? "disabled" : undefined, className, ...classList || []].join(" ")}
+        style={style}
+      >
+        {
+          !!title && (
+            <div className="modal-window-header">
+              <h2>
+                {title}
+              </h2>
+            </div>
+          )
+        }
+        <div className="modal-window-body">
+          {children}
+        </div>
       </div>
-      <div className="modal-window-body">
-        {children}
-      </div>
-    </div>
+    </>
   );
 };