this repo has no description
atmosphereconf-vods.wisp.place/
link
+39
-200
+5
-199
README.md
+5
-199
README.md
···
1
-
Welcome to your new TanStack Start app!
2
-
3
-
# Getting Started
4
-
5
-
To run this application:
6
-
7
-
```bash
8
-
npm install
9
-
npm run dev
10
-
```
11
-
12
-
# Building For Production
13
-
14
-
To build this application for production:
15
-
16
-
```bash
17
-
npm run build
18
-
```
19
-
20
-
## Testing
21
-
22
-
This project uses [Vitest](https://vitest.dev/) for testing. You can run the tests with:
23
-
24
-
```bash
25
-
npm run test
26
-
```
27
-
28
-
## Styling
29
-
30
-
This project uses [Tailwind CSS](https://tailwindcss.com/) for styling.
31
-
32
-
### Removing Tailwind CSS
33
-
34
-
If you prefer not to use Tailwind CSS:
35
-
36
-
1. Remove the demo pages in `src/routes/demo/`
37
-
2. Replace the Tailwind import in `src/styles.css` with your own styles
38
-
3. Remove `tailwindcss()` from the plugins array in `vite.config.ts`
39
-
4. Uninstall the packages: `npm install @tailwindcss/vite tailwindcss -D`
40
-
41
-
## Linting & Formatting
42
-
43
-
This project uses [eslint](https://eslint.org/) and [oxfmt](https://oxc.rs/docs/guide/usage/oxfmt.html) for linting and formatting. Eslint is configured using [tanstack/eslint-config](https://tanstack.com/config/latest/docs/eslint). The following scripts are available:
44
-
45
-
```bash
46
-
npm run lint
47
-
npm run format
48
-
npm run format:check
49
-
npm run check
50
-
```
51
-
52
-
## Routing
53
-
54
-
This project uses [TanStack Router](https://tanstack.com/router) with file-based routing. Routes are managed as files in `src/routes`.
55
-
56
-
### Adding A Route
57
-
58
-
To add a new route to your application just add a new file in the `./src/routes` directory.
59
-
60
-
TanStack will automatically generate the content of the route file for you.
61
-
62
-
Now that you have two routes you can use a `Link` component to navigate between them.
63
-
64
-
### Adding Links
65
-
66
-
To use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/react-router`.
67
-
68
-
```tsx
69
-
import { Link } from "@tanstack/react-router";
70
-
```
71
-
72
-
Then anywhere in your JSX you can use it like so:
73
-
74
-
```tsx
75
-
<Link to="/about">About</Link>
76
-
```
77
-
78
-
This will create a link that will navigate to the `/about` route.
79
-
80
-
More information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/react/api/router/linkComponent).
81
-
82
-
### Using A Layout
83
-
84
-
In the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route will appear in all the routes. The route content will appear in the JSX where you render `{children}` in the `shellComponent`.
85
-
86
-
Here is an example layout that includes a header:
87
-
88
-
```tsx
89
-
import { HeadContent, Scripts, createRootRoute } from "@tanstack/react-router";
90
-
91
-
export const Route = createRootRoute({
92
-
head: () => ({
93
-
meta: [
94
-
{ charSet: "utf-8" },
95
-
{ name: "viewport", content: "width=device-width, initial-scale=1" },
96
-
{ title: "My App" },
97
-
],
98
-
}),
99
-
shellComponent: ({ children }) => (
100
-
<html lang="en">
101
-
<head>
102
-
<HeadContent />
103
-
</head>
104
-
<body>
105
-
<header>
106
-
<nav>
107
-
<Link to="/">Home</Link>
108
-
<Link to="/about">About</Link>
109
-
</nav>
110
-
</header>
111
-
{children}
112
-
<Scripts />
113
-
</body>
114
-
</html>
115
-
),
116
-
});
117
-
```
118
-
119
-
More information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#layouts).
120
-
121
-
## Server Functions
122
-
123
-
TanStack Start provides server functions that allow you to write server-side code that seamlessly integrates with your client components.
124
-
125
-
```tsx
126
-
import { createServerFn } from "@tanstack/react-start";
127
-
128
-
const getServerTime = createServerFn({
129
-
method: "GET",
130
-
}).handler(async () => {
131
-
return new Date().toISOString();
132
-
});
133
-
134
-
// Use in a component
135
-
function MyComponent() {
136
-
const [time, setTime] = useState("");
137
-
138
-
useEffect(() => {
139
-
getServerTime().then(setTime);
140
-
}, []);
141
-
142
-
return <div>Server time: {time}</div>;
143
-
}
144
-
```
145
-
146
-
## API Routes
147
-
148
-
You can create API routes by using the `server` property in your route definitions:
149
-
150
-
```tsx
151
-
import { createFileRoute } from "@tanstack/react-router";
152
-
import { json } from "@tanstack/react-start";
153
-
154
-
export const Route = createFileRoute("/api/hello")({
155
-
server: {
156
-
handlers: {
157
-
GET: () => json({ message: "Hello, World!" }),
158
-
},
159
-
},
160
-
});
161
-
```
162
-
163
-
## Data Fetching
164
-
165
-
There are multiple ways to fetch data in your application. You can use TanStack Query to fetch data from a server. But you can also use the `loader` functionality built into TanStack Router to load the data for a route before it's rendered.
1
+
# AtmosphereConf VODs
166
2
167
-
For example:
3
+
A simple app to view the videos from AtmosphereConf 2026
168
4
169
-
```tsx
170
-
import { createFileRoute } from "@tanstack/react-router";
5
+
## AI Disclaimer
171
6
172
-
export const Route = createFileRoute("/people")({
173
-
loader: async () => {
174
-
const response = await fetch("https://swapi.dev/api/people");
175
-
return response.json();
176
-
},
177
-
component: PeopleComponent,
178
-
});
179
-
180
-
function PeopleComponent() {
181
-
const data = Route.useLoaderData();
182
-
return (
183
-
<ul>
184
-
{data.results.map((person) => (
185
-
<li key={person.name}>{person.name}</li>
186
-
))}
187
-
</ul>
188
-
);
189
-
}
190
-
```
191
-
192
-
Loaders simplify your data fetching logic dramatically. Check out more information in the [Loader documentation](https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#loader-parameters).
193
-
194
-
# Demo files
195
-
196
-
Files prefixed with `demo` can be safely deleted. They are there to provide a starting point for you to play around with the features you've installed.
197
-
198
-
# Learn More
199
-
200
-
You can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).
201
-
202
-
For TanStack Start specific documentation, visit [TanStack Start](https://tanstack.com/start).
7
+
I used AI to generate large parts of the code.
8
+
Added my special spice though.
+34
-1
src/routes/__root.tsx
+34
-1
src/routes/__root.tsx
···
19
19
NavbarLogo,
20
20
NavbarNavigation,
21
21
} from "#/components/navbar";
22
+
import {
23
+
horizontalSpace,
24
+
verticalSpace,
25
+
} from "../components/theme/semantic-spacing.stylex";
22
26
import { fontFamily, fontWeight } from "../components/theme/typography.stylex";
23
-
import { primaryColor } from "../components/theme/color.stylex";
27
+
import { primaryColor, uiColor } from "../components/theme/color.stylex";
24
28
import { blue } from "../components/theme/colors/blue.stylex";
29
+
import { Footer } from "#/components/footer";
30
+
import { Link } from "#/components/link";
31
+
import { Body, SmallBody } from "#/components/typography";
25
32
26
33
interface MyRouterContext {
27
34
queryClient: QueryClient;
···
140
147
</Navbar>
141
148
</HeaderLayout.Header>
142
149
<HeaderLayout.Page>{children}</HeaderLayout.Page>
150
+
<HeaderLayout.Footer>
151
+
<Footer.Root>
152
+
<Footer.Section>
153
+
<SmallBody>
154
+
Made with{" "}
155
+
<Link
156
+
href="https://hip-ui.tngl.io/docs/introduction"
157
+
target="_blank"
158
+
rel="noopener noreferrer"
159
+
>
160
+
Hip UI
161
+
</Link>
162
+
</SmallBody>
163
+
<SmallBody>
164
+
Source on{" "}
165
+
<Link
166
+
href="https://tangled.org/hipstersmoothie.com/atmosphereconf-vods"
167
+
target="_blank"
168
+
rel="noopener noreferrer"
169
+
>
170
+
Tangled
171
+
</Link>
172
+
</SmallBody>
173
+
</Footer.Section>
174
+
</Footer.Root>
175
+
</HeaderLayout.Footer>
143
176
</HeaderLayout.Root>
144
177
<TanStackDevtools
145
178
config={{