svelte-society / sveltesociety.dev

The Svelte Society website

Svelte Society Website

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

In order to start a development server:

pnpm install
pnpm run dev

Contributing

If you would like to improve the site, you are very welcome to submit a PR! The website has a form which helps streamline adding your package or resource.

Please locally ensure your code passes pnpm run lint before submitting your PR. If you have Prettier formatting issues, please run pnpm run format.

sveltesociety.dev's Issues

Externalize Components/Tooling/Templates storage

Right now the process of adding a component/tooling/template is a bit of a hassle:

• Creator need to fork the project
• Creator need add the data in one of 3 JSON files
• Creator have to ensure that all (mandatory) fields are filled
• Creator have to ensure that fields are correctly set (typos, no unnecessary new tags, categories, etc.)
• Creator have to open a PR
• Maintainer+Community have to validate that all (mandatory) fields are filled
• Maintainer+Community have to validate that all fields are correctly set
• Maintainer have to merge PR
• Maintainer have to create a PR from staging to main
• Maintainer have to merge PR

And not data can be dynamic (mainly repository stars)

---

Maybe the data should be saved in a "database" ℹ️ (so no more PR) and a form to submit a new component/tooling/template (with data validation during submission).
It would reduce the process to:

• Creator fill the form (which have validation)
• Creator submit the form
• Maintainer review the submission
• Maintainer validate the submission

It will offer a way to update dynamic data without the need to do a commit. (By running a script that will update the database directly or by fetching the data directly when reading the databaseℹ️)

It can maybe also provided so more advanced search abilities

---

The drawback is that we lose the community aspect of validation, and the communication between the Creator and Maintainer/Community

Overflow on mobile

There is an overflow on the homepage on mobile. I will dig into why and fix it.

Tooltip for copy in cheatsheet

The 'copy' button in the cheatsheet lacks a hover/tooltip similar to the other two buttons

Select and ArrowButton Components

In the routes Templates, Components, and Tooling a new SvelteSelect package was added to replace the ArrowButtton component used before. The Components route still has one of the old ArrowButton in use. I have updated the styling as best I can to match, but even within the SvelteSelect package the styling is inconsistent, seen below in the Sorting dropdown.

I suggest taking this package out and using vanilla html select element with the svelte stores and doing some custom styling that fits our design how this w3c post shows https://www.w3schools.com/howto/howto_custom_select.asp

Remove use of `$page.query`

@Abarnob looks like I was wrong in #108 that it was a SvelteKit bug and it was really a bug in the implementation, so maybe I shouldn't have merged it yet (more details available in the issues linked to from sveltejs/kit#2444 (comment)). Do you think you could fix it?

We'd either need to not prerender the page (e.g. switch from adapter-static to adapter-netlify) or update the dropdown in onMount using location.search). The latter seems potentially safer because it's a code change only and doesn't involve the possibility of needing to make any hosting changes, but @kevmodrome could weigh in if he feels differently

Recipe for service worker and workbox

I think we need a recipe for service worker and workbox default precacheAndRoute code.

Some idea?

Need to define the code style rules

I see in the code lots a different code style:

• Tab vs spaces
• 2 spaces vs 4 spaces indentation
• semicolon at end of statement vs no semicolon
• Script/Template/Style vs Script/Style/Template
• new line between import and export vs no new line
• etc.

I think rules should be defined and a CI check should check if they are respected or not.

Snippet generator generates invalid component snippets

https://sveltesociety.dev/help/submitting/?type=component doesn't generate "stars": 0, and so the component doesn't render correctly. Obviously 0 isn't the correct number of stars for many components, but it's a fine placeholder

Gitpod-schema no content with colon is missed

Unable to load schema from 'https://gitpod.io/schemas/gitpod-schema.json': No content.
can not read an implicit mapping pair; a colon is missed

For gitpod.yml file have problem message..

Screenshot: gitpod for error
https://scrnli.com/VWP7x9CWrPmq3n

We still have public links to old repo

We still have links to old repo here: https://sveltesociety.dev/help/components/

Parity with sveltesociety.dev

Here's a list of things I noticed that are different between this repo and the production site:

