feat: add support for section directories (#162)

* add generation support for section folders * rename folder * run yarn generate * comment * remove redundant line * update readme * modify output * fix section name * generate * improve loggin * remove space * update readme * update link
gnolang · Apr 25, 2024 · ecaf86c · ecaf86c
1 parent 1d05741
commit ecaf86c
Show file tree

Hide file tree

Showing 38 changed files with 238 additions and 209 deletions.
diff --git a/README.md b/README.md
@@ -4,45 +4,49 @@
 
 ## Overview
 
-`Gno By Example` is a community-dedicated web app that showcases the fundamentals of Gnolang, the Smart Contract
-language
-used on [Gno.land](https://gno.land).
+`Gno By Example` is a community-dedicated web app that showcases the fundamentals
+of Gnolang, the Smart Contract
+language used on [Gno.land](https://gno.land).
 
 ## Contributing
 
-The base application is built with `React` and utilizes the `Chakra UI` framework. You will need `Node v20+` to run it
-locally.
+The base application is built with `React` and utilizes the `Chakra UI` framework.
+You will need `Node v20+` to run it locally.
 
-Since the project is community-run, users can contribute new tutorials or modify existing ones.
+As a community-driven project, users are welcome to contribute by creating new
+tutorials or modifying existing ones.
 
-As a community-driven project, users are welcome to contribute by creating new tutorials or modifying existing ones.
-
-All tutorials are located within the `./src/tutorials/gno.land/gbe` subdirectory. Tutorials are automatically generated
+All tutorials are located within the 
+[`./src/tutorials/gno.land/gbe`](./src/tutorials/gno.land/gbe) subdirectory 
+in their respective section folders. Tutorials are automatically generated
 from corresponding `.md` files, with each tutorial having its own subdirectory.
 
 ![Banner](.github/assets/contribution-flow.png)
 
 ### Generating tutorials
 
-After making modifications to tutorial files (`.md` or other resources), it is necessary to regenerate the global list
-of tutorials by running the following command:
+After making modifications to tutorial files (`.md` or other resources), it is 
+necessary to regenerate the global list of tutorials by running the following 
+command:
 
 ```bash
 yarn generate
 ```
 
-This command executes the tutorial route generation script, ensuring that all tutorials are up to date and ready for
-dynamic display. Make sure to run this command from the repository root.
+This command executes the tutorial route generation script, ensuring that all
+tutorials are up-to-date and ready for dynamic display. Make sure to run this 
+command from the repository root.
 
 ### Markdown format
 
 Tutorials can be written using Markdown syntax.
 
 #### Metadata header
 
-A markdown header with some specific metadata is mandatory. This makes it possible for the tutorial generator script to
-correctly parse and organize examples.
-`title` and `section` values have to be set as part of the metadata at the top of the markdown file:
+A markdown header with some specific metadata is mandatory. This makes it 
+possible for the tutorial generator script to correctly parse and organize examples.
+`title` and `section` values have to be set as part of the metadata at the 
+top of the markdown file:
 
 ```md
 ---
@@ -51,29 +55,40 @@ section: Example Section
 ---
 ```
 
+Note: The `section` field in the metadata header will ultimately decide under
+which section the tutorial is generated in.
+
 #### Code snippets
 
-In Gno By Example, there is a special feature that allows referencing entire external files or specific line numbers
-from those files, outside of the Markdown files themselves.
+In Gno By Example, there is a special feature that allows referencing entire
+external files or specific line numbers from those files, outside of the Markdown
+files themselves.
 
-To embed the entire content of a specific file inside a code segment, use the following syntax:
+To embed the entire content of a specific file inside a code segment, use the
+following syntax:
 
 ````md
 ```go file=./myFile.gno
 ```
 ````
 
-To embed specific line numbers from an external file inside a code segment, use the following syntax:
+To embed specific line numbers from an external file inside a code segment, use
+the following syntax:
 
 ````md
 ```go file=./myFile.gno#L1-L2
 ```
 ````
 
-The above syntax will embed the content of the first two lines (inclusive) from the `./myFile.gno` file.
+The above syntax will embed the content of the first two lines (inclusive) from 
+the `./myFile.gno` file.
+
+If your sample code relies on another code, you can define the dependencies. 
+Each dependency code will be shown in a separate tab.
+A typical scenario occurs when your sample code is a test file. In order for 
+your test file to be executable, you need to include the actual implementation 
+as a dependency. 
 
-If your sample code relies on another code, you can define the dependencies. Each dependency code will be shown in a separate tab.
-A typical scenario occurs when your sample code is a test file. In order for your test file to be executable, you need to include the actual implementation as a dependency.
 To define dependencies, use the following syntax: 
 
 ````md

diff --git a/scripts/generate.ts b/scripts/generate.ts
@@ -230,22 +230,37 @@ const generateTutorialRoutes = async (items: TutorialItem[], outputFile: string)
 // Generate the corresponding tutorials in the subdirectories
 // and write out the tutorial routes
 const generateTutorials = async () => {
-  const baseDir: string = './src/tutorials/gno.land/gbe';
-  // const baseDir: string = './scripts/dummy';
-  const subDirs: string[] = fs.readdirSync(baseDir);
+  const baseDirPath: string = './src/tutorials/gno.land/gbe';
+
+  const sectionDirs: string[] = fs.readdirSync(baseDirPath);
   const tutorialItems: TutorialItem[] = [];
 
-  for (const subDir of subDirs) {
-    const subDirPath: string = path.join(baseDir, subDir);
-    const isDirectory: boolean = fs.statSync(subDirPath).isDirectory();
+  // Find section subdirs
+  for (const sectionName of sectionDirs) {
+    const sectionDirPath: string = path.join(baseDirPath, sectionName);
+    const isDirectory: boolean = fs.statSync(sectionDirPath).isDirectory();
 
-    if (isDirectory) {
-      // Generate the tutorial for this subdirectory
-      const item: TutorialItem = await parseTutorial(subDirPath);
+    // Ignore non-dirs
+    if (!isDirectory) {
+      continue
+    }
 
-      tutorialItems.push(item);
+    console.log(`➡️ Scanning section directory "${sectionName}":`);
+    const tutorialDirs: string[] = fs.readdirSync(sectionDirPath);
+    // Find tutorial subdirs in each section
+    for (const tutorialName of tutorialDirs) {
+      const tutorialDirPath: string = path.join(sectionDirPath, tutorialName);
+      const isDirectory: boolean = fs.statSync(tutorialDirPath).isDirectory();
 
-      console.log(`✅ Generated tutorial for: ${subDirPath}`);
+      // Ignore non-dirs
+      if (!isDirectory) {
+        continue
+      }
+
+      // Generate the tutorial for this subdirectory
+      const item: TutorialItem = await parseTutorial(tutorialDirPath);
+      tutorialItems.push(item);
+      console.log(`\t ✨ Generated tutorial: ${item.section} - ${tutorialName}`);
     }
   }
 

diff --git a/src/tutorials.ts b/src/tutorials.ts
@@ -1,10 +1,10 @@
-import helloWorld from "./tutorials/gno.land/gbe/01-hello/index";
-import firstApp from "./tutorials/gno.land/gbe/02-count/index";
-import primitives from "./tutorials/gno.land/gbe/03-primitives/index";
-import variables from "./tutorials/gno.land/gbe/04-variables/index";
-import constants from "./tutorials/gno.land/gbe/05-constants/index";
-import conditions from "./tutorials/gno.land/gbe/06-conditions/index";
-import loops from "./tutorials/gno.land/gbe/07-loops/index";
+import helloWorld from "./tutorials/gno.land/gbe/getting-started/01-hello/index";
+import firstApp from "./tutorials/gno.land/gbe/getting-started/02-count/index";
+import primitives from "./tutorials/gno.land/gbe/getting-started/03-primitives/index";
+import variables from "./tutorials/gno.land/gbe/getting-started/04-variables/index";
+import constants from "./tutorials/gno.land/gbe/getting-started/05-constants/index";
+import conditions from "./tutorials/gno.land/gbe/getting-started/06-conditions/index";
+import loops from "./tutorials/gno.land/gbe/getting-started/07-loops/index";
 
 const tutorials = [
   {

diff --git a/src/tutorials/gno.land/gbe/01-hello/index.ts b/src/tutorials/gno.land/gbe/01-hello/index.ts
diff --git a/src/tutorials/gno.land/gbe/02-count/index.ts b/src/tutorials/gno.land/gbe/02-count/index.ts
diff --git a/src/tutorials/gno.land/gbe/03-primitives/index.ts b/src/tutorials/gno.land/gbe/03-primitives/index.ts
diff --git a/src/tutorials/gno.land/gbe/04-variables/index.ts b/src/tutorials/gno.land/gbe/04-variables/index.ts