From b7bd7b71cf8ba70757c01de5e75770c04a2fb6a7 Mon Sep 17 00:00:00 2001 From: Antony Jones Date: Mon, 11 May 2020 21:33:29 +0100 Subject: [PATCH] add FAQs page --- .../faq/are-there-any-video-courses.md | 10 +++ site/content/faq/does-svelte-scale.md | 5 ++ .../faq/how-can-i-get-syntax-highlighting.md | 5 ++ .../faq/how-can-i-update-my-v2-components.md | 5 ++ site/content/faq/how-do-i-test-svelte-apps.md | 6 ++ site/content/faq/im-new-to-svelte.md | 7 ++ site/content/faq/is-svelte-dev-down.md | 5 ++ .../faq/is-svelte-v2-still-availabile.md | 7 ++ .../faq/is-there-a-component-library.md | 5 ++ site/content/faq/is-there-a-router.md | 13 ++++ .../faq/what-about-typescript-support.md | 5 ++ site/src/routes/faq.js | 4 -- site/src/routes/faq/_faqs.js | 53 ++++++++++++++ site/src/routes/faq/index.json.js | 23 ++++++ site/src/routes/faq/index.svelte | 72 +++++++++++++++++++ site/src/routes/faq/rss.xml.js | 42 +++++++++++ 16 files changed, 263 insertions(+), 4 deletions(-) create mode 100644 site/content/faq/are-there-any-video-courses.md create mode 100644 site/content/faq/does-svelte-scale.md create mode 100644 site/content/faq/how-can-i-get-syntax-highlighting.md create mode 100644 site/content/faq/how-can-i-update-my-v2-components.md create mode 100644 site/content/faq/how-do-i-test-svelte-apps.md create mode 100644 site/content/faq/im-new-to-svelte.md create mode 100644 site/content/faq/is-svelte-dev-down.md create mode 100644 site/content/faq/is-svelte-v2-still-availabile.md create mode 100644 site/content/faq/is-there-a-component-library.md create mode 100644 site/content/faq/is-there-a-router.md create mode 100644 site/content/faq/what-about-typescript-support.md delete mode 100644 site/src/routes/faq.js create mode 100644 site/src/routes/faq/_faqs.js create mode 100644 site/src/routes/faq/index.json.js create mode 100644 site/src/routes/faq/index.svelte create mode 100644 site/src/routes/faq/rss.xml.js diff --git a/site/content/faq/are-there-any-video-courses.md b/site/content/faq/are-there-any-video-courses.md new file mode 100644 index 0000000000..0c2c1f680e --- /dev/null +++ b/site/content/faq/are-there-any-video-courses.md @@ -0,0 +1,10 @@ +--- +question: Are there any video courses? +--- + +There are no official ones, but here are a couple of third-part ones that we know of. + +- [Egghead](https://egghead.io/playlists/getting-started-with-svelte-3-05a8541a) +- [Udemy](https://www.udemy.com/sveltejs-the-complete-guide/) + +Note that Udemy very frequently has discounts over 90%. diff --git a/site/content/faq/does-svelte-scale.md b/site/content/faq/does-svelte-scale.md new file mode 100644 index 0000000000..06c9b58a97 --- /dev/null +++ b/site/content/faq/does-svelte-scale.md @@ -0,0 +1,5 @@ +--- +question: Does Svelte scale? +--- + +There will be a blog post about this eventually, but in the meantime, check out [this issue](https://github.com/sveltejs/svelte/issues/2546). diff --git a/site/content/faq/how-can-i-get-syntax-highlighting.md b/site/content/faq/how-can-i-get-syntax-highlighting.md new file mode 100644 index 0000000000..90f10b254f --- /dev/null +++ b/site/content/faq/how-can-i-get-syntax-highlighting.md @@ -0,0 +1,5 @@ +--- +question: How can I get VSCode to syntax-highlight my .svelte files? +--- + +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. \ No newline at end of file diff --git a/site/content/faq/how-can-i-update-my-v2-components.md b/site/content/faq/how-can-i-update-my-v2-components.md new file mode 100644 index 0000000000..0800dff89b --- /dev/null +++ b/site/content/faq/how-can-i-update-my-v2-components.md @@ -0,0 +1,5 @@ +--- +question: How can I update my components written in Svelte v2? +--- + +svelte-upgrade isn't fully working for v2->v3 yet, [but it's close](https://github.com/sveltejs/svelte-upgrade/pull/12). \ No newline at end of file diff --git a/site/content/faq/how-do-i-test-svelte-apps.md b/site/content/faq/how-do-i-test-svelte-apps.md new file mode 100644 index 0000000000..af67bebf3f --- /dev/null +++ b/site/content/faq/how-do-i-test-svelte-apps.md @@ -0,0 +1,6 @@ +--- +question: How do I test Svelte apps? +--- + +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. +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. diff --git a/site/content/faq/im-new-to-svelte.md b/site/content/faq/im-new-to-svelte.md new file mode 100644 index 0000000000..18e4b6742f --- /dev/null +++ b/site/content/faq/im-new-to-svelte.md @@ -0,0 +1,7 @@ +--- +question: I'm new to Svelte. Where should I start? +--- + +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. + +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. \ No newline at end of file diff --git a/site/content/faq/is-svelte-dev-down.md b/site/content/faq/is-svelte-dev-down.md new file mode 100644 index 0000000000..a7ce9984b7 --- /dev/null +++ b/site/content/faq/is-svelte-dev-down.md @@ -0,0 +1,5 @@ +--- +question: Is svelte.dev down? +--- + +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). \ No newline at end of file diff --git a/site/content/faq/is-svelte-v2-still-availabile.md b/site/content/faq/is-svelte-v2-still-availabile.md new file mode 100644 index 0000000000..0fbc4c039c --- /dev/null +++ b/site/content/faq/is-svelte-v2-still-availabile.md @@ -0,0 +1,7 @@ +--- +question: Is Svelte v2 still available? +--- + +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. + +The documentation is still available [here](https://v2.svelte.dev/guide). \ No newline at end of file diff --git a/site/content/faq/is-there-a-component-library.md b/site/content/faq/is-there-a-component-library.md new file mode 100644 index 0000000000..fd771eabda --- /dev/null +++ b/site/content/faq/is-there-a-component-library.md @@ -0,0 +1,5 @@ +--- +question: Is there a UI component library? +--- + +There are several UI component libraries. Find them under the [code section](https://svelte-community.netlify.com/code) of the Svelte Community website. diff --git a/site/content/faq/is-there-a-router.md b/site/content/faq/is-there-a-router.md new file mode 100644 index 0000000000..a78c478943 --- /dev/null +++ b/site/content/faq/is-there-a-router.md @@ -0,0 +1,13 @@ +--- +question: Is there a router? +--- + +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. + +If you prefer a declarative HTML approach, there's [svelte-routing](https://github.com/EmilTholin/svelte-routing). + +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. + +For filesystem-based routing, you can take a look at [Routify](https://routify.dev). + +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. \ No newline at end of file diff --git a/site/content/faq/what-about-typescript-support.md b/site/content/faq/what-about-typescript-support.md new file mode 100644 index 0000000000..39d1990575 --- /dev/null +++ b/site/content/faq/what-about-typescript-support.md @@ -0,0 +1,5 @@ +--- +question: What about Typescript support? +--- + +We have no TS support **yet** but it's very much planned - v3 was partly about laying the foundation for it. You can track progress in [#1639](https://github.com/sveltejs/svelte/issues/1639). \ No newline at end of file diff --git a/site/src/routes/faq.js b/site/src/routes/faq.js deleted file mode 100644 index 6263494a4c..0000000000 --- a/site/src/routes/faq.js +++ /dev/null @@ -1,4 +0,0 @@ -export function get(req, res) { - res.writeHead(302, { Location: 'https://github.com/sveltejs/svelte/wiki/FAQ' }); - res.end(); -} \ No newline at end of file diff --git a/site/src/routes/faq/_faqs.js b/site/src/routes/faq/_faqs.js new file mode 100644 index 0000000000..b45f9a88b3 --- /dev/null +++ b/site/src/routes/faq/_faqs.js @@ -0,0 +1,53 @@ +import fs from 'fs'; +import path from 'path'; +import { extract_frontmatter, link_renderer } from '@sveltejs/site-kit/utils/markdown.js'; +import marked from 'marked'; +import { makeSlugProcessor } from '../../utils/slug'; +import { highlight } from '../../utils/highlight'; +import { SLUG_PRESERVE_UNICODE } from '../../../config'; + +const makeSlug = makeSlugProcessor(SLUG_PRESERVE_UNICODE); + +export default function get_posts() { + return fs + .readdirSync('content/faq') + .map(file => { + if (path.extname(file) !== '.md') return; + + const match = /^(.+)\.md$/.exec(file); + if (!match) throw new Error(`Invalid filename '${file}'`); + + const [, slug] = match; + + const markdown = fs.readFileSync(`content/faq/${file}`, 'utf-8'); + + const { content, metadata } = extract_frontmatter(markdown); + + const renderer = new marked.Renderer(); + + renderer.link = link_renderer; + + renderer.code = highlight; + + renderer.heading = (text, level, rawtext) => { + const fragment = makeSlug(rawtext); + + return ` + + + ${text} + `; + }; + + const answer = marked( + content.replace(/^\t+/gm, match => match.split('\t').join(' ')), + { renderer } + ); + + return { + slug, + answer, + metadata + }; + }); +} diff --git a/site/src/routes/faq/index.json.js b/site/src/routes/faq/index.json.js new file mode 100644 index 0000000000..ec872b45b7 --- /dev/null +++ b/site/src/routes/faq/index.json.js @@ -0,0 +1,23 @@ +import send from '@polka/send'; +import get_faqs from './_faqs.js'; + +let json; + +export function get(req, res) { + if (!json || process.env.NODE_ENV !== 'production') { + const faqs = get_faqs() + .map(faq => { + return { + answer: faq.answer, + metadata: faq.metadata + }; + }); + + json = JSON.stringify(faqs); + } + + send(res, 200, json, { + 'Content-Type': 'application/json', + 'Cache-Control': `max-age=${5 * 60 * 1e3}` // 5 minutes + }); +} diff --git a/site/src/routes/faq/index.svelte b/site/src/routes/faq/index.svelte new file mode 100644 index 0000000000..747009dd3a --- /dev/null +++ b/site/src/routes/faq/index.svelte @@ -0,0 +1,72 @@ + + + + + + Frequently Asked Questions • Svelte + + + + + + +
+

Frequently Asked Questions

+ {#each faqs as faq} +
+

{faq.metadata.question}

+

{@html faq.answer}

+
+ {/each} +
+ + diff --git a/site/src/routes/faq/rss.xml.js b/site/src/routes/faq/rss.xml.js new file mode 100644 index 0000000000..974806ad44 --- /dev/null +++ b/site/src/routes/faq/rss.xml.js @@ -0,0 +1,42 @@ +import send from '@polka/send'; +import get_posts from '../blog/_posts.js'; + +const months = ',Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec'.split(','); + +function formatPubdate(str) { + const [y, m, d] = str.split('-'); + return `${d} ${months[+m]} ${y} 12:00 +0000`; +} + +const rss = ` + + + + + Svelte blog + https://svelte.dev/blog + News and information about the magical disappearing UI framework + + https://svelte.dev/favicon.png + Svelte + https://svelte.dev/blog + + ${get_posts().filter(post => !post.metadata.draft).map(post => ` + + ${post.metadata.title} + https://svelte.dev/blog/${post.slug} + ${post.metadata.description} + ${formatPubdate(post.metadata.pubdate)} + + `).join('')} + + + +`.replace(/>[^\S]+/gm, '>').replace(/[^\S]+