Reworking assets

resources/es6-orig/colours.js

@@ -0,0 +1,29 @@
+//colours.js
+
+let link = document.querySelector('#colourScheme');
+
+let css = link.getAttribute('href').split('/').pop();
+
+// update selected item in colour scheme list
+document.querySelector('#colourSchemeSelect [value="' + css + '"]').selected = true;
+
+// fix form
+let form = document.getElementById('colourSchemeForm');
+let btn = form.querySelector('button');
+btn.addEventListener('click', function (event) {
+    event.preventDefault();
+    let newCss = document.getElementById('colourSchemeSelect').value;
+    let css = link.getAttribute('href');
+    let parts = css.split('/');
+    parts.pop();
+    parts.push(newCss);
+    link.setAttribute('href', parts.join('/'));
+    let formData = new FormData(form);
+    fetch('/update-colour-scheme', {
+        method: 'POST',
+        credentials: 'same-origin',
+        body: formData
+    }).catch(function (error) {
+        console.warn(error);
+    });
+});

resources/es6-orig/edit-place-icon.js

@@ -0,0 +1,7 @@
+//edit-place-icon.js
+
+export default function getIcon() {
+    let iconOption = document.querySelector('#icon');
+
+    return iconOption.value;
+}

resources/es6-orig/links.js

@@ -0,0 +1,31 @@
+//links.js
+
+let youtubeRegex = /watch\?v=([A-Za-z0-9\-_]+)\b/;
+let spotifyRegex = /https:\/\/play\.spotify\.com\/(.*)\b/;
+
+let notes = document.querySelectorAll('.e-content');
+
+for (let note of notes) {
+    let ytid = note.textContent.match(youtubeRegex);
+    if (ytid) {
+        let ytcontainer = document.createElement('div');
+        ytcontainer.classList.add('container');
+        let ytiframe = document.createElement('iframe');
+        ytiframe.classList.add('youtube');
+        ytiframe.setAttribute('src', 'https://www.youtube.com/embed/' + ytid[1]);
+        ytiframe.setAttribute('frameborder', 0);
+        ytiframe.setAttribute('allowfullscreen', 'true');
+        ytcontainer.appendChild(ytiframe);
+        note.appendChild(ytcontainer);
+    }
+    let spotifyid = note.textContent.match(spotifyRegex);
+    if (spotifyid) {
+        let sid = spotifyid[1].replace('/', ':');
+        let siframe = document.createElement('iframe');
+        siframe.classList.add('spotify');
+        siframe.setAttribute('src', 'https://embed.spotify.com/?uri=spotify:' + sid);
+        siframe.setAttribute('frameborder', 0);
+        siframe.setAttribute('allowtransparency', 'true');
+        note.appendChild(siframe);
+    }
+}

resources/es6-orig/mapbox-utils.js

