Skip to content

Commit 0ddb30d

Browse files
davedbasedavedbase
committed
Merge branch 'dev' of https://github.com/solidjs/solid-site into dev
2 parents 5ed0828 + 8032239 commit 0ddb30d

18 files changed

Lines changed: 149 additions & 121 deletions

‎package.json‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,11 +49,10 @@
4949
"solid-dismiss": "^1.7.122",
5050
"solid-heroicons": "<3.0.0",
5151
"solid-js": "1.8.16",
52-
"solid-meta": "^0.28.1",
52+
"@solidjs/meta": "^0.29.3",
5353
"solid-repl": "^0.25.0",
5454
"solid-social": "^0.9.6",
55-
"solid-transition-group": "^0.2.3",
56-
"solid-utils": "^0.8.1"
55+
"solid-transition-group": "^0.2.3"
5756
},
5857
"devDependencies": {
5958
"@aminya/minijson": "^0.6.2",

‎public/examples/ethasketch.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@
33
{
44
"name": "main",
55
"type": "tsx",
6-
"content": "// Project idea from https://www.theodinproject.com/paths/foundations/courses/foundations/lessons/etch-a-sketch-project\nimport { render } from \"solid-js/web\";\nimport { createSignal, createMemo, Index } from \"solid-js\";\n\nimport \"./styles.css\";\n\nconst maxGridPixelWidth = 500;\n\nfunction randomHexColorString(): string {\n return \"#\" + Math.floor(Math.random() * 16777215).toString(16);\n}\n\nfunction clampGridSideLength(newSideLength: number): number {\n return Math.min(Math.max(newSideLength, 0), 100);\n}\n\nfunction EtchASketch() {\n const [gridSideLength, setGridSideLength] = createSignal(10);\n const gridTemplateString = createMemo(\n () =>\n `repeat(${gridSideLength()}, ${maxGridPixelWidth / gridSideLength()}px)`\n );\n\n return (\n <>\n <div>\n <label>Grid Side Length: </label>\n <input\n type=\"number\"\n value={gridSideLength()}\n onInput={(e) =>\n setGridSideLength(\n clampGridSideLength(e.currentTarget.valueAsNumber)\n )\n }\n />\n </div>\n <div\n style={{\n display: \"grid\",\n \"grid-template-rows\": gridTemplateString(),\n \"grid-template-columns\": gridTemplateString(),\n }}\n >\n <Index\n each={Array.from({ length: gridSideLength() ** 2 })}\n fallback={\"Input a grid side length.\"}\n >\n {() => (\n <div\n class=\"cell\"\n onMouseEnter={(event) => {\n const eventEl = event.currentTarget;\n\n eventEl.style.backgroundColor = randomHexColorString();\n\n setTimeout(() => {\n eventEl.style.backgroundColor = \"initial\";\n }, 500);\n }}\n ></div>\n )}\n </Index>\n </div>\n </>\n );\n}\n\nrender(() => <EtchASketch />, document.getElementById(\"app\"));\n"
6+
"content": "// Project idea from https://www.theodinproject.com/paths/foundations/courses/foundations/lessons/etch-a-sketch-project\nimport { render } from \"solid-js/web\";\nimport { createSignal, createMemo, Index } from \"solid-js\";\n\nimport \"./styles.css\";\n\nconst maxGridPixelWidth = 500;\n\nfunction randomHexColorString(): string {\n return \"#\" + Math.floor(Math.random() * 16777215).toString(16);\n}\n\nfunction clampGridSideLength(newSideLength: number): number {\n return Math.min(Math.max(newSideLength, 0), 100);\n}\n\nfunction EtchASketch() {\n const [gridSideLength, setGridSideLength] = createSignal(10);\n const gridTemplateString = createMemo(\n () =>\n `repeat(${gridSideLength()}, ${maxGridPixelWidth / gridSideLength()}px)`\n );\n\n return (\n <>\n <div>\n <label>Grid Side Length: </label>\n <input\n type=\"number\"\n value={gridSideLength()}\n onInput={(e) =>\n setGridSideLength(\n clampGridSideLength(e.currentTarget.valueAsNumber)\n )\n }\n />\n </div>\n <div\n style={{\n display: \"grid\",\n \"grid-template-rows\": gridTemplateString(),\n \"grid-template-columns\": gridTemplateString(),\n }}\n >\n <Index\n each={Array.from({ length: gridSideLength() ** 2 })}\n fallback={\"Input a grid side length.\"}\n >\n {() => (\n <div\n class=\"cell\"\n onMouseEnter={(event) => {\n const eventEl = event.currentTarget;\n\n eventEl.style.backgroundColor = randomHexColorString();\n\n setTimeout(() => {\n eventEl.style.backgroundColor = \"initial\";\n }, 500);\n }}\n />\n )}\n </Index>\n </div>\n </>\n );\n}\n\nrender(() => <EtchASketch />, document.getElementById(\"app\")!);\n"
77
},
88
{
99
"name": "styles",
1010
"type": "css",
1111
"content": ".cell {\n outline: 1px solid #1f1f1f;\n}\n\n.dark .cell {\n outline: 1px solid #efefef;\n}\n"
1212
}
1313
]
14-
}
14+
}

