Init

.gitattributes

@@ -1,2 +0,0 @@
-# Auto detect text files and perform LF normalization
-* text=auto

.gitignore

@@ -0,0 +1,27 @@
+# build output
+dist/
+
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# Webstorm files
+.idea/
+
+# VSCode files
+.vscode/

README.md

@@ -1,2 +1,55 @@
-# notion-widgets
+# Astro Starter Kit: Basics
 
+```
+npm create astro@latest -- --template basics
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+![basics](https://user-images.githubusercontent.com/4677417/186188965-73453154-fdec-4d6b-9c34-cb35c248ae5b.png)
+
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```
+/
+├── public/
+│   └── favicon.svg
+├── src/
+│   ├── components/
+│   │   └── Card.astro
+│   ├── layouts/
+│   │   └── Layout.astro
+│   └── pages/
+│       └── index.astro
+└── package.json
+```
+
+Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+
+There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+
+Any static assets, like images, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `npm install`             | Installs dependencies                            |
+| `npm run dev`             | Starts local dev server at `localhost:3000`      |
+| `npm run build`           | Build your production site to `./dist/`          |
+| `npm run preview`         | Preview your build locally, before deploying     |
+| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro -- --help` | Get help using the Astro CLI                     |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

astro.config.mjs

@@ -0,0 +1,8 @@
+import { defineConfig } from 'astro/config';
+
+import tailwind from "@astrojs/tailwind";
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [tailwind()]
+});

package.json

@@ -0,0 +1,17 @@
+{
+  "name": "notion-widgets",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/tailwind": "^4.0.0",
+    "astro": "^2.6.6",
+    "tailwindcss": "^3.3.2"
+  }
+}

public/favicon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+    <style>
+        path { fill: #000; }
+        @media (prefers-color-scheme: dark) {
+            path { fill: #FFF; }
+        }
+    </style>
+</svg>

src/components/Circle.astro

@@ -0,0 +1,13 @@
+---
+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

@@ -0,0 +1,14 @@
+---
+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/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

src/layouts/Layout.astro

@@ -0,0 +1,22 @@
+---
+export interface Props {
+  title: string;
+}
+
+const {title} = Astro.props;
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"/>
+    <meta name="description" content="Astro description">
+    <meta name="viewport" content="width=device-width"/>
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg"/>
+    <meta name="generator" content={Astro.generator}/>
+    <title>{title}</title>
+</head>
+<body>
+<slot/>
+</body>
+</html>

src/models/CircleState.ts

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

src/models/LineState.ts

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

src/models/PointState.ts

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

src/pages/index.astro

@@ -0,0 +1,10 @@
+---
+import Layout from '../layouts/Layout.astro';
+---
+
+<Layout title="Welcome to Astro.">
+    <main class="container mx-auto">
+        <h1 class="text-5xl font-bold py-5">Notion Widgets</h1>
+
+    </main>
+</Layout>

src/pages/widget/clock/index.astro

@@ -0,0 +1,108 @@
+---
+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: 500};
+
+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(100, (serverTime.getSeconds() + 45) * ((Math.PI * 2) / 60))
+const minutesPosition = calculatePosition(150, (serverTime.getMinutes() + 45) * ((Math.PI * 2) / 60))
+const hoursPosition = calculatePosition(200, (serverTime.getHours() + 18) * ((Math.PI * 2) / 24))
+---
+
+<Layout>
+    <main class="min-h-screen w-scren">
+        <svg width={canvas.size} height={canvas.size} class="border-2">
+          {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 250 250"
+                                  to="360 250 250"
+                                  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 250 250"
+                                  to="360 250 250"
+                                  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 250 250"
+                                  to="360 250 250"
+                                  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

@@ -0,0 +1,56 @@
+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;
+};

tailwind.config.cjs

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+	theme: {
+		extend: {},
+	},
+	plugins: [],
+}

tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "astro/tsconfigs/strict"
+}