updated logos, favicons, getting started guide

Author: gallayl

public/favicon.ico

@@ -1,15 +1,14 @@
 ---
-import { Image } from 'astro:assets';
 import { SITE_TITLE, SOCIAL } from '../consts';
-import logo from '../../public/images/furystack-logo-512.png';
+import FuryStackLogo from './icons/FuryStackLogo.astro';
 ---
 
 <footer class="site-footer">
   <div class="footer-inner">
     <div class="footer-top">
       <div class="footer-brand">
         <a href="/" class="footer-logo">
-          <Image src={logo} alt={SITE_TITLE} width={24} height={24} loading="eager" />
+          <FuryStackLogo size={24} />
           <span>FuryStack</span>
         </a>
         <p class="footer-tagline">A flexible end-to-end framework for building complex services</p>
@@ -18,7 +17,7 @@ import logo from '../../public/images/furystack-logo-512.png';
         <div class="footer-nav-group">
           <h4>Site</h4>
           <a href="/">Home</a>
-          <a href="/tags/getting-started/">Getting Started</a>
+          <a href="/getting-started/">Getting Started</a>
           <a href="/packages/">Packages</a>
           <a href="/about/">About</a>
         </div>
@@ -92,8 +91,10 @@ import logo from '../../public/images/furystack-logo-512.png';
     text-decoration: none;
     color: #fff;
   }
-  .footer-logo :global(img) {
-    border-radius: 4px;
+  .footer-logo :global(svg) {
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
   }
 
   .footer-tagline {

public/favicon.svg

@@ -1,9 +1,8 @@
 ---
-import { Image } from 'astro:assets';
-import { SOCIAL, SITE_TITLE } from '../consts';
+import { SOCIAL } from '../consts';
 import GitHubIcon from './icons/GitHubIcon.astro';
 import XIcon from './icons/XIcon.astro';
-import logo from '../../public/images/furystack-logo-512.png';
+import FuryStackLogo from './icons/FuryStackLogo.astro';
 
 interface Props {
   isHome?: boolean;
@@ -17,7 +16,7 @@ const { isHome = false } = Astro.props;
     {
       !isHome && (
         <a class="site-nav-logo" href="/">
-          <Image src={logo} alt={SITE_TITLE} width={24} height={24} loading="eager" />
+          <FuryStackLogo size={24} />
           <span>FuryStack</span>
         </a>
       )
@@ -29,7 +28,7 @@ const { isHome = false } = Astro.props;
     </button>
     <ul class="nav" role="menu">
       <li role="menuitem"><a href="/">Home</a></li>
-      <li role="menuitem"><a href="/tags/getting-started/">Getting Started</a></li>
+      <li role="menuitem"><a href="/getting-started/">Getting Started</a></li>
       <li role="menuitem"><a href="/packages/">Packages</a></li>
       <li role="menuitem"><a href="/about/">About</a></li>
     </ul>
@@ -111,10 +110,10 @@ const { isHome = false } = Astro.props;
     text-decoration: none;
     opacity: 0.9;
   }
-  .site-nav-logo :global(img) {
+  .site-nav-logo :global(svg) {
     width: 24px;
     height: 24px;
-    border-radius: 4px;
+    flex-shrink: 0;
   }
 
   .nav-toggle {

src/components/Footer.astro

@@ -4,7 +4,6 @@ export const SITE_URL = 'https://furystack.github.io';
 export const SITE_LANG = 'en';
 
 export const COVER_IMAGE = '/images/blog-cover.png';
-export const LOGO = '/images/furystack-logo-512.png';
 
 export const SOCIAL = {
   github: 'https://github.com/furystack/furystack',

src/components/SiteNav.astro

@@ -9,6 +9,8 @@ draft: false
 excerpt: So this framework really kicks ass? And how can I start using it?
 ---
 
+> **Note:** This post is outdated. For up-to-date instructions, see the [Getting Started with the Boilerplate](/getting-started/boilerplate/) guide.
+
 ## Why can it be good for you?
 
 If you want to try out the framework without digging deep all of its how-and-whys, you can simply clone the repo and start hacking in no time.

src/consts.ts

@@ -30,7 +30,8 @@ const canonicalUrl = new URL(Astro.url.pathname, Astro.site);
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="generator" content={Astro.generator} />
-    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <link rel="alternate icon" href="/favicon.ico" type="image/x-icon" />
     <link rel="canonical" href={canonicalUrl} />
     <link rel="sitemap" href="/sitemap-index.xml" />
     <link