Remove Timer and add countdown

astro.config.mjs

@@ -1,10 +1,11 @@
 import { defineConfig } from 'astro/config';
-
 import tailwind from "@astrojs/tailwind";
 
+import image from "@astrojs/image";
+
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind()],
+  integrations: [tailwind(), image()],
   site: 'https://lucasvbr.github.io',
-  base: '/notion-widgets',
+  base: '/notion-widgets'
 });

package-lock.json

@@ -8,6 +8,7 @@
       "name": "notion-widgets",
       "version": "0.0.1",
       "dependencies": {
+        "@astrojs/image": "^0.17.0",
         "@astrojs/tailwind": "^4.0.0",
         "astro": "^2.6.6",
         "tailwindcss": "^3.3.2"
@@ -24,6 +25,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@altano/tiny-async-pool": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@altano/tiny-async-pool/-/tiny-async-pool-1.0.2.tgz",
+      "integrity": "sha512-qQzaI0TBUPdpjZ3qo5b2ziQY9MSNpbziH2ZrE5lvtUZL+kn9GwVuVJwoOubaoNkeDB+rqEefnpu1k+oMpOCYiw=="
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
@@ -41,6 +47,28 @@
       "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-1.5.1.tgz",
       "integrity": "sha512-iIGKu/uzB8sJ5VveQf0eHrVPPFEcrvSlp4qShYMOuY2aMmK2RVXQlX9dUjtmBQ+NAokfIOb7fwCutvH+p13l+g=="
     },
+    "node_modules/@astrojs/image": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/@astrojs/image/-/image-0.17.0.tgz",
+      "integrity": "sha512-YSolAMFtABhmgLH5BCeGX5e7QKApgSI1XcxO+HLqHFayQKVQ9r6fwslodTjzQkqxgcWEcQKF4nFR4Sq3hAq6YQ==",
+      "dependencies": {
+        "@altano/tiny-async-pool": "^1.0.2",
+        "http-cache-semantics": "^4.1.0",
+        "image-size": "^1.0.2",
+        "kleur": "^4.1.5",
+        "magic-string": "^0.27.0",
+        "mime": "^3.0.0"
+      },
+      "peerDependencies": {
+        "astro": "^2.6.0",
+        "sharp": ">=0.31.0"
+      },
+      "peerDependenciesMeta": {
+        "sharp": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@astrojs/internal-helpers": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/@astrojs/internal-helpers/-/internal-helpers-0.1.0.tgz",
@@ -2449,6 +2477,11 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/http-cache-semantics": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
+      "integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ=="
+    },
     "node_modules/human-signals": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-3.0.1.tgz",
@@ -2476,6 +2509,20 @@
         }
       ]
     },
