From 80be6f001ad1e189b9861ef13ad24b95f27f9bda Mon Sep 17 00:00:00 2001
From: Joshua Seigler <joshua.seigler@xpo.com>
Date: Thu, 13 Oct 2016 14:10:22 -0400
Subject: [PATCH] feat: add directions for serving the file locally

---
 .gitignore      |  3 ++-
 README.md       | 10 ++++++++++
 index.html      |  8 ++++++++
 package.json    | 31 +++++++++++++++++++++++++++++++
 styles/main.css | 13 +++++++++++--
 5 files changed, 62 insertions(+), 3 deletions(-)
 create mode 100644 package.json

diff --git a/.gitignore b/.gitignore
index d3f11de..64c732f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,4 +2,5 @@
 # https://help.github.com/articles/ignoring-files
 # Example .gitignore files: https://github.com/github/gitignore
 /bower_components/
-/node_modules/
\ No newline at end of file
+/node_modules/
+/presentation-bundle.html
diff --git a/README.md b/README.md
index f68b336..85460a5 100644
--- a/README.md
+++ b/README.md
@@ -6,3 +6,13 @@ This is a browser-based presentation framework with two connected views: one for
 
 * Presenter view and presentation view, connected through Localstorage
 * Specializes in live-coding demos
+
+## How to Use:
+
+Use `npm run start` to serve the project folder on `localhost` and launch it in your default browser.
+
+After you have edited index.html to your liking, you can run `npm run build` to compile the whole presentation into a single portable file for use elsewhere.
+
+## Gotchas:
+
+Firefox and Chrome handle `file:///` urls differently. In Firefox, local files are allowed to interact with LocalStorage, but on Chrome they are not. To circumvent this issue, you have to serve the file on `localhost` with `npm run start` or some other local server.
\ No newline at end of file
diff --git a/index.html b/index.html
index 893e811..6403007 100644
--- a/index.html
+++ b/index.html
@@ -25,13 +25,16 @@
       </ul>
     </nav>
     <main>
+
       <section style="background: linear-gradient(-30deg, black, rebeccapurple)">
         <h1>Janus Presentations</h1>
         <h2>Hotkey powered, multi-window presentations</h2>
         <div><small>
           Press <kbd>Escape</kbd> for commands. <kbd>Page Up</kbd> / <kbd>Page Down</kbd> to navigate.
         </small></div>
+        <div><a href="https://github.com/seigler/janus">Get the code on GitHub</a></div>
       </section>
+
       <section style="background: linear-gradient(-30deg, #400, black)">
         <h1>Hotkeys</h1>
         <div janus-timeline>
@@ -44,6 +47,7 @@
           Toggle Presenter Mode: <kbd>F1</kbd>
         </div>
       </section>
+
       <section style="color: black">
         <img class="cover" src="https://placekitten.com/1024/768" alt="" />
         <h1>Self-scaling cover images with <code>object-fit</code></h1>
@@ -54,18 +58,22 @@
           Any <code>section</code> tag or item with attribute <code>janus-timeline</code> is added to the timeline and revealed in sequence.
         </div>
       </section>
+
       <section style="background: linear-gradient(-60deg, black, #630)">
         <h1>Animations controlled by CSS</h1>
         <div>
           Framework sets custom attribute <code>janus-timeline</code> to <code>past</code>, <code>present</code>, or <code>future</code>
         </div>
       </section>
+
       <section style="color: black; background-color: #FA0">
         <h1>Cross-window synchronization with JavaScript <code>localStorage</code> events.</h1>
       </section>
+
       <section>
         <h1>The end.</h1>
       </section>
+
     </main>
     <script type="text/javascript" src="libs/openjs-shortcut/shortcut.js"></script>
     <script type="text/javascript" src="scripts/app.js"></script>
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..80484ff
--- /dev/null
+++ b/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "janus",
+  "version": "1.0.0",
+  "description": "This is a browser-based presentation framework with two connected views: one for the presenter, and one for the audience.",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "inliner index.html > presentation-bundle.html",
+    "start": "http-server -o -cors"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/seigler/janus.git"
+  },
+  "keywords": [
+    "presentations",
+    "html",
+    "slides"
+  ],
+  "author": "Joshua Seigler",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/seigler/janus/issues"
+  },
+  "homepage": "https://seigler.github.io/janus",
+  "devDependencies": {
+    "inliner": "^1.9.5"
+  },
+  "dependencies": {
+    "http-server": "^0.9.0"
+  }
+}
diff --git a/styles/main.css b/styles/main.css
index bfedb91..7b42884 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -10,6 +10,12 @@
   box-sizing: border-box;
   font-family: sans-serif;
   font-size: calc(2vw + 2em);
+  cursor: default;
+}
+
+a {
+  color: inherit;
+  cursor: pointer;
 }
 
 li {
@@ -22,7 +28,10 @@ code {
 
 kbd {
   font-family: Consolas, monaco, monospace;
-  border: 2px dashed currentcolor;
+  background-color: hsla(0, 0%, 100%, 0.2);
+  border-radius: 0.5em;
+  padding: 0.1em 0.4em 0;
+  margin: -0.1em 0 0;
 }
 
 h1 {
@@ -30,7 +39,7 @@ h1 {
   position: relative;
   margin: 0 -10vw;
   padding: 0 10vw 0.1em;
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: hsla(0, 0%, 100%, 0.2);
 }
 h2 {
   font-size: 1rem;