@@ -0,0 +1,192 @@
+//mapbox-utils.js
+import parseLocation from './parse-location';
+import selectPlaceInForm from './select-place';
+
+/*
+ * For specific lines on this file I have disabled the `no-undef`
+ * rule in ESLint. This is for the mapboxgl object which is defined
+ * in the mapbox-gl.js file that we pull in from their CDN before
+ * this script gets run.
+ */
+
+// eslint-disable-next-line no-undef
+mapboxgl.accessToken = 'pk.eyJ1Ijoiam9ubnliYXJuZXMiLCJhIjoiY2l2cDhjYW04MDAwcjJ0cG1uZnhqcm82ayJ9.qA2zeVA-nsoMh9IFrd5KQw';
+
+// Define some functions to be used in the default function.
+const titlecase = (string) => {
+    return string.split('-').map(([first,...rest]) => first.toUpperCase() + rest.join('').toLowerCase()).join(' ');
+};
+
+// Get the ID for the map, i.e. get the u-url of the containing note.
+const getId = (map) => {
+    let href = map._container.parentNode.querySelector('.u-url').getAttribute('href');
+    return href.substr(href.lastIndexOf('/') + 1);
+};
+
+const addMapTypeOption = (map, menu, option, checked = false) => {
+    let div = document.createElement('div');
+    let input = document.createElement('input');
+    let id = option + getId(map);
+    input.setAttribute('id', id);
+    input.setAttribute('type', 'radio');
+    input.setAttribute('name', 'map' + getId(map));
+    input.setAttribute('value', option);
+    if (checked == true) {
+        input.setAttribute('checked', 'checked');
+    }
+    input.addEventListener('click', function () {
+        let source = map.getSource('points');
+        map.setStyle('mapbox://styles/mapbox/' + option + '-v9');
+        map.on('style.load', function () {
+            map.addLayer({
+                'id': 'points',
+                'type': 'symbol',
+                'source': {
+                    'type': 'geojson',
+                    'data': source._data
+                },
+                'layout': {
+                    'icon-image': '{icon}-15',
+                    'text-field': '{title}',
+                    'text-offset': [0, 1]
+                }
+            });
+        });
+    });
+    let label = document.createElement('label');
+    label.setAttribute('for', option + getId(map));
+    label.appendChild(document.createTextNode(titlecase(option)));
+    div.appendChild(input);
+    div.appendChild(label);
+    menu.appendChild(div);
+};
+
+const makeMapMenu = (map) => {
+    let mapMenu = document.createElement('fieldset');
+    let legend = document.createElement('legend');
+    let title = document.createTextNode('Map Style');
+    legend.appendChild(title);
+    mapMenu.appendChild(legend);
+    mapMenu.classList.add('map-menu');
+    addMapTypeOption(map, mapMenu, 'streets', true);
+    addMapTypeOption(map, mapMenu, 'satellite-streets');
+    return mapMenu;
+};
+
+// The main function.
+export default function addMap(div, position = null, places = null) {
+    let data;
+    let dataLatitude = div.dataset.latitude;
+    let dataLongitude = div.dataset.longitude;
+    let dataName = div.dataset.name;
+    let dataMarker = div.dataset.marker;
+    if (dataMarker == '') {
+        dataMarker = 'circle';
+    }
+    if (dataName == null) {
+        data = {
+            'type': 'FeatureCollection',
+            'features': [{
+                'type': 'Feature',
+                'geometry': {
+                    'type': 'Point',
+                    'coordinates': [dataLongitude, dataLatitude]
+                },
+                'properties': {
+                    'title': 'Current Location',
+                    'icon': 'circle-stroked',
+                    'uri': 'current-location'
+                }
+            }]
+        };
+    } else {
+        data = {
+            'type': 'FeatureCollection',
+            'features': [{
+                'type': 'Feature',
+                'geometry': {
+                    'type': 'Point',
+                    'coordinates': [dataLongitude, dataLatitude]
+                },
+                'properties': {
+                    'title': dataName,
+                    'icon': dataMarker,
+                }
+            }]
+        };
+    }
+    if (places != null) {
+        for (let place of places) {
+            let placeLongitude = parseLocation(place.location).longitude;
+            let placeLatitude = parseLocation(place.location).latitude;
+            data.features.push({
+                'type': 'Feature',
+                'geometry': {
+                    'type': 'Point',
+                    'coordinates': [placeLongitude, placeLatitude]
+                },
+                'properties': {
+                    'title': place.name,
+                    'icon': 'circle',
+                    'uri': place.slug
+                }
+            });
+        }
+    }
+    if (position != null) {
+        dataLongitude = position.coords.longitude;
+        dataLatitude = position.coords.latitude;
+    }
+    // eslint-disable-next-line no-undef
+    let map = new mapboxgl.Map({
+        container: div,
+        style: 'mapbox://styles/mapbox/streets-v9',
+        center: [dataLongitude, dataLatitude],
+        zoom: 15
+    });
+    if (position == null) {
+        map.scrollZoom.disable();
+    }
+    // eslint-disable-next-line no-undef
+    map.addControl(new mapboxgl.NavigationControl());
+    div.appendChild(makeMapMenu(map));
+    map.on('load', function () {
+        map.addLayer({
+            'id': 'points',
+            'type': 'symbol',
+            'source': {
+                'type': 'geojson',
+                'data': data
+            },
+            'layout': {
+                'icon-image': '{icon}-15',
+                'text-field': '{title}',
+                'text-offset': [0, 1]
+            }
+        });
+    });
+    if (position != null) {
+        map.on('click', function (e) {
+            let features = map.queryRenderedFeatures(e.point, {
+                layer: ['points']
+            });
+            // if there are features within the given radius of the click event,
+            // fly to the location of the click event
+            if (features.length) {
+                // Get coordinates from the symbol and center the map on those coordinates
+                map.flyTo({center: features[0].geometry.coordinates});
+                selectPlaceInForm(features[0].properties.uri);
+            }
+        });
+    }
+    if (data.features && data.features.length > 1) {
+        // eslint-disable-next-line no-undef
+        let bounds = new mapboxgl.LngLatBounds();
+        for (let feature of data.features) {
+            bounds.extend(feature.geometry.coordinates);
+        }
+        map.fitBounds(bounds, { padding: 65});
+    }
+
+    return map;
+}

