dealjus/justin.deal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Abstract Socials into list to make it easy to add more
All checks were successful
Build and Deploy / build (push) Successful in 39s
Details

Browse Source
This commit is contained in:
Justin Deal 2025-05-03 16:07:12 -07:00
parent dd53f2888e
commit 0e5c402bc1
6 changed files with 114 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/Footer.astro
View File

@ -1,10 +1,14 @@
---
import { GLOBAL } from "../lib/variables";
import { socials } from "../lib/socials";
import Anchor from "./common/Anchor.astro";
import Section from "./common/Section.astro";
import SocialIcon from "./common/SocialIcon.astro";
const date = new Date();
const year = date.getFullYear();
const footerSocials = socials.filter(social => social.showInFooter);
---
<footer class="mt-16 mb-8">
@ -12,52 +16,14 @@ const year = date.getFullYear();
<div class="flex flex-col gap-6">
<!-- Social icons row - now above the links -->
<div class="flex justify-center gap-4">
{GLOBAL.githubProfile && (
<Anchor url={GLOBAL.githubProfile} aria-label="GitHub Profile">
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 24 24"
>
<path
class="zag-fill zag-transition"
d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"
></path>
</svg>
</Anchor>
)}
{GLOBAL.giteaProfile && (
<Anchor url={GLOBAL.giteaProfile} aria-label="Gitea Profile">
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 24 24"
>
<path
class="zag-fill zag-transition"
d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"
></path>
</svg>
</Anchor>
)}
{GLOBAL.linkedinProfile && (
<Anchor url={GLOBAL.linkedinProfile} aria-label="LinkedIn Profile">
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 24 24"
>
<path
class="zag-fill zag-transition"
fill="currentColor"
d="M19 0h-14c-2.76 0-5 2.24-5 5v14c0 2.76 2.24 5 5 5h14c2.76 0 5-2.24 5-5v-14c0-2.76-2.24-5-5-5zm-11.12 19h-3.08v-9h3.08v9zm-1.54-10.29c-.99 0-1.79-.8-1.79-1.79s.8-1.79 1.79-1.79 1.79.8 1.79 1.79-.8 1.79-1.79 1.79zm13.16 10.29h-3.08v-4.89c0-1.16-.02-2.64-1.61-2.64s-1.86 1.26-1.86 2.57v4.96h-3.08v-9h2.96v1.23h.04c.41-.78 1.4-1.6 2.88-1.6 3.08 0 3.65 2.03 3.65 4.66v4.71z"
></path>
</svg>
</Anchor>
)}
{footerSocials.map((social) => (
<SocialIcon
name={social.name}
url={social.url}
icon={social.icon}
alt={social.alt}
/>
))}
</div>
<!-- Navigation links row - now below the icons -->

27
src/components/common/SocialIcon.astro Normal file
View File

@ -0,0 +1,27 @@
---
import Anchor from "./Anchor.astro";
export interface Props {
name: string;
url: string;
icon: string;
alt: string;
size?: "sm" | "md" | "lg";
}
const { name, url, icon, alt, size = "md" } = Astro.props;
const sizeClasses = {
sm: "w-6 h-6",
md: "w-8 h-8",
lg: "w-10 h-10"
};
---
<Anchor url={url} aria-label={alt}>
<img
src={icon}
alt={alt}
class={`${sizeClasses[size]} zag-transition`}
/>
</Anchor>

31
src/lib/socials.ts Normal file
View File

@ -0,0 +1,31 @@
import { type SocialMedia } from "./types";
/**
* Social media profiles
*/
export const socials: SocialMedia[] = [
{
name: "GitHub",
url: "https://github.com/justindeal",
icon: "https://cdn.jsdelivr.net/gh/selfhst/icons/svg/github-dark.svg",
alt: "GitHub Profile",
showInFooter: true,
showInAbout: true
},
{
name: "Gitea",
url: "https://code.justin.deal/dealjus",
icon: "https://cdn.jsdelivr.net/gh/selfhst/icons/svg/gitea-dark.svg",
alt: "Gitea Profile",
showInFooter: true,
showInAbout: true
},
{
name: "LinkedIn",
url: "https://www.linkedin.com/in/justin-deal/",
icon: "https://cdn.jsdelivr.net/gh/selfhst/icons/svg/linkedin-dark.svg",
alt: "LinkedIn Profile",
showInFooter: true,
showInAbout: true
}
];

