add counter poc

.eleventy.js

@@ -3,6 +3,9 @@ const eleventySass = require("@11tyrocks/eleventy-plugin-sass-lightningcss")
 module.exports = function (eleventyConfig) {
 	eleventyConfig.addPlugin(eleventySass)
 
+	eleventyConfig.setServerPassthroughCopyBehavior("passthrough")
+	eleventyConfig.addPassthroughCopy("src/js/**/*.js")
+
 	return {
 		htmlTemplateEngine: "njk",
 		dir: {

package-lock.json

@@ -9,7 +9,7 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
-        "@11ty/eleventy": "^2.0.0-beta.3",
+        "@11ty/eleventy": "^2.0.0",
         "@11tyrocks/eleventy-plugin-sass-lightningcss": "^1.0.0"
       },
       "devDependencies": {
@@ -24,9 +24,9 @@
       "integrity": "sha512-5R+DsT9LJ9tXiSQ4y+KLFppCkQyXhzAm1AIuBWE/sbU0hSXY5pkhoqQYEcPJQFg/nglL+wD55iv2j+7O96UAvg=="
     },
     "node_modules/@11ty/eleventy": {
-      "version": "2.0.0-beta.3",
-      "resolved": "https://registry.npmjs.org/@11ty/eleventy/-/eleventy-2.0.0-beta.3.tgz",
-      "integrity": "sha512-MGbvIbOn+P021U8E8hCM/QmaWPkTzfEdKVN8UGyLE8fI2J2hElgM/n6o28//+H/mw/4yPtlrYBtgiTHzsPkCNg==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy/-/eleventy-2.0.0.tgz",
+      "integrity": "sha512-heNLjt1FD2nx7fvidIgA4zrIvxuslgBK0w5/Ckr5iape1CoLzmDx1uIxPa66Atr1M6YzwG9hcOxoZUYV7PfLXw==",
       "dependencies": {
         "@11ty/dependency-tree": "^2.0.1",
         "@11ty/eleventy-dev-server": "^1.0.3",

package.json

@@ -4,15 +4,15 @@
   "description": "",
   "main": "index.html",
   "scripts": {
-    "dev": "eleventy  --serve --port=1312",
+    "dev": "eleventy --serve --port=1312",
     "build": "eleventy",
-	"lintcss": "npx stylelint 'src/css/**/*.scss'",
-	"lintcss-autofix": "npx stylelint 'src/css/**/*.scss' --fix"
+    "lintcss": "npx stylelint 'src/css/**/*.scss'",
+    "lintcss-autofix": "npx stylelint 'src/css/**/*.scss' --fix"
   },
   "author": "Guérilla.Studio",
   "license": "ISC",
   "dependencies": {
-    "@11ty/eleventy": "^2.0.0-beta.3",
+    "@11ty/eleventy": "^2.0.0",
     "@11tyrocks/eleventy-plugin-sass-lightningcss": "^1.0.0"
   },
   "devDependencies": {

src/_includes/base.njk

@@ -5,6 +5,8 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>{{ title }}</title>
 	<link rel="stylesheet" href="{{ '/css/style.css' | url }}" />
+	<style>[v-cloak] { display: none; }</style>
+	<script type="module" src="{{ '/js/script.js' | url }}"></script>
 
 	<!-- TODO: REMOVE IN PROD, but safer to have it for now -->
 	<meta name="robots" content="none">

src/index.html

@@ -2,15 +2,14 @@
 layout: base.njk
 title: Compteur de grève
 ---
-
-<section class="banner">
+<section class="banner" v-scope="App({ initialCount: 148563 })" @vue:mounted="mounted" @vue:unmounted="unmounted">
 	<div class="grid grid-2 gap">
 		<article class="text-center">
 			<h1 class="visually-hidden">Compteur de Grève</h1>
 			<p>
 				<span class="color-3">Contre la réforme des retraites,</span><br>
 				à l’appel de l’ensemble des organisations syndicales, le 7 mars
-				<strong class="block counter text-big text-bold">148&nbsp;563</strong>
+				<strong class="block counter text-big text-bold" v-text="count">148&nbsp;563</strong>
 				<span class="separator">personnes seront</span>
 				<em class="block text-big text-bold">en grève<span class="visually-hidden"> !</span></em>
 			</p>
@@ -20,10 +19,10 @@ title: Compteur de grève
 			<h2>Et vous&nbsp;?</h2>
 			<div class="flex flex-col">
 				<div>
-					<form action="/" method="post">
+					<form action="/" method="post" v-if="!participating" @submit="submit">
 						<button class="btn w100 mb15">Je fais grève</button>
 					</form>
-					<div class="success" v-cloak>
+					<div class="success" v-cloak v-if="participating">
 						<strong class="block text-bold">Merci pour votre participation ! ✨</strong>
 						↓ Nous avons <strong>besoin de vous</strong> pour faire du <em class="text-bold">7 mars</em> une journée de mobilisation qui restera dans les mémoires
 					</div>

src/js/script.js

@@ -0,0 +1,87 @@
+import { createApp } from "https://unpkg.com/petite-vue@0.4.1/dist/petite-vue.es.js"
+
+
+let internalCount = 0
+
+
+createApp({
+	App
+}).mount(document.body)
+
+function App({ initialCount }) {
+	internalCount = initialCount
+
+	return {
+		count: initialCount,
+		participating: false,
+
+		async submit(event) {
+			event.preventDefault()
+			this.count = await incrementCount()
+			this.participating = true
+		},
+
+		unsubscribeCount: null,
+
+		mounted() {
+			this.unsubscribeCount = subscribeCount((newCount) => this.count = newCount)
+		},
+
+		unmounted() {
+			if (this.unsubscribeCount) {
+				this.unsubscribeCount()
+				this.countSubcriber = null
+			}
+		},
+	}
+}
+
+function subscribeCount(onCount) {
+	let unsubscribed = false
+	let timeoutId = null
+
+	async function execute() {
+		const count = await fetchCount()
+
+		if (!unsubscribed) {
+			timeoutId = setTimeout(execute, 2000)
+			onCount(count)
+		}
+	}
+
+	execute()
+
+	return () => {
+		unsubscribed = true
+
+		if (timeoutId) {
+			clearTimeout(timeoutId)
+		}
+	}
+}
+
+
+
+// fake api
+async function fetchCount() {
+	await wait(1000)
+	internalCount += randomInt(0, 9)
+	return internalCount
+}
+
+async function incrementCount() {
+	await wait(1000)
+	internalCount += 1 + randomInt(0, 9)
+	return internalCount
+}
+
+
+function wait(ms) {
+	return new Promise(res => setTimeout(res, ms))
+}
+
+function randomInt(min, max) {
+	min = Math.ceil(min)
+	max = Math.floor(max)
+	return Math.floor(Math.random() * (max - min + 1)) + min
+}