Edit Widgets folders

src/components/WidgetCard.astro

@@ -0,0 +1,13 @@
+---
+import {WidgetState} from '../models/WidgetState';
+type Props = {
+    widget: WidgetState
+}
+
+const {widget}: Props = Astro.props;
+---
+
+<a href={widget.url} class="p-4 rounded-2xl border-[1px] shadow-md active:scale-95 transition-all ease-in-out duration-100">
+    <h2 class="font-bold text-xl">{widget.data.name}</h2>
+    {widget.data.description && <p>{widget.data.description}</p>}
+</a>

src/components/WidgetCardList.astro

@@ -0,0 +1,13 @@
+---
+import {WidgetState} from '../models/WidgetState';
+import WidgetCard from './WidgetCard.astro';
+type Props = {
+    widgets: WidgetState[]
+}
+
+const {widgets}: Props = Astro.props;
+---
+
+<div class="flex gap-2">
+    {widgets.map(widget => <WidgetCard widget={widget}/>)}
+</div>

src/layouts/Card.astro

@@ -0,0 +1,3 @@
+<div class="p-4 rounded-2xl border-[1px] shadow-md">
+    <slot/>
+</div>

src/models/WidgetState.ts

@@ -0,0 +1,12 @@
+import type {AstroInstance} from 'astro';
+
+export interface WidgetState extends AstroInstance {
+  data: WidgetData
+}
+
+type WidgetData = {
+  name: string
+  description?: string
+  documentationUrl?: string
+  image?: string
+}

src/pages/countdown/index.astro

@@ -1,43 +0,0 @@
----
-
-import Layout from '../../layouts/Layout.astro';---
-
-<Layout title="Countdown">
-    <main class="w-screen h-screen flex flex-col justify-center items-center">
-        <h2 id="title" class="text-center text-xl font-bold"></h2>
-        <h3 id="display"></h3>
-    </main>
-</Layout>
-
-<script lang="ts" is:inline>
-  const titleElement = document.getElementById("title");
-  const displayElement = document.getElementById("display");
-
-  const queryString = window.location.search
-  const urlParams =  new URLSearchParams(queryString);
-
-  const titleParam = urlParams.get("title");
-  const datetimeParam = urlParams.get("datetime") ?? "";
-
-  titleElement.innerText = titleParam;
-  const date = new Date(datetimeParam)
-
-  const interval = setInterval(() => {
-    const now = new Date()
-    const diff = Math.floor(Math.abs(date.getTime() - now.getTime()) / 1000);
-    if (diff <= 0) clearInterval(interval);
-
-    const days = Math.floor(diff / 86400)
-    const hours = Math.floor(diff / 3600) % 24
-    const minutes = Math.floor(diff / 600) % 60
-    const seconds = Math.floor(diff) % 60
-
-    const display = []
-    if (days > 0) display.push(`${days}d`)
-    if (hours > 0) display.push(`${hours}h`)
-    if (minutes > 0) display.push(`${minutes}m`)
-    if (seconds > 0) display.push(`${seconds}s`)
-
-    displayElement.innerText = display.join(" ");
-  }, 1000)
-</script>

src/pages/index.astro

@@ -1,10 +1,21 @@
 ---
 import Layout from '../layouts/Layout.astro';
+import {WidgetState} from '../models/WidgetState';
+import WidgetCardList from '../components/WidgetCardList.astro';
+import Card from '../layouts/Card.astro';
+
+const articles = await Astro.glob("./articles/*.md")
+const widgets = await Astro.glob<WidgetState>('./widgets/*.astro');
+
+const gettingStartArticle = articles.find(article => article.frontmatter.id === "getting-start")
 ---
 
 <Layout title="Welcome to Astro.">
-    <main class="container mx-auto">
+    <main class="container mx-auto flex flex-col gap-5">
         <h1 class="text-5xl font-bold py-5">Notion Widgets</h1>
 
+        {gettingStartArticle && <Card set:html={gettingStartArticle.compiledContent()}/>}
+
+        <WidgetCardList widgets={widgets}/>
     </main>
 </Layout>

src/pages/widgets/clock.astro

@@ -0,0 +1,26 @@
+---
+import Layout from '../../layouts/Layout.astro';
+export const data = {
+    name: "Clock ⏰"
+}
+---
+<Layout title="Clock">
+    <main class="h-screen w-screen flex flex-col gap-7 justify-center items-center">
+        <h2 id="display" class="font-extralight text-5xl"></h2>
+        <h3 id="day" class="text-xl capitalize"></h3>
+    </main>
+</Layout>
+
+<script is:inline>
+  const displayElement = document.getElementById('display');
+  const dayElement = document.getElementById('day');
+
+  const urlParams = new URLSearchParams(window.location.search);
+  const language = urlParams.get('language') ?? 'en-US';
+
+  setInterval(() => {
+    const now = new Date();
+    displayElement.innerText = now.toLocaleTimeString(language);
+    dayElement.innerText = now.toLocaleDateString(language, {weekday: 'long'});
+  }, 1000);
+</script>

src/pages/widgets/countdown.astro

@@ -0,0 +1,49 @@
+---
+import Layout from '../../layouts/Layout.astro';
+
+export const data = {
+    name: "Countdown ⌛️"
+}
+---
+
+<Layout title="Countdown">
+    <main class="w-screen h-screen flex flex-col justify-center items-center">
+        <h2 id="title" class="text-xl font-bold"></h2>
+        <h3 id="display"></h3>
+    </main>
+</Layout>
+
+<script lang="ts" is:inline>
+  const titleElement = document.getElementById('title');
+  const displayElement = document.getElementById('display');
+
+  const urlParams = new URLSearchParams(window.location.search);
+  const titleParam = urlParams.get('title') ?? 'Event';
+  const datetimeParam = urlParams.get('datetime') ?? '';
+
+  titleElement.innerText = titleParam;
+  const date = new Date(datetimeParam);
+
+  const interval = setInterval(() => {
+    const now = new Date();
+    const diff = Math.floor(Math.abs(date.getTime() - now.getTime()) / 1000);
+    if (diff <= 0) clearInterval(interval);
+
+    displayElement.innerText = handleDisplay(diff);
+  }, 1000);
+
+  function handleDisplay(diff) {
+    const days = Math.floor(diff / 86400);
+    const hours = Math.floor(diff / 3600) % 24;
+    const minutes = Math.floor(diff / 60) % 60;
+    const seconds = Math.floor(diff) % 60;
+
+    const display = [];
+    if (days > 0) display.push(`${days}d`);
+    if (hours > 0) display.push(`${hours}h`);
+    if (minutes > 0) display.push(`${minutes}m`);
+    if (seconds > 0) display.push(`${seconds}s`);
+
+    return display.join(' ');
+  }
+</script>