mirror of
https://github.com/Brandon-Rozek/website.git
synced 2024-11-24 00:56:32 -05:00
Added new tracks section to website
This commit is contained in:
parent
55c64b0d8f
commit
63fda4b333
9 changed files with 11268 additions and 8 deletions
|
@ -32,11 +32,11 @@ Popular applications such as AllTrails and Strava allow you to export your activ
|
||||||
## Grabbing an embed
|
## Grabbing an embed
|
||||||
|
|
||||||
To create the embed we will use a project called [gpx.studio](https://gpx.studio). It's a great [open source](https://github.com/gpxstudio/gpxstudio.github.io) project created by vcoppe on GitHub and built on top of [Mapbox](https://www.mapbox.com/) and [OpenStreetMap](https://www.openstreetmap.org/). If you end up using this application, consider providing a [donation](https://ko-fi.com/gpxstudio) to their developer to cover for some of the hosting and API costs.
|
To create the embed we will use a project called [gpx.studio](https://gpx.studio). It's a great [open source](https://github.com/gpxstudio/gpxstudio.github.io) project created by vcoppe on GitHub and built on top of [Mapbox](https://www.mapbox.com/) and [OpenStreetMap](https://www.openstreetmap.org/). If you end up using this application, consider providing a [donation](https://ko-fi.com/gpxstudio) to their developer to cover for some of the hosting and API costs.
|
||||||
Our next step is to upload the GPX file we recorded from our exercise onto our website and configure our webserver so that gpx.studio can access the file. I store my hikes in `data/hikes` and created the following Nginx rule:
|
Our next step is to upload the GPX file we recorded from our exercise onto our website and configure our webserver so that gpx.studio can access the file. I store my hikes in `data/tracks` and created the following Nginx rule:
|
||||||
|
|
||||||
```nginx
|
```nginx
|
||||||
# Allow any application access
|
# Allow any application access
|
||||||
location /data/hikes {
|
location /data/tracks {
|
||||||
add_header Access-Control-Allow-Origin "*";
|
add_header Access-Control-Allow-Origin "*";
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
@ -45,12 +45,12 @@ Next, go to the [gpx.studio about page](https://gpx.studio/about.html#embed) to
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<iframe
|
<iframe
|
||||||
src="https://gpx.studio/?state=%7B%22urls%22:%5B%22https%3A%2F%2Fbrandonrozek.com%2Fdata%2Fhikes%2F2022-05-18-Burden-Pond-Preserve.gpx%22%5D%7D&embed&distance"
|
src="https://gpx.studio/?state=%7B%22urls%22:%5B%22https%3A%2F%2Fbrandonrozek.com%2Fdata%2Ftracks%2F2022-05-18-Burden-Pond-Preserve.gpx%22%5D%7D&embed&distance"
|
||||||
width="100%"
|
width="100%"
|
||||||
height="500"
|
height="500"
|
||||||
frameborder="0"
|
frameborder="0"
|
||||||
allowfullscreen>
|
allowfullscreen>
|
||||||
<p><a href="https://gpx.studio/?state=%7B%22urls%22:%5B%22https%3A%2F%2Fbrandonrozek.com%2Fdata%2Fhikes%2F2022-05-18-Burden-Pond-Preserve.gpx%22%5D%7D"></a></p>
|
<p><a href="https://gpx.studio/?state=%7B%22urls%22:%5B%22https%3A%2F%2Fbrandonrozek.com%2Fdata%2Ftracks%2F2022-05-18-Burden-Pond-Preserve.gpx%22%5D%7D"></a></p>
|
||||||
</iframe>
|
</iframe>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -64,15 +64,15 @@ So what's the structure of the URLs? If we perform an URL decode on the IFrame U
|
||||||
|
|
||||||
```
|
```
|
||||||
https://gpx.studio/?
|
https://gpx.studio/?
|
||||||
state={"urls":["https://brandonrozek.com/data/hikes/2022-05-18-Burden-Pond-Preserve.gpx"]}
|
state={"urls":["https://brandonrozek.com/data/tracks/2022-05-18-Burden-Pond-Preserve.gpx"]}
|
||||||
&embed&distance
|
&embed&distance
|
||||||
```
|
```
|
||||||
|
|
||||||
We can then replace the URL in the array with the one that you'll use for your website. Since I'm sticking all my GPX files under https://brandonrozek.com/data/hikes, I only have to pass the filename into the shortcode which is stored under `layouts/shortcodes/displayGPX.html`.
|
We can then replace the URL in the array with the one that you'll use for your website. Since I'm sticking all my GPX files under https://brandonrozek.com/data/tracks, I only have to pass the filename into the shortcode which is stored under `layouts/shortcodes/displayGPX.html`.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<!-- Grab the filename and append it to the base url -->
|
<!-- Grab the filename and append it to the base url -->
|
||||||
{{ $url := printf "%sdata/hikes/%s" .Site.BaseURL (.Get 0) }}
|
{{ $url := printf "%sdata/tracks/%s" .Site.BaseURL (.Get 0) }}
|
||||||
<!-- Make the state={...} URL friendly -->
|
<!-- Make the state={...} URL friendly -->
|
||||||
{{ $url_state := querify "state" (printf "{\"urls\":[\"%s\"]}" $url) }}
|
{{ $url_state := querify "state" (printf "{\"urls\":[\"%s\"]}" $url) }}
|
||||||
<!-- Create the Iframe and A tag URLs -->
|
<!-- Create the Iframe and A tag URLs -->
|
||||||
|
|
6
content/tracks/Burden-Pond-Preserve-2022-05-18.md
Normal file
6
content/tracks/Burden-Pond-Preserve-2022-05-18.md
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
---
|
||||||
|
title: "Burden Pond Preserve"
|
||||||
|
date: 2022-05-18T15:32:30-04:00
|
||||||
|
draft: false
|
||||||
|
gpx: "2022-05-18-Burden-Pond-Preserve.gpx"
|
||||||
|
---
|
6
content/tracks/New-York-Botanical-Garden-2022-05-29.md
Normal file
6
content/tracks/New-York-Botanical-Garden-2022-05-29.md
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
---
|
||||||
|
title: "New York Botanical Garden"
|
||||||
|
date: 2022-05-29T12:30:11-04:00
|
||||||
|
draft: false
|
||||||
|
gpx: "2022-05-29-New-York-Botanical-Garden.gpx"
|
||||||
|
---
|
7
content/tracks/_index.md
Normal file
7
content/tracks/_index.md
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
---
|
||||||
|
title: Tracks
|
||||||
|
description: "
|
||||||
|
These are tracks of walks and other
|
||||||
|
activities that Brandon has been on.
|
||||||
|
"
|
||||||
|
---
|
6
content/tracks/kensico-dam-staircase-loop-2022-05-28.md
Normal file
6
content/tracks/kensico-dam-staircase-loop-2022-05-28.md
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
---
|
||||||
|
title: "Kensico Dam Staircase Loop"
|
||||||
|
date: 2022-05-28T16:05:54-04:00
|
||||||
|
draft: false
|
||||||
|
gpx: "2022-05-28-Kensico-Dam-Staircase-Loop.gpx"
|
||||||
|
---
|
1239
static/data/tracks/2022-05-28-Kensico-Dam-Staircase-Loop.gpx
Normal file
1239
static/data/tracks/2022-05-28-Kensico-Dam-Staircase-Loop.gpx
Normal file
File diff suppressed because it is too large
Load diff
9996
static/data/tracks/2022-05-29-New-York-Botanical-Garden.gpx
Normal file
9996
static/data/tracks/2022-05-29-New-York-Botanical-Garden.gpx
Normal file
File diff suppressed because it is too large
Load diff
|
@ -1 +1 @@
|
||||||
Subproject commit b3373844ab4e6773d393db4b86e13bc8a462a113
|
Subproject commit b663bb802886775eb8353e5a94d1de73ba9ba767
|
Loading…
Reference in a new issue