Merge pull request #8 from AderKonstantin/theme-switcher

Theme switcher

app/blogpost/layout.tsx

@@ -0,0 +1,9 @@
+import "../globals.css";
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="m-auto text-base 2xl:w-4xl xl:w-3xl md:w-full">
+      {children}
+    </div>
+  );
+}

app/blogpost/page.tsx

@@ -0,0 +1,47 @@
+// Markdown and LaTeX page here will be after posting throught BackndPitt
+
+import Image from "next/image";
+import postPic from "@/public/images/retrofuturism.webp"
+
+
+export default function PostPage() {
+  return (
+    <div className="pt-12 pb-8">
+      <h1 className="post-label text-3xl mb-1.5">How to install Docker & Docker Compose</h1>
+      <p className="post-time text-slate-400">Posted <em className="text-indigo-400">20 December 2024</em> | Updated <em className="text-rose-400">12 January 2025</em></p>
+      <div className="mt-4 bg-slate-500 w-10/12 h-90 rounded-2xl flex justify-self-center">
+        {/* <Image
+          src={postPic}
+          alt="RetrospectiveScience"
+          blurDataURL="data:..." // automatically provided
+          placeholder="blur" // Optional blur-up while loading
+          className="rounded-xl"
+        /> */}
+      </div>
+      <p className="mt-4">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec nisi et nunc ullamcorper venenatis non in erat. Phasellus consectetur, lorem et scelerisque rutrum, velit magna lacinia augue, a condimentum elit dolor nec nibh. Nulla vel ligula accumsan, maximus ante vitae, interdum magna. Integer non ex a sapien tristique pharetra. Sed eu laoreet nisl, ac commodo orci. Quisque sit amet facilisis ex. Sed facilisis felis sed neque mattis elementum. Donec sagittis turpis vel dui tristique mollis.
+      </p>
+      <p className="mt-4">
+        Ut rutrum nibh eu nisl dapibus, eget ultricies neque sollicitudin. Fusce ex ipsum, condimentum at arcu at, gravida malesuada mi. Sed tincidunt ipsum nec ultricies porttitor. Maecenas at egestas ipsum. Cras vitae scelerisque quam, vitae sollicitudin quam. In hac habitasse platea dictumst. Aenean a vestibulum felis, sed ultrices dui. Nullam in orci sit amet arcu sodales iaculis nec vitae arcu. Phasellus consequat purus eget nulla porta vulputate.
+      </p>
+      <div className="mt-4 bg-slate-500 w-10/12 h-90 rounded-2xl flex justify-self-center">
+        {/* <Image
+          src={postPic}
+          alt="RetrospectiveScience"
+          blurDataURL="data:..." // automatically provided
+          placeholder="blur" // Optional blur-up while loading
+          className="rounded-xl"
+        /> */}
+      </div>
+      <p className="mt-4">
+        Nam et consequat dui. Fusce est lorem, mattis rutrum porta ac, ultrices eget urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam pharetra condimentum quam, ut pretium lacus finibus vel. Sed porttitor, neque nec volutpat rhoncus, nulla nibh condimentum lacus, non cursus arcu lorem non sem. Maecenas sed mi at sapien sodales suscipit eu non purus. In eget neque commodo, blandit diam id, vestibulum nisi. Phasellus cursus purus congue, tempus dolor sed, ultricies purus. Quisque massa sem, porta accumsan molestie malesuada, maximus vitae felis. Vestibulum sagittis metus erat, vel bibendum est dignissim eget. Duis ligula velit, placerat ut volutpat vel, hendrerit eu risus. Quisque ut ultrices ligula, ut eleifend tortor. Fusce sit amet sapien vulputate, lacinia nisi vitae, luctus diam. Curabitur a nisl sed ipsum tempus fringilla. Nulla feugiat porta convallis.
+      </p>
+      <p className="mt-4">
+        Fusce consequat faucibus augue, ac dapibus tortor facilisis sit amet. Nulla tincidunt scelerisque est vel aliquam. Ut erat diam, elementum placerat lacus vel, faucibus pretium dolor. Morbi tincidunt sapien nec mi congue pretium. Suspendisse et enim dignissim, tincidunt ipsum a, suscipit eros. Morbi congue arcu posuere nibh aliquam molestie. Mauris placerat erat eu augue tristique dignissim. Maecenas et pellentesque urna, non laoreet velit. Maecenas efficitur imperdiet bibendum.
+      </p>
+      <p className="mt-4">
+        Phasellus semper semper imperdiet. Praesent ligula neque, egestas id venenatis ac, vulputate vitae ex. Integer at pellentesque dui. Fusce semper egestas lorem, tincidunt tristique nibh tristique quis. In ac tincidunt est. Proin at erat ultrices, ornare lacus vitae, aliquam nibh. Morbi ut mauris erat. Quisque rhoncus sapien eu massa lacinia tempor. Quisque volutpat nisi sed augue facilisis maximus. Nam lobortis sollicitudin arcu, non elementum orci commodo eget. Praesent porta velit eget felis euismod, porta vestibulum diam semper. Curabitur accumsan, turpis at tincidunt fringilla, velit dui efficitur quam, ut porta ipsum lacus vitae quam. Donec malesuada urna sed diam suscipit dapibus. Pellentesque et ante id nunc sagittis vulputate.
+      </p>
+    </div>
+  );
+}

