--- /dev/null
+import Forum from './forum.svelte';
+
+const forum = new Forum({
+ target: document.body,
+ props: {
+ greeting: 'yooo'
+ }
+});
+
+export default forum;
--- /dev/null
+<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>
--- /dev/null
+<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>
--- /dev/null
+<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>
--- /dev/null
+<!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>
--- /dev/null
+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}`
+ }
+ ]));
+};