From 8b5d217509769f97c664bb66c00eedfe2f222143 Mon Sep 17 00:00:00 2001 From: sudoer777 Date: Fri, 7 Jul 2023 01:42:28 -0500 Subject: [PATCH] Add icons to socials --- astro.config.mjs | 4 +++- package.json | 2 ++ pnpm-lock.yaml | 18 ++++++++++++++ src/components/ButtonSecondary.astro | 4 ++-- src/components/content/index/Socials.astro | 28 ++++++++++++---------- 5 files changed, 40 insertions(+), 16 deletions(-) diff --git a/astro.config.mjs b/astro.config.mjs index 4b73c11..ee170e2 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -21,7 +21,9 @@ export default defineConfig({ mdx(), icon({ include: { - heroicons: ['*'], // Loads entire Material Design Icon set + heroicons: ['*'], + 'fa-brands': ['*'], + 'simple-icons': ['*'], }, }), ], diff --git a/package.json b/package.json index 9264f00..ae205a9 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,9 @@ "tailwindcss-hero-patterns": "^0.1.2" }, "devDependencies": { + "@iconify-json/fa-brands": "^1.1.4", "@iconify-json/heroicons": "^1.1.11", + "@iconify-json/simple-icons": "^1.1.59", "@typescript-eslint/parser": "^5.61.0", "astro-icon": "1.0.0-next.2", "autoprefixer": "^10.4.14", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f1280fc..a403b7a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -43,9 +43,15 @@ dependencies: version: 0.1.2 devDependencies: + '@iconify-json/fa-brands': + specifier: ^1.1.4 + version: 1.1.4 '@iconify-json/heroicons': specifier: ^1.1.11 version: 1.1.11 + '@iconify-json/simple-icons': + specifier: ^1.1.59 + version: 1.1.59 '@typescript-eslint/parser': specifier: ^5.61.0 version: 5.61.0(eslint@8.44.0)(typescript@5.1.6) @@ -997,12 +1003,24 @@ packages: resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==} dev: true + /@iconify-json/fa-brands@1.1.4: + resolution: {integrity: sha512-JT9BgOFT17qgwctdjGbIKENcW2jEOzo22/SPTAT2T4ygQPtG4niBFnjkDZNcqk9JHSyc6sYvgb9NFKoJ8eGkHQ==} + dependencies: + '@iconify/types': 2.0.0 + dev: true + /@iconify-json/heroicons@1.1.11: resolution: {integrity: sha512-Autw98FvUTmBCgb4CuKZ7iQQ2633YBCmcCbAbVNU9hAo6vms9uVcbtrAQt/qlB+qzNi52PV3DWDiRtJgmPeZIw==} dependencies: '@iconify/types': 2.0.0 dev: true + /@iconify-json/simple-icons@1.1.59: + resolution: {integrity: sha512-JlT/oEDiI2MtJbR/HgSFS4MIr+dmVMKxQKwM6S3E2/fhjS0BTuNybjrFH/XfIOQ4MlNp/ZBoxBmpdFsKC2gScw==} + dependencies: + '@iconify/types': 2.0.0 + dev: true + /@iconify/tools@3.0.2: resolution: {integrity: sha512-qEJ7IrqZuQHdS0lIZwk9dLeD0z9k7+EIN0qpo5YbUk1dA2gyluM9Xn/tmED7ZaVekkEQe3K3EcLGqNJQTyewzw==} dependencies: diff --git a/src/components/ButtonSecondary.astro b/src/components/ButtonSecondary.astro index 462e578..bc33c48 100644 --- a/src/components/ButtonSecondary.astro +++ b/src/components/ButtonSecondary.astro @@ -7,7 +7,7 @@ export interface Props { } const { link, icon, external } = Astro.props -const buttonPaddingX = 'md:px-[.75rem] px-[.5rem]' +const buttonPaddingX = 'md:px-[.75rem] px-[.5rem] md:gap-[.5rem] gap-[.5rem]' const buttonPaddingY = 'py-[.5rem]' --- @@ -15,7 +15,7 @@ const buttonPaddingY = 'py-[.5rem]' href={link} target={external ? '_blank' : '_self'} rel={external ? 'noopener noreferrer' : ''} - class={`rounded hover:bg-background-hover hover:text-font-hover focus-visible:bg-background-hover focus-visible:text-font-hover focus-visible:outline-none ${buttonPaddingX} ${buttonPaddingY}`} + class={`flex flex-row items-center rounded hover:bg-background-hover hover:text-font-hover focus-visible:bg-background-hover focus-visible:text-font-hover focus-visible:outline-none ${buttonPaddingX} ${buttonPaddingY}`} > {icon && } diff --git a/src/components/content/index/Socials.astro b/src/components/content/index/Socials.astro index dd62a1c..7d6fcf7 100644 --- a/src/components/content/index/Socials.astro +++ b/src/components/content/index/Socials.astro @@ -30,41 +30,43 @@ const socials: Social[] = [ name: 'GitHub (Personal)', profile: 'Sudoer777', url: 'https://github.com/sudoer777', + icon: 'fa-brands:github', }, { name: 'GitHub (R-Technics)', - profile: 'Sudoer777', - url: 'https://github.com/sudoer777', + profile: 'ethanreece-rtechnics', + url: 'https://github.com/ethanreece-rtechnics', + icon: 'heroicons:briefcase-solid', }, { name: 'GitHub (Scrumfish)', - profile: 'Sudoer777', - url: 'https://github.com/sudoer777', + profile: 'ethanreece-scrumfish', + url: 'https://github.com/ethanreece-scrumfish', + icon: 'heroicons:briefcase-solid', }, { name: 'Forgejo', - profile: 'sudoer777@git.sudoer.ch', - url: 'https://git.sudoer.ch/sudoer777', + profile: 'me@git.sudoer.ch', + url: 'https://git.sudoer.ch/me', + icon: 'simple-icons:forgejo', }, { name: 'Mastodon (GoToSocial)', - profile: 'Sudoer777', - url: '', + profile: 'me@gts.sudoer.ch', + url: 'https://gts.sudoer.ch/@me', + icon: 'fa-brands:mastodon', }, { name: 'Devpost', profile: 'sudoer777', url: 'https://devpost.com/sudoer777', - }, - { - name: 'GivePulse (UTD)', - profile: '', - url: '', + icon: 'simple-icons:devpost', }, { name: 'LinkedIn', profile: '-ethanreece-', url: 'https://www.linkedin.com/in/-ethanreece-/', + icon: 'fa-brands:linkedin', }, ] ---