GitHub workflow readme cleanup

.github/workflows/next-ssg-build.yml

@@ -0,0 +1,31 @@
+name: Build and Export Next.js SSG
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "22.14.0"
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build Next.js app
+        run: npm run build
+
+      - name: Upload exported site as artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: nextjs-ssg-site
+          path: out

README.md

@@ -14,7 +14,7 @@ Flow chart is generated based on `questionnaire.mmd` file.
 ### Behaviour:
 
 - **Blocks with external links** automatically redirect users to external page. For example `https://github.com`
-- **Blocks with relative links** point to directories in `/storage/solution`. For example `java` it will point to `/storage/solution/java`. This block will display solution page with technologies stored in `.yml` files
+- **Blocks with relative links** point to directories in `/storage/solutions`. For example `java` will point to `/storage/solutions/java`. This block will display solutions page with technologies stored in `.yml` files in `/storage/solutions/java` directory
 
 ## YML files
 
@@ -33,7 +33,14 @@ If you want to add information about solutions just add `[technologyName].yml` t
 **The solution yml** file accepts:
 - name: string
 - description: string
-- pros: string
-- cons: string
+- pros: string[]
+- cons: string[]
 - url: string
 
+## ENV file
+In .env file you can specify:
+
+- **FIRST_QUESTION_URL** - should point to the first question. This is used to automatically redirect user to first question when he enter `index.html` and is also used on `Start over` button 
+- **CLOSE_URL** - should point to cardano-foundation page I set it to `https://cardanofoundation.org/ledger-sync`. It is used when user clicks `X` button in the top navigation
+
+

app/globals.css

