✨ Breadcrumbs with navigation for mobile

- Code style is Catppuccin Mocha
- Added lang tag to project
- Added keywords to project
- Sort projects by latest updated

Dockerfile

@@ -23,4 +23,4 @@ COPY --from=build /app/dist ./dist
 ENV HOST=0.0.0.0
 ENV PORT=4321
 EXPOSE 4321
-CMD node ./dist/server/entry.mjs
+ENTRYPOINT node ./dist/server/entry.mjs

TODO.md

@@ -1,46 +1,58 @@
 # TODO
 
-## Code
-- [ ] day.js for dates
-- [ ] Nix Shell
+- [ ] License
 
-## SSE
-- [x] Correct Sitemap.xml
-- [x] Correct robots.txt
-- [x] Correct security.txt
+## Code
+- [ ] Nix Shell
+- [ ] Analytics
+- [ ] Organize code better
+- [ ] Type slug of project
+
+## SEO
+- [ ] Meta tags on each page
 
 ## Layout
-- [x] Show current page
-- [x] Correct bg colour on entire page
-- [x] Hamburger menu on mobile
 - [ ] Dark mode toggle
-- [ ] Navigate using pathname / breadcrumbs
+- [x] Navigate using pathname / breadcrumbs
+- [ ] Better style for \<code /> blocks
 
 ## Accessibility
-- [x] Fix colours on buttons
-- [x] Correct contrast
 - [ ] All interactable elements have labels
-- [x] Colour links, also in MDX posts
+
+## I18N
+- [ ] Markdown for translations
 
 ## ~/
 - [ ] About me description
-- [x] Latest projects
-- [x] Non-cat image
+- [ ] Limit latest projects to N (5?)
 
 ## ~/about
 - [ ] About me
 
 ## ~/links
-- [ ] Add Bluesky link
-- [ ] Add MusicBrainz link
-- [ ] Add Archidekt link
+
+## ~/projects
+- [ ] Translate projects
+- [ ] RSS Feed
+
+## ~/projects/[project]
+- [ ] Only use Gitea icon for Gitea links
+- [ ] Bachelor project
+- [x] Sparebank1 ActualBudget service
+- [ ] More about this website
+- [ ] NixOS on desktop
+- [ ] Copy link to h tag and scroll to h tag on load
+- [x] External links should open in new tab
+- [x] Add keywords to meta tag
+- [x] Add description to meta tag
+- [ ] Source on image if "borrowed" from somewhere
 
 ## ~/slashes
 - [ ] List of all slashes
 
 ## ~/uses
-- [ ] Homelab uses
-- [ ] Raspberry PI uses
+- [x] Homelab uses
+- [x] Raspberry PI uses
 - [ ] Hardware anchor
 
 ## ~/certifications

astro.config.mjs

