first commit

.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

README.md

@@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app/app.vue

@@ -0,0 +1,149 @@
+<script setup>
+const query = ref("")
+const webFeature = ref({})
+const multipleFeatures = ref([])
+const responseMessage = ref("")
+
+const fetchFeatures = async () => {
+	webFeature.value = {}
+	responseMessage.value = ""
+
+	const { data } = await $fetch(
+		`https://api.webstatus.dev/v1/features?q=id:"${query.value}"`
+	)
+	if (data.length === 0) {
+		permissiveFetchFeatures()
+	} else if (data.length > 1) {
+		multipleFeatures.value = data
+	} else {
+		webFeature.value = data[0]
+	}
+	wideAvailabilityDate()
+}
+
+const permissiveFetchFeatures = async () => {
+	webFeature.value = {}
+	responseMessage.value = ""
+
+	const { data } = await $fetch(
+		`https://api.webstatus.dev/v1/features?q=name:"${query.value}"`
+	)
+	if (data.length === 0) {
+		responseMessage.value = "Aucune fonctionnalité trouvée…"
+	} else if (data.length > 1) {
+		multipleFeatures.value = data
+	} else {
+		webFeature.value = data[0]
+	}
+	wideAvailabilityDate()
+}
+
+function addMonths(date, months) {
+	const d = new Date(date)
+	d.setMonth(d.getMonth() + months)
+	return d
+}
+
+const wideAvailabilityDate = () => {
+	if (webFeature.value?.baseline?.low_date)
+		return addMonths(webFeature.value?.baseline?.low_date, 30)
+}
+
+const handlePick = (feature) => {
+	query.value = feature
+	webFeature.value = {}
+	multipleFeatures.value = []
+	fetchFeatures()
+}
+</script>
+
+<template>
+	<div>
+		<NuxtRouteAnnouncer />
+
+		<h1>Est-ce que tu baseline&nbsp;?</h1>
+		<form>
+			<label for="query">Nom de la fonctionnalité&nbsp;: </label>
+			<input id="query" v-model="query" type="text" name="query" />
+			<button @click.prevent="fetchFeatures">Chercher</button>
+		</form>
+
+		<section v-if="multipleFeatures.length">
+			<p>
+				Plusieurs fonctionnalités correspondent à la requête, veuillez
+				préciser&nbsp;!
+			</p>
+			<ul>
+				<li v-for="(feature, idx) of multipleFeatures" :key="idx">
+					{{ feature.name }} -
+					<button @click="handlePick(feature.feature_id)">
+						celle-ci&nbsp;!
+					</button>
+				</li>
+			</ul>
+		</section>
+
+		<p v-if="responseMessage">{{ responseMessage }}</p>
+
+		<div v-if="webFeature?.name">
+			<h2>
+				<a :href="webFeature?.spec?.links[0]?.link" rel="noopener noreferer">{{
+					webFeature.name
+				}}</a>
+			</h2>
+			<p>Statut&nbsp;: {{ webFeature?.baseline?.status }}</p>
+		</div>
+
+		<p v-if="query && webFeature?.baseline?.low_date">
+			Nouvellement disponible depuis le&nbsp;:
+			<NuxtTime
+				:datetime="webFeature?.baseline?.low_date"
+				year="numeric"
+				month="long"
+				day="numeric"
+				locale="fr-FR"
+			/>
+		</p>
+
+		<p v-if="query && webFeature?.baseline?.high_date">
+			Disponible largement depuis le&nbsp;:
+			<NuxtTime
+				:datetime="webFeature?.baseline?.high_date"
+				numeric="auto"
+				style="long"
+				locale="fr-FR"
+			/>
+			(
+			<NuxtTime
+				:datetime="webFeature?.baseline?.high_date"
+				relative
+				numeric="auto"
+				style="long"
+				locale="fr-FR"
+			/>)
+		</p>
+		<p v-else-if="query && webFeature?.baseline?.low_date">
+			Disponible largement le&nbsp;:
+			<NuxtTime
+				:datetime="wideAvailabilityDate()"
+				numeric="auto"
+				style="long"
+				locale="fr-FR"
+			/>
+			(
+			<NuxtTime
+				:datetime="wideAvailabilityDate()"
+				relative
+				numeric="auto"
+				style="long"
+				locale="fr-FR"
+			/>)
+		</p>
+	</div>
+
+	<section>
+		<button v-if="webFeature.name" @click="permissiveFetchFeatures()">
+			Ce n'est pas ce que je cherche !
+		</button>
+	</section>
+</template>

eslint.config.mjs

@@ -0,0 +1,6 @@
+// @ts-check
+import withNuxt from './.nuxt/eslint.config.mjs'
+
+export default withNuxt(
+  // Your custom configs here
+)

nuxt.config.ts

@@ -0,0 +1,6 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  compatibilityDate: '2025-07-15',
+  devtools: { enabled: true },
+  modules: ['@nuxt/eslint']
+})

package.json

@@ -0,0 +1,19 @@
+{
+  "name": "nuxt-app",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@nuxt/eslint": "1.9.0",
+    "eslint": "^9.0.0",
+    "nuxt": "^4.1.2",
+    "vue": "^3.5.21",
+    "vue-router": "^4.5.1"
+  }
+}

public/robots.txt

@@ -0,0 +1,2 @@
+User-Agent: *
+Disallow:

tsconfig.json

@@ -0,0 +1,18 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "files": [],
+  "references": [
+    {
+      "path": "./.nuxt/tsconfig.app.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.server.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.shared.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.node.json"
+    }
+  ]
+}