mirror of
https://github.com/BradNut/remix-syntax
synced 2025-09-08 17:40:28 +00:00
100 lines
2.7 KiB
TypeScript
100 lines
2.7 KiB
TypeScript
import type { MetaFunction, LoaderFunction } from "remix";
|
||
import { useLoaderData, json, Link } from "remix";
|
||
|
||
type IndexData = {
|
||
resources: Array<{ name: string; url: string }>;
|
||
demos: Array<{ name: string; to: string }>;
|
||
};
|
||
|
||
// Loaders provide data to components and are only ever called on the server, so
|
||
// you can connect to a database or run any server side code you want right next
|
||
// to the component that renders it.
|
||
// https://remix.run/api/conventions#loader
|
||
export let loader: LoaderFunction = () => {
|
||
let data: IndexData = {
|
||
resources: [
|
||
{
|
||
name: "Remix Docs",
|
||
url: "https://remix.run/docs"
|
||
},
|
||
{
|
||
name: "React Router Docs",
|
||
url: "https://reactrouter.com/docs"
|
||
},
|
||
{
|
||
name: "Remix Discord",
|
||
url: "https://discord.gg/VBePs6d"
|
||
}
|
||
],
|
||
demos: [
|
||
{
|
||
to: "demos/actions",
|
||
name: "Actions"
|
||
},
|
||
{
|
||
to: "demos/about",
|
||
name: "Nested Routes, CSS loading/unloading"
|
||
},
|
||
{
|
||
to: "demos/params",
|
||
name: "URL Params and Error Boundaries"
|
||
}
|
||
]
|
||
};
|
||
|
||
// https://remix.run/api/remix#json
|
||
return json(data);
|
||
};
|
||
|
||
// https://remix.run/api/conventions#meta
|
||
export let meta: MetaFunction = () => {
|
||
return {
|
||
title: "Remix Starter",
|
||
description: "Welcome to remix!"
|
||
};
|
||
};
|
||
|
||
// https://remix.run/guides/routing#index-routes
|
||
export default function Index() {
|
||
let data = useLoaderData<IndexData>();
|
||
|
||
return (
|
||
<div className="remix__page">
|
||
<main>
|
||
<h2>Welcome to Remix!</h2>
|
||
<p>We're stoked that you're here. 🥳</p>
|
||
<p>
|
||
Feel free to take a look around the code to see how Remix does things,
|
||
it might be a bit different than what you’re used to. When you're
|
||
ready to dive deeper, we've got plenty of resources to get you
|
||
up-and-running quickly.
|
||
</p>
|
||
<p>
|
||
Check out all the demos in this starter, and then just delete the{" "}
|
||
<code>app/routes/demos</code> and <code>app/styles/demos</code>{" "}
|
||
folders when you're ready to turn this into your next project.
|
||
</p>
|
||
</main>
|
||
<aside>
|
||
<h2>Demos In This App</h2>
|
||
<ul>
|
||
{data.demos.map(demo => (
|
||
<li key={demo.to} className="remix__page__resource">
|
||
<Link to={demo.to} prefetch="intent">
|
||
{demo.name}
|
||
</Link>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
<h2>Resources</h2>
|
||
<ul>
|
||
{data.resources.map(resource => (
|
||
<li key={resource.url} className="remix__page__resource">
|
||
<a href={resource.url}>{resource.name}</a>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</aside>
|
||
</div>
|
||
);
|
||
}
|