Update headers and manifests

Signed-off-by: baalajimaestro <me@baalajimaestro.me>

public/favicon.svg

@@ -1,29 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
-  <g>
-    <path
-          d="M47.7 107.1c-5.5-5-7.2-15.7-4.9-23.4 4 4.9 9.6 6.4 15.4 7.3 8.9 1.3 17.6.8 25.9-3.2l2.8-1.7a18 18 0 0 1-7.2 20l-5.5 3.8c-5.6 3.8-7.2 8.2-5 14.7l.2.7a14 14 0 0 1-6.6-5.6 15.8 15.8 0 0 1-2.6-8.6c0-1.5 0-3-.2-4.5-.5-3.7-2.2-5.3-5.5-5.4-3.3-.1-5.9 2-6.6 5.2l-.2.7Z" />
-    <path
-          d="M16 82.4s16.5-8 33-8l12.4-38.3c.5-2 1.8-3.2 3.3-3.2 1.6 0 3 1.3 3.4 3.2l12.4 38.3c19.6 0 33 8 33 8l-28-76c-.8-2.3-2.2-3.7-4-3.7H48c-1.8 0-3.1 1.4-4 3.7l-28 76Z" />
-  </g>
-  <path fill="url(#a)"
-        d="M47.7 107.1c-5.5-5-7.2-15.7-4.9-23.4 4 4.9 9.6 6.4 15.4 7.3 8.9 1.3 17.6.8 25.9-3.2l2.8-1.7a18 18 0 0 1-7.2 20l-5.5 3.8c-5.6 3.8-7.2 8.2-5 14.7l.2.7a14 14 0 0 1-6.6-5.6 15.8 15.8 0 0 1-2.6-8.6c0-1.5 0-3-.2-4.5-.5-3.7-2.2-5.3-5.5-5.4-3.3-.1-5.9 2-6.6 5.2l-.2.7Z" />
-
-  <defs>
-    <linearGradient id="a" x1="64.7" x2="77.4" y1="119.2" y2="77.4" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#D83333" />
-      <stop offset="1" stop-color="#F041FF" />
-    </linearGradient>
-  </defs>
-
-  <style>
-    g {
-      fill: #000;
-    }
-
-    @media (prefers-color-scheme: dark) {
-      g {
-        fill: #FFF;
-      }
-    }
-  </style>
-</svg>

src/components/BaseHead.astro

@@ -1,8 +1,10 @@
 ---
 import siteConfig from '@/site-config'
+import { getImage } from 'astro:assets'
 import '@/styles/global.css'
 import '@/styles/prose.css'
 import '@/styles/dot.css'
+import faviconSrc from '../images/favicon.png'
 
 interface Props {
   title?: string
@@ -26,6 +28,14 @@ const resolvedImage = image?.src
     }
   : undefined
 
