Just took a look through the tutorial. Reads well and clearly I think - great job! Some other notes I made along the way:

• The first page has a Solve button but there is nothing to solve. Might be worth hiding. Also, might be worth explicitly calling out to navigate to the next step.
• Moving to the next step doesn't scroll instructions back to the top (at least in Firefox Windows). So it's a little awkward.
• I agree that the first SVG example might benefit from a code comment. Someone might naively try to copy the code into the Result pane as that most clearly says "SVG goes here"
• The Solve button is a big call to action button. But really it is the Next button that should be emphasised (as the solve is just an escape hatch in a tutorial really). Consider toning down solve and emphasising next.
• On that note - once they solve it by writing code, is there a way to detect that and give feedback. E.g. 'Great job, head to the next step!'

This image illustrates the problem:

This seems to be caused by the space-y-2 TailwindCSS class applied to the container <div> element:

My suggested fix to this would be adding another space-between class prefixed by xl to the same container element to work with xl:flex-row class--either xl:space-y-0 for no spacing (vertical or horizontal) or xl:space-x-2 for horizontal spacing.

Currently, the "View the benchmark" link (see image above) only takes to the corresponding GitHub repo. However, neither repo is specifically about comparing Solid's performance to other frameworks.

This makes it unclear how to reproduce the presented benchmark results, and any skeptical reader would remain unconvinced of Solid's strong performance. In other words, the benchmark section would not succeed in serving its purpose unless there's an easy way to reproduce the results.

In the docs page, the menu button is going out of the bound.

Can be solved by aligning it in the header section

It seems the images on root page when testing offline are missing (also the favicons), you should add them to the sw precache using includeAssets option on VitePWA plugin configuration:

// vite.config.ts
const pwaOptions: Partial<VitePWAOptions> = {
  registerType: 'autoUpdate',
  includeAssets: ['assets/*.{png,svg}', 'img/icons/*.png', 'img/favicons/*.png'],
  manifest,
  workbox: {},
};

I don't know if there are more directories where you load svg or png images, but you should review it.

Right now the locale is saved as a session cookie.

