Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-04-25 07:32:19 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Nuke let from template

Browse Source
This commit is contained in:
Kalle (Sendou) 2021-11-27 03:08:35 +02:00
parent 2e07eac747
commit 7d18d66c7a
5 changed files with 14 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/Layout/index.tsx
View File

@ -1,10 +1,10 @@
import { useState } from "react";
import { navItems } from "../../utils";
import { HamburgerButton } from "./HamburgerButton";
import { MobileNav } from "./MobileNav";
import { SearchInput } from "./SearchInput";
import { UserItem } from "./UserItem";
import { Link } from "remix";
import { navItems } from "~/constants";
export function Layout({ children }: { children: React.ReactElement }) {
const [menuExpanded, setMenuExpanded] = useState(false);

4
app/entry.server.tsx
View File

@ -8,7 +8,7 @@ export default function handleRequest(
responseHeaders: Headers,
remixContext: EntryContext
) {
let markup = renderToString(
const markup = renderToString(
<RemixServer context={remixContext} url={request.url} />
);
@ -16,6 +16,6 @@ export default function handleRequest(
return new Response("<!DOCTYPE html>" + markup, {
status: responseStatusCode,
headers: responseHeaders
headers: responseHeaders,
});
}

4
app/root.tsx
View File

@ -15,7 +15,7 @@ import globalStylesUrl from "~/styles/global.css";
import layoutStylesUrl from "~/styles/layout.css";
import { Layout } from "./components/Layout";
export let links: LinksFunction = () => {
export const links: LinksFunction = () => {
return [
{ rel: "stylesheet", href: normalizeStylesUrl },
{ rel: "stylesheet", href: globalStylesUrl },
@ -60,7 +60,7 @@ function Document({
}
export function CatchBoundary() {
let caught = useCatch();
const caught = useCatch();
let message;
switch (caught.status) {

93
app/routes/index.tsx
View File

@ -1,100 +1,17 @@
import type { MetaFunction, LoaderFunction } from "remix";
import { useLoaderData, json, Link } from "remix";
import type { MetaFunction } 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 = () => {
export const meta: MetaFunction = () => {
return {
title: "Remix Starter",
description: "Welcome to remix!"
title: "sendou.ink",
};
};
// https://remix.run/guides/routing#index-routes
export default function Index() {
let data = useLoaderData<IndexData>();
return (
<div className="remix__page">
<div>
<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>
<h2>Welcome to sendou.ink!</h2>
</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>
);
}

8
server/index.js
View File

@ -7,7 +7,7 @@ const { createRequestHandler } = require("@remix-run/express");
const MODE = process.env.NODE_ENV;
const BUILD_DIR = path.join(process.cwd(), "server/build");
let app = express();
const app = express();
app.use(compression());
// You may want to be more aggressive with this caching
@ -23,12 +23,12 @@ app.all(
? createRequestHandler({ build: require("./build") })
: (req, res, next) => {
purgeRequireCache();
let build = require("./build");
const build = require("./build");
return createRequestHandler({ build, mode: MODE })(req, res, next);
}
);
let port = process.env.PORT || 3000;
const port = process.env.PORT || 3000;
app.listen(port, () => {
console.log(`Express server listening on port ${port}`);
});
@ -40,7 +40,7 @@ function purgeRequireCache() {
// alternatively you can set up nodemon/pm2-dev to restart the server on
// file changes, we prefer the DX of this though, so we've included it
// for you by default
for (let key in require.cache) {
for (const key in require.cache) {
if (key.startsWith(BUILD_DIR)) {
delete require.cache[key];
}