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
|
# typescript
|
||||||
*.tsbuildinfo
|
*.tsbuildinfo
|
||||||
next-env.d.ts
|
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 {
|
body {
|
||||||
font-family: var(--font-ibm-vga), monospace;
|
/*font-family: var(--font-ibm-vga), monospace;*/
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
@apply bg-zinc-900 text-zinc-100
|
@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 Blogs from "@/components/home/Blogs";
|
||||||
import Changelog from "@/components/home/Changelog";
|
import Changelog from "@/components/home/Changelog";
|
||||||
import Contact from "@/components/home/Contact";
|
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() {
|
export default function Home() {
|
||||||
|
|
||||||
|
const changelogData: LogItem[] = changelogHandler.getRecentChangelog();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ContentCard innerClass={"!shadow-zinc-600"}>
|
<ContentCard innerClass={"!shadow-zinc-600"}>
|
||||||
@ -14,12 +21,10 @@ export default function Home() {
|
|||||||
|
|
||||||
<div
|
<div
|
||||||
className="mt-4 grid auto-rows-auto sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-[400px_auto_400px] gap-4 ">
|
className="mt-4 grid auto-rows-auto sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-[400px_auto_400px] gap-4 ">
|
||||||
|
|
||||||
<Introduction />
|
<Introduction />
|
||||||
<Changelog/>
|
<Changelog changelogData={changelogData} />
|
||||||
<Blogs />
|
<Blogs />
|
||||||
<Contact />
|
<Contact />
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import React, {HTMLProps, ReactNode} from "react";
|
import React, { ReactNode } from "react";
|
||||||
|
|
||||||
export default function ContentCard(props: {
|
export default function ContentCard(props: {
|
||||||
outerClass?: string,
|
outerClass?: string,
|
||||||
|
@ -34,7 +34,7 @@ export default function AboutMe() {
|
|||||||
<br />
|
<br />
|
||||||
<p>
|
<p>
|
||||||
I also started writing some simple applications using C# and WinForms, <b>creating a small tool to help
|
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 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
|
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.
|
my uncle, a seasoned software developer and big inspiration to little me.
|
||||||
|
@ -28,7 +28,7 @@ export default function Blogs() {
|
|||||||
<div>
|
<div>
|
||||||
<hr />
|
<hr />
|
||||||
<div>
|
<div>
|
||||||
{'//'} for more, head over to the <a href="">blog</a>
|
{'//'} For more, head over to the <a href="">blog</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,7 +1,10 @@
|
|||||||
import ContentCard from "@/components/ContentCard";
|
import ContentCard from "@/components/ContentCard";
|
||||||
import NewsItem from "@/components/home/NewsItem";
|
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 (
|
return (
|
||||||
<ContentCard outerClass={"col-span-1"} innerClass={"!shadow-red-500"}>
|
<ContentCard outerClass={"col-span-1"} innerClass={"!shadow-red-500"}>
|
||||||
<div className="h-full grid grid-rows-[auto_1fr_auto] content-start whitespace-nowrap ">
|
<div className="h-full grid grid-rows-[auto_1fr_auto] content-start whitespace-nowrap ">
|
||||||
@ -12,23 +15,41 @@ export default function Changelog() {
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<ul className="list-disc list-inside mr-7 marker:font-ibm marker:text-red-400 ">
|
<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"}
|
props.changelogData.map((log, index) => {
|
||||||
link={["", "link"]} /></li>
|
let mostRecent = index == 0 ? true : false;
|
||||||
<li><NewsItem date={"'23-06-25"} title={"Test Title Lorum"} color={"text-red-400"}
|
|
||||||
link={["", "link"]}/></li>
|
return (
|
||||||
<li><NewsItem date={"'23-06-23"} title={"Test Title Ipsum"} color={"text-red-500"}
|
<li key={log.id}>
|
||||||
link={["", "link"]}/></li>
|
<NewsItem
|
||||||
<li><NewsItem date={"'23-06-21"} title={"Test Title Weird, really"} color={"text-red-600"}
|
date={log.date}
|
||||||
link={["", "link"]}/></li>
|
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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<hr />
|
<hr />
|
||||||
<div>
|
<div>
|
||||||
{'//'} for more, head over to the <a href="">blog</a>
|
{'//'} For more, head over to the <Link href="">changelog</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -6,6 +6,8 @@ export default function Contact() {
|
|||||||
|
|
||||||
<h2>{'< Contact info >'}</h2>
|
<h2>{'< Contact info >'}</h2>
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
If you‘d like to <b>get in touch with me</b>, consider sending me an <a href="">e-mail</a>, find
|
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
|
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>
|
<div>
|
||||||
<h2>{'< Welcome >'}</h2>
|
<h2>{'< Welcome >'}</h2>
|
||||||
<hr />
|
<hr />
|
||||||
Hi! My name is <b>Nisse</b>. I‘m a 24-year-old software development student. I created
|
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
|
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
|
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.
|
of the (probably at least mildly obscure) things I think a lot about.
|
||||||
</div>
|
</div>
|
||||||
|
@ -16,8 +16,6 @@ export default function NewsItem(props: {
|
|||||||
{props.title}
|
{props.title}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div className="justify-self-end text-right">
|
<div className="justify-self-end text-right">
|
||||||
(<a href={props.link[0]}>{props.link[1]}</a>)
|
(<a href={props.link[0]}>{props.link[1]}</a>)
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,10 +1,8 @@
|
|||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
|
|
||||||
export default function NavButton(props: { text: string, colors: string, link: string }) {
|
export default function NavButton(props: { text: string, colors: string, link: string }) {
|
||||||
// @ts-ignore
|
|
||||||
return (
|
return (
|
||||||
|
|
||||||
// <a href={props.link}
|
|
||||||
< Link href={props.link}
|
< Link href={props.link}
|
||||||
className="filter drop-shadow-pixel-sm hover:drop-shadow-pixel-sm-hover shadow-zinc-950 no-underline" >
|
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
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/* </a>*/}
|
|
||||||
</Link >
|
</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