diff --git a/TODO.md b/TODO.md index 1c4cebf..d3bb1fd 100644 --- a/TODO.md +++ b/TODO.md @@ -6,6 +6,7 @@ - [ ] Nix Shell - [ ] Analytics - [ ] Organize code better +- [ ] Type slug of project ## SEO - [ ] Meta tags on each page @@ -13,6 +14,7 @@ ## Layout - [ ] Dark mode toggle - [ ] Navigate using pathname / breadcrumbs +- [ ] Better style for blocks ## Accessibility - [ ] All interactable elements have labels @@ -31,10 +33,16 @@ ## ~/projects - [ ] Translate projects +- [ ] NixOS on desktop +- [ ] RSS Feed + +## ~/projects/[project] +- [ ] Only use Gitea icon for Gitea links - [ ] Bachelor project - [ ] Sparebank1 ActualBudget service - [ ] More about this website -- [ ] RSS Feed +- [ ] Copy link to h tag and scroll to h tag on load +- [x] External links should open in new tab ## ~/slashes - [ ] List of all slashes diff --git a/astro.config.mjs b/astro.config.mjs index c11c5ff..de004ed 100644 --- a/astro.config.mjs +++ b/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" }), diff --git a/src/components/projects/MyProjectsPage.astro b/src/components/projects/MyProjectsPage.astro index 92d16ad..9701290 100644 --- a/src/components/projects/MyProjectsPage.astro +++ b/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") --- diff --git a/src/components/projects/ProjectGrid.astro b/src/components/projects/ProjectGrid.astro index fe8b2dc..6451c93 100644 --- a/src/components/projects/ProjectGrid.astro +++ b/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 @@ -14,19 +15,26 @@ const baseUrl: NavLink = "/projects"
{ - projects.map( - ({ data: { title, description, tags, heroImage, heroImageAlt }, id }) => ( -
- -
- ), - ) + projects + .toSorted((a, b) => + dayjs(a.data.updatedAt).isBefore(dayjs(b.data.updatedAt)) ? 1 : -1, + ) + .map( + ({ + data: { title, description, tags, heroImage, heroImageAlt }, + id, + }) => ( +
+ +
+ ), + ) }
diff --git a/src/components/projects/ProjectPage.astro b/src/components/projects/ProjectPage.astro index f54a0c4..526508e 100644 --- a/src/components/projects/ProjectPage.astro +++ b/src/components/projects/ProjectPage.astro @@ -18,6 +18,7 @@ const { project } = Astro.props const entry = await getEntry("projects", project) const { Content } = await render(entry!) const { + lang, title, description, tags, @@ -29,7 +30,10 @@ const { } = entry!.data function localeDateString(isoString: string): string { - return dayjs(isoString).locale(languageTag()).format("YYYY-MM-DD") + if (languageTag() === "nb") { + return dayjs(isoString).locale(languageTag()).format("DD/MM/YYYY") + } + return dayjs(isoString).locale(languageTag()).format("DD-MM-YYYY") } --- @@ -53,5 +57,7 @@ function localeDateString(isoString: string): string {

{description}

- +
+ +
diff --git a/src/content/config.ts b/src/content/config.ts index fa2fb71..36633ba 100644 --- a/src/content/config.ts +++ b/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(), diff --git a/src/content/projects/assets/is_it_worth_the_time.png b/src/content/projects/assets/is_it_worth_the_time.png new file mode 100644 index 0000000..d9ac46e Binary files /dev/null and b/src/content/projects/assets/is_it_worth_the_time.png differ diff --git a/src/content/projects/homepage.mdx b/src/content/projects/homepage.mdx index bc085c5..6b4a561 100644 --- a/src/content/projects/homepage.mdx +++ b/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: [] source: "https://git.martials.no/martials/martials.no" createdAt: "2024-09-22" updatedAt: "2025-02-15" diff --git a/src/content/projects/sb1budget.mdx b/src/content/projects/sb1budget.mdx new file mode 100644 index 0000000..f94dd4e --- /dev/null +++ b/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? + +Actual Budget is an open-source budgeting platform, it can very simply be self-hosted and accessed throught the browser. +While Sparebank1 is a Norwegian bank, with a great developer experience 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. + +
+ +## The techy stuff + +Since the Actual Budget API 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. + +
+ +### 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. + +
+ +```ts +export interface Bank { + fetchTransactions: ( + interval: Interval, + ...accountKeys: ReadonlyArray + ) => Promise> + + shutdown: () => Promise | void +} +``` + +
+ +### 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. + +
+ +### 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. + +
+ +```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 +``` + +
+ +## 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. diff --git a/src/pages/en/projects/[project].astro b/src/pages/en/projects/[project].astro index 225c1da..f879eff 100644 --- a/src/pages/en/projects/[project].astro +++ b/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 diff --git a/src/pages/en/projects/index.astro b/src/pages/en/projects/index.astro index e66cc42..f83d8f5 100644 --- a/src/pages/en/projects/index.astro +++ b/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") --- - + diff --git a/src/pages/projects/[project].astro b/src/pages/projects/[project].astro index 225c1da..f879eff 100644 --- a/src/pages/projects/[project].astro +++ b/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 diff --git a/src/pages/projects/index.astro b/src/pages/projects/index.astro index ff76802..ee450ee 100644 --- a/src/pages/projects/index.astro +++ b/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") --- - +