Changed to use font optimizer. Removed unused fonts. Added landmark e…

…lements.
randombits-dev · Jan 4, 2024 · 7db2e63 · 7db2e63
1 parent 8b55bc0
commit 7db2e63
Show file tree

Hide file tree

Showing 14 changed files with 63 additions and 78 deletions.
diff --git a/package.json b/package.json
@@ -14,12 +14,11 @@
     "@astrojs/sitemap": "^3.0.3",
     "@astrojs/solid-js": "^3.0.2",
     "@astrojs/tailwind": "^5.0.4",
-    "@fontsource/bungee": "^5.0.18",
-    "@fontsource/righteous": "^5.0.18",
-    "@fontsource/alef": "^5.0.8",
     "@unocss/preset-mini": "^0.58.0",
     "@unocss/preset-wind": "^0.58.0",
     "astro": "^4.0.7",
+    "astro-font-picker": "^0.2.1",
+    "astro-google-fonts-optimizer": "^0.2.2",
     "canvas": "^2.11.2",
     "remark-code-titles": "^0.1.2",
     "sass": "^1.69.5",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/article/ArticleTOC.tsx b/src/components/article/ArticleTOC.tsx
@@ -24,37 +24,37 @@ const ArticleTOC = ({path, relatedPages, headings}) => {
     };
 
     if (relatedPages) {
-        return <div class="card rb-article__nav" ref={el}>
+        return <nav aria-label="Articles" class="card rb-article__nav" ref={el}>
             {
                 relatedPages.sort((a, b) => a.data.order - b.data.order).map(article => {
                     const showLink = path.endsWith(article.slug);
                     if (showLink) {
                         return <><a class="font-bold"  aria-selected={!selected()} href={article.slug}>{article.data.toc || article.data.title}</a>
-                            <div class="rb-article__sub-nav">
+                            <nav aria-label="Article Sections" class="rb-article__sub-nav">
                                 {
                                     headings.map(heading => {
                                         const isSelected = selected() === heading.slug;
                                         return <a class="text-[16px]" href={'#' + heading.slug} aria-selected={isSelected} onclick={() => handleClickHeading(heading)}>{heading.text}</a>
                                     })
                                 }
-                            </div>
+                            </nav>
                         </>;
                     } else {
                         return <a class="font-bold" href={article.slug}>{article.data.toc || article.data.title}</a>;
                     }
                 })
             }
 
-        </div>
+        </nav>
     } else {
-        return <div class="card rb-article__nav" ref={el}>
+        return <nav aria-label="Article Sections" class="card rb-article__nav" ref={el}>
             {
                 headings.map(heading => {
                     const isSelected = selected() === heading.slug;
                     return <a class="text-[16px]" href={'#' + heading.slug} aria-selected={isSelected} onclick={() => handleClickHeading(heading)}>{heading.text}</a>
                 })
             }
-        </div>
+        </nav>
     }
 
 

diff --git a/src/components/layout/BaseHead.astro b/src/components/layout/BaseHead.astro
@@ -3,6 +3,7 @@
 // all pages through the use of the <BaseHead /> component.
 import '../../styles/global.css';
 import {removeTrailingSlash} from "../../utils/utils";
