64 lines
2.4 KiB
TypeScript
64 lines
2.4 KiB
TypeScript
import type { NextPage } from "next";
|
|
import Link from "next/link";
|
|
import gen from "random-seed";
|
|
import Layout from "../components/Blog/Layout";
|
|
import type { ContentList, Project, Diary } from "../lib/content/types";
|
|
import ProjectCard from "../components/Blog/Card";
|
|
import { getContentList } from "../lib/content/generateBackend";
|
|
|
|
import styles from "../styles/Blog/Front.module.scss";
|
|
|
|
|
|
const Blog: NextPage<{ content: ContentList }> = ({content}) => {
|
|
const clearDescription = (description: string) => {
|
|
const linkRegex = /#%\{([a-z0-9 \.-\/:]*)\|([a-z0-9 \/:\.-]*)\}/ig;
|
|
const cmdRegex = /%\{([a-z0-9 \.-\/:]*)}/ig;
|
|
|
|
return description.replace(linkRegex, "$1").replace(cmdRegex, "\"$1\"");
|
|
};
|
|
|
|
const shuffleArray = (arr: any[]) => {
|
|
// We want shuffle but only between days
|
|
const date = new Date();
|
|
const generator = gen.create(`${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`);
|
|
|
|
// https://stackoverflow.com/a/6274381
|
|
for (let i = arr.length - 1; i > 0; i--) {
|
|
const j = generator.intBetween(0, i);
|
|
[arr[i], arr[j]] = [arr[j], arr[i]];
|
|
}
|
|
generator.done();
|
|
return arr;
|
|
};
|
|
|
|
const generateCards = (type: string) => {
|
|
return <div className={styles.contentList}>{
|
|
(shuffleArray(content.filter(p => p.type === type)) as (Project|Diary)[])
|
|
.map(p =>
|
|
<ProjectCard key={p.name} title={p.title} description={clearDescription(p.desc.join(" "))} type={p.type} name={p.name} />
|
|
)}
|
|
</div>;
|
|
};
|
|
|
|
return <Layout>
|
|
<h1>Hello there!</h1>
|
|
<p className={styles.frontText}>
|
|
Welcome to my website!<br/>
|
|
You can find here blog entries about some projects I did and some diaries where I document progress.<br/>
|
|
Interested in me? Visit the <Link href="/me"><a className="nocolor">About Me page</a></Link>, and you will find out more about me.<br/>
|
|
On the right of the navigation, you will find what used to be my website - a CLI you can play around with.<br/><br/>
|
|
Have fun!
|
|
</p>
|
|
<h2>Projects</h2>
|
|
{ generateCards("project") }
|
|
<h2>Diaries</h2>
|
|
{ generateCards("diary") }
|
|
</Layout>;
|
|
|
|
};
|
|
|
|
export async function getServerSideProps() {
|
|
return { props: { content: await getContentList() } };
|
|
}
|
|
|
|
export default Blog; |