├── .env.example ├── .github └── workflows │ └── deploy.yml ├── .gitignore ├── .prettierrc ├── README.md ├── package-lock.json ├── package.json └── src ├── components ├── App.svelte ├── InstagramEmbed.svelte ├── List.svelte ├── Map.svelte ├── consts.js └── stores.js ├── img ├── amsterdam.svg └── favicon.ico ├── index.html └── main.js /.env.example: -------------------------------------------------------------------------------- 1 | MAPBOX_ACCESS_TOKEN=asdf -------------------------------------------------------------------------------- /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: Build and Deploy 2 | on: 3 | push: 4 | branches: 5 | - master 6 | env: 7 | MAPBOX_ACCESS_TOKEN: ${{ secrets.MAPBOX_ACCESS_TOKEN }} 8 | jobs: 9 | build-and-deploy: 10 | runs-on: ubuntu-latest 11 | steps: 12 | - name: Checkout 🛎️ 13 | uses: actions/checkout@v2.3.1 14 | with: 15 | persist-credentials: false 16 | 17 | - name: Install and Build 🔧 18 | run: | 19 | npm install 20 | npm run build-github 21 | 22 | - name: Deploy 🚀 23 | uses: JamesIves/github-pages-deploy-action@3.7.1 24 | with: 25 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 26 | BRANCH: gh-pages # The branch the action should deploy to. 27 | FOLDER: public # The folder the action should deploy. 28 | CLEAN: true # Automatically remove deleted files from the deploy branch -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .cache 2 | public 3 | node_modules 4 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "svelteSortOrder": "styles-scripts-markup", 3 | "svelteStrictMode": true, 4 | "svelteBracketNewLine": true, 5 | "svelteAllowShorthand": false, 6 | "singleQuote": true 7 | } 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # svelte-reactive-map-list 2 | 3 | As part of a Svelte [tutorial](https://dev.to/bryce/an-interactive-scrolling-map-list-in-svelte-34c3). 4 | 5 | [![Build and Deploy](https://github.com/brycedorn/svelte-reactive-map-list/actions/workflows/deploy.yml/badge.svg)](https://github.com/brycedorn/svelte-reactive-map-list/actions/workflows/deploy.yml) 6 | 7 | [Demo](https://brycedorn.github.io/svelte-reactive-map-list/). 8 | 9 | ## Local development 10 | 11 | ```bash 12 | cp .env.example .env 13 | npm install 14 | npm start 15 | ``` 16 | 17 | Navigate to [localhost:1234](http://localhost:1234). 18 | 19 | Hot reloading is enabled in Parcel by default; if you edit a file in `src` the page will reload with your changes. 20 | 21 | ## Deployment 22 | 23 | All commits to master branch trigger a CI build to push to GL pages. 24 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-reactive-map-list", 3 | "version": "1.0.0", 4 | "license": "MIT", 5 | "browserslist": [ 6 | "last 1 chrome versions" 7 | ], 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/brycedorn/svelte-reactive-map-list.git" 11 | }, 12 | "scripts": { 13 | "start": "parcel src/index.html --out-dir public", 14 | "build": "parcel build src/index.html --out-dir public", 15 | "build-github": "parcel build src/index.html --out-dir public --public-url https://bryce.io/svelte-reactive-map-list/ --no-source-maps" 16 | }, 17 | "devDependencies": { 18 | "parcel-bundler": "^1.12.4", 19 | "parcel-plugin-svelte": "^4.0.4", 20 | "prettier": "^1.19.1", 21 | "prettier-plugin-svelte": "^0.7.0" 22 | }, 23 | "dependencies": { 24 | "in-view": "^0.6.1", 25 | "mapbox-gl": "^1.6.0", 26 | "svelte": "^3.12.1" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/components/App.svelte: -------------------------------------------------------------------------------- 1 | 24 | 25 | 29 | 30 |
31 |
32 | 33 |
34 |
35 | 36 |
37 |
38 | -------------------------------------------------------------------------------- /src/components/InstagramEmbed.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 12 | 13 |
14 |
15 |
16 | 17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 |
36 |
37 |
View this post on Instagram
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 | 61 |

