Create a Blog astro project as template for future
Change-Id: I1e8adbe1c9bdc6b2273a19407530323508adcbd5
Reviewed-on: https://git.clicks.codes/c/Coded/thecoded.prof/+/674
Reviewed-by: Samuel Shuert <coded@clicks.codes>
Tested-by: Samuel Shuert <coded@clicks.codes>
diff --git a/sites/blog/src/components/HeaderLink.astro b/sites/blog/src/components/HeaderLink.astro
new file mode 100644
index 0000000..bb600fb
--- /dev/null
+++ b/sites/blog/src/components/HeaderLink.astro
@@ -0,0 +1,25 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'a'>;
+
+const { href, class: className, ...props } = Astro.props;
+
+const { pathname } = Astro.url;
+const subpath = pathname.match(/[^\/]+/g);
+const isActive = href === pathname || href === '/' + subpath?.[0];
+---
+
+<a href={href} class:list={[className, { active: isActive }]} {...props}>
+ <slot />
+</a>
+<style>
+ a {
+ display: inline-block;
+ text-decoration: none;
+ }
+ a.active {
+ font-weight: bolder;
+ text-decoration: underline;
+ }
+</style>