AderKonstantin/darkwave
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ feat: add posts page, changed icons to react-icons

Browse Source
This commit is contained in:
Константин Адер
2026-01-20 01:51:12 +03:00
parent 873b4bfc0d
commit 700073571e
7 changed files with 189 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
app/post/[post]/page.tsx Normal file
View File

@@ -0,0 +1,25 @@
import Link from "next/link";
export default function Post() {
return (
<>
<main className="flex flex-col gap-[32px] row-start-2 items-center">
<section className="space-y-1 text-center">
<dl className="space-y-10">
<div>
<dt className="sr-only">Опубликовано</dt>
<dd className="text-base leading-6 font-medium text-gray-500 dark:text-gray-400">
Monday, December 21, 2025
</dd>
</div>
</dl>
<div>
<h1 className="text-3xl leading-9 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10 md:text-5xl md:leading-14 lg:text-3xl dark:text-gray-100">
Создание и интеграция собственного процессорного ядра на базе RISC-V с использованием языка Chisel
</h1>
</div>
</section>
</main>
</>
);
}

58
components/blogpost.tsx
View File

@@ -1,11 +1,8 @@
'use client'; 'use client';
import tagsPic from '../public/tags.svg';
import calendarPic from '../public/calendar.svg'
import Link from 'next/link'; import Link from 'next/link';
import AnimatedLink from '../components/animatedLink';
import Image from 'next/image'; import Image from 'next/image';
import { FaTags, FaCalendarAlt } from 'react-icons/fa';
interface BlogPost { interface BlogPost {
label: string; label: string;
@@ -21,55 +18,68 @@ interface BlogAreaProps {
export default function BlogArea({ blogposts }: BlogAreaProps) { export default function BlogArea({ blogposts }: BlogAreaProps) {
return ( return (
<div className="blog-area pt-16 pb-8 w-full"> <div className="blog-area my-4 py-16 w-full">
<div className="blogposts"> <div className="blogposts">
{blogposts.map((blogpost, index) => ( {blogposts.map((blogpost, index) => (
<div key={index} className="blogpost flex flex-row overflow-hidden mb-14"> <div key={index}>
<div className="blogpost flex flex-row overflow-hidden">
<div className="left mr-5"> <div className="left mr-5">
<div className="blogpost-image"> <div className="blogpost-image">
<Link href={blogpost.get_absolute_url}>
<Image <Image
src="/images/retrofuturism.webp" // Path to the local image src="/images/retrofuturism.webp"
alt="Retrospective Science Image" alt="Retrospective Science Image"
width={384} // Set width (in pixels) width={384}
height={384} // Set height (in pixels) height={384}
className="rounded-lg" className="rounded-lg"
/> />
</Link>
</div> </div>
</div> </div>
<div className="right flex flex-col w-full"> <div className="right flex flex-col w-full">
<div className="blogpost-label text-2xl mb-4"> <div className="blogpost-label text-2xl mb-4">
<h2> <h2>
<AnimatedLink href={blogpost.get_absolute_url}> <Link href={blogpost.get_absolute_url}>
{blogpost.label} {blogpost.label}
</AnimatedLink> </Link>
</h2> </h2>
</div> </div>
<ul className="blogpost-tags inline-flex items-center flex-row space-x-4 mb-4"> <ul className="blogpost-tags inline-flex items-center flex-row space-x-3 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> <li className="tag inline px-2 py-1 rounded-full">
<FaTags className="inline-flex justify-baseline text-gray-800 dark:text-gray-200" size={24} />
</li>
{blogpost.tags.map((tag, index) => ( {blogpost.tags.map((tag, index) => (
<li key={`${tag}-${index}`} className="tag inline border border-slate-400 px-2 py-1 rounded-full text-base"><Link href="#">{tag}</Link></li> <li key={`${tag}-${index}`} className="tag inline border border-gray-700 px-3 py-1 rounded-full text-base">
<Link href="#">{tag}</Link>
</li>
))} ))}
</ul> </ul>
<div className="blogpost-description text-base mb-4"> <div className="blogpost-description text-base mb-4 dark:text-gray-300 text-gray-800">
{blogpost.body.slice(0, 512)}... {blogpost.body.slice(0, 512)}...
</div> </div>
<div className="blogpost-other flex flex-row justify-between items-end mt-auto"> <div className="blogpost-other flex flex-row justify-between items-end mt-auto">
<ul className="text-base inline-flex justify-end items-center"> <div 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> <div className="inline px-2 py-1">
<li className="inline"><p className='inline mx-2'>{blogpost.publish}</p></li> <FaCalendarAlt className="text-gray-800 dark:text-gray-200" size={24} />
</ul> </div>
<div className="inline">
<p className='inline mx-2'>{blogpost.publish}</p>
</div>
</div>
<div className="text-xl"> <div className="text-xl">
<AnimatedLink href={blogpost.get_absolute_url}> <Link href={blogpost.get_absolute_url}>
Read the article Читать →
</AnimatedLink> </Link>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{index < blogposts.length - 1 && (
<hr className="my-8 border-t border-gray-200 dark:border-gray-700" />
)}
</div>
))} ))}
</div> </div>
{/* Include Pagination Component Here */}
</div> </div>
); );
} }

110
components/footer/main.tsx
View File

@@ -1,81 +1,51 @@
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 Link from "next/link";
import AnimatedLink from '@/components/animatedLink'; import {
FaMastodon,
FaGithub,
FaSteam,
FaProjectDiagram
} from "react-icons/fa";
export default function MainFooter() { export default function MainFooter() {
return ( return (
<footer className="border-t border-white pt-4 flex lg:flex-row max-md:flex-col justify-around text-2xl"> <footer className="border-t dark:border-white border-black pt-4 text-2xl">
<ul className="list-none m-4"> <div className="flex lg:flex-row max-md:flex-col justify-around items-start">
<li className="text-2xl mb-3"><h3>Socials</h3></li> <div className="m-4">
<li className="inline text-xl pr-2 mr-2"> <h3 className="text-xl mb-3">Socials</h3>
<Link href="https://www.instagram.com/aderkitty/"> <div className="flex items-center gap-4">
<Image <Link href="https://mastodon.social/@aderkonstantin"
src={instagramPic} className="text-gray-800 dark:text-gray-200 hover:text-primary-500 dark:hover:text-primary-400 transition-colors">
alt="lang" <FaMastodon size={32} />
width={32}
height={32}
className="inline filter brightness-0 invert"
/>
</Link> </Link>
</li> <Link href="https://github.com/AderKonstantin"
<li className="inline text-xl pr-2 mr-2"> className="text-gray-800 dark:text-gray-200 hover:text-primary-500 dark:hover:text-primary-400 transition-colors">
<Link href="https://mastodon.social/@aderkonstantin"> <FaGithub size={32} />
<Image
src={mastodonPic}
alt="lang"
width={32}
height={32}
className="inline filter brightness-0 invert"
/>
</Link> </Link>
</li> <Link href="https://steamcommunity.com/yourprofile"
<li className="inline text-xl pr-2 mr-2"> className="text-gray-800 dark:text-gray-200 hover:text-primary-500 dark:hover:text-primary-400 transition-colors">
<Link href="https://github.com/AderKonstantin"> <FaSteam size={32} />
<Image
src={githubPic}
alt="lang"
width={32}
height={32}
className="inline filter brightness-0 invert"
/>
</Link> </Link>
</li> </div>
<li className="inline text-xl pr-2 mr-2"> </div>
<Link href="https://steamcommunity.com/yourprofile"> <div className="m-4">
<Image <div className="flex items-center gap-2 mb-3">
src={steamPic} <h3 className="text-xl inline">Other Projects</h3>
alt="lang" <span className="text-gray-800 dark:text-gray-200">
width={32} <FaProjectDiagram size={24} />
height={32} </span>
className="inline filter brightness-0 invert" </div>
/> <div className="text-lg">
<Link href="sihirtia.ru"
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 transition-colors">
Sihirtia Softworks
</Link> </Link>
</li> </div>
</ul> </div>
<ul className="list-none m-4"> </div>
<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> <div className="mt-8 md:text-center text-foreground-accent px-6">
<li className="text-xl"> <p className="text-base mt-2 dark:text-gray-200 text-gray-700">Ader Konstantin &copy; {new Date().getFullYear()}</p>
<AnimatedLink href="#">Robot Fire</AnimatedLink> <p className="text-sm my-2 text-gray-500">Made with &hearts; by <Link href="https://aderk.org" target="_blank" className="text-primary-500 hover:text-primary-600">AderK</Link></p>
</li> </div>
</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> </footer>
); );
} }

33
components/header/main.tsx
View File

@@ -1,41 +1,36 @@
import searchPic from '@/public/search.svg'; import searchPic from "@/public/search.svg";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import Toolbar from "./toolbar";
import AnimatedLink from '../animatedLink'; import AnimatedLink from "../animatedLink";
import HeaderToolbar from "../header/toolbar";
export default function MainHeader() { export default function MainHeader() {
return ( return (
<header className="flex flex-col"> <header className="flex flex-col mt-4">
<div className="flex flex-row mt-12 mb-22"> <div className="flex flex-row">
<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="/">
aderk.tech blog.aderk.org
</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 dark:invert">
<Link href="#"> <Link href="#">
<Image <Image src={searchPic} alt="search" width={28} height={28} />
src={searchPic}
alt="search"
width={32}
height={32}
/>
</Link> </Link>
</li> </li>
</ul> </ul>
</div> </div>
<div className="text-2xl mb-20"> <div className="text-lg mb-4 mt-6">
<p className="leading-10"> <p className="leading-8">
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. Этот блог - хроника моего погружения в мир компьютерной архитектуры. <br />
Здесь я документирую процесс изучения и проектирования CPU и GPU на основе открытой архитектуры RISC-V. <br />
</p> </p>
</div> </div>
<HeaderToolbar /> <Toolbar></Toolbar>
</header> </header>
); );
} }

60
components/header/toolbar.tsx
View File

@@ -1,60 +1,32 @@
'use client'; "use client";
import Image from 'next/image'; import Link from "next/link";
import Link from 'next/link'; import { FaGlobe, FaEnvelope, FaRss } from "react-icons/fa";
import globePic from '../../public/globe.svg';
import emailPic from '../../public/email.svg';
import rssPic from '../../public/rss-feed.svg';
import settingsPic from '../../public/settings.svg';
import AnimatedLink from '../animatedLink';
export default function Toolbar() { export default function Toolbar() {
return ( return (
<div className="flex h-24 justify-between items-center border-white light:border-black border-t border-b"> <div className="flex h-16 justify-between items-center dark:border-white border-black border-t border-b">
<div className="flex items-baseline"> <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> <p>
<Link href="#">Science</Link> |{" "}
<Link href="#">Software</Link> |{" "}
<Link href="#">Hardware</Link>
</p>
</div> </div>
<div className="flex items-baseline"> <div className="flex items-baseline">
<ul className="inline-flex items-center gap-4"> <ul className="inline-flex items-center gap-4">
<li className="inline filter brightness-0 invert"> <li className="inline text-gray-800 dark:text-gray-200 hover:text-primary-500 dark:hover:text-primary-400 transition-colors">
<Link href="#"> <Link href="#">
<Image <FaGlobe size={24} />
src={globePic}
alt="lang"
width={32}
height={32}
/>
</Link> </Link>
</li> </li>
<li className="inline filter brightness-0 invert"> <li className="inline text-gray-800 dark:text-gray-200 hover:text-primary-500 dark:hover:text-primary-400 transition-colors">
<Link href="#"> <Link href="emailto:konstantin@aderk.org">
<Image <FaEnvelope size={24} />
src={emailPic}
alt="email"
width={32}
height={32}
/>
</Link> </Link>
</li> </li>
<li className="inline filter brightness-0 invert"> <li className="inline text-gray-800 dark:text-gray-200 hover:text-primary-500 dark:hover:text-primary-400 transition-colors">
<Link href="#"> <Link href="#">
<Image <FaRss size={24} />
src={rssPic}
alt="rss"
width={32}
height={32}
/>
</Link>
</li>
<li className="inline filter brightness-0 invert">
<Link href="#">
<Image
src={settingsPic}
alt="settings"
width={32}
height={32}
/>
</Link> </Link>
</li> </li>
</ul> </ul>

12
package-lock.json generated
View File

@@ -10,7 +10,8 @@
"dependencies": { "dependencies": {
"next": "15.2.0", "next": "15.2.0",
"react": "^19.0.0", "react": "^19.0.0",
"react-dom": "^19.0.0" "react-dom": "^19.0.0",
"react-icons": "^5.5.0"
}, },
"devDependencies": { "devDependencies": {
"@eslint/eslintrc": "^3", "@eslint/eslintrc": "^3",
@@ -4472,6 +4473,15 @@
"react": "^19.0.0" "react": "^19.0.0"
} }
}, },
"node_modules/react-icons": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
"integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
"license": "MIT",
"peerDependencies": {
"react": "*"
}
},
"node_modules/react-is": { "node_modules/react-is": {
"version": "16.13.1", "version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

11
package.json
View File

@@ -9,19 +9,20 @@
"lint": "next lint" "lint": "next lint"
}, },
"dependencies": { "dependencies": {
"next": "15.2.0",
"react": "^19.0.0", "react": "^19.0.0",
"react-dom": "^19.0.0", "react-dom": "^19.0.0",
"next": "15.2.0" "react-icons": "^5.5.0"
}, },
"devDependencies": { "devDependencies": {
"typescript": "^5", "@eslint/eslintrc": "^3",
"@tailwindcss/postcss": "^4",
"@types/node": "^20", "@types/node": "^20",
"@types/react": "^19", "@types/react": "^19",
"@types/react-dom": "^19", "@types/react-dom": "^19",
"@tailwindcss/postcss": "^4",
"tailwindcss": "^4",
"eslint": "^9", "eslint": "^9",
"eslint-config-next": "15.2.0", "eslint-config-next": "15.2.0",
"@eslint/eslintrc": "^3" "tailwindcss": "^4",
"typescript": "^5"
} }
} }