35
src/lib/types.ts
View File

@ -124,3 +124,38 @@ export type Service = {
export type ServiceCategory = {
[category: string]: Service[];
};
/**
* Represents a social media profile
*/
export type SocialMedia = {
/**
* The name of the social media platform
*/
name: string;
/**
* The URL to your profile
*/
url: string;
/**
* The URL to the icon from selfh.st/icons
*/
icon: string;
/**
* Alternative text for the icon
*/
alt: string;
/**
* Whether to show this social media profile in the footer
*/
showInFooter?: boolean;
/**
* Whether to show this social media profile on the about page
*/
showInAbout?: boolean;
};

8
src/lib/variables.ts
View File

@ -6,9 +6,6 @@
* @property {string} rootUrl - The root URL of the site
* @property {string} shortDescription - A short description of the site
* @property {string} longDescription - A longer description of the site
* @property {string} githubProfile - The GitHub profile URL
* @property {string} giteaProfile - The Gitea profile URL
* @property {string} linkedinProfile - The LinkedIn profile URL
* @property {string} articlesName - The name used for articles
* @property {string} projectsName - The name used for projects
* @property {string} viewAll - The text used for "View All" links
@ -30,11 +27,6 @@ export const GLOBAL = {
shortDescription: "My personal slice of the internet",
longDescription: "My personal blog, portfolio, and homelab dashboard built with Astro, TypeScript, TailwindCSS, and Alpine.js.",
// Social media links
githubProfile: "https://github.com/justindeal",
giteaProfile: "https://code.justin.deal/dealjus",
linkedinProfile: "https://www.linkedin.com/in/justin-deal/",
// Common text names used throughout the site
articlesName: "Articles",
projectsName: "Projects",

31
src/pages/about.astro
View File

@ -1,8 +1,11 @@
---
import { GLOBAL } from "../lib/variables";
import { socials } from "../lib/socials";
import Layout from "../layouts/Layout.astro";
import Section from "../components/common/Section.astro";
import Prose from "../components/Prose.astro";
const aboutSocials = socials.filter(social => social.showInAbout);
---
<Layout>
@ -294,28 +297,12 @@ import Prose from "../components/Prose.astro";
<h2 class="text-2xl font-display mb-6">Connect</h2>
<div class="flex flex-wrap gap-4">
<a href={GLOBAL.githubProfile} target="_blank" rel="noopener noreferrer" class="flex items-center gap-2 zag-bg-alt p-4 rounded-lg shadow-sm hover:zag-bg-accent-light transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="zag-text">
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
</svg>
<span>GitHub</span>
</a>
<a href={GLOBAL.linkedinProfile} target="_blank" rel="noopener noreferrer" class="flex items-center gap-2 zag-bg-alt p-4 rounded-lg shadow-sm hover:zag-bg-accent-light transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="zag-text">
<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
<rect x="2" y="9" width="4" height="12"></rect>
<circle cx="4" cy="4" r="2"></circle>
</svg>
<span>LinkedIn</span>
</a>
<a href={GLOBAL.giteaProfile} target="_blank" rel="noopener noreferrer" class="flex items-center gap-2 zag-bg-alt p-4 rounded-lg shadow-sm hover:zag-bg-accent-light transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="zag-text">
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
</svg>
<span>Gitea</span>
</a>
{aboutSocials.map((social) => (
<a href={social.url} target="_blank" rel="noopener noreferrer" class="flex items-center gap-2 zag-bg-alt p-4 rounded-lg shadow-sm hover:zag-bg-accent-light transition-colors">
<img src={social.icon} alt={social.alt} class="w-6 h-6 zag-text" />
<span>{social.name}</span>
</a>
))}
</div>
</div>
</Section>