diff --git a/README.md b/README.md index 980c0da91..693bf3be9 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Svelte Society Website -Welcome to Svelte Society! This repository hosts the main website, which serves as a central index of events, a components directory, as well as recipes and other useful resources. +Welcome to Svelte Society! This repository hosts the main website, which serves as a central index of events, a packages directory, as well as recipes and other useful resources. ## Developing diff --git a/scripts/updateGithub.js b/scripts/updateGithub.js index 99fe305f6..97c45cd70 100644 --- a/scripts/updateGithub.js +++ b/scripts/updateGithub.js @@ -1,8 +1,7 @@ import { writeFileSync } from 'node:fs'; -import { componentsSchema, templatesSchema, toolsSchema } from '../src/lib/schemas.js'; -import components from '../src/routes/components/components.json' assert { type: 'json' }; +import { packagesSchema, templatesSchema } from '../src/lib/schemas.js'; +import packages from '../src/routes/packages/packages.json' assert { type: 'json' }; import templates from '../src/routes/templates/templates.json' assert { type: 'json' }; -import tools from '../src/routes/tools/tools.json' assert { type: 'json' }; import { chunk } from './chunk.js'; const ghGraphQlUrl = 'https://api.github.com/graphql'; @@ -35,9 +34,8 @@ async function doGraphQlQuery(url, query) { function getAllGHRepos() { const repos = [ - ...componentsSchema.parse(components).map((component) => component.repository), - ...templatesSchema.parse(templates).map((template) => template.repository), - ...toolsSchema.parse(tools).map((tool) => tool.repository) + ...packagesSchema.parse(packages).map((i) => i.repository), + ...templatesSchema.parse(templates).map((i) => i.repository) ]; return repos.filter((url) => url && githubNameRegexp.test(url)); } diff --git a/scripts/updateGitlab.js b/scripts/updateGitlab.js index e02659b08..600a713b9 100644 --- a/scripts/updateGitlab.js +++ b/scripts/updateGitlab.js @@ -1,8 +1,7 @@ import { writeFileSync } from 'node:fs'; -import { componentsSchema, templatesSchema, toolsSchema } from '../src/lib/schemas.js'; -import components from '../src/routes/components/components.json' assert { type: 'json' }; +import { packagesSchema, templatesSchema } from '../src/lib/schemas.js'; +import packages from '../src/routes/packages/packages.json' assert { type: 'json' }; import templates from '../src/routes/templates/templates.json' assert { type: 'json' }; -import tools from '../src/routes/tools/tools.json' assert { type: 'json' }; import { chunk } from './chunk.js'; const gitlabGraphQlUrl = 'https://gitlab.com/api/graphql'; @@ -32,9 +31,8 @@ async function doGraphQlQuery(url, query) { function getAllGitlabRepos() { const repos = [ - ...componentsSchema.parse(components).map((component) => component.repository), - ...templatesSchema.parse(templates).map((template) => template.repository), - ...toolsSchema.parse(tools).map((tool) => tool.repository) + ...packagesSchema.parse(packages).map((i) => i.repository), + ...templatesSchema.parse(templates).map((i) => i.repository) ]; return repos.filter((url) => url && gitlabNameRegExp.test(url)); } diff --git a/scripts/updateNpm.js b/scripts/updateNpm.js index 4fff505a6..9b661d844 100644 --- a/scripts/updateNpm.js +++ b/scripts/updateNpm.js @@ -3,13 +3,12 @@ import { writeFileSync } from 'node:fs'; import { promisify } from 'node:util'; import { exec } from 'node:child_process'; -import { componentsSchema, toolsSchema } from '../src/lib/schemas.js'; -import components from '../src/routes/components/components.json' assert { type: 'json' }; -import tools from '../src/routes/tools/tools.json' assert { type: 'json' }; +import { packagesSchema } from '../src/lib/schemas.js'; +import packages from '../src/routes/packages/packages.json' assert { type: 'json' }; const execAsync = promisify(exec); -const data = [...componentsSchema.parse(components), ...toolsSchema.parse(tools)]; +const data = packagesSchema.parse(packages); const npm = await Promise.all( data.map((pkg) => processPackage(pkg).catch((error) => console.log(error.message))) @@ -19,11 +18,8 @@ const npm = await Promise.all( writeFileSync('src/lib/data/npm.json', JSON.stringify(npm)); -/** @param {ReturnType[0]} pkg */ +/** @param {import('zod').infer[0]} pkg */ async function processPackage(pkg) { - if (!pkg.npm) { - throw new Error(`npm field missing from ${pkg.title} (skipping)`); - } const { stdout } = await execAsync(`npm view ${pkg.npm} --json`); const data = JSON.parse(stdout.toString()); const version = data.version; diff --git a/scripts/updatePublint.js b/scripts/updatePublint.js index d3d4add64..da1c89b26 100644 --- a/scripts/updatePublint.js +++ b/scripts/updatePublint.js @@ -4,17 +4,16 @@ import { writeFileSync } from 'node:fs'; import { inflate } from 'pako'; import getNpmTarballUrl from 'get-npm-tarball-url'; -import { componentsSchema, toolsSchema } from '../src/lib/schemas.js'; -import components from '../src/routes/components/components.json' assert { type: 'json' }; -import tools from '../src/routes/tools/tools.json' assert { type: 'json' }; +import { packagesSchema } from '../src/lib/schemas.js'; +import packages from '../src/routes/packages/packages.json' assert { type: 'json' }; import npm from '../src/lib/data/npm.json' assert { type: 'json' }; import { publint } from 'publint'; import { untar } from './untar.js'; import { createTarballVfs } from './tarball.js'; -const dataWithoutVersions = [...componentsSchema.parse(components), ...toolsSchema.parse(tools)]; +const dataWithoutVersions = packagesSchema.parse(packages); -/** @param input {import('zod').infer} */ +/** @param {import('zod').infer} input */ const injectVersions = (input) => { const output = []; for (const item of input) { @@ -37,7 +36,7 @@ const output = await Promise.all( writeFileSync('src/lib/data/publint.json', JSON.stringify(output)); -/** @param pkg {ReturnType[0]} */ +/** @param {ReturnType[0]} pkg */ async function processPackage(pkg) { const tarballUrl = getNpmTarballUrl(pkg.npm, pkg.version); let resultBuffer; diff --git a/scripts/validateData.js b/scripts/validateData.js index 84a3b1122..4f6e05944 100644 --- a/scripts/validateData.js +++ b/scripts/validateData.js @@ -1,15 +1,11 @@ // @ts-check -import { componentsSchema, templatesSchema, toolsSchema } from '../src/lib/schemas.js'; -import components from '../src/routes/components/components.json' assert { type: 'json' }; +import { packagesSchema, templatesSchema } from '../src/lib/schemas.js'; +import packages from '../src/routes/packages/packages.json' assert { type: 'json' }; import templates from '../src/routes/templates/templates.json' assert { type: 'json' }; -import tools from '../src/routes/tools/tools.json' assert { type: 'json' }; -componentsSchema.parse(components); -console.log('Validated components.json'); +packagesSchema.parse(packages); +console.log('Validated packages.json'); templatesSchema.parse(templates); console.log('Validated templates.json'); - -toolsSchema.parse(tools); -console.log('Validated tools.json'); diff --git a/src/lib/components/layout/Header.svelte b/src/lib/components/layout/Header.svelte index de3de32d9..40d2104b7 100644 --- a/src/lib/components/layout/Header.svelte +++ b/src/lib/components/layout/Header.svelte @@ -3,14 +3,13 @@ import { page } from '$app/stores'; const linksLeft = [ - ['/templates', 'templates'], - ['/components', 'components'], - ['/tools', 'tools'] + ['/packages', 'packages'], + ['/templates', 'templates'] ]; const linksRight = [ + ['/resources', 'resources'], ['/recipes', 'recipes'], - ['/events', 'events'], - ['/resources', 'resources'] + ['/events', 'events'] ]; diff --git a/src/lib/items.ts b/src/lib/items.ts index 54e51ea8d..72faa4885 100644 --- a/src/lib/items.ts +++ b/src/lib/items.ts @@ -1,18 +1,9 @@ -import components from '../routes/components/components.json'; -import tools from '../routes/tools/tools.json'; +import packages from '../routes/packages/packages.json'; import templates from '../routes/templates/templates.json'; import { cheatSheet } from '../routes/cheatsheet/cheat-sheet'; export type SearchItem = { - type: - | 'Component' - | 'Tool' - | 'Template' - | 'Recipe Category' - | 'Recipe' - | 'CheatSheet' - | 'Event' - | 'Link'; + type: 'Package' | 'Template' | 'Recipe Category' | 'Recipe' | 'CheatSheet' | 'Event' | 'Link'; url: string; tags: Array; title: string; @@ -264,20 +255,12 @@ const allItems: Array = [ url: 'https://www.svelteradio.com/' }, { - title: 'Tools', - tags: ['tools'], + title: 'Packages', + tags: ['Packages'], type: 'Link', - description: 'SvelteSociety Tools page', - search: 'tools', - url: '/tools' - }, - { - title: 'Components', - tags: ['components'], - type: 'Link', - description: 'SvelteSociety Components page', - search: 'components', - url: '/components' + description: 'SvelteSociety Packages page', + search: 'packages', + url: '/packages' }, { title: 'Templates', @@ -319,21 +302,13 @@ const allItems: Array = [ search: 'cheat sheet cheatsheet', url: '/cheatsheet' }, - ...(components as Array).map((item) => ({ - title: item.title, - description: item.description, - tags: item.tags, - type: 'Component', - search: searchKeywords(item.title, item.description, ...(item.tags ?? []), item.npm ?? ''), - url: '/components#component-' + item.title - })), - ...(tools as Array).map((item) => ({ + ...(packages as Array).map((item) => ({ title: item.title, description: item.description, tags: item.tags, - type: 'Tool', + type: 'Package', search: searchKeywords(item.title, item.description, ...(item.tags ?? []), item.npm ?? ''), - url: '/tools#component-' + item.title + url: '/packages#component-' + item.title })), ...(templates as Array).map((item) => ({ title: item.title, diff --git a/src/lib/schemas.js b/src/lib/schemas.js index 61eee4ee7..424e34904 100644 --- a/src/lib/schemas.js +++ b/src/lib/schemas.js @@ -1,7 +1,7 @@ import { z } from 'zod'; import { packageNameRegex } from 'package-name-regex'; -export const componentsSchema = z.array( +export const packagesSchema = z.array( z.object({ title: z.string(), npm: z.string().regex(packageNameRegex), @@ -9,22 +9,26 @@ export const componentsSchema = z.array( repository: z.string().url(), description: z.string(), category: z.enum([ - 'Display Components', - 'Developer Experience', - 'Internationalization', + 'Bundler Plugins', 'CSS and Layout', - 'Icons', - 'Multimedia', - 'Testing', 'Data Visualisation', - 'Integration', + 'Debugging', 'Design Pattern', - 'Stores', + 'Design System', + 'Developer Experience', + 'Display Components', + 'Forms & User Input', + 'Icons', + 'Integration', + 'Internationalization', + 'Linting and Formatting', + 'Multimedia', + 'Preprocessors', 'Routers', + 'Stores', 'SvelteKit Adapters', - 'Design System', - 'User Interaction', - 'Forms & User Input' + 'Testing', + 'User Interaction' ]), tags: z.array(z.string()).optional() }) @@ -40,21 +44,3 @@ export const templatesSchema = z.array( tags: z.array(z.string()).optional() }) ); - -export const toolsSchema = z.array( - z.object({ - title: z.string(), - npm: z.string().regex(packageNameRegex).optional(), - url: z.string().url().optional(), - repository: z.string().url(), - description: z.string(), - category: z.enum([ - 'Debugging', - 'Linting and Formatting', - 'Editor Extensions', - 'Bundler Plugins', - 'Preprocessors' - ]), - tags: z.array(z.string()).optional() - }) -); diff --git a/src/lib/utils/injectData.ts b/src/lib/utils/injectData.ts index 0b6512e2a..63f3fb3a2 100644 --- a/src/lib/utils/injectData.ts +++ b/src/lib/utils/injectData.ts @@ -3,9 +3,9 @@ import gitlab from '$lib/data/gitlab.json'; import npm from '$lib/data/npm.json'; import publint from '$lib/data/publint.json'; import type { z } from 'zod'; -import type { componentsSchema } from '$lib/schemas'; +import type { packagesSchema } from '$lib/schemas'; -export const injectData = (input: z.infer) => { +export const injectData = (input: z.infer) => { const output = []; for (const item of input) { // Github diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 3d936b295..70cf9c7e8 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -15,7 +15,7 @@ We are a volunteer global network of Svelte fans that strive to promote Svelte and its ecosystem. As a service to the community, this site is a central index of events, a components directory, as well as recipes + >, a packages directory, as well as recipes and other useful resources. Join us or help us out!

