✨ feat: add posts page, changed icons to react-icons
This commit is contained in:
25
app/post/[post]/page.tsx
Normal file
25
app/post/[post]/page.tsx
Normal 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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,11 +1,8 @@
|
||||
'use client';
|
||||
|
||||
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';
|
||||
import { FaTags, FaCalendarAlt } from 'react-icons/fa';
|
||||
|
||||
interface BlogPost {
|
||||
label: string;
|
||||
@@ -21,55 +18,68 @@ interface BlogAreaProps {
|
||||
|
||||
export default function BlogArea({ blogposts }: BlogAreaProps) {
|
||||
return (
|
||||
<div className="blog-area pt-16 pb-8 w-full">
|
||||
<div className="blog-area my-4 py-16 w-full">
|
||||
<div className="blogposts">
|
||||
{blogposts.map((blogpost, index) => (
|
||||
<div key={index} className="blogpost flex flex-row overflow-hidden mb-14">
|
||||
<div className="left mr-5">
|
||||
<div className="blogpost-image">
|
||||
<Image
|
||||
src="/images/retrofuturism.webp" // Path to the local image
|
||||
alt="Retrospective Science Image"
|
||||
width={384} // Set width (in pixels)
|
||||
height={384} // Set height (in pixels)
|
||||
className="rounded-lg"
|
||||
/>
|
||||
<div key={index}>
|
||||
<div className="blogpost flex flex-row overflow-hidden">
|
||||
<div className="left mr-5">
|
||||
<div className="blogpost-image">
|
||||
<Link href={blogpost.get_absolute_url}>
|
||||
<Image
|
||||
src="/images/retrofuturism.webp"
|
||||
alt="Retrospective Science Image"
|
||||
width={384}
|
||||
height={384}
|
||||
className="rounded-lg"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="right flex flex-col w-full">
|
||||
<div className="blogpost-label text-2xl mb-4">
|
||||
<h2>
|
||||
<AnimatedLink href={blogpost.get_absolute_url}>
|
||||
{blogpost.label}
|
||||
</AnimatedLink>
|
||||
</h2>
|
||||
</div>
|
||||
<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 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">
|
||||
{blogpost.body.slice(0, 512)}...
|
||||
</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"><p className='inline mx-2'>{blogpost.publish}</p></li>
|
||||
<div className="right flex flex-col w-full">
|
||||
<div className="blogpost-label text-2xl mb-4">
|
||||
<h2>
|
||||
<Link href={blogpost.get_absolute_url}>
|
||||
{blogpost.label}
|
||||
</Link>
|
||||
</h2>
|
||||
</div>
|
||||
<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">
|
||||
<FaTags className="inline-flex justify-baseline text-gray-800 dark:text-gray-200" size={24} />
|
||||
</li>
|
||||
{blogpost.tags.map((tag, index) => (
|
||||
<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>
|
||||
|
||||
<div className="text-xl">
|
||||
<AnimatedLink href={blogpost.get_absolute_url}>
|
||||
Read the article
|
||||
</AnimatedLink>
|
||||
<div className="blogpost-description text-base mb-4 dark:text-gray-300 text-gray-800">
|
||||
{blogpost.body.slice(0, 512)}...
|
||||
</div>
|
||||
<div className="blogpost-other flex flex-row justify-between items-end mt-auto">
|
||||
<div className="text-base inline-flex justify-end items-center">
|
||||
<div className="inline px-2 py-1">
|
||||
<FaCalendarAlt className="text-gray-800 dark:text-gray-200" size={24} />
|
||||
</div>
|
||||
<div className="inline">
|
||||
<p className='inline mx-2'>{blogpost.publish}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xl">
|
||||
<Link href={blogpost.get_absolute_url}>
|
||||
Читать →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{index < blogposts.length - 1 && (
|
||||
<hr className="my-8 border-t border-gray-200 dark:border-gray-700" />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* Include Pagination Component Here */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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 AnimatedLink from '@/components/animatedLink';
|
||||
import {
|
||||
FaMastodon,
|
||||
FaGithub,
|
||||
FaSteam,
|
||||
FaProjectDiagram
|
||||
} from "react-icons/fa";
|
||||
|
||||
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>
|
||||
);
|
||||
return (
|
||||
<footer className="border-t dark:border-white border-black pt-4 text-2xl">
|
||||
<div className="flex lg:flex-row max-md:flex-col justify-around items-start">
|
||||
<div className="m-4">
|
||||
<h3 className="text-xl mb-3">Socials</h3>
|
||||
<div className="flex items-center gap-4">
|
||||
<Link href="https://mastodon.social/@aderkonstantin"
|
||||
className="text-gray-800 dark:text-gray-200 hover:text-primary-500 dark:hover:text-primary-400 transition-colors">
|
||||
<FaMastodon size={32} />
|
||||
</Link>
|
||||
<Link href="https://github.com/AderKonstantin"
|
||||
className="text-gray-800 dark:text-gray-200 hover:text-primary-500 dark:hover:text-primary-400 transition-colors">
|
||||
<FaGithub size={32} />
|
||||
</Link>
|
||||
<Link href="https://steamcommunity.com/yourprofile"
|
||||
className="text-gray-800 dark:text-gray-200 hover:text-primary-500 dark:hover:text-primary-400 transition-colors">
|
||||
<FaSteam size={32} />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="m-4">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<h3 className="text-xl inline">Other Projects</h3>
|
||||
<span className="text-gray-800 dark:text-gray-200">
|
||||
<FaProjectDiagram size={24} />
|
||||
</span>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-8 md:text-center text-foreground-accent px-6">
|
||||
<p className="text-base mt-2 dark:text-gray-200 text-gray-700">Ader Konstantin © {new Date().getFullYear()}</p>
|
||||
<p className="text-sm my-2 text-gray-500">Made with ♥ by <Link href="https://aderk.org" target="_blank" className="text-primary-500 hover:text-primary-600">AderK</Link></p>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -1,41 +1,36 @@
|
||||
import searchPic from '@/public/search.svg';
|
||||
|
||||
import searchPic from "@/public/search.svg";
|
||||
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import Toolbar from "./toolbar";
|
||||
|
||||
import AnimatedLink from '../animatedLink';
|
||||
import HeaderToolbar from "../header/toolbar";
|
||||
import AnimatedLink from "../animatedLink";
|
||||
|
||||
export default function MainHeader() {
|
||||
return (
|
||||
<header className="flex flex-col">
|
||||
<div className="flex flex-row mt-12 mb-22">
|
||||
<header className="flex flex-col mt-4">
|
||||
<div className="flex flex-row">
|
||||
<ul className="w-full flex flex-row justify-between items-baseline list-none">
|
||||
<li className="text-4xl">
|
||||
<AnimatedLink href="https://blog.aderk.tech/en">
|
||||
aderk.tech
|
||||
<AnimatedLink href="/">
|
||||
blog.aderk.org
|
||||
</AnimatedLink>
|
||||
</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="#">
|
||||
<Image
|
||||
src={searchPic}
|
||||
alt="search"
|
||||
width={32}
|
||||
height={32}
|
||||
/>
|
||||
<Image src={searchPic} alt="search" width={28} height={28} />
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="text-2xl mb-20">
|
||||
<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.
|
||||
<div className="text-lg mb-4 mt-6">
|
||||
<p className="leading-8">
|
||||
Этот блог - хроника моего погружения в мир компьютерной архитектуры. <br />
|
||||
Здесь я документирую процесс изучения и проектирования CPU и GPU на основе открытой архитектуры RISC-V. <br />
|
||||
</p>
|
||||
</div>
|
||||
<HeaderToolbar />
|
||||
<Toolbar></Toolbar>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -1,64 +1,36 @@
|
||||
'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 settingsPic from '../../public/settings.svg';
|
||||
import AnimatedLink from '../animatedLink';
|
||||
|
||||
"use client";
|
||||
import Link from "next/link";
|
||||
import { FaGlobe, FaEnvelope, FaRss } from "react-icons/fa";
|
||||
|
||||
export default function Toolbar() {
|
||||
return (
|
||||
<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>
|
||||
<div className="flex items-baseline">
|
||||
<ul className="inline-flex items-center gap-4">
|
||||
<li className="inline filter brightness-0 invert">
|
||||
<Link href="#">
|
||||
<Image
|
||||
src={globePic}
|
||||
alt="lang"
|
||||
width={32}
|
||||
height={32}
|
||||
/>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="inline filter brightness-0 invert">
|
||||
<Link href="#">
|
||||
<Image
|
||||
src={emailPic}
|
||||
alt="email"
|
||||
width={32}
|
||||
height={32}
|
||||
/>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="inline filter brightness-0 invert">
|
||||
<Link href="#">
|
||||
<Image
|
||||
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>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="flex h-16 justify-between items-center dark:border-white border-black border-t border-b">
|
||||
<div className="flex items-baseline">
|
||||
<p>
|
||||
<Link href="#">Science</Link> |{" "}
|
||||
<Link href="#">Software</Link> |{" "}
|
||||
<Link href="#">Hardware</Link>
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-baseline">
|
||||
<ul className="inline-flex items-center gap-4">
|
||||
<li className="inline text-gray-800 dark:text-gray-200 hover:text-primary-500 dark:hover:text-primary-400 transition-colors">
|
||||
<Link href="#">
|
||||
<FaGlobe size={24} />
|
||||
</Link>
|
||||
</li>
|
||||
<li className="inline text-gray-800 dark:text-gray-200 hover:text-primary-500 dark:hover:text-primary-400 transition-colors">
|
||||
<Link href="emailto:konstantin@aderk.org">
|
||||
<FaEnvelope size={24} />
|
||||
</Link>
|
||||
</li>
|
||||
<li className="inline text-gray-800 dark:text-gray-200 hover:text-primary-500 dark:hover:text-primary-400 transition-colors">
|
||||
<Link href="#">
|
||||
<FaRss size={24} />
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
12
package-lock.json
generated
12
package-lock.json
generated
@@ -10,7 +10,8 @@
|
||||
"dependencies": {
|
||||
"next": "15.2.0",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0"
|
||||
"react-dom": "^19.0.0",
|
||||
"react-icons": "^5.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/eslintrc": "^3",
|
||||
@@ -4472,6 +4473,15 @@
|
||||
"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": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
|
||||
11
package.json
11
package.json
@@ -9,19 +9,20 @@
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"next": "15.2.0",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"next": "15.2.0"
|
||||
"react-icons": "^5.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5",
|
||||
"@eslint/eslintrc": "^3",
|
||||
"@tailwindcss/postcss": "^4",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"@tailwindcss/postcss": "^4",
|
||||
"tailwindcss": "^4",
|
||||
"eslint": "^9",
|
||||
"eslint-config-next": "15.2.0",
|
||||
"@eslint/eslintrc": "^3"
|
||||
"tailwindcss": "^4",
|
||||
"typescript": "^5"
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user