Migrating to Svelte
User management not done. Footer not done Nav user management icon not positioned correctly
This commit is contained in:
375
src/routes/_error.svelte
Normal file
375
src/routes/_error.svelte
Normal file
@ -0,0 +1,375 @@
|
||||
<script>
|
||||
import {onMount} from 'svelte'
|
||||
|
||||
export let status;
|
||||
export let error;
|
||||
|
||||
const dev = process.env.NODE_ENV === 'development';
|
||||
|
||||
|
||||
var appa = ` .,-:;//;:=,
|
||||
. :H@@@MM@M#H/.,+%;,
|
||||
,/X+ +M@@M@MM%=,-%HMMM@X/,
|
||||
-+@MM; $M@@MH+-,;XMMMM@MMMM@+-
|
||||
;@M@@M- XM@X;. -+XXXXXHHH@M@M#@/.
|
||||
,%MM@@MH ,@%= .---=-=:=,.
|
||||
-@#@@@MX ., -%HX$$%%%+;
|
||||
=-./@M@M$ .;@MMMM@MM:
|
||||
X@/ -$MM/ .+MM@@@M$
|
||||
,@M@H: :@: . -X#@@@@-
|
||||
,@@@MMX, . /H- ;@M@M=
|
||||
.H@@@@M@+, %MM+..%#$.
|
||||
/MMMM@MMH/. XM@MH; -;
|
||||
/%+%$XHH@$= , .H@@@@MX,
|
||||
.=--------. -%H.,@@@@@MX,
|
||||
.%MM@@@HHHXX$$$%+- .:$MMX -M@@MM%.
|
||||
=XMMM@MM@MM#H;,-+HMM@M+ /MMMX=
|
||||
=%@M@M#@$-.=$@MM@@@M; %M%=
|
||||
,:+$+-,/H#MMMMMMM@- -,
|
||||
=++%%%%+/:-.`;
|
||||
|
||||
var nuke = ` =+$HM####@H%;,
|
||||
/H###############M$,
|
||||
,@################+
|
||||
.H##############+
|
||||
X############/
|
||||
$##########/
|
||||
%########/
|
||||
/X/;;+X/
|
||||
|
||||
-XHHX-
|
||||
,######,
|
||||
#############X .M####M. X#############
|
||||
##############- -//- -##############
|
||||
X##############%, ,+##############X
|
||||
-##############X X##############-
|
||||
%############% %############%
|
||||
%##########; ;##########%
|
||||
;#######M= =M#######;
|
||||
.+M###@, ,@###M+.
|
||||
:XH. .HX:`;
|
||||
|
||||
var atom = ` =/;;/-
|
||||
+: //
|
||||
/; /;
|
||||
-X H.
|
||||
.//;;;:;;-, X= :+ .-;:=;:;%;.
|
||||
M- ,=;;;#:, ,:#;;:=, ,@
|
||||
:% :%.=/++++/=.$= %=
|
||||
,%; %/:+/;,,/++:+/ ;+.
|
||||
,+/. ,;@+, ,%H;, ,/+,
|
||||
;+;;/= @. .H##X -X :///+;
|
||||
;+=;;;.@, .XM@$. =X.//;=%/.
|
||||
,;: :@%= =$H: .+%-
|
||||
,%= %;-///==///-// =%,
|
||||
;+ :%-;;;;;;;;-X- +:
|
||||
@- .-;;;;M- =M/;;;-. -X
|
||||
:;;::;;-. %- :+ ,-;;-;:==
|
||||
,X H.
|
||||
;/ %=
|
||||
// +;
|
||||
,////,`;
|
||||
|
||||
var heart = ` .,---.
|
||||
,/XM#MMMX;,
|
||||
-%##########M%,
|
||||
-@######% $###@=
|
||||
.,--, -H#######$ $###M:
|
||||
,;$M###MMX; .;##########$;HM###X=
|
||||
,/@###########H= ;################+
|
||||
-+#############M/, %##############+
|
||||
%M###############= /##############:
|
||||
H################ .M#############;.
|
||||
@###############M ,@###########M:.
|
||||
X################, -$=X#######@:
|
||||
/@##################%- +######$-
|
||||
.;##################X .X#####+,
|
||||
.;H################/ -X####+.
|
||||
,;X##############, .MM/
|
||||
,:+$H@M#######M#$- .$$=
|
||||
.,-=;+$@###X: ;/=.
|
||||
.,/X$; .::,
|
||||
., ..`;
|
||||
|
||||
var fire = ` -$-
|
||||
.H##H,
|
||||
+######+
|
||||
.+#########H.
|
||||
-$############@.
|
||||
=H###############@ -X:
|
||||
.$##################: @#@-
|
||||
,; .M###################; H###;
|
||||
;@#: @###################@ ,#####:
|
||||
-M###. M#################@. ;######H
|
||||
M####- +###############$ =@#######X
|
||||
H####$ -M###########+ :#########M,
|
||||
/####X- =########% :M########@/.
|
||||
,;%H@X; .$###X :##MM@%+;:-
|
||||
..
|
||||
-/;:-,. ,,-==+M########H
|
||||
-##################@HX%%+%%$%%%+:,,
|
||||
.-/H%%%+%%$H@###############M@+=:/+:
|
||||
/XHX%:#####MH%= ,---:;;;;/&&XHM,:###$
|
||||
$@#MX %+;- .`;
|
||||
|
||||
var tick = ` :X-
|
||||
:X###
|
||||
;@####@
|
||||
;M######X
|
||||
-@########$
|
||||
.$##########@
|
||||
=M############-
|
||||
+##############$
|
||||
.H############$=.
|
||||
,/: ,M##########M;.
|
||||
-+@###; =##########M;
|
||||
=%M#######; :#########M/
|
||||
-$M###########; :########/
|
||||
,;X###########; =#######$.
|
||||
;H#########+######M=
|
||||
,+#############+
|
||||
/M########@-
|
||||
;M#####%
|
||||
+####:
|
||||
,$M-`;
|
||||
|
||||
var bang = ` .+
|
||||
/M;
|
||||
H#@: ;,
|
||||
-###H- -@/
|
||||
%####$. -; .%#X
|
||||
M#####+;#H :M#M.
|
||||
.. .+/;%#############-
|
||||
-/%H%+;-, +##############/
|
||||
.:$M###MH$%+############X ,--=;-
|
||||
-/H#####################H+=.
|
||||
.+#################X.
|
||||
=%M####################H;.
|
||||
/@###############+;;/%%;,
|
||||
-%###################$
|
||||
;H######################M=
|
||||
,%#####MH$%;+#####M###-/@####%
|
||||
:$H%+;=- -####X.,H# -+M##@-
|
||||
. ,###; ; =$##+
|
||||
.#H, :XH,
|
||||
+ .;-`;
|
||||
|
||||
var mesa = ` .-;+$XHHHHHHX$+;-.
|
||||
,;X@@X%/;=----=:/%X@@X/,
|
||||
=$@@%=. .=+H@X:
|
||||
-XMX: =XMX=
|
||||
/@@: =H@+
|
||||
%@X, .$@$
|
||||
+@X. $@%
|
||||
-@@, .@@=
|
||||
%@% +@$
|
||||
H@: :@H
|
||||
H@: :HHHHHHHHHHHHHHHHHHX, =@H
|
||||
%@% ;@M@@@@@@@@@@@@@@@@@H- +@$
|
||||
=@@, :@@@@@@@@@@@@@@@@@@@@@= .@@:
|
||||
+@X :@@@@@@@@@@@@@@@M@@@@@@:%@%
|
||||
$@$, ;@@@@@@@@@@@@@@@@@M@@@@@@$.
|
||||
+@@HHHHHHH@@@@@@@@@@@@@@@@@@@@@@@+
|
||||
=X@@@@@@@@@@@@@@@@@@@@@@@@@@@@X=
|
||||
:$@@@@@@@@@@@@@@@@@@@M@@@@$:
|
||||
,;$@@@@@@@@@@@@@@@@@@X/-
|
||||
.-;+$XXHHHHHX$+;-.`;
|
||||
|
||||
var cube = ` #+ @ # # M#@
|
||||
. .X X.%##@;# # +@#######X. @H%
|
||||
,==. ,######M+ -#####%M####M- #
|
||||
:H##M%:=##+ .M##M,;#####/+#######% ,M#
|
||||
.M########= =@#@.=#####M=M#######= X#
|
||||
:@@MMM##M. -##M.,#######M#######. = M
|
||||
@##..###:. .H####. @@ X,
|
||||
############: ###,/####; /##= @#. M
|
||||
,M## ;##,@#M;/M#M @# X#% X#
|
||||
.%= ######M## ##.M#: ./#M ,M #M ,#$
|
||||
##/ $## #+;#: #### ;#/ M M- @# :
|
||||
#+ #M@MM###M-;M #:$#-##$H# .#X @ + $#. #
|
||||
######/.: #%=# M#:MM./#.-# @#: H#
|
||||
+,.= @###: /@ %#,@ ##@X #,-#@.##% .@#
|
||||
#####+;/##/ @## @#,+ /#M . X,
|
||||
;###M#@ M###H .#M- ,##M ;@@; ###
|
||||
.M#M##H ;####X ,@#######M/ -M###$ -H
|
||||
.M###% X####H .@@MM@; ;@#M@
|
||||
H#M /@####/ ,++. / ==-,
|
||||
,=/:, .+X@MMH@#H #####$=`;
|
||||
|
||||
var cake = ` ,:/+/-
|
||||
/M/ .,-=;//;-
|
||||
.:/= ;MH/, ,=/+%$XH@MM#@:
|
||||
-$##@+$###@H@MMM#######H:. -/H#
|
||||
.,H@H@ X######@ -H#####@+- -+H###@X
|
||||
.,@##H; +XM##M/, =%@###@X;-
|
||||
X%- :M##########$. .:%M###@%:
|
||||
M##H, +H@@@$/-. ,;$M###@%, -
|
||||
M####M=,,---,.-%%H####M$: ,+@##
|
||||
@##################@/. :%H##@$-
|
||||
M###############H, ;HM##M$=
|
||||
#################. .=$M##M$=
|
||||
################H..;XM##M$= .:+
|
||||
M###################@%= =+@MH%
|
||||
@#################M/. =+H#X%=
|
||||
=+M###############M, ,/X#H+:,
|
||||
.;XM###########H= ,/X#H+:;
|
||||
.=+HM#######M+/+HM@+=.
|
||||
,:/%XM####H/.
|
||||
,.:=-.`;
|
||||
|
||||
//appa
|
||||
//atom
|
||||
//nuke
|
||||
var options = [cake, heart, fire, tick, bang, mesa, cube];
|
||||
|
||||
let active = cake
|
||||
|
||||
function updateView() {
|
||||
active = options[Math.floor((Math.random() * options.length))];
|
||||
setTimeout(updateView, 5000);
|
||||
}
|
||||
|
||||
onMount(() => updateView());
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
all: unset;
|
||||
font-family: monospace;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
|
||||
div {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
h1, p {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.8em;
|
||||
font-weight: 700;
|
||||
margin: 0 0 0.5em 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1em auto;
|
||||
}
|
||||
|
||||
pre {
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
position: center;
|
||||
text-align: left;
|
||||
font-family: monospace;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
h1 {
|
||||
font-size: 4em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:head>
|
||||
<title>{status}</title>
|
||||
</svelte:head>
|
||||
|
||||
<h1>{status}</h1>
|
||||
|
||||
<p>{error.message}</p>
|
||||
|
||||
{#if dev && error.stack}
|
||||
<pre>{error.stack}</pre>
|
||||
{:else}
|
||||
<audio controls autoplay>
|
||||
<source src="http://quartznet.info/alive.ogg" type="audio/wav">
|
||||
</audio>
|
||||
<div style="text-align: center; width: 100%; display: inline-block">
|
||||
<br>
|
||||
<div style="">
|
||||
<pre>
|
||||
<br>{active}</pre>
|
||||
</div>
|
||||
<br>
|
||||
This was a triumph!
|
||||
I'm making a note here:
|
||||
Huge success!
|
||||
|
||||
It's hard to overstate
|
||||
my satisfaction.
|
||||
|
||||
Aperture Science:
|
||||
We do what we must
|
||||
because we can
|
||||
For the good of all of us.
|
||||
Except the ones who are dead.
|
||||
|
||||
But there's no sense crying
|
||||
over every mistake.
|
||||
You just keep on trying
|
||||
'til you run out of cake.
|
||||
And the science gets done.
|
||||
And you make a neat gun
|
||||
for the people who are
|
||||
still alive.
|
||||
|
||||
I'm not even angry...
|
||||
I'm being so sincere right now.
|
||||
Even though you broke my heart,
|
||||
and killed me.
|
||||
|
||||
And tore me to pieces.
|
||||
And threw every piece into a fire.
|
||||
As they burned it hurt because
|
||||
I was so happy for you!
|
||||
|
||||
Now, these points of data
|
||||
make a beautiful line.
|
||||
And we're out of beta.
|
||||
We're releasing on time!
|
||||
So I'm GLaD I got burned!
|
||||
Think of all the things we learned!
|
||||
for the people who are
|
||||
still alive.
|
||||
|
||||
Go ahead and leave me...
|
||||
I think I'd prefer to stay inside...
|
||||
Maybe you'll find someone else
|
||||
to help you.
|
||||
Maybe Black Mesa?
|
||||
That was a joke. Ha Ha. Fat Chance!
|
||||
|
||||
Anyway this cake is great!
|
||||
It's so delicious and moist!
|
||||
|
||||
Look at me: still talking
|
||||
when there's science to do!
|
||||
When I look out there,
|
||||
it makes me glad I'm not you.
|
||||
|
||||
I've experiments to run.
|
||||
There is research to be done.
|
||||
On the people who are
|
||||
still alive.
|
||||
And believe me I am
|
||||
still alive.
|
||||
I'm doing science and I'm
|
||||
still alive.
|
||||
I feel fantastic and I'm
|
||||
still alive.
|
||||
While you're dying I'll be
|
||||
still alive.
|
||||
And when you're dead I will be
|
||||
still alive
|
||||
|
||||
Still alive.
|
||||
|
||||
Still alive.
|
||||
</div>
|
||||
{/if}
|
||||
74
src/routes/_layout.svelte
Normal file
74
src/routes/_layout.svelte
Normal file
@ -0,0 +1,74 @@
|
||||
<script>
|
||||
import Nav from '../components/Nav.svelte';
|
||||
import userManager from '../components/userManager.svelte'
|
||||
|
||||
export let segment;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
main {
|
||||
position: relative;
|
||||
max-width: 56em;
|
||||
background-color: white;
|
||||
padding: 2em;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
/* Default theme */
|
||||
:global(:root) {
|
||||
--background-color: #222222;
|
||||
--headings-color: #ffffff;
|
||||
--font-color: #ffffff;
|
||||
--blue: #007bff;
|
||||
--indigo: #6610f2;
|
||||
--purple: #6f42c1;
|
||||
--pink: #e83e8c;
|
||||
--red: #dc3545;
|
||||
--orange: #fd7e14;
|
||||
--yellow: #ffc107;
|
||||
--green: #28a745;
|
||||
--teal: #20c997;
|
||||
--cyan: #17a2b8;
|
||||
--white: #fff;
|
||||
--gray: #6c757d;
|
||||
--gray-dark: #343a40;
|
||||
--primary: #007bff;
|
||||
--secondary: #6c757d;
|
||||
--success: #28a745;
|
||||
--info: #17a2b8;
|
||||
--warning: #ffc107;
|
||||
--danger: #dc3545;
|
||||
--light: #f8f9fa;
|
||||
--dark: #343a40;
|
||||
--breakpoint-xs: 0;
|
||||
--breakpoint-sm: 576px;
|
||||
--breakpoint-md: 768px;
|
||||
--breakpoint-lg: 992px;
|
||||
--breakpoint-xl: 1200px;
|
||||
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
}
|
||||
|
||||
/* Dark theme */
|
||||
:global(html[data-theme='dark']) {
|
||||
--background-color: #222222;
|
||||
--headings-color: #ffffff;
|
||||
--font-color: #ffffff;
|
||||
}
|
||||
|
||||
:global(body) {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.8;
|
||||
background-color: var(--background-color);
|
||||
color: var(--font-color);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
|
||||
<Nav {segment} rightComponent={userManager}/>
|
||||
|
||||
<slot></slot>
|
||||
27
src/routes/about.svelte
Normal file
27
src/routes/about.svelte
Normal file
@ -0,0 +1,27 @@
|
||||
<script>
|
||||
import Banner from '../components/banner.svelte'
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Quartznet - About</title>
|
||||
</svelte:head>
|
||||
|
||||
<Banner title="Quartznet - About"/>
|
||||
|
||||
<main>
|
||||
<section class="container">
|
||||
<h2>Frequently Asked Questions</h2>
|
||||
<h3>Who we are</h3>
|
||||
<p>A small team developing games and software.</p>
|
||||
|
||||
<h3>Why the name Quartznet</h3>
|
||||
<p>Naming things is hard. We ended up with the name quartz and added net to it to make quartznet. Also it
|
||||
includes the letters q and z so it is cleary a great name!
|
||||
|
||||
<h2>Contact</h2>
|
||||
<p>We can be reached at contact@quartznet.com. If you are requesting a key for reviewing, steaming, or youtube,
|
||||
as well as all other legitimate purposes, please be sure to include a link to your channel or website.</p>
|
||||
|
||||
<p>Feel free to contact us via email if you want to get in touch.</p>
|
||||
</section>
|
||||
</main>
|
||||
7
src/routes/admin/index.svelte
Normal file
7
src/routes/admin/index.svelte
Normal file
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
|
||||
</script>
|
||||
|
||||
<main>
|
||||
this is not done
|
||||
</main>
|
||||
28
src/routes/blog/[slug].json.js
Normal file
28
src/routes/blog/[slug].json.js
Normal file
@ -0,0 +1,28 @@
|
||||
import posts from './_posts.js';
|
||||
|
||||
const lookup = new Map();
|
||||
posts.forEach(post => {
|
||||
lookup.set(post.slug, JSON.stringify(post));
|
||||
});
|
||||
|
||||
export function get(req, res, next) {
|
||||
// the `slug` parameter is available because
|
||||
// this file is called [slug].json.js
|
||||
const {slug} = req.params;
|
||||
|
||||
if (lookup.has(slug)) {
|
||||
res.writeHead(200, {
|
||||
'Content-Type': 'application/json'
|
||||
});
|
||||
|
||||
res.end(lookup.get(slug));
|
||||
} else {
|
||||
res.writeHead(404, {
|
||||
'Content-Type': 'application/json'
|
||||
});
|
||||
|
||||
res.end(JSON.stringify({
|
||||
message: `Not found`
|
||||
}));
|
||||
}
|
||||
}
|
||||
64
src/routes/blog/[slug].svelte
Normal file
64
src/routes/blog/[slug].svelte
Normal file
@ -0,0 +1,64 @@
|
||||
<script context="module">
|
||||
export async function preload({params, query}) {
|
||||
// the `slug` parameter is available because
|
||||
// this file is called [slug].svelte
|
||||
const res = await this.fetch(`blog/${params.slug}.json`);
|
||||
const data = await res.json();
|
||||
|
||||
if (res.status === 200) {
|
||||
return {post: data};
|
||||
} else {
|
||||
this.error(res.status, data.message);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export let post;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/*
|
||||
By default, CSS is locally scoped to the component,
|
||||
and any unused styles are dead-code-eliminated.
|
||||
In this page, Svelte can't know which elements are
|
||||
going to appear inside the {{{post.html}}} block,
|
||||
so we have to use the :global(...) modifier to target
|
||||
all elements inside .content
|
||||
*/
|
||||
.content :global(h2) {
|
||||
font-size: 1.4em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.content :global(pre) {
|
||||
background-color: #f9f9f9;
|
||||
box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.05);
|
||||
padding: 0.5em;
|
||||
border-radius: 2px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.content :global(pre) :global(code) {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.content :global(ul) {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.content :global(li) {
|
||||
margin: 0 0 0.5em 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:head>
|
||||
<title>{post.title}</title>
|
||||
</svelte:head>
|
||||
|
||||
<h1>{post.title}</h1>
|
||||
|
||||
<div class='content'>
|
||||
{@html post.html}
|
||||
</div>
|
||||
92
src/routes/blog/_posts.js
Normal file
92
src/routes/blog/_posts.js
Normal file
@ -0,0 +1,92 @@
|
||||
// Ordinarily, you'd generate this data from markdown files in your
|
||||
// repo, or fetch them from a database of some kind. But in order to
|
||||
// avoid unnecessary dependencies in the starter template, and in the
|
||||
// service of obviousness, we're just going to leave it here.
|
||||
|
||||
// This file is called `_posts.js` rather than `posts.js`, because
|
||||
// we don't want to create an `/blog/posts` route — the leading
|
||||
// underscore tells Sapper not to do that.
|
||||
|
||||
const posts = [
|
||||
{
|
||||
title: 'What is Sapper?',
|
||||
slug: 'what-is-sapper',
|
||||
html: `
|
||||
<p>First, you have to know what <a href='https://svelte.dev'>Svelte</a> is. Svelte is a UI framework with a bold new idea: rather than providing a library that you write code with (like React or Vue, for example), it's a compiler that turns your components into highly optimized vanilla JavaScript. If you haven't already read the <a href='https://svelte.dev/blog/frameworks-without-the-framework'>introductory blog post</a>, you should!</p>
|
||||
|
||||
<p>Sapper is a Next.js-style framework (<a href='blog/how-is-sapper-different-from-next'>more on that here</a>) built around Svelte. It makes it embarrassingly easy to create extremely high performance web apps. Out of the box, you get:</p>
|
||||
|
||||
<ul>
|
||||
<li>Code-splitting, dynamic imports and hot module replacement, powered by webpack</li>
|
||||
<li>Server-side rendering (SSR) with client-side hydration</li>
|
||||
<li>Service worker for offline support, and all the PWA bells and whistles</li>
|
||||
<li>The nicest development experience you've ever had, or your money back</li>
|
||||
</ul>
|
||||
|
||||
<p>It's implemented as Express middleware. Everything is set up and waiting for you to get started, but you keep complete control over the server, service worker, webpack config and everything else, so it's as flexible as you need it to be.</p>
|
||||
`
|
||||
},
|
||||
|
||||
{
|
||||
title: 'How to use Sapper',
|
||||
slug: 'how-to-use-sapper',
|
||||
html: `
|
||||
<h2>Step one</h2>
|
||||
<p>Create a new project, using <a href='https://github.com/Rich-Harris/degit'>degit</a>:</p>
|
||||
|
||||
<pre><code>npx degit "sveltejs/sapper-template#rollup" my-app
|
||||
cd my-app
|
||||
npm install # or yarn!
|
||||
npm run dev
|
||||
</code></pre>
|
||||
|
||||
<h2>Step two</h2>
|
||||
<p>Go to <a href='http://localhost:3000'>localhost:3000</a>. Open <code>my-app</code> in your editor. Edit the files in the <code>src/routes</code> directory or add new ones.</p>
|
||||
|
||||
<h2>Step three</h2>
|
||||
<p>...</p>
|
||||
|
||||
<h2>Step four</h2>
|
||||
<p>Resist overdone joke formats.</p>
|
||||
`
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Why the name?',
|
||||
slug: 'why-the-name',
|
||||
html: `
|
||||
<p>In war, the soldiers who build bridges, repair roads, clear minefields and conduct demolitions — all under combat conditions — are known as <em>sappers</em>.</p>
|
||||
|
||||
<p>For web developers, the stakes are generally lower than those for combat engineers. But we face our own hostile environment: underpowered devices, poor network connections, and the complexity inherent in front-end engineering. Sapper, which is short for <strong>S</strong>velte <strong>app</strong> mak<strong>er</strong>, is your courageous and dutiful ally.</p>
|
||||
`
|
||||
},
|
||||
|
||||
{
|
||||
title: 'How is Sapper different from Next.js?',
|
||||
slug: 'how-is-sapper-different-from-next',
|
||||
html: `
|
||||
<p><a href='https://github.com/zeit/next.js'>Next.js</a> is a React framework from <a href='https://vercel.com/'>Vercel</a>, and is the inspiration for Sapper. There are a few notable differences, however:</p>
|
||||
|
||||
<ul>
|
||||
<li>It's powered by <a href='https://svelte.dev'>Svelte</a> instead of React, so it's faster and your apps are smaller</li>
|
||||
<li>Instead of route masking, we encode route parameters in filenames. For example, the page you're looking at right now is <code>src/routes/blog/[slug].svelte</code></li>
|
||||
<li>As well as pages (Svelte components, which render on server or client), you can create <em>server routes</em> in your <code>routes</code> directory. These are just <code>.js</code> files that export functions corresponding to HTTP methods, and receive Express <code>request</code> and <code>response</code> objects as arguments. This makes it very easy to, for example, add a JSON API such as the one <a href='blog/how-is-sapper-different-from-next.json'>powering this very page</a></li>
|
||||
<li>Links are just <code><a></code> elements, rather than framework-specific <code><Link></code> components. That means, for example, that <a href='blog/how-can-i-get-involved'>this link right here</a>, despite being inside a blob of HTML, works with the router as you'd expect.</li>
|
||||
</ul>
|
||||
`
|
||||
},
|
||||
|
||||
{
|
||||
title: 'How can I get involved?',
|
||||
slug: 'how-can-i-get-involved',
|
||||
html: `
|
||||
<p>We're so glad you asked! Come on over to the <a href='https://github.com/sveltejs/svelte'>Svelte</a> and <a href='https://github.com/sveltejs/sapper'>Sapper</a> repos, and join us in the <a href='https://svelte.dev/chat'>Discord chatroom</a>. Everyone is welcome, especially you!</p>
|
||||
`
|
||||
}
|
||||
];
|
||||
|
||||
posts.forEach(post => {
|
||||
post.html = post.html.replace(/^\t{3}/gm, '');
|
||||
});
|
||||
|
||||
export default posts;
|
||||
16
src/routes/blog/index.json.js
Normal file
16
src/routes/blog/index.json.js
Normal file
@ -0,0 +1,16 @@
|
||||
import posts from './_posts.js';
|
||||
|
||||
const contents = JSON.stringify(posts.map(post => {
|
||||
return {
|
||||
title: post.title,
|
||||
slug: post.slug
|
||||
};
|
||||
}));
|
||||
|
||||
export function get(req, res) {
|
||||
res.writeHead(200, {
|
||||
'Content-Type': 'application/json'
|
||||
});
|
||||
|
||||
res.end(contents);
|
||||
}
|
||||
34
src/routes/blog/index.svelte
Normal file
34
src/routes/blog/index.svelte
Normal file
@ -0,0 +1,34 @@
|
||||
<script context="module">
|
||||
export function preload({params, query}) {
|
||||
return this.fetch(`blog.json`).then(r => r.json()).then(posts => {
|
||||
return {posts};
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export let posts;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
ul {
|
||||
margin: 0 0 1em 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:head>
|
||||
<title>Blog</title>
|
||||
</svelte:head>
|
||||
|
||||
<h1>Recent posts</h1>
|
||||
|
||||
<ul>
|
||||
{#each posts as post}
|
||||
<!-- we're using the non-standard `rel=prefetch` attribute to
|
||||
tell Sapper to load the data for the page as soon as
|
||||
the user hovers over the link or taps it, instead of
|
||||
waiting for the 'click' event -->
|
||||
<li><a rel='prefetch' href='blog/{post.slug}'>{post.title}</a></li>
|
||||
{/each}
|
||||
</ul>
|
||||
110
src/routes/index.svelte
Normal file
110
src/routes/index.svelte
Normal file
@ -0,0 +1,110 @@
|
||||
<script>
|
||||
import {onMount} from 'svelte';
|
||||
import Thumb from '../components/gameProjectThumb.svelte'
|
||||
import Banner from '../components/banner.svelte'
|
||||
|
||||
export let name;
|
||||
|
||||
let games = [{
|
||||
name: "Sirius",
|
||||
thumb: "https://placehold.it/600x300",
|
||||
description: "A 2D sci-fi game about wannabe space captain trying to find their path.",
|
||||
imgClass: "img-fluid mb-3 mb-md-0"
|
||||
}, {name: "Quartz", thumb: "https://placehold.it/600x300", description: ""}]
|
||||
|
||||
onMount(async () => {
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Quartznet</title>
|
||||
</svelte:head>
|
||||
|
||||
|
||||
<Banner/>
|
||||
|
||||
<main class="container">
|
||||
<section>
|
||||
{#each games as game}
|
||||
<!-- Project One -->
|
||||
|
||||
<Thumb {...game}/>
|
||||
{/each}
|
||||
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
||||
<style>
|
||||
section {
|
||||
display: block;
|
||||
border-radius: 5px;
|
||||
padding: 5px 20px;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.8;
|
||||
font-weight: 400;
|
||||
text-align: left;
|
||||
border-radius: 5px;
|
||||
padding: 5px 20px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-display: swap;
|
||||
font-size: 1rem;
|
||||
line-height: 1.8;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
main {
|
||||
width: 100%;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
margin-top: 30px;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.description p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
box-sizing: border-box;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
||||
h5 {
|
||||
color: var(--headings-color);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 720px
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.container {
|
||||
max-width: 960px
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
max-width: 1140px
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
main {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user