feat: Add post image headers to /assets/header/

- Add SVG icons for external sites
    - Add polished logo to login
    - Update front matter in <blog>.md files

src/App.jsx

@@ -2,10 +2,10 @@ import React, { useState } from 'react';
 import AppRoutes from './routes/AppRoutes';
 import CampfireAppBar from './components/AppBar';
 import CampfirePanelBar from './components/PanelBar';
+import Dashboard from './pages/Dashboard';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { IconsContext } from '@progress/kendo-react-common';
 import Copyright from './components/UI/Copyright';
-import Dashboard from './pages/Dashboard';
 
 function App() {
   const [isLoggedIn, setIsLoggedIn] = useState(false);
@@ -38,32 +38,35 @@ function App() {
           )}
 
           {isLoggedIn && location.pathname !== '/login' ? (
-            <CampfirePanelBar
+            <div style={{ display: 'flex', minHeight: '100vh' }}>
-              isExpanded={isPanelExpanded}
+              {/* Always render the PanelBar on the left */}
-              onPanelToggle={handlePanelToggle}
+              <CampfirePanelBar
-              isLoggedIn={isLoggedIn}
+                isExpanded={isPanelExpanded}
-            >
+                onPanelToggle={handlePanelToggle}
-              {/* AppRoutes are the main content of the Panel */}
+                isLoggedIn={isLoggedIn}
-              <AppRoutes isLoggedIn={isLoggedIn} onLogin={handleLogin} />
+              >
-            </CampfirePanelBar>
+                {/* AppRoutes are the main content of the Panel */}
+                <AppRoutes isLoggedIn={isLoggedIn} onLogin={handleLogin} />
+              </CampfirePanelBar>
+
+              {/* Render Dashboard on the right only when on /dashboard */}
+              {location.pathname === '/dashboard' && (
+                <div style={{ flex: 1, marginLeft: '100px' }}>
+                  <Dashboard isLoggedIn={isLoggedIn}>
+                    <AppRoutes isLoggedIn={isLoggedIn} onLogin={handleLogin} />
+                  </Dashboard>
+                </div>
+              )}
+            </div>
           ) : (
             // If not logged in or on the login page, just render the routes
             <AppRoutes isLoggedIn={isLoggedIn} onLogin={handleLogin} />
           )}
-
-          {isLoggedIn && location.pathname === '/dashboard' ? (
-            <Dashboard isLoggedIn={isLoggedIn}>
-              <AppRoutes isLoggedIn={isLoggedIn} onLongin={handleLogin} />
-            </Dashboard>
-          ) : (
-            <AppRoutes isLoggedIn={isLoggedIn} onLogin={handleLogin} />
-          )}
         </IconsContext.Provider>
       </div>
       <Copyright />
     </div>
   );
+}
 
-};
+export default App;
-
-export default App;

src/components/LoginComponent.jsx

