add table for displaying dir content

.ddev/config.yaml

@@ -7,8 +7,8 @@ xdebug_enabled: false
 additional_hostnames: []
 additional_fqdns: []
 database:
-    type: postgres
+    type: mariadb
-    version: "17"
+    version: "10.11"
 use_dns_when_possible: true
 composer_version: "2"
 web_environment: []

.env

@@ -18,5 +18,3 @@
 APP_ENV=dev
 APP_SECRET=bfc9c288ee3dcce80dec8622c2870f27
 ###< symfony/framework-bundle ###
-
-DATA_DIR='/var/www/html/data'

.gitea/workflows/build.yaml

@@ -7,14 +7,17 @@ on:
       - main
 jobs:
   build:
-    runs-on: remote
+    runs-on: ubuntu-latest
     steps:
+      - uses: actions/checkout@v4
+      - uses: docker/login-action@v1
+        with:
+          registry: git.simonis.lol
+          username: ${{ vars.DOCKER_USER }}
+          password: ${{ vars.DOCKER_PW }}
 
-      - name: Checkout
+      - name: build
-        uses: https://git.simonis.lol/actions/checkout@v2
+        run: docker build -t git.simonis.lol/sites/file-explorer:latest .
 
-      - name: Build
+      - name: push
-        run: docker buildx build -t git.simonis.lol/projects/file-explorer:latest .
+        run: docker push git.simonis.lol/sites/file-explorer:latest
-
-      - name: Push
-        run: docker push git.simonis.lol/projects/file-explorer:latest

Dockerfile

@@ -17,4 +17,4 @@ RUN docker-php-ext-install pdo pdo_mysql mysqli gd opcache intl zip calendar dom
 RUN pecl install apcu && docker-php-ext-enable apcu
 
 WORKDIR /var/www/project
-RUN composer install --optimize-autoloader --no-suggest --no-progress
+RUN composer install --no-dev --optimize-autoloader --no-suggest --no-progress

assets/app.js

