Skip to content

Commit

Permalink
docs: file structure for Drizzle and App Router (#1944)
Browse files Browse the repository at this point in the history
  • Loading branch information
c-ehrlich authored Jul 22, 2024
1 parent 15429ea commit 831dd56
Show file tree
Hide file tree
Showing 16 changed files with 473 additions and 50 deletions.
97 changes: 97 additions & 0 deletions www/src/components/docs/folderStructureDiagramApp.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
<script>
import { asTree, type TreeObject } from "treeify";

const element = document.getElementById("fileStructure");

// Get new selection from the form
//@ts-ignore
document.addEventListener(
"fileStructureComponentsChange",
(event: CustomEvent<{ selected: string[] }>) => {
renderDiagram(event.detail.selected);
},
);

const allFiles = {
"prisma/schema.prisma": ["prisma"], // This file is included with prisma
"public/favicon.ico": [], // This file is included in every configuration
"src/app/_components/post.tsx": ["trpc"],
"src/app/api/auth/[...nextauth]/route.ts": ["nextauth"],
"src/app/api/trpc/[trpc]/route.ts": ["trpc"],
"src/app/layout.tsx": [],
"src/app/page.tsx": [],
"src/server/auth.ts": ["nextauth"],
"src/server/db.ts": ["prisma"],
"src/server/db/index.ts": ["drizzle"],
"src/server/db/schema.ts": ["drizzle"],
"src/server/api/routers/example.ts": ["trpc"],
"src/server/api/trpc.ts": ["trpc"],
"src/server/api/root.ts": ["trpc"],
"src/styles/globals.css": [],
"src/env.js": [],
"src/trpc/query-client.ts": ["trpc"],
"src/trpc/react.tsx": ["trpc"],
"src/trpc/server.ts": ["trpc"],
".env": [],
".env.example": [],
".eslintrc.cjs": [],
".gitignore": [],
"db.sqlite (after `db:push`, sqlite only)": ["drizzle"],
"drizzle.config.ts": ["drizzle"],
"next-env.d.ts": [],
"next.config.js": [],
"package.json": [],
"postcss.config.cjs": ["tailwind"],
"prettier.config.js": ["tailwind"],
"README.md": [],
"start-database.sh (mysql or postgres only)": ["drizzle"],
"tailwind.config.ts": ["tailwind"],
"tsconfig.json": [],
};

const renderDiagram = (selected: string[]) => {
// Filter files based on selected components
const files = Object.entries(allFiles)
.map(([filename, components]) => {
if (components.length === 0) return filename;
return components.some((component) =>
component.split("+").every((option) => selected.includes(option)),
)
? filename
: null;
})
.filter((file) => file) as string[];

// Transform files to a tree object for the treeify library
const filesTree: TreeObject = {};
files.forEach((file) => {
const path = file.split("/");
let folder = filesTree;
path.forEach((name) => {
if (!folder[name]) folder[name] = {};
folder = folder[name] as TreeObject;
});
});

if (element) element.textContent = `.\n${asTree(filesTree, false, true)}`;
};

const getSelectedFromPackagesQueryParam = () => {
const selectedParam = new URLSearchParams(window.location.search).get(
"packages",
);

if (selectedParam === null) {
return ["nextauth", "drizzle", "tailwind", "trpc"];
}

return selectedParam.split(",");
};

renderDiagram(getSelectedFromPackagesQueryParam());
</script>

<pre
style="background-color: #191724; color: #e8ddff;">
<code id="fileStructure" />
</pre>
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,17 @@
);

const allFiles = {
"public/favicon.ico": [], // This file is included in every configuration
"prisma/schema.prisma": ["prisma"], // This file is included with prisma
"public/favicon.ico": [], // This file is included in every configuration
"src/env.js": [],
"src/pages/_app.tsx": [],
"src/pages/api/auth/[...nextauth].ts": ["nextauth"],
"src/pages/api/trpc/[trpc].ts": ["trpc"],
"src/pages/index.tsx": [],
"src/server/auth.ts": ["nextauth"],
"src/server/db.ts": ["prisma"],
"src/server/db/index.ts": ["drizzle"],
"src/server/db/schema.ts": ["drizzle"],
"src/server/api/routers/example.ts": ["trpc"],
"src/server/api/trpc.ts": ["trpc"],
"src/server/api/root.ts": ["trpc"],
Expand All @@ -31,12 +33,15 @@
".env.example": [],
".eslintrc.cjs": [],
".gitignore": [],
"db.sqlite (after `db:push`, sqlite only)": ["drizzle"],
"drizzle.config.ts": ["drizzle"],
"next-env.d.ts": [],
"next.config.js": [],
"package.json": [],
"postcss.config.cjs": ["tailwind"],
"prettier.config.js": ["tailwind"],
"README.md": [],
"start-database.sh (mysql or postgres only)": ["drizzle"],
"tailwind.config.ts": ["tailwind"],
"tsconfig.json": [],
};
Expand Down Expand Up @@ -74,7 +79,7 @@
);