• favicon is missing (#13)
• page titles are missing - for homepage, components, boilerplate, cheat sheet, events (#13)
• robots.txt - renders the homepage instead of a valid robots.txt file (#19)
• events page - most past events are missing (#36)
• recipes - text is very large on individual recipe pages and recipe category pages (#32)
• boilerplates and components - controls are misaligned and missing arrow icon (#41)
• CSS stacking issue? If you visit all the pages a couple times you will start to see the page squished to the left hand side of the screen. Is there some CSS from an old page not being removed? (#42)
• npm run build fails (#35)

how to use pxtorem plugin in svelte project with sapper?

Periodically update components and boilerplates data

We should run a script that periodically that updates the site's data. E.g. number of stars that a repo has, last date the repo was updated, etc. Also, I noticed an archived repo on the components page in #15, which is something we could detect as well

The main Svelte site gets info from GitHub to get the list of contributors.

GraphQL API

It looks to me like this has a much higher rate limit than the REST API. However, authentication is required.

You can get 500,000 nodes in one call. It has a rate limit of 5,000 points per hour. I think that translates into being able to load 500,000 repos / hr since the things we care about like pushedAt and stargazerCount are on the same node. https://docs.github.com/en/graphql/overview/resource-limitations

REST API

Info about the Github API rate limit is here: https://docs.github.com/en/rest/overview/resources-in-the-rest-api#rate-limiting

• Unauthenticated - 60 requests / hr
• GitHub Actions - 1,000 requests / hr
• Logged in users - 5,000 requests / hr

It looks like you can only get one repo at a time: https://docs.github.com/en/rest/reference/repos#get-a-repository

Slots testing recipe idea

There's a recipe about testing: https://sveltesociety.dev/recipes/testing-and-debugging/unit-testing-svelte-component/

I found another another solution to testing slots here: bahmutov/cypress-svelte-unit-test#251 (comment). I then found one of the Svelte maintainers doing the same thing here: sveltejs/svelte#4296 (comment)

I saw some references to $$slots being private, but that may have only been true in the past because I see it in the docs, so it feels pretty safe to rely on: https://svelte.dev/docs#slots_object

It looks like @kevmodrome originally added this recipe in https://github.com/svelte-society/sveltesociety.dev-legacy/commits/2103aaf7b9e670b7cfb64048664fd2d2d7ac1dd6/src/pages/recipes/testing-and-debugging/authenetication-with-svelte.svx. I haven't done much unit testing of Svelte components, so I'm curious what he thinks about this approach

Small typo on cheatsheet.

Code syntax highlighting lost during migration

The page below doesn't have any syntax highlighting or formatting of the code anymore.

https://sveltesociety.dev/recipes/testing-and-debugging/unit-testing-svelte-component/

The syntax highlighting is present in the old repo, but seems to have been lost during the migration https://github.com/svelte-society/sveltesociety.dev-legacy

Create a page/section on the website for Svelte Sirens

We need this! 🥳

Meta tags/OG Image

Need meta tags for twitter and og image.

Incorrect meta tags

Someone shared a link to https://sveltesociety.dev/help/submitting?type=component on Discord and it showed a little box saying cheat sheet

Inconsistent Naming for Titles

The metatags store has a title property that is being used in the routes inconsistently. It would be nice if we could pick one convention throughout. Probably {title}-Svelte Society or {title}|Svelte Society would work well. Have the title be dynamic for the routes to set and the other part be there all the time.

Add official SvelteKit Adapter

I see that the Components pages don't have SvelteKit official Adapter

Enable single search over all categories/content

As I developer I am mostly interested in solving my challenges with Svelte(Kit). Be it building a SvelteKit Docker container or understanding how to deal with mongoose database initialisation or animated modal dialogs. I do not care if a solution is considered to be a "template", a "component", "tools" or "recipes".

Currently I need to use multiple searches to check if anything relevant is present on sveltesociety.dev. That is not very convenient and makes the site for me not an automatic go-to-place for things Svelte(Kit) related.

Therefore it would be great to get a single search over all categories on sveltesociety.dev. Just a simple Google-like keyword search over all content. Hopefully with a search box directly on the front-page.

"Who is using svelte" section ?

Since "who is using svelte" svelte.dev section has been removed to keep only major users, it could make sense to have this kind of section put in svelte society website ?
It was very interesting to see how svelte was spreading the world.
Now we can't have this information.
Yes, see that IBM, Go daddy and 13 others users is pretty cool, but see that more than 300+ took the train already was also a good indicator how svelte is really good.

Maintain and check each pr about that is probably time consuming.
Maybe there is another way to keep track of this without using git repo.

Remove isPast meta from events

Currently in events (src/routes/events/*.svx) there is a isPast metadata that could be computed on the fly.

The meta is used in src/routes/events/index.svelte.

Add note for Sapper being unmaintained in Template section

Howdy folks!

I noticed in the Svelte discord it was raised that Sapper is no longer being maintained. Do we want to consider adding a note about that similar to the Sapper README?

Add recipe to dockerize sveltekit app

• bonus for adding env variables

Can't find some i18n components

I'm on my phone and couldn't find svelte-intl-precompile listed. I don't know if it was removed or the "internationalization" tag was removed. It used to be there and I think there were a few others that aren't appearing. I don't know if we can find out what commit they were removed in to restore them?

Redeploy from staging or remove staging

The main site is a couple weeks out-of-date. Can we redeploy from staging? Personally, I'd just get rid of staging as I'm not sure it's worth the overhead

add reddit icon to homepage

perhaps we should link to https://reddit.com/r/sveltejs

@brittneypostma made us some very nice icons for the the others 😄

Site doesn't build

I just realized npm run build fails. That's probably the biggest thing we need help with to get this launched. Any help would be appreciated

Adding git-hook for automated prettier run

What about adding a git hook that runs prettier automatically on each commit? If this idea is ok to you, I could add one :)

Search for components: Searching with a text that doesn't match any results breaks the site

Steps to reproduce:

1. Go to https://sveltesociety.dev/components/
2. In the 'Search for components...' field, type a text that doesn't match any results (e.g. 'hello')
3. The site stops working at this point
   • the filtration of components stops working
   • links to other pages like Tools stop working
   • following error is reported in the console logs

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'length') at Object.p (sort-582dd570.js:3:2453) at Sl (vendor-d78fc752.js:4:1769) at Hn (vendor-d78fc752.js:4:1438)

Component card click to copy adds unnecessary character

https://github.com/svelte-society/sveltesociety.dev/blob/staging/src/lib/components/ComponentIndex/Card.svelte#L18

Clicking on the orange box in the component cards https://sveltesociety.dev/components copies the command into the clipboard. But, there is an extra character 'L' causing the copied command to fail.

Put a link in Github homepage

Can we put a link for the website in Github Homepage?

Styling updates

Originally css variables were used to style inside the style tags with vanilla CSS. However, tailwind has been added and most files need to be updated. There are lots of optimizations that could happen as well by adding more top level styles to tailwind config instead of styling individual elements.

Re-work dropdown selectors to typeahead inputs

The current dropdown selectors aren't very functional at the moment. I'd love to switch these out for an input element with typeahead completion.

Requirements:

• Make the dropdowns into text fields
• Add a label above
• Make sure there's an arrow that indicates there are options that show up once you click it
• Use the same styling if possible
• Filter the options as you type in the input field

Here's an example of a variation of this: https://codepen.io/hmps/pen/FzIsu -

Up for grabs if anyone wants to try sorting this one out.

Remove Tailwind and set up a design system using css custom properties

This is a quite a big one but it needs to be done to make it easier in the future.

• Add proper CSS custom properties for regular use (colors, grays, sizing, elevation, shadows)
• Define common styles for headings (h1, h2, h3, etc.) and other common elements
• Remove Tailwind (including all the preprocessing and files)

Edit: changed title to not be so rude.

What do you think about adding these in recipes or cheatsheet?

What do you think about adding these in recipes or cheatsheet?

https://geoffrich.net/posts/assorted-svelte-demos/

Staging Information - Preview Site URL

Staging site can be viewed here: https://staging.sveltesociety-2021-dqq.pages.dev

component builder produces poorly formatted output

If you copy the output of https://sveltesociety.dev/help/submitting?type=component it will fail lint

It should output tabs instead of spaces, put the tags on a single line, etc.

Add GitHub labels for categorise Issue/PR

It would be nice to add some labels to help filtering / to do some triage on Issue and PR.

Pull requests about new components, templates and tools are quite easy to review and merge (it should only affect one file), so being able to see them at one glance could help to reduce delay between submitting and when it will appear on the website.

Also issues and pull requests about recipe and cheat sheet need more attention as they require spell check, proofreading, typesetting, etc.

I propose to add the following labels:

• Component
• Template
• Tool
• Recipe
• CheatSheet
• Event ?

Recipe for using TypeScript and Jest tests at the same time

There's a recipe for using TypeScript and a recipe for writing tests with Jest, but nothing to get them both running together. I can write components using TS but as soon as I try to test them it all falls apart. I've never used Jest and TS together before, so a recipe would be extremely helpful.

A recipe for Purgecss and Svelte?

Now that SvelteKit has upgraded to Vite 2.8^ we can use Tailwindcss with purgecss (there was a problem with esbuild and comments).

Can we write a recipe for Purgecss and Svelte?

I don't need to integrate Tailwind only (I know about https://github.com/svelte-add/tailwindcss), I need a PurgeCSS extractor for Svelte projects.

I think a recipe is useful because I can read it for each project I start, time after time.

Padding in CategoryTree

In both cases some extra margin in the top can be good

Both use the component CategoryTree which has margin: 0 0 0 1.75rem;

I suspect a top margin of 1rem should add sufficient white space

Typo in https://sveltesociety.dev/templates#component-svelte-add/bulma

Noticed there's a typo Bluma instead of Bulma in the Templates section:

I briefly looked into how this can be fixed -- the content for the Templates is in https://github.com/svelte-society/sveltesociety.dev/blob/main/src/routes/templates/templates.json, but it seems like a tool/script might be run to generate/populate this file? It looks like the file is a cache of the template repo info, and running the tool/script would update the stars and descriptions for each repo.

Maybe someone can point me to where that tool/script might be, or let me know if directly modifying the json file is the way to go. Thank you!

Styling in 'how to commit a component'

page lacks styling

`undefined` component category

Combine "Developer Experience" components with Tooling page

Everything listed here would be more applicable on the Tooling page:
https://sveltesociety-2021-dqq.pages.dev/components#category-Developer%20Experience

The Tooling page should probably use the same system as the Components and Boilerplates pages. Those two pages have lots of copy/pasted code and so should be refactored

Footer has bullet points

Footer seems to be scrunched and has bullet points on the items, which I don't think is intentional. I am going to work on a fix for this.

Should 'tools' follow the pattern of components and templates

The tools section follows a different UI pattern, it would be nice to use the same pattern