@@ -1,4 +1,3 @@
-import './bootstrap.js';
 /*
  * Welcome to your app's main JavaScript file!
  *

assets/bootstrap.js

@@ -1,5 +0,0 @@
-import { startStimulusApp } from '@symfony/stimulus-bundle';
-
-const app = startStimulusApp();
-// register any custom, 3rd party controllers here
-// app.register('some_controller_name', SomeImportedController);

assets/controllers.json

@@ -1,4 +0,0 @@
-{
-    "controllers": [],
-    "entrypoints": []
-}

assets/controllers/upload_file_controller.js

@@ -1,9 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-
-export default class extends Controller {
-    connect() {
-        this.element.querySelector('input').addEventListener('change', () => {
-            this.element.querySelector('button[type="submit"]').click();
-        });
-    }
-}

assets/icons/file/upload.svg

@@ -1,3 +0,0 @@
-<svg class="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
-    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
-</svg>

assets/styles/app.css

@@ -1,8 +1,3 @@
 body {
     background-color: transparent;
 }
-
-a:hover {
-    color: deepskyblue;
-    text-decoration: underline;
-}

composer.json

@@ -13,18 +13,13 @@
         "symfony/dotenv": "7.1.*",
         "symfony/finder": "7.1.*",
         "symfony/flex": "^2",
-        "symfony/form": "^7.1",
         "symfony/framework-bundle": "7.1.*",
-        "symfony/mime": "7.1.*",
         "symfony/runtime": "7.1.*",
-        "symfony/stimulus-bundle": "^2.22",
         "symfony/twig-bundle": "7.1.*",
         "symfony/ux-icons": "^2.22",
         "symfony/yaml": "7.1.*",
-        "symfonycasts/tailwind-bundle": "^0.6.1",
         "twig/extra-bundle": "^2.12|^3.0",
-        "twig/twig": "^2.12|^3.0",
+        "twig/twig": "^2.12|^3.0"
-        "ext-fileinfo": "*"
     },
     "config": {
         "allow-plugins": {
@@ -75,9 +70,5 @@
             "allow-contrib": false,
             "require": "7.1.*"
         }
-    },
-    "require-dev": {
-        "symfony/stopwatch": "7.1.*",
-        "symfony/web-profiler-bundle": "7.1.*"
     }
 }

config/bundles.php

@@ -5,7 +5,4 @@ return [
     Symfony\Bundle\TwigBundle\TwigBundle::class => ['all' => true],
     Twig\Extra\TwigExtraBundle\TwigExtraBundle::class => ['all' => true],
     Symfony\UX\Icons\UXIconsBundle::class => ['all' => true],
-    Symfonycasts\TailwindBundle\SymfonycastsTailwindBundle::class => ['all' => true],
-    Symfony\UX\StimulusBundle\StimulusBundle::class => ['all' => true],
-    Symfony\Bundle\WebProfilerBundle\WebProfilerBundle::class => ['dev' => true, 'test' => true],
 ];

config/packages/twig.yaml

@@ -1,7 +1,5 @@
 twig:
     file_name_pattern: '*.twig'
-    globals:
-        routing_service: '@App\Service\Twig\RoutingService'
 
 when@test:
     twig:

config/packages/web_profiler.yaml

@@ -1,17 +0,0 @@
-when@dev:
-    web_profiler:
-        toolbar: true
-        intercept_redirects: false
-
-    framework:
-        profiler:
-            only_exceptions: false
-            collect_serializer_data: true
-
-when@test:
-    web_profiler:
-        toolbar: false
-        intercept_redirects: false
-
-    framework:
-        profiler: { collect: false }

config/routes/web_profiler.yaml

@@ -1,8 +0,0 @@
-when@dev:
-    web_profiler_wdt:
-        resource: '@WebProfilerBundle/Resources/config/routing/wdt.xml'
-        prefix: /_wdt
-
-    web_profiler_profiler:
-        resource: '@WebProfilerBundle/Resources/config/routing/profiler.xml'
-        prefix: /_profiler

importmap.php

@@ -16,10 +16,4 @@ return [
         'path' => './assets/app.js',
         'entrypoint' => true,
     ],
-    '@hotwired/stimulus' => [
-        'version' => '3.2.2',
-    ],
-    '@symfony/stimulus-bundle' => [
-        'path' => './vendor/symfony/stimulus-bundle/assets/dist/loader.js',
-    ],
 ];

src/Controller/EntrypointController.php

@@ -1,18 +0,0 @@
-<?php
-declare(strict_types=1);
-
-namespace App\Controller;
-
-use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
-use Symfony\Component\HttpFoundation\Request;
-use Symfony\Component\HttpFoundation\Response;
-use Symfony\Component\Routing\Attribute\Route;
-
-class EntrypointController extends AbstractController
-{
-    #[Route(path: '/', name: 'app_root', methods: Request::METHOD_GET)]
-    public function __invoke(): Response
-    {
-        return $this->redirectToRoute('app_home');
-    }
-}

src/Controller/HomeController.php

@@ -2,7 +2,6 @@
 
 namespace App\Controller;
 
-use App\Forms\UploadFileForm;
 use App\Service\FileSystemService;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\Request;
@@ -11,24 +10,11 @@ use Symfony\Component\Routing\Attribute\Route;
 
 class HomeController extends AbstractController
 {
-    #[Route(
+    #[Route(path: '/', name: 'app_home', methods: Request::METHOD_GET)]
-        path: '/files/{dirs?}',
+    public function __invoke(
-        name: 'app_home',
+        FileSystemService $fileSystemService
-        requirements: ['dirs' => '.+'],
+    ): Response
-        defaults: ['dirs' => ''],
-        methods: [Request::METHOD_GET]
-    )]
-    public function __invoke(FileSystemService $fileSystemService, string $dirs): Response
     {
-        if ($fileSystemService->isFile(substr_replace($dirs, '', -1))) {
+        return $this->render('home.html.twig', ['content' => $fileSystemService->getDirs()]);
-            return $this->render('file.html.twig', [
-                'file' => $fileSystemService->getFile((string) substr_replace($dirs, '', -1)),
-            ]);
-        }
-
-        return $this->render('home.html.twig', [
-            'content' => $fileSystemService->getDirs($dirs),
-            'fileForm' => $this->createForm(UploadFileForm::class),
-        ]);
     }
 }

src/Controller/ServeFileController.php

@@ -1,28 +0,0 @@
-<?php declare(strict_types=1);
-
-namespace App\Controller;
-
-use App\Service\FileSystemService;
-use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
-use Symfony\Component\HttpFoundation\BinaryFileResponse;
-use Symfony\Component\HttpFoundation\ResponseHeaderBag;
-use Symfony\Component\Routing\Attribute\Route;
-
-class ServeFileController extends AbstractController
-{
-    public function __construct(private FileSystemService $fileSystemService)
-    {
-    }
-
-    #[Route("/serve/{filePath}", name: "serve_file")]
-    public function __invoke(string $filePath): BinaryFileResponse
-    {
-        $file = $this->fileSystemService->getFile($filePath);
-        $path = $file->getPath() . '/' . $file->getName();
-
-        $response = new BinaryFileResponse($path);
-        $response->setContentDisposition(ResponseHeaderBag::DISPOSITION_ATTACHMENT, $file->getName());
-
-        return $response;
-    }
-}

src/Controller/UploadController.php

@@ -1,31 +0,0 @@
-<?php
-declare(strict_types=1);
-
-namespace App\Controller;
-
-use App\Forms\UploadFileForm;
-use App\Objects\UploadedFileData;
-use App\Service\FileSystemService;
-use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
-use Symfony\Component\HttpFoundation\Request;
-use Symfony\Component\HttpFoundation\Response;
-use Symfony\Component\Routing\Attribute\Route;
-
-class UploadController extends AbstractController
-{
-    #[Route(path: '/upload', name: 'app_upload', methods: Request::METHOD_POST)]
-    public function __invoke(
-        FileSystemService $fileSystemService,
-        Request $request,
-    ): Response
-    {
-        $fileData = new UploadedFileData();
-        $form  = $this->createForm(UploadFileForm::class, $fileData)->handleRequest($request);
-
-        if ($form->isSubmitted() && $form->isValid()) {
-            $fileSystemService->uploadFile($fileData->files);
-        }
-
-        return $this->redirectToRoute('app_home');
-    }
-}

src/Forms/UploadFileForm.php

@@ -1,25 +0,0 @@
-<?php
-
-namespace App\Forms;
-
-use Symfony\Component\Form\AbstractType;
-use Symfony\Component\Form\Extension\Core\Type\FileType;
-use Symfony\Component\Form\FormBuilderInterface;
-use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
-
-class UploadFileForm extends AbstractType
-{
-    public function __construct(private readonly UrlGeneratorInterface $urlGenerator)
-    {
-    }
-
-    public function buildForm(FormBuilderInterface $builder, array $options)
-    {
-        $builder
-            ->setAction($this->urlGenerator->generate('app_upload'))
-            ->add('files', FileType::class, [
-            'attr' => ['class' => 'hidden'],
-            'multiple' => true,
-        ]);
-    }
-}

src/Objects/DirContent.php

@@ -6,27 +6,22 @@ namespace App\Objects;
 
 use SplFileInfo;
 
-readonly class DirContent
+class DirContent
 {
     private function __construct(
-        private string $name,
+        private readonly string $name,
-        private int $size,
+        private readonly int $size,
-        private string $type,
+        private readonly string $type,
-        private string $path,
+    )
-        private string $content,
+    {
-        private string $mimeType,
-    ) {
     }
 
-    public static function make(SplFileInfo $fileInfo, string $content = ''): DirContent
+    public static function make(SplFileInfo $fileInfo): DirContent
     {
         return new self(
             $fileInfo->getBasename(),
             $fileInfo->getSize() ?? 0,
             $fileInfo->getType() ?? 'N/A',
-            $fileInfo->getPath(),
-            $content,
-            mime_content_type($fileInfo->getPath() . '/' . $fileInfo->getFilename()),
         );
     }
 
@@ -49,25 +44,10 @@ readonly class DirContent
         return $this->type;
     }
 
-    public function getPath(): string
+    private function getHumanReadableSize()
-    {
-        return $this->path;
-    }
-
-    public function getContent(): string
-    {
-        return $this->content;
-    }
-
-    public function getMimeType(): string
-    {
-        return $this->mimeType;
-    }
-
-    private function getHumanReadableSize(): string
     {
         $bytes = $this->size;
-        $size = ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+        $size = array('B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB');
         $factor = floor((strlen((string) $bytes) - 1) / 3);
 
         return sprintf("%.1f %s", $bytes / (1024 ** $factor), $size[$factor]);

src/Objects/UploadedFileData.php

@@ -1,13 +0,0 @@
-<?php
-
-namespace App\Objects;
-
-use Symfony\Component\HttpFoundation\File\UploadedFile;
-
-class UploadedFileData
-{
-    /**
-     * @var UploadedFile[] $files
-     */
-    public array $files;
-}