+const appleTouchIcon = await getImage({
+  src: faviconSrc,
+  width: 180,
+  height: 180,
+  format: 'png'
+})
+const faviconx = await getImage({ src: faviconSrc, format: 'png' })
+
 const canonicalURL = new URL(Astro.request.url, Astro.site)
 
 function formatCanonicalURL(url: string | URL) {
@@ -41,9 +51,14 @@ function formatCanonicalURL(url: string | URL) {
 <meta name="viewport" content="width=device-width,initial-scale=1" />
 <title>{title}</title>
 <meta name="generator" content={Astro.generator} />
+<meta name="darkreader-lock">
 
 <!-- Low Priority Global Metadata -->
-<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+<link rel="icon" href="/favicon.ico" sizes="32x32" />
+<link rel="icon" href={faviconx.src} type="image/png" />
+<link rel="apple-touch-icon" href={appleTouchIcon.src} />
+<link rel="manifest" href="/manifest.json" />
+
 <link rel="sitemap" href="/sitemap-index.xml" />
 <link rel="alternate" type="application/rss+xml" href="/rss.xml" title="RSS" />
 

src/components/Header.vue

@@ -4,6 +4,8 @@ import { computed, onMounted, ref, unref } from 'vue'
 import ThemeToggle from './ThemeToggle.vue'
 import siteConfig from '@/site-config'
 import { getLinkTarget } from '@/utils/link'
+import { getImage } from 'astro:assets'
+import faviconSrc from '../images/favicon.png'
 
 const navLinks = siteConfig.header.navLinks || []
 
@@ -26,6 +28,8 @@ const { y: scroll } = useWindowScroll()
 
 const oldScroll = ref(unref(scroll))
 
+const faviconx = await getImage({ src: faviconSrc, format: 'png' })
+
 onMounted(() => {
   const navMask = document.querySelector('.nav-drawer-mask') as HTMLElement
 
@@ -81,7 +85,7 @@ function toggleNavDrawer() {
   >
     <div class="flex items-center h-full">
       <a href="/" mr-6 aria-label="Header Logo Image">
-        <img width="32" height="32" :src="siteConfig.header.logo.src" :alt="siteConfig.header.logo.alt">
+        <img width="32" height="32" :src="faviconx.src" :alt="siteConfig.header.logo.alt">
       </a>
       <nav class="sm:flex hidden flex-wrap gap-x-6 position-initial flex-row">
         <a
@@ -96,11 +100,6 @@ function toggleNavDrawer() {
       </div>
     </div>
     <div class="flex gap-x-6">
-      <a
-        v-for="link in socialLinks" :key="link.text" :aria-label="`${link.text}`" :class="link.icon" nav-link
-        :target="getLinkTarget(link.href)" :href="link.href"
-      />
-
       <a nav-link target="_blank" href="/rss.xml" i-ri-rss-line aria-label="RSS" />
       <ThemeToggle />
     </div>

src/components/ListPosts.vue

@@ -61,7 +61,6 @@ function getYear(date: Date | string | number) {
             <span v-if="post.tags && post.tags.length">· {{ post.tags[0].name }}</span>
           </div>
         </div>
-        <div opacity-50 text-sm>{{ post.excerpt }}</div>
       </a>
     </li>
   </ul>

src/layouts/BaseLayout.astro

@@ -12,7 +12,6 @@ const { ...head } = Astro.props
 <!doctype html>
 <html lang="en">
   <head>
-    <meta name="darkreader-lock">
     <BaseHead {...head} />
     <ViewTransitions />
   </head>

src/pages/manifest.json.astro

@@ -0,0 +1,45 @@
+---
+import type { APIRoute } from 'astro'
+import { getImage } from 'astro:assets'
+import favicon from '../images/favicon.png'
+import siteConfig from '@/site-config'
+
+const faviconPngSizes = [192, 512]
+
+export const GET: APIRoute = async () => {
+  const icons = await Promise.all(
+    faviconPngSizes.map(async (size) => {
+      const image = await getImage({
+        src: favicon,
+        width: size,
+        height: size,
+        format: 'png'
+      })
+      return {
+        src: image.src,
+        type: `image/${image.options.format}`,
+        sizes: `${image.options.width}x${image.options.height}`
+      }
+    })
+  )
+
+  const manifest = {
+    name: siteConfig.title,
+    short_name: siteConfig.title.split(' ')[0],
+    description: siteConfig.description,
+    start_url: '/',
+    display: 'standalone',
+    background_color: '#ffffff',
+    theme_color: '#000000',
+    id: "https://baalajimaestro.ptr.moe/",
+    icons
+  }
+
+  return new Response(JSON.stringify(manifest), {
+    status: 200,
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+}
+---

src/pages/projects/data.ts

@@ -1,88 +0,0 @@
-import type { ProjectData } from '@/types'
-
-export const projectData: ProjectData = [
-  {
-    title: 'Projects Group',
-    projects: [
-      {
-        text: 'Project Name',
-        description: 'Your project description information is a long piece of text.',
-        icon: 'i-carbon-campsite',
-        href: '/',
-      },
-      {
-        text: 'Project Name',
-        description: 'Your project description information is a long piece of text.',
-        icon: 'i-carbon-campsite',
-        href: '/',
-      },
-    ],
-  },
-  {
-    title: 'Projects Group',
-    projects: [
-      {
-        text: 'Project Name',
-        description: 'Your project description information is a long piece of text.',
-        icon: 'i-carbon-campsite',
-        href: '/',
-      },
-      {
-        text: 'Project Name',
-        description: 'Your project description information is a long piece of text.',
-        icon: 'i-carbon-campsite',
-        href: '/',
-      },
-      {
-        text: 'Project Name',
-        description: 'Your project description information is a long piece of text.',
-        icon: 'i-carbon-campsite',
-        href: '/',
-      },
-    ],
-  },
-  {
-    title: 'Project Name',
-    projects: [],
-  },
-  {
-    title: 'Projects Group',
-    projects: [
-      {
-        text: 'Project Name',
-        description: 'Your project description information is a long piece of text.',
-        icon: 'i-carbon-campsite',
-        href: '/',
-      },
-      {
-        text: 'Project Name',
-        description: 'Your project description information is a long piece of text.',
-        icon: 'i-carbon-campsite',
-        href: '/',
-      },
-      {
-        text: 'Project Name',
-        description: 'Your project description information is a long piece of text.',
-        icon: 'i-carbon-campsite',
-        href: '/',
-      },
-      {
-        text: 'Project Name',
-        description: 'Your project description information is a long piece of text.',
-        icon: 'i-carbon-campsite',
-        href: '/',
-      },
-    ],
-  },
-  {
-    title: 'Projects Group',
-    projects: [
-      {
-        text: 'Project Name',
-        description: 'Your project description information is a long piece of text.',
-        icon: 'i-carbon-campsite',
-        href: '/',
-      },
-    ],
-  },
-]

src/pages/projects/index.astro

@@ -1,27 +0,0 @@
----
-import { projectData } from './data'
-import BaseLayout from '@/layouts/BaseLayout.astro'
-import ListProjects from '@/components/ListProjects.vue'
----
-
-<BaseLayout title="Projects" description="List of projects that I am proud of">
-  <h1 class="mb-10 text-title">Projects</h1>
-  <div mb-16 sm:mb-24>
-    {
-      projectData.length > 0 && (
-        <div>
-          {projectData.map((i) => (
-            <div mb-10>
-              <h2 class="select-none relative h20 pointer-events-none">
-                <span class="text-3.2em color-transparent font-bold text-stroke-1.5 text-stroke-hex-aaa op35 dark:op20 absolute top-0">
-                  {i.title}
-                </span>
-              </h2>
-              <ListProjects list={i.projects} />
-            </div>
-          ))}
-        </div>
-      )
-    }
-  </div>
-</BaseLayout>

src/site-config.ts

@@ -1,56 +1,19 @@
 export const siteConfig = {
   author: 'baalajimaestro',
   title: 'baalajimaestro',
-  subtitle: 'Personal Website & Blog for baalajimaestro',
+  subtitle: 'DevOps Engineer and Networking Enthusiast.',
-  description: 'DevOps Engineer and Networking Enthusiast.',
+  description: 'Personal Website & Blog for baalajimaestro',
-  image: {
-    src: '/hero.jpg',
-    alt: 'Website Main Image',
-  },
   email: 'baalajimaestro@ptr.moe',
-  socialLinks: [
-    {
-      text: 'GitHub',
-      href: '',
-      icon: 'i-simple-icons-github',
-      header: 'i-ri-github-line',
-    },
-    {
-      text: 'Twitter',
-      href: '',
-      icon: 'i-simple-icons-x',
-      header: 'i-ri-twitter-x-line',
-    },
-    {
-      text: 'Linkedin',
-      href: '',
-      icon: 'i-simple-icons-linkedin',
-    },
-    {
-      text: 'Instagram',
-      href: '',
-      icon: 'i-simple-icons-instagram',
-    },
-    {
-      text: 'Youtube',
-      href: '',
-      icon: 'i-simple-icons-youtube',
-    },
-  ],
   header: {
     logo: {
-      src: '/favicon.svg',
+      src: '/images/favicon.png',
       alt: 'Logo Image',
     },
     navLinks: [
       {
         text: 'Blog',
         href: '/blog',
-      },
+      }
-      {
-        text: 'Projects',
-        href: '/projects',
-      },
     ],
   },
   page: {