mirror of
https://github.com/prdlk/website.git
synced 2026-08-02 09:21:41 +00:00
refactor(ui): migrate social links to site config and footer component
This commit is contained in:
Prad Nukala
@@ -1,42 +0,0 @@
|
||||
---
|
||||
import { Icon } from "astro-icon/components";
|
||||
|
||||
/**
|
||||
Uses https://www.astroicon.dev/getting-started/
|
||||
Find icons via guide: https://www.astroicon.dev/guides/customization/#open-source-icon-sets
|
||||
Only installed pack is: @iconify-json/mdi
|
||||
*/
|
||||
const socialLinks: {
|
||||
friendlyName: string;
|
||||
isWebmention?: boolean;
|
||||
link: string;
|
||||
name: string;
|
||||
}[] = [
|
||||
{
|
||||
friendlyName: "Github",
|
||||
link: "https://github.com/chrismwilliams/astro-cactus",
|
||||
name: "mdi:github",
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
<div class="flex flex-wrap items-end gap-x-2">
|
||||
<p>Find me on</p>
|
||||
<ul class="flex flex-1 items-center gap-x-2 sm:flex-initial">
|
||||
{
|
||||
socialLinks.map(({ friendlyName, isWebmention, link, name }) => (
|
||||
<li class="flex">
|
||||
<a
|
||||
class="hover:text-link inline-block"
|
||||
href={link}
|
||||
rel={`noreferrer ${isWebmention ? "me authn" : ""}`}
|
||||
target="_blank"
|
||||
>
|
||||
<Icon aria-hidden="true" class="h-8 w-8" focusable="false" name={name} />
|
||||
<span class="sr-only">{friendlyName}</span>
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
@@ -1,24 +1,44 @@
|
||||
---
|
||||
import { menuLinks, siteConfig } from "@/site.config";
|
||||
import { Icon } from "astro-icon/components";
|
||||
import { menuLinks, siteConfig, socialLinks } from "@/site.config";
|
||||
|
||||
const year = new Date().getFullYear();
|
||||
---
|
||||
|
||||
<footer
|
||||
class="text-muted mt-auto flex w-full flex-col items-center justify-center gap-y-2 pt-20 pb-4 text-center align-top font-semibold sm:flex-row sm:justify-between sm:text-xs"
|
||||
class="text-muted border-global-text/15 mt-auto flex w-full flex-col items-center gap-y-6 border-t pt-8 pb-6 text-center text-sm font-semibold"
|
||||
>
|
||||
<div class="me-0 sm:me-4">
|
||||
© {siteConfig.author}
|
||||
{year}.<span class="inline-block"> 🚀 {siteConfig.title} 🌵 </span>
|
||||
</div>
|
||||
<nav aria-labelledby="footer_links" class="sm:divide-muted flex gap-x-2 sm:gap-x-0 sm:divide-x">
|
||||
{/* Row 1: site nav */}
|
||||
<nav aria-labelledby="footer_links" class="flex flex-wrap justify-center gap-x-1 gap-y-1">
|
||||
<p id="footer_links" class="sr-only">More on this site</p>
|
||||
{
|
||||
menuLinks.map((link) => (
|
||||
<a class="hover:text-global-text px-4 py-2 hover:underline sm:py-0" href={link.path}>
|
||||
<a class="hover:text-global-text px-3 py-1 hover:underline" href={link.path}>
|
||||
{link.title}
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</nav>
|
||||
|
||||
{/* Row 2: social icons */}
|
||||
<ul class="flex items-center justify-center gap-x-4">
|
||||
{
|
||||
socialLinks.map(({ friendlyName, isWebmention, link, name }) => (
|
||||
<li class="flex">
|
||||
<a
|
||||
class="hover:text-link inline-block"
|
||||
href={link}
|
||||
rel={`noreferrer ${isWebmention ? "me authn" : ""}`}
|
||||
target={link.startsWith("mailto:") ? undefined : "_blank"}
|
||||
>
|
||||
<Icon aria-hidden="true" class="h-6 w-6" focusable="false" name={name} />
|
||||
<span class="sr-only">{friendlyName}</span>
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
|
||||
{/* Row 3: copyright */}
|
||||
<p class="text-xs font-normal">© {year} {siteConfig.author}</p>
|
||||
</footer>
|
||||
|
||||
@@ -5,33 +5,20 @@ import { menuLinks } from "@/site.config";
|
||||
import { siteConfig } from "../../site.config";
|
||||
---
|
||||
|
||||
<header class="group relative mb-28 flex items-center sm:ps-18" id="main-header">
|
||||
<header class="group relative mb-28 flex items-center sm:ps-28" id="main-header">
|
||||
<div class="flex sm:flex-col">
|
||||
<a
|
||||
aria-current={Astro.url.pathname === "/" ? "page" : false}
|
||||
class="inline-flex items-center sm:relative sm:inline-block sm:grayscale sm:hover:filter-none"
|
||||
class="inline-flex items-center sm:inline-block"
|
||||
href="/"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="me-3 h-10 w-6 sm:absolute sm:-start-18 sm:me-0 sm:h-20 sm:w-12"
|
||||
fill="none"
|
||||
focusable="false"
|
||||
viewBox="0 0 272 480"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Astro Cactus Logo</title>
|
||||
<path
|
||||
fill="#cdffb8"
|
||||
d="M181.334 93.333v-40L226.667 80v40zM136.001 53.333 90.667 26.667v426.666L136.001 480zM45.333 220 0 193.334v140L45.333 360z"
|
||||
></path><path
|
||||
fill="#d482ab"
|
||||
d="M90.667 26.667 136.001 0l45.333 26.667-45.333 26.666zM181.334 53.33l45.333-26.72L272 53.33 226.667 80zM136 240l-45.333-26.67v53.34zM0 193.33l45.333-26.72 45.334 26.72L45.333 220zM181.334 93.277 226.667 120l-45.333 26.67z"
|
||||
></path><path
|
||||
fill="#2abc89"
|
||||
d="m136 53.333 45.333-26.666v120L226.667 120V80L272 53.333V160l-90.667 53.333v240L136 480V306.667L45.334 360V220l45.333-26.667v73.334L136 240z"
|
||||
></path>
|
||||
</svg>
|
||||
<img
|
||||
alt={`${siteConfig.title} logo`}
|
||||
class="me-3 size-14 rounded-full sm:absolute sm:-start-[48px] sm:top-1/2 sm:me-0 sm:size-36 sm:-translate-y-1/2 sm:grayscale sm:hover:filter-none"
|
||||
height="144"
|
||||
width="144"
|
||||
src="/avatar.png"
|
||||
/>
|
||||
<span class="text-xl font-bold sm:text-2xl">{siteConfig.title}</span>
|
||||
</a>
|
||||
<nav
|
||||
|
||||
@@ -26,7 +26,7 @@ const {
|
||||
>
|
||||
<SkipLink />
|
||||
<Header />
|
||||
<main id="main">
|
||||
<main class="mb-20" id="main">
|
||||
<slot />
|
||||
</main>
|
||||
<Footer />
|
||||
|
||||
Reference in New Issue
Block a user