if (selectedParam === null) {
return ["nextauth", "prisma", "tailwind", "trpc"];
return ["nextauth", "drizzle", "tailwind", "trpc"];
}

return selectedParam.split(",");
Expand Down
32 changes: 27 additions & 5 deletions www/src/components/docs/folderStructureForm.astro
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
const options = {
nextauth: "NextAuth.js",
prisma: "Prisma",
drizzle: "Drizzle",
tailwind: "Tailwind CSS",
trpc: "tRPC",
};
Expand All @@ -26,18 +27,39 @@ const options = {
);

if (selectedParam === null) {
return ["nextauth", "prisma", "tailwind", "trpc"];
return ["nextauth", "drizzle", "tailwind", "trpc"];
}

return selectedParam.split(",");
};

inputs.forEach((input) =>
input.addEventListener("change", () => {
const selected = Array.from(inputs).flatMap(({ value, checked }) =>
checked ? [value] : [],
input.addEventListener("change", (aaa) => {
console.log({ inputs, aaa, input });
const initialSelected = Array.from(inputs).flatMap(
({ value, checked }) => {
return checked ? [value] : [];
},
);

if (
input.value === "drizzle" &&
initialSelected.includes("drizzle") &&
initialSelected.includes("prisma")
) {
document.getElementById("prisma")?.click();
} else if (
input.value === "prisma" &&
initialSelected.includes("prisma") &&
initialSelected.includes("drizzle")
) {
document.getElementById("drizzle")?.click();
}

const selected = Array.from(inputs).flatMap(({ value, checked }) => {
return checked ? [value] : [];
});

updatePackagesQueryParam(selected);

// Rerender the diagram
Expand Down Expand Up @@ -87,7 +109,7 @@ const options = {
id={code}
type="checkbox"
name="conf"
checked
checked={code !== "prisma"}
value={code}
class="h-4 w-4"
/>
Expand Down
32 changes: 21 additions & 11 deletions www/src/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export const SIDEBAR: Sidebar = {
{ text: "مُقدمة", link: "ar/introduction" },
{ text: "لماذا CT3A؟", link: "ar/why" },
{ text: "التثبيت", link: "ar/installation" },
{ text: "بِنية المجلد", link: "ar/folder-structure" },
{ text: "(Pages)بِنية المجلد", link: "ar/folder-structure-pages" },
{ text: "أسئلة شائعة", link: "ar/faq" },
{ text: "اعمال بواسطة T3", link: "ar/t3-collection" },
{ text: "ترشيحات أُخري", link: "ar/other-recs" },
Expand Down Expand Up @@ -114,7 +114,8 @@ export const SIDEBAR: Sidebar = {
{ text: "Introduction", link: "en/introduction" },
{ text: "Why CT3A?", link: "en/why" },
{ text: "Installation", link: "en/installation" },
{ text: "Folder Structure", link: "en/folder-structure" },
{ text: "Folder Structure (Pages)", link: "en/folder-structure-pages" },
{ text: "Folder Structure (App)", link: "en/folder-structure-app" },
{ text: "FAQ", link: "en/faq" },
{ text: "T3 Collection", link: "en/t3-collection" },
{ text: "Examples", link: "en/examples" },
Expand Down Expand Up @@ -145,7 +146,10 @@ export const SIDEBAR: Sidebar = {
{ text: "Introducción", link: "es/introduction" },
{ text: "¿Por qué CT3A?", link: "es/why" },
{ text: "Instalación", link: "es/installation" },
{ text: "Estructura de Carpetas", link: "es/folder-structure" },
{
text: "Estructura de Carpetas (Pages)",
link: "es/folder-structure-pages",
},
{ text: "Preguntas Frecuentes", link: "es/faq" },
{ text: "Colección T3", link: "es/t3-collection" },
{ text: "Otras Recomendaciones", link: "es/other-recs" },
Expand All @@ -171,7 +175,7 @@ export const SIDEBAR: Sidebar = {
{ text: "イントロダクション", link: "ja/introduction" },
{ text: "CT3A を選ぶ理由", link: "ja/why" },
{ text: "インストール", link: "ja/installation" },
{ text: "ファルダ構成", link: "ja/folder-structure" },
{ text: "ファルダ構成 (Pages)", link: "ja/folder-structure-pages" },
{ text: "FAQ", link: "ja/faq" },
{ text: "T3 コレクション", link: "ja/t3-collection" },
{ text: "その他のオススメ", link: "ja/other-recs" },
Expand Down Expand Up @@ -200,7 +204,7 @@ export const SIDEBAR: Sidebar = {
{ text: "Wstęp", link: "pl/introduction" },
{ text: "Dlaczego CT3A?", link: "pl/why" },
{ text: "Instalacja", link: "pl/installation" },
{ text: "Struktura Projektu", link: "pl/folder-structure" },
{ text: "Struktura Projektu (Pages)", link: "pl/folder-structure-pages" },
{ text: "FAQ", link: "pl/faq" },
{ text: "Kolekcja T3", link: "pl/t3-collection" },
{ text: "Przykłady", link: "pl/examples" },
Expand Down Expand Up @@ -230,7 +234,7 @@ export const SIDEBAR: Sidebar = {
{ text: "Вступ", link: "uk/introduction" },
{ text: "Чому CT3A?", link: "uk/why" },
{ text: "Встановлення", link: "uk/installation" },
{ text: "Структура папок", link: "uk/folder-structure" },
{ text: "Структура папок (Pages)", link: "uk/folder-structure-pages" },
{ text: "FAQ", link: "uk/faq" },
{ text: "T3 Колекція", link: "uk/t3-collection" },
{ text: "Приклади", link: "uk/examples" },
Expand Down Expand Up @@ -261,7 +265,10 @@ export const SIDEBAR: Sidebar = {
{ text: "Introduction", link: "fr/introduction" },
{ text: "Pourquoi CT3A?", link: "fr/why" },
{ text: "Installation", link: "fr/installation" },
{ text: "Structure des dossiers", link: "fr/folder-structure" },
{
text: "Structure des dossiers (Pages)",
link: "fr/folder-structure-pages",
},
{ text: "FAQ", link: "fr/faq" },
{ text: "Collection T3", link: "fr/t3-collection" },
{ text: "Exemples", link: "fr/examples" },
Expand Down Expand Up @@ -291,7 +298,10 @@ export const SIDEBAR: Sidebar = {
{ text: "Introdução", link: "pt/introduction" },
{ text: "Por que o CT3A?", link: "pt/why" },
{ text: "Instalação", link: "pt/installation" },
{ text: "Estrutura de Pastas", link: "pt/folder-structure" },
{
text: "Estrutura de Pastas (Pages)",
link: "pt/folder-structure-pages",
},
{ text: "Perguntas Frequentes", link: "pt/faq" },
{ text: "Coleção T3", link: "pt/t3-collection" },
{ text: "Outras Recomendações", link: "pt/other-recs" },
Expand Down Expand Up @@ -320,7 +330,7 @@ export const SIDEBAR: Sidebar = {
{ text: "Введение", link: "ru/introduction" },
{ text: "Почему CT3A?", link: "ru/why" },
{ text: "Установка", link: "ru/installation" },
{ text: "Файловая структура", link: "ru/folder-structure" },
{ text: "Файловая структура (Pages)", link: "ru/folder-structure-pages" },
{ text: "FAQ", link: "ru/faq" },
{ text: "T3 коллекция", link: "ru/t3-collection" },
{ text: "Дополнительные рекомендации", link: "ru/other-recs" },
Expand Down Expand Up @@ -349,7 +359,7 @@ export const SIDEBAR: Sidebar = {
{ text: "Introduksjon", link: "no/introduction" },
{ text: "Hvorfor CT3A?", link: "no/why" },
{ text: "Installasjon", link: "no/installation" },
{ text: "Mappestruktur", link: "no/folder-structure" },
{ text: "Mappestruktur (Pages)", link: "no/folder-structure-pages" },
{ text: "FAQ", link: "no/faq" },
{ text: "T3-Kolleksjonen", link: "no/t3-collection" },
{ text: "Andre Anbefalinger", link: "no/other-recs" },
Expand Down Expand Up @@ -378,7 +388,7 @@ export const SIDEBAR: Sidebar = {
{ text: "简介", link: "zh-hans/introduction" },
{ text: "为什么选择 CT3A?", link: "zh-hans/why" },
{ text: "安装", link: "zh-hans/installation" },
{ text: "文件夹结构", link: "zh-hans/folder-structure" },
{ text: "文件夹结构 (Pages)", link: "zh-hans/folder-structure-pages" },
{ text: "常见疑问", link: "zh-hans/faq" },
{ text: "T3 合集", link: "zh-hans/t3-collection" },
{ text: "其他推荐", link: "zh-hans/other-recs" },
Expand Down
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
title: بنية المجلد
title: (Pages)بِنية المجلد
description: بنية مجلد T3 App
layout: ../../layouts/docs.astro
lang: ar
dir: rtl
isMdx: true
---

import Diagram from "../../components/docs/folderStructureDiagram.astro";
import Diagram from "../../components/docs/folderStructureDiagramPages.astro";
import Form from "../../components/docs/folderStructureForm.astro";

اختار أدواتك لترى بنية المجلد عند إنشاء تطبيقك بواسطة تلك ألاختيارات. بالأسفل ستجد وصف عن غرض كلاً منهم.
Expand Down
Loading

0 comments on commit 831dd56

Please sign in to comment.