solidjs / solid-site Goto Github PK
View Code? Open in Web Editor NEWCode that powers the SolidJS.com platform.
Home Page: https://www.solidjs.com
Code that powers the SolidJS.com platform.
Home Page: https://www.solidjs.com
click-outside.tsx
solve
it overwrites main.tsx
somehow
edit: whoops duplicate of solidjs/solid-docs#111
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.
Main website:
lg
and xl
breakpoints(1024px - 1280px), Guides/Docs pages aren't well designed (too much empty space on the sides) .Dev version:
f
in the arrow button (small screens), I'm not sure if it's intentional (or maybe it is, what do I know).A link to video titled "React Wednesdays: Let's Learn Solid JS with Ryan Carniato" is broken (unavailable Twitch video):
solid-site/src/pages/Resources/Videos.data.ts
Lines 118 to 128 in f4c4ea4
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.
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.
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 ?
I found these problems with RTL:
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).
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:
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.
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 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.
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.
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.
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.
https://www.solidjs.com/tutorial/props_defaults
https://www.solidjs.com/tutorial/props_defaults
greeting.jsx
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.
No response
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.
This image illustrates the problem:
This seems to be caused by the space-y-2
TailwindCSS class applied to the container <div>
element:
solid-site/src/components/Benchmarks.tsx
Line 98 in 80d53d5
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.
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.
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.
Line 133 in bfb2862
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 }));
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.
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.
I couldn't easily find a search bar on SolidJS website.
It's neither present in header, nor on the docs page.
Easy to access search bar on SolidJS website, probably in header.
The websites of both React and Vue.js have searchbar in the header.
Use online search with keyword
with site:
operator.
Example link from Google: https://www.google.com/search?q=site%3Asolidjs.com+fragment
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.
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 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
There's a minor typo in "Reactivity - On" page.
I'm going to create a PR for that.
The website https://www.solidjs.com/ does not have a dark mode.
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.
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.
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)
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.
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?
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.
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.
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.
Just took a look through the tutorial. Reads well and clearly I think - great job! Some other notes I made along the way:
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.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.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?
In the SolidJS website footer, there is a link to the contributors page that shows a wrong route : https://www.solidjs.com/%7Bcontributors%7D
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 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
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')
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.