@@ -1,5 +1,3 @@
-@import "./preflight.css";
-
 :root {
   --color-lightest: #fff;
   --color-gray-1000: #272727;

app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import localFont from "next/font/local";
 
+import "./preflight.css";
 import "./globals.css";
 
 const switzer = localFont({

app/questionnaire/[vertexId]/page.tsx

@@ -8,6 +8,7 @@ import { JSX } from "react";
 import { QuestionsView } from "@/components/QuestionsView/QuestionsView";
 import { SolutionsView } from "@/components/SolutionsView/SolutionsView";
 import { redirect } from "next/navigation";
+import { ErrorView } from "@/components/ErrorView/ErrorView";
 
 export async function generateStaticParams() {
   const data = loadDiagramData();
@@ -40,7 +41,8 @@ export default async function Page({
   const getPreviousQuestion = (currentVertex: Vertex) => {
     const connectedEdges = findPreviousEdges(currentVertex);
     const prevVertex = data.vertices.get(connectedEdges[0]?.start);
-    const prevVertexConnectedEdges = findPreviousEdges(prevVertex);
+
+    const prevVertexConnectedEdges = findEdges(prevVertex);
 
     if (prevVertexConnectedEdges.length === 1 && prevVertex) {
       return getPreviousQuestion(prevVertex);
@@ -54,7 +56,12 @@ export default async function Page({
     previousAnswer?: string,
   ): JSX.Element | null => {
     if (!question) {
-      return <div>Question not found</div>;
+      return (
+        <ErrorView
+          closeLink={process?.env?.CLOSE_URL}
+          startOverLink={process?.env?.FIRST_QUESTION_URL}
+        />
+      );
     }
 
     const connectedEdges = findEdges(question);
@@ -72,16 +79,16 @@ export default async function Page({
       );
     }
 
-    // If this question has a link, render it as an external link
-    if (question.link) {
-      redirect(question.link);
-    }
-
     // If there's only one connected edge, render it as part of the QuestionsView
     if (connectedEdges.length === 1) {
       return renderQuestionChain(nextVertex, question.text);
     }
 
+    // If this question has a link, render it as an external link
+    if (question.link) {
+      redirect(question.link);
+    }
+
     // If there are multiple edges, render them as answers
     return (
       <QuestionsView

public/data/generated-data.json

@@ -46,10 +46,13 @@
         "labelType": "text",
         "domId": "flowchart-C2-5",
         "styles": [],
-        "classes": [],
+        "classes": [
+          "clickable"
+        ],
         "text": "No, I'm exploring",
         "props": {},
-        "type": "rect"
+        "type": "rect",
+        "link": "https://github.com/"
       }
     ],
     [
@@ -65,28 +68,12 @@
         "props": {}
       }
     ],
-    [
-      "AA1",
-      {
-        "id": "AA1",
-        "labelType": "string",
-        "domId": "flowchart-AA1-10",
-        "styles": [],
-        "classes": [
-          "clickable"
-        ],
-        "text": "Visit our blueprint examples",
-        "type": "square",
-        "props": {},
-        "link": "https://github.com/"
-      }
-    ],
     [
       "H1",
       {
         "id": "H1",
         "labelType": "string",
-        "domId": "flowchart-H1-12",
+        "domId": "flowchart-H1-10",
         "styles": [],
         "classes": [
           "clickable"
@@ -102,7 +89,7 @@
       {
         "id": "D1",
         "labelType": "string",
-        "domId": "flowchart-D1-14",
+        "domId": "flowchart-D1-12",
         "styles": [],
         "classes": [],
         "text": "How is your solution designed to access blockchain data?",
@@ -115,7 +102,7 @@
       {
         "id": "E1",
         "labelType": "string",
-        "domId": "flowchart-E1-16",
+        "domId": "flowchart-E1-14",
         "styles": [],
         "classes": [],
         "text": "Through a ready to use sandbox cloud environment (BaaS)",
@@ -128,7 +115,7 @@
       {
         "id": "E2",
         "labelType": "string",
-        "domId": "flowchart-E2-17",
+        "domId": "flowchart-E2-15",
         "styles": [],
         "classes": [],
         "text": "Simply calling APIs.",
@@ -141,7 +128,7 @@
       {
         "id": "P1",
         "labelType": "string",
-        "domId": "flowchart-P1-21",
+        "domId": "flowchart-P1-19",
         "styles": [],
         "classes": [
           "clickable"
@@ -202,18 +189,6 @@
       "length": 1,
       "id": "L_B1_C3_0"
     },
-    {
-      "start": "C2",
-      "end": "AA1",
-      "type": "arrow_point",
-      "text": "",
-      "labelType": "text",
-      "classes": [],
-      "isUserDefinedId": false,
-      "stroke": "normal",
-      "length": 1,
-      "id": "L_C2_AA1_0"
-    },
     {
       "start": "C3",
       "end": "H1",

questionnaire.mmd

@@ -3,15 +3,14 @@ flowchart TD
     B1 -- Yes --> C1["Yes, I know what I want to build"]
     B1 -- No --> C2@{ label: "No, I'm exploring" }
     B1 -- Not sure --> C3["I have an idea and want to focus on coding"]
-    C2 --> AA1["Visit our blueprint examples"]
     C3 --> H1["java"]
     C1 --> D1{"How is your solution designed to access blockchain data?"}
     D1 --> E1["Through a ready to use sandbox cloud environment (BaaS)"] & E2["Simply calling APIs."]
     E1 --> H1
     E2 --> P1["Apollo"]
 
     C2@{ shape: rect}
-    click AA1 "https://github.com/"
+    click C2 "https://github.com/"
     click H1 "java"
     click P1 "simplyCallingAPI"
 

scripts/generateDiagramData.js

@@ -67,15 +67,6 @@ async function generateDiagramData() {
 		}
 
 		fs.writeFileSync(path.join(outputDir, "generated-data.json"), json);
-
-    // const directoryPath = path.join(process.cwd(), "storage", "java");
-    // fs.readdir(directoryPath, (err, files) => {
-    //   files.forEach((file) => {
-    //     const filePath = path.join(directoryPath, file);
-    //     const jsonData = fs.readFileSync(filePath, "utf-8");
-    //     console.log("jsonData", jsonData);
-    //   });
-    // });
 	} catch (error) {
 		throw new Error("Error extracting graph data: " + error.message);
 	}