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

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.

Browse Source
This commit is contained in:
rattatwinko
2025-06-19 19:06:49 +02:00
parent 549cccd526
commit 4dd764826f
3 changed files with 34 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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