resources/es6-orig/maps.js

@@ -0,0 +1,8 @@
+//maps.js
+import addMap from './mapbox-utils';
+
+let mapDivs = document.querySelectorAll('.map');
+
+for (let div of mapDivs) {
+    addMap(div);
+}

resources/es6-orig/parse-location.js

@@ -0,0 +1,10 @@
+//parse-location.js
+
+//text = `POINT(lon lat)`
+export default function parseLocation(text) {
+    let coords = /POINT\((.*)\)/.exec(text);
+    let parsedLongitude = coords[1].split(' ')[0];
+    let parsedLatitude = coords[1].split(' ')[1];
+
+    return {'latitude': parsedLatitude, 'longitude': parsedLongitude};
+}

resources/es6-orig/piwik.js

@@ -0,0 +1,12 @@
+/* global process */
+
+// Piwik in its own js file to allow usage with a CSP policy
+var idSite = process.env.PIWIK_ID;
+var piwikTrackingApiUrl = process.env.PIWIK_URL;
+
+var _paq = _paq || [];
+// tracker methods like "setCustomDimension" should be called before "trackPageView"
+_paq.push(['setTrackerUrl', piwikTrackingApiUrl]);
+_paq.push(['setSiteId', idSite]);
+_paq.push(['trackPageView']);
+_paq.push(['enableLinkTracking']);

resources/es6-orig/places.js

@@ -0,0 +1,83 @@
+//places.js
+
+import addMap from './mapbox-utils';
+import getIcon from './edit-place-icon';
+
+let div = document.querySelector('.map');
+let map = addMap(div);
+let isDragging;
+let isCursorOverPoint;
+let canvas = map.getCanvasContainer();
+
+let selectElem = document.querySelector('select[name="icon"]');
+selectElem.addEventListener('click', function () {
+    let newIcon = getIcon();
+    let source = map.getSource('points');
+    if (source._data.features[0].properties.icon != newIcon) {
+        source._data.features[0].properties.icon = newIcon;
+        map.getSource('points').setData(source._data);
+    }
+});
+
+function updateFormCoords(coords) {
+    let latInput = document.querySelector('#latitude');
+    let lonInput = document.querySelector('#longitude');
+    latInput.value = coords.lat.toPrecision(6);
+    lonInput.value = coords.lng.toPrecision(6);
+}
+
+function mouseDown() {
+    if (!isCursorOverPoint) return;
+
+    isDragging = true;
+
+    // Set a cursor indicator
+    canvas.style.cursor = 'grab';
+
+    // Mouse events
+    map.on('mousemove', onMove);
+    map.once('mouseup', onUp);
+}
+
+function onMove(e) {
+    if (!isDragging) return;
+    let coords = e.lngLat;
+    let source = map.getSource('points');
+
+    // Set a UI indicator for dragging.
+    canvas.style.cursor = 'grabbing';
+
+    // Update the Point feature in `geojson` coordinates
+    // and call setData to the source layer `point` on it.
+    source._data.features[0].geometry.coordinates = [coords.lng, coords.lat];
+    map.getSource('points').setData(source._data);
+}
+
+function onUp(e) {
+    if (!isDragging) return;
+    let coords = e.lngLat;
+
+    // Print the coordinates of where the point had
+    // finished being dragged to on the map.
+    updateFormCoords(coords);
+    canvas.style.cursor = '';
+    isDragging = false;
+
+    // Unbind mouse events
+    map.off('mousemove', onMove);
+}
+
+// When the cursor enters a feature in the point layer, prepare for dragging.
+map.on('mouseenter', 'points', function() {
+    canvas.style.cursor = 'move';
+    isCursorOverPoint = true;
+    map.dragPan.disable();
+});
+
+map.on('mouseleave', 'points', function() {
+    canvas.style.cursor = '';
+    isCursorOverPoint = false;
+    map.dragPan.enable();
+});
+
+map.on('mousedown', mouseDown);

resources/es6-orig/select-place.js

@@ -0,0 +1,11 @@
+//select-place.js
+
+export default function selectPlaceInForm(uri) {
+    if (document.querySelector('select')) {
+        if (uri == 'current-location') {
+            document.querySelector('select [id="option-coords"]').selected = true;
+        } else {
+            document.querySelector('select [value="' + uri + '"]').selected = true;
+        }
+    }
+}

