style: prettier

placekit · Dec 10, 2023 · cb0c638 · cb0c638
1 parent a9ac35b
commit cb0c638
Show file tree

Hide file tree

Showing 111 changed files with 1,246 additions and 948 deletions.
diff --git a/.eslintrc.yml b/.eslintrc.yml
@@ -0,0 +1,16 @@
+root: true
+extends:
+  - prettier
+plugins:
+  - prettier
+settings:
+  react:
+    version: detect
+parserOptions:
+  ecmaVersion: latest
+  ecmaFeatures:
+    jsx: true
+  sourceType: module
+rules:
+  prettier/prettier: error
+  no-unused-vars: off
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -18,4 +18,4 @@ jobs:
           cache: 'npm'
           cache-dependency-path: '**/package-lock.json'
       - run: npm ci --ignore-scripts
-      - run: npm run lint
+      - run: npm run lint
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,7 @@
+.github
+node_modules
+dist
+build
+.svelte-kit
+.vercel
+.output
diff --git a/.prettierrc.yml b/.prettierrc.yml
@@ -0,0 +1,2 @@
+singleQuote: true
+printWidth: 100
diff --git a/README.md b/README.md
@@ -1,6 +1,14 @@
-# PlaceKit examples
+<h1 align="center">
+  PlaceKit implementation examples
+</h1>
 
