Refactor font loading logic in BaseHead.astro and add font preload fo…

…r onest font
withstudiocms · Dec 22, 2024 · b6b4c02 · b6b4c02
1 parent a874387
commit b6b4c02
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 18 deletions.
diff --git a/packages/studiocms_auth/src/layouts/AuthLayout.astro b/packages/studiocms_auth/src/layouts/AuthLayout.astro
@@ -35,16 +35,23 @@ const fallbackImageSrc =
 <!doctype html>
 <html lang={lang} data-theme="dark">
   <head>
+	{/* Global Metadata */}
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <Generator />
+
+	{/* Favicon */}
 	<link rel="icon" href="/studiocms-resources/core/favicon.svg" type="image/svg+xml" />
 	<link rel="icon" href="/studiocms-resources/core/favicon-light.png" type="image/svg+xml" media="(prefers-color-scheme: dark)" />
 	<link rel="icon" href="/studiocms-resources/core/favicon-dark.png" type="image/png" media="(prefers-color-scheme: light)" />
-    <link rel="preload" as="font" type="font/woff2" crossorigin="anonymous" href={onestWoff2} />
-    <Generator />
+
+  	{/* Primary Meta Tags */}
     <title>{title}</title>
     <meta name="title" content={title} />
     <meta name="description" content={description} />
+
+    {/* Fonts */}
+    <link rel="preload" as="font" type="font/woff2" crossorigin="anonymous" href={onestWoff2} />
 </head>
   <body>
 	<Toaster />

diff --git a/packages/studiocms_dashboard/src/components/BaseHead.astro b/packages/studiocms_dashboard/src/components/BaseHead.astro
@@ -3,7 +3,7 @@ import '../styles/base.css';
 import '@fontsource-variable/onest/index.css';
 import { ClientRouter } from 'astro:transitions';
 import { Generator } from 'studiocms:components';
-import { isDashboardRoute } from '../utils';
+import onestWoff2 from '@fontsource-variable/onest/files/onest-latin-wght-normal.woff2?url';
 
 export interface Props {
 	title: string;
@@ -16,7 +16,11 @@ const { title, description } = Astro.props;
 <head>
 
   {/* HTMX - v2.0.2 */}
-  <!-- <script is:inline src="https://unpkg.com/[email protected]" integrity="sha384-Y7hw+L/jvKeWIRRkqWYfPcvVxHzVzn5REgzbawhxAuQGwX1XWe70vji+VSeHOThJ" crossorigin="anonymous" /> -->
+  {/* 
+  
+  <script is:inline src="https://unpkg.com/[email protected]" integrity="sha384-Y7hw+L/jvKeWIRRkqWYfPcvVxHzVzn5REgzbawhxAuQGwX1XWe70vji+VSeHOThJ" crossorigin="anonymous" /> 
+  
+  */}
 
   {/* Global Metadata */}
   <meta charset="utf-8" />
@@ -33,20 +37,10 @@ const { title, description } = Astro.props;
   <meta name="title" content={title} />
   <meta name="description" content={description} />
 
-  {/* Open Graph / Facebook / Twitter */}
-  { !isDashboardRoute(Astro.url.pathname) && (
-    <meta property="og:type" content='website' />
-    <meta property="og:url" content={Astro.url} />
-    <meta property="og:title" content={title} />
-    <meta property="og:description" content={description} />
-
-    <meta property="twitter:card" content="summary_large_image" />
-    <meta property="twitter:url" content={Astro.url} />
-    <meta property="twitter:title" content={title} />
-    <meta property="twitter:description" content={description} />
-  )}
-
   {/* Astro Client Router (ViewTransitions) */}
   <ClientRouter />
 
+  {/* Fonts */}
+  <link rel="preload" as="font" type="font/woff2" crossorigin="anonymous" href={onestWoff2} />
+
 </head>
diff --git a/packages/studiocms_dashboard/src/components/Layout.astro b/packages/studiocms_dashboard/src/components/Layout.astro
@@ -1,6 +1,6 @@
 ---
 import { studioCMS_SDK_Cache } from 'studiocms:sdk/cache';
-import { Button } from '@studiocms/ui/components';
+import { Button, Toaster } from '@studiocms/ui/components';
 import Icon from '@studiocms/ui/utils/Icon.astro';
 import { BaseHead } from '../components';
 import { makePageTitle } from '../utils';
@@ -34,6 +34,7 @@ const description = propDescription ?? dbConfig.description;
 <html {lang}>
   <BaseHead {title} {description} />
   <body>
+    <Toaster />
     { requiredPermission !== 'none' && <LoginChecker server:defer {requiredPermission} /> }
     { sidebar === 'single' && <SingleSidebar transition:persist transition:persist-props /> }
     { sidebar === 'double' && <DoubleSidebar transition:persist transition:persist-props /> }