-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 743ebe3
Showing
161 changed files
with
9,807 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| VITE_PLACEKIT_API_KEY=<your-public-api-key> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| name: CI | ||
|
|
||
| on: | ||
| push: | ||
| branches: | ||
| - main | ||
| pull_request: | ||
|
|
||
| jobs: | ||
| run: | ||
| name: Lint | ||
| runs-on: ubuntu-latest | ||
| steps: | ||
| - uses: actions/checkout@v3 | ||
| - uses: actions/setup-node@v3 | ||
| with: | ||
| node-version: 18 | ||
| cache: 'npm' | ||
| cache-dependency-path: '**/package-lock.json' | ||
| - run: npm ci --ignore-scripts | ||
| - run: npm run lint |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. | ||
|
|
||
| # misc | ||
| .DS_Store | ||
| /demos | ||
| /NOTES.md | ||
|
|
||
| # local env files | ||
| .env*.local | ||
|
|
||
| # dependencies | ||
| node_modules | ||
|
|
||
| # log files | ||
| *.log* | ||
| vite.config.js.timestamp-* | ||
| vite.config.ts.timestamp-* | ||
|
|
||
| # cache & build | ||
| dist | ||
| build | ||
| .svelte-kit | ||
| .vercel | ||
| .output |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| .github | ||
| node_modules | ||
| dist | ||
| build | ||
| .svelte-kit | ||
| .vercel | ||
| .output |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| singleQuote: true | ||
| printWidth: 100 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| <h1 align="center"> | ||
| PlaceKit implementation examples | ||
| </h1> | ||
|
|
||
| <p align="center"> | ||
| <b>Implementation examples for most common stacks and use-cases.</b> | ||
| </p> | ||
|
|
||
| <div align="center"> | ||
|
|
||
| [](https://githubbox.com/placekit/examples) | ||
|
|
||
| </div> | ||
|
|
||
| --- | ||
|
|
||
| ## Installing and running examples | ||
|
|
||
| ```sh | ||
| # clone project and access this example | ||
| git clone [email protected]:placekit/examples.git placekit-examples | ||
| cd placekit-examples | ||
|
|
||
| # install dependencies | ||
| npm install | ||
|
|
||
| # create .env file | ||
| cp .env .env.local | ||
| ``` | ||
|
|
||
| Open the `.env.local` file and replace `<your-api-key>` with a PlaceKit API key. | ||
|
|
||
| Reminder: **never commit an API key.** | ||
|
|
||
| Then run: | ||
|
|
||
| ```sh | ||
| npm run dev -w=<example-dir-name> | ||
| ``` | ||
|
|
||
| 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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import fs from 'node:fs'; | ||
| import path from 'node:path'; | ||
| import { stringify } from 'yaml'; | ||
|
|
||
| const rootPackage = JSON.parse(fs.readFileSync('./package.json')); | ||
| const repoURL = new URL(rootPackage.homepage); | ||
| repoURL.hash = ''; | ||
|
|
||
| const output = { | ||
| name: 'PlaceKit implementation examples', | ||
| url: repoURL.href, | ||
| author: rootPackage.author, | ||
| examples: [], | ||
| }; | ||
|
|
||
| const examplesPath = 'examples'; | ||
| 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, | ||
| })) { | ||
| if (exampleFile.name === 'package.json') { | ||
| const packagePath = path.join(exampleFile.path, exampleFile.name); | ||
| const packageRaw = fs.readFileSync(packagePath); | ||
| const packageJSON = JSON.parse(packageRaw); | ||
| output.examples.push({ | ||
| slug: exampleDir.name, | ||
| url: path.join(baseURL, exampleDir.name), | ||
| description: packageJSON.description, | ||
| keywords: packageJSON.keywords, | ||
| }); | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| const outputFile = 'examples-index.yml'; | ||
| fs.writeFileSync(outputFile, stringify(output)); | ||
| console.log(`✅ ${outputFile} is up to date!`); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,194 @@ | ||
| name: PlaceKit implementation examples | ||
| url: https://github.com/placekit/examples | ||
| author: PlaceKit <[email protected]> | ||
| examples: | ||
| - slug: autocomplete-js-address-form | ||
| url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-js-address-form | ||
| description: Auto-fill form with address autocomplete | ||
| keywords: | ||
| - vanilla-js | ||
| - front-end | ||
| - autocomplete-js | ||
| - slug: autocomplete-js-basic | ||
| url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-js-basic | ||
| description: Basic address autocomplete | ||
| keywords: | ||
| - vanilla-js | ||
| - front-end | ||
| - autocomplete-js | ||
| - slug: autocomplete-js-cdn | ||
| url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-js-cdn | ||
| description: Basic address autocomplete | ||
| keywords: | ||
| - vanilla-js | ||
| - front-end | ||
| - autocomplete-js | ||
| - cdn | ||
| - slug: autocomplete-js-cities | ||
| url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-js-cities | ||
| description: Global city search | ||
| keywords: | ||
| - vanilla-js | ||
| - front-end | ||
| - autocomplete-js | ||
| - slug: autocomplete-js-countries | ||
| url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-js-countries | ||
| description: Countries search | ||
| keywords: | ||
| - vanilla-js | ||
| - front-end | ||
| - autocomplete-js | ||
| - slug: autocomplete-js-countries-whitelist | ||
| url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-js-countries-whitelist | ||
| description: Address autocomplete with countries whitelist | ||
| keywords: | ||
| - vanilla-js | ||
| - front-end | ||
| - autocomplete-js | ||
| - slug: autocomplete-js-geolocation | ||
| url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-js-geolocation | ||
| description: Address autocomplete 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 | ||
| keywords: | ||
| - vanilla-js | ||
| - front-end | ||
| - autocomplete-js | ||
| - leaflet | ||
| - slug: autocomplete-js-svelte | ||
| url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-js-svelte | ||
| description: Svelte autocomplete component | ||
| keywords: | ||
| - svelte | ||
| - front-end | ||
| - autocomplete-js | ||
| - slug: autocomplete-js-typescript | ||
| url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-js-typescript | ||
| description: Address autocomplete with user's geolocation | ||
| keywords: | ||
| - typescript | ||
| - front-end | ||
| - autocomplete-js | ||
| - slug: autocomplete-js-vue | ||
| url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-js-vue | ||
| description: Vue autocomplete component | ||
| keywords: | ||
| - vue | ||
| - front-end | ||
| - autocomplete-js | ||
| - slug: autocomplete-react-address-form | ||
| url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-react-address-form | ||
| description: Auto-fill form with address autocomplete | ||
| keywords: | ||
| - react | ||
| - front-end | ||
| - autocomplete-js | ||
| - slug: autocomplete-react-basic | ||
| url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-react-basic | ||
| description: Basic address autocomplete | ||
| keywords: | ||
| - react | ||
| - front-end | ||
| - autocomplete-js | ||
| - slug: autocomplete-react-cities | ||
| url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-react-cities | ||
| description: Global city search | ||
| keywords: | ||
| - react | ||
| - front-end | ||
| - autocomplete-js | ||
| - slug: autocomplete-react-countries | ||
| url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-react-countries | ||
| description: Countries search | ||
| keywords: | ||
| - react | ||
| - front-end | ||
| - autocomplete-js | ||
| - slug: autocomplete-react-countries-whitelist | ||
| url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-react-countries-whitelist | ||
| description: Address autocomplete with countries whitelist | ||
| keywords: | ||
| - react | ||
| - front-end | ||
| - autocomplete-js | ||
| - slug: autocomplete-react-leaflet | ||
| url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-react-leaflet | ||
| description: Address search on map with Leaflet | ||
| keywords: | ||
| - react | ||
| - front-end | ||
| - autocomplete-js | ||
| - leaflet | ||
| - slug: autocomplete-react-react-hook-form | ||
| url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-react-react-hook-form | ||
| description: Auto-fill form with address autocomplete in React Hook Form | ||
| keywords: | ||
| - react | ||
| - front-end | ||
| - autocomplete-js | ||
| - slug: autocomplete-react-typescript | ||
| url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-react-typescript | ||
| description: Auto-fill form with address autocomplete | ||
| keywords: | ||
| - typescript | ||
| - react | ||
| - front-end | ||
| - autocomplete-js | ||
| - slug: client-js-algolia-autocomplete | ||
| url: https:/github.com/placekit/examples/tree/main/examples/client-js-algolia-autocomplete | ||
| description: Custom address autocomplete with Algolia Autocomplete | ||
| keywords: | ||
| - vanilla-js | ||
| - front-end | ||
| - client-js | ||
| - slug: client-js-headlessui-react | ||
| url: https:/github.com/placekit/examples/tree/main/examples/client-js-headlessui-react | ||
| description: Custom address autocomplete with HeadlessUI React | ||
| keywords: | ||
| - react | ||
| - front-end | ||
| - client-js | ||
| - slug: client-js-headlessui-vue | ||
| url: https:/github.com/placekit/examples/tree/main/examples/client-js-headlessui-vue | ||
| description: Custom address autocomplete with HeadlessUI Vue | ||
| keywords: | ||
| - vue | ||
| - front-end | ||
| - client-js | ||
| - slug: client-js-node | ||
| url: https:/github.com/placekit/examples/tree/main/examples/client-js-node | ||
| description: Simple address search request | ||
| keywords: | ||
| - vanilla-js | ||
| - node-js | ||
| - back-end | ||
| - client-js | ||
| - slug: client-js-node-esm | ||
| url: https:/github.com/placekit/examples/tree/main/examples/client-js-node-esm | ||
| description: Simple address search request with ESM | ||
| keywords: | ||
| - vanilla-js | ||
| - node-js | ||
| - back-end | ||
| - client-js | ||
| - slug: client-js-node-express | ||
| url: https:/github.com/placekit/examples/tree/main/examples/client-js-node-express | ||
| description: Address search Express API route | ||
| keywords: | ||
| - express | ||
| - node-js | ||
| - back-end | ||
| - client-js | ||
| - slug: client-js-node-typescript | ||
| url: https:/github.com/placekit/examples/tree/main/examples/client-js-node-typescript | ||
| description: Simple address search request | ||
| keywords: | ||
| - typescript | ||
| - node-js | ||
| - back-end | ||
| - client-js |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| # Auto-fill form with address autocomplete with PlaceKit Autocomplete JS | ||
|
|
||
| [](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. | ||
|
|
||
| ## Run | ||
|
|
||
| See [../../README.md](root README) for installation process. | ||
|
|
||
| ```sh | ||
| npm run dev -w=autocomplete-js-address-form | ||
| ``` | ||
|
|
||
| And your project will be served at http://localhost:5173. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| { | ||
| "private": true, | ||
| "description": "Auto-fill form with address autocomplete", | ||
| "keywords": [ | ||
| "vanilla-js", | ||
| "front-end", | ||
| "autocomplete-js" | ||
| ], | ||
| "type": "module", | ||
| "scripts": { | ||
| "dev": "vite", | ||
| "build": "vite build", | ||
| "preview": "vite preview" | ||
| }, | ||
| "dependencies": { | ||
| "@placekit/autocomplete-js": "^2.1.6" | ||
| } | ||
| } |
Oops, something went wrong.