add anniversary, add opengraph

josholaus · Apr 6, 2024 · 816affe · 816affe
1 parent 5e56a16
commit 816affe
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 22 deletions.
diff --git a/app/src/components/quote.svelte b/app/src/components/quote.svelte
@@ -1,35 +1,41 @@
 <script lang="ts">
+    import { formatDate, getAnniversaryYears } from '$lib/date'
     import type { PageData } from '../routes/$types'
-    import Card from './ui/card.svelte'
     import ExternalIcon from './icons/external-icon.svelte'
+    import Card from './ui/card.svelte'
     type Quote = PageData['quotes'][0]
 
     export let quote: Quote
+
+    $: anniversaryYears = getAnniversaryYears(new Date(quote.timestamp))
 </script>
 
 <Card>
     <svelte:fragment slot="content">
         <span class="font-serif text-8xl text-zinc-300">”</span>
         <p class="whitespace-pre-line text-lg italic">{quote.content}</p>
     </svelte:fragment>
-    <div slot="footer" class="flex flex-col items-center space-x-2 space-y-2 text-neutral-400 md:flex-row md:space-y-0">
-        <span>Festgehalten von</span>
-        <div class="flex space-x-2">
-            <img class="h-6 rounded-full" src={quote.creator?.avatar} alt={`${quote.creator?.name}'s avatar`} />
-            <span>{quote.creator?.name}</span>
+
+    <svelte:fragment slot="footer">
+        <div class="flex flex-col items-center space-x-2 space-y-2 text-neutral-400 md:flex-row md:space-y-0">
+            <span>Festgehalten von</span>
+            <div class="flex space-x-2">
+                <img class="h-6 rounded-full" src={quote.creator?.avatar} alt={`${quote.creator?.name}'s avatar`} />
+                <span>{quote.creator?.name}</span>
+            </div>
+            <span>
+                am{' '}
+                {formatDate(new Date(quote.timestamp))}
+            </span>
+            <a
+                href="/quote/{quote._id?.toString()}"
+                class="hover:text-neutral-300"
+                title="Direktlink besuchen"
+                target="_blank"><ExternalIcon /></a>
         </div>
-        <span>
-            am{' '}
-            {new Date(quote.timestamp).toLocaleDateString('de-AT', {
-                year: 'numeric',
-                month: 'long',
-                day: 'numeric',
-            })}
-        </span>
-        <a
-            href="/quote/{quote._id?.toString()}"
-            class="hover:text-neutral-300"
-            title="Direktlink besuchen"
-            target="_blank"><ExternalIcon /></a>
-    </div>
+        {#if anniversaryYears !== null}
+            <span class="font-semibold text-neutral-400"
+                >Heute vor {anniversaryYears} Jahr{anniversaryYears !== 1 ? 'en' : ''} 🎉</span>
+        {/if}
+    </svelte:fragment>
 </Card>
diff --git a/app/src/components/ui/card.svelte b/app/src/components/ui/card.svelte
@@ -5,7 +5,7 @@
     <div class="flex items-center space-x-4 px-8 pt-8">
         <slot name="content" />
     </div>
-    <div class="flex items-center justify-center p-6">
+    <div class="flex flex-col items-center justify-center p-6 space-y-2">
         <slot name="footer" />
     </div>
 </div>
diff --git a/app/src/lib/date.ts b/app/src/lib/date.ts
@@ -0,0 +1,15 @@
+export const getAnniversaryYears = (created: Date) => {
+    const today = new Date()
+    if (created.getDate() === today.getDate() && created.getMonth() === today.getMonth()) {
+        return today.getFullYear() - created.getFullYear()
+    }
+    return null
+}
+
+export const formatDate = (date: Date) => {
+    return date.toLocaleDateString('de-AT', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+    })
+}
diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { getAnniversaryYears } from '$lib/date'
     import Quote from '../components/quote.svelte'
     import TextInput from '../components/ui/textinput.svelte'
     import type { PageData } from './$types'
@@ -10,6 +11,23 @@
     $: filteredQuotes = data.quotes.filter((quote) => {
         return quote.content.toLowerCase().includes(searchValue.toLowerCase())
     })
+
+    $: filteredQuotes.sort((a, b) => {
+        const aDate = new Date(a.timestamp);
+        const bDate = new Date(b.timestamp);
+        const aYears = getAnniversaryYears(aDate);
+        const bYears = getAnniversaryYears(bDate);
+        if (aYears !== null && bYears === null) {
+            return -1
+        }
+        if (aYears === null && bYears !== null) {
+            return 1
+        }
+        if (aYears !== null && bYears !== null) {
+            return aYears - bYears
+        }
+        return bDate.getTime() - aDate.getTime()
+    })
 </script>
 
 <TextInput placeholder="Suche ..." bind:value={searchValue} />

diff --git a/app/src/routes/quote/[slug]/+page.svelte b/app/src/routes/quote/[slug]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { formatDate } from '$lib/date'
     import Quote from '../../../components/quote.svelte'
     import type { PageData } from './$types'
 
@@ -7,7 +8,12 @@
 </script>
 
 <svelte:head>
-    <title>doofus-rick - {quote.content.substring(0, 25)}...</title>
+    <meta property="og:title" content="doofus-rick Zitat vom {formatDate(new Date(quote.timestamp))}" />
+    <meta property="og:description" content="{quote.content}" />
+    <meta property="og:url" content={`https://doofus-rick.com/quote/${quote._id?.toString()}`} />
+    <meta property="og:image" content={quote.creator?.avatar} />
+    <meta property="og:image:alt" content={`${quote.creator?.name}'s avatar`} />
+    <meta property="og:type" content="article" />
 </svelte:head>
 
 <Quote {quote} />