Skip to content

Commit

Permalink
add nested layout example
Browse files Browse the repository at this point in the history
  • Loading branch information
Blankeos committed Jun 18, 2024
1 parent 33eadc7 commit e6a38ef
Show file tree
Hide file tree
Showing 14 changed files with 3,353 additions and 1,772 deletions.
10 changes: 10 additions & 0 deletions examples/basic/components/Counter.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { createSignal } from "solid-js";

export function Counter() {
const [count, setCount] = createSignal(0);
return (
<button onClick={() => setCount((count) => count + 1)}>
Counter {count()}
</button>
);
}
4 changes: 2 additions & 2 deletions examples/basic/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
},
"dependencies": {
"node-fetch": "^3.3.2",
"solid-js": "^1.8.16",
"vike": "^0.4.168",
"solid-js": "^1.8.17",
"vike": "^0.4.176",
"vike-solid": "link:vike-solid"
},
"devDependencies": {
Expand Down
1 change: 0 additions & 1 deletion examples/basic/pages/+Layout.ts

This file was deleted.

76 changes: 76 additions & 0 deletions examples/basic/pages/+Layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import "../layouts/style.css";
import logoUrl from "../assets/logo.svg";
import { Link } from "../components/Link.js";
import type { JSX } from "solid-js";

export function Layout(props: { children?: JSX.Element }) {
return (
<div
style={{
display: "flex",
"max-width": "900px",
margin: "auto",
}}
>
<Sidebar>
<Logo />
<Link href="/">Welcome</Link>
<Link href="/star-wars">Data Fetching</Link>
<Link href="/without-ssr">Without SSR</Link>
<Link href="/starship">Nested Layout 1</Link>
<Link href="/stardust">Nested Layout 2</Link>
</Sidebar>
<Content>{props.children}</Content>
</div>
);
}

function Sidebar(props: { children: JSX.Element }) {
return (
<div
id="sidebar"
style={{
padding: "20px",
"flex-shrink": 0,
display: "flex",
"flex-direction": "column",
"line-height": "1.8em",
"border-right": "2px solid #eee",
}}
>
{props.children}
</div>
);
}

function Content(props: { children: JSX.Element }) {
return (
<div id="page-container">
<div
id="page-content"
style={{
padding: "20px",
"padding-bottom": "50px",
"min-height": "100vh",
}}
>
{props.children}
</div>
</div>
);
}

function Logo() {
return (
<div
style={{
"margin-top": "20px",
"margin-bottom": "10px",
}}
>
<a href="/">
<img src={logoUrl} height={64} width={64} />
</a>
</div>
);
}
2 changes: 1 addition & 1 deletion examples/basic/pages/+config.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type { Config } from "vike/types";
import vikeSolid from "vike-solid/config";
import type { Config } from "vike/types";

// Default config (can be overridden by pages)
export default {
Expand Down
55 changes: 55 additions & 0 deletions examples/basic/pages/stardust/+Layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
export { Layout };

import { createSignal, FlowProps } from "solid-js";

function Layout(props: FlowProps) {
return (
<>
<h1>Star Dust ✨</h1>
<p>
<b>
This page uses the layout <code>/pages/+Layout.tsx</code> with a
nested layout <code>/pages/stardust/+Layout.tsx</code>.
</b>
</p>
<p>
This merely tests if Solid detects a "change" in the layout array
despite being the same length.
</p>
<p>
<b>State is preserved upon navigating within the nested layout.</b>{" "}
<Counter />
</p>
<br />
<div
style={{
"margin-top": "20px",
border: "1px solid black",
padding: "10px 40px",
}}
>
{props.children}
</div>
</>
);
}

function Link(props: any) {
// We set `keep-scroll-position` to tell Vike to preserve the current scroll position
return (
<a
keep-scroll-position=""
style={{ marginRight: 10, ...props.style }}
{...props}
/>
);
}

function Counter() {
const [count, setCount] = createSignal(0);
return (
<button type="button" onClick={() => setCount((count) => count + 1)}>
Counter {count()}
</button>
);
}
15 changes: 15 additions & 0 deletions examples/basic/pages/stardust/+Page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
export { Page };

function Page() {
return (
<>
<h2>Overview</h2>
<p>
Star Dust is a revolutionary new technology that has the potential to
change the way we explore and settle the vast expanse of our galaxy. By
radically reducing the cost of sending payloads to space, Star Dust is
helping SpaceX to achieve financial prosperity.
</p>
</>
);
}
150 changes: 150 additions & 0 deletions examples/basic/pages/starship/+Layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@
export { Layout };

import { createSignal, FlowProps } from "solid-js";

function Layout(props: FlowProps) {
return (
<>
<h1>Starship 🚀</h1>
<p>
<b>
This page uses the layout <code>/pages/+Layout.tsx</code> with a
nested layout <code>/pages/starship/+Layout.tsx</code>.
</b>
</p>
<p>
<b>
State is preserved upon navigating within the nested layout. Click on
the counter then on the links below: observe how the counter state is
preserved.
</b>{" "}
<Counter />
</p>
<br />
<div>
<Link href="/starship">Overview</Link>{" "}
<Link href="/starship/reviews">Reviews</Link>{" "}
<Link href="/starship/spec">Tech Spec</Link>
</div>
<div
style={{
"margin-top": "20px",
border: "1px solid black",
padding: "10px 40px",
}}
>
{props.children}
</div>
<br />
<p>
<b>
The scroll position is preserved when navigating the nested layout.
</b>
</p>
<DummyText />
</>
);
}

function Link(props: any) {
// We set `keep-scroll-position` to tell Vike to preserve the current scroll position
return (
<a
keep-scroll-position=""
style={{ marginRight: 10, ...props.style }}
{...props}
/>
);
}

function Counter() {
const [count, setCount] = createSignal(0);
return (
<button type="button" onClick={() => setCount((count) => count + 1)}>
Counter {count()}
</button>
);
}

function DummyText() {
return (
<>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Donec quam felis,
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
arcu.
</p>
<p>
In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam
dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean
leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam
lorem ante, dapibus in, viverra quis, feugiat a, tellus.
</p>
<p>
Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean
imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper
ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus
eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing
sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar,
hendrerit id, lorem.
</p>
<p>
Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero
venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros
faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec
sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue
velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate
eleifend sapien.
</p>
<p>
Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.
Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit
fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.
Nam pretium turpis et arcu.
</p>
<p>
Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis,
ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a,
consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus
ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat
pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum.
</p>
<p>
Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat,
pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in
justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec
neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi.
Curabitur ligula sapien, tincidunt non, euismod vitae, posuere
imperdiet, leo.
</p>
<p>
Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis
vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus
velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit
erat euismod orci, ac placerat dolor lectus quis orci. Phasellus
consectetuer vestibulum elit.
</p>
<p>
Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.
Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque
posuere. Praesent turpis. Aenean posuere, tortor sed cursus feugiat,
nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus.
Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam
sagittis.
</p>
<p>
Suspendisse pulvinar, augue ac venenatis condimentum, sem libero
volutpat nibh, nec pellentesque velit pede quis nunc. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas
vestibulum mollis diam. Pellentesque ut neque.
</p>
</>
);
}
15 changes: 15 additions & 0 deletions examples/basic/pages/starship/+Page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
export { Page };

function Page() {
return (
<>
<h2>Overview</h2>
<p>The Starship will, at term, repalce all SpaceX's rocket models.</p>
<p>The mission: Make life multi planetary.</p>
<p>
Starship drastically reduces the cost of sending payload to space,
ensuring SpaceX's financial prosperity.
</p>
</>
);
}
17 changes: 17 additions & 0 deletions examples/basic/pages/starship/reviews/+Page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
export { Page };

function Page() {
return (
<>
<h2>Reviews</h2>
<p>
"The Starship brought me and my family to Mars safely." -- Anonymous
Family
</p>
<p>
"A handful of Starships was enough to set up SkyNet. It worked like a
charm." -- Skynet Research
</p>
</>
);
}
18 changes: 18 additions & 0 deletions examples/basic/pages/starship/spec/+Page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
export { Page };

function Page() {
return (
<>
<h2>Spec</h2>
<pre>
{[
"HEIGHT 50 m / 164 ft",
"DIAMETER 9 m / 30 ft",
"PROPELLANT CAPACITY 1200 t / 2.6 Mlb",
"THRUST 1500 tf / 3.2Mlbf",
"PAYLOAD CAPACITY 100-150 t orbit dependent",
].join("\n")}
</pre>
</>
);
}
Loading

0 comments on commit e6a38ef

Please sign in to comment.