-We're only using [TailwindCSS](https://tailwindcss.com) as a convenience for the basic styling of the examples.
+<div align="center">
+
+[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://githubbox.com/placekit/examples)
+
+</div>
+
+---
 
 ## Installing and running examples
 
@@ -23,7 +31,12 @@ Reminder: **never commit an API key.**
 Then run:
 
 ```sh
-npm run dev -w=examples/<exampleDir>
+npm run dev -w=<example-dir-name>
 ```
 
-replacing `<exampleDir>` with the directory name of the example you want to try.
+replacing `<example-dir-name>` with the directory name of the example you want to try.
+
+## Notes
+
+- We're only using [TailwindCSS](https://tailwindcss.com) as a convenience for the basic styling of the examples.
+- To turn on dark mode on autocomplete, add `.dark` class or `data-theme="dark"` to `<body>` in any autocomplete example.
diff --git a/list-examples.js → build-index.js b/list-examples.js → build-index.js
@@ -1,8 +1,8 @@
 import fs from 'node:fs';
 import path from 'node:path';
 import { stringify } from 'yaml';
-import rootPackage from './package.json' assert {type: 'json'};
 
+const rootPackage = JSON.parse(fs.readFileSync('./package.json'));
 const repoURL = new URL(rootPackage.homepage);
 repoURL.hash = '';
 
@@ -18,7 +18,9 @@ const baseURL = path.join(repoURL.href, 'tree/main', examplesPath);
 
 for (const exampleDir of fs.readdirSync(examplesPath, { withFileTypes: true })) {
   if (exampleDir.isDirectory()) {
-    for (const exampleFile of fs.readdirSync(path.join(exampleDir.path, exampleDir.name), { withFileTypes: true })) {
+    for (const exampleFile of fs.readdirSync(path.join(exampleDir.path, exampleDir.name), {
+      withFileTypes: true,
+    })) {
       if (exampleFile.name === 'package.json') {
         const packagePath = path.join(exampleFile.path, exampleFile.name);
         const packageRaw = fs.readFileSync(packagePath);
@@ -34,4 +36,6 @@ for (const exampleDir of fs.readdirSync(examplesPath, { withFileTypes: true }))
   }
 }
 
-fs.writeFileSync('examples.yml', stringify(output));
+const outputFile = 'examples-index.yml';
+fs.writeFileSync(outputFile, stringify(output));
+console.log(`✅ ${outputFile} is up to date!`);
diff --git a/examples.yml → examples-index.yml b/examples.yml → examples-index.yml
@@ -52,13 +52,6 @@ examples:
       - vanilla-js
       - front-end
       - autocomplete-js
-  - slug: autocomplete-js-geolocation-dark
-    url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-js-geolocation-dark
-    description: Address autocomplete in dark mode with user's geolocation
-    keywords:
-      - vanilla-js
-      - front-end
-      - autocomplete-js
   - slug: autocomplete-js-leaflet
     url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-js-leaflet
     description: Address search on map with Leaflet

diff --git a/examples/autocomplete-js-address-form/README.md b/examples/autocomplete-js-address-form/README.md
@@ -1,6 +1,6 @@
 # Auto-fill form with address autocomplete with PlaceKit Autocomplete JS
 
-[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://githubbox\.com/placekit/examples/tree/main/examples/autocomplete-js-address-form)
+[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://githubbox.com/placekit/examples/tree/main/examples/autocomplete-js-address-form)
 
 Automatically fill address form fields with [PlaceKit Autocomplete JS](https://github.com/placekit/autocomplete-js), speeding up e-commerce user's checkout funnel and increasing conversions.
 
@@ -9,7 +9,7 @@ Automatically fill address form fields with [PlaceKit Autocomplete JS](https://g
 See [../../README.md](root README) for installation process.
 
 ```sh
-npm run dev -w=examples/autocomplete-js-address-form
+npm run dev -w=autocomplete-js-address-form
 ```
 
-And your project will be served at http://localhost:5173.
+And your project will be served at http://localhost:5173.
diff --git a/examples/autocomplete-js-address-form/src/index.html b/examples/autocomplete-js-address-form/src/index.html
@@ -1,56 +1,51 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width" />
-  <title>Auto-fill form with address autocomplete with PlaceKit Autocomplete JS</title>
-</head>
-<body class="bg-gray-50 px-4 py-8 lg:p-16">
-  <form id="form" class="max-w-xl mx-auto grid sm:grid-cols-3 gap-6 p-6 rounded-lg bg-white shadow-lg">
-    <div class="space-y-1 col-span-full">
-      <label for="address" class="block text-sm font-medium text-gray-700">
-        Address
-      </label>
-      <input
-        type="search"
-        name="address"
-        placeholder="Search place..."
-        class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
-        id="placekit-input"
-      />
-    </div>
-    <div class="space-y-1">
-      <label for="city" class="block text-sm font-medium text-gray-700">
-        City
-      </label>
-      <input
-        type="text"
-        name="city"
-        class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
-      />
-    </div>
-    <div class="space-y-1">
-      <label for="zipcode" class="block text-sm font-medium text-gray-700">
-        ZIP Code
-      </label>
-      <input
-        type="text"
-        name="zipcode"
-        class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
-      />
-    </div>
-    <div class="space-y-1">
-      <label for="country" class="block text-sm font-medium text-gray-700">
-        Country
-      </label>
-      <input
-        type="text"
-        name="country"
-        class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
-      />
-    </div>
-  </form>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Auto-fill form with address autocomplete with PlaceKit Autocomplete JS</title>
+  </head>
+  <body class="bg-gray-50 px-4 py-8 lg:p-16">
+    <form
+      id="form"
+      class="max-w-xl mx-auto grid sm:grid-cols-3 gap-6 p-6 rounded-lg bg-white shadow-lg"
+    >
+      <div class="space-y-1 col-span-full">
+        <label for="address" class="block text-sm font-medium text-gray-700"> Address </label>
+        <input
+          type="search"
+          name="address"
+          placeholder="Search place..."
+          class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
+          id="placekit-input"
+        />
+      </div>
+      <div class="space-y-1">
+        <label for="city" class="block text-sm font-medium text-gray-700"> City </label>
+        <input
+          type="text"
+          name="city"
+          class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
+        />
+      </div>
+      <div class="space-y-1">
+        <label for="zipcode" class="block text-sm font-medium text-gray-700"> ZIP Code </label>
+        <input
+          type="text"
+          name="zipcode"
+          class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
+        />
+      </div>
+      <div class="space-y-1">
+        <label for="country" class="block text-sm font-medium text-gray-700"> Country </label>
+        <input
+          type="text"
+          name="country"
+          class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
+        />
+      </div>
+    </form>
 
-  <script type="module" src="main.js"></script>
-</body>
-</html>
+    <script type="module" src="main.js"></script>
+  </body>
+</html>
diff --git a/examples/autocomplete-js-address-form/src/main.js b/examples/autocomplete-js-address-form/src/main.js
@@ -14,4 +14,4 @@ pka.on('pick', (value, item) => {
   for (const name of ['city', 'zipcode', 'country']) {
     form.querySelector(`input[name="${name}"]`).value = [].concat(item[name]).join(',');
   }
-});
+});
diff --git a/examples/autocomplete-js-basic/README.md b/examples/autocomplete-js-basic/README.md
@@ -1,6 +1,6 @@
 # Basic address autocomplete with PlaceKit Autocomplete JS
 
-[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://githubbox\.com/placekit/examples/tree/main/examples/autocomplete-js-basic)
+[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://githubbox.com/placekit/examples/tree/main/examples/autocomplete-js-basic)
 
 Basic address autocomplete with [PlaceKit Autocomplete JS](https://github.com/placekit/autocomplete-js).
 
@@ -9,7 +9,7 @@ Basic address autocomplete with [PlaceKit Autocomplete JS](https://github.com/pl
 See [../../README.md](root README) for installation process.
 
 ```sh
-npm run dev -w=examples/autocomplete-js-basic
+npm run dev -w=autocomplete-js-basic
 ```
 
-And your project will be served at http://localhost:5173.
+And your project will be served at http://localhost:5173.
diff --git a/examples/autocomplete-js-basic/src/index.html b/examples/autocomplete-js-basic/src/index.html
@@ -1,21 +1,21 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width" />
-  <title>Basic address autocomplete with PlaceKit Autocomplete JS</title>
-</head>
-<body class="py-32 bg-slate-50">
-  <main class="max-w-md mx-auto">
-    <input
-      type="search"
-      name="place"
-      placeholder="Search place..."
-      class="pka-input w-full"
-      id="placekit-input"
-    />
-  </main>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Basic address autocomplete with PlaceKit Autocomplete JS</title>
+  </head>
+  <body class="py-32 bg-slate-50">
+    <main class="max-w-md mx-auto">
+      <input
+        type="search"
+        name="place"
+        placeholder="Search place..."
+        class="pka-input w-full"
+        id="placekit-input"
+      />
+    </main>
 
-  <script type="module" src="main.js"></script>
-</body>
-</html>
+    <script type="module" src="main.js"></script>
+  </body>
+</html>
diff --git a/examples/autocomplete-js-cdn/README.md b/examples/autocomplete-js-cdn/README.md
@@ -1,6 +1,6 @@
 # Basic address autocomplete with PlaceKit Autocomplete JS from CDN
 
-[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://githubbox\.com/placekit/examples/tree/main/examples/autocomplete-js-cdn)
+[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://githubbox.com/placekit/examples/tree/main/examples/autocomplete-js-cdn)
 
 Basic address autocomplete with [PlaceKit Autocomplete JS](https://github.com/placekit/autocomplete-js) loaded from the [JSDeliver CDN](https://www.jsdelivr.com/package/npm/@placekit/autocomplete-js). Any other Autocomplete JS example would work with PlaceKit Autocomplete JS loaded from CDN.
 
@@ -11,7 +11,7 @@ Basic address autocomplete with [PlaceKit Autocomplete JS](https://github.com/pl
 See [../../README.md](root README) for installation process.
 
 ```sh
-npm run dev -w=examples/autocomplete-js-cdn
+npm run dev -w=autocomplete-js-cdn
 ```
 
-And your project will be served at http://localhost:5173.
+And your project will be served at http://localhost:5173.