feature: added an example page that will let users see different comb…

…ination of t3 apps in stackblitz

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,94 @@
+---
+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 my-app --CI ${checkedInputs} && cd ./my-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;
+
+ 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}
+ checked
+ 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,14 @@
+---
+title: Examples
+description: Examples of different live apps
+layout: ../../layouts/docs.astro
+lang: en
+isMdx: true
+---
+
+
+import Form from "../../components/docs/exampleOptionForm.astro";
+
+You can try out different combinations of technologies that create-t3-app offers. 
+
+<Form />