‎public/examples/todos.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
{
66
"name": "main",
77
"type": "tsx",
8-
"content": "import { createSignal, batch, For } from \"solid-js\";\nimport { render } from \"solid-js/web\";\nimport { createLocalStore, removeIndex } from \"./utils\";\n\ntype TodoItem = { title: string; done: boolean };\n\nconst App = () => {\n const [newTitle, setTitle] = createSignal(\"\");\n const [todos, setTodos] = createLocalStore<TodoItem[]>(\"todos\", []);\n\n const addTodo = (e: SubmitEvent) => {\n e.preventDefault();\n batch(() => {\n setTodos(todos.length, {\n title: newTitle(),\n done: false,\n });\n setTitle(\"\");\n });\n };\n\n return (\n <>\n <h3>Simple Todos Example</h3>\n <form onSubmit={addTodo}>\n <input\n placeholder=\"enter todo and click +\"\n required\n value={newTitle()}\n onInput={(e) => setTitle(e.currentTarget.value)}\n />\n <button>+</button>\n </form>\n <For each={todos}>\n {(todo, i) => (\n <div>\n <input\n type=\"checkbox\"\n checked={todo.done}\n onChange={(e) => setTodos(i(), \"done\", e.currentTarget.checked)}\n />\n <input\n type=\"text\"\n value={todo.title}\n onChange={(e) => setTodos(i(), \"title\", e.currentTarget.value)}\n />\n <button onClick={() => setTodos((t) => removeIndex(t, i()))}>\n x\n </button>\n </div>\n )}\n </For>\n </>\n );\n};\n\nrender(App, document.getElementById(\"app\")!);\n"
8+
"content": "import { createSignal, batch, For } from \"solid-js\";\nimport { render } from \"solid-js/web\";\nimport { createLocalStore, removeIndex } from \"./utils\";\n\ntype TodoItem = { title: string; done: boolean };\n\nconst App = () => {\n const [newTitle, setTitle] = createSignal(\"\");\n const [todos, setTodos] = createLocalStore<TodoItem[]>(\"todo list\", []);\n\n const addTodo = (e: SubmitEvent) => {\n e.preventDefault();\n batch(() => {\n setTodos(todos.length, {\n title: newTitle(),\n done: false,\n });\n setTitle(\"\");\n });\n };\n\n return (\n <>\n <h3>Simple Todos Example</h3>\n <form onSubmit={addTodo}>\n <input\n placeholder=\"enter todo and click +\"\n required\n value={newTitle()}\n onInput={(e) => setTitle(e.currentTarget.value)}\n />\n <button>+</button>\n </form>\n <For each={todos}>\n {(todo, i) => (\n <div>\n <input\n type=\"checkbox\"\n checked={todo.done}\n onChange={(e) => setTodos(i(), \"done\", e.currentTarget.checked)}\n />\n <input\n type=\"text\"\n value={todo.title}\n onChange={(e) => setTodos(i(), \"title\", e.currentTarget.value)}\n />\n <button onClick={() => setTodos((t) => removeIndex(t, i()))}>\n x\n </button>\n </div>\n )}\n </For>\n </>\n );\n};\n\nrender(App, document.getElementById(\"app\")!);\n"
99
},
1010
{
1111
"name": "utils",

‎src/App.tsx‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Suspense } from 'solid-js';
22
import { Router } from '@solidjs/router';
3+
import { MetaProvider } from '@solidjs/meta';
34
import { routes } from './routes';
45
import Header from './components/Header';
56
import { AppContextProvider } from './AppContext';
@@ -10,24 +11,26 @@ export const App = () => {
1011
preventSmoothScrollOnTabbing();
1112

1213
return (
13-
<main class="min-h-screen">
14-
<Router root={(props)=>(
15-
<AppContextProvider>
16-
<Header />
17-
{/* two div wrappers to make page animation work and performant */}
18-
<div id="main-content">
19-
<div>
20-
{/* <TransitionRoutes> */}
21-
<Suspense>
22-
{props.children}
23-
</Suspense>
24-
{/* </TransitionRoutes> */}
14+
<MetaProvider>
15+
<main class="min-h-screen">
16+
<Router root={(props)=>(
17+
<AppContextProvider>
18+
<Header />
19+
{/* two div wrappers to make page animation work and performant */}
20+
<div id="main-content">
21+
<div>
22+
{/* <TransitionRoutes> */}
23+
<Suspense>
24+
{props.children}
25+
</Suspense>
26+
{/* </TransitionRoutes> */}
27+
</div>
2528
</div>
26-
</div>
27-
</AppContextProvider>
28-
)}>
29-
{routes}
30-
</Router>
31-
</main>
29+
</AppContextProvider>
30+
)}>
31+
{routes}
32+
</Router>
33+
</main>
34+
</MetaProvider>
3235
);
3336
};