resources/es6-orig/submit-place.js

@@ -0,0 +1,68 @@
+//submit-place.js
+
+export default function submitNewPlace(map) {
+    //create the form data to send
+    let formData = new FormData();
+    formData.append('place-name', document.querySelector('#place-name').value);
+    formData.append('place-description', document.querySelector('#place-description').value);
+    formData.append('place-latitude', document.querySelector('#place-latitude').value);
+    formData.append('place-longitude', document.querySelector('#place-longitude').value);
+    //post the new place
+    fetch('/micropub/places', {
+        //send cookies with the request
+        credentials: 'same-origin',
+        method: 'post',
+        body: formData
+    }).then(function (response) {
+        return response.json();
+    }).then(function (placeJson) {
+        if (placeJson.error === true) {
+            throw new Error(placeJson.error_description);
+        }
+        //remove un-needed form elements
+        let form = document.querySelector('fieldset');
+        //iterate through labels and remove parent div elements
+        let labels = document.querySelectorAll('.place-label');
+        for (let label of labels) {
+            form.removeChild(label.parentNode);
+        }
+        form.removeChild(document.querySelector('#place-submit'));
+        let newPlaceButton = document.querySelector('#create-new-place');
+        //in order to remove a DOM Node, you need to run removeChild on the parent Node
+        newPlaceButton.parentNode.removeChild(newPlaceButton);
+        //remove current location from map
+        let source = map.getSource('points');
+        let newFeatures = source._data.features.filter(function (item) {
+            return item.properties.title != 'Current Location';
+        });
+        //add new place to map
+        newFeatures.push({
+            'type': 'Feature',
+            'geometry': {
+                'type': 'Point',
+                'coordinates': [placeJson.longitude, placeJson.latitude]
+            },
+            'properties': {
+                'title': placeJson.name,
+                'icon': 'circle',
+                'uri': placeJson.uri
+            }
+        });
+        let newSource = {
+            'type': 'FeatureCollection',
+            'features': newFeatures
+        };
+        map.getSource('points').setData(newSource);
+        //add new place to select menu
+        let selectElement = document.querySelector('select');
+        let newlyCreatedPlaceOption = document.createElement('option');
+        newlyCreatedPlaceOption.setAttribute('value', placeJson.uri);
+        newlyCreatedPlaceOption.appendChild(document.createTextNode(placeJson.name));
+        newlyCreatedPlaceOption.dataset.latitude = placeJson.latitude;
+        newlyCreatedPlaceOption.dataset.longitude = placeJson.longitude;
+        selectElement.appendChild(newlyCreatedPlaceOption);
+        document.querySelector('select [value="' + placeJson.uri + '"]').selected = true;
+    }).catch(function (placeError) {
+        console.error(placeError);
+    });
+}

resources/es6/a11y.js

@@ -1,45 +0,0 @@
-//a11y.css.js
-
-let checkbox = document.querySelector('input[name="a11y.css"]');
-
-checkbox.addEventListener('change', function () {
-    if (this.checked) {
-        addA11yCss();
-    } else {
-        removeA11yCss();
-    }
-});
-
-function addA11yCss() {
-    let exists = a11yCssExists();
-    if (exists == false) {
-        //add a11y.css link
-        let link = document.createElement('link');
-        link.setAttribute('rel', 'stylesheet');
-        link.setAttribute('href', '/assets/frontend/a11y.css/a11y-en.css');
-        let head = document.querySelector('head');
-        head.appendChild(link);
-    }
-}
-
-function removeA11yCss() {
-    let exists = a11yCssExists();
-    if (exists == true) {
-        //remove a11y.css link
-        let link = document.querySelector('link[href="/assets/frontend/a11y.css/a11y-en.css"]');
-        let head = document.querySelector('head');
-        head.removeChild(link);
-    }
-}
-
-function a11yCssExists() {
-    let css = document.querySelectorAll('link[rel=stylesheet]');
-    let exists = false;
-    for (let link of css) {
-        if (link.attributes.href.nodeValue == '/assets/frontend/a11y.css/a11y-en.css') {
-            exists = true;
-        }
-    }
-
-    return exists;
-}

resources/sass-orig/_articles.scss

@@ -0,0 +1,5 @@
+//articles.scss
+
+article.h-entry {
+    width: $mainWidth;
+}

