rattatwinko/markdownblog
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor some shit

Browse Source
This commit is contained in:
rattatwinko
2025-06-21 22:26:22 +02:00
parent 9d6eee0f93
commit 15afa15794
4 changed files with 135 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
README.md
View File

@@ -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
│ │ │ ├── manage/ # Content management interface
│ │ │ │ └── page.tsx # Manage posts and folders
│ │ │ └── page.tsx # Main admin dashboard
│ │ ├── api/ # API routes
│ │ ├── 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
│ │ ├── globals.css # Global styles
│ │ ├── layout.tsx # Root layout
│ │ └── page.tsx # Homepage
│ └── lib/
│ ├── markdown.ts # Markdown processing utilities
│ └── postsDirectory.ts # Post directory management
├── posts/ # Markdown blog posts
│ │ │ └── [...slug]/ # Dynamic post routing (catch-all)
│ │ │ └── page.tsx # Individual post page with anchor linking
│ │ ├── AboutButton.tsx # About page button component
│ │ ├── BadgeButton.tsx # Badge display component
│ │ ├── globals.css # Global styles and Tailwind imports
│ │ ├── HeaderButtons.tsx # Header navigation buttons
│ │ ├── highlight-github.css # Code syntax highlighting styles
│ │ ├── 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
│ └── mdtest.md # Test post
├── public/ # Static assets (favicons, etc.)
├── electron/ # Desktop app configuration
│ └── main.js # Electron main process
│ ├── welcome.md # Welcome post with frontmatter
│ ├── mdtest.md # Test post with various markdown features
│ ├── anchor-test.md # Test post for anchor linking
│ └── ii/ # Example nested folder structure
├── 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
└── package.json # Dependencies and scripts
├── entrypoint.sh # Container entrypoint script
├── 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

101
posts/anchor-test.md
View File

@@ -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!

31
posts/welcome.md
View File

@@ -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.

14
src/app/admin/page.tsx
View File

@@ -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">
<div className="flex flex-col sm:flex-row gap-2">
<button
onClick={handleLogout}
className="px-4 py-3 sm:py-2 bg-red-600 text-white rounded hover:bg-red-700 text-base font-medium"
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>
<button
onClick={() => setShowChangePassword(true)}
className="px-4 py-3 sm:py-2 bg-blue-600 text-white rounded hover:bg-blue-700 text-base font-medium"
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>
</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}