Moved some contstants to a constants.ts file.

Added LinkedIn link in footer.

Added option to add icon to ExternalLinks

Refactored some code in ExternalLink.

Signed-off-by: Martin Berg Alstad <git@martials.no>

.env

@@ -1,3 +0,0 @@
-DOMAIN="martials.no"
-GIT_URL=https://git.$DOMAIN
-STATUS_URL="https://status.$DOMAIN/status/home"

astro.config.mjs

@@ -39,10 +39,7 @@ export default defineConfig({
   }),
   env: {
     schema: {
-      DOMAIN: envField.string({ context: "client", access: "public" }),
+      URL: envField.string({ context: "client", access: "public" })
-      URL: envField.string({ context: "client", access: "public" }),
-      GIT_URL: envField.string({ context: "client", access: "public" }),
-      STATUS_URL: envField.string({ context: "client", access: "public" })
     }
   }
 })

src/components/Footer.astro

@@ -1,20 +1,19 @@
 ---
 import GiteaLink from "./links/GiteaLink.astro"
-import PajamasIcon from "./icons/PajamasIcon.astro"
 import ExternalLink from "./links/ExternalLink.astro"
 import LanguageButtonGroup from "./LanguageButtonGroup.astro"
-import { GIT_URL, STATUS_URL } from "astro:env/client"
 import * as m from "@/paraglide/messages"
-
+import { LINKED_IN_URL, THIS_GIT_URL, STATUS_URL } from "../constants"
-const giteaLink = `${GIT_URL}/martials/martials.no`
 ---
 
 <div class="divider" />
 <div class="py-5 flex flex-row gap-1 justify-around w-full items-center">
-  <div>
+  <div class="flex flex-col gap-1">
-    <GiteaLink href={giteaLink} />
+    <GiteaLink href={THIS_GIT_URL} />
-    <ExternalLink href={STATUS_URL} class="flex items-center" title="Status">
+    <ExternalLink href={LINKED_IN_URL} iconLeft="pajamas:linkedin" iconLeftAriaLabel="LinkedIn" title="LinkedIn">
-      <PajamasIcon name="pajamas:status-health" class="w-6 h-6 mr-2" />
+      LinkedIn
+    </ExternalLink>
+    <ExternalLink href={STATUS_URL} iconLeft="pajamas:status-health" iconLeftAriaLabel="Status health" title="Status">
       {m.status()}
     </ExternalLink>
   </div>

src/components/icons/Gitea.astro

