feat: move static content from Svelte to index.html

This improves the overall speed of the site. Also improves user experience when JS is disabled.
JanMalch · Nov 13, 2020 · c652b24 · c652b24
1 parent b24a677
commit c652b24
Show file tree

Hide file tree

Showing 8 changed files with 162 additions and 172 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,7 +20,6 @@
     "@commitlint/config-conventional": "^11.0.0",
     "@rollup/plugin-commonjs": "^14.0.0",
     "@rollup/plugin-node-resolve": "^8.0.0",
-    "@rollup/plugin-replace": "^2.3.4",
     "@rollup/plugin-typescript": "^6.0.0",
     "@tsconfig/svelte": "^1.0.0",
     "@types/jest": "^26.0.15",
@@ -67,6 +66,18 @@
       "pre-push": "npm run build && npm test"
     }
   },
+  "standard-version": {
+    "bumpFiles": [
+      {
+        "filename": "package.json",
+        "type": "json"
+      },
+      {
+        "filename": "public/index.html",
+        "updater": "version-in-html.js"
+      }
+    ]
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/JanMalch/flextangler"

diff --git a/public/global.css b/public/global.css
@@ -13,6 +13,10 @@ body {
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 	text-rendering: optimizeLegibility;
 	-webkit-font-smoothing: antialiased;
+
+	display: grid;
+	grid-template-columns: auto;
+	grid-template-rows: auto 1fr auto;
 }
 
 a {
@@ -43,3 +47,44 @@ a:visited {
 	0 4px 6px -2px rgba(0, 0, 0, 0.05);
 }
 
+/* styles for index.html */
+
+header h1 {
+	display: flex;
+	align-items: baseline;
+	justify-content: center;
+}
+
+header h1 > small {
+	font-size: 10px;
+	text-transform: uppercase;
+	opacity: 0.6;
+}
+
+header,
+footer,
+p {
+	text-align: center;
+}
+
+p {
+	width: 84ch;
+	margin-left: auto;
+	margin-right: auto;
+	font-size: 18px;
+	line-height: 1.65;
+}
+
+header > p:last-child {
+	margin-bottom: 0;
+}
+
+p > a {
+	font-weight: 500;
+}
+
+footer {
+	padding: 32px 0;
+	opacity: 0.9;
+	font-size: 0.9em;
+}
diff --git a/public/index.html b/public/index.html
@@ -1,21 +1,56 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-	<meta charset='utf-8'>
-	<meta name='viewport' content='width=device-width,initial-scale=1'>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+		<meta name="version" content="0.0.2" />
 
-	<title>Flextangler</title>
+    <link rel="schema.dc" href="http://purl.org/dc/elements/1.1/" />
+    <meta name="dc.created" content="2020-11-13T00:00:00.000Z" />
 
-	<link rel='icon' type='image/png' href='favicon.png'>
-	<link rel='stylesheet' href='global.css'>
-	<link rel='stylesheet' href='build/bundle.css'>
+    <title>Flextangler</title>
 
-	<script defer src='build/bundle.js'></script>
+    <link rel="icon" type="image/png" href="favicon.png" />
+    <link rel="stylesheet" href="global.css" />
+    <link rel="stylesheet" href="build/bundle.css" />
 
-	<link rel="schema.dc" href="http://purl.org/dc/elements/1.1/" />
-</head>
+    <script defer src="build/bundle.js"></script>
+  </head>
 
-<body>
-<noscript>Unfortunately <strong>Flextangler</strong> does not work without JavaScript.</noscript>
-</body>
+  <body>
+    <header class="container">
+      <h1>Flextangler <small>beta</small></h1>
+      <p>
+        <strong>Flextangler</strong>
+        is a web app that helps you create flextangles with your own images.
+        <strong
+          >None of your files are sent to a server! All processing is done in
+          your browser.</strong
+        >
+        In fact, you can use this website completely offline.
+      </p>
+      <noscript>
+        <p>
+          Unfortunately that means <strong>Flextangler</strong> cannot work without
+          JavaScript. Please enable it in your browser settings.
+        </p>
+      </noscript>
+    </header>
+    <main class="container"></main>
+    <footer class="container">
+      Created by
+      <a href="https://github.com/JanMalch" rel="noopener">JanMalch 👨🏻‍💻</a>
+      and Lorenz 🧠 &bullet;
+      <a href="https://github.com/JanMalch/flextangler" rel="noopener"
+        >Source Code</a
+      >
+      &bullet;
+      <a
+        href="https://github.com/JanMalch/flextangler/blob/master/CHANGELOG.md"
+        rel="noopener"
+        >v0.0.2</a
+      >
+      &bullet; &copy; JanMalch, 2020
+    </footer>
+  </body>
 </html>
diff --git a/rollup.config.js b/rollup.config.js
@@ -1,12 +1,10 @@
 import svelte from 'rollup-plugin-svelte';
-import replace from '@rollup/plugin-replace';
 import resolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
 import livereload from 'rollup-plugin-livereload';
 import { terser } from 'rollup-plugin-terser';
 import sveltePreprocess from 'svelte-preprocess';
 import typescript from '@rollup/plugin-typescript';
-import pkg from './package.json';
 
 const production = !process.env.ROLLUP_WATCH;
 
@@ -40,10 +38,6 @@ export default {
 		file: 'public/build/bundle.js'
 	},
 	plugins: [
-		replace({
-			'__TIMESTAMP__': new Date().toJSON(),
-			'__VERSION__': pkg.version,
-		}),
 		svelte({
 			// enable run-time checks when not in production
 			dev: !production,