HashDot/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refactor social icons
All checks were successful
Build and Push Docker Image / BuildAndPush (push) Successful in 47s
Details

Browse Source
This commit is contained in:
Lars Hampe 2024-08-17 18:34:35 +02:00
parent 07556ac29b
commit dfc2c6a70e
5 changed files with 66 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/Footer.astro
View File

@ -1,4 +1,8 @@
---
import Github from "./social/github.astro";
import X from "./social/x.astro";
import Youtube from "./social/youtube.astro";
const currentYear = new Date().getFullYear();
---
@ -7,34 +11,9 @@ const currentYear = new Date().getFullYear();
© {currentYear} Lars Hampe. All rights reserved.
<a href="/imprint">Imprint</a>
</span>
<div class="flex gap-5">
<a href="https://twitter.com/larshmp" target="_blank">
<span class="sr-only">Follow Lars Hampe on Twitter</span>
<svg
viewBox="0 0 16 16"
aria-hidden="true"
width="24"
height="24"
astro-icon="social/twitter"
><path
fill="currentColor"
d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"
></path></svg
>
</a>
<a href="https://github.com/hashdot" target="_blank">
<span class="sr-only">Go to Lars Hampes GitHub profile</span>
<svg
viewBox="0 0 16 16"
aria-hidden="true"
width="24"
height="24"
astro-icon="social/github"
><path
fill="currentColor"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
></path></svg
>
</a>
<div class="flex gap-5 items-center">
<X size="24" />
<Github size="24" />
<Youtube size="36" />
</div>
</footer>

27
src/components/Header.astro
View File

@ -1,35 +1,24 @@
---
import HeaderLink from "./HeaderLink.astro";
import { SITE_TITLE } from "../consts";
import X from "./social/x.astro";
import Github from "./social/github.astro";
import Youtube from "./social/youtube.astro";
---
<header class="w-full flex items-center justify-center">
<nav class="flex justify-between w-full max-w-screen-lg my-5">
<a href="/" class="flex items-center justify-center">
<img src="/logo.svg" alt="{SITE_TITLE}" class="w-12 h-12 mr-3" />
{SITE_TITLE}</a>
{SITE_TITLE}</a
>
<div class="flex gap-5 items-center">
<div class="w-full flex gap-5 items-center">
<HeaderLink href="/blog">Blog</HeaderLink>
</div>
<a href="https://twitter.com/larshmp" target="_blank">
<span class="sr-only">Follow Lars Hampe on Twitter</span>
<svg viewBox="0 0 16 16" aria-hidden="true" width="16" height="16"
><path
fill="currentColor"
d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"
></path></svg
>
</a>
<a href="https://github.com/hashdot" target="_blank">
<span class="sr-only">Go to Lars Hampes GitHub profile</span>
<svg viewBox="0 0 16 16" aria-hidden="true" width="16" height="16"
><path
fill="currentColor"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
></path></svg
>
</a>
<X size="24" />
<Github size="24" />
<Youtube size="36" />
</div>
</nav>
</header>

13
src/components/social/github.astro Normal file
View File

@ -0,0 +1,13 @@
---
const { size = 24 } = Astro.props;
---
<a href="https://github.com/hashdot" target="_blank">
<span class="sr-only">Go to Lars Hampes GitHub profile</span>
<svg viewBox="0 0 16 16" aria-hidden="true" width={size} height={size}
><path
fill="currentColor"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
></path></svg
>
</a>

20
src/components/social/x.astro Normal file
View File

@ -0,0 +1,20 @@
---
const { size = 24 } = Astro.props;
---
<a href="https://x.com/larshmp" target="_blank">
<span class="sr-only">Follow Lars Hampe on X</span>
<svg
xmlns="http://www.w3.org/2000/svg"
x="0px"
y="0px"
width={size}
height={size}
viewBox="0 0 30 30"
>
<path
fill="currentColor"
d="M26.37,26l-8.795-12.822l0.015,0.012L25.52,4h-2.65l-6.46,7.48L11.28,4H4.33l8.211,11.971L12.54,15.97L3.88,26h2.65 l7.182-8.322L19.42,26H26.37z M10.23,6l12.34,18h-2.1L8.12,6H10.23z"
></path>
</svg>
</a>

17
src/components/social/youtube.astro Normal file
View File

@ -0,0 +1,17 @@
---
const { size = 24 } = Astro.props;
---
<a href="https://www.youtube.com/@LarsHampe" target="_blank">
<span class="sr-only">Subscribe to Lars Hampes YouTube channel</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width={size}
height={size}
viewBox="0 0 50 50"
>
<path
d="M 24.402344 9 C 17.800781 9 11.601563 9.5 8.300781 10.199219 C 6.101563 10.699219 4.199219 12.199219 3.800781 14.5 C 3.402344 16.898438 3 20.5 3 25 C 3 29.5 3.398438 33 3.898438 35.5 C 4.300781 37.699219 6.199219 39.300781 8.398438 39.800781 C 11.902344 40.5 17.898438 41 24.5 41 C 31.101563 41 37.097656 40.5 40.597656 39.800781 C 42.800781 39.300781 44.699219 37.800781 45.097656 35.5 C 45.5 33 46 29.402344 46.097656 24.902344 C 46.097656 20.402344 45.597656 16.800781 45.097656 14.300781 C 44.699219 12.101563 42.800781 10.5 40.597656 10 C 37.097656 9.5 31 9 24.402344 9 Z M 24.402344 11 C 31.601563 11 37.398438 11.597656 40.199219 12.097656 C 41.699219 12.5 42.898438 13.5 43.097656 14.800781 C 43.699219 18 44.097656 21.402344 44.097656 24.902344 C 44 29.199219 43.5 32.699219 43.097656 35.199219 C 42.800781 37.097656 40.800781 37.699219 40.199219 37.902344 C 36.597656 38.601563 30.597656 39.097656 24.597656 39.097656 C 18.597656 39.097656 12.5 38.699219 9 37.902344 C 7.5 37.5 6.300781 36.5 6.101563 35.199219 C 5.300781 32.398438 5 28.699219 5 25 C 5 20.398438 5.402344 17 5.800781 14.902344 C 6.101563 13 8.199219 12.398438 8.699219 12.199219 C 12 11.5 18.101563 11 24.402344 11 Z M 19 17 L 19 33 L 33 25 Z M 21 20.402344 L 29 25 L 21 29.597656 Z"
></path>
</svg>
</a>