Merge pull request #636 from kernvalley/feature/mayor-events/embed

Create `/mayors/embed/`

Author: shgysk8zer0

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 - Add `/mayors/events.json`
+- Add `/mayors/embed/` using `@kernvalley/wfd/mayor-events.js` / `<wfd-mayor-events>`
 
 ### Changed
 - Add missing CORS headers to `/mayors/events.json`

_headers

@@ -7,7 +7,7 @@
   Link: <https://unpkg.com/@shgysk8zer0/polyfills@0.3.0/all.min.js>; rel=preload; as=script; referrerpolicy=no-referrrer; crossorigin=anonymous;
   Link: <https://unpkg.com/@shgysk8zer0/kazoo@0.3.1/harden.js>; rel=preload; as=script; referrerpolicy=no-referrrer; crossorigin=anonymous;
   Link: </js/index.min.js>; rel=preload; as=script; referrerpolicy=no-referrrer;
-  Content-Security-Policy: default-src 'self'; img-src *; script-src 'self' unpkg.com/ www.google-analytics.com www.googletagmanager.com www.gstatic.com/firebasejs/ 'nonce-c23ddb4e-a8ec-44f0-ad77-d1ac60938c7e'; style-src 'self' cdn.kernvalley.us unpkg.com/ blob:; connect-src 'self' store.kernvalley.us apps.kernvalley.us ads.kernvalley.us/api/ api.github.com/users/ api.openweathermap.org/data/2.5/weather www.google-analytics.com/ www.googletagmanager.com/gtag/ firestore.googleapis.com  unpkg.com/@shgysk8zer0/ unpkg.com/@kernvalley/; font-src cdn.kernvalley.us; media-src *; frame-src www.youtube-nocookie.com; form-action 'self'; manifest-src 'self'; worker-src 'self'; reflected-xss block; upgrade-insecure-requests; block-all-mixed-content; disown-opener; trusted-types default empty#html empty#script sanitizer-raw#html purify-raw#html purify#html weather-current#html youtube#script-url pwa-install share-to-buttons#html github-user#html ga#script-url goog#html; require-trusted-types-for 'script';
+  Content-Security-Policy: default-src 'self'; img-src *; script-src 'self' unpkg.com/ www.google-analytics.com www.googletagmanager.com www.gstatic.com/firebasejs/ 'nonce-c23ddb4e-a8ec-44f0-ad77-d1ac60938c7e'; style-src 'self' cdn.kernvalley.us unpkg.com/ blob:; connect-src 'self' store.kernvalley.us apps.kernvalley.us ads.kernvalley.us/api/ api.github.com/users/ api.openweathermap.org/data/2.5/weather www.google-analytics.com/ www.googletagmanager.com/gtag/ firestore.googleapis.com  unpkg.com/@shgysk8zer0/ unpkg.com/@kernvalley/; font-src cdn.kernvalley.us; media-src *; frame-src www.youtube-nocookie.com 'self'; form-action 'self'; manifest-src 'self'; worker-src 'self'; reflected-xss block; upgrade-insecure-requests; block-all-mixed-content; disown-opener; trusted-types default empty#html empty#script sanitizer-raw#html purify-raw#html purify#html weather-current#html youtube#script-url pwa-install share-to-buttons#html github-user#html ga#script-url goog#html; require-trusted-types-for 'script';
 
 /:placeholder/
   X-Content-Type-Options: nosniff
@@ -42,6 +42,11 @@
   Content-Security-Policy: default-src: 'none'
   TK: N
 
+/mayors/embed/
+  Referrer-Policy: no-referrer
+  X-Frame-Options: ALLOW
+  Content-Security-Policy: default-src 'none'; img-src 'self' *; style-src 'self' unpkg.com/@shgysk8zer0/ unpkg.com/@kernvalley/ blob:; script-src 'self' unpkg.com/@shgysk8zer0/ unpkg.com/@kernvalley/; font-src cdn.kernvalley.us/fonts/; connect-src 'self' whiskeyflatdays.com/mayors/events.json; frame-ancestors *; upgrade-insecure-requests; block-all-mixed-content; disown-opener; trusted-types empty#html empty#script; require-trusted-types-for 'script';
+
 /mayors/events.json
   Content-Security-Policy: default-src 'none'
   Access-Control-Allow-Origin: *
@@ -59,3 +64,4 @@
 
 /*
   X-Content-Type-Options: nosniff
+

css/mayor-events.css

@@ -0,0 +1,11 @@
+:root {
+	color-scheme: light dark;
+}
+
+:root[data-theme="dark"] {
+	color-scheme: dark;
+}
+
+:root[data-theme="light"] {
+	color-scheme: light;
+}

js/mayor-events.js

@@ -0,0 +1,30 @@
+customElements.whenDefined('wfd-mayor-events').then(HTMLWFDMayorEventsElement => {
+	const params = new URLSearchParams(location.search);
+	const events = new HTMLWFDMayorEventsElement();
+
+	if (params.has('theme')) {
+		events.theme = params.get('theme');
+		document.documentElement.dataset.theme = params.get('theme');
+	}
+
+	if (params.has('mayor')) {
+		events.mayor = params.get('mayor');
+	}
+
+	if (params.has('heading')) {
+		const el = document.createElement('span');
+		el.slot = 'heading';
+		el.textContent = params.get('heading');
+		events.appendChild(el);
+	}
+
+	if (params.has('address')) {
+		events.showAddress = true;
+	}
+
+	if (params.has('description')) {
+		events.showDescription = true;
+	}
+
+	document.body.appendChild(events);
+});

mayors/embed.html

@@ -0,0 +1,21 @@
+---
+permalink: /mayors/embed/
+layout: null
+---
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<meta name="color-scheme" content="light dark" />
+		<title>Whiskey Flat Mayor Race Embed</title>
+		<script type="application/javascript" referrerpolicy="no-referrer" crossorigin="anonymous" integrity="sha384-h2kgNESJV1KN7BmHtXZv1j5WMcwFojESsbaNydwul3t6bqHOmzVMDaDXAEe6XLC+" src="https://unpkg.com/@shgysk8zer0/polyfills@0.3.0/all.min.js" fetchpriority="high" defer=""></script>
+		<script type="application/javascript" referrerpolicy="no-referrer" crossorigin="anonymous" integrity="sha384-qeRhshdygZxaXThPbJF9xnGy1k33AIJ1p8pHjPJNC6uzABZ+693lEjIduVuA154y" src="https://unpkg.com/@kernvalley/components@1.1.2/wfd/mayor-events.min.js" fetchpriority="high" defer=""></script>
+		<script type="application/javascript" referrerpolicy="no-referrer" src="/js/mayor-events.js" defer=""></script>
+		<link rel="icon" href="/img/favicon.svg" type="image/svg+xml" sizes="150x150" />
+		<link rel="shortcut icon" href="/favicon.ico" />
+		<link rel="stylesheet" href="/css/mayor-events.css" referrerpolicy="no-referrer" />
+		<link rel="preload" as="fetch" href="https://whiskeyflatdays.com/mayors/events.json" type="application/json" referrerpolicy="no-referrer" crossorigin="anonymous" />
+	</head>
+	<body></body>
+</html>