src/Service/FileSystemService.php

@@ -4,27 +4,23 @@ namespace App\Service;
 
 use App\Objects\DirContent;
 use Symfony\Component\DependencyInjection\Attribute\Autowire;
-use Symfony\Component\Filesystem\Exception\IOException;
-use Symfony\Component\Filesystem\Filesystem;
 use Symfony\Component\Finder\Finder;
-use Symfony\Component\HttpFoundation\File\UploadedFile;
 
 class FileSystemService
 {
     public function __construct(
         #[Autowire(env: 'DATA_DIR')]
-        private readonly string $dir,
+        private readonly string $dir
-         private readonly Filesystem $filesystem,
     ) {
     }
 
     /**
      * @return DirContent[]
      */
-    public function getDirs(string $dirs): array
+    public function getDirs(): array
     {
         $finder = new Finder();
-        $finder->in($this->getTotalPath($dirs));
+        $finder->in($this->dir);
 
         $contents = [];
 
@@ -34,47 +30,4 @@ class FileSystemService
 
         return $contents;
     }
-
-    /**
-     * @param UploadedFile[] $files
-     */
-    public function uploadFile(array $files): void
-    {
-        foreach ($files as $file) {
-            $this->filesystem->dumpFile($this->getTotalPath($file->getClientOriginalName()), $file->getContent());
-        }
-    }
-
-    public function isFile(string $dirs): bool
-    {
-        try {
-            $this->filesystem->readFile($this->getTotalPath($dirs));
-        } catch (IOException) {
-            return false;
-        }
-
-        return true;
-    }
-
-    public function getFile(string $filePath): DirContent
-    {
-        $dirs = explode('/', $filePath);
-        $fileName = array_pop($dirs);
-
-        $finder = new Finder();
-        $finder->in($this->getTotalPath(implode('/', $dirs)));
-
-        foreach ($finder as $file) {
-            if ($file->getFilename() === $fileName) {
-                return DirContent::make($file, $this->filesystem->readFile($this->getTotalPath($filePath)));
-            }
-        }
-
-        throw new \RuntimeException('File not found');
-    }
-
-    private function getTotalPath(string $filePath): string
-    {
-        return $this->dir . '/' . $filePath;
-    }
 }