+import { GoogleFontsOptimizer } from "astro-google-fonts-optimizer";
 
 interface Props {
   title: string;
@@ -15,8 +16,10 @@ const {title, description, img} = Astro.props;
 
 <meta charset="utf-8"/>
 <meta name="viewport" content="width=device-width, initial-scale = 1.0"/>
-<link rel="icon" type="image/svg" href="/favicon.svg"/>
 <title>{title}</title>
+<link rel="icon" type="image/svg" href="/favicon.svg"/>
+<GoogleFontsOptimizer url="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans&family=Righteous&display=swap">
+</GoogleFontsOptimizer>
 <meta property="og:description" name="description" content={description}/>
 <meta name="twitter:card" content="summary_large_image"/>
 <meta name="twitter:site" content="@RandomBitsDev"/>

diff --git a/src/components/layout/Footer.astro b/src/components/layout/Footer.astro
@@ -17,13 +17,13 @@ const keybase = await fetch('https://storage.googleapis.com/randombits/images/ke
       <a href="https://github.com/randombits-dev" target="_blank" title="github link">
         <div set:html={githubSVG}/>
       </a>
-      <a href="https://discord.gg/VdAySp2Y" target="_blank" aria-label="discord link">
+      <a href="https://discord.gg/VdAySp2Y" target="_blank" title="discord link">
         <div set:html={discordSVG}/>
       </a>
-      <a href="https://twitter.com/RandomBitsDev" target="_blank" aria-label="twitter link">
+      <a href="https://twitter.com/RandomBitsDev" target="_blank" title="twitter link">
         <div set:html={twitterSVG}/>
       </a>
-      <a href="https://linktr.ee/randombits" target="_blank" aria-label="linktree link">
+      <a href="https://linktr.ee/randombits" target="_blank" title="linktree link">
         <div set:html={linktree}/>
       </a>
       <a href="https://keybase.io/randombitsdev" target="_blank" title="keybase link">

diff --git a/src/components/layout/Header.astro b/src/components/layout/Header.astro
@@ -2,24 +2,15 @@
 import Logo from "../Logo.astro";
 ---
 
-<div class="mt-[-20px] text-center relative z-10">
+<header class="mt-[-20px] text-center relative z-10">
 
-  <div style="font-family: Righteous;"
+  <nav aria-label="Main" style="font-family: Righteous;"
        class="rb-color-header text-xl sm:text-2xl pt-5 rounded-b-xl overflow-hidden shadow-2xl sm:inline-flex items-center">
-    <a class="px-6 block sm:inline" href="/" aria-label="home page">
+    <a class="px-6 block sm:inline" href="/" aria-label="Home Page">
       <Logo includeDigits={true} width={45} height={45}/>
     </a>
-    <a href="/articles"
-       class="px-3 sm:px-5 py-3 md:px-8 hover:underline hover:decoration-4 hover:underline-offset-4 cursor-pointer">
-      articles
-    </a> /
-    <a href="/tools"
-       class="px-3 sm:px-5 py-3 md:px-8 hover:underline hover:decoration-4 hover:underline-offset-4 cursor-pointer">
-      projects
-    </a> /
-    <a href="/about"
-       class="px-3 sm:px-5 py-3 md:px-8 hover:underline hover:decoration-4 hover:underline-offset-4 cursor-pointer">
-      about
-    </a>
-  </div>
-</div>
+    <a href="/articles" class="header-link">articles</a> /
+    <a href="/tools" class="header-link">projects</a> /
+    <a href="/about" class="header-link">about</a>
+  </nav>
+</header>
diff --git a/src/content/number-localization/locale-list.mdx b/src/content/number-localization/locale-list.mdx
@@ -10,12 +10,13 @@ order: 5
 
 
 
+
 import LocaleList from "@/components/number-localization/LocaleList";
 import '@/components/number-localization/number-localization.css';
 
 This is the full list of locales, as maintained by the *International Components for Unicode*.
 For each locale, the grouping pattern, grouping symbol, decimal symbol, and numeric system are shown.
-For descriptions of these properties, see the [Number Localization Introduction](/number-localization/).
+For descriptions of these properties, see the [Number Localization Introduction](intro).
 
 > Some of these properties are not consistent between javascript runtimes.
 For example, the numbering system and grouping pattern may differ between nodejs and chrome.

diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -3,7 +3,6 @@ import Header from '../components/layout/Header.astro';
 import Footer from '../components/layout/Footer.astro';
 import BaseHead from '../components/layout/BaseHead.astro';
 import ThemeChanger from "../components/layout/ThemeChanger";
-import '@fontsource/righteous';
 
 
 const {title, description, img, bodyClass} = Astro.props;
@@ -13,15 +12,13 @@ const {title, description, img, bodyClass} = Astro.props;
 <html lang="en">
 <head>
   <BaseHead title={title} description={description} img={img}/>
-  <!--<script src="https://cdn.jsdelivr.net/npm/fontable@latest/dist/auto.js"></script>-->
-
 </head>
 <body class="">
 <div class="flex flex-col min-h-screen">
   <Header/>
-  <div class="flex-1">
+  <main class="flex-1">
     <slot/>
-  </div>
+  </main>
   <Footer/>
 </div>
 <ThemeChanger client:load/>

diff --git a/src/layouts/BlogSidebar.astro b/src/layouts/BlogSidebar.astro
@@ -15,25 +15,25 @@ const fullTitle = group ? group + ' - ' + content.title : content.title;
 
 <HtmlLayout title={fullTitle} description={content.desc} img={content.img?.src}>
     <div class="rb-article">
-            <div class="rb-article__sidebar">
+            <aside class="rb-article__sidebar">
 
-            </div>
+            </aside>
 
-            <content>
+            <section>
 
                 <div class="card overflow-hidden">
 
                     <BlogHeader meta={content} group={group}/>
-                    <div class="article-body">
+                    <article class="article-body">
                     <slot name="content"/>
-                    </div>
+                    </article>
                 </div>
                 <slot name="after"/>
-            </content>
+            </section>
 
-            <div class="rb-article__sidebar">
+            <aside class="rb-article__sidebar">
                 <slot name="sidebar"/>
-            </div>
+            </aside>
     </div>
 </HtmlLayout>
 

diff --git a/src/pages/404.astro b/src/pages/404.astro
@@ -1,10 +1,5 @@
 ---
-import '@fontsource/righteous';
-import HomeFooter from "../components/home/HomeSocialLinks.astro";
 import BaseLayout from "../layouts/BaseLayout.astro";
-import RandomBits from "../components/home/RandomBits";
-import ArticleList from "../components/article/ArticleList.astro";
-import ToolList from "../components/ToolList.astro";
 ---
 
 <BaseLayout title="Page not found" description="">

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,6 +1,4 @@
 ---
-import '@fontsource/righteous';
-import HomeFooter from "../components/home/HomeSocialLinks.astro";
 import BaseLayout from "../layouts/BaseLayout.astro";
 import RandomBits from "../components/home/RandomBits";
 import ArticleList from "../components/article/ArticleList.astro";

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&display=swap');
 @import './variables.css';
 @import 'card.scss';
 

diff --git a/src/styles/variables.css b/src/styles/variables.css
@@ -24,12 +24,12 @@
   --border-color: #444;
   --border-color-light: var(--border-color);
   --font-1: 'Righteous', cursive;
-  --font-2: 'Alef', sans-serif;
-  --font-size-text: 18px;
+  --font-2: 'Plus Jakarta Sans', sans-serif;
+  --font-size-text: 16px;
   --font-size-1: 48px;
   --font-size-2: 32px;
   --letter-spacing-text: 0px;
-  --font-size-caption: 16px;
+  --font-size-caption: 15px;
   --shadow-color: var(--border-color);
 }
 

diff --git a/uno.config.ts b/uno.config.ts
@@ -20,7 +20,8 @@ export default defineConfig({
   },
   shortcuts: {
     card: 'rb-color-content relative border',
-    btn: 'text-center px-3 py-5 border tb-color-header cursor-pointer'
+    btn: 'text-center px-3 py-5 border tb-color-header cursor-pointer',
+    'header-link': 'px-3 sm:px-5 py-3 md:px-8 hover:underline hover:decoration-4 hover:underline-offset-4 cursor-pointer'
   },
   rules: [
     ['border', {border: 'var(--border-width) solid var(--border-color)', 'border-radius': 'var(--border-radius-1)'}],