run linter and adjust config

.woodpecker/build.yml

@@ -1,11 +0,0 @@
-steps:
-  - name: Build and Push Image
-    when:
-    - event: push
-      branch: main
-    image: woodpeckerci/plugin-docker-buildx
-    settings:
-      repo: registry.lio.systems/wrath
-      registry: registry.lio.systems
-      dockerfile: Dockerfile
-      tag: dev

Dockerfile

@@ -21,4 +21,5 @@ FROM base AS release
 COPY --from=install /temp/prod/node_modules node_modules
 COPY --from=build /usr/src/app/dist .
 
+EXPOSE 4321
 ENTRYPOINT [ "bun", "run", "./server/entry.mjs" ]

astro.config.mjs

@@ -19,7 +19,7 @@ import node from "@astrojs/node";
 export default defineConfig({
   output: "static",
   prefetch: true,
-  site: import.meta.env.PROD ? "https://lio.cat" : 'http://localhost:4321',
+  site: import.meta.env.PROD === 'true' ? "https://lio.cat" : 'http://localhost:4321',
 
   markdown: {
     remarkRehype: {},

src/components/astro/header.astro

@@ -10,7 +10,7 @@ const config = lang === "de" ? de : en
 ---
 
 <header class="flex h-24 w-auto flex-row items-center justify-end pr-5">
-  <div class="flex items-center gap-6 dark:text-amber-400 text-blue-700">
+  <div class="flex items-center gap-6 text-blue-700 dark:text-amber-400">
     {
       config.rss && (
         <a

src/components/astro/nav.astro

@@ -8,7 +8,7 @@ const t = useTranslations(lang)
 const { home, archive, custom, links, about } =
   lang === "de" ? de.navigation : en.navigation
 
-  const linkClasses = `nav-links inline-block hover:underline hover:underline-offset-4 text-blue-700 dark:text-amber-400`
+const linkClasses = `nav-links inline-block hover:underline hover:underline-offset-4 text-blue-700 dark:text-amber-400`
 ---
 
 <nav>
@@ -40,7 +40,7 @@ const { home, archive, custom, links, about } =
       )
     }
   </div>
-  <div class="flex flex-row flex-wrap gap-4 text-lg pt-1">
+  <div class="flex flex-row flex-wrap gap-4 pt-1 text-lg">
     {
       custom?.map((tab) => (
         <a
@@ -56,7 +56,7 @@ const { home, archive, custom, links, about } =
       ))
     }
   </div>
-  
+
   {
     links && (
       <a

src/components/astro/recent-blogs.astro

@@ -8,17 +8,17 @@ const lang = getLangFromUrl(Astro.url)
 const t = useTranslations(lang)
 
 const allPosts = await getPostsByLocale(lang)
-const posts = allPosts.slice(0, common.latestPosts).filter(p => p.data.published)
+const posts = allPosts
+  .slice(0, common.latestPosts)
+  .filter((p) => p.data.published)
 ---
 
-<div class="my-8 text-xl font-medium md:my-8">{(posts.length > 0) && t("blog.latest")}</div>
+<div class="my-8 text-xl font-medium md:my-8">
-{ (posts.length > 0) && 
+  {posts.length > 0 && t("blog.latest")}
-  posts.map((post: any) => (
+</div>
-    <PostList
+{
-      post={post}
+  posts.length > 0 &&
-      lang={lang}
+    posts.map((post: any) => (
-      dateFormat="locale"
+      <PostList post={post} lang={lang} dateFormat="locale" dateWidth="w-32" />
-      dateWidth="w-32"
+    ))
-    />
-  ))
 }

src/config/index.ts

@@ -7,8 +7,7 @@ export const common = {
     url: "https://lio.cat",
   },
   googleAnalyticsId: "",
-  social: [
+  social: [],
-  ],
   rss: true,
   navigation: {
     home: true,
@@ -95,7 +94,6 @@ export const en = {
   },
   navigation: {
     ...common.navigation,
-    
   },
   pageMeta: {
     archive: {

src/content.config.ts

@@ -9,7 +9,7 @@ const postSchema = z.object({
   slug: z.string().optional(),
   tags: z.array(z.string()).optional(),
   published: z.boolean().optional().default(false),
-  lang: z.string().optional()
+  lang: z.string().optional(),
 })
 
 const enPostsCollection = defineCollection({
@@ -19,7 +19,7 @@ const enPostsCollection = defineCollection({
 
 const dePostsCollection = defineCollection({
   loader: glob({ pattern: "**/*.{md,mdx}", base: "src/content/posts/de" }),
-  schema: postSchema
+  schema: postSchema,
 })
 
 export const collections = {

src/layouts/base.astro

@@ -19,14 +19,14 @@ const urls = {
 
 const isPost = Astro.url.pathname.includes("posts")
 
-const ogImageURL = new URL(isPost ? urls.postURL : urls.general, Astro.site).href
+const ogImageURL = new URL(isPost ? urls.postURL : urls.general, Astro.site)
+  .href
 const permalink = new URL(Astro.url.pathname, Astro.site).href
 const config = lang === "de" ? de : en
 const title = isPost
-          ? `${post.title} - ${config.meta.title}`
+  ? `${post.title} - ${config.meta.title}`
-          : `${config.meta.description} - ${config.meta.title}`
+  : `${config.meta.description} - ${config.meta.title}`
 const description = isPost ? post.description : config.meta.description
-
 ---
 
 <!doctype html>
@@ -39,35 +39,20 @@ const description = isPost ? post.description : config.meta.description
       {title}
     </title>
     <meta name="generator" content={Astro.generator} />
-    <meta
+    <meta name="description" content={description} />
-      name="description"
-      content={description}
-    />
 
     <!-- Open Graph / Facebook -->
     <meta property="og:type" content="website" />
     <meta property="og:url" content={permalink} />
-    <meta
+    <meta property="og:title" content={title} />
-      property="og:title"
+    <meta property="og:description" content={description} />
-      content={title}
-    />
-    <meta
-      property="og:description"
-      content={description}
-    />
     <meta property="og:image" content={ogImageURL} />
 
     <!-- Twitter -->
     <meta property="twitter:card" content="summary_large_image" />
     <meta property="twitter:url" content={permalink} />
-    <meta
+    <meta property="twitter:title" content={title} />
-      property="twitter:title"
+    <meta property="twitter:description" content={description} />
-      content={title}
-    />
-    <meta
-      property="twitter:description"
-      content={description}
-    />
     <meta property="twitter:image" content={ogImageURL} />
 
     <script is:inline>

src/layouts/main.astro

@@ -5,32 +5,32 @@ import Navigation from "~/components/astro/nav.astro"
 import { de, en } from "~/config"
 import { getLangFromUrl } from "~/i18n/utils"
 import BaseLayout from "~/layouts/base.astro"
-import '@fontsource-variable/jetbrains-mono';
+import "@fontsource-variable/jetbrains-mono"
 
 const { title, description, post } = Astro.props
 const lang = getLangFromUrl(Astro.url)
 const config = lang === "de" ? de : en
 ---
 
-<BaseLayout
+<BaseLayout title={title} description={description} post={post}>
-  title={title}
+  <div class="flex w-full max-w-4xl flex-col p-2 pt-5">
-  description={description}
+    <div class="flex w-full items-center justify-end pb-4">
-  post={post}
->
-  <div class="flex w-full max-w-4xl flex-col pt-5 p-2">
-    <div class=" flex w-full items-center justify-end pb-4">
       <a href="/" aria-label={`${config.siteName}`} class="mr-auto">
         <!-- <div class="text-4xl font-semibold">{config.siteName}</div> -->
-         <img src="/images/general/logo-dark.png" alt="" class="dark:hidden">
+        <img src="/images/general/logo-dark.png" alt="" class="dark:hidden" />
-         <img src="/images/general/logo-light.png" alt="" class="hidden dark:block">
+        <img
+          src="/images/general/logo-light.png"
+          alt=""
+          class="hidden dark:block"
+        />
       </a>
       <Header />
     </div>
     <div class="flex w-full flex-col">
-      <aside class="flex flex-col ">
+      <aside class="flex flex-col">
         <Navigation />
       </aside>
-      <main class="max-auto mb-10 w-full max-w-3xl flex-1  pt-5">
+      <main class="max-auto mb-10 w-full max-w-3xl flex-1 pt-5">
         <slot />
       </main>
     </div>

src/pages/[lang]/posts/[...slug].astro

@@ -27,15 +27,14 @@ const lang = getLangFromUrl(Astro.url)
 const { post } = Astro.props
 
 const { Content } = await render(post)
-
 ---
 
-<MainLayout post={{...post.data}}>
+<MainLayout post={{ ...post.data }}>
   <article class="prose dark:prose-invert w-full max-w-3xl overflow-hidden">
     <div class="flex flex-col gap-2">
       <h2 class="!my-0 text-3xl font-semibold">{post.data.title}</h2>
       <div class="my-3 text-gray-500 dark:text-white/80">
-        {formatDate(post.data.pubDate, 'locale', lang)}
+        {formatDate(post.data.pubDate, "locale", lang)}
       </div>
     </div>
 

src/pages/[lang]/posts/[slug]/og.png.ts

@@ -25,7 +25,7 @@ export async function GET({ props }: Props) {
     width: 1200,
     height: 600,
     padding: 10,
-    color: '#FFB900'
+    color: "#FFB900",
   }
   const { post } = props
   const path = join(process.cwd(), "public", "fonts", "JetBrainsMono-Bold.ttf")
@@ -35,7 +35,7 @@ export async function GET({ props }: Props) {
   // Astro doesn't support tsx endpoints so usign React-element objects
   const html = {
     type: "div",
-    key: 'extra-margin',
+    key: "extra-margin",
     props: {
       style: {
         display: "flex",
@@ -97,7 +97,7 @@ export async function GET({ props }: Props) {
         },
       ],
     },
-  } as unknown as ReactElement;
+  } as unknown as ReactElement
 
   return new ImageResponse(html, {
     width: options.width,
@@ -112,4 +112,3 @@ export async function GET({ props }: Props) {
     ],
   })
 }
-

src/styles/tailwind.css

@@ -6,25 +6,27 @@
 @custom-variant light (&:where(.light, .light *));
 
 body {
-    font-family: 'JetBrains Mono Variable', monospace;
+  font-family: "JetBrains Mono Variable", monospace;
-  }
+}
 
-.nav-links, .markdown-link {
+.nav-links,
+.markdown-link {
   text-decoration: none;
   position: relative;
   padding-right: 1em;
 }
 
-.markdown-link::after, .nav-links::after {
+.markdown-link::after,
-    content: "↗";
+.nav-links::after {
-    position: absolute;
+  content: "↗";
-    right: 0.1em;
+  position: absolute;
-    top: 0;
+  right: 0.1em;
-    font-size: 1em;
+  top: 0;
-    line-height: 1;
+  font-size: 1em;
-    display: inline-block;
+  line-height: 1;
-  }
+  display: inline-block;
+}
 
-  a:hover {
+a:hover {
-    text-decoration: underline;
+  text-decoration: underline;
-  }
+}

src/utils/index.ts

@@ -5,15 +5,16 @@ import { twMerge } from "tailwind-merge"
 export const formatDate = (
   date: Date | string | undefined,
   format: string = "YYYY-MM-DD",
-  locale?:string
+  locale?: string,
 ): string => {
   const validDate = date ? new Date(date) : new Date()
 
-  if(format === "locale") return validDate.toLocaleString(locale, {
+  if (format === "locale")
-    day: "numeric",
+    return validDate.toLocaleString(locale, {
-    month: "long",
+      day: "numeric",
-    year: "numeric",
+      month: "long",
-  })
+      year: "numeric",
+    })
 
   const tokens: Record<string, string> = {
     YYYY: validDate.getFullYear().toString(),
@@ -34,8 +35,8 @@ export const getPostsByLocale = async (locale: string) => {
       : await getCollection("dePosts")
   // Add the locale to the data of each post
   posts.forEach((post: any) => {
-    post.data.lang = locale;
+    post.data.lang = locale
-  });
+  })
   return posts.sort(
     (a: any, b: any) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
   )

src/utils/plugins/components.ts

@@ -69,4 +69,3 @@ export function remarkCustomLinks(options: CustomLinkOptions = {}): Plugin {
     }
   }
 }
-