Fix favicon

josephdburdick · Jun 16, 2024 · 64998ac · 64998ac
1 parent 60a3fd9
commit 64998ac
Show file tree

Hide file tree

Showing 9 changed files with 30 additions and 133 deletions.
diff --git a/src/api/favicon.md b/src/api/favicon.md
diff --git a/src/app/_content/Experience.tsx b/src/app/_content/Experience.tsx
@@ -17,6 +17,10 @@ import { cn } from "@/lib/utils"
 export default function Experience() {
   const { data } = useApi()
   const experience: ExperienceType[] = data.experience.attributes.experience
+
+  const handleAccordionChange = (value: string) => {
+    console.log(value)
+  }
   const renderSkill = (skill: string, key: number) =>
     !!skill ? (
       <li key={key}>
@@ -30,10 +34,13 @@ export default function Experience() {
   ) => {
     const key = `${role.company.toLowerCase()}-${index}`
     return (
-      <li className="grid-auto-rows grid gap-4" key={key}>
+      <li className="grid-auto-rows grid gap-4" id={key} key={key}>
         <AccordionItem value={key}>
           <AccordionTrigger>
-            <div className="grid grid-cols-12 items-center md:flex-1">
+            <a
+              href={`#experience-${role.company}`}
+              className="grid grid-cols-12 items-center md:flex-1"
+            >
               <div className="col-span-12 gap-1 text-xs text-muted-foreground md:col-span-3 md:col-start-1 xl:col-span-2 xl:text-sm">
                 <DateSpan date={role.date} />
               </div>
@@ -52,7 +59,7 @@ export default function Experience() {
                   </div>
                 </div>
               </div>
-            </div>
+            </a>
           </AccordionTrigger>
           <AccordionContent>
             <div className="grid grid-cols-12">
@@ -75,13 +82,18 @@ export default function Experience() {
   }
 
   const renderExperience = (experience: ExperienceType, key: number) => (
-    <li key={`experience-${key}`} className="grid gap-2">
+    <li
+      key={`experience-${experience.company}`}
+      id={`experience-${experience.company}`}
+      className="grid gap-2"
+    >
       <div className="grid grid-cols-12">
         <div className="col-span-12 font-semibold md:col-span-8 md:col-start-4">
           <RuleHeader>{experience.company}</RuleHeader>
         </div>
       </div>
       <Accordion
+        onValueChange={handleAccordionChange}
         type="single"
         collapsible
         key={`role-${key}`}
@@ -105,7 +117,7 @@ export default function Experience() {
 
   const renderExperiences = (
     <div className="container">
-      <ul className="grid-auto-rows grid gap-14">
+      <ul className="grid-auto-rows grid gap-16">
         {experience
           .filter((item) => item?.disabled !== true)
           .map(renderExperience)}

diff --git a/src/app/apple-icon.png b/src/app/apple-icon.png
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
diff --git a/src/app/icon.png b/src/app/icon.png
diff --git a/public/assets/images/logo--slash.svg → src/app/icon.svg b/public/assets/images/logo--slash.svg → src/app/icon.svg
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,7 +1,5 @@
-import { FavIcon } from "@/lib/types"
 import type { Metadata } from "next"
 import { Inter } from "next/font/google"
-import NextHead from "next/head"
 
 import api from "../api"
 import "./globals.css"
@@ -38,30 +36,13 @@ export async function generateMetadata(): Promise<Metadata> {
   }
 }
 
-async function Head() {
-  const { favicon: faviconProp } = await api()
-  const { meta } = faviconProp.attributes
-
-  return (
-    <NextHead>
-      <meta
-        name="msapplication-TileColor"
-        content={meta.msapplicationTileColor}
-      />
-      <meta name="msapplication-config" content={meta.msapplicationConfig} />
-      <meta name="theme-color" content={meta.themeColor} />
-    </NextHead>
-  )
-}
-
 export default async function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <Head />
+    <html lang="en" className="scroll-smooth">
       <body className={inter.className}>{children}</body>
     </html>
   )

diff --git a/src/components/global/Logo.tsx b/src/components/global/Logo.tsx
diff --git a/src/components/global/MainHeader.tsx b/src/components/global/MainHeader.tsx
@@ -8,11 +8,12 @@ import { forwardRef } from "react"
 
 type Props = PropsWithChildren & {
   className?: string;
+  logoSlot?: ReactNode;
 };
 
 export const MainHeader = forwardRef(
   (props: Props, ref: ForwardedRef<HTMLElement>): ReactNode => {
-    const { className } = props
+    const { logoSlot = null, className } = props
     const { data } = useApi()
     const { name } = data.profile
     const { logo } = data.site.attributes
@@ -26,12 +27,14 @@ export const MainHeader = forwardRef(
         ref={ref}
       >
         <h1 className="dark:invert">
-          <Image
-            src={logo.url}
-            width={logo.width}
-            height={logo.height}
-            alt={logo.alt}
-          />
+          {logoSlot || (
+            <Image
+              src={logo.url}
+              width={logo.width}
+              height={logo.height}
+              alt={logo.alt}
+            />
+          )}
           <span className="sr-only">{name}</span>
         </h1>
         <div className="flex items-center gap-2">