2021-10-12 09:35:44 +00:00
|
|
|
import fs from "fs";
|
|
|
|
|
import { NextPage } from "next";
|
|
|
|
|
import Head from "next/head";
|
|
|
|
|
import Link from "next/link";
|
|
|
|
|
import path from "path";
|
|
|
|
|
|
|
|
|
|
import { inferSSRProps } from "@lib/types/inferSSRProps";
|
|
|
|
|
|
|
|
|
|
async function _getStaticProps() {
|
|
|
|
|
const dir = path.join(process.cwd(), "pages", "sandbox");
|
|
|
|
|
|
|
|
|
|
const pages = fs
|
|
|
|
|
.readdirSync(dir)
|
|
|
|
|
.filter((file) => !file.startsWith("."))
|
|
|
|
|
.map((file) => {
|
|
|
|
|
const parts = file.split(".");
|
|
|
|
|
// remove extension
|
|
|
|
|
parts.pop();
|
|
|
|
|
return parts.join(".");
|
|
|
|
|
});
|
|
|
|
|
return {
|
|
|
|
|
props: {
|
|
|
|
|
pages,
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
type PageProps = inferSSRProps<typeof _getStaticProps>;
|
|
|
|
|
|
|
|
|
|
const SandboxPage: NextPage<PageProps> = (props) => {
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<Head>
|
|
|
|
|
<meta name="googlebot" content="noindex" />
|
|
|
|
|
</Head>
|
|
|
|
|
<nav>
|
2022-02-09 00:05:13 +00:00
|
|
|
<ul className="flex flex-col justify-between md:flex-row">
|
2021-10-12 09:35:44 +00:00
|
|
|
{props.pages.map((pathname) => (
|
|
|
|
|
<li key={pathname}>
|
|
|
|
|
<Link href={"/sandbox/" + pathname + "#main"}>
|
2022-02-09 22:32:31 +00:00
|
|
|
<a className="px-4 font-mono">{pathname}</a>
|
2021-10-12 09:35:44 +00:00
|
|
|
</Link>
|
|
|
|
|
</li>
|
|
|
|
|
))}
|
|
|
|
|
</ul>
|
|
|
|
|
</nav>
|
|
|
|
|
<main id="main" className="bg-gray-100">
|
|
|
|
|
{props.children}
|
|
|
|
|
</main>
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
export function sandboxPage(Component: NextPage) {
|
|
|
|
|
const Wrapper: NextPage<PageProps> = (props) => {
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<SandboxPage {...props}>
|
|
|
|
|
<Component />
|
|
|
|
|
</SandboxPage>
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
return {
|
|
|
|
|
default: Wrapper,
|
|
|
|
|
getStaticProps: _getStaticProps,
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const page = sandboxPage(() => {
|
2022-02-09 00:05:13 +00:00
|
|
|
return <p className="my-20 text-center text-2xl">Click a component above</p>;
|
2021-10-12 09:35:44 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
export default page.default;
|
|
|
|
|
export const getStaticProps = page.getStaticProps;
|
