feat: add external link to articles

src/components/HeroCard.astro

@@ -15,7 +15,7 @@ interface Props {
 }
 
 const {
-  data: { title, cover, icon, date, rating },
+  data: { title, cover, icon, date, rating, author },
   collection,
   body,
   id,
@@ -32,7 +32,12 @@ const link = translatePath(`/${collection}/${id.split("/")[0]}`);
   <Card.Content classes="px-8 py-7 order-last xs:order-first">
     {
       (date || body || rating !== undefined) && (
-      <Card.Metadata date={date} readDuration={readDuration(body)} rating={rating} />
+        <Card.Metadata
+          date={date}
+          readDuration={readDuration(body)}
+          rating={rating}
+          author={author}
+        />
       )
     }
     <Card.Title classes="text-4xl flex items-center gap-2">

src/components/card/Metadata.svelte

@@ -2,6 +2,7 @@
   export let date: string | Date;
   export let readDuration: number | undefined;
   export let rating: string | number | undefined;
+  export let author: string | undefined;
 
   const toDate = (d: string | Date) =>
     typeof d === "string" ? new Date(d) : d;
@@ -33,19 +34,28 @@
   };
 </script>
 
-<div class="flex gap-5">
+<div class="flex gap-3 wrapper">
+  {#if rating}
+    <div class="text-sm bg-light">{formatRating(rating)}</div>
+  {/if}
   {#if date}
-    <time class="text-sm text-neutral" datetime={iso(date)}
+    <time class="text-sm bg-light" datetime={iso(date)}
       >{formatDate(date)}</time>
   {/if}
-
-  {#if typeof readDuration === "number"}
   {#if readDuration > 1}
-      <div class="text-sm text-neutral">{readDuration} mins read</div>
+    <div class="text-sm bg-light">{readDuration} mins read</div>
   {/if}
-  {/if}
-
-  {#if rating}
-    <div class="text-sm text-neutral">{formatRating(rating)}</div>
+  {#if author}
+    <div class="text-sm bg-light">{author}</div>
   {/if}
 </div>
+
+
+<style>
+  .wrapper > * {
+    padding: 2px 11px;
+    border-radius: 14px;
+    font-size: 11px;
+    opacity: 0.7;
+  }
+</style>

src/content.config.ts

@@ -12,6 +12,7 @@ const defaultSchema = ({ image }: { image: ImageFunction }) =>
     toc: z.boolean().optional(),
     description: z.string().optional(),
     icon: z.string().optional(),
+    author: z.string().optional(),
     draft: z.boolean().optional(),
     featured: z.boolean().optional(),
     tags: z.array(z.string()).optional(),

src/helpers/memorium.ts

@@ -20,10 +20,13 @@ export type MemoriumDir = {
 
 export type MemoriumEntry = MemoriumFile | MemoriumDir;
 
+// const SERVER_URL = "https://marka.max-richter.dev";
+const SERVER_URL = "http://localhost:8080";
+
 export async function listResource(
   id: string,
 ): Promise<MemoriumEntry | undefined> {
-  const url = `https://marka.max-richter.dev/resources/${id}`;
+  const url = `${SERVER_URL}/resources/${id}`;
   try {
     const response = await fetch(url);
     if (response.ok) {
@@ -52,7 +55,7 @@ export function getImageUrl(input: string): string {
     return input;
   }
   if (input.startsWith("/")) {
-    return `https://marka.max-richter.dev${input}`;
+    return `${SERVER_URL}${input}`;
   }
-  return `https://marka.max-richter.dev/${input}`;
+  return `${SERVER_URL}/${input}`;
 }

src/i18n/ui.ts

@@ -53,7 +53,7 @@ export const ui = {
     "toc.title": "Inhaltsverzeichnis",
     "articles": "📰 Artikel",
     "articles.description":
-      "Random Artikel die mich beim lesen beindruckt haben",
+      "Random Artikel die mich beim Lesen beindruckt haben",
     "movies": "🎥 Filme",
     "movies.description":
       "Gesehen, nicht gesehen, für gut befunden, für schlecht befunden.",

src/pages/resources/[resourceType]/[resourceName].astro

@@ -43,6 +43,7 @@ const resource = await memorium.listResource(
       href={path("/resources/" + resourceType)}>
       <span class="i-tabler-arrow-left"></span> back
     </a>
+    {resource?.content?.url && <a class="flex gap-1 items-center"href={resource?.content?.url}>link<span class="inline-block w-3 h-3 i-tabler-external-link"/></a>}
     <div class="date opacity-50">
       {
         resource?.content.datePublished?.toLocaleString("en-US", {

src/pages/resources/[resourceType]/index.astro

@@ -3,7 +3,7 @@ import Layout from "@layouts/Layout.astro";
 import HeroCard from "@components/HeroCard.astro";
 import * as memorium from "@helpers/memorium";
 import { resources as resourceTypes } from "../resources.ts";
-import {useTranslations} from "@i18n/utils";
+import { useTranslations } from "@i18n/utils";
 
 const { resourceType } = Astro.params;
 
@@ -34,7 +34,6 @@ function isValidResource(res) {
 }
 ---
 
-
 <Layout title="Max Richter">
   <h1 class="text-4xl mb-4">{t(resourceType)}</h1>
   <p>{t(`${resourceType as "articles"}.description`)}</p>
@@ -47,8 +46,12 @@ function isValidResource(res) {
             collection: "resources/" + resourceType,
             id: resource.name.replace(/\.md$/, ""),
             data: {
-              title: resource?.content?.name ?? resource?.content?.headline ?? resource.content?.itemReviewed?.name,
+              title:
+                resource?.content?.name ??
+                resource?.content?.headline ??
+                resource.content?.itemReviewed?.name,
               date: resource?.content?.datePublished,
+              author: resource?.content?.author?.name,
               rating: resource?.content?.reviewRating?.ratingValue,
               cover: {
                 src: memorium.getImageUrl(resource.content.image),