app/globals.css

@@ -1,6 +1,6 @@
 @import "tailwindcss";
 
-:root {
+/* :root {
   --background: #ffffff;
   --foreground: #171717;
 }
@@ -10,10 +10,14 @@
     --background: #0a0a0a;
     --foreground: #ededed;
   }
-}
+} */
 
 body {
   color: var(--foreground);
   background: var(--background);
-  font-family: "JetBrains Mono", monospace;
+  font-family: "Open Sans", sans-serif;
+}
+
+.dark {
+  @apply bg-black text-white;
 }

app/layout.tsx

@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
 import "./globals.css";
 
+import MainHeader from "@/components/header/main";
+import MainFooter from "@/components/footer/main";
 
 export const metadata: Metadata = {
   title: 'AderKI Blog',
@@ -28,11 +30,13 @@ export const metadata: Metadata = {
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en">
+    <html className="dark" lang="en">
-      <body
+      <body className={`bg-black text-white dark:bg-white dark:text-black font-sans`}>
-        className={`bg-black text-white font-sans`}
+        <div className="text-xl 2xl:mx-80 xl:mx-36 md:mx-6">
-      >
+          <MainHeader />
-        {children}
+          {children}
+          <MainFooter />
+        </div>
       </body>
     </html>
   );

app/page.tsx

@@ -1,17 +1,6 @@
-import mastodonPic from '../public/mastodon.svg';
-import githubPic from '../public/github.svg';
-import instagramPic from '../public/instagram.svg';
-import steamPic from '../public/steam.svg';
 
-import gamePic from '../public/gamepad.svg';
-import projectPic from '../public/project.svg';
-
-import Image from "next/image";
-import Link from "next/link";
-import AnimatedLink from '../components/animatedLink';
 import BlogArea from "../components/blogpost";
 
-import MainHeader from "@/components/header/main";
 
 // Mock data for blog posts
 const blogposts = [
@@ -47,77 +36,8 @@ const blogposts = [
 
 export default function Home() {
   return (
-    <div className="text-xl 2xl:mx-64 xl:mx-32 md:mx-6">
+    <main>
-      <MainHeader />
+      <BlogArea blogposts={blogposts} />
-
+    </main>
-      <main>
-        <BlogArea blogposts={blogposts} />
-      </main>
-
-      <footer className="border-t border-white pt-4 flex lg:flex-row max-md:flex-col justify-around text-2xl">
-        <ul className="list-none m-4">
-          <li className="text-2xl mb-3"><h3>Socials</h3></li>
-          <li className="inline text-xl pr-2 mr-2">
-            <Link href="https://www.instagram.com/aderkitty/">
-              <Image
-                src={instagramPic}
-                alt="lang"
-                width={32}
-                height={32}
-                className="inline filter brightness-0 invert"
-              />
-            </Link>
-          </li>
-          <li className="inline text-xl pr-2 mr-2">
-            <Link href="https://mastodon.social/@aderkonstantin">
-              <Image
-                src={mastodonPic}
-                alt="lang"
-                width={32}
-                height={32}
-                className="inline filter brightness-0 invert"
-              />
-            </Link>
-          </li>
-          <li className="inline text-xl pr-2 mr-2">
-            <Link href="https://github.com/AderKonstantin">
-              <Image
-                src={githubPic}
-                alt="lang"
-                width={32}
-                height={32}
-                className="inline filter brightness-0 invert"
-              />
-            </Link>
-          </li>
-          <li className="inline text-xl pr-2 mr-2">
-            <Link href="https://steamcommunity.com/yourprofile">
-              <Image
-                src={steamPic}
-                alt="lang"
-                width={32}
-                height={32}
-                className="inline filter brightness-0 invert"
-              />
-            </Link>
-          </li>
-        </ul>
-        <ul className="list-none m-4">
-          <li className="text-2xl mb-3"><h3 className='inline'>Games</h3><Image src={gamePic} alt="lang" width={24} height={24} className="ml-2 inline filter brightness-0 invert" /></li>
-          <li className="text-xl">
-            <AnimatedLink href="#">Robot Fire</AnimatedLink>
-          </li>
-        </ul>
-        <ul className="list-none m-4">
-          <li className="text-2xl mb-3"><h3 className='inline'>Other Projects</h3><Image src={projectPic} alt="lang" width={24} height={24} className="ml-2 inline filter brightness-0 invert" /></li>
-          <li className="text-xl">
-            <AnimatedLink href="#">cloudberrygames</AnimatedLink>
-          </li>
-          <li className="text-xl">
-            <AnimatedLink href="#">northfamily</AnimatedLink>
-          </li>
-        </ul>
-      </footer>
-    </div>
   );
 }

components/blogpost.tsx

@@ -3,6 +3,7 @@
 import tagsPic from '../public/tags.svg';
 import calendarPic from '../public/calendar.svg'
 
+import Link from 'next/link';
 import AnimatedLink from '../components/animatedLink';
 import Image from 'next/image';
 
@@ -46,7 +47,7 @@ export default function BlogArea({ blogposts }: BlogAreaProps) {
                             <ul className="blogpost-tags inline-flex items-center flex-row space-x-4 mb-4">
                                 <li className="tag inline px-2 py-1 rounded-full"><Image src={tagsPic} alt="lang" width={24} height={24} className='inline-flex justify-baseline filter brightness-0 invert' /></li>
                                 {blogpost.tags.map((tag, index) => (
-                                <li className="tag inline border border-slate-400 px-2 py-1 rounded-full text-base">{tag}</li>
+                                    <li key={`${tag}-${index}`} className="tag inline border border-slate-400 px-2 py-1 rounded-full text-base"><Link href="#">{tag}</Link></li>
                                 ))}
                             </ul>
                             <div className="blogpost-description text-base mb-4">
@@ -54,7 +55,7 @@ export default function BlogArea({ blogposts }: BlogAreaProps) {
                             </div>
                             <div className="blogpost-other flex flex-row justify-between items-end mt-auto">
                                 <ul className="text-base inline-flex justify-end items-center">
-                                    <li className="inline px-2 py-1"><Image src={calendarPic} alt="lang" width={24} height={24} className="filter brightness-0 invert"/></li>
+                                    <li className="inline px-2 py-1"><Image src={calendarPic} alt="lang" width={24} height={24} className="filter brightness-0 invert" /></li>
                                     <li className="inline"><p className='inline mx-2'>{blogpost.publish}</p></li>
                                 </ul>
 

components/footer/main.tsx

@@ -0,0 +1,81 @@
+
+import mastodonPic from '@/public/mastodon.svg';
+import githubPic from '@/public/github.svg';
+import instagramPic from '@/public/instagram.svg';
+import steamPic from '@/public/steam.svg';
+
+import gamePic from '@/public/gamepad.svg';
+import projectPic from '@/public/project.svg';
+
+import Image from "next/image";
+import Link from "next/link";
+import AnimatedLink from '@/components/animatedLink';
+
+export default function MainFooter() {
+    return (
+        <footer className="border-t border-white pt-4 flex lg:flex-row max-md:flex-col justify-around text-2xl">
+            <ul className="list-none m-4">
+                <li className="text-2xl mb-3"><h3>Socials</h3></li>
+                <li className="inline text-xl pr-2 mr-2">
+                    <Link href="https://www.instagram.com/aderkitty/">
+                        <Image
+                            src={instagramPic}
+                            alt="lang"
+                            width={32}
+                            height={32}
+                            className="inline filter brightness-0 invert"
+                        />
+                    </Link>
+                </li>
+                <li className="inline text-xl pr-2 mr-2">
+                    <Link href="https://mastodon.social/@aderkonstantin">
+                        <Image
+                            src={mastodonPic}
+                            alt="lang"
+                            width={32}
+                            height={32}
+                            className="inline filter brightness-0 invert"
+                        />
+                    </Link>
+                </li>
+                <li className="inline text-xl pr-2 mr-2">
+                    <Link href="https://github.com/AderKonstantin">
+                        <Image
+                            src={githubPic}
+                            alt="lang"
+                            width={32}
+                            height={32}
+                            className="inline filter brightness-0 invert"
+                        />
+                    </Link>
+                </li>
+                <li className="inline text-xl pr-2 mr-2">
+                    <Link href="https://steamcommunity.com/yourprofile">
+                        <Image
+                            src={steamPic}
+                            alt="lang"
+                            width={32}
+                            height={32}
+                            className="inline filter brightness-0 invert"
+                        />
+                    </Link>
+                </li>
+            </ul>
+            <ul className="list-none m-4">
+                <li className="text-2xl mb-3"><h3 className='inline'>Games</h3><Image src={gamePic} alt="lang" width={24} height={24} className="ml-2 inline filter brightness-0 invert" /></li>
+                <li className="text-xl">
+                    <AnimatedLink href="#">Robot Fire</AnimatedLink>
+                </li>
+            </ul>
+            <ul className="list-none m-4">
+                <li className="text-2xl mb-3"><h3 className='inline'>Other Projects</h3><Image src={projectPic} alt="lang" width={24} height={24} className="ml-2 inline filter brightness-0 invert" /></li>
+                <li className="text-xl">
+                    <AnimatedLink href="#">cloudberrygames</AnimatedLink>
+                </li>
+                <li className="text-xl">
+                    <AnimatedLink href="#">northfamily</AnimatedLink>
+                </li>
+            </ul>
+        </footer>
+    );
+}

components/header/main.tsx

@@ -8,34 +8,34 @@ import AnimatedLink from '../animatedLink';
 import HeaderToolbar from "../header/toolbar";
 
 export default function MainHeader() {
-    return (
+  return (
-        <header className="flex flex-col">
+    <header className="flex flex-col">
-        <div className="flex flex-row mt-12 mb-22">
+      <div className="flex flex-row mt-12 mb-22">
-          <ul className="w-full flex flex-row justify-between items-baseline list-none">
+        <ul className="w-full flex flex-row justify-between items-baseline list-none">
-            <li className="text-4xl">
+          <li className="text-4xl">
-              <AnimatedLink href="https://blog.aderk.tech/en">
+            <AnimatedLink href="https://blog.aderk.tech/en">
-                aderk.tech
+              aderk.tech
-              </AnimatedLink>
+            </AnimatedLink>
-            </li>
+          </li>
 
-            <li className="text-6xl flex items-center justify-center filter brightness-0 invert">
+          <li className="text-6xl flex items-center justify-center filter brightness-0 invert">
-              <Link href="#">
+            <Link href="#">
-                <Image
+              <Image
-                  src={searchPic}
+                src={searchPic}
-                  alt="search"
+                alt="search"
-                  width={32}
+                width={32}
-                  height={32}
+                height={32}
-                />
+              />
-              </Link>
+            </Link>
-            </li>
+          </li>
-          </ul>
+        </ul>
-        </div>
+      </div>
-        <div className="text-2xl mb-20">
+      <div className="text-2xl mb-20">
-          <p className="leading-10">
+        <p className="leading-10">
-            Hello. I am is a programmer, hacker, and gamer. Love comics, coding, read books. There I am posting articles about science and another staff, that’s im like.
+          Hello. I am is a programmer, hacker, and gamer. Love comics, coding, read books. There I am posting articles about science and another staff, that’s im like.
-          </p>
+        </p>
-        </div>
+      </div>
-        <HeaderToolbar />
+      <HeaderToolbar />
-      </header>
+    </header>
-    );
+  );
 }

components/header/toolbar.tsx

@@ -1,17 +1,17 @@
 'use client';
 import Image from 'next/image';
 import Link from 'next/link';
+
 import globePic from '../../public/globe.svg';
 import emailPic from '../../public/email.svg';
 import rssPic from '../../public/rss-feed.svg';
-import supportPic from '../../public/support.svg';
 import settingsPic from '../../public/settings.svg';
 import AnimatedLink from '../animatedLink';
 
 
 export default function Toolbar() {
     return (
-        <div className="flex h-24 justify-between items-center border-white border-t border-b">
+        <div className="flex h-24 justify-between items-center border-white light:border-black border-t border-b">
             <div className="flex items-baseline">
                 <p><AnimatedLink href='#'>Science</AnimatedLink> | <AnimatedLink href='#'>Software</AnimatedLink> | <AnimatedLink href='#'>Hardware</AnimatedLink> | <AnimatedLink href='#'>Rockets</AnimatedLink> | <AnimatedLink href='#'>Startups</AnimatedLink></p>
             </div>

public/support.svg

@@ -1 +0,0 @@
-<svg fill="none" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g fill="#000"><path d="m7.824 5.937a1 1 0 0 0 .726-.312 2.042 2.042 0 0 1 2.835-.065 1 1 0 0 0 1.388-1.441 3.994 3.994 0 0 0 -5.674.13 1 1 0 0 0 .725 1.688z"/><path d="m17 7a7 7 0 1 0 -14 0 3 3 0 0 0 -3 3v2a3 3 0 0 0 3 3h1a1 1 0 0 0 1-1v-7a5 5 0 1 1 10 0v7.083a2.92 2.92 0 0 1 -2.917 2.917h-.083a2 2 0 0 0 -2-2h-1a2 2 0 0 0 -2 2v1a2 2 0 0 0 2 2h1a1.993 1.993 0 0 0 1.722-1h.361a4.92 4.92 0 0 0 4.824-4h.093a3 3 0 0 0 3-3v-2a3 3 0 0 0 -3-3z"/></g></svg>