@@ -36,10 +36,10 @@ const LoginComponent = ({ onLogin }) => {
                 </div>
                 <div>
                     <Label htmlFor="password">Password: </Label>
-                    <Input style={{ border: '1px solid #edbd7d' }} type="password" id="password" value={password} onChange={(e) => setPassword(e.target.value)} autoComplete="current-password" />
+                    <Input style={{ border: '1px solid #edbd7d', marginBottom: '10px' }} type="password" id="password" value={password} onChange={(e) => setPassword(e.target.value)} autoComplete="current-password" />
                 </div>
                 
-                <Button look="flat" type="submit">Login</Button>
+                <Button look="flat" type="submit" style={{ padding: '0 20px' }}>Login</Button>
                 <div>
                     <NotificationGroup style={{ textAlign: 'center' }}>
                     {error && (<Notification type={{ style: 'error', icon: true }} closeable={true} onClose={() => setError('')}>

src/components/PanelBar.jsx

@@ -91,6 +91,7 @@ const CampfirePanelBar = ({ isExpanded = true }) => {
                         <span style={{ marginLeft: '8px' }}>{item.title}</span>
                     </div>
                 }
+                expanded={true}
             >
                 {item.items.map(renderItem)}
             </PanelBarItem>

src/components/UI/Copyright.jsx

@@ -10,7 +10,7 @@ export default function Copyright() {
       }}
     >
       <p>
-        &copy; Derek L. Seitz |{" "}
+        &copy; 2025{"  |  "}Derek L. Seitz{"  |  "}
         <a href="https://dlseitz.dev" target="_blank" rel="noopener noreferrer" class="k-link">
           dlseitz.dev
         </a>

src/data/BlogPosts/#0-setting-up-camp.md

@@ -5,7 +5,7 @@ date: 2025-08-24 05:00:00 UTC
 tags: fullstack,developerjourney,BuildInPublic,introduction
 canonical_url: https://campfire.dlseitz.dev/0-setting-up-camp
 header:
-    image: /assets/kemal-berkay-dogan-TcUN5sDZPZ8-unsplash.jpg
+    image: /assets/#0-setting-up-camp.jpg
     attribution: 'Photo by <a href="https://unsplash.com/@kemaldgn?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Kemal Berkay Dogan</a> on <a href="https://unsplash.com/photos/a-campfire-with-a-cup-of-coffee-sitting-in-front-of-it-TcUN5sDZPZ8?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>'
 ---
 

src/data/BlogPosts/#1-the-great-gitea-migration.md

@@ -5,7 +5,7 @@ date: 2025-08-27 20:19:51 UTC
 tags: CampfireLogs,SelfHosting,Devops,gitea
 canonical_url: https://campfire.dlseitz.dev/1-the-great-gitea-migration
 header:
-    image: /assets/leon-contreras-YndHL7gQIJE-unsplash.jpg
+    image: /assets/header/#1-the-great-gitea-migration.jpg
     attribution: 'Photo by <a href="https://unsplash.com/@lc_photography?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Leon Contreras</a> on <a href="https://unsplash.com/photos/selective-focus-photography-of-marshmallows-on-fire-pit-YndHL7gQIJE?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>'
 ---
 

src/data/BlogPosts/#2-retrofitting-the-privacy-policy.md

@@ -5,7 +5,7 @@ date: 2025-09-02 20:41:21 UTC
 tags: WebDevelopment,FullStackDevelopment,Nodejs,DevLife
 canonical_url: https://campfire.dlseitz.dev/2-retrofitting-the-privacy-policy
 header:
-    image: /assets/2-privacy-policy-head-img.png
+    image: /assets/header/#2-retrofitting-the-privacy-policy.png
     attribution: 'Image generated with Sora. | © 2025 Derek L. Seitz'
 ---
 

src/data/BlogPosts/#3-data-privacy-things-to-consider.md

@@ -5,7 +5,7 @@ date: 2025-09-03 03:49:36 UTC
 tags: dataprivacy,WebDevelopment,Freelancing,PrivacyPolicy
 canonical_url: https://campfire.dlseitz.dev/3-data-privacy-things-to-consider
 header:
-    image: /assets/toa-heftiba-x9I-6yoXrXE-unsplash.jpg
+    image: /assets/header/#3-data-privacy-things-to-consider.jpg
     attribution: 'Photo by <a href="https://unsplash.com/@heftiba?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Toa Heftiba</a> on <a href="https://unsplash.com/photos/group-of-people-sitting-on-front-firepit-x9I-6yoXrXE?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>'
 
 ---

src/data/BlogPosts/#4-refactoring-a-false-sense-of-simplicity.md

@@ -5,7 +5,7 @@ date: 2025-09-12 01:08:54 UTC
 tags: refactoring,WebDevelopment,FrontendDevelopment,CSS
 canonical_url: https://campfire.dlseitz.dev/4-refactoring-a-false-sense-of-simplicity
 header:
-    image: '/assets/20250911_2016_Coding by Campfire_simple_compose_01k4xqta8sfjyrws9ezcwjpg9x.png'
+    image: '/assets/header/#4-refactoring-a-false-sense-of-simplicity.png'
     attribution: 'Image generated with Sora. | © 2025 Derek L. Seitz'
 ---
 

src/data/BlogPosts/#5-the-power-of-separation-compels-you.md

@@ -5,7 +5,7 @@ date: 2025-09-20 21:51:29 UTC
 tags: WebDevelopment,refactoring,JavaScript,apiintegration
 canonical_url: https://campfire.dlseitz.dev/5-the-power-of-separation-compels-you
 header:
-    image: /assets/5-separation.webp
+    image: /assets/header/#5-the-power-of-separation-compels-you.webp
     attribution: 'Image generated with Sora. | © 2025 Derek L. Seitz'
 contentImagePath: /assets/#5/
 ---

src/data/blog-post-data.js

@@ -66,7 +66,7 @@ export const blogPosts = [
         published: true
     },
     {
-        title: "#5 - The Power of Separation Compels You!",
+        title: "#5 - The Power of [Separation] Compels You!",
         slug: "5-the-power-of-separation-compels-you",
         filename: "#5-the-power-of-separation-compels-you.md",
         date: "2025-09-20 21:51:29 UTC",

src/pages/Dashboard.jsx

@@ -14,10 +14,10 @@ const Dashboard = React.forwardRef((props, ref) => {
     };
 
     return (
-        <div ref={ref}>
+        <div  style={{ textAlign: 'center' }} ref={ref}>
         <h1>Dashboard</h1>
 
-        <section>
+        <section style={{ textAlign: 'center' }}>
             <h2>Published Posts</h2>
             {publishedPosts.length ? (
             <ul>
@@ -26,8 +26,8 @@ const Dashboard = React.forwardRef((props, ref) => {
                     <a class="k-link" href={post.canonical_url} target="_blank" rel="noreferrer">
                     {post.title}
                     </a>{' '}
-                    <span>{post.date}</span>{' '}
+                    <span style={{ marginLeft: '30px', padding: '0 20px' }} >{post.date}</span>{' '}
-                    <Button onClick={() => handleEdit(post.slug)}>Edit</Button>
+                    <Button style={{ marginLeft: '30px', padding: '0 20px' }}  onClick={() => handleEdit(post.slug)}>Edit</Button>
                 </li>
                 ))}
             </ul>
@@ -36,14 +36,14 @@ const Dashboard = React.forwardRef((props, ref) => {
             )}
         </section>
 
-        <section>
+        <section style={{ textAlign: 'center' }}>
             <h2>Drafts</h2>
             {draftPosts.length ? (
             <ul>
                 {draftPosts.map(post => (
                 <li key={post.slug}>
                     {post.title}{' '}
-                    <Button onClick={() => handleEdit(post.slug)}>Edit</Button>
+                    <Button style={{ marginLeft: '30px', padding: '0 20px' }} onClick={() => handleEdit(post.slug)}>Edit</Button>
                 </li>
                 ))}
             </ul>

src/pages/Login.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import LoginComponent from '../components/LoginComponent';
-import Logo from '../assets/images/campfire_logs_square_logo.png';
+import Logo from '../assets/images/campfire_logs_square_logo_bg_match.png';
 
 const LoginPage = React.forwardRef(({ onLogin }, ref) => {
     return (