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 @@
-
+
-
- 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.
-
-
- 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.
+
@@ -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"
- }
-]