Added timexone island

Signed-off-by: Louis Hollingworth <louis@hollingworth.ch>
2022-10-02 15:48:31 +01:00 · 2022-10-02 15:48:31 +01:00 · 1e847898b9
parent 9241dc0783
commit 1e847898b9
9 changed files with 288 additions and 155 deletions
--- a/astro.config.mjs
+++ b/astro.config.mjs
@ -1,6 +1,8 @@
 import { defineConfig } from 'astro/config';

+import vue from "@astrojs/vue";
+
 // https://astro.build/config
 export default defineConfig({
-  integrations: []
+  integrations: [vue()]
 });
--- a/package.json
+++ b/package.json
@ -11,7 +11,9 @@
    "astro": "astro"
  },
  "dependencies": {
-    "astro": "^1.4.2"
+    "@astrojs/vue": "1.1.0",
+    "astro": "^1.4.2",
+    "vue": "^3.2.30"
  },
  "devDependencies": {
    "sass": "1.55.0"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -1,11 +1,15 @@
 lockfileVersion: 5.4

 specifiers:
+  '@astrojs/vue': 1.1.0
  astro: ^1.4.2
  sass: 1.55.0
+  vue: ^3.2.30

 dependencies:
+  '@astrojs/vue': 1.1.0_whxeo4miwfmfgowxp5hpxvmcbm
  astro: 1.4.2_sass@1.55.0
+  vue: 3.2.40

 devDependencies:
  sass: 1.55.0
@ -114,6 +118,23 @@ packages:
      - supports-color
    dev: false

+  /@astrojs/vue/1.1.0_whxeo4miwfmfgowxp5hpxvmcbm:
+    resolution: {integrity: sha512-S4ZPTn6mDmgiGyQg13GWbTNuXw0pFeJzziQcS8yOURmCtkiwjT4bx1urvbMaKjtoFEE4n6qkV1ZKId3Y4jptmA==}
+    engines: {node: ^14.18.0 || >=16.12.0}
+    peerDependencies:
+      vue: ^3.2.30
+    dependencies:
+      '@vitejs/plugin-vue': 3.1.2_vite@3.1.4+vue@3.2.40
+      '@vitejs/plugin-vue-jsx': 2.0.1_vite@3.1.4+vue@3.2.40
+      '@vue/babel-plugin-jsx': 1.1.1_@babel+core@7.19.3
+      '@vue/compiler-sfc': 3.2.40
+      vue: 3.2.40
+    transitivePeerDependencies:
+      - '@babel/core'
+      - supports-color
+      - vite
+    dev: false
+
  /@astrojs/webapi/1.1.0:
    resolution: {integrity: sha512-yLSksFKv9kRbI3WWPuRvbBjS+J5ZNmZHacJ6Io8XQleKIHHHcw7RoNcrLK0s+9iwVPhqMYIzja6HJuvnO93oFw==}
    dependencies:
@ -185,6 +206,24 @@ packages:
      semver: 6.3.0
    dev: false

+  /@babel/helper-create-class-features-plugin/7.19.0_@babel+core@7.19.3:
+    resolution: {integrity: sha512-NRz8DwF4jT3UfrmUoZjd0Uph9HQnP30t7Ash+weACcyNkiYTywpIjDBgReJMKgr+n86sn2nPVVmJ28Dm053Kqw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.19.3
+      '@babel/helper-annotate-as-pure': 7.18.6
+      '@babel/helper-environment-visitor': 7.18.9
+      '@babel/helper-function-name': 7.19.0
+      '@babel/helper-member-expression-to-functions': 7.18.9
+      '@babel/helper-optimise-call-expression': 7.18.6
+      '@babel/helper-replace-supers': 7.19.1
+      '@babel/helper-split-export-declaration': 7.18.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
  /@babel/helper-environment-visitor/7.18.9:
    resolution: {integrity: sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==}
    engines: {node: '>=6.9.0'}
@ -205,6 +244,13 @@ packages:
      '@babel/types': 7.19.3
    dev: false

+  /@babel/helper-member-expression-to-functions/7.18.9:
+    resolution: {integrity: sha512-RxifAh2ZoVU67PyKIO4AMi1wTenGfMR/O/ae0CCRqwgBAt5v7xjdtRw7UoSbsreKrQn5t7r89eruK/9JjYHuDg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.19.3
+    dev: false
+
  /@babel/helper-module-imports/7.18.6:
    resolution: {integrity: sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==}
    engines: {node: '>=6.9.0'}
@ -228,11 +274,31 @@ packages:
      - supports-color
    dev: false

+  /@babel/helper-optimise-call-expression/7.18.6:
+    resolution: {integrity: sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.19.3
+    dev: false
+
  /@babel/helper-plugin-utils/7.19.0:
    resolution: {integrity: sha512-40Ryx7I8mT+0gaNxm8JGTZFUITNqdLAgdg0hXzeVZxVD6nFsdhQvip6v8dqkRHzsz1VFpFAaOCHNn0vKBL7Czw==}
    engines: {node: '>=6.9.0'}
    dev: false

+  /@babel/helper-replace-supers/7.19.1:
+    resolution: {integrity: sha512-T7ahH7wV0Hfs46SFh5Jz3s0B6+o8g3c+7TMxu7xKfmHikg7EAZ3I2Qk9LFhjxXq8sL7UkP5JflezNwoZa8WvWw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-environment-visitor': 7.18.9
+      '@babel/helper-member-expression-to-functions': 7.18.9
+      '@babel/helper-optimise-call-expression': 7.18.6
+      '@babel/traverse': 7.19.3
+      '@babel/types': 7.19.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
  /@babel/helper-simple-access/7.18.6:
    resolution: {integrity: sha512-iNpIgTgyAvDQpDj76POqg+YEt8fPxx3yaNBg3S30dxNKm2SWfYhD0TGrK/Eu9wHpUW63VQU894TsTg+GLbUa1g==}
    engines: {node: '>=6.9.0'}
@ -290,6 +356,15 @@ packages:
      '@babel/types': 7.19.3
    dev: false

+  /@babel/plugin-syntax-import-meta/7.10.4_@babel+core@7.19.3:
+    resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.19.3
+      '@babel/helper-plugin-utils': 7.19.0
+    dev: false
+
  /@babel/plugin-syntax-jsx/7.18.6_@babel+core@7.19.3:
    resolution: {integrity: sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==}
    engines: {node: '>=6.9.0'}
@ -300,6 +375,16 @@ packages:
      '@babel/helper-plugin-utils': 7.19.0
    dev: false

+  /@babel/plugin-syntax-typescript/7.18.6_@babel+core@7.19.3:
+    resolution: {integrity: sha512-mAWAuq4rvOepWCBid55JuRNvpTNf2UGVgoz4JV0fXEKolsVZDzsa4NqCef758WZJj/GDu0gVGItjKFiClTAmZA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.19.3
+      '@babel/helper-plugin-utils': 7.19.0
+    dev: false
+
  /@babel/plugin-transform-react-jsx/7.19.0_@babel+core@7.19.3:
    resolution: {integrity: sha512-UVEvX3tXie3Szm3emi1+G63jyw1w5IcMY0FSKM+CRnKRI5Mr1YbCNgsSTwoTwKphQEG9P+QqmuRFneJPZuHNhg==}
    engines: {node: '>=6.9.0'}
@ -314,6 +399,20 @@ packages:
      '@babel/types': 7.19.3
    dev: false

+  /@babel/plugin-transform-typescript/7.19.3_@babel+core@7.19.3:
+    resolution: {integrity: sha512-z6fnuK9ve9u/0X0rRvI9MY0xg+DOUaABDYOe+/SQTxtlptaBB/V9JIUxJn6xp3lMBeb9qe8xSFmHU35oZDXD+w==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.19.3
+      '@babel/helper-create-class-features-plugin': 7.19.0_@babel+core@7.19.3
+      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/plugin-syntax-typescript': 7.18.6_@babel+core@7.19.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
  /@babel/template/7.18.10:
    resolution: {integrity: sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==}
    engines: {node: '>=6.9.0'}
@ -591,6 +690,34 @@ packages:
    resolution: {integrity: sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==}
    dev: false

+  /@vitejs/plugin-vue-jsx/2.0.1_vite@3.1.4+vue@3.2.40:
+    resolution: {integrity: sha512-lmiR1k9+lrF7LMczO0pxtQ8mOn6XeppJDHxnpxkJQpT5SiKz4SKhKdeNstXaTNuR8qZhUo5X0pJlcocn72Y4Jg==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      vite: ^3.0.0
+      vue: ^3.0.0
+    dependencies:
+      '@babel/core': 7.19.3
+      '@babel/plugin-syntax-import-meta': 7.10.4_@babel+core@7.19.3
+      '@babel/plugin-transform-typescript': 7.19.3_@babel+core@7.19.3
+      '@vue/babel-plugin-jsx': 1.1.1_@babel+core@7.19.3
+      vite: 3.1.4_sass@1.55.0
+      vue: 3.2.40
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /@vitejs/plugin-vue/3.1.2_vite@3.1.4+vue@3.2.40:
+    resolution: {integrity: sha512-3zxKNlvA3oNaKDYX0NBclgxTQ1xaFdL7PzwF6zj9tGFziKwmBa3Q/6XcJQxudlT81WxDjEhHmevvIC4Orc1LhQ==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      vite: ^3.0.0
+      vue: ^3.2.25
+    dependencies:
+      vite: 3.1.4_sass@1.55.0
+      vue: 3.2.40
+    dev: false
+
  /@vscode/emmet-helper/2.8.4:
    resolution: {integrity: sha512-lUki5QLS47bz/U8IlG9VQ+1lfxMtxMZENmU5nu4Z71eOD5j9FK0SmYGL5NiVJg9WBWeAU0VxRADMY2Qpq7BfVg==}
    dependencies:
@ -602,6 +729,110 @@ packages:
      vscode-uri: 2.1.2
    dev: false

+  /@vue/babel-helper-vue-transform-on/1.0.2:
+    resolution: {integrity: sha512-hz4R8tS5jMn8lDq6iD+yWL6XNB699pGIVLk7WSJnn1dbpjaazsjZQkieJoRX6gW5zpYSCFqQ7jUquPNY65tQYA==}
+    dev: false
+
+  /@vue/babel-plugin-jsx/1.1.1_@babel+core@7.19.3:
+    resolution: {integrity: sha512-j2uVfZjnB5+zkcbc/zsOc0fSNGCMMjaEXP52wdwdIfn0qjFfEYpYZBFKFg+HHnQeJCVrjOeO0YxgaL7DMrym9w==}
+    dependencies:
+      '@babel/helper-module-imports': 7.18.6
+      '@babel/plugin-syntax-jsx': 7.18.6_@babel+core@7.19.3
+      '@babel/template': 7.18.10
+      '@babel/traverse': 7.19.3
+      '@babel/types': 7.19.3
+      '@vue/babel-helper-vue-transform-on': 1.0.2
+      camelcase: 6.3.0
+      html-tags: 3.2.0
+      svg-tags: 1.0.0
+    transitivePeerDependencies:
+      - '@babel/core'
+      - supports-color
+    dev: false
+
+  /@vue/compiler-core/3.2.40:
+    resolution: {integrity: sha512-2Dc3Stk0J/VyQ4OUr2yEC53kU28614lZS+bnrCbFSAIftBJ40g/2yQzf4mPBiFuqguMB7hyHaujdgZAQ67kZYA==}
+    dependencies:
+      '@babel/parser': 7.19.3
+      '@vue/shared': 3.2.40
+      estree-walker: 2.0.2
+      source-map: 0.6.1
+    dev: false
+
+  /@vue/compiler-dom/3.2.40:
+    resolution: {integrity: sha512-OZCNyYVC2LQJy4H7h0o28rtk+4v+HMQygRTpmibGoG9wZyomQiS5otU7qo3Wlq5UfHDw2RFwxb9BJgKjVpjrQw==}
+    dependencies:
+      '@vue/compiler-core': 3.2.40
+      '@vue/shared': 3.2.40
+    dev: false
+
+  /@vue/compiler-sfc/3.2.40:
+    resolution: {integrity: sha512-tzqwniIN1fu1PDHC3CpqY/dPCfN/RN1thpBC+g69kJcrl7mbGiHKNwbA6kJ3XKKy8R6JLKqcpVugqN4HkeBFFg==}
+    dependencies:
+      '@babel/parser': 7.19.3
+      '@vue/compiler-core': 3.2.40
+      '@vue/compiler-dom': 3.2.40
+      '@vue/compiler-ssr': 3.2.40
+      '@vue/reactivity-transform': 3.2.40
+      '@vue/shared': 3.2.40
+      estree-walker: 2.0.2
+      magic-string: 0.25.9
+      postcss: 8.4.17
+      source-map: 0.6.1
+    dev: false
+
+  /@vue/compiler-ssr/3.2.40:
+    resolution: {integrity: sha512-80cQcgasKjrPPuKcxwuCx7feq+wC6oFl5YaKSee9pV3DNq+6fmCVwEEC3vvkf/E2aI76rIJSOYHsWSEIxK74oQ==}
+    dependencies:
+      '@vue/compiler-dom': 3.2.40
+      '@vue/shared': 3.2.40
+    dev: false
+
+  /@vue/reactivity-transform/3.2.40:
+    resolution: {integrity: sha512-HQUCVwEaacq6fGEsg2NUuGKIhUveMCjOk8jGHqLXPI2w6zFoPrlQhwWEaINTv5kkZDXKEnCijAp+4gNEHG03yw==}
+    dependencies:
+      '@babel/parser': 7.19.3
+      '@vue/compiler-core': 3.2.40
+      '@vue/shared': 3.2.40
+      estree-walker: 2.0.2
+      magic-string: 0.25.9
+    dev: false
+
+  /@vue/reactivity/3.2.40:
+    resolution: {integrity: sha512-N9qgGLlZmtUBMHF9xDT4EkD9RdXde1Xbveb+niWMXuHVWQP5BzgRmE3SFyUBBcyayG4y1lhoz+lphGRRxxK4RA==}
+    dependencies:
+      '@vue/shared': 3.2.40
+    dev: false
+
+  /@vue/runtime-core/3.2.40:
+    resolution: {integrity: sha512-U1+rWf0H8xK8aBUZhnrN97yoZfHbjgw/bGUzfgKPJl69/mXDuSg8CbdBYBn6VVQdR947vWneQBFzdhasyzMUKg==}
+    dependencies:
+      '@vue/reactivity': 3.2.40
+      '@vue/shared': 3.2.40
+    dev: false
+
+  /@vue/runtime-dom/3.2.40:
+    resolution: {integrity: sha512-AO2HMQ+0s2+MCec8hXAhxMgWhFhOPJ/CyRXnmTJ6XIOnJFLrH5Iq3TNwvVcODGR295jy77I6dWPj+wvFoSYaww==}
+    dependencies:
+      '@vue/runtime-core': 3.2.40
+      '@vue/shared': 3.2.40
+      csstype: 2.6.21
+    dev: false
+
+  /@vue/server-renderer/3.2.40_vue@3.2.40:
+    resolution: {integrity: sha512-gtUcpRwrXOJPJ4qyBpU3EyxQa4EkV8I4f8VrDePcGCPe4O/hd0BPS7v9OgjIQob6Ap8VDz9G+mGTKazE45/95w==}
+    peerDependencies:
+      vue: 3.2.40
+    dependencies:
+      '@vue/compiler-ssr': 3.2.40
+      '@vue/shared': 3.2.40
+      vue: 3.2.40
+    dev: false
+
+  /@vue/shared/3.2.40:
+    resolution: {integrity: sha512-0PLQ6RUtZM0vO3teRfzGi4ltLUO5aO+kLgwh4Um3THSR03rpQWLTuRCkuO5A41ITzwdWeKdPHtSARuPkoo5pCQ==}
+    dev: false
+
  /acorn-jsx/5.3.2_acorn@8.8.0:
    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
    peerDependencies:
@ -950,6 +1181,10 @@ packages:
      which: 2.0.2
    dev: false

+  /csstype/2.6.21:
+    resolution: {integrity: sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==}
+    dev: false
+
  /data-uri-to-buffer/4.0.0:
    resolution: {integrity: sha512-Vr3mLBA8qWmcuschSLAOogKgQ/Jwxulv3RNE4FXnYWRGujzrRWQI4m12fQqRkwX06C0KanhLr4hK+GydchZsaA==}
    engines: {node: '>= 12'}
@ -1511,6 +1746,10 @@ packages:
      '@types/unist': 2.0.6
    dev: false

+  /estree-walker/2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+    dev: false
+
  /events/3.3.0:
    resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
    engines: {node: '>=0.8.x'}
@ -1824,6 +2063,11 @@ packages:
    resolution: {integrity: sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==}
    dev: false

+  /html-tags/3.2.0:
+    resolution: {integrity: sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==}
+    engines: {node: '>=8'}
+    dev: false
+
  /html-void-elements/2.0.1:
    resolution: {integrity: sha512-0quDb7s97CfemeJAnW9wC0hw78MtW7NU3hqtCD75g2vFlDLt36llsYD7uB7SUzojLMP24N5IatXf7ylGXiGG9A==}
    dev: false
@ -3243,6 +3487,10 @@ packages:
    engines: {node: '>= 0.4'}
    dev: false

+  /svg-tags/1.0.0:
+    resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
+    dev: false
+
  /synckit/0.7.3:
    resolution: {integrity: sha512-jNroMv7Juy+mJ/CHW5H6TzsLWpa1qck6sCHbkv8YTur+irSq2PjbvmGnm2gy14BUQ6jF33vyR4DPssHqmqsDQw==}
    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
@ -3549,6 +3797,16 @@ packages:
    resolution: {integrity: sha512-fmL7V1eiDBFRRnu+gfRWTzyPpNIHJTc4mWnFkwBUmO9U3KPgJAmTx7oxi2bl/Rh6HLdU7+4C9wlj0k2E4AdKFQ==}
    dev: false

+  /vue/3.2.40:
+    resolution: {integrity: sha512-1mGHulzUbl2Nk3pfvI5aXYYyJUs1nm4kyvuz38u4xlQkLUn1i2R7nDbI4TufECmY8v1qNBHYy62bCaM+3cHP2A==}
+    dependencies:
+      '@vue/compiler-dom': 3.2.40
+      '@vue/compiler-sfc': 3.2.40
+      '@vue/runtime-dom': 3.2.40
+      '@vue/server-renderer': 3.2.40_vue@3.2.40
+      '@vue/shared': 3.2.40
+    dev: false
+
  /wcwidth/1.0.1:
    resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}
    dependencies:
--- a/src/components/TimeZone.vue
+++ b/src/components/TimeZone.vue
@ -0,0 +1,4 @@
+
+<template>
+    <span>{{Intl.DateTimeFormat().resolvedOptions().timeZone}}</span>
+</template>
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@ -1,9 +1,19 @@
 ---
+import NavBar from '../components/NavBar.astro';
+
 export interface Props {
 	title: string;
+	navLinks: {
+		to: string;
+		name: string;
+		img: {
+			src: string;
+			alt: string;
+		}
+	}[] | undefined
 }

-const { title } = Astro.props;
+const { title, navLinks } = Astro.props;
 ---

 <!DOCTYPE html>
@ -16,6 +26,10 @@ const { title } = Astro.props;
 		<title>{title}</title>
 	</head>
 	<body>
+		{ navLinks != undefined ? (
+			<NavBar links={navLinks} />
+		) : (<!-- If there were NavLinks, they would be here -->)
+		}
 		<slot />
 	</body>
 </html>
--- a/src/pages/utilities/birthdays.astro
+++ b/src/pages/utilities/birthdays.astro
@ -1,5 +1,5 @@
 ---
-import NavBar from "../../components/NavBar.astro";
+import TimeZone from "../../components/TimeZone.vue";
 import Layout from "../../layouts/Layout.astro";

 const navLinks = [
@ -22,8 +22,7 @@ const navLinks = [
 ];
 ---

-<Layout title="Vänner Bästa | Birthdays">
-    <NavBar links={navLinks} />
+<Layout title="Vänner Bästa | Birthdays"  navLinks={navLinks}>
    <div class="container">
 		<h1 class="title">Birthdays</h1>
 		<p>
@ -35,7 +34,7 @@ const navLinks = [
 		</p>
 		<h2>
 			Your timezone:
-			{ Intl.DateTimeFormat().resolvedOptions().timeZone }
+			<TimeZone client:load/>
 		</h2>
 	</div>
 </Layout>
--- a/src/pages/utilities/index.astro
+++ b/src/pages/utilities/index.astro
@ -14,8 +14,7 @@ const navLinks = [
 	},
 ];
 ---
-<Layout title="Vänner Bästa | Utilities">
-<NavBar links={navLinks} />
+<Layout title="Vänner Bästa | Utilities" navLinks={navLinks}>
    <div class="container">
 		<h1 class="title">Utilities for the Discord Server</h1>
 		<div class="grid-2">
--- a/src/pages/utilities/time.astro
+++ b/src/pages/utilities/time.astro
@ -24,8 +24,7 @@ const navLinks = [
 ];
 ---

-<Layout title="Time">
-    <NavBar links={navLinks} />
+<Layout title="Time" navLinks={navLinks}>
 	<div class="container">
 		<h1 class="title">Time Utilities</h1>
 		<p>
--- a/src/pages/utilities/time.vue
+++ b/src/pages/utilities/time.vue
@ -1,144 +0,0 @@
-<template>
-	<NavBar :links="navLinks" />
-	<div class="container">
-		<h1 class="title">Time Utilities</h1>
-		<p>
-			Your current timezone:
-			{{ Intl.DateTimeFormat().resolvedOptions().timeZone }}
-		</p>
-		<p>The current time in Unix Epoch: <code>{{ Math.floor(crntTime / 1000) }}</code> <br /> or <code>{{crntTime}}</code> in Unix millis</p>
-
-		<p>
-			To format the time for Discord, you can use: <br />
-			<code>
-				{{ `<t:${Math.floor(crntTime / 1000)}:f>` }}
-			</code>
-			<span>
-				to get
-				<code
-					>{{
-						Intl.DateTimeFormat(Intl.Locale, {
-							day: 'numeric',
-							month: 'long',
-							year: 'numeric',
-						}).format(crntTime)
-					}}
-					{{
-						Intl.DateTimeFormat(Intl.Locale, {
-							hour: '2-digit',
-							minute: '2-digit',
-						}).format(crntTime)
-					}}</code
-				></span
-			>
-			<br />
-			<code>
-				{{ `<t:${Math.floor(crntTime / 1000)}:F>` }}
-			</code>
-			<span>
-				to get
-				<code
-					>{{
-						Intl.DateTimeFormat(Intl.Locale, {
-							weekday: 'long',
-							day: 'numeric',
-							month: 'long',
-							year: 'numeric',
-						}).format(crntTime)
-					}}
-					{{
-						Intl.DateTimeFormat(Intl.Locale, {
-							hour: '2-digit',
-							minute: '2-digit',
-						}).format(crntTime)
-					}}</code
-				></span
-			>
-			<br />
-			<code>
-				{{ `<t:${Math.floor(crntTime / 1000)}:t>` }}
-			</code>
-			<span>
-				to get
-				<code>
-					{{
-						Intl.DateTimeFormat(Intl.Locale, {
-							hour: '2-digit',
-							minute: '2-digit',
-						}).format(crntTime)
-					}}</code
-				></span
-			>
-			<br />
-			<code>
-				{{ `<t:${Math.floor(crntTime / 1000)}:T>` }}
-			</code>
-			<span>
-				to get
-				<code>
-					{{
-						Intl.DateTimeFormat(Intl.Locale, {
-							hour: '2-digit',
-							minute: '2-digit',
-							second: '2-digit',
-						}).format(crntTime)
-					}}</code
-				></span
-			>
-			<br />
-			<code>
-				{{ `<t:${Math.floor(crntTime / 1000)}:d>` }}
-			</code>
-			<span>
-				to get
-				<code>
-					{{
-						Intl.DateTimeFormat(Intl.Locale, {
-							day: '2-digit',
-                            month: '2-digit',
-                            year: 'numeric',
-						}).format(crntTime)
-					}}</code
-				></span
-			>
-			<br />
-			<code>
-				{{ `<t:${Math.floor(crntTime / 1000)}:D>` }}
-			</code>
-			<span>
-				to get
-				<code>
-					{{
-						Intl.DateTimeFormat(Intl.Locale, {
-							day: 'numeric',
-                            month: 'long',
-                            year: 'numeric',
-						}).format(crntTime)
-					}}</code
-				></span
-			>
-		</p>
-	</div>
-</template>
-
-<script setup>
-const crntTime = Date.now();
-const navLinks = [
-	{
-		img: {
-			name: '/icons/arrow-left.svg',
-			alt: 'Back to Utilities',
-		},
-		to: '/utilities',
-		name: 'Utilities',
-	},
-	{
-		img: {
-			name: '/icons/home.svg',
-			alt: 'Go Home',
-		},
-		to: '/',
-		name: 'Home',
-	},
-];
-</script>