feat: add new logo as favicon, landing, header, about

src/components/LandingHero.astro

@@ -1,15 +1,29 @@
 ---
+import logo from '@/assets/logo.svg'
+import { Image } from 'astro:assets'
+
 export interface Props {
-  heroVariant?: 'gradient' | 'background' | 'gradient background'
+  frontmatter: Partial<{
+    gradient: boolean
+    background: boolean
+    logo: boolean
+  }>
 }
 
-const { heroVariant = '' } = Astro.props
+const { gradient, background, logo: showLogo } = Astro.props.frontmatter
+
+const heroVariant = `${gradient ? 'gradient' : ''} ${background ? 'background' : ''}`
 ---
 
 <div class="w-fit">
   <h1 id="hero" class=`mb-2 relative w-fit text-8xl font-bold ${heroVariant}`>
-    <slot />
-    <span id="hero-bg"></span>
+    <div class="flex items-center gap-8">
+      {showLogo && <Image alt="Nordlys logo" src={logo} height={96} />}
+      <div>
+        <slot />
+      </div>
+    </div>
+    <span id="hero-bg" class={showLogo ? 'ml-20' : ''}></span>
   </h1>
 </div>
 

src/components/layout/Header.astro

@@ -1,6 +1,8 @@
 ---
+import logo from '@/assets/logo.svg'
 import ThemeToggle from '@/components/ThemeToggle.astro'
 import config from '@/theme.config'
+import { Image } from 'astro:assets'
 import Separator from './Separator.astro'
 
 export interface Props {
@@ -12,7 +14,8 @@ const { activeHeaderLink } = Astro.props
 
 <header class="mx-auto w-full max-w-3xl">
   <div class="flex justify-between py-8">
-    <a href="/" class="text-2xl font-semibold text-theme-accent">
+    <a href="/" class="flex gap-2 text-2xl font-semibold text-theme-accent">
+      <Image alt="Nordlys logo" src={logo} height={24} />
       {config.title}
     </a>
     <nav class="flex flex-col justify-end">

src/layouts/LandingLayout.astro

@@ -6,9 +6,7 @@ import ThemeToggle from '@/components/ThemeToggle.astro'
 import BaseLayout, { type Props as BaseLayoutProps } from '@/layouts/Base.astro'
 import config from '@/theme.config'
 
-export type Props = BaseLayoutProps & {
-  frontmatter: LandingHeroProps
-}
+export type Props = BaseLayoutProps & LandingHeroProps
 
 const { frontmatter } = Astro.props
 ---
@@ -19,9 +17,7 @@ const { frontmatter } = Astro.props
       <section>
         {
           frontmatter.title && (
-            <LandingHero heroVariant={frontmatter.heroVariant}>
-              {frontmatter.title}
-            </LandingHero>
+            <LandingHero {frontmatter}>{frontmatter.title}</LandingHero>
           )
         }
         <div id="highlight-links" class="text-4xl font-semibold leading-[46px]">

src/pages/404.md

@@ -2,6 +2,7 @@
 layout: '@/layouts/LandingLayout.astro'
 title: 404
 description: Page not found
+background: true
 ---
 
 [Not all those who wander are lost.](https://en.wikipedia.org/wiki/All_that_glitters_is_not_gold#Tolkien)\

src/pages/about.md → src/pages/about.mdx

@@ -6,7 +6,14 @@ activeHeaderLink: About
 
 # About
 
-Nordlys is a sleek, minimal Astro blog template, ideal for a personal blog and showcasing a projects portfolio. It is fully customizable with baked-in theming and ready-to-use components. Developed by [FjellOverflow](https://github.com/FjellOverflow) using [Astro](https://astro.build/) and [Tailwindcss](https://tailwindcss.com/). The name _Nordlys_ comes from Norwegian and means [_Northern Lights_ or _Aurora_](https://en.wikipedia.org/wiki/Aurora).
+Nordlys is a sleek, minimal Astro blog template, ideal for a personal blog and showcasing a projects portfolio. It is fully customizable with baked-in theming and ready-to-use components. Developed by [FjellOverflow](https://github.com/FjellOverflow) using [Astro](https://astro.build/) and [Tailwindcss](https://tailwindcss.com/). The name _Nordlys_ comes from Norwegian and means [_Northern Lights_ or _Aurora_](https://en.wikipedia.org/wiki/Aurora), which is also reflected in the logo!
+
+import logo from '@/assets/logo.svg'
+import { Image } from 'astro:assets'
+
+<div class="w-full flex justify-center">
+    <Image alt="Nordlys logo" src={logo} height={200} />
+</div>
 
 ## Built-in Pages
 

src/pages/index.md

@@ -1,7 +1,8 @@
 ---
 layout: '@/layouts/LandingLayout.astro'
 title: Nordlys
-heroVariant: 'background'
+background: true
+logo: true
 ---
 
 A sleek, minimal Astro blog template.\