formatted various pages; added changelog.json; read whats new section from changelog json
This commit is contained in:
parent
7d1b6da3ca
commit
0eb2416df0
1
.gitignore
vendored
1
.gitignore
vendored
@ -33,3 +33,4 @@ yarn-error.log*
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
.idea
|
||||
|
20
lib/changelog.ts
Normal file
20
lib/changelog.ts
Normal file
@ -0,0 +1,20 @@
|
||||
import data from '../src/app/changelog.json'
|
||||
import { LogItem } from './log-item';
|
||||
|
||||
export class ChangelogHandler {
|
||||
constructor() { }
|
||||
|
||||
getFullChangelog() {
|
||||
const result: LogItem[] = data.entries;
|
||||
|
||||
// console.table(result)
|
||||
return result;
|
||||
}
|
||||
|
||||
getRecentChangelog() {
|
||||
const result: LogItem[] = data.entries.slice(0, 4);
|
||||
|
||||
// console.log(result);
|
||||
return result;
|
||||
}
|
||||
}
|
17
lib/log-item.ts
Normal file
17
lib/log-item.ts
Normal file
@ -0,0 +1,17 @@
|
||||
export class LogItem {
|
||||
id: string;
|
||||
date: string;
|
||||
title: string;
|
||||
description: string;
|
||||
linkName: string;
|
||||
link: string;
|
||||
|
||||
constructor(id: string, date: string, title: string, description: string, linkName: string, link: string) {
|
||||
this.id = id;
|
||||
this.date = date;
|
||||
this.title = title;
|
||||
this.description = description;
|
||||
this.linkName = linkName;
|
||||
this.link = link;
|
||||
}
|
||||
}
|
36
src/app/changelog.json
Normal file
36
src/app/changelog.json
Normal file
@ -0,0 +1,36 @@
|
||||
{
|
||||
"entries": [
|
||||
{
|
||||
"id": "4",
|
||||
"date": "23-07-03",
|
||||
"title": "import test",
|
||||
"description": "this is a test",
|
||||
"linkName": "blog",
|
||||
"link": "/blog"
|
||||
},
|
||||
{
|
||||
"id": "3",
|
||||
"date": "23-07-03",
|
||||
"title": "import test",
|
||||
"description": "this is a test",
|
||||
"linkName": "link",
|
||||
"link": "/about"
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"date": "23-07-03",
|
||||
"title": "import test",
|
||||
"description": "this is a test",
|
||||
"linkName": "link",
|
||||
"link": "/about"
|
||||
},
|
||||
{
|
||||
"id": "1",
|
||||
"date": "23-07-03",
|
||||
"title": "import test",
|
||||
"description": "this is a test",
|
||||
"linkName": "link",
|
||||
"link": "/about"
|
||||
}
|
||||
]
|
||||
}
|
@ -17,7 +17,7 @@
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-ibm-vga), monospace;
|
||||
/*font-family: var(--font-ibm-vga), monospace;*/
|
||||
font-size: 18px;
|
||||
@apply bg-zinc-900 text-zinc-100
|
||||
}
|
||||
|
15
src/app/not-found.tsx
Normal file
15
src/app/not-found.tsx
Normal file
@ -0,0 +1,15 @@
|
||||
import ContentCard from "@/components/ContentCard";
|
||||
|
||||
export default function Custom404() {
|
||||
return (
|
||||
<div>
|
||||
<ContentCard innerClass={"!shadow-red-700"}>
|
||||
<h1>{'<< 404... Oops! >>'}</h1>
|
||||
<hr />
|
||||
<div className={'text-center mt-7 mb-3'}>
|
||||
The requested page <b>does not exist</b>.
|
||||
</div>
|
||||
</ContentCard>
|
||||
</div>
|
||||
)
|
||||
}
|
@ -4,8 +4,15 @@ import Introduction from "@/components/home/Introduction";
|
||||
import Blogs from "@/components/home/Blogs";
|
||||
import Changelog from "@/components/home/Changelog";
|
||||
import Contact from "@/components/home/Contact";
|
||||
import { ChangelogHandler } from "../../lib/changelog";
|
||||
import { LogItem } from "../../lib/log-item";
|
||||
|
||||
const changelogHandler = new ChangelogHandler();
|
||||
|
||||
export default function Home() {
|
||||
|
||||
const changelogData: LogItem[] = changelogHandler.getRecentChangelog();
|
||||
|
||||
return (
|
||||
<>
|
||||
<ContentCard innerClass={"!shadow-zinc-600"}>
|
||||
@ -14,12 +21,10 @@ export default function Home() {
|
||||
|
||||
<div
|
||||
className="mt-4 grid auto-rows-auto sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-[400px_auto_400px] gap-4 ">
|
||||
|
||||
<Introduction />
|
||||
<Changelog/>
|
||||
<Changelog changelogData={changelogData} />
|
||||
<Blogs />
|
||||
<Contact />
|
||||
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
@ -1,4 +1,4 @@
|
||||
import React, {HTMLProps, ReactNode} from "react";
|
||||
import React, { ReactNode } from "react";
|
||||
|
||||
export default function ContentCard(props: {
|
||||
outerClass?: string,
|
||||
|
@ -34,7 +34,7 @@ export default function AboutMe() {
|
||||
<br />
|
||||
<p>
|
||||
I also started writing some simple applications using C# and WinForms, <b>creating a small tool to help
|
||||
me calculate note transpositions when playing music</b>. I also wrote a program that converted game
|
||||
me calculate note transpositions when playing music</b>. Later, I wrote a program that converted game
|
||||
controller inputs into MIDI signals, allowing me to play digital instruments and keyboards using the
|
||||
controller. Additionally, I occasionally attempted to solve small programming exercises given to me by
|
||||
my uncle, a seasoned software developer and big inspiration to little me.
|
||||
|
@ -28,7 +28,7 @@ export default function Blogs() {
|
||||
<div>
|
||||
<hr />
|
||||
<div>
|
||||
{'//'} for more, head over to the <a href="">blog</a>
|
||||
{'//'} For more, head over to the <a href="">blog</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1,7 +1,10 @@
|
||||
import ContentCard from "@/components/ContentCard";
|
||||
import NewsItem from "@/components/home/NewsItem";
|
||||
import Link from "next/link";
|
||||
import { LogItem } from "../../../lib/log-item";
|
||||
|
||||
export default function Changelog() {
|
||||
|
||||
export default function Changelog(props: { changelogData: LogItem[] }) {
|
||||
return (
|
||||
<ContentCard outerClass={"col-span-1"} innerClass={"!shadow-red-500"}>
|
||||
<div className="h-full grid grid-rows-[auto_1fr_auto] content-start whitespace-nowrap ">
|
||||
@ -12,23 +15,41 @@ export default function Changelog() {
|
||||
</div>
|
||||
<div>
|
||||
<ul className="list-disc list-inside mr-7 marker:font-ibm marker:text-red-400 ">
|
||||
<li><NewsItem date={"'23-06-30"} title={"Test Title"} color={"text-white"}
|
||||
link={["", "link"]} mostRecent /></li>
|
||||
<li><NewsItem date={"'23-06-27"} title={"Test Title Something"} color={"text-red-300"}
|
||||
link={["", "link"]} /></li>
|
||||
<li><NewsItem date={"'23-06-25"} title={"Test Title Lorum"} color={"text-red-400"}
|
||||
link={["", "link"]}/></li>
|
||||
<li><NewsItem date={"'23-06-23"} title={"Test Title Ipsum"} color={"text-red-500"}
|
||||
link={["", "link"]}/></li>
|
||||
<li><NewsItem date={"'23-06-21"} title={"Test Title Weird, really"} color={"text-red-600"}
|
||||
link={["", "link"]}/></li>
|
||||
|
||||
{
|
||||
props.changelogData.map((log, index) => {
|
||||
let mostRecent = index == 0 ? true : false;
|
||||
|
||||
return (
|
||||
<li key={log.id}>
|
||||
<NewsItem
|
||||
date={log.date}
|
||||
title={log.title}
|
||||
color={mostRecent ? 'text-white' : 'text-red-300'}
|
||||
link={[log.link, log.linkName]}
|
||||
mostRecent={mostRecent} />
|
||||
</li>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
{/* <li><NewsItem date={"'23-06-30"} title={"Test Title"} color={"text-white"} */}
|
||||
{/* link={["", "link"]} mostRecent /></li> */}
|
||||
{/* <li><NewsItem date={"'23-06-27"} title={"Test Title Something"} color={"text-red-300"} */}
|
||||
{/* link={["", "link"]} /></li> */}
|
||||
{/* <li><NewsItem date={"'23-06-25"} title={"Test Title Lorum"} color={"text-red-400"} */}
|
||||
{/* link={["", "link"]} /></li> */}
|
||||
{/* <li><NewsItem date={"'23-06-23"} title={"Test Title Ipsum"} color={"text-red-500"} */}
|
||||
{/* link={["", "link"]} /></li> */}
|
||||
{/* <li><NewsItem date={"'23-06-21"} title={"Test Title Weird, really"} color={"text-red-600"} */}
|
||||
{/* link={["", "link"]} /></li> */}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<hr />
|
||||
<div>
|
||||
{'//'} for more, head over to the <a href="">blog</a>
|
||||
{'//'} For more, head over to the <Link href="">changelog</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -6,6 +6,8 @@ export default function Contact() {
|
||||
|
||||
<h2>{'< Contact info >'}</h2>
|
||||
<hr />
|
||||
|
||||
|
||||
<p>
|
||||
If you‘d like to <b>get in touch with me</b>, consider sending me an <a href="">e-mail</a>, find
|
||||
me on <a rel="me" href="https://mastodon.world/@niisse">Mastodon</a>, or connect on <a
|
||||
|
@ -6,8 +6,8 @@ export default function Introduction() {
|
||||
<div>
|
||||
<h2>{'< Welcome >'}</h2>
|
||||
<hr />
|
||||
Hi! My name is <b>Nisse</b>. I‘m a 24-year-old software development student. I created
|
||||
this website to server as a small repository and showcase of what I‘m up to in my digital
|
||||
Hi! My name is <b>Nisse</b>. I{"'"}m a 24-year-old software development student. I created
|
||||
this website to server as a small repository and showcase of what I'm up to in my digital
|
||||
life. It‘s also an excuse to <span className="line-through">ramble</span> write about some
|
||||
of the (probably at least mildly obscure) things I think a lot about.
|
||||
</div>
|
||||
|
@ -16,8 +16,6 @@ export default function NewsItem(props: {
|
||||
{props.title}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div className="justify-self-end text-right">
|
||||
(<a href={props.link[0]}>{props.link[1]}</a>)
|
||||
</div>
|
||||
|
@ -1,10 +1,8 @@
|
||||
import Link from 'next/link'
|
||||
|
||||
export default function NavButton(props: { text: string, colors: string, link: string }) {
|
||||
// @ts-ignore
|
||||
return (
|
||||
|
||||
// <a href={props.link}
|
||||
< Link href={props.link}
|
||||
className="filter drop-shadow-pixel-sm hover:drop-shadow-pixel-sm-hover shadow-zinc-950 no-underline" >
|
||||
<div className="py-1 px-3 bg-zinc-800 text-white hover:bg-zinc-700
|
||||
@ -21,7 +19,6 @@ export default function NavButton(props: { text: string, colors: string, link: s
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* </a>*/}
|
||||
</Link >
|
||||
)
|
||||
}
|
BIN
src/styles/fonts/ibm_vga.woff
Normal file
BIN
src/styles/fonts/ibm_vga.woff
Normal file
Binary file not shown.
Loading…
x
Reference in New Issue
Block a user