refactor some shit

README.md

@@ -36,41 +36,111 @@ A modern, feature-rich blog system built with **Next.js 14**, **TypeScript**, an
 ```
 markdownblog/
 ├── src/
-│   ├── app/
+│   ├── app/                      # Next.js 14 App Router
-│   │   ├── admin/                 # Admin dashboard pages
+│   │   ├── admin/               # Admin dashboard pages
-│   │   │   ├── manage/           # Content management interface
+│   │   │   ├── manage/          # Content management interface
-│   │   │   └── page.tsx          # Main admin dashboard
+│   │   │   │   └── page.tsx     # Manage posts and folders
-│   │   ├── api/                  # API routes
+│   │   │   └── page.tsx         # Main admin dashboard
+│   │   ├── api/                 # API routes (Next.js API routes)
 │   │   │   ├── admin/           # Admin API endpoints
 │   │   │   │   ├── delete/      # Delete posts/folders
+│   │   │   │   │   └── route.ts
 │   │   │   │   ├── docker/      # Docker detection
-│   │   │   │   ├── export/      # Export functionality
+│   │   │   │   │   └── route.ts
+│   │   │   │   ├── export/      # Export functionality (Docker)
+│   │   │   │   │   └── route.ts
+│   │   │   │   ├── exportlocal/ # Export functionality (Local)
+│   │   │   │   │   └── route.ts
 │   │   │   │   ├── folders/     # Folder management
+│   │   │   │   │   ├── details/ # Folder details API
+│   │   │   │   │   │   └── route.ts
+│   │   │   │   │   └── route.ts
 │   │   │   │   ├── password/    # Password management
+│   │   │   │   │   └── route.ts
 │   │   │   │   ├── posts/       # Post CRUD operations
+│   │   │   │   │   ├── move/    # Move posts between folders
+│   │   │   │   │   │   └── route.ts
+│   │   │   │   │   ├── raw/     # Get raw post content
+│   │   │   │   │   │   └── route.ts
+│   │   │   │   │   ├── route.ts
+│   │   │   │   │   └── size/    # Get post size info
+│   │   │   │   │       └── route.ts
 │   │   │   │   └── upload/      # File upload handling
+│   │   │   │       └── route.ts
 │   │   │   └── posts/           # Public post API
+│   │   │       ├── [slug]/      # Dynamic post API routes
+│   │   │       │   └── route.ts
+│   │   │       └── route.ts     # List all posts
 │   │   ├── posts/               # Blog post pages
-│   │   │   └── [...slug]/       # Dynamic post routing
+│   │   │   └── [...slug]/       # Dynamic post routing (catch-all)
-│   │   ├── globals.css          # Global styles
+│   │   │       └── page.tsx     # Individual post page with anchor linking
-│   │   ├── layout.tsx           # Root layout
+│   │   ├── AboutButton.tsx      # About page button component
-│   │   └── page.tsx             # Homepage
+│   │   ├── BadgeButton.tsx      # Badge display component
-│   └── lib/
+│   │   ├── globals.css          # Global styles and Tailwind imports
-│       ├── markdown.ts          # Markdown processing utilities
+│   │   ├── HeaderButtons.tsx    # Header navigation buttons
-│       └── postsDirectory.ts    # Post directory management
+│   │   ├── highlight-github.css # Code syntax highlighting styles
-├── posts/                       # Markdown blog posts
+│   │   ├── layout.tsx           # Root layout with metadata
+│   │   ├── MobileNav.tsx        # Mobile navigation component
+│   │   └── page.tsx             # Homepage with post listing
+│   └── lib/                     # Utility libraries
+│       ├── markdown.ts          # Markdown processing with marked.js
+│       └── postsDirectory.ts    # Post directory management and parsing
+├── posts/                       # Markdown blog posts storage
 │   ├── pinned.json             # Pinned posts configuration
-│   ├── welcome.md              # Welcome post
+│   ├── welcome.md              # Welcome post with frontmatter
-│   └── mdtest.md               # Test post
+│   ├── mdtest.md               # Test post with various markdown features
-├── public/                      # Static assets (favicons, etc.)
+│   ├── anchor-test.md          # Test post for anchor linking
-├── electron/                    # Desktop app configuration
+│   └── ii/                     # Example nested folder structure
-│   └── main.js                 # Electron main process
+├── public/                      # Static assets
+│   ├── android-chrome-192x192.png
+│   ├── android-chrome-512x512.png
+│   ├── apple-touch-icon.png
+│   ├── favicon-16x16.png
+│   ├── favicon-32x32.png
+│   ├── favicon.ico
+│   └── site.webmanifest
+├── electron/                    # Desktop application
+│   └── main.js                 # Electron main process configuration
 ├── Dockerfile                   # Docker container configuration
 ├── docker.sh                    # Docker deployment script
-├── entrypoint.sh               # Container entrypoint
+├── entrypoint.sh               # Container entrypoint script
-└── package.json                # Dependencies and scripts
+├── next-env.d.ts               # Next.js TypeScript definitions
+├── next.config.js              # Next.js configuration
+├── package-lock.json           # npm lock file
+├── package.json                # Dependencies and scripts
+├── postcss.config.js           # PostCSS configuration
+├── tailwind.config.js          # Tailwind CSS configuration
+├── tsconfig.json               # TypeScript configuration
+└── LICENSE                     # MIT License
 ```
 
