feat: add basic calendar

.eslintrc.js

@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    sourceType: 'module',
+  },
+  extends: [
+    '@nuxtjs',
+    'plugin:vue3/recommended',
+    'plugin:prettier/recommended',
+  ],
+  rules: {
+    'prettier/prettier': 'error',
+  },
+};

.gitignore

@@ -0,0 +1,9 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.env
+dist
+sw.*

.prettierrc.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "http://json.schemastore.org/prettierrc",
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "endOfLine": "lf",
+  "htmlWhitespaceSensitivity": "css",
+  "jsxSingleQuote": false,
+  "bracketSameLine": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "useTabs": false,
+  "tabWidth": 2
+}

README.md

@@ -1,2 +1,42 @@
-# f1-calendar
-F1 race weekend times in your local timezone.
+# Nuxt 3 Minimal Starter
+
+Look at the [nuxt 3 documentation](https://v3.nuxtjs.org) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# yarn
+yarn install
+
+# npm
+npm install
+
+# pnpm
+pnpm install --shamefully-hoist
+```
+
+## Development Server
+
+Start the development server on http://localhost:3000
+
+```bash
+npm run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+npm run build
+```
+
+Locally preview production build:
+
+```bash
+npm run preview
+```
+
+Checkout the [deployment documentation](https://v3.nuxtjs.org/guide/deploy/presets) for more information.

app.vue

@@ -0,0 +1,43 @@
+<template>
+  <header class="p-8">
+    <h1 class="text-3xl font-bold dark:text-white">F1 Calendar</h1>
+  </header>
+  <main v-if="!pending">
+    <section>
+      <OverviewHeading>
+        <template v-slot:default>
+          Upcoming races
+        </template>
+        <template v-slot:extra>
+          <p class="dark:text-slate-200">
+            <span class="font-semibold dark:text-white">{{ upcomingRaces.length }}</span>
+            out of
+            <span class="font-semibold dark:text-white">{{ racesData.MRData.total }}</span>
+            races remaining
+          </p>
+        </template>
+      </OverviewHeading>
+      <CardRace v-for="race in upcomingRaces" :key="race.round" :race="race" :upcoming="true" />
+    </section>
+    <section class="mt-20">
+      <OverviewHeading>
+        Past races
+      </OverviewHeading>
+      <CardRace v-for="race in pastRaces" :key="race.round" :race="race" :upcoming="false" />
+    </section>
+  </main>
+</template>
+
+<script setup lang="ts">
+useHead({
+  bodyAttrs: {
+    class: 'bg-slate-100 dark:bg-black'
+  }
+})
+
+const { data: racesData, pending } = await useFetch('https://ergast.com/api/f1/current.json');
+
+const races = computed(() => racesData.value.MRData.RaceTable.Races);
+const pastRaces = useArrayFilter(races, race => pastRace(race));
+const upcomingRaces = useArrayFilter(races, race => upcomingRace(race));
+</script>

components/CardRace.vue

@@ -0,0 +1,27 @@
+<template>
+  <article class="bg-white shadow-xl mx-2 my-8 p-6 rounded-lg dark:bg-slate-900 dark:text-slate-200">
+    <div class="flex justify-between items-center mb-6">
+      <h2 class="text-lg font-bold">
+        <NuxtLink :to="race.url">
+          {{ race.raceName }}
+        </NuxtLink>
+      </h2>
+      <div class="w-10 h-10 flex justify-center items-center rounded-full font-bold bg-slate-100 shadow-inner dark:bg-slate-700">
+        {{ race.round }}
+      </div>
+    </div>
+    <ListRaceSessions v-if="upcoming" :race="race" />
+    <p v-else class="text-sm">
+      <ClientOnly>
+        {{ localDate(`${race.date} ${race.time}`) }}
+      </ClientOnly>
+    </p>
+  </article>
+</template>
+
+<script setup>
+defineProps({
+  race: Object,
+  upcoming: Boolean,
+})
+</script>

components/ListRaceSessions.vue

@@ -0,0 +1,73 @@
+<template>
+  <ul class="text-sm">
+    <li v-if="race.FirstPractice" class="flex justify-between">
+      <div class="font-semibold">First practice</div>
+      <ClientOnly>
+        <div>{{ localDate(`${race.FirstPractice.date} ${race.FirstPractice.time}`) }}</div>
+        <template #fallback>
+          <p>Getting local date</p>
+        </template>
+      </ClientOnly>
+    </li>
+    <li v-if="race.Sprint && race.Qualifying" class="flex justify-between">
+      <div class="font-semibold">Qualifying</div>
+      <ClientOnly>
+        <div>{{ localDate(`${race.Qualifying.date} ${race.Qualifying.time}`) }}</div>
+        <template #fallback>
+          <p>Getting local date</p>
+        </template>
+      </ClientOnly>
+    </li>
+    <li v-if="race.SecondPractice" class="flex justify-between">
+      <div class="font-semibold">Second practice</div>
+      <ClientOnly>
+        <div>{{ localDate(`${race.SecondPractice.date} ${race.SecondPractice.time}`) }}</div>
+        <template #fallback>
+          <p>Getting local date</p>
+        </template>
+      </ClientOnly>
+    </li>
+    <li v-if="race.ThirdPractice" class="flex justify-between">
+      <div class="font-semibold">Third practice</div>
+      <ClientOnly>
+        <div>{{ localDate(`${race.ThirdPractice.date} ${race.ThirdPractice.time}`) }}</div>
+        <template #fallback>
+          <p>Getting local date</p>
+        </template>
+      </ClientOnly>
+    </li>
+    <li v-if="!race.Sprint && race.Qualifying" class="flex justify-between">
+      <div class="font-semibold">Qualifying</div>
+      <ClientOnly>
+        <div>{{ localDate(`${race.Qualifying.date} ${race.Qualifying.time}`) }}</div>
+        <template #fallback>
+          <p>Getting local date</p>
+        </template>
+      </ClientOnly>
+    </li>
+    <li v-if="race.Sprint" class="flex justify-between">
+      <div class="font-semibold">Sprint</div>
+      <ClientOnly>
+        <div>{{ localDate(`${race.Sprint.date} ${race.Sprint.time}`) }}</div>
+        <template #fallback>
+          <p>Getting local date</p>
+        </template>
+      </ClientOnly>
+    </li>
+    <li class="flex justify-between">
+      <div class="font-semibold">Race</div>
+      <ClientOnly>
+        <div>{{ localDate(`${race.date} ${race.time}`) }}</div>
+        <template #fallback>
+          <p>Getting local date</p>
+        </template>
+      </ClientOnly>
+    </li>
+  </ul>
+</template>
+
+<script setup>
+defineProps({
+  race: Object
+});
+</script>

components/OverviewHeading.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="px-8">
+    <h2 class="text-2xl font-bold mb-4 dark:text-slate-200">
+      <slot></slot>
+    </h2>
+    <slot name="extra"></slot>
+  </div>
+</template>

composables/dates.js

@@ -0,0 +1,20 @@
+export const localDate = date => {
+  return new Date(date).toLocaleString([], {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    timeZoneName: 'short',
+  });
+};
+
+export const pastRace = race => {
+  const today = new Date();
+  return Date.parse(`${race.date} ${race.time}`) < Date.parse(today);
+};
+
+export const upcomingRace = race => {
+  const today = new Date();
+  return Date.parse(`${race.date} ${race.time}`) >= Date.parse(today);
+};

nuxt.config.ts

@@ -0,0 +1,29 @@
+import { defineNuxtConfig } from 'nuxt';
+
+// https://v3.nuxtjs.org/api/configuration/nuxt.config
+export default defineNuxtConfig({
+  modules: ['@nuxtjs/tailwindcss', '@vueuse/nuxt', '@kevinmarrec/nuxt-pwa'],
+  pwa: {
+    manifest: {
+      name: 'F1 Calendar',
+      lang: 'en',
+    },
+    meta: {
+      name: 'F1 Calendar',
+      description:
+        'F1 race weekend calendar with times in your local timezone.',
+    },
+    workbox: {
+      // TODO: Caching for F1 API in service worker.
+      // This doesn't work yet in the Nuxt 2 PWA module.
+      // https://github.com/kevinmarrec/nuxt-pwa-module#%EF%B8%8F-missing-features-%EF%B8%8F
+      // runtimeCaching: [
+      //   {
+      //     urlPattern: 'https://ergast.com/api/f1/*',
+      //     handler: 'cacheFirst',
+      //     method: 'GET',
+      //   },
+      // ],
+    },
+  },
+});

package.json

@@ -0,0 +1,23 @@
+{
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview"
+  },
+  "devDependencies": {
+    "@kevinmarrec/nuxt-pwa": "^0.4.2",
+    "@nuxtjs/eslint-config": "^10.0.0",
+    "@nuxtjs/tailwindcss": "^5.3.1",
+    "@vueuse/core": "^9.0.0",
+    "@vueuse/nuxt": "^9.0.0",
+    "eslint": "8.20.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-vue": "^9.3.0",
+    "nuxt": "3.0.0-rc.6",
+    "prettier": "2.7.1"
+  },
+  "dependencies": {}
+}

tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://v3.nuxtjs.org/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}