‎src/AppContext.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
useContext,
1313
} from 'solid-js';
1414
import { createStore } from 'solid-js/store';
15-
import { Meta, Title } from 'solid-meta';
15+
import { Meta, Title } from '@solidjs/meta';
1616

1717
// en dictionary is loaded by default
1818
import { dict as en_dict } from '../lang/en/en';

‎src/main.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1+
import { render } from "solid-js/web";
12
import './assets/main.css';
23

34
// import { registerSW } from 'virtual:pwa-register';
4-
import { createApp } from 'solid-utils';
5-
import { MetaProvider } from 'solid-meta';
6-
75
import { App } from './App';
86

9-
createApp(App).use(MetaProvider).mount('#app');
7+
render(() => <App />, document.getElementById("app"));
108

119
// Register service worker
1210
// registerSW({ onOfflineReady() {} });

‎src/pages/404.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Component } from 'solid-js';
2+
import { Title } from '@solidjs/meta';
23
import { Icon } from 'solid-heroicons';
34
import { emojiSad } from 'solid-heroicons/outline';
45
import { useAppState } from '../AppContext';
@@ -8,6 +9,7 @@ const FourOhFour: Component = () => {
89

910
return (
1011
<div>
12+
<Title>404 | SolidJS</Title>
1113
<div class="flex flex-col justify-center content-center text-center rounded-2xl m-10 bg-gray-100 dark:bg-gray-800 py-10 text-solid-medium">
1214
<div class="my-10 py-10">
1315
<Icon

‎src/pages/Blog.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Component, For } from 'solid-js';
22
import Footer from '../components/Footer';
33
import { A } from '@solidjs/router';
4+
import { Title } from '@solidjs/meta';
45
import { useRouteReadyState } from '../utils/routeReadyState';
56
import type { BlogData } from './Blog.data';
67

@@ -16,6 +17,7 @@ const Blog: Component<{data:BlogData}> = (props) => {
1617

1718
return (
1819
<div class="flex flex-col">
20+
<Title>Blog | SolidJS</Title>
1921
<div class="my-2 lg:my-10 pt-5 pb-10 px-3 lg:px-12 container">
2022
<div class="mb-10 lg:flex justify-center">
2123
<div class="space-y-10">

‎src/pages/BlogArticle.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import Footer from '../components/Footer';
55
import { useAppState } from '../AppContext';
66
import { YouTube, Tweet, Twitch, Spotify } from 'solid-social';
77
import type { BlogArticleData } from './BlogArticle.data';
8+
import { Title } from '@solidjs/meta';
89

910
export const BlogArticle: Component<{data:BlogArticleData}> = (props) => {
1011
const data = props.data;
@@ -15,6 +16,7 @@ export const BlogArticle: Component<{data:BlogArticleData}> = (props) => {
1516

1617
return (
1718
<div class="flex flex-col">
19+
<Title>{data.details.title} | SolidJS</Title>
1820
<div class="my-2 lg:my-10 pt-5 pb-10 px-3 lg:px-12 container">
1921
<div class="mb-10 lg:flex justify-center">
2022
<div class="space-y-10 px-4 lg:px-0">

‎src/pages/Contributors.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Component, For, Show } from 'solid-js';
2+
import { Title } from '@solidjs/meta';
23
import github from '../assets/github.svg';
34
import { ContributorsDataProps } from './Contributors.data';
45
import Footer from '../components/Footer';
@@ -70,6 +71,7 @@ const Contributors: Component<{data:ContributorsDataProps}> = (props) => {
7071

7172
return (
7273
<div class="flex flex-col relative">
74+
<Title>Team and Contributors | SolidJS</Title>
7375
<div class="px-3 lg:px-12 container my-10">
7476
<div class="lg:grid my-8 lg:grid-cols-12 space-y-10 gap-20">
7577
<div class="col-span-6 flex flex-col space-y-10">

0 commit comments

Comments
 (0)