diff --git a/src/routes/components/+page.server.ts b/src/routes/components/+page.server.ts new file mode 100644 index 000000000..6a24cd572 --- /dev/null +++ b/src/routes/components/+page.server.ts @@ -0,0 +1,5 @@ +import { redirect } from '@sveltejs/kit'; + +export const load = async () => { + redirect(308, '/packages'); +}; diff --git a/src/routes/components/+page.svelte b/src/routes/components/+page.svelte deleted file mode 100644 index 0928bcade..000000000 --- a/src/routes/components/+page.svelte +++ /dev/null @@ -1,12 +0,0 @@ - - - diff --git a/src/routes/help/_components.svx b/src/routes/help/_components.svx index c2c6bb3f2..d0e4a3bab 100644 --- a/src/routes/help/_components.svx +++ b/src/routes/help/_components.svx @@ -19,11 +19,11 @@ tr:nth-of-type(2n) { } -# How to submit a new component? +# How to submit a new package? -To add a new component on the website, the process is rather simple. +To add a new package on the website, the process is rather simple. -You have to add your component in [components.json](https://github.com/svelte-society/sveltesociety.dev/blob/master/src/routes/components/components.json) +You have to add your package in [packages.json](https://github.com/svelte-society/sveltesociety.dev/blob/main/src/routes/packages/packages.json) ## Forking the project @@ -31,7 +31,7 @@ You can fork the [GitHub project](https://github.com/svelte-society/sveltesociet ## Edit the file -You can edit and propose your changes [directly in GitHub](https://github.com/svelte-society/sveltesociety.dev/edit/master/src/pages/components/components.json) +You can edit and propose your changes [directly in GitHub](https://github.com/svelte-society/sveltesociety.dev/edit/main/src/routes/packages/packages.json) # What information should I give ? diff --git a/src/routes/help/submitting/+page.svelte b/src/routes/help/submitting/+page.svelte index e51bfb82e..aa6f25471 100644 --- a/src/routes/help/submitting/+page.svelte +++ b/src/routes/help/submitting/+page.svelte @@ -1,31 +1,26 @@ - + -