I somehow get the Spanish docs every time i have a new session (I don't know what is used to determine this since I have the system in english?). I would like this setting to be remembered for a longer period of time.

https://www.solidjs.com/tutorial/bindings_events

All on bindings are case insensitive which means that event names need to be in lowercase.

This is a bit confusing. Maybe it's my late local time, maybe the text. But case insensitivity means TEXT and text are considered to be the same. So onmousemove is the same as onMouSEMove. The example code, however, is using lower camel case. Not lower case. If I change the code to this (small first m):

<div onmouseMove={handleMouseMove}>
      The mouse position is {pos().x} x {pos().y}
</div>

The code window underlines the onmouseMove telling me

Property 'onmouseMove' does not exist on type 'HTMLAttributes'. Did you mean 'onMouseMove'?

But If I use entirely lowercase onmousemove it is not underlined.
The code works either way in the bottom right.

I am not sure what is supposed to be "lowercase" and why when the events on the lesson are not used as lowercase and the code works either way. Or is it meant that to trigger those events manually you need to use the lower case name? But then again, if the events are case insensitive, why do they need to be lower case?
Am I just confused or is the wording off?

Loading the site on my iphone 5s, iOS 12.5.5 results in a blank page with Safari, Opera 3.2.6 (latest), Brave 1.24.

Is it solidjs itself that is not compatible with my hardware or just this website?
I would be happy to learn more about what exaclty it is not supported.

1. go to https://www.solidjs.com/tutorial/bindings_directives
2. click click-outside.tsx
3. click solve

it overwrites main.tsx somehow

edit: whoops duplicate of solidjs/solid-docs#111

There is currently 2 "Rendering" section in the documentation

When toggling one of them, both with open/close because they share the same slug, which can be confusing when navigating the documentation

Maybe one of the two sections should be renamed to avoid this issue ?

The CSS Animations example does not work

To Reproduce
https://www.solidjs.com/examples/cssanimations
Nothing happens on Chrome Version 92.0.4515.159 (Official Build) (64-bit)

I use the Night Eye Chrome extension to view the web in dark mode. (This helps me with a light sensitivity medical condition.) It works well with most websites, generally converting light colors to dark and vice versa, but Solid's website has a few issues:

First, the popup menus don't render with a background, making them difficult to read:

Second, the Hackathon page text is illegible, rendering with dark grey text on almost identical dark blue background.

The latter seems to be caused by the text-gray-700 class. Ah, it sets color: rgb(55 65 81 / var(--tw-text-opacity)) which Night Eye seems to be ignoring, I guess because it doesn't understand the / notation for alpha. If --tw-text-opacity isn't ever changed, perhaps there's a Tailwind option to simplify this? Alternatively, for this specific page, things look good if you omit the rule and leave it black (which gets turned into white with Night Eye).

Curiously, it's the same notation that's causing the first issue, but this time it's not ignored. Night Eye converts bg-gray-200 class's background-color: rgb(229 231 235 / var(--tw-bg-opacity)) into background-color: rgb(229 231 235 / var(--tw-bg-opacity-night-eye)); and then fails to define the variable --tw-bg-opacity-night-eye. Weird.

I hesitated to raise this issue, because at least some of this could be attributed to Night Eye. I'll send this report to them as well. But @davedbase suggested I make an issue, so here it is!

A dark mode as suggested in #129 would effectively fix this for me, as then I could turn off Night Eye for this site. Maybe I should work on that...

The website is staring to grow and our needs are becoming more demanding. Navigation in particular is starting to become more demanding. This recently popped up in a discussion regarding Guides which should be separated into different landing pages: /guides/try-solid, /guides/rendering, /guides/faq etc. etc. The following are proposal to add secondary navigation per sections.

Option 1 (Dropdown)

Not my personal preference and as a matter fact this is more difficult to make feasible on mobile. Aesthetically I like it better though. I'd likely want to change the language selector to follow the same style.

Option 2 (Sectional Navigation)

The downside of this sectional dropdown is that you have to click into the guides in order to see it. Once within the section it makes accessing the individual sections easier. Note that solution can be added in conjunction with Option 1.

Option 3 (Navigation Section)

Similar to Option 2 however the element can be baked into the global site navigation. We could have this pop up on mouse over of the buttons or push down the page header (as it's drawn now).

I'm not in a rush to make a decision, as there's quite a bit of work before this can come into play. Opinions and suggestions are welcomed.

Is your feature request related to a problem? Please describe.

I couldn't easily find a search bar on SolidJS website.
It's neither present in header, nor on the docs page.

Describe the solution you'd like

Easy to access search bar on SolidJS website, probably in header.
The websites of both React and Vue.js have searchbar in the header.

React.js: Search location

React.js: Search suggestions

Vue.js: Search location

Vue.js: Search suggestions

Describe alternatives you've considered

Use online search with keyword with site: operator.
Example link from Google: https://www.google.com/search?q=site%3Asolidjs.com+fragment

When I click an article in the dropdown, the code view doesn't scroll to the top as shown in this example:

It seems like the sidebar anchor isn't display as active when in the section.

There's a minor typo in "Reactivity - On" page.
I'm going to create a PR for that.

Just wanted to share a initial mockup i'm testing for the website. I know maybe i'm late to the party, but just wanted to share some initial thoughts about the use of Call to actions buttons and the reordering of some elements of the website for adding contrast and some color (Of course this is just an opinion and more than open to review in the future).

A link to video titled "React Wednesdays: Let's Learn Solid JS with Ryan Carniato" is broken (unavailable Twitch video):

Here's a working link to the same resource on Kendo UI's YouTube channel: https://www.youtube.com/watch?v=cFasysKU7vk. Since React Wednesday is presented by KendoReact, which is part of Kendo UI, the YouTube channel may as well be considered an official source.

When switching tabs from for example Resources to Tutorial, the page has a noticeably layout shift to the right. This looks to be caused by the lack of page level scrollbar on the tutorials page, while all other pages have a scrollbar.

https://www.loom.com/share/e0ff9435546e44f489b10a832615c63a

I had some weird behavior after trying to use the Solve button in a tutorial with multiple tabs. You can use reset and then switch between both tabs. After pressing Solve, the main tab is selected regardless of which was selected before, and the code for the colored-list component shows for "both" tabs.

While exploring the resources on the website, I noticed that the displayed resources lack any information on their publication dates.

For resources on a rapidly evolving/improving project like Solid, I think it is helpful to show dates--especially Article/Video/Podcast items. Certain topics covered in those resources may stay relevant over time, but information on when they were published still give the readers more useful context. Plus, being able to sort them by publication date would be even better.

I wondered if it wouldn't be worth mentioning explicitly subscribing to more than one signal with on, as in:

createEffect(on([a,b], ([a, b]) => {
  console.log(a, b);
}, { defer: true }));

• https://www.solidjs.com/tutorial/reactivity_on
• https://www.solidjs.com/docs/1.0.0#on

Describe the bug

This is a bug with the docs at solidjs.com, not the library itself. But still important to help the community gain new members and practice using the library.

The editor tabs in the tutorial are not working as expected. If you visit, for example, this url: https://www.solidjs.com/tutorial/props_defaults
you would expect to be able to click greeting.jsx to see the code inside that file, but clicking that tab is unresponsive.

The unresponsive behavior is the same on chrome & firefox.

Your Example Website or App

https://www.solidjs.com/tutorial/props_defaults

Steps to Reproduce the Bug or Issue

1. Go to https://www.solidjs.com/tutorial/props_defaults
2. Click on the tab in the code editor called greeting.jsx
3. Observe that the tab does not respond to the click and doesn't show the code in that file
4. (This seems to be happening for any tabs in the tutorial not just the tab in the example in steps 1 & 2)

Expected behavior

As a user I expected to be able to click the greeting.jsx tab and it would gain focus and show the code within that file.

Screenshots or Videos

Platform

• OS: macOS
• Browser: Observed on Chrome & Firefox
• Version:
  - chrome v100
  - firefox v99

Additional context

No response

Is your feature request related to a problem? Please describe.

The website https://www.solidjs.com/ does not have a dark mode.

Describe the solution you'd like

• Add dark mode for the website.
• Automatically load a dark or light theme based on system preferences.
• Allow the user to manually override their preference using a toggle in the title/navigation bar, and maintain preferred theme between page reloads.

Describe alternatives you've considered

• Reduce brightness of the screen while reading SolidJS website.
• Use a browser extension to enforce dark mode on the website.
• Revisit the website in the mornings when system has light mode enabled.

Started happening after the Sep 21 update from the dev branch with router updated to 0.1.5, i18n updates etc.

I tried to debug - clicking on NavLink list item changes the route, DirectoryMenu receives the new current item in props, firing the effect that calls setShowDirectory(false), but it looks like the listContainer that should receive hidden class is not re-rendered.

Clicking on the <button> with chevron that shows/hides DirectoryMenu directly without involving route change works.

If you just visit this lnk it kinda brokes the whole Solid Site, the site loses interactivity. I think it's because it cannot find that thing in the url section. But if you open up the console you'll see this error that says

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'scrollIntoView')

LINK: https://www.solidjs.com/docs/latest/api#6.-i-really-dislike-jsx%2C-any-chance-of-a-template-dsl%3F-oh%2C-i-see-you-have-tagged-template-literals%2Fhyperscript.-maybe-i-will-use-those

This property is necessary to get performant reactivity on any large object (we don't need to spread it to create a new reference), but it was not mentioned in the tutorial nor in the docs. The docs show typings for it, but no reason for why it might be needed.

Placing its use in the tutorial as well as in the docs would be a massive help.

I'm starting to consider how to improve documentation page rendering and to make this component agnostic of the docs so that it can be used on various pages throughout Solid Site. The following is a rendering of how I plan to implement it for the documentation and guide pages, which will be the only ones to use it for now.

Here's an example of the sidebar for documentation:

Here's an example of sidebar for guides:

The improvements I was hoping to bring with this design:

1. Larger navigation elements
2. Fully open navigation (no expand/collapse mechanic)
3. Three level support

I'm rather sold on the aesthetic however if anyone has any suggestions/concerns, kindly let me know. We'll try to schedule this in once we migrate the website to Solid Start.

Main website:

1. In Tutorial section, The expanded view Doesn't look good on wide screens. It's not bad on medium sizes (768px - 1000px) but for bigger than
   that, everything looks way too much stretched (code blocks are most annoying lol).
2. Also adding syntax highlighting to code blocks in tutorial page would be a good idea.
3. Between lg and xl breakpoints(1024px - 1280px), Guides/Docs pages aren't well designed (too much empty space on the sides) .
4. Navigation dropdown menu on touch screen doesn't go away after it's activated.
5. About sub-nav causes overflow on small screens.

Dev version:

• In Guides/Docs pages there's a f in the arrow button (small screens), I'm not sure if it's intentional (or maybe it is, what do I know).
  Dark mode:

1. ScrollShadow's color is black which shouldn't.
2. box shadows on features section.
3. Code blocks in Guides/Docs have white background which defeats the purpose.
4. When you are in any page other than main page, hovering over nav links causes something awkward to happen (background of the current route changes not the one you are hovering over).
5. The background image on the page (below) in dark mode is so distracting.

I had to click Solve on the The Stores/Create Store tutorial to see what I was overlooking since the instructions weren't enough. The part that was left out was that todos in the JSX needed to be changed to store.todos. In hindsight that makes perfect sense but given this is the first intro to Stores it would help to spell that out.

See: /public/tutorial/lessons/stores_createstore/lesson.md

I browse with JS turned off and I use an extension to turn it on when needed.

That means that solidjs.com greeted me with an empty page, to my great surprise.

It would be interesting to see the changes needed to make this page SSR.

I found these problems with RTL:

• The hero section background needs to be flipped.
• In the playground link in the navbar, the work playground is too close to the external link icon.
• Also in the header, the Github and Twitter links are too close.
• In the hero section and in the footer, the text is aligned to the left.
• In the footer:
  • The English words mess up the whole text.
  • The background should probably be flipped.
  • The sponsor links are left to right.
  • The text "Sponsored by" is missing.
• In the homepage, the arrow mark next to the links is partly on top of the links instead of to their left.
• The text editors in the homepage and in the example page don't actually show the code.
• In the docs, resources, examples and media pages, the page title is aligned to the left.
• In the resources page:
  • the text in the resource listings are still in English but they are in RTL and it messes it up. Number and punctuation are not of the correct side of the text.
  • In the resource types and categories, the text is aligned to the left.
• In the color list in the media page, the color samples are to the right of the color RGB value (not sure if that's intended), and they doesn't have any space between them.

We're hoping to launch an updated Solid website (viewable on https://dev.solidjs.com) that includes not just doc translations, but the entire Solid site. We're only missing Russian and Portuguese right now.

@pheianox and @candidosales you both contributed to the docs I was wondering if you had a moment to handle a very small amount of translations for the site. The docs requiring translation are here: https://github.com/solidjs/solid-site/tree/dev/lang

We can't launch the new site without them unfortunately, so hoping you can help us out =) I'd be very appreciative.

On tutorial pages, clicking "Solve" button on bottom left updates the code to display the "solution" to the tutorial problem. In addition, it appends the ?solved query string to the URL: e.g. https://www.solidjs.com/tutorial/introduction_basics?solved.

When users try to reach the solution directly using the URL, however, the server returns 500 response with the following payload:

"could not find tutorial/introduction_basics/index.html in your content namespace"

After trying with multiple browsers, I noticed that the problem goes away once the solid site is cached. This, however, can still be an issue when the URL with ?solved is shared to someone who has never visited the site before or uses a browser that automatically clears all cached files. E.g. I use Firefox on the "Always use private browsing mode" as my main browser, and see the 500 response every time I try a tutorial page URL with ?solved.

The outcome of changing code in some tutorials happen before I realize it, and I miss it. The workaround I've found is to click on the Output tab and then click back to the Result tab. This reruns Results without losing any code changes. Having a Run button would be more intuitive and help in these situations.

This tutorial is an example of when it helps to rerun after making code changes to see what is going on: https://www.solidjs.com/tutorial/async_suspense_list

You can reproduce this by repeatedly clicking the Tutorial button in the navbar.

I’m unable to scroll the navigation popup menu on mobile (iOS 14, Safari, iPhone 8 Plus in case any of that matters). I’m pretty sure this worked before, so it may be a regression.

I’m happy to look into contributing a fix, but probably won’t have bandwidth to look until this weekend.

Describing the issue :

In the SolidJS website footer, there is a link to the contributors page that shows a wrong route : https://www.solidjs.com/%7Bcontributors%7D

Steps to reproduce :

1. Go to https://www.solidjs.com
2. Go to the footer
3. Click on "core team and dedicated contributors."
4. See the error page (404) due to a wrong route : (/%7Bcontributors%7D)

On my iPhone, the site's navbar takes up a large amount of the screen, as seen in the video below. Unfortunately I can't submit a fix, because I can't reproduce this using Chrome or Firefox on my Windows PC.

Hi folks, I'm looking for some advice on setting up structure for translate the whole Solid Site. Here are a few options I've come up with:

Option 1 - Use JSON files to outline copy throughout the pages then use solid-i18n to manage lang switching.

Option 2 - Use a different format like TOML or YAML because it's easier to write than JSON. Convert them to JSON and use solid-i18n. Example of TOML:

hero = "A declarative, efficient and flexible JavaScript library for building user interfaces."
sub_hero = "Solid is a purely reactive library. It was designed from the groun up with a reactive core. It's influenced by reactive principles developed by previous libraries."

[features.performant]
img = "assets/icons/performant.svg"
title = "Performant"
description = "Consistently tops recognized UI speed and memory utilization benchmarks."

[features.powerful]
img = "assets/icons/powerful.svg"
title = "Powerful"
description = "Composable reactive primitives married with the flexibility of JSX."

[features.pragmatic]
img = "assets/icons/pragmatic.svg"
title = "Pragmatic"
description = "A sensible and tailored API makes developing fun and simple."

[features.productive]
img = "assets/icons/productive.svg"
title = "Productive"
description = "Ergonomics and familiarity make building simple or complex things a breeze."

[quickfeatures.stars]
title = "9.5k+"
subtitle = "Github Stars"
link = "https://star-history.t9t.io/#solidjs/solid"

[quickfeatures.years]
title = "5+ years"
subtitle = "In development"

[quickfeatures.typescript]
title = "TypeScript"
subtitle = "Support"

[quickfeatures.rated]
title = "Top Rated"
subtitle = "In performance"

Option 3 - Find a way to support MDX on the site and manage translations in Markdown and write Solid JSX components into the file as needed.

Other suggestions are more than welcomed.

Currently, all the docs are rendered on a single page, which takes a long time to load. This is especially noticeable on mobile.

My suggestion is to dynamically render the sections on demand instead of rendering all of them on a long page. The content here should be only the content of one section.

When I click the dropdown in Tutorial, it doesn't scroll to the right spot. I have my browser zoomed, so maybe that's why.

In this image, I'm at Bindings/Spreads, but I have to scroll down to get to it:

The Binding/Refs tutorial and the Binding/Forwarding refs tutorial feature a canvas element where the animation could be applied during onMount(). This leads to a behavior that is potentially confusion while completely valid: i.e. the user does not see the animation when the solution is applied because onMount() does not rerun. Forcing the component to be re-mounted, e.g. switching tabs to Output and back to Result, shows the animation.

While this is fair and as expected, some users might still find it confusing that applying the solution does not immediately lead to the animation going in effect. My suggestion is to include some kind of a "refresh" icon/button on "Result" tab that can be used to quickly re-mount the component without leaving the "Result" tab. Alternatively, the tutorial may include some additional text to instruct users to force re-mounting the component.

Footer now

Footer after aligning

Changing Next and Previous buttons (links) to actually show the corresponding tooltip would be very helpful IMO. something similar to :

https://play.tailwindcss.com/0myuZpeqmP?file=css

And also Solve and reset buttons are not styled the same which causes a small layout shift when clicked. especially pt-4 class on solve button.

Hi @userquin, just noticing that the workers tend to pull in all the site chunks/dependencies. That's generally fine but it seems like it's being aggressive and pulling in far more than it actually needs as soon as you hit the site. For example we chunk up our language specific files in a manner that makes them easy to deploy.

The issue is that the site is now pulling down 50mb of data for every user.

Is there a way to dynamically/selectively only pull the language chunks that are relevant? Perhaps we need to consider a different strategy overall to what's available for offline access?

E.g.: https://www.solidjs.com/tutorial/stores_immutable