src/Service/Twig/RoutingService.php

@@ -1,25 +0,0 @@
-<?php
-declare(strict_types=1);
-
-namespace App\Service\Twig;
-
-use Symfony\Component\HttpFoundation\Request;
-use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
-
-class RoutingService
-{
-    public function __construct(private UrlGeneratorInterface $urlGenerator)
-    {
-    }
-
-    public function goBack(Request $request): string
-    {
-        $dirsString = $request->attributes->get('dirs', '');
-        $dirs = explode('/', $dirsString);
-        if (array_pop($dirs) === '') {
-            array_pop($dirs);
-        }
-
-        return $this->urlGenerator->generate('app_home', ['dirs' => implode('/', $dirs)]);
-    }
-}

symfony.lock

@@ -82,20 +82,6 @@
             "config/routes.yaml"
         ]
     },
-    "symfony/stimulus-bundle": {
-        "version": "2.22",
-        "recipe": {
-            "repo": "github.com/symfony/recipes",
-            "branch": "main",
-            "version": "2.13",
-            "ref": "6acd9ff4f7fd5626d2962109bd4ebab351d43c43"
-        },
-        "files": [
-            "assets/bootstrap.js",
-            "assets/controllers.json",
-            "assets/controllers/hello_controller.js"
-        ]
-    },
     "symfony/twig-bundle": {
         "version": "7.1",
         "recipe": {
@@ -121,22 +107,6 @@
             "assets/icons/symfony.svg"
         ]
     },