@@ -7,4 +7,4 @@ interface Props {
 const { class: clazz } = Astro.props
 ---
 
-<PajamasIcon name="pajamas:gitea" class={clazz}></PajamasIcon>
+<PajamasIcon name="pajamas:gitea" aria-label="Gitea" class={clazz} />

src/components/icons/PajamasIcon.astro

@@ -4,9 +4,10 @@ import type { ComponentProps } from "@/types/props"
 import { Icon } from "astro-icon/components"
 interface Props extends ComponentProps {
   name: PajamasIcon
+  "aria-label": string
 }
 
 const { name, class: clazz, ...props } = Astro.props
 ---
 
-<Icon name={name} class:list={[clazz]} {...props} />
+<Icon name={name} class:list={["w-6 h-6", clazz]} {...props} />

src/components/links/ExternalLink.astro

@@ -1,12 +1,28 @@
 ---
 import type { LinkProps } from "@/types/props"
+import type { PajamasIcon } from "@/types/icons"
+import ExternalLinkTextOnly from "./ExternalLinkTextOnly.astro"
+import ExternalLinkIconLeft from "./ExternalLinkIconLeft.astro"
+
 interface Props extends LinkProps {
-  noStyle?: boolean
+  iconLeft?: PajamasIcon
+  iconLeftAriaLabel?: string
 }
 
-const { href, noStyle = false, class: clazz, ...props } = Astro.props
+const { iconLeft, iconLeftAriaLabel, ...props } = Astro.props
+if (iconLeft && !iconLeftAriaLabel) {
+  throw new Error("ExternalLink: iconLeftAriaLabel is required when iconLeft is provided")
+}
 ---
 
-<a href={href} target="_blank" rel="noopener" class:list={[noStyle ? "" : "link", clazz]} {...props}>
+{  iconLeft && iconLeftAriaLabel
+  ?
+<ExternalLinkIconLeft iconLeft={iconLeft} iconLeftAriaLabel={iconLeftAriaLabel} {...props}>
   <slot />
-</a>
+</ExternalLinkIconLeft>
+  :
+<ExternalLinkTextOnly {...props}>
+  <slot />
+</ExternalLinkTextOnly>
+  }
+

src/components/links/ExternalLinkIconLeft.astro

@@ -0,0 +1,20 @@
+---
+import type { PajamasIcon as PajamasIconType } from "@/types/icons"
+import type { LinkProps } from "@/types/props"
+import ExternalLinkTextOnly from "./ExternalLinkTextOnly.astro"
+import PajamasIcon from "../icons/PajamasIcon.astro"
+
+interface Props extends LinkProps {
+  iconLeft: PajamasIconType
+  iconLeftAriaLabel: string
+}
+const { href, class: clazz, iconLeft, iconLeftAriaLabel, ...props } = Astro.props
+---
+
+<div class="flex items-center">
+  <PajamasIcon name={iconLeft} aria-label={iconLeftAriaLabel} class="mr-2" />
+  <ExternalLinkTextOnly href={href} class={clazz} {...props}>
+    <slot />
+  </ExternalLinkTextOnly>
+</div>
+

src/components/links/ExternalLinkTextOnly.astro

@@ -0,0 +1,12 @@
+---
+import type { LinkProps } from "@/types/props"
+
+interface Props extends LinkProps {
+}
+
+const { href, class: clazz, ...props } = Astro.props
+---
+
+<a href={href} target="_blank" rel="noopener" class:list={[clazz]} {...props}>
+  <slot />
+</a>

src/components/links/GiteaLink.astro

@@ -1,7 +1,6 @@
 ---
 import ExternalLink from "./ExternalLink.astro"
 import * as m from "@/paraglide/messages"
-import Gitea from "../icons/Gitea.astro"
 interface Props {
   href: string
 }
@@ -9,8 +8,7 @@ const { href } = Astro.props
 ---
 
 <div>
-  <ExternalLink href={href} class="flex items-center gap-1">
+  <ExternalLink iconLeft="pajamas:gitea" iconLeftAriaLabel="Gitea" href={href}>
-    <Gitea class="w-6 h-6" />
     {m.sourceCode()}
   </ExternalLink>
 </div>

src/components/myLinks/LinkCard.astro

@@ -10,10 +10,10 @@ interface Props extends MyLink {
 const { title, message, url, icon, class: clazz } = Astro.props
 ---
 
-<ExternalLink href={url} noStyle>
+<ExternalLink href={url}>
   <div class:list={["card bg-neutral", clazz]}>
     <div class="card-body p-5 flex flex-row items-center">
-      <PajamasIcon name={icon ?? "pajamas:link"} class="w-6 h-6" />
+      <PajamasIcon name={icon ?? "pajamas:link"} aria-label={icon ? title : "Link"} />
       <div>
         <h5 class="card-title">{title}</h5>
         <p class="prose">{message}</p>

src/components/myLinks/myLinks.ts

@@ -1,6 +1,6 @@
 import type { PajamasIcon } from "@/types/icons.ts"
-import { GIT_URL } from "astro:env/client"
 import * as m from "@/paraglide/messages"
+import * as c from "@/constants.ts"
 
 export interface MyLink {
   title: string;
@@ -12,35 +12,35 @@ export interface MyLink {
 export default [
   {
     title: "GitHub",
-    url: "https://github.com/emberal",
+    url: c.GITHUB_PROFILE_URL,
     icon: "pajamas:github"
   },
   {
     title: "Gitea",
-    url: `${GIT_URL}/martials`,
+    url: c.GIT_PROFILE_URL,
     message: m.forPersonalProjects(),
     icon: "pajamas:gitea"
   },
   {
     title: "LinkedIn",
-    url: "https://www.linkedin.com/in/martin-b-2a69391a3/",
+    url: c.LINKED_IN_URL,
     icon: "pajamas:linkedin"
   },
   {
     title: "Mastodon (Snabelen)",
-    url: "https://snabelen.no/@Martials",
+    url: c.MASTODON_URL,
     icon: "pajamas:mastodon"
   },
   {
     title: "Pixelfed",
-    url: "https://pixelfed.social/i/web/profile/261454857934868480"
+    url: c.PIXELFED_URL
   },
   {
     title: "Steam",
-    url: "https://steamcommunity.com/id/martials/"
+    url: c.STEAM_URL
   },
   {
     title: "Trakt.tv",
-    url: "https://trakt.tv/users/martials"
+    url: c.TRAKT_URL
   }
 ] satisfies MyLink[]

src/constants.ts

@@ -0,0 +1,11 @@
+export const DOMAIN = "martials.no"
+export const LINKED_IN_URL = "https://www.linkedin.com/in/martin-b-2a69391a3"
+export const GIT_BASE_URL = `https://git.${DOMAIN}`
+export const GIT_PROFILE_URL = `${GIT_BASE_URL}/martials`
+export const GITHUB_PROFILE_URL = "https://github.com/emberal"
+export const MASTODON_URL = "https://snabelen.no/@Martials"
+export const PIXELFED_URL = "https://pixelfed.social/i/web/profile/261454857934868480"
+export const STEAM_URL = "https://steamcommunity.com/id/martials/"
+export const THIS_GIT_URL = `${GIT_BASE_URL}/martials/martials.no`
+export const TRAKT_URL = "https://trakt.tv/users/martials"
+export const STATUS_URL = `https://status.${DOMAIN}/status/home`

src/utils/linking.ts

@@ -58,8 +58,9 @@ export function localizePathname(
 }
 
 export function resolvePathname(pathname: string): AbsolutePathname {
-  if (pathname.startsWith("/en")) {
+  const enPattern = "/en"
-    return pathname.slice(3) as AbsolutePathname
+  if (pathname.startsWith(enPattern)) {
+    return pathname.slice(enPattern.length) as AbsolutePathname
   }
   return pathname as AbsolutePathname
 }