Skip to content

Commit 9be3310

Browse files
authoredMay 13, 2020
site: add FAQs page (sveltejs#4823)
1 parent ee13079 commit 9be3310

19 files changed

+272
-525
lines changed
 
+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
question: I'm new to Svelte. Where should I start?
3+
---
4+
5+
We think the best way to get started is playing through the interactive [Tutorial](https://svelte.dev/tutorial). Each step there is mainly focused on one specific aspect and is easy to follow. You'll be editing and running real Svelte components right in your browser.
6+
7+
Five to ten minutes should be enough to get you up and running. An hour and a half should get you through the entire tutorial.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
question: How can I update my components written in Svelte v2?
3+
---
4+
5+
svelte-upgrade isn't fully working for v2->v3 yet, [but it's close](https://github.com/sveltejs/svelte-upgrade/pull/12).
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
question: Is Svelte v2 still available?
3+
---
4+
5+
New features aren't being added to it, and bugs will probably only be fixed if they are extremely nasty or present some sort of security vulnerability.
6+
7+
The documentation is still available [here](https://v2.svelte.dev/guide).
+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
question: How do I do hot module reloading?
3+
---
4+
5+
Use the community plugins for [rollup](https://github.com/rixo/rollup-plugin-svelte-hot) and [webpack](https://github.com/rixo/svelte-loader-hot).
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
question: Are there any video courses?
3+
---
4+
5+
There are no official ones, but here are a couple of third-part ones that we know of.
6+
7+
- [Egghead](https://egghead.io/playlists/getting-started-with-svelte-3-05a8541a)
8+
- [Udemy](https://www.udemy.com/sveltejs-the-complete-guide/)
9+
10+
Note that Udemy very frequently has discounts over 90%.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
question: Is svelte.dev down?
3+
---
4+
5+
Probably not, but it's possible. If you can't seem to access any `.dev` sites, check out [this SuperUser question and answer](https://superuser.com/q/1413402).
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
question: How can I get VSCode to syntax-highlight my .svelte files?
3+
---
4+
5+
There is an [official VSCode extension for Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), however it is still in the **beta** testing stage, and not all issues have been ironed out.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
question: What about Typescript support?
3+
---
4+
5+
You need to install a [community supported preprocessor](https://github.com/sveltejs/integrations#preprocessors) such as [svelte-preprocess](https://github.com/kaisermann/svelte-preprocess). Work is ongoing to improve [IDE support](https://github.com/sveltejs/language-tools/issues/83) and build [additional CLI tooling](https://github.com/sveltejs/language-tools/issues/68)
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
question: Does Svelte scale?
3+
---
4+
5+
There will be a blog post about this eventually, but in the meantime, check out [this issue](https://github.com/sveltejs/svelte/issues/2546).
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
question: Is there a UI component library?
3+
---
4+
5+
There are several UI component libraries. Find them under the [code section](https://svelte-community.netlify.com/code) of the Svelte Community website.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
question: How do I test Svelte apps?
3+
---
4+
5+
We don't have a good answer to this yet, but it is a priority. There are a few approaches that people take when testing, but it generally involves compiling the component and mounting it to something and then performing the tests.
6+
You essentially need to create a bundle for each component you're testing (since svelte is a compiler and not a normal library) and then mount them. You can mount to a JSDOM instance, or you can use Puppeteer if you need a real browser, or you can use a tool like Cypress. There is an example of this in the Sapper starter template.
+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
question: Is there a router?
3+
---
4+
5+
You can use any router lib you want. A lot of people use [page.js](https://github.com/visionmedia/page.js). There's also [navaid](https://github.com/lukeed/navaid), which is very similar.
6+
7+
If you prefer a declarative HTML approach, there's [svelte-routing](https://github.com/EmilTholin/svelte-routing).
8+
9+
If you need hash-based routing on the client side, check out [svelte-spa-router](https://github.com/ItalyPaleAle/svelte-spa-router), or [abstract-state-router](https://github.com/TehShrike/abstract-state-router/), a mature router for business software.
10+
11+
For filesystem-based routing, you can take a look at [Routify](https://routify.dev).
12+
13+
For an official solution, there's nothing that's simply a routing library. There is, however, the official [Sapper](https://sapper.svelte.dev/) framework, a Next.js-style application framework built on Svelte, which includes its own filesystem-based routing.

‎site/src/routes/blog/[slug].svelte

-30
Original file line numberDiff line numberDiff line change
@@ -133,44 +133,14 @@
133133
border: 0.8rem solid var(--second);
134134
}
135135
136-
/* headers anchors */
137-
138-
.post :global(.offset-anchor) {
139-
position: relative;
140-
display: block;
141-
top: calc(-1 * (var(--nav-h) + var(--top-offset) - 1rem));
142-
width: 0;
143-
height: 0;
144-
}
145-
146136
.post :global(.anchor) {
147-
position: absolute;
148-
display: block;
149-
background: url(/icons/link.svg) 0 50% no-repeat;
150-
background-size: 1em 1em;
151-
width: 1.4em;
152-
height: 1em;
153137
top: calc((var(--h3) - 24px) / 2);
154-
left: -1.4em;
155-
opacity: 0;
156-
transition: opacity 0.2s;
157-
border: none !important; /* TODO get rid of linkify */
158138
}
159139
160-
.post :global(h2):hover :global(.anchor),
161-
.post :global(h3):hover :global(.anchor),
162-
.post :global(h4):hover :global(.anchor),
163-
.post :global(h5):hover :global(.anchor),
164-
.post :global(h6):hover :global(.anchor) {
165-
opacity: 1;
166-
}
167-
168-
169140
@media (max-width: 768px) {
170141
.post :global(.anchor) {
171142
transform: scale(0.6);
172143
opacity: 1;
173-
top: calc((1em - 0.6 * 24px) / 2);
174144
left: -1.0em;
175145
}
176146
}

‎site/src/routes/faq.js

-4
This file was deleted.

‎site/src/routes/faq/_faqs.js

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import fs from 'fs';
2+
import path from 'path';
3+
import { extract_frontmatter, link_renderer } from '@sveltejs/site-kit/utils/markdown.js';
4+
import marked from 'marked';
5+
import { makeSlugProcessor } from '../../utils/slug';
6+
import { highlight } from '../../utils/highlight';
7+
import { SLUG_PRESERVE_UNICODE } from '../../../config';
8+
9+
const makeSlug = makeSlugProcessor(SLUG_PRESERVE_UNICODE);
10+
11+
export default function get_faqs() {
12+
return fs
13+
.readdirSync('content/faq')
14+
.map(file => {
15+
if (path.extname(file) !== '.md') return;
16+
17+
const match = /^([0-9]+)-(.+)\.md$/.exec(file);
18+
if (!match) throw new Error(`Invalid filename '${file}'`);
19+
20+
const [, order, slug] = match;
21+
22+
const markdown = fs.readFileSync(`content/faq/${file}`, 'utf-8');
23+
24+
const { content, metadata } = extract_frontmatter(markdown);
25+
26+
const renderer = new marked.Renderer();
27+
28+
renderer.link = link_renderer;
29+
30+
renderer.code = highlight;
31+
32+
renderer.heading = (text, level, rawtext) => {
33+
const fragment = makeSlug(rawtext);
34+
35+
return `
36+
<h${level}>
37+
<span id="${fragment}" class="offset-anchor"></span>
38+
<a href="faq#${fragment}" class="anchor" aria-hidden="true"></a>
39+
${text}
40+
</h${level}>`;
41+
};
42+
43+
const answer = marked(
44+
content.replace(/^\t+/gm, match => match.split('\t').join(' ')),
45+
{ renderer }
46+
);
47+
48+
const fragment = makeSlug(slug);
49+
50+
return {
51+
fragment,
52+
order,
53+
answer,
54+
metadata
55+
};
56+
})
57+
.sort((a, b) => a.order - b.order);
58+
}

‎site/src/routes/faq/index.json.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import send from '@polka/send';
2+
import get_faqs from './_faqs.js';
3+
4+
let json;
5+
6+
export function get(req, res) {
7+
if (!json || process.env.NODE_ENV !== 'production') {
8+
const faqs = get_faqs()
9+
.map(faq => {
10+
return {
11+
fragment: faq.fragment,
12+
answer: faq.answer,
13+
metadata: faq.metadata
14+
};
15+
});
16+
17+
json = JSON.stringify(faqs);
18+
}
19+
20+
send(res, 200, json, {
21+
'Content-Type': 'application/json',
22+
'Cache-Control': `max-age=${5 * 60 * 1e3}` // 5 minutes
23+
});
24+
}

‎site/src/routes/faq/index.svelte

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<script context="module">
2+
export async function preload() {
3+
const faqs = await this.fetch(`faq.json`).then(r => r.json());
4+
return { faqs };
5+
}
6+
</script>
7+
8+
<script>
9+
const description = "Frequently Asked Questions about Svelte"
10+
11+
export let faqs;
12+
</script>
13+
14+
<svelte:head>
15+
<title>Frequently Asked Questions • Svelte</title>
16+
17+
<meta name="twitter:title" content="Svelte FAQ">
18+
<meta name="twitter:description" content={description}>
19+
<meta name="Description" content={description}>
20+
</svelte:head>
21+
22+
<div class='faqs stretch'>
23+
<h1>Frequently Asked Questions</h1>
24+
{#each faqs as faq}
25+
26+
<article class='faq'>
27+
<h2>
28+
<span id={faq.fragment} class="offset-anchor"></span>
29+
<a class="anchor" rel='prefetch' href='faq#{faq.fragment}' title='{faq.question}'>&nbsp;</a>
30+
{faq.metadata.question}
31+
</h2>
32+
<p>{@html faq.answer}</p>
33+
</article>
34+
{/each}
35+
</div>
36+
37+
<style>
38+
.faqs {
39+
grid-template-columns: 1fr 1fr;
40+
grid-gap: 1em;
41+
min-height: calc(100vh - var(--nav-h));
42+
padding: var(--top-offset) var(--side-nav) 6rem var(--side-nav);
43+
max-width: var(--main-width);
44+
margin: 0 auto;
45+
}
46+
47+
h2 {
48+
display: inline-block;
49+
margin: 3.2rem 0 1rem 0;
50+
color: var(--text);
51+
max-width: 18em;
52+
font-size: var(--h3);
53+
font-weight: 400;
54+
}
55+
56+
.faq:first-child {
57+
margin: 0 0 2rem 0;
58+
padding: 0 0 4rem 0;
59+
border-bottom: var(--border-w) solid #6767785b; /* based on --second */
60+
}
61+
62+
.faq:first-child h2 {
63+
font-size: 4rem;
64+
font-weight: 400;
65+
color: var(--second);
66+
}
67+
68+
.faq p {
69+
font-size: var(--h5);
70+
max-width: 30em;
71+
color: var(--second);
72+
}
73+
74+
:global(.faqs .faq ul) {
75+
margin-left: 3.2rem;
76+
}
77+
78+
.faqs :global(.anchor) {
79+
top: calc((var(--h3) - 24px) / 2);
80+
}
81+
82+
@media (max-width: 768px) {
83+
.faqs :global(.anchor) {
84+
transform: scale(0.6);
85+
opacity: 1;
86+
left: -1.0em;
87+
}
88+
}
89+
</style>

‎site/src/template.html

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77

88
%sapper.base%
99

10+
<link href=global.css rel=stylesheet>
1011
<link href=prism.css rel=stylesheet>
1112
<link rel='manifest' href='manifest.json'>
1213
<link rel='icon' type='image/png' href='favicon.png'>

‎site/static/global.css

+22-491
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)
Please sign in to comment.