diff options
| author | Ruben Beltran del Rio <ruben@unlimited.pizza> | 2021-03-09 22:43:12 +0100 |
|---|---|---|
| committer | Ruben Beltran del Rio <ruben@unlimited.pizza> | 2021-03-09 22:43:12 +0100 |
| commit | bd8e98d7e24c4dbaee7db6ec7955f7c2f6d396a6 (patch) | |
| tree | e5f0dcbc14d3009c17e5f562404fe19f6aceab73 /app | |
| parent | 862a5f9cdbbda522c608ea63c1e296e81f44de10 (diff) | |
Update to SvelteKit
Diffstat (limited to 'app')
26 files changed, 0 insertions, 687 deletions
diff --git a/app/application.js b/app/application.js deleted file mode 100644 index 6f44869..0000000 --- a/app/application.js +++ /dev/null @@ -1,10 +0,0 @@ -import Forum from './forum.svelte'; - -const forum = new Forum({ - target: document.body, - props: { - greeting: 'yooo' - } -}); - -export default forum; diff --git a/app/components/author/author.svelte b/app/components/author/author.svelte deleted file mode 100644 index e69de29..0000000 --- a/app/components/author/author.svelte +++ /dev/null diff --git a/app/components/error_block/error_block.svelte b/app/components/error_block/error_block.svelte deleted file mode 100644 index e46afa1..0000000 --- a/app/components/error_block/error_block.svelte +++ /dev/null @@ -1,31 +0,0 @@ -<script> - import { _ } from 'svelte-i18n'; - export let message; -</script> - -<div> - <h2>{$_('error.generic.title')}</h2> - <p>{message || $_('error.generic.message')}</p> -</div> - -<style> - div { - background: repeating-linear-gradient( -45deg, red, red 5px, black 5px, black 10px ); - border: 5px solid red; - color: yellow; - font-family: 'ヒラギノ角ゴ ProN' , 'Hiragino Kaku Gothic ProN' , '游ゴシック' , '游ゴシック体' , YuGothic , 'Yu Gothic' , 'メイリオ' , Meiryo , 'MS ゴシック' , 'MS Gothic' , HiraKakuProN-W3 , 'TakaoExゴシック' , TakaoExGothic , 'MotoyaLCedar' , 'Droid Sans Japanese' , sans-serif; - margin: 0 10px 0 0; - padding: 100px 5px; - text-align: center; - } - - h2, p { - background-color: black; - font-size: 1em; - } - - h2 { - text-transform: uppercase; - } -</style> - diff --git a/app/components/footer/footer.svelte b/app/components/footer/footer.svelte deleted file mode 100644 index 2d45cef..0000000 --- a/app/components/footer/footer.svelte +++ /dev/null @@ -1,47 +0,0 @@ -<script> - import { _ } from 'svelte-i18n'; - - import LanguageSelector from '../language_selector/language_selector.svelte'; - - const licenseUrl = 'https://gitlab.com/rbdr/forum/'; -</script> - -<footer title="Toolbar"> - <ul> - <li>{@html $_('footer.license', { values: { licenseUrl } })}</li> - <li>{$_('footer.choose_language')}: <LanguageSelector /></li> - </ul> -</footer> - -<style> - footer { - grid-column: col-start 1 / span 12; - border-top: 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/forum_list/forum_list.svelte b/app/components/forum_list/forum_list.svelte deleted file mode 100644 index 5ce4dc1..0000000 --- a/app/components/forum_list/forum_list.svelte +++ /dev/null @@ -1,52 +0,0 @@ -<script> - import { _ } from 'svelte-i18n'; - import { forums } from '../../stores/forums.js'; - import ErrorBlock from '../error_block/error_block.svelte'; -</script> - -<nav title="List of Forums"> - {#if !$forums.length} - <ErrorBlock message={$_('forum_list.error.unavailable')} /> - {/if} - <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 deleted file mode 100644 index 45a415b..0000000 --- a/app/components/glyph/glyph.svelte +++ /dev/null @@ -1,38 +0,0 @@ -<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 deleted file mode 100644 index edcbc79..0000000 --- a/app/components/header/header.svelte +++ /dev/null @@ -1,42 +0,0 @@ -<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/home/home.svelte b/app/components/home/home.svelte deleted file mode 100644 index 280bb5d..0000000 --- a/app/components/home/home.svelte +++ /dev/null @@ -1,3 +0,0 @@ -<h1>Welcome.</h1> -<p>You are now in a forum. Select a category from the left or input a - valid URL.</p> diff --git a/app/components/invalid_route/invalid_route.svelte b/app/components/invalid_route/invalid_route.svelte deleted file mode 100644 index 32225f1..0000000 --- a/app/components/invalid_route/invalid_route.svelte +++ /dev/null @@ -1,2 +0,0 @@ -<h1> This is not right. </h1> -<p>This URL is not valid. Try again.</p> diff --git a/app/components/language_selector/language_selector.svelte b/app/components/language_selector/language_selector.svelte deleted file mode 100644 index 67c0814..0000000 --- a/app/components/language_selector/language_selector.svelte +++ /dev/null @@ -1,28 +0,0 @@ -<script> - import { locale, locales } from 'svelte-i18n'; - import { getLangNameFromCode } from 'language-name-map'; - - $: namedLocales = $locales - .map((locale) => ({ - code: locale, - ...getLangNameFromCode(locale) - })) - .sort((a, b) => a.native - b.native); - - let selected = $locale; - - $: { - console.log(`the current locale is ${selected}`); - locale.set(selected); - } -</script> - -<select bind:value={selected}> - {#each namedLocales as namedLocale} - <option value="{ namedLocale.code }">{ namedLocale.native }</option> - {/each} -</select> - -<style> -</style> - diff --git a/app/components/post/post.svelte b/app/components/post/post.svelte deleted file mode 100644 index fad7628..0000000 --- a/app/components/post/post.svelte +++ /dev/null @@ -1,25 +0,0 @@ -<script> - import Glyph from '../glyph/glyph.svelte'; -</script> - -<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 role="presentation" 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/> - -<style> - .post-meta > * { - vertical-align: top; - } -</style> diff --git a/app/components/topic/topic.svelte b/app/components/topic/topic.svelte deleted file mode 100644 index 4a55930..0000000 --- a/app/components/topic/topic.svelte +++ /dev/null @@ -1,57 +0,0 @@ -<script> - import Glyph from '../glyph/glyph.svelte'; -</script> - -<div 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" title="Permalink to topic" href="/t/2a3fc567af8c897ca6f55fb5fj">3 days remaining</a>.</span> - </aside> - <aside class="topic-tags" title="Topic Tags"> - Tags: - <a href="/g/question" class="p-category">question<span class="tag-weight">(5)</span></a> - <a href="/g/meta" class="p-category">meta<span class="tag-weight">(34)</span></a> - <a href="/g/carrots" class="p-category">carrots<span class="tag-weight">(1)</span></a> - <a href="/g/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 role="presentation" class="dt-published" datetime="2018-08-14T03:32:10.929Z"> - <a title="Permalink to post" 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 role="presentation" 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/> -</div> - -<style> - .post-meta > * { - vertical-align: top; - } -</style> diff --git a/app/components/topic_index/topic_index.svelte b/app/components/topic_index/topic_index.svelte deleted file mode 100644 index 3de83bb..0000000 --- a/app/components/topic_index/topic_index.svelte +++ /dev/null @@ -1,8 +0,0 @@ -<script> - export let params; - import ErrorBlock from '../error_block/error_block.svelte'; -</script> - -<ErrorBlock /> -<h1>Topic Index.</h1> -<p>This component lists topics for category or tag with id: {params.id}</p> diff --git a/app/config/config.js b/app/config/config.js deleted file mode 100644 index c915f70..0000000 --- a/app/config/config.js +++ /dev/null @@ -1,8 +0,0 @@ -/* - * The main configuration object for the Forum frontend. These values - * are calculated during compile time and need to be set in a .env - * file, otherwise it won't work. - */ - -// Location of the socket server -export const socketServer = process.env.FORUM_SOCKET_SERVER; diff --git a/app/config/env.dist b/app/config/env.dist deleted file mode 100644 index 0bcd782..0000000 --- a/app/config/env.dist +++ /dev/null @@ -1 +0,0 @@ -FORUM_SOCKET_SERVER=ws://location_of_socket_server diff --git a/app/config/i18n.js b/app/config/i18n.js deleted file mode 100644 index 25ffc45..0000000 --- a/app/config/i18n.js +++ /dev/null @@ -1,12 +0,0 @@ -import { addMessages, getLocaleFromNavigator, init } from 'svelte-i18n'; - -import en from './translations/en.json'; -import es from './translations/es.json'; - -addMessages('en', en); -addMessages('es', es); - -init({ - fallbackLocale: 'en', - initialLocale: getLocaleFromNavigator() -}); diff --git a/app/config/translations/en.json b/app/config/translations/en.json deleted file mode 100644 index 468bdc1..0000000 --- a/app/config/translations/en.json +++ /dev/null @@ -1,34 +0,0 @@ -{ - "error": { - "generic": { - "title": "Error!", - "message": "Unknown error has occurred. Panic!" - } - }, - "footer": { - "choose_language": "Choose your language", - "license": "Forum is <a href=\"{licenseUrl}\">open source.</a>" - }, - "forum_list": { - "error": { - "unavailable": "Forum list unavailable." - } - }, - "forum": { - "name": { - "everything": "Everything", - "us": "Us", - "words": "Words", - "sound": "Sounds", - "structure": "Structure", - "interaction": "Interaction", - "emotion": "Emotion", - "movement": "Movement", - "belief": "Belief", - "experience": "Experience", - "online": "Online", - "the_world": "The World", - "life": "Life" - } - } -} diff --git a/app/config/translations/es.json b/app/config/translations/es.json deleted file mode 100644 index 8831d2a..0000000 --- a/app/config/translations/es.json +++ /dev/null @@ -1,34 +0,0 @@ -{ - "error": { - "generic": { - "title": "Error!", - "message": "Hubo un error desconocido. Entra en pánico!" - } - }, - "footer": { - "choose_language": "Escoge un lenguaje", - "license": "Forum es <a href=\"{licenseUrl}\">software libre.</a>" - }, - "forum_list": { - "error": { - "unavailable": "Lista de foros no disponible." - } - }, - "forum": { - "name": { - "everything": "Todo", - "us": "Nosotros", - "words": "Palabras", - "sound": "Sonidos", - "structure": "Estructura", - "interaction": "Interacción", - "emotion": "Emoción", - "movement": "Movimiento", - "belief": "Creencia", - "experience": "Experiencia", - "online": "En Línea", - "the_world": "El Mundo", - "life": "Vida" - } - } -} diff --git a/app/css/global.css b/app/css/global.css deleted file mode 100644 index 84e9f8c..0000000 --- a/app/css/global.css +++ /dev/null @@ -1,7 +0,0 @@ -body { - display: grid; - font-family : 'ヒラギノ明朝 ProN' , 'Hiragino Mincho ProN' , '游明朝','游明朝体',YuMincho,'Yu Mincho' , 'MS 明朝' , '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/forum.svelte b/app/forum.svelte deleted file mode 100644 index d2a6e1b..0000000 --- a/app/forum.svelte +++ /dev/null @@ -1,63 +0,0 @@ -<script> - import LightRouter from 'lightrouter'; - - // Initialize localization - - import './config/i18n'; - - // Global components - - import ForumList from './components/forum_list/forum_list.svelte'; - import Header from './components/header/header.svelte'; - import Footer from './components/footer/footer.svelte'; - - // Routed Components - import Author from './components/author/author.svelte'; - import Home from './components/home/home.svelte'; - import InvalidRoute from './components/invalid_route/invalid_route.svelte'; - import Post from './components/post/post.svelte'; - import Topic from './components/topic/topic.svelte'; - import TopicIndex from './components/topic_index/topic_index.svelte'; - - let page; - let params; - - // sets the route params and current page. - - const setRoute = function setRoute(targetPage) { - - return function (routerParams) { - - params = routerParams; - page = targetPage; - }; - }; - - const router = new LightRouter({ - routes: { - '': () => (page = Home) && true, - 'f/{id}': setRoute(TopicIndex), - 'g/{id}': setRoute(TopicIndex), - 'a/{id}': setRoute(Author), - 't/{id}': setRoute(Topic), - 'p/{id}': setRoute(Post), - '.*': setRoute(InvalidRoute) - } - }); - - router.run(); - -</script> - -<Header /> -<main> - <svelte:component this={ page } params={ params } /> -</main> -<ForumList /> -<Footer /> - -<style> - main { - grid-column: col-start 2 / span 11; - } -</style> diff --git a/app/index.html b/app/index.html deleted file mode 100644 index 7c4d601..0000000 --- a/app/index.html +++ /dev/null @@ -1,24 +0,0 @@ -<!doctype 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/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 deleted file mode 100644 index dbeaa18..0000000 --- a/app/manifest.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "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 deleted file mode 100644 index 68a60f7..0000000 --- a/app/manifest.webmanifest +++ /dev/null @@ -1,7 +0,0 @@ -{ - "name": "Forum", - "start_url": "/", - "background_color": "#ffffff", - "display": "standalone", - "theme_color": "#ffffff" -} diff --git a/app/socket_coordinator.js b/app/socket_coordinator.js deleted file mode 100644 index f8fb525..0000000 --- a/app/socket_coordinator.js +++ /dev/null @@ -1,63 +0,0 @@ -import EventEmitter from 'eventemitter3'; -import { socketServer } from './config/config'; - -const internals = { - - kReconnectInterval: 3000, // How often we attempt to reconnect - - eventEmitter: new EventEmitter(), // internal event emitter - socket: null, // stores the socket connection - retry: null, // stores the retry operation - - connect() { - - console.debug('Connecting socket.'); - internals.socket = new WebSocket(socketServer); - - internals.socket.addEventListener('message', internals.onMessage); - internals.socket.addEventListener('error', internals.onError); - internals.socket.addEventListener('close', internals.onClose); - }, - - // Handles socket errors. - - onError(event) { - - console.error('Socket error. Closing connection'); - internals.socket.close(); - }, - - // Handles socket errors. - - onClose(event) { - - console.debug(`Connection closed: ${event.reason || 'Unknown reason'}. Retrying in ${internals.kReconnectInterval}ms`); - - internals.retry && clearTimeout(internals.retry); - internals.retry = setTimeout(() => { - - console.debug('Reconnecting socket.'); - internals.retry = null; - internals.connect(); - }, internals.kReconnectInterval); - }, - - // Forwards events from the socket to our internal event emitter. - - onMessage(event) { - - internals.eventEmitter.emit('message', event); - } -}; - -export const onMessage = function (listener) { - - if (!internals.socket) { - internals.connect(); - } - - internals.eventEmitter.on('message', (message) => { - - listener(JSON.parse(message.data)); - }); -}; diff --git a/app/stores/forums.js b/app/stores/forums.js deleted file mode 100644 index e826163..0000000 --- a/app/stores/forums.js +++ /dev/null @@ -1,45 +0,0 @@ -import { readable } from 'svelte/store'; -import { onMessage } from '../socket_coordinator'; - -const internals = { - - // Constants - - kChangeFeedEventName: 'changefeed:forums', - - // The exported data structure - - forums: [], - - // Handles messages from the event - - handleChangeFeed(data) { - - // No old value == add - if (!data.old_val) { - return internals.forums.push(data.new_val); - } - - // We have an old value, let's find it. - const index = internals.forums.findIndex((element) => element.id === data.old_val.id); - - if (index > -1) { - if (data.new_val) { - return internals.forums.splice(index, 1, data.new_val || undefined); - } - - return internals.forums.splice(index, 1); - } - } -}; - -export const forums = readable(internals.forums, (set) => { - - onMessage((message) => { - - if (message.name === internals.kChangeFeedEventName) { - internals.handleChangeFeed(message.data); - set(internals.forums); - } - }); -}); diff --git a/app/utils/glyph_hash.js b/app/utils/glyph_hash.js deleted file mode 100644 index 120c02a..0000000 --- a/app/utils/glyph_hash.js +++ /dev/null @@ -1,38 +0,0 @@ -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); -}; |