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`),
			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,
			),
			Text.text(title).left(),
			content,
			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(),
				a.blogposts.map(p.createBlogpostComponent)
			)
		)
	}
	
	createBlogpostComponent(blogpost){
		
		return Button.text(blogpost.title).page(BlogpostPage.id(blogpost.id))
		
	}
	
}

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(),
				Columns.children(
					Box.width(5),
					Text.text(`imaginary.email@internet.com`),
				)
			)
		)
	}
	
}

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()}`),
				Text.text(blogpost.content).left(),
			)
		)
	}
	
}