From af5b002d820a8b0c7b909aea46156631fa6ca3e7 Mon Sep 17 00:00:00 2001
From: Priyash <38959321+priyashpatil@users.noreply.github.com>
Date: Wed, 18 Jun 2025 00:01:20 +0530
Subject: [PATCH] docs: add quickstart and prologue

---
 docs/components/Docs/Navigation.vue           |   2 +-
 .../1.introduction.md}                        |   0
 .../6.about.md => 1.prologue/2.about.md}      |   0
 .../3.changelog.md}                           |   0
 .../4.upgrade-guide.md}                       |   0
 .../5.contributing.md}                        |   0
 .../docs/2.getting-started/1.quickstart.md    | 139 ++++++++++++++++++
 ...-others.md => 4.these-images-vs-others.md} |   0
 ...hoosing-a-host.md => 5.choosing-a-host.md} |   0
 docs/nuxt.config.ts                           |   8 +-
 10 files changed, 147 insertions(+), 2 deletions(-)
 rename docs/content/docs/{1.index.md => 1.prologue/1.introduction.md} (100%)
 rename docs/content/docs/{2.getting-started/6.about.md => 1.prologue/2.about.md} (100%)
 rename docs/content/docs/{2.getting-started/5.changelog.md => 1.prologue/3.changelog.md} (100%)
 rename docs/content/docs/{2.getting-started/3.upgrade-guide.md => 1.prologue/4.upgrade-guide.md} (100%)
 rename docs/content/docs/{2.getting-started/7.contributing.md => 1.prologue/5.contributing.md} (100%)
 create mode 100644 docs/content/docs/2.getting-started/1.quickstart.md
 rename docs/content/docs/2.getting-started/{1.these-images-vs-others.md => 4.these-images-vs-others.md} (100%)
 rename docs/content/docs/2.getting-started/{4.choosing-a-host.md => 5.choosing-a-host.md} (100%)

diff --git a/docs/components/Docs/Navigation.vue b/docs/components/Docs/Navigation.vue
index edf7a265d..a69c7f4f0 100644
--- a/docs/components/Docs/Navigation.vue
+++ b/docs/components/Docs/Navigation.vue
@@ -1,7 +1,7 @@
 <template>
     <nav>
         <ul role="list">
-            <li class="relative my-6">
+            <li class="relative my-6" v-if="navigation[0]._path != '/docs'">
                 <h2 class="text-xs font-semibold text-white">
                     {{ navigation[0].title }}
                 </h2>
