Merge pull request #35 from JackHowa/FEAT-11ty-builder

Feat 11ty builder

.eleventy.js

@@ -0,0 +1,46 @@
+const CleanCSS = require("clean-css");
+const { minify } = require("terser");
+
+module.exports = function (eleventyConfig) {
+  // Output directory: _site
+
+  // Copy `images/` to `_site/images`
+  eleventyConfig.addPassthroughCopy('images');
+
+  // copy other needed files
+  eleventyConfig.addPassthroughCopy('favicon.ico')
+  eleventyConfig.addPassthroughCopy('manifest.json')
+
+  eleventyConfig.addFilter("cssmin", function (code) {
+    // const output = new CleanCSS({
+    //   // level: {
+    //   //   2: {
+    //   //     // https://www.npmjs.com/package/clean-css#level-2-optimizations
+    //   //     all: true, // sets all level 1 and 2 optimization values to `true`
+    //   //   }
+    //   // }
+    // }).minify(code);
+
+    // console.log('******css min perf*******')
+
+    // console.log('original size', output.stats.originalSize); // original content size after import inlining
+    // console.log('minified size', output.stats.minifiedSize); // optimized content size
+    // console.log('efficiency', output.stats.efficiency); // `(originalSize - minifiedSize) / originalSize`, e.g. 0.25 if size is reduced from 100 bytes to 75 bytes
+
+    // return output.styles;
+		return code;
+  });
+	eleventyConfig.addNunjucksAsyncFilter("jsmin", async function (
+		code,
+		callback
+	) {
+		try {
+			const minified = await minify(code);
+			callback(null, minified.code);
+		} catch (err) {
+			console.error("Terser error: ", err);
+			// Fail gracefully.
+			callback(null, code);
+		}
+	});
+};

.eleventyignore

@@ -0,0 +1,4 @@
+.github
+CODE_OF_CONDUCT.md
+PUBLIC
+README.md

.gitignore

@@ -5,6 +5,7 @@
 /.pnp
 .pnp.js
 
+_site
 # testing
 /coverage
 

.nvmrc

@@ -0,0 +1 @@
+v14.18.3

src/index.css → _includes/styles.css

@@ -5,7 +5,7 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background: rgb(106, 198, 26);
+  background: rgb(136, 182, 96);
   background: -moz-linear-gradient(
     202deg,
     rgba(106, 198, 26, 1) 0%,
@@ -29,3 +29,28 @@ body {
   background-attachment: fixed;
   overscroll-behavior: none;
 }
+
+.app-container {
+  /* overscroll behavior doesn't work on safari */
+  /* https://caniuse.com/#feat=css-overscroll-behavior */
+  overscroll-behavior: none;
+  margin: 0;
+  padding: 0;
+  height: 90vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0 20vw 0 20vw;
+
+  @media (max-width: 800px) {
+    padding: 0 10vw 0 10vw;
+  }
+}
+
+.inner-container {
+  background: linear-gradient(107.18deg,hsla(0,0%,100%,.7) 1.84%,hsla(0,0%,100%,.4));
+  padding: 2vw;
+
+  border-radius: 4px;
+  /* height: 15vh; */
+}

_includes/util.js

@@ -0,0 +1,33 @@
+async function findWhat3Words(position) {
+  try {
+    const threeWordLocationResponse = await fetch(
+      `https://api.what3words.com/v3/convert-to-3wa?coordinates=${position.coords.latitude}%2C${position.coords.longitude}&key={'2YIQ30MS'}`
+    );
+
+    const data = await threeWordLocationResponse.json();
+
+		const threeWordLocation = data.words;
+
+		if (threeWordLocation !== undefined) {
+			document.getElementById('location-output').innerHTML = data.words;
+		} else {
+			throw new Error('No 3 word location found');
+		}
+  } catch (err) {
+		document.getElementById('location-output').innerHTML = 'Something went wrong';
+  }
+}
+
+
+document.addEventListener("DOMContentLoaded", function() { 
+	const checkbox = document.querySelector("input[type=checkbox]");
+
+	checkbox.addEventListener("change", function() {
+		if (this.checked) {
+			navigator.geolocation.getCurrentPosition(position => {
+				document.getElementById('location-output').innerHTML = 'fetching';
+				findWhat3Words(position)
+			})
+		}
+	})
+})

index.njk

@@ -0,0 +1,53 @@
+---
+# seo involvement
+metaDescription: "Using the What3Words API and 11ty, this site renders your What3Words address as a SEO friendly URL. It uses 11ty, netlify, and serverless builder. Using the What3Worlds API, this site utilizing styles of Glassmorphism shows you your what3word coordinate upon clicking the checkbox to allow location."
+metaTitle: Where Am I, What3Words?
+metaCanonicalURL: "https://whereami-w3w.netlify.app/"
+---
+
+<!DOCTYPE html>
+<html lang="en-us">
+
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"/>
+    <meta name="description" content="{{metaDescription}}"/>
+    {% set css %}
+    {% include "styles.css" %}
+    {% endset %}
+    <style>
+      {{css | cssmin | safe}}
+    </style>
+    <link rel="manifest" href="/manifest.json"/>
+    <link rel="canonical" href="{{metaCanonicalURL}}"/>
+    <link rel="apple-touch-icon" href="/images/apple-touch-icon.png"/>
+    <link rel="icon" type="image/png" sizes="512x512" href="/images/logo512.png"/>
+    <link rel="icon" type="image/png" sizes="192x192" href="/images/logo192.png"/>
+    <title>{{metaTitle}}</title>
+  </head>
+
+  <body>
+    <main >
+			<div class="app-container">
+				<div class="inner-container">
+					<label>
+						Show Location
+						<input
+							type="checkbox"
+							id="show-location"
+						/>
+					</label>
+					<p id="location-output">Click above to find your three word location</p>
+					</div>
+				</div>
+			</div>
+    </main>
+  </body>
+	{% set js %}
+  	{% include "util.js" %}
+	{% endset %}
+	<script>
+		{{ js | jsmin | safe }}
+	</script>
+
+</html>

netlify.toml

@@ -0,0 +1,19 @@
+[build]
+  publish = "_site"
+  command = "npm run build"
+
+[[headers]]
+  # Define which paths this specific [[headers]] block will cover.
+  for = "/*"
+
+  [headers.values]
+    X-Frame-Options = "DENY"
+    X-XSS-Protection = "1; mode=block"
+    X-Content-Type-Options = "nosniff"
+
+    # Multi-value headers are expressed with multi-line strings.
+    cache-control = '''
+    max-age=0,
+    no-cache,
+    no-store,
+    must-revalidate'''