Initial commit

.gitignore

@@ -0,0 +1,9 @@
+*
+!*/
+!.gitignore
+!*.go
+!*.md
+!*.mod
+!*.sum
+!*.html
+!*.css

go.mod

@@ -0,0 +1,7 @@
+module git.akyoto.dev/web/akyoto.dev
+
+go 1.22.1
+
+require git.akyoto.dev/go/web v0.0.0-20240330085437-b28a9f12ce73
+
+require git.akyoto.dev/go/router v0.1.4 // indirect

go.sum

@@ -0,0 +1,6 @@
+git.akyoto.dev/go/assert v0.1.3 h1:QwCUbmG4aZYsNk/OuRBz1zWVKmGlDUHhOnnDBfn8Qw8=
+git.akyoto.dev/go/assert v0.1.3/go.mod h1:0GzMaM0eURuDwtGkJJkCsI7r2aUKr+5GmWNTFPgDocM=
+git.akyoto.dev/go/router v0.1.4 h1:ZL5HPl4aNn4QKihf3VVs0Mm9R6ZGn2StAHGRQxjEbws=
+git.akyoto.dev/go/router v0.1.4/go.mod h1:rbHbkLJlQOafuOuvBalO3O8E0JtMFPT3zzTKX3h9T08=
+git.akyoto.dev/go/web v0.0.0-20240330085437-b28a9f12ce73 h1:xSllT0LSYqFr3mhN1T/EZFAdQoHrPbQerZAPhEgQnHo=
+git.akyoto.dev/go/web v0.0.0-20240330085437-b28a9f12ce73/go.mod h1:oB/+nfWbAsBXYhV+TidUjmxdbyGpU7pODdo95bYaRVc=

main.go

@@ -0,0 +1,38 @@
+package main
+
+import (
+	"fmt"
+	"os"
+	"strings"
+
+	"git.akyoto.dev/go/web"
+	"git.akyoto.dev/go/web/send"
+)
+
+func main() {
+	html := mustLoad("public/app.html")
+	css := mustLoad("public/app.css")
+	body := mustLoad("public/body.html")
+	layout := strings.Replace(html, "%head%", fmt.Sprintf("<style>%s</style>", css), 1)
+
+	s := web.NewServer()
+
+	s.Get("/", func(ctx web.Context) error {
+		return send.HTML(ctx, strings.Replace(layout, "%body%", body, 1))
+	})
+
+	s.Run(":8080")
+}
+
+func mustLoad(path string) string {
+	dataBytes, err := os.ReadFile(path)
+
+	if err != nil {
+		panic(err)
+	}
+
+	data := string(dataBytes)
+	data = strings.ReplaceAll(data, "\t", "")
+	data = strings.ReplaceAll(data, "\n", "")
+	return data
+}

public/app.css

