Create design from scratch and added docker target in makefile

Dockerfile

@@ -1,4 +1,9 @@
-FROM klakegg/hugo:ext-alpine
+# Use floryn90/hugo:ext-alpine as the base image
+FROM floryn90/hugo:ext-alpine
 
-RUN apk add git && \
-  git config --global --add safe.directory /src
+# Set the working directory to /src
+WORKDIR /src
+
+# Install Git and configure safe directory
+RUN apk add --no-cache git && \
+    git config --global --add safe.directory /src

Makefile

@@ -14,7 +14,7 @@
 
 include .github/build/Makefile.show-help.mk
 
-## Install docs.layer5.io dependencies your local machine.
+## Install docs.layer5.io dependencies on your local machine.
 ## See https://gohugo.io/categories/installation
 setup:
 	hugo server -D 
@@ -36,4 +36,5 @@ clean:
 	hugo --cleanDestinationDir
 	site
 
-.PHONY: setup build site clean site-fast
+.PHONY: setup build site clean site-fast
+

content/en/meshmap/getting-started/starting-scratch.md

@@ -2,15 +2,74 @@
 title: Starting from scratch
 date: 2023-10-05
 description: >
-  A short lead description about this content page. It can be **bold** or _italic_ and can be split over multiple paragraphs.
+ Welcome to MeshMap, your comprehensive tool for creating and managing cloud-native deployment designs. This documentation will guide you through the steps, emphasizing the underlying system behavior for each action you take.
 weigth: 2
 categories: [Designer]
 tags: [designs]
 ---
 
-{{% pageinfo %}}
-Page under construction.
-{{% /pageinfo %}}
+
+## Step 1: Accessing Designer Mode
+
+Upon entering MeshMap, seamlessly transition to the "Designer" mode by selecting the "Designer" tab from the main menu. This action dynamically switches to the Designer mode, initializing the necessary tools for design creation.
+
+**Example Analogy:**
+Think of Designer mode as your blueprint studio. Just like architects use specific tools to design buildings, you, as a cloud architect, use MeshMap to design your cloud-native applications.
+
+## Step 2: Giving Your Design a Name
+
+Initiate the design process by clicking on the "New Design" button in the Designer panel. Provide a meaningful name for your design, reflecting its purpose or key components. This action initializes a unique design entity, establishing it within the system.
+
+**Example Analogy:**
+Naming your design is like labeling a blueprint for a mobile app. It helps everyone involved understand the app's purpose and functionality.
+
+## Step 3: Browsing Available Components
+
+Explore the extensive toolbox in Designer mode, offering a diverse array of components such as microservices, databases, and event queues. Each component seamlessly integrates into your infrastructure. As you explore components, MeshMap dynamically previews their integration into your design, ensuring a harmonious fit.
+
+**Example Analogy:**
+Think of the toolbox as a palette of building blocks for your cloud-native app. Just like selecting different materials for a construction project, you choose components for your app's architecture.
+
+## Step 4: Selecting Specific Versions
+
+To ensure precision in your design, select the specific version of each component you need. MeshMap supports a variety of versions for different components, allowing you to tailor your design to meet your exact requirements. A compatibility check is conducted, ensuring that selected versions align seamlessly within your design.
+
+**Example Analogy:**
+Choosing component versions is similar to selecting software versions for your cloud-native app. It's like picking the right versions of libraries to ensure your app functions smoothly.
+
+## Step 5: Building Complex Cloud-Native Deployments
+
+With the Designer toolbox at your disposal, effortlessly construct complex cloud-native deployments. Simply drag and drop components onto the MeshMap canvas, arranging them in a way that suits your architecture. MeshMap renders your design in real-time as you drag and drop components, providing immediate visual feedback.
+
+**Example Analogy:**
+Building your deployment is like assembling a puzzle. Each component fits together to create a cohesive picture—the architecture of your cloud-native app.
+
+## Step 6: Configuring Each Component
+
+Fine-tune your design by configuring each component using the Configuration panel. MeshMap's intuitive interface enables you to adjust settings and parameters effortlessly. Your design will automatically update with each change made. MeshMap's auto-sync feature ensures that configuration changes are instantly reflected in the design canvas.
+
+**Example Analogy:**
+Configuring components is like customizing app settings. You tweak each component to ensure they work seamlessly together, just like adjusting preferences in a mobile app.
+
+## Step 7: Design Actions and Interactions
+
+Explore additional design actions by right-clicking on components. Group components together or establish connections between them according to your needs. MeshMap responds in real-time to design actions, providing a fluid and responsive user experience.
+
+**Example Analogy:**
+Design actions are akin to arranging app features. You organize components like arranging app features on a dashboard, creating an intuitive and user-friendly experience.
+
+## Step 8: Merging Designs
+
+For enhanced collaboration and scalability, seamlessly merge existing designs into your canvas by dragging and dropping. This feature enables you to consolidate multiple designs, creating a unified and comprehensive view of your infrastructure. MeshMap orchestrates the merging process internally, creating a unified design that incorporates components from the dragged designs. Importantly, users do not lose their original designs during the merging process. MeshMap retains records of each design, preserving their individuality. The act of merging designs dynamically adjusts the visibility of the merged design, aligning with user intentions and access controls.
+
+**Example Analogy:**
+Merging designs is like integrating features from different app versions. You bring together different elements to create a cohesive and feature-rich user experience without losing the uniqueness of each version.
+
+Congratulations! You've successfully navigated the Designer mode in MeshMap, orchestrating a robust and tailored cloud-native deployment. Continue exploring MeshMap's features to optimize and manage your designs effectively.
+
+Happy designing!
+
+
 
 
 <!-- Text can be **bold**, _italic_, or ~~strikethrough~~. [Links](https://gohugo.io) should be blue with no underlines (unless hovered over).

docker-compose.yaml

@@ -1,13 +1,10 @@
-version: "3.3"
+version: '3'
 
 services:
-
-  site:
-    image: docsy/docsy-example
-    build:
-      context: .
-    command: server
+  hugo:
+    image: floryn90/hugo:ext-alpine
     ports:
       - "1313:1313"
     volumes:
       - .:/src
+    command: server --buildDrafts --buildFuture --bind 0.0.0.0