Merge pull request #51 from rtfeldman/0.19

Upgrade to 0.19, rearchitect everything!
rtfeldman · Aug 21, 2018 · b5064c6 · b5064c6
2 parents 298bfdf + fd7776f
commit b5064c6
Show file tree

Hide file tree

Showing 80 changed files with 5,212 additions and 3,331 deletions.
diff --git a/Makefile b/Makefile
@@ -0,0 +1,15 @@
+
+MAIN_FILE = src/Main.elm
+OUTPUT_FILE = elm.js
+RUN_UGLIFY = npx uglify-js $(OUTPUT_FILE) --output=$(OUTPUT_FILE)
+
+.PHONY: production dev test
+
+production:
+	npx elm make --optimize $(MAIN_FILE) --output=$(OUTPUT_FILE) && echo "Uglifying output..." && $(RUN_UGLIFY) --compress --mangle
+
+dev:
+	npx elm-live $(MAIN_FILE) --output=$(OUTPUT_FILE) --pushstate --debug
+
+test:
+	npx elm-test
diff --git a/README.md b/README.md
@@ -19,12 +19,14 @@ Check out [the full writeup](https://dev.to/rtfeldman/tour-of-an-open-source-elm
 
 # Getting started
 
-If you don't already have `elm` and `elm-live`:
+I set this up with `make` to show that you can make a SPA in Elm with any
+build tool you like! It takes very little configuration.
 
-> npm install -g elm elm-live
+To build production assets (including minification):
 
-Then, to build everything:
+> make
 
-> elm-live --output=elm.js src/Main.elm --pushstate --open --debug
+To build local development (including the time-traveling debugger)
+
+> make dev
 
-(Leave off the `--debug` if you don't want the time-traveling debugger.)
diff --git a/assets/icons/android-chrome-192x192.png b/assets/icons/android-chrome-192x192.png
diff --git a/assets/icons/android-chrome-512x512.png b/assets/icons/android-chrome-512x512.png
diff --git a/assets/icons/apple-touch-icon.png b/assets/icons/apple-touch-icon.png
diff --git a/assets/icons/browserconfig.xml b/assets/icons/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/assets/icons/favicon-16x16.png b/assets/icons/favicon-16x16.png
diff --git a/assets/icons/favicon-32x32.png b/assets/icons/favicon-32x32.png
diff --git a/assets/icons/favicon.ico b/assets/icons/favicon.ico
diff --git a/assets/icons/mstile-144x144.png b/assets/icons/mstile-144x144.png
diff --git a/assets/icons/mstile-150x150.png b/assets/icons/mstile-150x150.png
diff --git a/assets/icons/mstile-310x150.png b/assets/icons/mstile-310x150.png
diff --git a/assets/icons/mstile-310x310.png b/assets/icons/mstile-310x310.png
diff --git a/assets/icons/mstile-70x70.png b/assets/icons/mstile-70x70.png
diff --git a/assets/icons/safari-pinned-tab.svg b/assets/icons/safari-pinned-tab.svg
diff --git a/assets/images/loading.svg b/assets/images/loading.svg
diff --git a/assets/images/smiley-cyrus.jpg b/assets/images/smiley-cyrus.jpg
diff --git a/assets/site.webmanifest b/assets/site.webmanifest
@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}
diff --git a/elm-package.json b/elm-package.json
diff --git a/elm.json b/elm.json
@@ -0,0 +1,33 @@
+{
+    "type": "application",
+    "source-directories": [
+        "src"
+    ],
+    "elm-version": "0.19.0",
+    "dependencies": {
+        "direct": {
+            "NoRedInk/elm-json-decode-pipeline": "1.0.0",
+            "elm/browser": "1.0.0",
+            "elm/core": "1.0.0",
+            "elm/html": "1.0.0",
+            "elm/http": "1.0.0",
+            "elm/json": "1.0.0",
+            "elm/time": "1.0.0",
+            "elm/url": "1.0.0",
+            "elm-explorations/markdown": "1.0.0",
+            "rtfeldman/elm-iso8601-date-strings": "1.0.0"
+        },
+        "indirect": {
+            "elm/parser": "1.0.0",
+            "elm/virtual-dom": "1.0.0"
+        }
+    },
+    "test-dependencies": {
+        "direct": {
+            "elm-explorations/test": "1.0.0"
+        },
+        "indirect": {
+            "elm/random": "1.0.0"
+        }
+    }
+}
diff --git a/index.html b/index.html
@@ -3,29 +3,45 @@
   <head>
     <meta charset="utf-8">
     <title>Conduit</title>
+
+    <link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/assets/icons/favicon-16x16.png">
+    <link rel="manifest" href="/assets/site.webmanifest">
+    <link rel="mask-icon" href="/assets/icons/safari-pinned-tab.svg" color="#5bbad5">
+    <meta name="msapplication-TileColor" content="#da532c">
+    <meta name="theme-color" content="#ffffff">
+
     <!-- Import Ionicon icons & Google Fonts our Bootstrap theme relies on -->
     <link href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
     <link href="//fonts.googleapis.com/css?family=Titillium+Web:700|Source+Serif+Pro:400,700|Merriweather+Sans:400,700|Source+Sans+Pro:400,300,600,700,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
     <!-- Import the custom Bootstrap 4 theme from our hosted CDN -->
     <link rel="stylesheet" href="//demo.productionready.io/main.css">
-    <style>/* Loading spinner courtesy of https://github.com/tobiasahlin/SpinKit */
-    .sk-three-bounce { margin-right: 10px; } .sk-three-bounce .sk-child { width: 14px; height: 14px; background-color: #333; border-radius: 100%; display: inline-block; -webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; } .sk-three-bounce .sk-bounce1 { -webkit-animation-delay: 0.28s; animation-delay: 0.28s; } .sk-three-bounce .sk-bounce2 { -webkit-animation-delay: 0.44s; animation-delay: 0.44s; } .sk-three-bounce .sk-bounce3 { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } @-webkit-keyframes sk-three-bounce { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes sk-three-bounce { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); } }
-    </style>
-
 
     <script src="elm.js"></script>
   </head>
-  <body id="page-body">
+  <body>
     <script>
-      var app = Elm.Main.fullscreen(localStorage.session || null);
+      var storageKey = "store";
+      var flags = localStorage.getItem(storageKey);
+      var app = Elm.Main.init({flags: flags});
+
+      app.ports.storeCache.subscribe(function(val) {
+
+        if (val === null) {
+          localStorage.removeItem(storageKey);
+        } else {
+          localStorage.setItem(storageKey, JSON.stringify(val));
+        }
 
-      app.ports.storeSession.subscribe(function(session) {
-        localStorage.session = session;
+        // Report that the new session was stored succesfully.
+        setTimeout(function() { app.ports.onStoreChange.send(val); }, 0);
       });
 
+      // Whenever localStorage changes in another tab, report it if necessary.
       window.addEventListener("storage", function(event) {
-        if (event.storageArea === localStorage && event.key === "session") {
-          app.ports.onSessionChange.send(event.newValue);
+        if (event.storageArea === localStorage && event.key === storageKey) {
+          app.ports.onStoreChange.send(event.newValue);
         }
       }, false);
     </script>