Add skeleton for topic

Tested with VoiceOver

12 files changed, 270 insertions, 71 deletions

diff --git a/app/components/forum_list/forum_list.svelte b/app/components/forum_list/forum_list.svelte
index 905421e..e49c8d8 100644
--- a/app/components/forum_list/forum_list.svelte
+++ b/app/components/forum_list/forum_list.svelte
@@ -1,21 +1,47 @@
 <script>
-  import {forums, addForum} from '../../models/forums.js'
-
-  import { fade } from 'svelte/transition';
+  import {forums, addForum} from '../../stores/forums.js'
 </script>
 
-<aside>
-  <button on:click="{addForum}">Add a Forum</button>
-  <nav>
-    <ul>
-      {#each $forums as forum}
-        <li transition:fade>
-          <a href="/f/{forum.id}">
-            <span class="navigation-kanji">{forum.kanji}</span>
-            <span class="navigation-label">{forum.label}</span>
-          </a>
-        </li>
-      {/each}
-    </ul>
-  </nav>
-</aside>
+<nav title="List of Forums">
+  <ul>
+    {#each $forums as forum}
+      <li>
+        <a href="/f/{forum.id}">
+          <span aria-hidden="true" class="navigation-glyph {forum.glyph}">{forum.glyph}</span>
+          <span class="navigation-label">{forum.label}</span>
+        </a>
+      </li>
+    {/each}
+  </ul>
+</nav>
+
+<style>
+  nav {
+    grid-column: col-start 1;
+    grid-row: 2;
+    border-right: 1px solid black;
+  }
+
+  ul {
+    padding: 0;
+  }
+
+  li {
+    display: block;
+    text-align: left;
+    margin-bottom: 20px;
+  }
+
+  .navigation-glyph {
+    font-size: 1.5rem;
+    display: block;
+  }
+
+  .☽ {
+    font-size: 2rem;
+  }
+
+  a {
+    text-decoration: none;
+  }
+</style>
diff --git a/app/components/glyph/glyph.svelte b/app/components/glyph/glyph.svelte
new file mode 100644
index 0000000..45a415b
--- /dev/null
+++ b/app/components/glyph/glyph.svelte
@@ -0,0 +1,38 @@
+<script>
+  import { getGlyphHash } from '../../utils/glyph_hash';
+
+  export let uuid;
+</script>
+
+<div class="glyphicon" aria-hidden="true" title="User avatar.">
+  {#each getGlyphHash(uuid) as fragment}
+    <span class="{fragment.glyph}" style="color: {fragment.color} ">
+      {fragment.glyph}
+    </span>
+  {/each}
+</div>
+
+<style>
+  .glyphicon {
+    border: 1px solid black;
+    display: inline-block;
+    font-size: 1.4rem;
+    height: 48px;
+    margin-top: 5px;
+    width: 48px;
+  }
+
+  span {
+    display: block;
+    float: left;
+    width: 24px;
+    height: 24px;
+    text-align: center;
+    line-height: 24px;
+  }
+
+  .☽ {
+    font-size: 2rem;
+    line-height: 19px;
+  }
+</style>
diff --git a/app/components/header/header.svelte b/app/components/header/header.svelte
index 15b75b8..edcbc79 100644
--- a/app/components/header/header.svelte
+++ b/app/components/header/header.svelte
@@ -1,11 +1,42 @@
-<header>
-  <nav class="top-navigation">
-    <ul>
-      <li><strong><a href="/">Forum v1.0.0</a></strong></li>
-      <li><a href="/new"><u class="action-key">N</u>ew Post</a></li>
-      <li><a href="/reply"><u class="action-key">R</u>eply</a></li>
-      <li><a href="/search"><u class="action-key">S</u>earch</a></li>
-      <li><a href="/logout">Log <u class="action-key">O</u>ut</a></li>
-    </ul>
-  </nav>
+<header title="Toolbar">
+  <ul>
+    <li><strong><a href="/" aria-label="Forum Version 1.0.0">Forum v1.0.0</a></strong></li>
+    <li><a href="/new" aria-label="New"><u class="action-key">N</u>ew</a></li>
+    <li><a href="/reply" aria-label="Reply"><u class="action-key">R</u>eply</a></li>
+    <li><a href="/search" aria-label="Search"><u class="action-key">S</u>earch</a></li>
+    <li><a href="/logout" aria-label="Log Out">Log <u class="action-key">O</u>ut</a></li>
+  </ul>
 </header>
+
+<style>
+  header {
+    grid-column: col-start 1 / span 12;
+    border-bottom: 1px solid black;
+  }
+
+  ul {
+    padding: 0;
+  }
+
+  .action-key {
+    font-weight: bold;
+    text-decoration: underline;
+  }
+
+  li {
+    display: inline;
+    margin: 5px;
+  }
+
+  a {
+    text-decoration: none;
+    line-height: 3em;
+    display: inline-block;
+  }
+
+  strong a {
+    color: blue;
+    text-decoration: underline;
+  }
+
+</style>
diff --git a/app/components/topic/topic.svelte b/app/components/topic/topic.svelte
new file mode 100644
index 0000000..367a5b8
--- /dev/null
+++ b/app/components/topic/topic.svelte
@@ -0,0 +1,61 @@
+<script>
+  import Glyph from '../glyph/glyph.svelte';
+</script>
+
+<main class="h-entry" title="Topic">
+  <h1 class="p-name">This is a post in the forum.</h1>
+  <aside class="topic-meta" title="Topic metadata">
+    <span class="topic-location">Posted on <a href="/f/interaction"
+        class="p-category">Interaction</a>.</span>
+    <span class="topic-ttl"><a class="u-url u-uid" href="/t/2a3fc567af8c897ca6f55fb5fj">3 days remaining</a>.</span>
+  </aside>
+  <aside class="topic-tags" title="Topic Tags">
+    Tags:
+    <a href="/t/question" class="p-category">question<span class="tag-weight">(5)</span></a>
+    <a href="/t/meta" class="p-category">meta<span class="tag-weight">(34)</span></a>
+    <a href="/t/carrots" class="p-category">carrots<span class="tag-weight">(1)</span></a>
+    <a href="/t/tpbo" class="p-category">tpbo<span class="tag-weight">(2)</span></a>
+  </aside>
+  <aside class="post-meta" title="Post 1 of 2 metadata">
+    <Glyph uuid="3cd8c84e18144a2da71f6bace9392abc" />
+    <span class="h-card">
+      By: <a href="/a/rbdr" class="p-nickname u-url">rbdr</a>.
+    </span>
+    <time class="dt-published" datetime="2018-08-14T03:32:10.929Z">
+      <a href="/p/a80c70ea0120387123097ce1907ff">
+        2018-08-14 03:32:10
+      </a>
+    </time>
+  </aside>
+  <article class="e-content" title="Post 1 of 2 by rbdr">
+    <p>This is a main topic in the forum. Does that abstraction still even make sense?</p>
+    <p>Is this really it??</p>
+    <p>This might all be fake but at least the links look purple when visited</p>
+  </article>
+  <hr/>
+  <aside class="post-meta" title="Post 2 of 2 metadata">
+    <Glyph uuid="b33f0339f7d64d1ca27f1c0aefb7d753" />
+    <span class="h-card">
+      By: <a href="/a/time4carrots" class="p-nickname u-url">time4carrots</a>.
+    </span>
+    <time class="dt-published" datetime="2018-08-15T04:10:00.929Z">
+      <a href="/p/da9910f3febde91948000ce1535ea">
+        2018-08-15 04:10:00
+      </a>
+    </time>
+  </aside>
+  <article class="e-content" title="Post 2 of 2 by time4carrots">
+    <p>It's just how it is...</p>
+  </article>
+  <hr/>
+</main>
+
+<style>
+  main {
+    grid-column: col-start 2 / span 11;
+  }
+
+  .post-meta > * {
+    vertical-align: top;
+  }
+</style>
diff --git a/app/css/global.css b/app/css/global.css
new file mode 100644
index 0000000..84e9f8c
--- /dev/null
+++ b/app/css/global.css
@@ -0,0 +1,7 @@
+body {
+  display: grid;
+  font-family : 'ヒラギノ明朝 ProN' , 'Hiragino Mincho ProN' , '游明朝','游明朝体',YuMincho,'Yu Mincho' , 'ＭＳ 明朝' , 'MS Mincho' , HiraMinProN-W3 , 'TakaoEx明朝' , TakaoExMincho , 'MotoyaLCedar' , 'Droid Sans Japanese' , serif;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+  grid-gap: 20px;
+  grid-auto-rows: minmax(24px, auto);
+}
diff --git a/app/css/style.css b/app/css/style.css
deleted file mode 100644
index e69de29..0000000
--- a/app/css/style.css
+++ /dev/null
diff --git a/app/forum.svelte b/app/forum.svelte
index 99ce5a8..d944d8e 100644
--- a/app/forum.svelte
+++ b/app/forum.svelte
@@ -1,35 +1,10 @@
 <script>
   import ForumList from './components/forum_list/forum_list.svelte';
   import Header from './components/header/header.svelte';
+  import Topic from './components/topic/topic.svelte';
 
 </script>
 
-<main class="topic">
-  <h1>Is this really what the forum looks like?</h1>
-  <p class="topic-meta">
-    <span class="topic-location">Posted on <a href="/f/interaction">Interaction</a>.</span>
-    <span class="topic-ttl"><a href="/t/2a3fc567af8c897ca6f55fb5fj">3 days remaining</a>.</span>
-  </p>
-  <p class="topic-tags">
-    Tags:
-    <a href="/t/question">question<span class="tag-weight">(5)</span></a>
-    <a href="/t/meta">meta<span class="tag-weight">(34)</span></a>
-    <a href="/t/carrots">carrots<span class="tag-weight">(1)</span></a>
-    <a href="/t/tpbo">tpbo<span class="tag-weight">(2)</span></a>
-  </p>
-  <article class="post">
-    <footer>
-      <span class="post-author">By: <a href="/a/rbdr">rbdr</a>.</span>
-      <span class="post-date"><a href="/p/a80c70ea0120387123097ce1907ff">2018-08-14 03:32:10</a></span>
-      <p>So, I’m new here and I had heard a lot about the forums.<br><br>Is this really it??<br><br>It has barely any features, also I think I accidentaally created a post without a board? what’s up with that??</p>
-    </footer>
-  </article>
-</main>
 <Header />
+<Topic />
 <ForumList />
-
-<style>
-  h1 {
-    color: magenta;
-  }
-</style>
diff --git a/app/index.html b/app/index.html
index 7dad472..7c4d601 100644
--- a/app/index.html
+++ b/app/index.html
@@ -1,16 +1,24 @@
 <!doctype html>
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8">
     <meta name="description" content="A forum for the year 3000">
     <meta name="robots" content="noindex, nofollow" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="theme-color" content="#ffffff">
 
     <title>Forum.</title>
 
+    <link rel="manifest" href="./manifest.webmanifest">
+
     <script defer src="./application.js"></script>
 
-    <link href="./css/style.css" rel="stylesheet">
+    <link href="./css/global.css" rel="stylesheet">
   </head>
   <body>
+    <noscript>
+      <h1>Javascript Required.</h1>
+      <p>Please enable Javascript to use this forum.</p>
+    </noscript>
   </body>
 </html>
diff --git a/app/manifest.json b/app/manifest.json
new file mode 100644
index 0000000..dbeaa18
--- /dev/null
+++ b/app/manifest.json
@@ -0,0 +1,8 @@
+{
+  "name": "Forum",
+  "short_name": "Forum",
+  start_url": "/",
+"background_color": "#ffffff",
+  "display": "standalone",
+  "theme_color": "#ffffff"
+}
diff --git a/app/manifest.webmanifest b/app/manifest.webmanifest
new file mode 100644
index 0000000..68a60f7
--- /dev/null
+++ b/app/manifest.webmanifest
@@ -0,0 +1,7 @@
+{
+  "name": "Forum",
+  "start_url": "/",
+  "background_color": "#ffffff",
+  "display": "standalone",
+  "theme_color": "#ffffff"
+}
diff --git a/app/models/forums.js b/app/stores/forums.js
index 211181e..adc8758 100644
--- a/app/models/forums.js
+++ b/app/stores/forums.js
@@ -5,67 +5,67 @@ const internals = {};
 internals.forums = [
   {
     id: 'life',
-    kanji: '命',
+    glyph: '☆',
     label: 'Life'
   },
   {
     id: 'the-world',
-    kanji: '世',
+    glyph: '◯',
     label: 'The World'
   },
   {
     id: 'online',
-    kanji: '直結',
+    glyph: '⏀',
     label: 'Online'
   },
   {
     id: 'experience',
-    kanji: '体験',
+    glyph: '♢',
     label: 'Experience'
   },
   {
     id: 'belief',
-    kanji: '信念',
+    glyph: '⏃',
     label: 'Belief'
   },
   {
     id: 'movement',
-    kanji: '動',
+    glyph: '▷',
     label: 'Movement'
   },
   {
     id: 'emotion',
-    kanji: '情',
+    glyph: '☽',
     label: 'Emotion'
   },
   {
     id: 'interaction',
-    kanji: '交流',
+    glyph: '〒',
     label: 'Interaction'
   },
   {
     id: 'structure',
-    kanji: '構造',
+    glyph: '▢',
     label: 'Structure'
   },
   {
     id: 'sound',
-    kanji: '音',
+    glyph: '〰',
     label: 'Sound'
   },
   {
     id: 'words',
-    kanji: '言葉',
+    glyph: '╳',
     label: 'Words'
   },
   {
     id: 'us',
-    kanji: '一同',
+    glyph: '╱',
     label: 'Us'
   },
   {
     id: 'everything',
-    kanji: '何事も',
+    glyph: '♡',
     label: 'Everything'
   }
 ];
@@ -78,7 +78,7 @@ export function addForum() {
   forums.update((forums) => ([...forums,
     {
       id,
-      kanji: 'の',
+      glyph: 'の',
       label: `Woah ${id}`
     }
   ]));
diff --git a/app/utils/glyph_hash.js b/app/utils/glyph_hash.js
new file mode 100644
index 0000000..c074376
--- /dev/null
+++ b/app/utils/glyph_hash.js
@@ -0,0 +1,38 @@
+const internals = {
+  kSplitterRegex: /.{1,8}/g,
+  kGlyphs: [
+    "☽",
+    "☆",
+    "♢",
+    "♡",
+    "╱",
+    "╲",
+    "╳",
+    "〰",
+    "▷",
+    "⏊",
+    "〒",
+    "▢",
+    "◯",
+    "⏃",
+    "⏀",
+    "⏆"
+  ]
+};
+
+// Return a glyph with color based on a 4 byte fragment of a UUIDv4
+const getGlyphHashFragment = function (uuidFragment) {
+
+  const glyphIndex = parseInt(uuidFragment.substring(0,2), 16) % 16;
+  return {
+    glyph: internals.kGlyphs[glyphIndex],
+    color: `#${uuidFragment.substring(2,8)}`
+  }
+};
+
+// Return an array of glyphs based on a UUIDv4
+export const getGlyphHash = function (uuid) {
+
+  const hashFragments = uuid.match(internals.kSplitterRegex);
+  return hashFragments.map(getGlyphHashFragment);
+};