Update .env.local with clearer variable explanations, add .vscode to .gitignore, and enhance AdminPage layout with improved label organization and styling for Markdown content and live preview sections.

This commit is contained in:
2025-06-19 19:06:49 +02:00
parent 549cccd526
commit 4dd764826f
3 changed files with 34 additions and 18 deletions

View File

@@ -1,10 +1,10 @@
#---------------------------------------------------------------------# #-------------------------------------------------------------------- # -----------------------------------------------------------------------#
# In here you have to set your socials / links # # In here you have to set your socials / links # Explenations of Variables #
#---------------------------------------------------------------------# #-------------------------------------------------------------------- # -----------------------------------------------------------------------#
NEXT_PUBLIC_BLOG_OWNER=Rattatwinko # Your Name goes here NEXT_PUBLIC_BLOG_OWNER=Rattatwinko # Your Name goes here #
NEXT_ABOUT_ME_LINK="http://localhost:80" # Your WebPage goes here NEXT_ABOUT_ME_LINK="http://localhost:80" # Your WebPage goes here #
NEXT_SOCIAL_INSTAGRAM="http://instagram.com/rattatwinko" # Your Instagram Link goes here NEXT_SOCIAL_INSTAGRAM="http://instagram.com/rattatwinko" # Your Instagram Link goes here #
NEXT_SOCIAL_TWITTER="https://twitter.com/user" # I dont have Twitter , if you have put your user there. NEXT_SOCIAL_TWITTER="https://twitter.com/user" # I dont have Twitter , if you have put your user there. #
NEXT_SOCIAL_GITHUB_STATE="true" # I Have GitHub so this is True (if you dont then set this to false) NEXT_SOCIAL_GITHUB_STATE="true" # I Have GitHub so this is True (if you dont then set this to false) #
NEXT_SOCIAL_GITHUB_LINK_IF_TRUE="http://github.com/ZockerKatze" #If you have GitHub then paste your link here NEXT_SOCIAL_GITHUB_LINK_IF_TRUE="http://github.com/ZockerKatze" # If you have GitHub then paste your link here #
PORT=8080 PORT=8080 # This is unused. You can safely delete if you want. #

1
.gitignore vendored
View File

@@ -3,3 +3,4 @@ node_modules
electron/dist electron/dist
posts/admin.json posts/admin.json
posts/admin.json.tmp posts/admin.json.tmp
.vscode

View File

@@ -1,5 +1,11 @@
'use client'; 'use client';
/*********************************************
* This is the main admin page for the blog.
*
* Written Jun 19 2025
**********************************************/
import { useState, useEffect, useCallback, useRef } from 'react'; import { useState, useEffect, useCallback, useRef } from 'react';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import Link from 'next/link'; import Link from 'next/link';
@@ -732,20 +738,29 @@ export default function AdminPage() {
required required
/> />
</div> </div>
<div> {/* Labels Row */}
<label className="block text-sm font-medium text-gray-700">Content (Markdown)</label> <div className="flex flex-row gap-4">
<div className="flex flex-col md:flex-row gap-4 mt-1"> <div className="w-full md:w-1/2 flex items-end h-10">
{/* Markdown Editor */} <label className="block text-sm font-medium text-gray-700">Content (Markdown)</label>
</div>
<div className="w-full md:w-1/2 flex items-end h-10">
<label className="block text-sm font-medium text-gray-700">Live Preview</label>
</div>
</div>
<div className="flex flex-col md:flex-row gap-4 mt-1">
{/* Markdown Editor */}
<div className="w-full md:w-1/2 flex flex-col">
<textarea <textarea
value={newPost.content} value={newPost.content}
onChange={(e) => setNewPost({ ...newPost, content: e.target.value })} onChange={(e) => setNewPost({ ...newPost, content: e.target.value })}
className="w-full md:w-1/2 rounded-md border border-gray-300 px-3 py-2 font-mono min-h-[200px] md:min-h-[300px] resize-y" className="w-full rounded-md border border-gray-300 px-3 py-2 font-mono" style={{ height: '320px' }}
rows={10} rows={10}
required required
/> />
{/* Live Markdown Preview */} </div>
<div className="w-full md:w-1/2 p-4 border rounded bg-gray-50 overflow-auto min-h-[200px] md:min-h-[300px]"> {/* Live Markdown Preview */}
<div className="text-xs text-gray-500 mb-2">Live Preview</div> <div className="w-full md:w-1/2 flex flex-col">
<div className="p-4 border rounded bg-gray-50 overflow-auto" style={{ height: '320px' }}>
<div className="prose prose-sm max-w-none" dangerouslySetInnerHTML={{ __html: previewHtml }} /> <div className="prose prose-sm max-w-none" dangerouslySetInnerHTML={{ __html: previewHtml }} />
</div> </div>
</div> </div>