@@ -38,6 +38,11 @@ export default defineConfig({
   vite: {
     plugins: [tailwindcss()],
   },
+  markdown: {
+    shikiConfig: {
+      theme: "catppuccin-mocha",
+    },
+  },
   env: {
     schema: {
       DOMAIN: envField.string({ context: "client", access: "public" }),

messages/en.json

@@ -1,5 +1,6 @@
 {
   "$schema": "https://inlang.com/schema/inlang-message-format",
+  "archidektMessage": "My MTG cards and decks",
   "hiIm": "Hi, I'm",
   "position": "Software Engineer",
   "aboutMe": "Dedicated developer currently working at Capgemini Bergen.",

messages/nb.json

@@ -1,5 +1,6 @@
 {
   "$schema": "https://inlang.com/schema/inlang-message-format",
+  "archidektMessage": "Mine MTG kort og decks",
   "hiIm": "Hei, jeg er",
   "position": "Programvareutvikler",
   "aboutMe": "Engasjert utvikler som for tiden jobber hos Capgemini Bergen.",

package.json

@@ -16,27 +16,28 @@
   "dependencies": {
     "@astrojs/check": "^0.9.4",
     "@astrojs/mdx": "^4.0.8",
-    "@astrojs/node": "9.1.0",
+    "@astrojs/node": "9.1.1",
     "@astrojs/sitemap": "^3.2.1",
     "@astrojs/svelte": "^7.0.4",
     "@iconify-json/pajamas": "^1.2.5",
     "@inlang/paraglide-astro": "^0.3.5",
     "@inlang/paraglide-js": "1.11.8",
     "@tailwindcss/typography": "^0.5.16",
-    "@tailwindcss/vite": "^4.0.6",
-    "astro": "5.3.0",
+    "@tailwindcss/vite": "^4.0.9",
+    "astro": "^5.4.1 ",
     "astro-icon": "^1.1.5",
+    "dayjs": "^1.11.13",
     "sharp": "^0.33.5",
-    "svelte": "^5.20.1",
-    "tailwindcss": "^4.0.6",
+    "svelte": "^5.20.4",
+    "tailwindcss": "^4.0.9",
     "typescript": "^5.7.3"
   },
   "devDependencies": {
-    "daisyui": "^5.0.0-beta.8",
-    "prettier": "^3.5.1",
+    "daisyui": "^5.0.0",
+    "prettier": "^3.5.2",
     "prettier-plugin-astro": "^0.14.1",
     "prettier-plugin-svelte": "^3.3.3",
-    "vite": "^6.1.0"
+    "vite": "^6.2.0"
   },
   "prettier": {
     "semi": false,

src/components/Breadcrumb.astro

@@ -0,0 +1,38 @@
+---
+import { type NavLink, resolvePathname } from "@/utils/linking"
+import LocaleLink from "@/components/links/LocaleLink.astro"
+
+const pathname = resolvePathname(Astro.originPathname)
+
+let paths: string[]
+if (pathname === "/") {
+  paths = ["~"]
+} else {
+  paths = ["~", ...pathname.split("/").slice(1)]
+}
+
+function getLink(path: string): NavLink {
+  switch (path) {
+    case "~":
+      return "/"
+    default:
+      return `/${path}` as NavLink
+  }
+}
+---
+
+<div>
+  {
+    paths.map((path, index) => (
+      <span>
+        {index != paths.length - 1 ? (
+          <span>
+            <LocaleLink to={getLink(path)}>{path}</LocaleLink>/
+          </span>
+        ) : (
+          path
+        )}
+      </span>
+    ))
+  }
+</div>

src/components/header/HamburgerMenuButton.astro

@@ -2,13 +2,13 @@
 import PajamasIcon from "@/components/icons/PajamasIcon.astro"
 
 interface Props {
-  id: string
+  for: string
 }
 
-const { id } = Astro.props
+const { for: forId } = Astro.props
 ---
 
-<label for={id} aria-label="open sidebar" class="btn btn-square btn-ghost">
+<label for={forId} aria-label="open sidebar" class="btn btn-square btn-ghost">
   <PajamasIcon
     name="pajamas:hamburger"
     class="w-6 h-6"

src/components/header/Header.astro

@@ -2,22 +2,24 @@
 import Navbar from "./Navbar.astro"
 import NavbarDrawer from "./NavbarDrawer.astro"
 import HamburgerMenuButton from "./HamburgerMenuButton.astro"
+import Breadcrumb from "../Breadcrumb.astro"
 import { resolvePathname } from "@/utils/linking"
 
 const currentPath = `~${resolvePathname(Astro.originPathname)}`
+const drawerToggleId = "header-drawer"
 ---
 
 <div class="sm:m-auto">
   <div class="drawer drawer-end">
-    <input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
+    <input id={drawerToggleId} type="checkbox" class="drawer-toggle" />
     <div class="drawer-content flex flex-col">
       <!-- Navbar -->
       <div class="navbar w-full justify-end">
         <div class="flex justify-between items-center w-full h-full sm:hidden">
-          <h1 class="!text-2xl h-5">
-            {currentPath}
+          <h1 class="!text-xl h-5">
+            <Breadcrumb />
           </h1>
-          <HamburgerMenuButton id="my-drawer-3" />
+          <HamburgerMenuButton for={drawerToggleId} />
         </div>
         <div class="hidden flex-none sm:block">
           <Navbar />
@@ -25,8 +27,11 @@ const currentPath = `~${resolvePathname(Astro.originPathname)}`
       </div>
     </div>
     <div class="drawer-side z-50">
-      <label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay"
-      ></label>
+      <label
+        for={drawerToggleId}
+        aria-label="close sidebar"
+        class="drawer-overlay"></label>
+      <!-- Drawer -->
       <ul class="menu bg-cat-base min-h-full w-80 p-4">
         <li class="text-xl font-bold my-5">
           {currentPath}

src/components/myLinks/myLinks.ts

@@ -13,6 +13,15 @@ export interface MyLink {
 }
 
 export default [
+  {
+    title: "Archidekt",
+    url: "https://archidekt.com/u/Emberal",
+    message: m.archidektMessage(),
+  },
+  {
+    title: "Bluesky",
+    url: "https://bsky.app/profile/martials.no",
+  },
   {
     title: "Codeberg",
     url: "https://codeberg.org/martials",
@@ -55,6 +64,10 @@ export default [
       alt: "Mastodon icon",
     },
   },
+  {
+    title: "ListenBrainz",
+    url: "https://listenbrainz.org/user/emberal/",
+  },
   {
     title: "Pixelfed",
     url: "https://pixelfed.social/i/web/profile/261454857934868480",

src/components/projects/MyProjectsPage.astro

@@ -1,12 +1,8 @@
 ---
+import { getCollection } from "astro:content"
 import ProjectGrid from "./ProjectGrid.astro"
-import { type CollectionEntry } from "astro:content"
 
-interface Props {
-  projects: CollectionEntry<"projects">[]
-}
-
-const { projects } = Astro.props
+const projects = await getCollection("projects")
 ---
 
 <ProjectGrid projects={projects} />

src/components/projects/ProjectGrid.astro

@@ -2,6 +2,7 @@
 import type { Project } from "@/types/types"
 import type { NavLink } from "@/utils/linking"
 import ProjectCard from "./ProjectCard.astro"
+import dayjs from "dayjs"
 
 interface Props {
   projects: ReadonlyArray<Project>
@@ -14,19 +15,26 @@ const baseUrl: NavLink = "/projects"
 
 <div class="flex flex-wrap justify-around">
   {
-    projects.map(
-      ({ data: { title, description, tags, heroImage, heroImageAlt }, id }) => (
-        <div class="my-5 px-2">
-          <ProjectCard
-            title={title}
-            linkTo={`${baseUrl}/${id}`}
-            description={description}
-            tags={tags}
-            image={heroImage}
-            imageAlt={heroImageAlt}
-          />
-        </div>
-      ),
-    )
+    projects
+      .toSorted((a, b) =>
+        dayjs(a.data.updatedAt).isBefore(dayjs(b.data.updatedAt)) ? 1 : -1,
+      )
+      .map(
+        ({
+          data: { title, description, tags, heroImage, heroImageAlt },
+          id,
+        }) => (
+          <div class="my-5 px-2">
+            <ProjectCard
+              title={title}
+              linkTo={`${baseUrl}/${id}`}
+              description={description}
+              tags={tags}
+              image={heroImage}
+              imageAlt={heroImageAlt}
+            />
+          </div>
+        ),
+      )
   }
 </div>

src/components/projects/ProjectPage.astro

@@ -1,11 +1,12 @@
 ---
+import * as m from "@/paraglide/messages"
 import Layout from "@/layouts/Layout.astro"
 import BadgeList from "@/components/badge/BadgeList.astro"
 import GiteaLink from "@/components/links/GiteaLink.astro"
 import { languageTag } from "@/paraglide/runtime"
 import { getEntry, render } from "astro:content"
 import { Image } from "astro:assets"
-import * as m from "@/paraglide/messages"
+import dayjs from "dayjs"
 import "@/styles/global.css"
 
 interface Props {
@@ -17,19 +18,33 @@ const { project } = Astro.props
 const entry = await getEntry("projects", project)
 const { Content } = await render(entry!)
 const {
+  lang,
   title,
   description,
   tags,
+  keywords,
   heroImage,
   heroImageAlt,
   source,
   createdAt,
   updatedAt,
 } = entry!.data
+
+function localeDateString(isoString: string): string {
+  let template = "DD-MM-YYYY"
+  if (languageTag() === "nb") {
+    template = "DD/MM/YYYY"
+  }
+  return dayjs(isoString).locale(languageTag()).format(template)
+}
 ---
 
-<!--TODO day.js / Temporal API for dates?-->
-<Layout title={title} class="mx-auto max-w-[750px]">
+<Layout
+  title={title}
+  class="mx-auto max-w-[750px]"
+  description={description}
+  keywords={keywords}
+>
   <div class="flex justify-between my-2">
     <div>
       <h2>{title}</h2>
@@ -37,10 +52,10 @@ const {
     </div>
     <div class="flex flex-col items-end">
       <p>
-        {m.createdAt()}: {new Date(createdAt).toLocaleDateString(languageTag())}
+        {m.createdAt()}: {localeDateString(createdAt)}
       </p>
       <p>
-        {m.updatedAt()}: {new Date(updatedAt).toLocaleDateString(languageTag())}
+        {m.updatedAt()}: {localeDateString(updatedAt)}
       </p>
     </div>
   </div>
@@ -49,5 +64,7 @@ const {
   <GiteaLink href={source} class="my-2" />
 
   <p class="my-2">{description}</p>
-  <Content />
+  <div lang={lang}>
+    <Content />
+  </div>
 </Layout>

src/content/config.ts

@@ -5,11 +5,13 @@ const projectCollection = defineCollection({
   loader: glob({ pattern: "**\/*.mdx", base: "./src/content/projects" }),
   schema: ({ image }) =>
     z.object({
+      lang: z.union([z.literal("en"), z.literal("nb")]),
       title: z.string(),
       description: z.string(),
       heroImage: image(),
       heroImageAlt: z.string(),
       tags: z.array(z.string()),
+      keywords: z.array(z.string()),
       source: z.string().url(),
       createdAt: z.string().date(),
       updatedAt: z.string().date(),

src/content/projects/homepage.mdx

@@ -1,9 +1,11 @@
 ---
+lang: "en"
 title: "Welcome"
 description: "Welcome to my homepage / portfolio"
 heroImage: "assets/recursive-meme.png"
 heroImageAlt: "A recursive meme that says: Self-reference, recursive meme is self-referential"
 tags: [Astro, Svelte, TypeScript, I18n, TailwindCSS, Docker]
+keywords: [Martin Berg Alstad, portfolio, homepage, website, martials, emberal]
 source: "https://git.martials.no/martials/martials.no"
 createdAt: "2024-09-22"
 updatedAt: "2025-02-15"

src/content/projects/sb1budget.mdx

@@ -0,0 +1,115 @@
+---
+lang: "en"
+title: "Sparebank1 - Actual Budget"
+description: "Automatically import transactions from Sparebank1 bank accounts to Actual Budget."
+heroImage: "assets/is_it_worth_the_time.png"
+heroImageAlt: "A diagram that shows how much time is saved automating a tasks rather than doing it manually."
+tags: [TypeScript, Docker, Node, CronJob, Sqlite, API-management]
+keywords: [Finance, Sparebank1, Sparebank1 Utvikling, Sparebank1 API, Actual Budget API]
+source: "https://git.martials.no/martials/sparebank1_actual_budget_integration"
+createdAt: "2025-02-27"
+updatedAt: "2025-02-27"
+---
+
+import ExternalLink from "@/components/links/ExternalLink.astro"
+
+## What is it?
+
+<ExternalLink href="https://actualbudget.org/">Actual Budget</ExternalLink> is an open-source budgeting platform, it can very simply be self-hosted and accessed throught the browser.
+While <ExternalLink href="https://www.sparebank1.no/nb/bank/privat.html">Sparebank1</ExternalLink> is a Norwegian bank, with a great <ExternalLink href="https://developer.sparebank1.no/#/">developer experience</ExternalLink> and an easy to use API that can be used to fetch transactions for example.
+
+Actual has an API that can be used to interact with your own instance of Actual, like importing transactions.
+
+Which is what the Sparebank1 Actual Budget integration does. It fetches transactions from my accounts in Sparebank1 and imports them automatically into Actual.
+The operation runs daily and can be configured to import from multiple accounts at once.
+
+The purpose of this application is to automatically transfer transactions to the budget, to avoid doing it manually often, or once in a while.
+
+<br/>
+
+## The techy stuff
+
+Since the <ExternalLink href="https://actualbudget.org/docs/api/">Actual Budget API</ExternalLink> is an NPM package, the application had to be created in TypeScript.
+I looked at options to NodeJS but neither Bun or Deno was compatible with the *better-sqlite3* package which was a dependency to the API,
+so the best option for now was NodeJS.
+
+The application runs a cronJob that executes once a day at 1 am. The specific time is not really that important since it fetches transactions from 3-4 days before the day it runs.
+This is done to avoid fetching transactions which are not fully cleared yet. Some transactions can even be cleared but the unique Id for the transaction might not be set yet.
+Actual uses that unique Id in order to avoid duplicate transactions, and makes it possible to update transactions if the content has changed.
+
+Rules can be defined within the Actual application, so transactions are automatically sorted into the correct categories on import.
+
+The application supports importing multiple accounts from a single user.
+This is done by specifying the account keys to Sparebank1 and a equal length array of ids for the Actual accounts.
+
+<br/>
+
+### Low Coupling
+
+In order to make it easy to reuse the same application for other banks, it was created with low coupling in mind.
+Interfaces are defined for the different parts of the application, and in order to implement it for any other bank,
+the `Bank` interface can be implemented on any class, and requires two methods.
+
+<br/>
+
+```ts
+export interface Bank {
+  fetchTransactions: (
+    interval: Interval,
+    ...accountKeys: ReadonlyArray<string>
+  ) => Promise<ReadonlyArray<ActualTransaction>>
+
+  shutdown: () => Promise<void> | void
+}
+```
+
+<br/>
+
+### Authentication
+
+Both Sparebank1 and Actual requires different secrets and keys to work.
+
+Actual only requires that secrets are passed into the client that handles the requests, but Sparebank1 requires more effort in order to fetch data.
+First it requires a *authentication code* that can only be fetched using my own BankID account.
+The authentication code must be swapped for a *refresh token* within 2 minutes or the process must be started over.
+The refresh token has a lifetime of a year unless used, so it can be saved for later use.
+The refresh token is added as an environmental variable that can be used to fetch the first *access token*.
+After that, both the new refresh token and access token is stored in a Sqlite database so they can be reused until they expire.
+
+<br/>
+
+### Deployement
+
+The application runs in a docker container on my [Homelab](/uses).
+It is build from a Gitea Act runner that adds the needed secrets and variables from the Gitea instance.
+
+<br/>
+
+```yaml
+name: Deploy application
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  deploy:
+    runs-on: host
+
+    env:
+      # Secrets and vars
+    steps:
+      - name: Check out repository code
+        uses: actions/checkout@v4
+      - name: Run docker-compose
+        run: docker compose up -d --build
+```
+
+<br/>
+
+## The road ahead
+
+Future plans incude adding more features to the application and some more error handling.
+Then potentially implementing the integration for other banks or credit cards to automate even more.
+
+I also want to rewrite it in Bun when they implement the needed APIs to get Better-sqlite3 working.

src/content/uses/homelab.yaml

@@ -1,3 +1,3 @@
 title: Homelab
 hardware:
-  - b # Graphics cards, CPUs, etc.
+  - HP ProDesk 600 G3 SFF i7 6. gen # https://bergenbruktpc.no/stasjonaer-pc/hp/hp-prodesk-600-g3-sff-i5-i7-6-gen#&variation=926583

src/content/uses/raspberryPi.yaml

@@ -1,5 +1,5 @@
 title: Raspberry Pi 4
 accessories:
-  - a # Screens, keyboards, mice, etc.
+  - 4 TB External harddrive
 hardware:
-  - b # Graphics cards, CPUs, etc.
+  - OKdo Raspberry Pi 4 Kit 4 GB # https://www.kjell.com/no/produkter/data/raspberry-pi/okdo-raspberry-pi-4-kit-4-gb-p88059

src/layouts/Layout.astro

@@ -1,14 +1,16 @@
 ---
 import Footer from "@/components/Footer.astro"
 import Header from "@/components/header/Header.astro"
+import Breadcrumb from "@/components/Breadcrumb.astro"
 import { languageTag } from "@/paraglide/runtime"
-import { resolvePathname } from "@/utils/linking"
 
 interface Props {
   title: string
+  description?: string
+  keywords?: ReadonlyArray<string>
   class?: string
 }
-const { title, class: clazz } = Astro.props
+const { title, description, keywords, class: clazz } = Astro.props
 const mainClass =
   "grow max-w-[1000px] m-auto sm:min-w-[500px] not-sm:w-full px-5"
 ---
@@ -17,18 +19,21 @@ const mainClass =
 <html lang={languageTag()} dir={"ltr"}>
   <head>
     <meta charset="UTF-8" />
-    <meta name="description" content="Astro description" />
+    <meta name="author" content="Martin Berg Alstad" />
     <meta name="viewport" content="width=device-width" />
+    <meta name="generator" content={Astro.generator} />
+    {description && <meta name="description" content={description} />}
+    {keywords && <meta name="keywords" content={keywords.join(", ")} />}
     <link rel="sitemap" href="/sitemap-index.xml" />
     <link rel="icon" type="image/jpg" href="/favicon.jpg" />
-    <meta name="generator" content={Astro.generator} />
     <title>{title} | Martin Berg Alstad</title>
   </head>
+
   <body class="flex flex-col min-h-screen bg-cat-base text-cat-text">
     <Header />
     <main class:list={[mainClass, clazz]}>
       <h1 class="text-center not-sm:hidden">
-        ~{resolvePathname(Astro.originPathname)}
+        <Breadcrumb />
       </h1>
       <div class="my-5">
         <slot />

src/pages/en/projects/[project].astro

@@ -7,7 +7,10 @@ import "@/styles/global.css"
 export const prerender = true
 
 export function getStaticPaths(): GetStaticPathsResult {
-  return [{ params: { project: "homepage" } }]
+  return [
+    { params: { project: "homepage" } },
+    { params: { project: "sb1budget" } },
+  ]
 }
 
 const { project } = Astro.params

src/pages/en/projects/index.astro

@@ -1,12 +1,9 @@
 ---
-import { getCollection } from "astro:content"
 import Layout from "@/layouts/Layout.astro"
 import MyProjectsPage from "@/components/projects/MyProjectsPage.astro"
 import "@/styles/global.css"
-
-const projects = await getCollection("projects")
 ---
 
 <Layout title="Projects">
-  <MyProjectsPage projects={projects} />
+  <MyProjectsPage />
 </Layout>

src/pages/projects/[project].astro

@@ -7,7 +7,10 @@ import "@/styles/global.css"
 export const prerender = true
 
 export function getStaticPaths(): GetStaticPathsResult {
-  return [{ params: { project: "homepage" } }]
+  return [
+    { params: { project: "homepage" } },
+    { params: { project: "sb1budget" } },
+  ]
 }
 
 const { project } = Astro.params

src/pages/projects/index.astro

@@ -1,12 +1,9 @@
 ---
-import { getCollection } from "astro:content"
 import Layout from "@/layouts/Layout.astro"
 import MyProjectsPage from "@/components/projects/MyProjectsPage.astro"
 import "@/styles/global.css"
-
-const projects = await getCollection("projects")
 ---
 
 <Layout title="Prosjekter">
-  <MyProjectsPage projects={projects} />
+  <MyProjectsPage />
 </Layout>

src/utils/linking.ts

@@ -22,6 +22,8 @@ const paths: Set<NavLink> = new Set([
   "/uses",
 ])
 
+const projectPaths: Set<string> = new Set<string>(["homepage", "sb1budget"])
+
 /**
  * Defines the localized pathnames for the site.
  * The key must be used to navigate to the correct path.
@@ -63,3 +65,22 @@ export function resolvePathname(pathname: string): AbsolutePathname {
   }
   return pathname as AbsolutePathname
 }
+
+export function isAbsolutePathname(path: string): path is AbsolutePathname {
+  return path.startsWith("/")
+}
+
+export function isNavLink(path: string): path is NavLink {
+  if (path.startsWith("/en")) {
+    path = path.slice(2)
+  }
+  if (paths.has(path as NavLink)) {
+    return true
+  }
+  const pathSplit = path.split("/").slice(1)
+  return (
+    pathSplit.length === 2 &&
+    pathSplit[0] === "projects" &&
+    projectPaths.has(pathSplit[1])
+  )
+}