-    "symfony/web-profiler-bundle": {
-        "version": "7.1",
-        "recipe": {
-            "repo": "github.com/symfony/recipes",
-            "branch": "main",
-            "version": "6.1",
-            "ref": "e42b3f0177df239add25373083a564e5ead4e13a"
-        },
-        "files": [
-            "config/packages/web_profiler.yaml",
-            "config/routes/web_profiler.yaml"
-        ]
-    },
-    "symfonycasts/tailwind-bundle": {
-        "version": "v0.6.1"
-    },
     "twig/extra-bundle": {
         "version": "v3.16.0"
     }

tailwind.config.js

@@ -1,12 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-    content: [
-        "./assets/**/*.js",
-        "./templates/**/*.html.twig",
-    ],
-    plugins: [
-        require("@tailwindcss/forms")
-    ],
-    darkMode: 'class',
-}
-

templates/_partials/_row.html.twig

@@ -1,26 +1,11 @@
-{% if file.name == '..' %}
+<tr>
-    {% set link = routing_service.goBack(app.request) %}
+    <td>
-{% else %}
+        {% if file.type == 'dir' %}
-    {% set link = path('app_home', {dirs: app.request.attributes.get('dirs', '/') ~ file.name ~ '/'}) %}
+            {{ ux_icon('folder:closed', {height: '32px', width: '32px'}) }}
-{% endif %}
+        {% else %}
-
+            {{ ux_icon('file:default', {height: '32px', width: '32px'}) }}
-
+        {% endif %}
-<tr class="border-b">
-    <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-        <a href="{{ link }}">
-            {% if file.type == 'dir' %}
-                {{ ux_icon('folder:closed', {height: '32px', width: '32px'}) }}
-            {% else %}
-                {{ ux_icon('file:default', {height: '32px', width: '32px'}) }}
-            {% endif %}
-        </a>
-    </th>
-    <td class="px-6 py-4">
-        <a href="{{ link }}">
-            {{ file.name }}
-        </a>
     </td>
-    <td class="px-6 py-4">
+    <td>{{ file.name }}</td>
-        {{ file.size }}
+    <td>{{ file.size }}</td>
-    </td>
+</tr>
-</tr>

templates/_partials/_table.html.twig

