Personal Website

class MyApp extends App{
	
	blogposts = [{
		id: 2,
		title: `Who could have known?`,
		content: `Some things in life are simply strange. Then we have the things that aren't strange at all, but just appear strange to use. Then we have...`,
		timeWritten: Time.setDate(2024, 4, 15),
	}, {
		id: 1,
		title: `A New Discovery!`,
		content: `The most amazing thing just happened: I discovered something new! Never could I imagine that...`,
		timeWritten: Time.setDate(2024, 4, 11),
	}]
	
	createStartPage(){
		return StartPage
	}
	
	createLayout(title, content){
		return Rows.padding(4).children(
			Text.text(`Peter L-G`).font(Font.sizeMm(8).italic()),
			Box.height(1),
			Box.height(0.5).backgroundColor(`black`),
			Box.height(2),
			Columns.children(
				Space,
				Button.text(`Start`).page(StartPage),
				Space,
				Button.text(`Blog`).page(BlogPage),
				Space,
				Button.text(`Contact`).page(ContactPage),
				Space,
			),
			Box.height(2),
			Box.height(0.5).backgroundColor(`black`),
			Text.text(title).left().padding(2).font(Font.bold().sizeMm(6)),
			content.padding(3, `lrb`),
			Space,
			Box.height(0.5).backgroundColor(`black`),
			Box.height(1),
			Text.text(`Copyright Peter L-G 2024`)
		)
	}
	
}

class StartPage extends Page{
	
	createGui(){
		return a.createLayout(
			`Welcome!`,
			Rows.children(
				Text.text(`Welcome to my my personal website!`).left(),
			)
		)
	}
	
}

class BlogPage extends Page{
	
	createGui(){
		return a.createLayout(
			`Blog`,
			Rows.children(
				Text.text(`Feel free to read the ${a.blogposts.length} blogposts I have written here.`).left(),
				Box.height(4),
				Columns.children(
					Space,
					Rows.children(
						a.blogposts.map(p.createBlogpostComponent),
					),
					Space,
				),
			)
		)
	}
	
	createBlogpostComponent(blogpost){
		
		return [
			Button.text(blogpost.title).page(BlogpostPage.id(blogpost.id)),
			Box.height(4),
		]
		
	}
	
}

class ContactPage extends Page{
	
	createGui(){
		return a.createLayout(
			`Contact`,
			Rows.children(
				Text.text(`If you need to contact me, just send me an email at:`).left(),
				Text.text(`imaginary.email@internet.com`).padding(2).left(),
			)
		)
	}
	
}

class BlogpostPage extends Page{
	
	id = 1
	
	createGui(){
		
		const blogpost = a.blogposts.find(b => b.id == p.id)
		
		return a.createLayout(
			blogpost.title,
			Rows.children(
				Text.text(`Written ${blogpost.timeWritten.getDate()}`).font(Font.italic()).padding(2),
				Text.text(blogpost.content).left(),
			)
		)
	}
	
}