Add svelte frontend

author: Ben Beltran <ben@nsovocal.com> 2019-12-23 00:24:21 +0100
committer: Ben Beltran <ben@nsovocal.com> 2019-12-23 00:24:21 +0100
commit: 890274a7b3ac70848ba9973ef33d53ed58ff88a8 (patch)
tree: b003c6eb5e97d7f7060ddd2170fd3a098ba40e30 /app
parent: 49d43aa3ace56dc28d4d2b30cafcd064e53a42d9 (diff)
7 files changed, 178 insertions, 0 deletions
diff --git a/app/application.js b/app/application.js
new file mode 100644
index 0000000..6f44869
--- /dev/null
+++ b/app/application.js
@@ -0,0 +1,10 @@
+import Forum from './forum.svelte';
+
+const forum = new Forum({
+  target: document.body,
+  props: {
+    greeting: 'yooo'
+  }
+});
+
+export default forum;
diff --git a/app/components/forum_list/forum_list.svelte b/app/components/forum_list/forum_list.svelte
new file mode 100644
index 0000000..905421e
--- /dev/null
+++ b/app/components/forum_list/forum_list.svelte
@@ -0,0 +1,21 @@
+<script>
+  import {forums, addForum} from '../../models/forums.js'
+
+  import { fade } from 'svelte/transition';
+</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>
diff --git a/app/components/header/header.svelte b/app/components/header/header.svelte
new file mode 100644
index 0000000..15b75b8
--- /dev/null
+++ b/app/components/header/header.svelte
@@ -0,0 +1,11 @@
+<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>
diff --git a/app/css/style.css b/app/css/style.css
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/app/css/style.css
diff --git a/app/forum.svelte b/app/forum.svelte
new file mode 100644
index 0000000..99ce5a8
--- /dev/null
+++ b/app/forum.svelte
@@ -0,0 +1,35 @@
+<script>
+  import ForumList from './components/forum_list/forum_list.svelte';
+  import Header from './components/header/header.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 />
+<ForumList />
+
+<style>
+  h1 {
+    color: magenta;
+  }
+</style>
diff --git a/app/index.html b/app/index.html
new file mode 100644
index 0000000..7dad472
--- /dev/null
+++ b/app/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="description" content="A forum for the year 3000">
+    <meta name="robots" content="noindex, nofollow" />
+
+    <title>Forum.</title>
+
+    <script defer src="./application.js"></script>
+
+    <link href="./css/style.css" rel="stylesheet">
+  </head>
+  <body>
+  </body>
+</html>
diff --git a/app/models/forums.js b/app/models/forums.js
new file mode 100644
index 0000000..211181e
--- /dev/null
+++ b/app/models/forums.js
@@ -0,0 +1,85 @@
+import { writable } from 'svelte/store';
+
+const internals = {};
+
+internals.forums = [
+  {
+    id: 'life',
+    kanji: '命',
+    label: 'Life'
+  },
+  {
+    id: 'the-world',
+    kanji: '世',
+    label: 'The World'
+  },
+  {
+    id: 'online',
+    kanji: '直結',
+    label: 'Online'
+  },
+  {
+    id: 'experience',
+    kanji: '体験',
+    label: 'Experience'
+  },
+  {
+    id: 'belief',
+    kanji: '信念',
+    label: 'Belief'
+  },
+  {
+    id: 'movement',
+    kanji: '動',
+    label: 'Movement'
+  },
+  {
+    id: 'emotion',
+    kanji: '情',
+    label: 'Emotion'
+  },
+  {
+    id: 'interaction',
+    kanji: '交流',
+    label: 'Interaction'
+  },
+  {
+    id: 'structure',
+    kanji: '構造',
+    label: 'Structure'
+  },
+  {
+    id: 'sound',
+    kanji: '音',
+    label: 'Sound'
+  },
+  {
+    id: 'words',
+    kanji: '言葉',
+    label: 'Words'
+  },
+  {
+    id: 'us',
+    kanji: '一同',
+    label: 'Us'
+  },
+  {
+    id: 'everything',
+    kanji: '何事も',
+    label: 'Everything'
+  }
+];
+
+export const forums = writable(internals.forums);
+
+export function addForum() {
+  const id = Math.random();
+
+  forums.update((forums) => ([...forums,
+    {
+      id,
+      kanji: 'の',
+      label: `Woah ${id}`
+    }
+  ]));
+};
author	Ben Beltran <ben@nsovocal.com>	2019-12-23 00:24:21 +0100
committer	Ben Beltran <ben@nsovocal.com>	2019-12-23 00:24:21 +0100
commit	890274a7b3ac70848ba9973ef33d53ed58ff88a8 (patch)
tree	b003c6eb5e97d7f7060ddd2170fd3a098ba40e30 /app
parent	49d43aa3ace56dc28d4d2b30cafcd064e53a42d9 (diff)