Submitting a new component

+

Submitting a new package

- To add a new component on the website, the process is rather simple. You have to add a snippet in + To add a new package on the website, the process is rather simple. You have to add a snippet in the appropriate file.

- -

Generating file contents snippet

-

- Each component is represented by a JSON Object. Use the generator below to generate the Object. -

- +
+

Each package is represented by a JSON Object. Use the generator below to generate the Object.

+

* marked fields are required

@@ -103,7 +95,7 @@
- Name of the component + Name of the package
@@ -126,14 +118,14 @@
- A short description of the component + A short description of the package
- The npm name of the component + The npm name of the package
@@ -146,7 +138,7 @@ showIndicator bind:value={category} /> - The category of the component + The category of the package
@@ -166,7 +158,7 @@
Copy this snippet and add it to -{pathName}.json. Before +{pathName}.json. Before submitting a PR, please clone your changes locally and run:
pnpm run lint
diff --git a/src/routes/tools/+page.svelte b/src/routes/packages/+page.svelte similarity index 50% rename from src/routes/tools/+page.svelte rename to src/routes/packages/+page.svelte index adf52aa15..4662a38ee 100644 --- a/src/routes/tools/+page.svelte +++ b/src/routes/packages/+page.svelte @@ -1,12 +1,12 @@ diff --git a/src/routes/components/components.json b/src/routes/packages/packages.json similarity index 93% rename from src/routes/components/components.json rename to src/routes/packages/packages.json index 9edb435e9..d9553d4af 100644 --- a/src/routes/components/components.json +++ b/src/routes/packages/packages.json @@ -2930,5 +2930,215 @@ "npm": "@ethercorps/sveltekit-og", "category": "Integration", "tags": [] + }, + { + "title": "rollup-plugin-svelte", + "npm": "rollup-plugin-svelte", + "category": "Bundler Plugins", + "description": "Compile Svelte components with Rollup", + "repository": "https://github.com/sveltejs/rollup-plugin-svelte", + "tags": ["official"] + }, + { + "title": "svelte-loader", + "npm": "svelte-loader", + "category": "Bundler Plugins", + "description": "Webpack loader for svelte components", + "repository": "https://github.com/sveltejs/svelte-loader", + "tags": ["official"] + }, + { + "title": "vite-plugin-svelte", + "npm": "@sveltejs/vite-plugin-svelte", + "category": "Bundler Plugins", + "description": "This is the official svelte plugin for vite", + "repository": "https://github.com/sveltejs/vite-plugin-svelte", + "tags": ["official"] + }, + { + "title": "esbuild-svelte", + "npm": "esbuild-svelte", + "category": "Bundler Plugins", + "description": "An esbuild plugin to compile Svelte components", + "repository": "https://github.com/EMH333/esbuild-svelte", + "tags": [] + }, + { + "title": "rollup-plugin-svelte-hot", + "npm": "rollup-plugin-svelte-hot", + "category": "Bundler Plugins", + "description": "Fork of official rollup-plugin-svelte with added HMR support (for both Nollup or Rollup)", + "repository": "https://github.com/rixo/rollup-plugin-svelte-hot", + "tags": [] + }, + { + "title": "parcel-transformer-svelte3-plus", + "npm": "parcel-transformer-svelte3-plus", + "category": "Bundler Plugins", + "description": "Transformer plugin for Parcel v2; works with Svelte 3 & Svelte 4", + "repository": "https://github.com/HellButcher/parcel-transformer-svelte3-plus", + "tags": [] + }, + { + "title": "parcel-plugin-svelte", + "npm": "parcel-plugin-svelte", + "category": "Bundler Plugins", + "description": "A Parcel v1 plugin that enables Svelte support", + "repository": "https://github.com/DeMoorJasper/parcel-plugin-svelte", + "tags": [] + }, + { + "title": "sveltify", + "npm": "sveltify", + "category": "Bundler Plugins", + "description": "Browserify transform for Svelte", + "repository": "https://github.com/tehshrike/sveltify", + "tags": [] + }, + { + "title": "gulp-svelte", + "npm": "gulp-svelte", + "category": "Bundler Plugins", + "description": "A gulp 4 plugin to compile Svelte template to vanilla JavaScript", + "repository": "https://github.com/shinnn/gulp-svelte", + "tags": [] + }, + { + "title": "sveltejs-brunch", + "npm": "sveltejs-brunch", + "category": "Bundler Plugins", + "description": "Compile Svelte components inside Brunch projects", + "repository": "https://github.com/StarpTech/sveltejs-brunch", + "tags": [] + }, + { + "title": "svelte-preprocess", + "npm": "svelte-preprocess", + "category": "Preprocessors", + "description": "A ✨ magical ✨ Svelte preprocessor with sensible defaults and support for: PostCSS, SCSS, Less, Stylus, Coffeescript, TypeScript, Pug and much more", + "repository": "https://github.com/sveltejs/svelte-preprocess", + "tags": ["official"] + }, + { + "category": "Preprocessors", + "description": "Write Svelte components in markdown syntax", + "npm": "svelte-preprocess-markdown", + "title": "svelte-preprocess-markdown", + "repository": "https://github.com/AlexxNB/svelte-preprocess-markdown" + }, + { + "category": "Preprocessors", + "description": "A markdown preprocessor for Svelte", + "npm": "mdsvex", + "title": "mdsvex", + "repository": "https://github.com/pngwn/MDsveX" + }, + { + "title": "svelte-preprocess-less", + "npm": "svelte-preprocess-less", + "category": "Preprocessors", + "description": "Svelte preprocessor for less", + "repository": "https://github.com/ls-age/svelte-preprocess-less", + "tags": [] + }, + { + "title": "svelte-switch-case", + "repository": "https://github.com/l-portet/svelte-switch-case", + "description": "Switch case syntax for Svelte", + "npm": "svelte-switch-case", + "category": "Preprocessors" + }, + { + "title": "modular-css", + "npm": "@modular-css/svelte", + "category": "Preprocessors", + "description": "Svelte preprocessor support for modular-css", + "repository": "https://github.com/tivac/modular-css/tree/main/packages/svelte", + "tags": [] + }, + { + "title": "svelte-preprocess-sass", + "npm": "svelte-preprocess-sass", + "category": "Preprocessors", + "description": "Svelte preprocessor for sass", + "repository": "https://github.com/ls-age/svelte-preprocess-sass", + "tags": [] + }, + { + "title": "svelte-preprocess-css-hash", + "npm": "svelte-preprocess-css-hash", + "category": "Preprocessors", + "description": "Passing hashed css class name to child component. It is used to avoid class name conflicts.", + "repository": "https://github.com/jiangfengming/svelte-preprocess-css-hash", + "tags": [] + }, + { + "title": "svelte-preprocess-html-asset", + "npm": "svelte-preprocess-html-asset", + "category": "Preprocessors", + "description": "Transform html asset relative path. Works with snowpack & webpack 5.", + "repository": "https://github.com/jiangfengming/svelte-preprocess-html-asset", + "tags": [] + }, + { + "title": "svelte-preprocessor-fetch", + "npm": "svelte-preprocessor-fetch", + "category": "Preprocessors", + "description": "A preprocessor for Svelte can be used to fetch data before the component is compiled.", + "repository": "https://github.com/kevmodrome/svelte-preprocessor-fetch", + "tags": [] + }, + { + "title": "prettier-plugin-svelte", + "npm": "prettier-plugin-svelte", + "category": "Linting and Formatting", + "description": "Format your svelte components using prettier.", + "repository": "https://github.com/sveltejs/prettier-plugin-svelte", + "tags": ["official"] + }, + { + "title": "svelte-check", + "npm": "svelte-check", + "category": "Linting and Formatting", + "description": "Detects unused css. Adds Svelte A11y hints. Provides JavaScript/TypeScript diagnostics.", + "repository": "https://github.com/sveltejs/language-tools/tree/master/packages/svelte-check", + "tags": ["official"] + }, + { + "title": "svelte-reactive-css-preprocess", + "repository": "https://github.com/srmullen/svelte-reactive-css-preprocess", + "description": "Automatically update css on component state changes.", + "npm": "svelte-reactive-css-preprocess", + "category": "Preprocessors", + "tags": [] + }, + { + "title": "svelte-subcomponent-preprocessor", + "repository": "https://github.com/srmullen/svelte-subcomponent-preprocessor", + "description": "Write more than one component per svelte file", + "npm": "svelte-subcomponent-preprocessor", + "category": "Preprocessors" + }, + { + "title": "eslint-plugin-svelte", + "repository": "https://github.com/sveltejs/eslint-plugin-svelte", + "description": "ESLint plugin that applies own rules to Svelte", + "npm": "eslint-plugin-svelte", + "category": "Linting and Formatting", + "tags": ["official"] + }, + { + "title": "full-client-server-sveltekit", + "repository": "https://github.com/SBHattarj/full-client-server-sveltekit", + "description": "A plugin allowing usage of server directly on browser using web socket", + "npm": "full-client-server-sveltekit", + "category": "Bundler Plugins" + }, + { + "title": "svelte-preprocess-delegate-events", + "repository": "https://github.com/baseballyama/svelte-preprocess-delegate-events", + "description": "Delegate events with on:* 🎉", + "npm": "svelte-preprocess-delegate-events", + "category": "Preprocessors" } ] diff --git a/src/routes/resources/+page.svelte b/src/routes/resources/+page.svelte index 96ffffea2..af8c6091b 100644 --- a/src/routes/resources/+page.svelte +++ b/src/routes/resources/+page.svelte @@ -1,38 +1,10 @@
@@ -40,15 +12,19 @@
There are a few books from major publishers:
    - {#each booksFromPublisher as { name, link, author }} -
  • {name} by {author}
  • + {#each booksFromPublisher as { title, url, description }} +
  • + {title}{#if description} - {description}{/if} +
  • {/each}
As well as a couple self-published books:
    - {#each booksSelfPublished as { name, link, author }} -
  • {name} by {author}
  • + {#each booksSelfPublished as { title, url, description }} +
  • + {title}{#if description} - {description}{/if} +
  • {/each}
@@ -63,34 +39,48 @@
There are also a number of third-party courses:
    -
  • Egghead
  • -
  • - Udemy (Note: - Udemy frequently has discounts over 90%) -
  • -
  • Pluralsight
  • + {#each videoCourses as { title, url, description }} +
  • + {title}{#if description} - {description}{/if} +
  • + {/each}
Finally, there are also YouTube channels and playlists that teach Svelte:
+ +

Extensions

+ +
    + {#each extensions as { title, url, description }} +
  • {title} - {description}
  • + {/each}

Discovery

+ + +

Miscellaneous

+ +
    + {#each misc as { title, url, description }} +
  • + {title}{#if description} - {description}{/if} +
  • + {/each} +
diff --git a/src/routes/resources/booksFromPublisher.json b/src/routes/resources/booksFromPublisher.json new file mode 100644 index 000000000..290b55bce --- /dev/null +++ b/src/routes/resources/booksFromPublisher.json @@ -0,0 +1,22 @@ +[ + { + "title": "Svelte 3 Up and Running", + "url": "https://www.amazon.com/dp/B08D6T6BKS/", + "description": "by Alessandro Segala" + }, + { + "title": "Svelte and Sapper in Action", + "url": "https://www.manning.com/books/svelte-and-sapper-in-action", + "description": "by R. Mark Volkmann" + }, + { + "title": "SvelteKit Up and Running", + "url": "https://sveltekitbook.dev", + "description": "by Dylan Hildenbrand" + }, + { + "title": "Svelte with Test-Driven Development", + "url": "https://www.amazon.com/dp/1837638330", + "description": "by Daniel Irvine" + } +] diff --git a/src/routes/resources/booksSelfPublished.json b/src/routes/resources/booksSelfPublished.json new file mode 100644 index 000000000..6d09c06ae --- /dev/null +++ b/src/routes/resources/booksSelfPublished.json @@ -0,0 +1,12 @@ +[ + { + "title": "Svelte Handbook", + "url": "https://flaviocopes.com/page/svelte-handbook/", + "description": "by Flavio Copes" + }, + { + "title": "Simple Svelte", + "url": "https://wfq.gumroad.com/l/simple_svelte", + "description": "by Darren Wang" + } +] diff --git a/src/routes/resources/extensions.json b/src/routes/resources/extensions.json new file mode 100644 index 000000000..4ad8a6116 --- /dev/null +++ b/src/routes/resources/extensions.json @@ -0,0 +1,57 @@ +[ + { + "title": "Svelte DevTools", + "description": "An extension that allows inspection of Svelte component hierarchy and state in the Firefox and Chrome developer tools", + "url": "https://github.com/sveltejs/svelte-devtools" + }, + { + "title": "Svelte for VS Code", + "description": "Svelte language support for VS Code", + "url": "https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode" + }, + { + "title": "vim-svelte", + "description": "Vim syntax highlighting and indentation for Svelte 3 components.", + "url": "https://github.com/evanleck/vim-svelte" + }, + { + "title": "vim-svelte-plugin", + "description": "Vim syntax and indent plugin for .svelte files", + "url": "https://github.com/leafOfTree/vim-svelte-plugin" + }, + { + "title": "coc-svelte", + "description": "Svelte support for (Neo)Vim", + "url": "https://github.com/coc-extensions/coc-svelte" + }, + { + "title": "web-mode.el", + "description": "Emacs major mode including support for Svelte", + "url": "https://github.com/fxbois/web-mode" + }, + { + "title": "IntelliJ (WebStorm)", + "description": "Svelte Plugin for IntelliJ (WebStorm)", + "url": "https://plugins.jetbrains.com/plugin/12375-svelte" + }, + { + "title": "Svelte for Sublime Text", + "description": "Sublime Text syntax highlighting for Svelte 3 components", + "url": "https://packagecontrol.io/packages/Svelte" + }, + { + "title": "SvelteNova", + "description": "Svelte language support for Nova Editor by Panic", + "url": "https://github.com/laosb/SvelteNova" + }, + { + "title": "Svelte Component Extractor", + "description": "Highlight text in VS Code and extract it to a new component", + "url": "https://github.com/proverbial-ninja/vscode-svelte-component-extractor" + }, + { + "title": "SvelteKit Snippets", + "description": "Svelte & SvelteKit Snippets for VS Code", + "url": "https://github.com/stordahl/sveltekit-snippets" + } +] diff --git a/src/routes/resources/misc.json b/src/routes/resources/misc.json new file mode 100644 index 000000000..eaf3ba3ab --- /dev/null +++ b/src/routes/resources/misc.json @@ -0,0 +1,17 @@ +[ + { + "title": "meteor-svelte", + "url": "https://github.com/meteor-svelte/meteor-svelte", + "description": "Build cybernetically enhanced web apps with Meteor and Svelte" + }, + { + "title": "svelte-preval", + "url": "https://github.com/milahu/svelte-preval", + "description": "Compile time eval for svelte components" + }, + { + "title": "walk-and-graph-svelte-components", + "url": "https://github.com/j2l/walk-and-graph-svelte-components", + "description": "CLI node script to walk svelte and js files, to draw a beautiful JPG of your dependencies aka \"imports\". No external dependency, only FS (Node)." + } +] diff --git a/src/routes/resources/videoCourses.json b/src/routes/resources/videoCourses.json new file mode 100644 index 000000000..988d63c27 --- /dev/null +++ b/src/routes/resources/videoCourses.json @@ -0,0 +1,20 @@ +[ + { + "title": "Level Up Tutorials", + "url": "https://levelup.video/library?tags=svelte", + "description": "by Scott Tolinski" + }, + { + "title": "Egghead", + "url": "https://egghead.io/browse/frameworks/svelte" + }, + { + "title": "Udemy", + "url": "https://www.udemy.com/courses/search/?q=sveltejs+svelte", + "description": "(Note: Udemy frequently has discounts over 90%)" + }, + { + "title": "Pluralsight", + "url": "https://www.pluralsight.com/search?q=svelte" + } +] diff --git a/src/routes/resources/youtube.json b/src/routes/resources/youtube.json new file mode 100644 index 000000000..bf4fe9025 --- /dev/null +++ b/src/routes/resources/youtube.json @@ -0,0 +1,19 @@ +[ + { + "title": "Huntabyte", + "url": "https://www.youtube.com/@Huntabyte" + }, + { + "title": "Joy of Code", + "url": "https://www.youtube.com/@JoyofCodeDev" + }, + { + "title": "Svelte Mastery", + "url": "https://youtube.com/channel/UCg6SQd5jnWo5Y70rZD9SQFA" + }, + { + "title": "Svelte Tutorial for Beginners", + "url": "https://youtube.com/playlist?list=PL4cUxeGkcC9hlbrVO_2QFVqVPhlZmz7tO&si=HHE2i-mSt9u1_CtW", + "description": "by The Net Ninja" + } +] diff --git a/src/routes/templates/+page.svelte b/src/routes/templates/+page.svelte index 41ef3e641..02b300755 100644 --- a/src/routes/templates/+page.svelte +++ b/src/routes/templates/+page.svelte @@ -6,7 +6,7 @@ diff --git a/src/routes/templates/templates.json b/src/routes/templates/templates.json index 3758800ab..6b220c329 100644 --- a/src/routes/templates/templates.json +++ b/src/routes/templates/templates.json @@ -733,7 +733,6 @@ "url": "https://sveltepress.site/", "repository": "https://github.com/SveltePress/sveltepress", "description": "A markdown centered site build tool with full power of sveltekit.", - "npm": "@sveltepress/create", "category": "SvelteKit", "tags": ["markdown", "integrations"] }, diff --git a/src/routes/tools/+page.server.ts b/src/routes/tools/+page.server.ts new file mode 100644 index 000000000..6a24cd572 --- /dev/null +++ b/src/routes/tools/+page.server.ts @@ -0,0 +1,5 @@ +import { redirect } from '@sveltejs/kit'; + +export const load = async () => { + redirect(308, '/packages'); +}; diff --git a/src/routes/tools/tools.json b/src/routes/tools/tools.json deleted file mode 100644 index 3203a57cb..000000000 --- a/src/routes/tools/tools.json +++ /dev/null @@ -1,319 +0,0 @@ -[ - { - "title": "rollup-plugin-svelte", - "npm": "rollup-plugin-svelte", - "category": "Bundler Plugins", - "description": "Compile Svelte components with Rollup", - "repository": "https://github.com/sveltejs/rollup-plugin-svelte", - "tags": ["official"] - }, - { - "title": "svelte-loader", - "npm": "svelte-loader", - "category": "Bundler Plugins", - "description": "Webpack loader for svelte components", - "repository": "https://github.com/sveltejs/svelte-loader", - "tags": ["official"] - }, - { - "title": "vite-plugin-svelte", - "npm": "@sveltejs/vite-plugin-svelte", - "category": "Bundler Plugins", - "description": "This is the official svelte plugin for vite", - "repository": "https://github.com/sveltejs/vite-plugin-svelte", - "tags": ["official"] - }, - { - "title": "esbuild-svelte", - "npm": "esbuild-svelte", - "category": "Bundler Plugins", - "description": "An esbuild plugin to compile Svelte components", - "repository": "https://github.com/EMH333/esbuild-svelte", - "tags": [] - }, - { - "title": "rollup-plugin-svelte-hot", - "npm": "rollup-plugin-svelte-hot", - "category": "Bundler Plugins", - "description": "Fork of official rollup-plugin-svelte with added HMR support (for both Nollup or Rollup)", - "repository": "https://github.com/rixo/rollup-plugin-svelte-hot", - "tags": [] - }, - { - "title": "parcel-transformer-svelte3-plus", - "npm": "parcel-transformer-svelte3-plus", - "category": "Bundler Plugins", - "description": "Transformer plugin for Parcel v2; works with Svelte 3 & Svelte 4", - "repository": "https://github.com/HellButcher/parcel-transformer-svelte3-plus", - "tags": [] - }, - { - "title": "parcel-plugin-svelte", - "npm": "parcel-plugin-svelte", - "category": "Bundler Plugins", - "description": "A Parcel v1 plugin that enables Svelte support", - "repository": "https://github.com/DeMoorJasper/parcel-plugin-svelte", - "tags": [] - }, - { - "title": "sveltify", - "npm": "sveltify", - "category": "Bundler Plugins", - "description": "Browserify transform for Svelte", - "repository": "https://github.com/tehshrike/sveltify", - "tags": [] - }, - { - "title": "gulp-svelte", - "npm": "gulp-svelte", - "category": "Bundler Plugins", - "description": "A gulp 4 plugin to compile Svelte template to vanilla JavaScript", - "repository": "https://github.com/shinnn/gulp-svelte", - "tags": [] - }, - { - "title": "meteor-svelte", - "category": "Bundler Plugins", - "description": "Build cybernetically enhanced web apps with Meteor and Svelte", - "repository": "https://github.com/meteor-svelte/meteor-svelte", - "tags": [] - }, - { - "title": "sveltejs-brunch", - "npm": "sveltejs-brunch", - "category": "Bundler Plugins", - "description": "Compile Svelte components inside Brunch projects", - "repository": "https://github.com/StarpTech/sveltejs-brunch", - "tags": [] - }, - { - "title": "rules_svelte", - "category": "Bundler Plugins", - "description": "Experimental rules for building Svelte components with Bazel", - "repository": "https://github.com/thelgevold/rules_svelte", - "tags": [] - }, - { - "title": "svelte-devtools", - "category": "Debugging", - "description": "An extension that allows inspection of Svelte component hierarchy and state in the Firefox and Chrome developer tools", - "repository": "https://github.com/sveltejs/svelte-devtools", - "tags": ["official"] - }, - { - "title": "svelte-preprocess", - "npm": "svelte-preprocess", - "category": "Preprocessors", - "description": "A ✨ magical ✨ Svelte preprocessor with sensible defaults and support for: PostCSS, SCSS, Less, Stylus, Coffeescript, TypeScript, Pug and much more", - "repository": "https://github.com/sveltejs/svelte-preprocess", - "tags": ["official"] - }, - { - "description": "compile time eval for svelte components", - "category": "Preprocessors", - "title": "svelte-preval", - "repository": "https://github.com/milahu/svelte-preval" - }, - { - "category": "Preprocessors", - "description": "Write Svelte components in markdown syntax", - "npm": "svelte-preprocess-markdown", - "title": "svelte-preprocess-markdown", - "repository": "https://github.com/AlexxNB/svelte-preprocess-markdown" - }, - { - "category": "Preprocessors", - "description": "A markdown preprocessor for Svelte", - "npm": "mdsvex", - "title": "mdsvex", - "repository": "https://github.com/pngwn/MDsveX" - }, - { - "title": "svelte-preprocess-less", - "npm": "svelte-preprocess-less", - "category": "Preprocessors", - "description": "Svelte preprocessor for less", - "repository": "https://github.com/ls-age/svelte-preprocess-less", - "tags": [] - }, - { - "title": "svelte-switch-case", - "repository": "https://github.com/l-portet/svelte-switch-case", - "description": "Switch case syntax for Svelte", - "npm": "svelte-switch-case", - "category": "Preprocessors" - }, - { - "title": "modular-css", - "npm": "@modular-css/svelte", - "category": "Preprocessors", - "description": "Svelte preprocessor support for modular-css", - "repository": "https://github.com/tivac/modular-css/tree/main/packages/svelte", - "tags": [] - }, - { - "title": "svelte-preprocess-sass", - "npm": "svelte-preprocess-sass", - "category": "Preprocessors", - "description": "Svelte preprocessor for sass", - "repository": "https://github.com/ls-age/svelte-preprocess-sass", - "tags": [] - }, - { - "title": "svelte-preprocess-css-hash", - "npm": "svelte-preprocess-css-hash", - "category": "Preprocessors", - "description": "Passing hashed css class name to child component. It is used to avoid class name conflicts.", - "repository": "https://github.com/jiangfengming/svelte-preprocess-css-hash", - "tags": [] - }, - { - "title": "svelte-preprocess-html-asset", - "npm": "svelte-preprocess-html-asset", - "category": "Preprocessors", - "description": "Transform html asset relative path. Works with snowpack & webpack 5.", - "repository": "https://github.com/jiangfengming/svelte-preprocess-html-asset", - "tags": [] - }, - { - "title": "svelte-preprocessor-fetch", - "npm": "svelte-preprocessor-fetch", - "category": "Preprocessors", - "description": "A preprocessor for Svelte can be used to fetch data before the component is compiled.", - "repository": "https://github.com/kevmodrome/svelte-preprocessor-fetch", - "tags": [] - }, - { - "title": "prettier-plugin-svelte", - "npm": "prettier-plugin-svelte", - "category": "Linting and Formatting", - "description": "Format your svelte components using prettier.", - "repository": "https://github.com/sveltejs/prettier-plugin-svelte", - "tags": ["official"] - }, - { - "title": "svelte-check", - "npm": "svelte-check", - "category": "Linting and Formatting", - "description": "Detects unused css. Adds Svelte A11y hints. Provides JavaScript/TypeScript diagnostics.", - "repository": "https://github.com/sveltejs/language-tools/tree/master/packages/svelte-check", - "tags": ["official"] - }, - { - "title": "svelte-vscode", - "category": "Editor Extensions", - "description": "Svelte language support for VS Code", - "url": "https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode", - "tags": ["official"], - "repository": "https://github.com/sveltejs/language-tools" - }, - { - "title": "vim-svelte", - "category": "Editor Extensions", - "description": "Vim syntax highlighting and indentation for Svelte 3 components.", - "repository": "https://github.com/evanleck/vim-svelte", - "tags": [] - }, - { - "title": "vim-svelte-plugin", - "category": "Editor Extensions", - "description": "Vim syntax and indent plugin for .svelte files", - "repository": "https://github.com/leafOfTree/vim-svelte-plugin", - "tags": [] - }, - { - "title": "coc-svelte", - "category": "Editor Extensions", - "description": "Svelte support for (Neo)Vim", - "repository": "https://github.com/coc-extensions/coc-svelte", - "tags": [] - }, - { - "title": "web-mode.el", - "category": "Editor Extensions", - "description": "Emacs major mode including support for Svelte", - "repository": "https://github.com/fxbois/web-mode", - "tags": [] - }, - { - "title": "IntelliJ (WebStorm)", - "category": "Editor Extensions", - "description": "Svelte Plugin for IntelliJ (WebStorm)", - "url": "https://plugins.jetbrains.com/plugin/12375-svelte", - "tags": [], - "repository": "https://github.com/tomblachut/svelte-intellij" - }, - { - "title": "Sublime Text: Svelte Syntax Highlighting", - "category": "Editor Extensions", - "description": "Sublime Text syntax highlighting for Svelte 3 components", - "url": "https://packagecontrol.io/packages/Svelte", - "tags": [], - "repository": "https://github.com/corneliusio/svelte-sublime" - }, - { - "title": "SvelteNova", - "category": "Editor Extensions", - "description": "Svelte language support for Nova Editor by Panic", - "repository": "https://github.com/laosb/SvelteNova", - "tags": [] - }, - { - "title": "Svelte Component Extractor", - "category": "Editor Extensions", - "description": "Highlight text in VS Code and extract it to a new component", - "repository": "https://github.com/proverbial-ninja/vscode-svelte-component-extractor", - "tags": [] - }, - { - "title": "SvelteKit Snippets", - "category": "Editor Extensions", - "description": "Svelte & SvelteKit Snippets for VS Code", - "repository": "https://github.com/stordahl/sveltekit-snippets", - "tags": [] - }, - { - "title": "svelte-reactive-css-preprocess", - "repository": "https://github.com/srmullen/svelte-reactive-css-preprocess", - "description": "Automatically update css on component state changes.", - "npm": "svelte-reactive-css-preprocess", - "category": "Preprocessors", - "tags": [] - }, - { - "title": "svelte-subcomponent-preprocessor", - "repository": "https://github.com/srmullen/svelte-subcomponent-preprocessor", - "description": "Write more than one component per svelte file", - "npm": "svelte-subcomponent-preprocessor", - "category": "Preprocessors" - }, - { - "title": "walk-and-graph-svelte-components", - "repository": "https://github.com/j2l/walk-and-graph-svelte-components", - "description": "CLI node script to walk svelte and js files, to draw a beautiful JPG of your dependencies aka \"imports\". No external dependency, only FS (Node).", - "category": "Debugging", - "tags": [] - }, - { - "title": "eslint-plugin-svelte", - "repository": "https://github.com/sveltejs/eslint-plugin-svelte", - "description": "ESLint plugin that applies own rules to Svelte", - "npm": "eslint-plugin-svelte", - "category": "Linting and Formatting", - "tags": ["official"] - }, - { - "title": "full-client-server-sveltekit", - "repository": "https://github.com/SBHattarj/full-client-server-sveltekit", - "description": "A plugin allowing usage of server directly on browser using web socket", - "npm": "full-client-server-sveltekit", - "category": "Bundler Plugins" - }, - { - "title": "svelte-preprocess-delegate-events", - "repository": "https://github.com/baseballyama/svelte-preprocess-delegate-events", - "description": "Delegate events with on:* 🎉", - "npm": "svelte-preprocess-delegate-events", - "category": "Preprocessors" - } -]