various improvements

package.json

@@ -33,12 +33,12 @@
     "svelte": "^3.0.0",
     "svelte-check": "^1.0.0",
     "svelte-preprocess": "^4.0.0",
-    "svelte-routing": "^1.4.2",
     "tslib": "^2.0.0",
     "typescript": "^3.9.3"
   },
   "dependencies": {
     "isomorphic-fetch": "^2.2.1",
-    "marked": "^1.1.1"
+    "marked": "^1.1.1",
+    "svelte-routing": "^1.4.2"
   }
 }

rollup.config.js

@@ -11,17 +11,18 @@ import { mdsvex } from 'mdsvex';
 
 const production = !process.env.ROLLUP_WATCH;
 
-function serve() {
-	let server;
+let _server;
 
+function serve() {
 	function toExit() {
-		if (server) server.kill(0);
+		if (_server) server.kill(0);
 	}
 
 	return {
 		writeBundle() {
-			if (server) return;
-			server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
+			if (_server) return;
+
+			_server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
 				stdio: ['ignore', 'inherit', 'inherit'],
 				shell: true
 			});
@@ -33,6 +34,15 @@ function serve() {
 }
 
 const sharedPlugins = (opts) => [
+	// If you have external dependencies installed from
+	// npm, you'll most likely need these plugins. In
+	// some cases you'll need additional configuration -
+	// consult the documentation for details:
+	// https://github.com/rollup/plugins/tree/master/packages/commonjs
+	resolve(Object.assign({
+		extensions: ['.mjs', '.js', '.json', '.node', '.svx', '.svelte']
+	}, opts.resolve || {})),
+
 	svelte(Object.assign({
 		hydratable: true,
 		extensions: ['.svelte', '.svx'],
@@ -48,11 +58,13 @@ const sharedPlugins = (opts) => [
 			mdsvex()
 		]
 	}, opts.svelte || {})),
+
 	commonjs(),
 	typescript({
 		tsconfig: opts.tsconfig || 'tsconfig.json',
 		sourceMap: !production
 	}),
+
 	json()
 ];
 
@@ -65,18 +77,13 @@ export default [{
 		file: 'public/build/bundle.js'
 	},
 	plugins: [
-		// If you have external dependencies installed from
-		// npm, you'll most likely need these plugins. In
-		// some cases you'll need additional configuration -
-		// consult the documentation for details:
-		// https://github.com/rollup/plugins/tree/master/packages/commonjs
-		resolve({
-			browser: true,
-			dedupe: ['svelte']
+		...sharedPlugins({
+			resolve: {
+				browser: true,
+				dedupe: ['svelte']
+			}
 		}),
 
-		...sharedPlugins({}),
-
 		// Watch the `public` directory and refresh the
 		// browser on changes when not in production
 		!production && livereload('public'),
@@ -91,15 +98,16 @@ export default [{
 },{
 	input: ['src/main.ts', 'src/App.svelte'],
 	output: {
+		sourcemap: true,
 		format: 'cjs',
 		name: 'main',
-		dir: 'server/build/'
+		dir: 'server/build/',
+		exports: 'auto'
 	},
 	plugins: [
 		replace({
 			"App.svelte": "App.js"
 		}),
-		resolve(),
 		...sharedPlugins({
 			tsconfig: "tsconfig.server.json",
 			svelte: { generate: 'ssr' }
@@ -109,6 +117,7 @@ export default [{
 },{
 	input: 'server/index.ts',
 	output: {
+		sourcemap: true,
 		format: 'cjs',
 		name: 'server',
 		dir: 'server/build/'
@@ -119,7 +128,6 @@ export default [{
 			"../src/": "./",
 			delimiters: ['', '']
 		}),
-		resolve(),
 		...sharedPlugins({
 			tsconfig: "tsconfig.server.json",
 			svelte: { generate: 'ssr' }

server/index.ts

@@ -1,6 +1,7 @@
 import 'isomorphic-fetch';
 
 import express from 'express';
+
 import { promises as fs } from 'fs';
 import main from '../src/main';
 

src/App.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import { Router, Route } from 'svelte-routing';
 
-	import NavLink from './components/NavLink.svelte';
-	import Logo from './components/Logo.svelte';
+	import NavLink from './components/NavLink';
+	import Logo from './components/Logo';
 
-	import Home from './routes/Home.svx';
-	import About from './routes/About.svx';
-	import Wiki from './routes/Wiki.svx';
-	import Join from './routes/Join.svx';
+	import Home from './routes/Home';
+	import About from './routes/About';
+	import Wiki from './routes/Wiki';
+	import Join from './routes/Join';
 
 	export let url = "";
 </script>
@@ -23,10 +23,10 @@
 	<main class="container">
 		<Logo/>
 
-		<Route path="/"><Home /></Route>
-		<Route path="/about/"><About /></Route>
-		<Route path="/wiki/*page" let:params><Wiki page="{params.page}" /></Route>
-		<Route path="/join/"><Join /></Route>
+		<Route path="/" component={Home}/>
+		<Route path="/about/" component={About}/>
+		<Route path="/wiki/*page" component={Wiki}/>
+		<Route path="/join/" component={Join}/>
 	</main>
 	<footer class="footer">
 		<div class="container">

src/routes/About.svx

@@ -6,7 +6,7 @@
 
 # What's up with the name?
 
-horrific.dev's identity is derived from a common mindset shared by many of our members: namely, the idea of software development as a perpetually imperfect pursuit - and the idea that, sometimes, failure is okay.
+horrific.dev's identity is derived from a common mindset shared by many of our members: namely, a perception of software development as a perpetually imperfect pursuit - and the idea that, sometimes, failure is okay.
 
 > Experience breeds in failure, not success. Being a ["good" programmer](http://10x.engineer/) means nothing; one that can fail will learn the most. Embrace it. Write things that break. Hack a program together without thinking of the consequences, and laugh maniacally while you watch it burn.
 

src/routes/Join.svx

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import Card from '../components/Card.svelte';
-	import Markdown from '../components/Markdown.svelte';
+	import Card from '../components/Card';
+	import Markdown from '../components/Markdown';
 
 	const memberships = [
 		{
@@ -25,8 +25,7 @@
 		},
 		{
 			title: "Core Membership",
-			description: "Direct involvement in the organization, ability to participate and vote in meetings, with shared hosting expenses.",
-			items: []
+			description: "Direct involvement with the organization, ability to participate and vote in meetings, with shared costs and responsibility."
 		}
 	];
 </script>
@@ -41,12 +40,14 @@ Something something TODO general description of services/membership options.
 		<Card title="{membership.title}">
 			<span>{membership.description}</span>
 			<br><br>
+			{#if membership.items}
 			<strong>Includes:</strong>
 			<ul>
 				{#each membership.items as item}
 				<li><Markdown content="{item}" inline="true"/></li>
 				{/each}
 			</ul>
+			{/if}
 		</Card>
 	</div>
 	{/each}

src/routes/Wiki.svx

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Markdown from '../components/Markdown.svelte';
+	import Markdown from '../components/Markdown';
 
 	export let page = "";