@@ -1,41 +1,13 @@
-<div class="max-w-4xl overflow-x-auto shadow-md sm:rounded-lg ">
+<table class="table table-striped table-bordered w-75 mt-5">
-    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+    <thead>
-        <thead class="text-xs text-gray-700 uppercase bg-gray-200 dark:bg-gray-700 dark:text-gray-400">
+    <tr>
-        <tr>
+        <td>Expand</td>
-            <th scope="col" class="px-6 py-3" style="width: 5%;">
+        <th>Name</th>
-
+        <th>Size</th>
-            </th>
+    </thead>
-            <th scope="col" class="px-6 py-3">
+    <tbody>
-                name
+    {% for dirContent in content %}
-            </th>
+    {% include '_partials/_row.html.twig' with {file: dirContent} %}
-            <th scope="col" class="px-6 py-3">
+    {% endfor %}
-                Size
+    </tbody>
-            </th>
+</table>
-        </tr>
-        </thead>
-        <tbody>
-        {% if app.request.requestUri != '/files' %}
-            {% include '_partials/_row.html.twig' with {file: {name: '..', size: '-', type: 'dir'}} %}
-        {% endif %}
-        {% for dirContent in content %}
-            {% include '_partials/_row.html.twig' with {file: dirContent} %}
-        {% endfor %}
-        </tbody>
-    </table>
-</div>
-
-
-{{ form_start(fileForm, {'attr': {'data-controller': 'upload-file'}}) }}
-<div class="flex items-center justify-center max-w-4xl mt-5">
-    <label for="upload_file_form_files"
-           class="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-gray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600">
-        <div class="flex flex-col items-center justify-center pt-5 pb-6">
-            {{ ux_icon('file:upload', {height: '64px', width: '64px'}) }}
-            <p class="mb-2 text-sm text-gray-500 dark:text-gray-400"><span class="font-semibold">Click to upload</span>
-                or drag and drop</p>
-        </div>
-        {{ form_widget(fileForm.files) }}
-        <button type="submit" class="hidden"></button>
-    </label>
-</div>
-{{ form_end(fileForm) }}

templates/base.html.twig

@@ -4,9 +4,7 @@
         <meta charset="UTF-8">
         <title>Files | {% block title %}{% endblock %}</title>
         <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text><text y=%221.3em%22 x=%220.2em%22 font-size=%2276%22 fill=%22%23fff%22>sf</text></svg>">
-        <link href="https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.min.css" rel="stylesheet" />
+        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
-        <script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.min.js"></script>
-
         {% block stylesheets %}
         {% endblock %}
 
@@ -14,7 +12,7 @@
             {% block importmap %}{{ importmap('app') }}{% endblock %}
         {% endblock %}
     </head>
-    <body data-turbo="true">
+    <body>
         {% block body %}{% endblock %}
     </body>
 </html>

templates/file.html.twig

@@ -1,25 +0,0 @@
-{% extends 'base.html.twig' %}
-
-{% block title %}
-    {{ file.name }}
-{% endblock %}
-
-{% block body %}
-    <div class="max-w-2xl mx-auto my-8 p-6 bg-white shadow-lg rounded-lg border">
-        <a href="{{ routing_service.goBack(app.request) }}" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium transition-colors">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
-                 stroke="currentColor" class="w-5 h-5 mr-2">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
-            </svg>
-            Back
-        </a>
-
-        <div class="mt-6 text-gray-700 overflow-auto max-h-96">
-            {% if file.mimeType starts with 'image' %}
-                <img src="{{ path('serve_file', {filePath: file.name}) }}" alt="">
-            {% else %}
-                <p class="whitespace-pre-wrap leading-relaxed break-all text-balance">{{ file.content|raw }}</p>
-            {% endif %}
-        </div>
-    </div>
-{% endblock %}

templates/home.html.twig

@@ -3,7 +3,9 @@
 {% block title %}Home{% endblock %}
 
 {% block body %}
-    <center class="container mt-5 mx-auto">
+    <center class="mt-5">
+        <h1>Welcome to the File Explorer</h1>
+        <p>Use the navigation bar to explore the files and directories.</p>
         {% include '_partials/_table.html.twig' %}
     </center>
-{% endblock %}
+{% endblock %}