A post shared by {name}

62 |
63 |
64 |
-------------------------------------------------------------------------------- /src/components/List.svelte: -------------------------------------------------------------------------------- 1 | 70 | 71 | 113 | 114 |
115 |
116 |

117 | Where To Drink Coffee In Amsterdam 118 | Flag of Amsterdam 119 |

120 |

121 | Created as part of a Svelte 122 | tutorial on dev.to. 123 | View source on GitHub. 124 |

125 |
126 |
127 | {#each listItems as listItem, index} 128 |
129 | 130 |

{listItem.name}

131 | 132 |

{listItem.description}

133 | 134 |
135 | {#if index < listItems.length} 136 |
137 | {/if} 138 | {/each} 139 |
140 | -------------------------------------------------------------------------------- /src/components/Map.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 | 108 | 109 |
110 | -------------------------------------------------------------------------------- /src/components/consts.js: -------------------------------------------------------------------------------- 1 | export const accessToken = process.env.MAPBOX_ACCESS_TOKEN; 2 | 3 | export const listItems = [ 4 | { 5 | name: 'Screaming Beans', 6 | address: 'Runstraat 6, 1016 GK Amsterdam', 7 | website: 'https://screamingbeans.nl', 8 | instagramPostId: 'CkiTrnqIsOY', 9 | description: 'A specialty coffee brand with a shop in the middle of Amsterdam\'s "9 Straatjes" area. My personal favorite in the city, friendly baristas and in a beautiful area with picturesque canals and great shopping.', 10 | coordinates: [4.8838909,52.3689601] 11 | }, 12 | { 13 | name: 'Lot61', 14 | address: 'Kinkerstraat 112, 1053 ED Amsterdam', 15 | website: 'https://lot61.com', 16 | instagramPostId: 'B6LLBg1ji6F', 17 | description: 'Aussie-owned coffee roastery in Oud West neighborhood. Try the espresso tonic if you\'re feeling adventurous!', 18 | coordinates: [4.8697435,52.3668576] 19 | }, 20 | { 21 | name: 'Bocca', 22 | address: 'Kerkstraat 96H, 1017 GP Amsterdam', 23 | website: 'http://bocca.nl', 24 | instagramPostId: 'CeBCh9KqLL9', 25 | description: 'A stylish cafe in Leidseplein area serving specialty coffee and great baked goods. They offer coffee-related classes as well.', 26 | coordinates: [4.8860656,52.3621997] 27 | }, 28 | { 29 | name: 'Bakers & Roasters', 30 | address: 'Eerste Jacob van Campenstraat 54, 1072 BH Amsterdam', 31 | website: 'http://bakersandroasters.com', 32 | instagramPostId: 'BetaFQvHBnl', 33 | description: 'Arguably the best place to get brunch in the city. Join the waitlist early on the weekend, otherwise great place to get a coffee during off-peak times.', 34 | coordinates: [4.8888429,52.3571478] 35 | }, 36 | { 37 | name: 'Toki', 38 | address: 'Binnen Dommersstraat 15, 1013 HK Amsterdam', 39 | website: 'http://www.tokiho.amsterdam', 40 | instagramPostId: 'BWPUHphH-fI', 41 | description: 'A chill cafe with industrial feel near Westerpark. In a less touristy neighborhood, perfect for a more local vibe.', 42 | coordinates: [4.8835502,52.3806378] 43 | }, 44 | ]; 45 | -------------------------------------------------------------------------------- /src/components/stores.js: -------------------------------------------------------------------------------- 1 | import { writable } from 'svelte/store'; 2 | 3 | export const activeListItem = writable(0); 4 | export const activeMapItem = writable(0); 5 | -------------------------------------------------------------------------------- /src/img/amsterdam.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brycedorn/svelte-reactive-map-list/bf1191b347c3f3f535b6b8eb1fc08c5c88c67e5f/src/img/favicon.ico -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Svelte Dynamic Map List 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import App from './components/App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; --------------------------------------------------------------------------------