+    "node_modules/image-size": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-1.0.2.tgz",
+      "integrity": "sha512-xfOoWjceHntRb3qFCrh5ZFORYH8XCdYpASltMhZ/Q0KZiOwjdE/Yl2QCiWdwD+lygV5bMCvauzgu5PxBX/Yerg==",
+      "dependencies": {
+        "queue": "6.0.2"
+      },
+      "bin": {
+        "image-size": "bin/image-size.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/import-meta-resolve": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-2.2.2.tgz",
@@ -4292,6 +4339,14 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/queue": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz",
+      "integrity": "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==",
+      "dependencies": {
+        "inherits": "~2.0.3"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",

package.json

@@ -10,6 +10,7 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/image": "^0.17.0",
     "@astrojs/tailwind": "^4.0.0",
     "astro": "^2.6.6",
     "tailwindcss": "^3.3.2"

src/components/Circle.astro

@@ -1,13 +0,0 @@
----
-import CircleState from '../models/CircleState';
-export interface Props {
-  id?: string
-  circle: CircleState,
-}
-
-const {id, circle} = Astro.props
----
-
-<circle id={id ?? ""} cx={circle.point.x} cy={circle.point.y} r={circle.radius ?? 2} fill={circle.fill ?? "none"} stroke={circle.stroke ?? "black"}>
-    <slot/>
-</circle>

src/components/Line.astro

@@ -1,14 +0,0 @@
----
-import LineState from '../models/LineState';
-export interface Props {
-  line: LineState;
-  stroke?: number;
-}
-
-const {line, stroke} = Astro.props;
----
-
-<line x1={line.a.x} y1={line.a.y}
-      x2={line.b.x} y2={line.b.y}
-      stroke={stroke ?? 'black'}
-/>

src/models/CircleState.ts

@@ -1,10 +0,0 @@
-import type PointState from './PointState';
-
-type CircleState = {
-  point: PointState
-  radius?: number
-  fill?: string
-  stroke?: string
-}
-
-export default CircleState;

src/models/LineState.ts

@@ -1,8 +0,0 @@
-import type PointState from './PointState';
-
-type LineState = {
-  a: PointState
-  b: PointState
-}
-
-export default LineState;

src/models/PointState.ts

@@ -1,6 +0,0 @@
-type PointState = {
-  x: number
-  y: number
-}
-
-export default PointState;

src/pages/countdown/index.astro

@@ -0,0 +1,42 @@
+---
+
+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.abs(date.getTime() - now.getTime());
+    if (diff <= 0) clearInterval(interval);
+
+    const days = Math.floor(diff / (1000 * 3600 * 24))
+    const hours = Math.floor(diff / (1000 * 3600)) % 24
+    const minutes = Math.floor(diff / (1000 * 60)) % 60
+    const seconds = Math.floor(diff / (1000)) % 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/widget/clock/index.astro

@@ -1,108 +0,0 @@
----
-import Layout from '../../../layouts/Layout.astro';
-import Line from '../../../components/Line.astro';
-import Circle from '../../../components/Circle.astro';
-
-import type PointState from '../../../models/PointState';
-import type LineState from '../../../models/LineState';
-import type CircleState from '../../../models/CircleState';
-import {buildDials, buildTimeIndicators} from './utils';
-
-const canvas = {size: 400};
-
-const centerPoint: PointState = {
-  x: canvas.size / 2,
-  y: canvas.size / 2,
-};
-
-const dials: CircleState[] = buildDials(centerPoint, canvas.size / 10,
-    canvas.size / 2.5, 3);
-const timeIndicators: LineState[] =
-    buildTimeIndicators(centerPoint, canvas, 12, 10)
-        .concat(buildTimeIndicators(centerPoint, canvas, 4, 20))
-;
-
-const day = [
-    "Dimanche",
-    "Lundi",
-    'Mardi',
-    "Mercredi",
-    "Jeudi",
-    "Vendredi",
-    "Samedi"
-];
-
-
-
-const serverTime = new Date();
-
-const calculatePosition = (offset: number, angle: number) => {
-    return {
-        x: centerPoint.x + offset * Math.cos(angle),
-        y: centerPoint.y + offset * Math.sin(angle),
-    };
-}
-const secondsPosition = calculatePosition(canvas.size / 5, (serverTime.getSeconds() + 45) * ((Math.PI * 2) / 60))
-const minutesPosition = calculatePosition(canvas.size / (3 + 1/3), (serverTime.getMinutes() + 45) * ((Math.PI * 2) / 60))
-const hoursPosition = calculatePosition(canvas.size / 2.5, (serverTime.getHours() + 18) * ((Math.PI * 2) / 24))
----
-
-<Layout>
-    <main class="min-h-screen w-scren flex justify-center items-center">
-        <svg width={canvas.size} height={canvas.size}>
-          {dials.map((circle) => <Circle circle={circle}/>)}
-          {timeIndicators.map((line) => <Line line={line}/>)}
-          <Circle circle={{point: centerPoint, radius: 20, fill: "gray", stroke: 0}} />
-
-        <text id="display" x={centerPoint.x} y={centerPoint.y - 30}
-              text-anchor="middle"
-              font-size={canvas.size / 23}>HH:MM:SS
-        </text>
-
-            <text x={centerPoint.x} y={centerPoint.y + 50}
-                  text-anchor="middle"
-                  font-size={canvas.size / 25}>{day[(new Date()).getDay()]}
-            </text>
-
-            <Circle id="hoursCircle" circle={{point: hoursPosition, radius: 25, fill: 'gray', stroke: 0}}>
-                <animateTransform attributeName="transform"
-                                  attributeType="XML"
-                                  type="rotate"
-                                  from={`0 ${centerPoint.x} ${centerPoint.x}`}
-                                  to={`360 ${centerPoint.x} ${centerPoint.y}`}
-                                  dur="86400s"
-                                  repeatCount="indefinite"/>
-            </Circle>
-            <Circle id="minutesCircle" circle={{point: minutesPosition, radius: 20, fill: 'gray', stroke: 0}}>
-                <animateTransform attributeName="transform"
-                                  attributeType="XML"
-                                  type="rotate"
-                                  from={`0 ${centerPoint.x} ${centerPoint.x}`}
-                                  to={`360 ${centerPoint.x} ${centerPoint.y}`}
-                                  dur="3600s"
-                                  repeatCount="indefinite"/>
-            </Circle>
-            <Circle id="secondsCircle" circle={{point: secondsPosition, radius: 10, fill: 'gray', stroke: 0}}>
-                <animateTransform attributeName="transform"
-                                  attributeType="XML"
-                                  type="rotate"
-                                  from={`0 ${centerPoint.x} ${centerPoint.x}`}
-                                  to={`360 ${centerPoint.x} ${centerPoint.y}`}
-                                  dur="60s"
-                                  repeatCount="indefinite"/>
-            </Circle>
-
-        </svg>
-    </main>
-</Layout>
-
-<script>
-  const displayElement = document.getElementById('display');
-
-  const zeroPad = (num, places) => String(num).padStart(places, '0');
-  setInterval(() => {
-    const time = new Date();
-    displayElement.innerHTML = `${zeroPad(time.getHours(), 2)}:${zeroPad(
-        time.getMinutes(), 2)}:${zeroPad(time.getSeconds(), 2)}`;
-  }, 1000);
-</script>

src/pages/widget/clock/utils.ts

@@ -1,56 +0,0 @@
-import type LineState from '../../../models/LineState';
-import type PointState from '../../../models/PointState';
-import type CircleState from '../../../models/CircleState';
-
-export const buildTimeIndicators = (
-    centerPoint: PointState,
-    canvas: {size: number},
-    count: number,
-    size: number,
-) => {
-  const pi2 = Math.PI * 2;
-
-  let l: LineState[] = [];
-  const offset = canvas.size / (3 + 1/3)
-  const angle = pi2 / count;
-
-  for (let i = 0; i < count; i++) {
-    const t = i * angle;
-    const cosValue = Math.cos(t);
-    const sinValue = Math.sin(t);
-
-    const newPointA: PointState = {
-      x: centerPoint.x + offset * cosValue,
-      y: centerPoint.y + offset * sinValue,
-    };
-
-    const newPointB: PointState = {
-      x: centerPoint.x + (offset + size) * cosValue,
-      y: centerPoint.y + (offset + size) * sinValue,
-    };
-
-    l.push({a: newPointA, b: newPointB});
-  }
-  return l;
-};
-
-export const buildDials = (
-    centerPoint: PointState,
-    min: number,
-    max: number,
-    count: number
-) => {
-  const result: CircleState[] = [];
-  const step = (max - min) / count;
-
-  for (let i = 1; i <= count; i++) {
-    const newCircle = {
-      radius: min + (step * i),
-      point: centerPoint
-    };
-
-    result.push(newCircle)
-  }
-
-  return result;
-};