Move the site to vite

.gitignore

@@ -3,7 +3,6 @@ dist
 .cache
 .idea
 build
-.parcel-cache
 scratch.ts
 scrap.ts
 collect/countries/fromSource/factbook/factbook/

.vscode/settings.json

@@ -43,5 +43,6 @@
     },
     "[csv]": {
         "files.insertFinalNewline": false,
-    }
+    },
+    "editor.formatOnSave": true
 }

README.md

@@ -16,15 +16,15 @@ Be aware that any changes to the `data` folder will be overwritten by the GitHub
 
 Install the dependencies with `npm install`
 
-Run `npm run app` to start the parcel development server. This will serve the website on <http://localhost:1234>
+Run `npm run app` to start the vite development server. This will serve the website on <http://localhost:1234>
 
 You can use `npm run build` to build the website for production. This will create a `gitBuild` folder with the website.
 
 The data can be collected with `npm run collect`. This will update all the data files in the `data` folder.
 
 ## Architecture
 
-The website is built with parcel and is served from GitHub pages. The data is stored in the repository and is updated with GitHub actions.
+The website is built with vite and is served from GitHub pages. The data is stored in the repository and is updated with GitHub actions.
 
 This website is built with the idea that it should be a static site with no server-side components. This means all the data is collected beforehand, and the website is built with that data. This means that the website can be hosted on GitHub pages and that it can be served from a CDN.
 

app/App.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 import { Comparison, CountryCodes } from '../collect/types';
-import Country, { Comparison as ComparisonComponent, ProgressBar } from './Country';
+import Country, { ComparisonCard as ComparisonComponent, ProgressBar } from './Country';
 
 import data from '../data/compare.json';
 import tags from '../data/tags.json';
 
-// @ts-expect-error -- static files are not supported by typescript
 import logo from '../static/logo.svg';
 
 import pkg from '../package.json';

app/Country.tsx

@@ -30,7 +30,7 @@ export default function Country(props: {
     comparisons: Comparison[];
 }) {
     const comparisons = props.comparisons.map(
-        (comparison) => <Comparison key={comparison.name} comparison={comparison} />
+        (comparison) => <ComparisonCard key={comparison.name} comparison={comparison} />
     );
 
     return (
@@ -46,7 +46,7 @@ export default function Country(props: {
     );
 }
 
-export function Comparison(props: {
+export function ComparisonCard(props: {
     comparison: Comparison;
 }) {
     // replace the templates in the description with the actual values
@@ -73,7 +73,7 @@ export function Comparison(props: {
                     Actual: {props.comparison.actual}<br />
                     Percentage: {Math.floor((props.comparison.actual / props.comparison.expected) * 100)}% <br />
 
-                    { /* eslint-disable-next-line react/jsx-no-target-blank -- I love seeing the referrer my self so I will give it to others */}
+                    { /* eslint-disable-next-line react/jsx-no-target-blank -- I love seeing the referrer myself so I will give it to others */}
                     <a href={props.comparison.expectedSource} target="_blank" rel="noopener">Source of Expected</a>
                 </CardText>
                 <Graph comparison={props.comparison} />

app/utils/drawGraph.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable unicorn/prefer-ternary */
-// @ts-nocheck
 import React from 'react';
 import * as d3 from 'd3';
 import { GraphData } from './downloadGraphData';

app/vite-env.d.ts

@@ -0,0 +1,4 @@
+/* eslint-disable unicorn/filename-case */
+/* eslint-disable unicorn/prevent-abbreviations */
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />

app/index.html → index.html

@@ -12,27 +12,41 @@
     <meta property="og:title" content="Is OSM Complete?" />
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://wvanderp.github.io/isOsmComplete/" />
-    <meta property="og:image" content="https://wvanderp.github.io/isOsmComplete/og-image.png" />
+    <meta property="og:image" content="./static/apple-touch-icon.png" />
+    <meta property="og:image:width" content="180" />
+    <meta property="og:image:height" content="180" />
+    <meta property="og:description"
+        content="Is OSM Complete? This website shows the completeness of OpenStreetMap data." />
 
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:title" content="Is OSM Complete?" />
     <meta name="twitter:description" content="" />
-    <meta name="twitter:image" content="https://wvanderp.github.io/isOsmComplete/og-image.png" />
+    <meta name="twitter:image" content="./static/apple-touch-icon.png" />
 
     <meta name="robots" content="index, follow" />
     <meta name="googlebot" content="index, follow" />
 
     <link rel="canonical" href="https://wvanderp.github.io/isOsmComplete/" />
 
-    <link rel="apple-touch-icon" sizes="180x180" href="../static/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="../static/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="../static/favicon-16x16.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="./static/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="./static/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="./static/favicon-16x16.png">
+
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-6B39FSVW2G"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag() { dataLayer.push(arguments); }
+        gtag('js', new Date());
+
+        gtag('config', 'G-6B39FSVW2G');
+    </script>
 </head>
 
 
 <body>
     <div id="app"></div>
-    <script src="index.tsx" type="module"></script>
+    <script src="./app/index.tsx" type="module"></script>
 </body>
 
 </html>