@@ -0,0 +1,190 @@
+:root {
+	--main-hue: 40;
+	--main-saturation: 100%;
+	--main-color: hsl(var(--main-hue), var(--main-saturation), 70%);
+	--link-color: hsl(var(--main-hue), var(--main-saturation), 75%);
+	--header-color: hsl(0, 0%, 100%);
+	--text-color: hsl(0, 0%, 77%);
+	--grey-color: hsl(0, 0%, 61%);
+	--highlight-color: hsla(0, 0%, 100%, 0.05);
+	--body-color: hsl(220, 5%, 12%);
+	--font-family: system-ui, sans-serif;
+	--font-family-mono: monospace;
+	--font-size: 18px;
+	--line-height: 1.6;
+	--max-width: 65ch;
+	--padding: 0.78571429em 0.92857143em;
+	--border-radius: 5px;
+	--gap: 1em;
+}
+
+* {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+
+html {
+	height: 100%;
+}
+
+body {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	height: 100%;
+	overflow-x: hidden;
+	overflow-y: scroll;
+	font-family: var(--font-family);
+	font-size: var(--font-size);
+	line-height: var(--line-height);
+	color: var(--text-color);
+	background-color: var(--body-color);
+	word-break: break-word;
+	tab-size: 4;
+}
+
+main,
+section,
+article {
+	display: flex;
+	flex-direction: column;
+	gap: var(--gap);
+}
+
+a {
+	color: var(--link-color);
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+ul,
+ol {
+	list-style-position: inside;
+}
+
+pre {
+	white-space: pre-wrap;
+}
+
+blockquote,
+pre {
+	padding: var(--padding);
+	border-radius: var(--border-radius);
+	background-color: var(--highlight-color);
+}
+
+blockquote p::before {
+	content: "\201C";
+}
+
+blockquote p::after {
+	content: "\201D";
+}
+
+h1 {
+	color: white;
+	font-size: 2.2rem;
+	letter-spacing: -0.02em;
+}
+
+h2 {
+	color: var(--header-color);
+	font-size: 1.8rem;
+	margin-top: var(--gap);
+	padding-bottom: var(--gap);
+	border-bottom: 1px solid var(--highlight-color);
+}
+
+h3 {
+	color: var(--header-color);
+	font-size: 1.3rem;
+	font-weight: normal;
+}
+
+hr {
+	border-top: none;
+	border-bottom: 1px solid var(--highlight-color);
+}
+
+th,
+td {
+	width: 50%;
+	text-align: left;
+}
+
+th {
+	border-bottom: 1px solid var(--highlight-color);
+}
+
+th:empty {
+	display: none;
+}
+
+@media (min-width: 800px) {
+	h2 {
+		margin-left: -1rem;
+	}
+
+	.post-header {
+		margin-left: -1rem;
+	}
+
+	.post-time {
+		margin-left: 0.5rem;
+	}
+}
+
+code {
+	font-family: var(--font-family-mono);
+	word-break: break-word;
+}
+
+.comment {
+	color: gray;
+	font-style: italic;
+}
+
+.char,
+.string {
+	color: greenyellow;
+}
+
+.keyword {
+	color: var(--link-color);
+}
+
+.function {
+	color: var(--link-color);
+}
+
+.builtin {
+	color: #fffab5;
+}
+
+.number {
+	color: cyan;
+}
+
+.variable {
+	color: gray;
+}
+
+.parameter {
+	color: orange;
+}
+
+.section {
+	color: lightgreen;
+}
+
+.operator {
+	color: white;
+}
+
+.punctuation {
+	color: gray;
+}

public/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<link rel="icon" href="/static/favicon.avif" type="image/avif" />
+		%head%
+	</head>
+	<body>
+		%body%
+	</body>
+</html>

public/body.html

@@ -0,0 +1,65 @@
+<style>
+	header,
+	main,
+	footer {
+		width: 100%;
+		max-width: var(--max-width);
+		padding: var(--padding);
+	}
+
+	header {
+		max-width: calc(var(--max-width) + 4rem);
+	}
+
+	main {
+		flex: 1;
+	}
+
+	footer {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		font-size: 0.75em;
+		color: var(--grey-color);
+	}
+</style>
+
+<style>
+	nav {
+		display: flex;
+		gap: 1rem;
+		list-style-type: none;
+		align-items: center;
+	}
+
+	.nav-item {
+		text-decoration: none;
+		color: var(--grey-color);
+	}
+
+	.title {
+		font-size: 1.4rem;
+		font-weight: 700;
+		color: var(--main-color);
+	}
+</style>
+
+<style>
+	time {
+		font-size: 0.8rem;
+		color: var(--grey-color);
+	}
+</style>
+
+<header>
+	<nav>
+		<a href="/" class="nav-item title">akyoto.dev</a>
+		<a href="/projects" class="nav-item">projects</a>
+		<a href="/contact" class="nav-item">contact</a>
+		<a href="/about" class="nav-item">about</a>
+	</nav>
+</header>
+<main>
+	Test.
+</main>
+<footer></footer>