resources/sass-orig/_base.scss

@@ -0,0 +1,22 @@
+// _base.scss
+
+// Fonts
+html {
+    font-family: montserrat, sans-serif;
+    font-weight: 300;
+    font-style: normal;
+    font-size: 20px;
+}
+
+h1 {
+    font-family: bebas-neue, sans-serif;
+    font-weight: 400;
+    font-style: normal;
+}
+
+code {
+    font-family: "Operator Mono", monospace;
+}
+
+// Variables
+$mainWidth: 40rem;

resources/sass-orig/_bio.scss

@@ -0,0 +1,11 @@
+// bio.scss
+
+.personal-bio {
+    width: $mainWidth;
+}
+
+@media screen and (max-width: $mainWidth) {
+    .personal-bio {
+        width: 95vw;
+    }
+}

resources/sass-orig/_emoji.scss

@@ -0,0 +1,49 @@
+//emoji.scss
+
+//thanks to http://adrianroselli.com/2016/12/accessible-emoji-tweaked.html
+
+span[role=img][aria-label] {
+    position: relative;
+}
+
+span[role=img][aria-label]:focus::after,
+span[role=img][aria-label]:hover::after {
+    position: absolute;
+    display: block;
+    z-index: 1;
+    bottom: 1.5em;
+    left: 0;
+    padding: 0.5em 0.75em;
+    border: 0.05em solid rgba(255, 255, 255, 1);
+    border-radius: 0.2em;
+    box-shadow: 0.15em 0.15em 0.5em rgba(0, 0, 0, 1);
+    content: attr(aria-label);
+    background-color: rgba(0, 0, 0, 0.85);
+    color: rgba(255, 255, 255, 1);
+    font-size: 80%;
+    animation: TOOLTIP 0.1s ease-out 1;
+}
+
+@keyframes TOOLTIP {
+    from {
+        bottom: 0.5em;
+        background-color: rgba(0, 0, 0, 0);
+        border: 0.05em solid rgba(255, 255, 255, 0);
+        color: rgba(255, 255, 255, 0);
+        box-shadow: 0 0 0 rgba(0, 0, 0, 1);
+    }
+
+    to {
+        bottom: 1.5em;
+        background-color: rgba(0, 0, 0, 0.85);
+        border: 0.05em solid rgba(255, 255, 255, 1);
+        color: rgba(255, 255, 255, 1);
+        box-shadow: 0.15em 0.15em 0.5em rgba(0, 0, 0, 1);
+    }
+}
+
+@media print {
+    span[role=img][aria-label]::after {
+        content: " (" attr(aria-label) ") ";
+    }
+}

resources/sass-orig/_footer.scss

@@ -0,0 +1,38 @@
+// footer.scss
+
+footer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: var(--white);
+    color: var(--black);
+
+    a {
+        color: var(--blue);
+        text-decoration: none;
+    }
+
+    form:first-child {
+        margin-bottom: 1rem;
+    }
+
+    p {
+        margin-bottom: 0;
+    }
+}
+
+@media screen and (max-width: $mainWidth) {
+    footer {
+        img {
+            width: 95%;
+        }
+
+        form {
+            width: 95vw;
+        }
+
+        select {
+            width: 90vw;
+        }
+    }
+}

resources/sass-orig/_main.scss

@@ -0,0 +1,21 @@
+// main.scss
+
+main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: var(--white);
+    color: var(--black);
+
+    a {
+        color: var(--blue);
+        text-decoration: none;
+    }
+
+    .h-entry {
+        margin: 3rem 0;
+    }
+}
+
+@import "pagination";
+@import "bio";

resources/sass-orig/_mapbox.scss

@@ -0,0 +1,5 @@
+//mapbox.scss
+
+.map {
+    height: 200px;
+}

resources/sass-orig/_notes.scss

@@ -0,0 +1,17 @@
+// notes.scss
+
+.h-entry .note {
+    width: $mainWidth;
+}
+
+@media screen and (max-width: $mainWidth) {
+    .h-entry .note {
+        width: 95vw;
+
+        .e-content {
+            img {
+                width: 100%;
+            }
+        }
+    }
+}

resources/sass-orig/_pagination.scss

@@ -0,0 +1,16 @@
+// pagination.scss
+
+.pagination {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    list-style-type: none;
+    width: $mainWidth;
+}
+
+@media screen and (max-width: $mainWidth) {
+    .pagination {
+        width: 95vw;
+    }
+}