+### Key Components
+
+#### Frontend (Next.js 14 App Router)
+- **`src/app/page.tsx`**: Homepage with responsive post listing and search
+- **`src/app/posts/[...slug]/page.tsx`**: Individual post pages with anchor linking support
+- **`src/app/admin/page.tsx`**: Admin dashboard with content management
+- **`src/app/admin/manage/page.tsx`**: Advanced content management interface
+
+#### API Routes
+- **Post Management**: CRUD operations for blog posts
+- **Folder Management**: Create, delete, and organize content structure
+- **Authentication**: Password management and validation
+- **Export**: Docker and local export functionality
+- **Upload**: Drag & drop file upload handling
+
+#### Utilities
+- **`src/lib/markdown.ts`**: Markdown processing with syntax highlighting
+- **`src/lib/postsDirectory.ts`**: File system operations and post parsing
+
+#### Desktop App
+- **`electron/main.js`**: Electron configuration for desktop application
+
+#### Deployment
+- **`Dockerfile`**: Multi-stage build for production deployment
+- **`docker.sh`**: Automated deployment script with volume management
+- **`entrypoint.sh`**: Container initialization and post setup
+
 ---
 
 ## ⚡ Quick Start

posts/anchor-test.md

@@ -1,101 +0,0 @@
----
-title: Anchor Link Test
-date: '2025-01-20'
-tags:
-  - test
-  - anchors
-summary: Testing anchor link functionality
-author: Test Author
----
-
-# Anchor Link Test
-
-This is a test page to verify that anchor links work correctly.
-
-## Table of Contents
-
-- [Overview](#overview)
-- [Basic Headings](#basic-headings)
-- [Special Characters](#special-characters)
-- [Numbers and Symbols](#numbers-and-symbols)
-- [Long Headings](#long-headings)
-- [Nested Sections](#nested-sections)
-
-## Overview
-
-This section tests basic anchor linking functionality.
-
-## Basic Headings
-
-### Simple Heading
-This is a simple heading with basic text.
-
-### Another Heading
-This is another heading to test multiple anchors.
-
-## Special Characters
-
-### Heading with Special Chars: @#$%^&*()
-This heading contains special characters that should be properly slugified.
-
-### Heading with Spaces and Dashes
-This heading has spaces and should be converted to dashes.
-
-### Heading_with_Underscores
-This heading uses underscores instead of spaces.
-
-## Numbers and Symbols
-
-### Heading with Numbers 123
-This heading includes numbers.
-
-### Heading with Symbols !@#$%^&*()
-This heading has various symbols.
-
-## Long Headings
-
-### This is a Very Long Heading That Should Still Work Properly Even When It Contains Many Words and Characters
-This heading is intentionally long to test slugification with extended text.
-
-## Nested Sections
-
-### Level 3 Heading
-This is a level 3 heading.
-
-#### Level 4 Heading
-This is a level 4 heading.
-
-##### Level 5 Heading
-This is a level 5 heading.
-
-###### Level 6 Heading
-This is a level 6 heading.
-
-### Another Level 3
-This is another level 3 heading.
-
-## Test Links
-
-You can test the anchor links by clicking on these:
-
-- [Go to Overview](#overview)
-- [Go to Basic Headings](#basic-headings)
-- [Go to Special Characters](#special-characters)
-- [Go to Numbers and Symbols](#numbers-and-symbols)
-- [Go to Long Headings](#long-headings)
-- [Go to Nested Sections](#nested-sections)
-- [Go to Level 3 Heading](#level-3-heading)
-- [Go to Level 4 Heading](#level-4-heading)
-- [Go to Level 5 Heading](#level-5-heading)
-- [Go to Level 6 Heading](#level-6-heading)
-
-## Simple Test
-
-### Test Heading
-This is a simple test heading to verify anchor linking works.
-
-- [Go to Test Heading](#test-heading)
-
-## Conclusion
-
-If all the links above work correctly, the anchor linking system is functioning properly! 

posts/welcome.md

@@ -10,6 +10,20 @@ author: Rattatwinko's
 
 # Welcome to the Blog
 
+## Overview
+
+- [Starting Things off!](#starting-things-off)
+- [Formatting](#formatting)
+- [Some Technical Information](#some-technical-information)
+- [Building](#building)
+- [Administration](#administration)
+- [Todo List for the Project](#todo)
+- [Issues with the Project](#issues)
+- [Changelog](#changelog)
+- [Closing Statements](#closing-statements)
+
+## Starting Things off!
+
 This blog was built as a response to the lack of blogging systems that accept "human readable" formats editable in a terminal emulator.
 
 **Prerequisites:**
@@ -101,12 +115,10 @@ You can pin a post both in the UI and in the backend of the server.
 |                   Status                      |                       Task                        |
 |:---------------------------------------------:|:-------------------------------------------------:|
 |<span style="color:green;text-align:center;">DONE</span>|Code Editor in Admin Panel with saving!|
-|<span style="color:orange;"> SEMI </span>| Exporting Tar of 'Posts/' Folder|
+|<span style="color:green;"> DONE! </span>| Exporting Tar of 'Posts/' Folder|
+|<span style="color:green;"> DONE! </span>| Mobile Viewing of the Website|
+|<span style="color:orange;"> TO BE DONE! | Refactoring of the Code (Removing Garbage-Code)
 
-### <span style="color:#d42c2c;">Exporting of Folder:</span>
-
-This for now atleast , only works with Next.JS Production Server `npm install && npm run build && npm start` for reference.
-Docker Support for now is limited. I've gotten Persistence working. ( On Branch PM2 )
 
 ---
 
@@ -116,6 +128,15 @@ If any issues pop up, please open a Gitea issue with **proper** error reports!
 
 ---
 
+## Changelog:
+
+- Via merging of branch **"mobile"**:
+    - Will have support for mobile devices
+    - Scrolling will be "different" (auto header scroll trough links)
+    - Styling will be responsive!
+
+---
+
 ## Closing Statements
 
 Developing of this Applet has been really fun! Thanks JavaScript for fucking my ass harder than , eh ... idk , im gay, i cant make jokes about this.

src/app/admin/page.tsx

@@ -695,35 +695,37 @@ export default function AdminPage() {
           {/* Mobile-friendly header */}
           <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-6 sm:mb-8 space-y-4 sm:space-y-0">
             <h1 className="text-2xl sm:text-3xl font-bold">Admin Dashboard</h1>
-            <div className="flex flex-col sm:flex-row gap-2 sm:gap-2">
+            <div className="flex flex-col gap-3 sm:flex-row sm:gap-2">
-              <button
+              <div className="flex flex-col sm:flex-row gap-2">
-                onClick={handleLogout}
+                <button
-                className="px-4 py-3 sm:py-2 bg-red-600 text-white rounded hover:bg-red-700 text-base font-medium"
+                  onClick={handleLogout}
-              >
+                  className="w-full sm:w-auto px-4 py-3 sm:py-2 bg-red-600 text-white rounded hover:bg-red-700 text-sm sm:text-base font-medium"
-                Logout
+                >
-              </button>
+                  Logout
-              <button
+                </button>
-                onClick={() => setShowChangePassword(true)}
+                <button
-                className="px-4 py-3 sm:py-2 bg-blue-600 text-white rounded hover:bg-blue-700 text-base font-medium"
+                  onClick={() => setShowChangePassword(true)}
-              >
+                  className="w-full sm:w-auto px-4 py-3 sm:py-2 bg-blue-600 text-white rounded hover:bg-blue-700 text-sm sm:text-base font-medium"
-                Passwort ändern
+                >
-              </button>
+                  Passwort ändern
+                </button>
+              </div>
               {/* Docker warning above export button */}
               {isDocker && (
                 <div className="px-4 py-2 bg-yellow-200 text-yellow-900 rounded border border-yellow-400 font-semibold text-xs sm:text-sm text-center">
                   <span className="font-bold">Warning:</span> Docker is in use. Exporting will export the entire <span className="font-mono">/app</span> root directory (including all files and folders in the container's root).
                 </div>
               )}
-              <div className="flex items-center gap-2">
+              <div className="flex flex-col sm:flex-row items-center gap-2">
                 <button
                   onClick={handleExportTarball}
-                  className="px-4 py-3 sm:py-2 bg-green-600 text-white rounded hover:bg-green-700 text-base font-medium"
+                  className="w-full sm:w-auto px-4 py-3 sm:py-2 bg-green-600 text-white rounded hover:bg-green-700 text-sm sm:text-base font-medium whitespace-nowrap"
                   title="Export Docker Posts"
                 >
                   Export Posts
                 </button>
                 {rememberExportChoice && lastExportChoice && (
-                  <div className="flex items-center gap-1 text-xs text-gray-600">
+                  <div className="flex items-center gap-1 text-xs text-gray-600 w-full sm:w-auto justify-center sm:justify-start">
                     <span>💾 {lastExportChoice === 'docker' ? 'Docker' : 'Local'}</span>
                     <button
                       onClick={clearExportChoice}