From cb002523646c73150a600b53609f0987d6a6450c Mon Sep 17 00:00:00 2001
From: Martin Berg Alstad <git@martials.no>
Date: Sat, 15 Feb 2025 14:59:32 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Format=20files,=20Added=20codebe?=
=?UTF-8?q?rg=20to=20links,lighter=20colour=20for=20linkcards?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
messages/en.json | 1 +
messages/nb.json | 1 +
src/components/ContactMeForm.astro | 12 +++++--
src/components/Footer.astro | 2 +-
src/components/Greeting.astro | 11 ++++--
src/components/LanguageButtonGroup.astro | 8 +++--
src/components/Select.svelte | 1 -
src/components/UsesPage.svelte | 23 +++++++++----
src/components/collapse/Collapse.svelte | 5 +--
src/components/collapse/CollapseList.svelte | 4 +--
src/components/icons/Gitea.astro | 2 +-
src/components/links/ExternalLink.astro | 8 ++++-
src/components/myLinks/LinkCard.astro | 2 +-
src/components/myLinks/myLinks.ts | 36 ++++++++++++--------
src/components/projects/MyProjectsPage.astro | 9 ++---
src/components/projects/ProjectPage.astro | 2 +-
src/content/config.ts | 10 +++---
src/layouts/Layout.astro | 32 ++++++++---------
src/links.ts | 12 +++----
src/pages/en/links.astro | 3 +-
src/pages/en/projects/[project].astro | 2 +-
src/pages/en/projects/index.astro | 2 +-
src/pages/en/uses.astro | 2 +-
src/pages/index.astro | 1 -
src/pages/links.astro | 3 +-
src/pages/projects/[project].astro | 2 +-
src/styles/global.css | 32 ++++++++---------
src/types/icons.ts | 12 ++++++-
src/types/props.ts | 6 ++--
src/utils/linking.ts | 8 ++---
30 files changed, 151 insertions(+), 103 deletions(-)
diff --git a/messages/en.json b/messages/en.json
index cbd1ac5..e065450 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -13,6 +13,7 @@
"sourceCode": "Source code",
"createdAt": "Created at",
"updatedAt": "Updated at",
+ "forMirrors": "For mirrors of Gitea",
"forPersonalProjects": "For personal projects",
"status": "Status",
"name": "Name",
diff --git a/messages/nb.json b/messages/nb.json
index ae228b5..49c6ccd 100644
--- a/messages/nb.json
+++ b/messages/nb.json
@@ -13,6 +13,7 @@
"sourceCode": "Kildekode",
"createdAt": "Opprettet",
"updatedAt": "Oppdatert",
+ "forMirrors": "For mirrors av Gitea",
"forPersonalProjects": "For personlige prosjekter",
"status": "Status",
"name": "Navn",
diff --git a/src/components/ContactMeForm.astro b/src/components/ContactMeForm.astro
index 84f0970..911e351 100644
--- a/src/components/ContactMeForm.astro
+++ b/src/components/ContactMeForm.astro
@@ -4,14 +4,20 @@ import * as m from "@/paraglide/messages.js"
// TODO self-host email server
---
-<form class="flex flex-col gap-2 max-w-[500px] mx-auto" method="post" action="https://formspree.io/f/mknykgbn">
+<form
+ class="flex flex-col gap-2 max-w-[500px] mx-auto"
+ method="post"
+ action="https://formspree.io/f/mknykgbn"
+>
<Input label={m.name()} type="text" name="name" required />
<Input label={m.subject()} name="subject" required />
<Input label={m.email()} name="_replyto" />
- <input name="_gotcha" type="text" class={"hidden"} /> { /*Honeypot spam filter*/}
+ <input name="_gotcha" type="text" class={"hidden"} />
+ {/*Honeypot spam filter*/}
<label class="flex flex-col">
{m.message()}
- <textarea name="message" class="textarea textarea-bordered" required></textarea>
+ <textarea name="message" class="textarea textarea-bordered" required
+ ></textarea>
</label>
<button type="submit">{m.send()}</button>
</form>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 03b25c1..7228ef4 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -9,7 +9,7 @@ import * as m from "@/paraglide/messages"
const giteaLink = `${GIT_URL}/martials/martials.no`
---
-<div class="divider" />
+<div class="divider"></div>
<div class="py-5 flex flex-row gap-1 justify-around w-full items-center">
<div>
<GiteaLink href={giteaLink} />
diff --git a/src/components/Greeting.astro b/src/components/Greeting.astro
index 7927167..6f8e75a 100644
--- a/src/components/Greeting.astro
+++ b/src/components/Greeting.astro
@@ -16,7 +16,14 @@ import "@/styles/global.css"
</h1>
<p class="mx-1 sm:my-10">{m.aboutMe()}</p>
</div>
- <Image src={me} alt="Me on a hike" width="400" height="400" class="p-5 mx-auto" loading={"eager"} />
+ <Image
+ src={me}
+ alt="Me on a hike"
+ width="400"
+ height="400"
+ class="p-5 mx-auto"
+ loading={"eager"}
+ />
</div>
<!-- Mastodon verification -->
-<a rel="me" href="https://snabelen.no/@Martials" class="hidden">Mastodon</a>
\ No newline at end of file
+<a rel="me" href="https://snabelen.no/@Martials" class="hidden">Mastodon</a>
diff --git a/src/components/LanguageButtonGroup.astro b/src/components/LanguageButtonGroup.astro
index ba09225..cae9281 100644
--- a/src/components/LanguageButtonGroup.astro
+++ b/src/components/LanguageButtonGroup.astro
@@ -6,6 +6,10 @@ const currentPath = resolvePathname(Astro.url.pathname)
---
<div class="join">
- <LocaleLink to={currentPath as NavLink} lang="nb" class="btn join-item">Norsk</LocaleLink>
- <LocaleLink to={currentPath as NavLink} lang="en" class="btn join-item">English</LocaleLink>
+ <LocaleLink to={currentPath as NavLink} lang="nb" class="btn join-item"
+ >Norsk</LocaleLink
+ >
+ <LocaleLink to={currentPath as NavLink} lang="en" class="btn join-item"
+ >English</LocaleLink
+ >
</div>
diff --git a/src/components/Select.svelte b/src/components/Select.svelte
index a50d0df..47a475f 100644
--- a/src/components/Select.svelte
+++ b/src/components/Select.svelte
@@ -1,5 +1,4 @@
<script lang="ts">
-
// TODO move to types?
interface Option<Key> {
key: Key
diff --git a/src/components/UsesPage.svelte b/src/components/UsesPage.svelte
index 5a3ba37..d002404 100644
--- a/src/components/UsesPage.svelte
+++ b/src/components/UsesPage.svelte
@@ -5,31 +5,40 @@
import type { CollectionEntry } from "astro:content"
interface Props {
- uses: CollectionEntry<'uses'>[]
+ uses: CollectionEntry<"uses">[]
}
const { uses }: Props = $props()
const hardwareOptions = uses.map((item) => ({
key: item.id,
- value: item.data.title
+ value: item.data.title,
}))
let selectedHardwareKey = $state(uses[0].id)
- let selectedHardware = $derived(uses.find((item) => item.id === selectedHardwareKey)!)
-
+ let selectedHardware = $derived(
+ uses.find((item) => item.id === selectedHardwareKey)!,
+ )
+ // TODO set url query param to selected hardware
</script>
<div class="px-2 max-w-[750px] sm:min-w-[750px] w-screen">
<h1 class="text-center">{m.uses()}</h1>
<div>
- <Select options={hardwareOptions} bind:selected={selectedHardwareKey} class="mx-auto w-max" />
+ <Select
+ options={hardwareOptions}
+ bind:selected={selectedHardwareKey}
+ class="mx-auto w-max"
+ />
</div>
<br />
<CollapseList items={selectedHardware.data.hardware} title={m.hardware()} />
<div class="my-2"></div>
- {#if (selectedHardware.data.accessories)}
- <CollapseList items={selectedHardware.data.accessories} title={m.accessories()} />
+ {#if selectedHardware.data.accessories}
+ <CollapseList
+ items={selectedHardware.data.accessories}
+ title={m.accessories()}
+ />
{/if}
</div>
diff --git a/src/components/collapse/Collapse.svelte b/src/components/collapse/Collapse.svelte
index 5021914..ba7b843 100644
--- a/src/components/collapse/Collapse.svelte
+++ b/src/components/collapse/Collapse.svelte
@@ -1,8 +1,9 @@
<script lang="ts">
+ import type { Snippet } from "svelte"
interface Props {
title?: string
- children: any
+ children: Snippet
}
const { title = "", children }: Props = $props()
@@ -13,4 +14,4 @@
<div class="collapse-content">
{@render children()}
</div>
-</details>
\ No newline at end of file
+</details>
diff --git a/src/components/collapse/CollapseList.svelte b/src/components/collapse/CollapseList.svelte
index 7dd9c90..fb74942 100644
--- a/src/components/collapse/CollapseList.svelte
+++ b/src/components/collapse/CollapseList.svelte
@@ -9,10 +9,10 @@
const { items = [], title = "" }: Props = $props()
</script>
-<Collapse title={title}>
+<Collapse {title}>
<ul>
{#each items as item}
<li class="list-disc ml-5">{item}</li>
{/each}
</ul>
-</Collapse>
\ No newline at end of file
+</Collapse>
diff --git a/src/components/icons/Gitea.astro b/src/components/icons/Gitea.astro
index e03339f..061d284 100644
--- a/src/components/icons/Gitea.astro
+++ b/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" class={clazz} />
diff --git a/src/components/links/ExternalLink.astro b/src/components/links/ExternalLink.astro
index 94d30ea..2aeb7bf 100644
--- a/src/components/links/ExternalLink.astro
+++ b/src/components/links/ExternalLink.astro
@@ -7,6 +7,12 @@ interface Props extends LinkProps {
const { href, noStyle = false, class: clazz, ...props } = Astro.props
---
-<a href={href} target="_blank" rel="noopener" class:list={[noStyle ? "" : "link", clazz]} {...props}>
+<a
+ href={href}
+ target="_blank"
+ rel="noopener"
+ class:list={[noStyle ? "" : "link", clazz]}
+ {...props}
+>
<slot />
</a>
diff --git a/src/components/myLinks/LinkCard.astro b/src/components/myLinks/LinkCard.astro
index 8a9851f..48a9b60 100644
--- a/src/components/myLinks/LinkCard.astro
+++ b/src/components/myLinks/LinkCard.astro
@@ -11,7 +11,7 @@ const { title, message, url, icon, class: clazz } = Astro.props
---
<ExternalLink href={url} noStyle>
- <div class:list={["card bg-neutral", clazz]}>
+ <div class:list={["card bg-base-300", clazz]}>
<div class="card-body p-5 flex flex-row items-center">
<PajamasIcon name={icon ?? "pajamas:link"} class="w-6 h-6" />
<div>
diff --git a/src/components/myLinks/myLinks.ts b/src/components/myLinks/myLinks.ts
index 3de998b..823cf5a 100644
--- a/src/components/myLinks/myLinks.ts
+++ b/src/components/myLinks/myLinks.ts
@@ -3,44 +3,50 @@ import { GIT_URL } from "astro:env/client"
import * as m from "@/paraglide/messages"
export interface MyLink {
- title: string;
- url: string;
- message?: string;
+ title: string
+ url: string
+ message?: string
icon?: PajamasIcon
}
export default [
{
- title: "GitHub",
- url: "https://github.com/emberal",
- icon: "pajamas:github"
+ title: "Codeberg",
+ url: "https://codeberg.org/martials",
+ message: m.forMirrors(),
+ icon: "pajamas:git",
},
{
title: "Gitea",
url: `${GIT_URL}/martials`,
message: m.forPersonalProjects(),
- icon: "pajamas:gitea"
+ icon: "pajamas:gitea",
+ },
+ {
+ title: "GitHub",
+ url: "https://github.com/emberal",
+ icon: "pajamas:github",
},
{
title: "LinkedIn",
url: "https://www.linkedin.com/in/martin-b-2a69391a3/",
- icon: "pajamas:linkedin"
+ icon: "pajamas:linkedin",
},
{
- title: "Mastodon (Snabelen)",
+ title: "Mastodon (Snabelen.no)",
url: "https://snabelen.no/@Martials",
- icon: "pajamas:mastodon"
+ icon: "pajamas:mastodon",
},
{
title: "Pixelfed",
- url: "https://pixelfed.social/i/web/profile/261454857934868480"
+ url: "https://pixelfed.social/i/web/profile/261454857934868480",
},
{
title: "Steam",
- url: "https://steamcommunity.com/id/martials/"
+ url: "https://steamcommunity.com/id/martials/",
},
{
title: "Trakt.tv",
- url: "https://trakt.tv/users/martials"
- }
-] satisfies MyLink[]
+ url: "https://trakt.tv/users/martials",
+ },
+] as MyLink[]
diff --git a/src/components/projects/MyProjectsPage.astro b/src/components/projects/MyProjectsPage.astro
index 412a492..0e0175d 100644
--- a/src/components/projects/MyProjectsPage.astro
+++ b/src/components/projects/MyProjectsPage.astro
@@ -17,10 +17,7 @@ const baseUrl: NavLink = "/projects"
<div class="flex flex-wrap justify-around">
{
projects.map(
- ({
- data: { title, description, tags, heroImage, heroImageAlt },
- id
- }) => (
+ ({ data: { title, description, tags, heroImage, heroImageAlt }, id }) => (
<div class="my-5 px-2">
<ProjectCard
title={title}
@@ -31,7 +28,7 @@ const baseUrl: NavLink = "/projects"
imageAlt={heroImageAlt}
/>
</div>
- )
+ ),
)
}
-</div>
\ No newline at end of file
+</div>
diff --git a/src/components/projects/ProjectPage.astro b/src/components/projects/ProjectPage.astro
index 3bd65c0..4e44967 100644
--- a/src/components/projects/ProjectPage.astro
+++ b/src/components/projects/ProjectPage.astro
@@ -24,7 +24,7 @@ const {
heroImageAlt,
source,
createdAt,
- updatedAt
+ updatedAt,
} = entry!.data
---
diff --git a/src/content/config.ts b/src/content/config.ts
index 5f934ca..f83f1a5 100644
--- a/src/content/config.ts
+++ b/src/content/config.ts
@@ -12,8 +12,8 @@ const projectCollection = defineCollection({
tags: z.array(z.string()),
source: z.string(),
createdAt: z.string(),
- updatedAt: z.string()
- })
+ updatedAt: z.string(),
+ }),
})
const usesCollection = defineCollection({
@@ -21,11 +21,11 @@ const usesCollection = defineCollection({
schema: z.object({
title: z.string(),
accessories: z.optional(z.array(z.string())),
- hardware: z.array(z.string())
- })
+ hardware: z.array(z.string()),
+ }),
})
export const collections = {
projects: projectCollection,
- uses: usesCollection
+ uses: usesCollection,
}
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 1513020..9d1ea0e 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -12,20 +12,20 @@ const { title, class: clazz } = Astro.props
<!doctype html>
<html lang={languageTag()} dir={"ltr"}>
-<head>
- <meta charset="UTF-8" />
- <meta name="description" content="Astro description" />
- <meta name="viewport" content="width=device-width" />
- <link rel="sitemap" href="/sitemap-index.xml" />
- <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
- <meta name="generator" content={Astro.generator} />
- <title>{title}</title>
-</head>
-<body class="flex flex-col h-screen">
-<Navbar />
-<main class:list={["grow", clazz]}>
- <slot />
-</main>
-<Footer />
-</body>
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="description" content="Astro description" />
+ <meta name="viewport" content="width=device-width" />
+ <link rel="sitemap" href="/sitemap-index.xml" />
+ <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+ <meta name="generator" content={Astro.generator} />
+ <title>{title}</title>
+ </head>
+ <body class="flex flex-col h-screen">
+ <Navbar />
+ <main class:list={["grow", clazz]}>
+ <slot />
+ </main>
+ <Footer />
+ </body>
</html>
diff --git a/src/links.ts b/src/links.ts
index 10efba2..90e9017 100644
--- a/src/links.ts
+++ b/src/links.ts
@@ -9,24 +9,24 @@ interface Link {
const Links: Link[] = [
{
label: m.home,
- to: "/"
+ to: "/",
},
{
label: m.myProjects,
- to: "/projects"
+ to: "/projects",
},
{
label: m.myLinks,
- to: "/links"
+ to: "/links",
},
{
label: m.uses,
- to: "/uses"
+ to: "/uses",
},
{
label: m.contactMe,
- to: "/contact"
- }
+ to: "/contact",
+ },
]
export default Links
diff --git a/src/pages/en/links.astro b/src/pages/en/links.astro
index b08c922..6cbacb8 100644
--- a/src/pages/en/links.astro
+++ b/src/pages/en/links.astro
@@ -3,6 +3,7 @@ import Layout from "@/layouts/Layout.astro"
import LinksPage from "@/components/myLinks/LinksPage.astro"
import "@/styles/global.css"
---
+
<Layout title="My links">
<LinksPage />
-</Layout>
\ No newline at end of file
+</Layout>
diff --git a/src/pages/en/projects/[project].astro b/src/pages/en/projects/[project].astro
index 2793ab6..8bccfa6 100644
--- a/src/pages/en/projects/[project].astro
+++ b/src/pages/en/projects/[project].astro
@@ -10,7 +10,7 @@ export function getStaticPaths(): GetStaticPathsResult {
return [
{ params: { project: "hvl-ics-simplifier" } },
{ params: { project: "homepage" } },
- { params: { project: "simplify-truths" } }
+ { params: { project: "simplify-truths" } },
]
}
diff --git a/src/pages/en/projects/index.astro b/src/pages/en/projects/index.astro
index 5577aef..e66cc42 100644
--- a/src/pages/en/projects/index.astro
+++ b/src/pages/en/projects/index.astro
@@ -9,4 +9,4 @@ const projects = await getCollection("projects")
<Layout title="Projects">
<MyProjectsPage projects={projects} />
-</Layout>
\ No newline at end of file
+</Layout>
diff --git a/src/pages/en/uses.astro b/src/pages/en/uses.astro
index afc4c0f..17a61b5 100644
--- a/src/pages/en/uses.astro
+++ b/src/pages/en/uses.astro
@@ -8,5 +8,5 @@ const uses = await getCollection("uses")
---
<Layout title="Hardware" class="mx-auto max-w-[750px]">
- <UsesPage server:defer uses={uses} />
+ <UsesPage client:load uses={uses} />
</Layout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 83fcdf9..5d8d176 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -3,7 +3,6 @@ import Layout from "../layouts/Layout.astro"
import Greeting from "../components/Greeting.astro"
// https://slashpages.net/
-
---
<Layout title="Velkommen">
diff --git a/src/pages/links.astro b/src/pages/links.astro
index 4e6dec2..980bfe1 100644
--- a/src/pages/links.astro
+++ b/src/pages/links.astro
@@ -3,6 +3,7 @@ import Layout from "@/layouts/Layout.astro"
import LinksPage from "@/components/myLinks/LinksPage.astro"
import "@/styles/global.css"
---
+
<Layout title="Mine lenker">
<LinksPage />
-</Layout>
\ No newline at end of file
+</Layout>
diff --git a/src/pages/projects/[project].astro b/src/pages/projects/[project].astro
index 2793ab6..8bccfa6 100644
--- a/src/pages/projects/[project].astro
+++ b/src/pages/projects/[project].astro
@@ -10,7 +10,7 @@ export function getStaticPaths(): GetStaticPathsResult {
return [
{ params: { project: "hvl-ics-simplifier" } },
{ params: { project: "homepage" } },
- { params: { project: "simplify-truths" } }
+ { params: { project: "simplify-truths" } },
]
}
diff --git a/src/styles/global.css b/src/styles/global.css
index 174e496..a55637e 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -3,26 +3,26 @@
@plugin "daisyui";
@layer utilities {
- .debug {
- @apply border border-red-500;
- }
+ .debug {
+ @apply border border-red-500;
+ }
}
@layer base {
- br {
- @apply my-0.5;
- }
+ br {
+ @apply my-0.5;
+ }
- h1 {
- @apply text-4xl font-bold mb-2;
- }
+ h1 {
+ @apply text-4xl font-bold mb-2;
+ }
- h2 {
- @apply text-3xl font-bold mb-2;
- }
+ h2 {
+ @apply text-3xl font-bold mb-2;
+ }
- /* TODO change default style*/
- a {
- @apply link
- }
+ /* TODO change default style*/
+ a {
+ @apply link;
+ }
}
diff --git a/src/types/icons.ts b/src/types/icons.ts
index f44c26a..0ca48cf 100644
--- a/src/types/icons.ts
+++ b/src/types/icons.ts
@@ -1,3 +1,13 @@
-export type Icon = "gitea" | "github" | "mastodon" | "linkedin" | "link" | "status-health"
+/**
+ * @see https://icon-sets.iconify.design/pajamas/
+ */
+export type Icon =
+ | "git"
+ | "gitea"
+ | "github"
+ | "mastodon"
+ | "linkedin"
+ | "link"
+ | "status-health"
export type PajamasIcon = `pajamas:${Icon}`
diff --git a/src/types/props.ts b/src/types/props.ts
index a8c0fed..dc013e7 100644
--- a/src/types/props.ts
+++ b/src/types/props.ts
@@ -1,8 +1,8 @@
export interface ComponentProps {
- class?: string;
- title?: string;
+ class?: string
+ title?: string
}
export interface LinkProps extends ComponentProps {
- href: string;
+ href: string
}
diff --git a/src/utils/linking.ts b/src/utils/linking.ts
index 5ca3688..aac1a06 100644
--- a/src/utils/linking.ts
+++ b/src/utils/linking.ts
@@ -7,7 +7,7 @@ interface TranslatedPathnames {
}
export type NavLink =
- "/"
+ | "/"
| "/contact"
| "/projects"
| `/projects/${Project["id"]}`
@@ -19,7 +19,7 @@ const paths: Set<NavLink> = new Set([
"/contact",
"/projects",
"/links",
- "/uses"
+ "/uses",
])
/**
@@ -33,13 +33,13 @@ const pathnames: Record<AbsolutePathname, TranslatedPathnames> = {}
for (const path of paths) {
pathnames[path] = {
nb: path,
- en: `/en${path}`
+ en: `/en${path}`,
}
}
export function localizePathname(
pathname: NavLink,
- locale: AvailableLanguageTag
+ locale: AvailableLanguageTag,
): string {
const pathnameParts = pathname.split("/")
const firstSegment: AbsolutePathname = `/${pathnameParts[1]}`