diff --git a/docs/content/docs/1.index.md b/docs/content/docs/1.prologue/1.introduction.md
similarity index 100%
rename from docs/content/docs/1.index.md
rename to docs/content/docs/1.prologue/1.introduction.md
diff --git a/docs/content/docs/2.getting-started/6.about.md b/docs/content/docs/1.prologue/2.about.md
similarity index 100%
rename from docs/content/docs/2.getting-started/6.about.md
rename to docs/content/docs/1.prologue/2.about.md
diff --git a/docs/content/docs/2.getting-started/5.changelog.md b/docs/content/docs/1.prologue/3.changelog.md
similarity index 100%
rename from docs/content/docs/2.getting-started/5.changelog.md
rename to docs/content/docs/1.prologue/3.changelog.md
diff --git a/docs/content/docs/2.getting-started/3.upgrade-guide.md b/docs/content/docs/1.prologue/4.upgrade-guide.md
similarity index 100%
rename from docs/content/docs/2.getting-started/3.upgrade-guide.md
rename to docs/content/docs/1.prologue/4.upgrade-guide.md
diff --git a/docs/content/docs/2.getting-started/7.contributing.md b/docs/content/docs/1.prologue/5.contributing.md
similarity index 100%
rename from docs/content/docs/2.getting-started/7.contributing.md
rename to docs/content/docs/1.prologue/5.contributing.md
diff --git a/docs/content/docs/2.getting-started/1.quickstart.md b/docs/content/docs/2.getting-started/1.quickstart.md
new file mode 100644
index 000000000..eed1e8b64
--- /dev/null
+++ b/docs/content/docs/2.getting-started/1.quickstart.md
@@ -0,0 +1,139 @@
+---
+head.title: 'Quickstart - Docker PHP - Server Side Up'
+description: 'Get started with serversideup/php Docker Images.'
+layout: docs
+---
+
+# Quickstart
+
+**serversideup/php** provides a variety of PHP Docker images that are optimized for production use. You can find the list of available images in the [installation guide](/docs/getting-started/installation). For this quickstart guide, we'll use the `serversideup/php:8.4-fpm-nginx-alpine` image.
+
+## Setting Up Your Demo Application
+
+Create a simple PHP application structure:
+
+::code-panel
+---
+label: Directory Structure
+---
+```shell
+.
+├── demo-app
+│   └── public
+│       └── index.php
+├── docker-compose.yaml
+└── Dockerfile
+````
+::
+
+Next, create the `index.php` file inside the `demo-app/public` directory with the following content:
+
+::code-panel
+---
+label: index.php
+---
+```php
+<?php
+
+phpinfo();
+```
+::
+
+## Docker Examples
+
+Depending on your production environment, you may have a single small server with docker installed, or you may have kubernetes cluster. Regardless, we'll cover both docker compose and dockerfile options.
+
+The `serversideup/php:8.4-fpm-nginx-alpine` image includes Nginx, pre-configured to serve files from the `/var/www/html/public` directory. For more information on default configurations and environment variables, refer to our [default configurations](/docs/getting-started/default-configurations) and the [environment variable specification](/docs/reference/environment-variable-specification).
+
+### 1\. Running with Docker Compose
+
+Docker Compose is used to define and run multi-container Docker applications, simplifying environment setup and execution.
+
+Create a `docker-compose.yaml` file in your project's root directory:
+
+::code-panel
+---
+label: docker-compose.yaml
+---
+```yaml
+services:
+  sample-app:
+    image: serversideup/php:8.4-fpm-nginx-alpine
+    ports:
+      - "80:8080"
+    environment:
+      - PHP_OPCACHE_ENABLE=1
+    volumes:
+      - ./demo-app:/var/www/html
+```
+::
+
+**Explanation:**
+
+* `image: serversideup/php:8.4-fpm-nginx-alpine`: Specifies the Docker image.
+* `ports: - "80:8080"`: Maps host port `80` to container port `8080` (where Nginx listens).
+* `environment: - PHP_OPCACHE_ENABLE=1`: Activates **OPcache**, a PHP extension for performance improvement.
+* `volumes: - ./demo-app:/var/www/html`: Mounts your local `demo-app` directory into the container's `/var/www/html` path. Local file changes are reflected in the running container.
+
+To run your application, navigate to your project's root directory in your terminal and execute:
+
+::code-panel
+---
+label: Run Docker Compose
+---
+```bash
+docker compose up
+```
+::
+
+Visit [http://localhost](http://localhost) in your web browser. The `phpinfo()` output confirms your application is running.
+
+### 2\. Building with a Dockerfile
+
+A Dockerfile allows you to create a custom, self-contained image that includes your application. This method is suitable for building deployable images.
+
+Create a `Dockerfile` in your project's root directory:
+
+::code-panel
+---
+label: "Dockerfile"
+---
+```dockerfile
+FROM serversideup/php:8.4-fpm-nginx-alpine
+
+COPY ./demo-app /var/www/html
+
+ENV PHP_OPCACHE_ENABLE=1
+```
+::
+
+**Explanation:**
+
+* `FROM serversideup/php:8.4-fpm-nginx-alpine`: Sets the base image for your Docker build.
+* `COPY ./demo-app /var/www/html`: Copies the contents of your local `demo-app` directory into the `/var/www/html` path inside the Docker image.
+* `ENV PHP_OPCACHE_ENABLE=1`: Sets the environment variable to enable OPcache.
+
+To build and run your image: First, build your Docker image, tagging it as `sample-app` then run the built image, mapping the necessary ports:
+
+::code-panel
+---
+label: Build and Run Dockerfile
+---
+```bash
+docker build -t sample-app .
+docker run -p 80:8080 sample-app
+```
+::
+
+Then, visit [http://localhost](http://localhost) in your browser. The `phpinfo()` output indicates your Dockerfile-built application is running.
+
+## Next Steps
+
+For further details and advanced usage, refer to the comprehensive documentation.
+
+* [Installation](/docs/getting-started/installation)
+* [Default Configurations](/docs/getting-started/default-configurations)
+* [Laravel Automations](/docs/laravel/laravel-automations)
+* [Environment Variable Specification](/docs/reference/environment-variable-specification)
+* [Customizing the Image](/docs/customizing-the-image)
+* [Installing Additional PHP Extensions](/docs/customizing-the-image/installing-additional-php-extensions)
diff --git a/docs/content/docs/2.getting-started/1.these-images-vs-others.md b/docs/content/docs/2.getting-started/4.these-images-vs-others.md
similarity index 100%
rename from docs/content/docs/2.getting-started/1.these-images-vs-others.md
rename to docs/content/docs/2.getting-started/4.these-images-vs-others.md
diff --git a/docs/content/docs/2.getting-started/4.choosing-a-host.md b/docs/content/docs/2.getting-started/5.choosing-a-host.md
similarity index 100%
rename from docs/content/docs/2.getting-started/4.choosing-a-host.md
rename to docs/content/docs/2.getting-started/5.choosing-a-host.md
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index acecb5b3d..3c2269944 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -83,5 +83,11 @@ export default defineNuxtConfig({
             plugins: [tailwindTypography]
         },
         cssPath: '~/assets/css/tailwind.css',
-    }
+    },
+
+    routeRules: {
+        "/docs": {
+            redirect: "/docs/prologue/introduction",
+        },
+    },
 })