22 | {/* */}
23 | {props.children}
24 | {/* */}
25 |
26 |
21 |
27 | \n
\n \n );\n};\n\nrender(App, document.getElementById(\"app\"));"
6 | }
7 | ]
8 | }
9 |
--------------------------------------------------------------------------------
/public/examples/counter.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Counter",
3 | "description": "A simple standard counter example",
4 | "files": [
5 | {
6 | "name": "main",
7 | "content": [
8 | "import { createSignal, onCleanup } from \"solid-js\";",
9 | "import { render } from \"solid-js/web\";",
10 | "",
11 | "const CountingComponent = () => {",
12 | "\tconst [count, setCount] = createSignal(0);",
13 | "\tconst interval = setInterval(",
14 | "\t\t() => setCount(c => c + 1),",
15 | "\t\t1000",
16 | "\t);",
17 | "\tonCleanup(() => clearInterval(interval));",
18 | "\treturn {JSON.stringify(user(), null, 2)}\n Count value is {count()}
;",
19 | "};",
20 | "",
21 | "render(() => {count()}
\n \n \n \n );\n};\n\nconst App = () => (\nWelcome to this Simple Routing Example
\nClick the links in the Navigation above to load different routes.
\n \n);\n\nconst Profile: Component = () => (\n <>\nYour Profile
\nThis section could be about you.
\n \n);\n\nconst Settings: Component = () => (\n <>\nSettings
\nAll that configuration you never really ever want to look at.
\n \n);\n\nconst App = () => {\n const matches = createRouteHandler();\n return (\n <>\n \n
17 |
21 |
22 | );
23 | };
24 |
25 | export default PageLoadingBar;
26 |
--------------------------------------------------------------------------------
/src/components/Nav/LanguageSelector.tsx:
--------------------------------------------------------------------------------
1 | import { ParentComponent } from 'solid-js';
2 |
3 | export const LanguageSelector: ParentComponent<{ ref: HTMLButtonElement }> = (props) => (
4 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/components/Nav/ModeToggle.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'solid-heroicons';
2 | import { moon, sun } from 'solid-heroicons/outline';
3 | import { VoidComponent } from 'solid-js';
4 | import { useAppState } from '../../AppContext';
5 |
6 | export const ModeToggle: VoidComponent = () => {
7 | const context = useAppState();
8 | const { t } = context;
9 | const title = () => (context.isDark ? t('global.light_mode') : t('global.dark_mode'));
10 |
11 | return (
12 |
25 | );
26 | };
27 |
--------------------------------------------------------------------------------
/src/components/ReplTab.tsx:
--------------------------------------------------------------------------------
1 | import { batch, Component, createSignal, ErrorBoundary } from 'solid-js';
2 | import { Tab } from 'solid-repl';
3 | import Repl from 'solid-repl/dist/repl';
4 | import { compiler, formatter, linter } from './setupRepl';
5 | import { useAppState } from '../AppContext';
6 |
7 | let count = 0;
8 | const OldRepl: Component<{ tabs: Tab[] }> = (props) => {
9 | count++;
10 | const context = useAppState();
11 | const initialTabs = props.tabs;
12 | const [tabs, setTabs] = createSignal(initialTabs);
13 | const [current, setCurrent] = createSignal(initialTabs[0].name);
14 |
15 | return (
16 |
12 | 404 | SolidJS
13 |
29 | );
30 | };
31 |
32 | export default FourOhFour;
33 |
--------------------------------------------------------------------------------
/src/pages/Articles/solidhack-2024-announcement.mdx:
--------------------------------------------------------------------------------
1 | The Solid Core Team, Solid DX Team as well as our generous corporate sponsors [Netlify](https://www.netlify.com)
2 | and [Sentry](https://sentry.io/) are proud to announce the continuation of SolidHack.
3 |
4 | The inaugral SolidHack event was so successful that we decided to bring it back this
5 | year. A lot has changed since the previous event. Solid and the ecosystem have matured
6 | considerably and SolidStart is now 1.0. It's an ideal time to be working with Solid!
7 | We're giving the talented developers in our community an incredible opportunity to
8 | show what they got and win prize money.
9 |
10 | Additional contest details regarding the event will be announced October 1st. Visit the
11 | [SolidHack website](https://hack.solidjs.com/) to learn more!
12 |
--------------------------------------------------------------------------------
/src/pages/Articles/welcome-to-the-solid-blog.mdx:
--------------------------------------------------------------------------------
1 | Hello and welcome to our new blog platform!
2 |
3 | SolidJS is a community built on strong communication and teamwork. It's only right that we have a blog for our growing community that helps with sharing announcements, publish recent ideas and even bring valuable insights and learnings from the broader community.
4 |
5 | Ryan and other members will continue publishing articles you've come to love about SolidJS and broader research via dev.to, Medium and other outlets. We'll frequently link to them here and make you aware of the latest so you can keep coming to this blog for the absolute latest.
6 |
7 | On behalf of the the entire Solid Core Team, thanks for reading. We look forward to a solid future. 😉
8 |
9 | Dave
10 |
--------------------------------------------------------------------------------
/src/pages/Blog.tsx:
--------------------------------------------------------------------------------
1 | import { type Component, For } from 'solid-js';
2 | import Footer from '../components/Footer';
3 | import { A } from '@solidjs/router';
4 | import { Title } from '@solidjs/meta';
5 | import { useRouteReadyState } from '../utils/routeReadyState';
6 | import type { BlogData } from './Blog.data';
7 |
8 | const Blog: Component<{ data: BlogData }> = (props) => {
9 | const data = props.data;
10 |
11 | useRouteReadyState();
12 |
13 | const sortedArticles = Object.entries(data.articles).sort(
14 | (entry1, entry2) => entry2[1].date - entry1[1].date,
15 | );
16 |
17 | return (
18 |
14 |
28 |
15 |
27 | {t('global.404.header')}
20 |21 | 22 | @solidjs/router 23 | {' '} 24 | {t('global.404.body')} 25 |
26 |
19 | Blog | SolidJS
20 |
45 | );
46 | };
47 |
48 | export default Blog;
49 |
--------------------------------------------------------------------------------
/src/pages/BlogArticle.data.ts:
--------------------------------------------------------------------------------
1 | import { createResource } from 'solid-js';
2 | import type { RouteLoadFunc } from '@solidjs/router';
3 | import { type BlogInfo, list, type MDXComponent } from './Blog.data';
4 |
5 | export interface BlogArticleData {
6 | loading: boolean;
7 | slug: string;
8 | details: BlogInfo;
9 | article?: MDXComponent;
10 | }
11 |
12 | export const BlogArticleData: RouteLoadFunc
21 |
43 |
44 |
22 |
42 |
23 |
24 | {([id, article]) => (
25 |
29 | 
30 |
40 |
41 | 31 | {article.title} 32 |
33 | {article.description} 34 |
35 | By {article.author} on {new Date(article.date).toDateString()}
36 |
37 |
38 | )}
39 |