feat(docs): start any example in stackblitz (t3-oss#1576)

Co-authored-by: Julius Marminge <[email protected]>

www/package.json

@@ -29,6 +29,7 @@
  "@headlessui/react": "^1.7.14",
  "@ianvs/prettier-plugin-sort-imports": "^4.1.0",
  "@resvg/resvg-js": "^2.4.1",
+ "@stackblitz/sdk": "^1.9.0",
  "@vercel/analytics": "^1.0.1",
  "clsx": "^1.2.1",
  "embla-carousel": "^7.1.0",

www/src/components/docs/exampleOptionForm.astro

@@ -0,0 +1,104 @@
+---
+const options = {
+ nextAuth: "NextAuth.js",
+ prisma: "Prisma",
+ tailwind: "Tailwind CSS",
+ trpc: "tRPC",
+ drizzle: "Drizzle",
+};
+---
+
+<script>
+ import sdk from "@stackblitz/sdk";
+
+ function directToStackBlitz(checkedInputs: any) {
+ try {
+ sdk.openProject(
+ {
+ title: "T3 Examples",
+ description: "T3 example apps.",
+ template: "node",
+ files: {
+ "package.json": `{
+ "name": "T3 Examples",
+ "version": "1.0.0",
+ "description": "My Next.js app",
+ "scripts":{
+ "dev": " echo 'y' | npx create-t3-app example-app --CI ${checkedInputs} && cd ./example-app && rm ../package.json " }
+ }`,
+ },
+ settings: {
+ compile: {
+ trigger: "auto",
+ clearConsole: false,
+ },
+ },
+ },
+ {
+ newWindow: true,
+ openFile: ["package.json"],
+ },
+ );
+ } catch (error) {
+ console.error("Error", error);
+ }
+ }
+
+ function handleFormSubmit(e: Event) {
+ e.preventDefault();
+
+ const inputs = Array.from(
+ (e.target as HTMLFormElement).querySelectorAll("input"),
+ );
+ let checkedInputs = "";
+ inputs
+ .filter((input) => input.checked)
+ .map((input) => (checkedInputs += ` --${input.value}`));
+
+ directToStackBlitz(checkedInputs);
+ }
+
+ const form = document.getElementById("componentForm") as HTMLFormElement;
+
+ const prismaInput = document.getElementById("prisma") as HTMLInputElement;
+ const drizzleInput = document.getElementById("drizzle") as HTMLInputElement;
+
+ function handleCheckboxChange(e: Event) {
+ if (e.target === prismaInput && drizzleInput.checked) {
+ drizzleInput.checked = false;
+ } else if (e.target === drizzleInput && prismaInput.checked) {
+ prismaInput.checked = false;
+ }
+ }
+
+ prismaInput.addEventListener("change", handleCheckboxChange);
+ drizzleInput.addEventListener("change", handleCheckboxChange);
+
+ form.addEventListener("submit", handleFormSubmit);
+</script>
+
+<form
+ method="get"
+ id="componentForm"
+ class="mb-4 w-full rounded border border-t3-purple-300 p-4 text-lg"
+>
+ {
+ Object.entries(options).map(([code, name]) => (
+ <div>
+ <input
+ id={code}
+ type="checkbox"
+ name={name}
+ value={code}
+ class="h-4 w-4"
+ />
+ <label for={code}>{name}</label>
+ </div>
+ ))
+ }
+ <button
+ class="text-md inline-flex cursor-pointer items-center gap-1.5 whitespace-nowrap rounded-md border-2 bg-t3-purple-200/50 px-3 py-2 font-medium hover:bg-t3-purple-200/75 dark:border-t3-purple-200/20 dark:bg-t3-purple-200/10 dark:hover:border-t3-purple-200/50"
+ >
+ View in StackBlitz
+ </button>
+</form>

www/src/config.ts

@@ -116,6 +116,7 @@ export const SIDEBAR: Sidebar = {
  { text: "Folder Structure", link: "en/folder-structure" },
  { text: "FAQ", link: "en/faq" },
  { text: "T3 Collection", link: "en/t3-collection" },
+ { text: "Examples", link: "en/examples" },
  { text: "Other Recommendations", link: "en/other-recs" },
  ],
  Usage: [

www/src/pages/en/examples.mdx

@@ -0,0 +1,22 @@
+---
+title: Examples
+description: Examples of different live apps
+layout: ../../layouts/docs.astro
+lang: en
+isMdx: true
+---
+
+import Callout from "../../components/docs/callout.tsx";
+import Form from "../../components/docs/exampleOptionForm.astro";
+
+You can try out different combinations of technologies that create-t3-app offers. 
+
+<Callout type="info">
+ You cannot select `prisma` and `drizzle` at the same time.
+</Callout>
+
+<Form />
+
+<Callout type="warning">
+ Some features might not work unless you create an env file
+</Callout>