Move static files around + add Dockerfile + add docker-compose.yml
This commit is contained in:
parent
5405630490
commit
48730aa9af
17 changed files with 66 additions and 52 deletions
68
src/index.html
Normal file
68
src/index.html
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>~/startpage</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="left-container">
|
||||
<div class="gif">
|
||||
<img class='vapor' src="cat.gif" width="450px" height="400px" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="right-container">
|
||||
<div class="head">
|
||||
<p>> cd ~/<span class="blinking">_</span></p>
|
||||
</div>
|
||||
|
||||
<div class="bookmarks">
|
||||
<div class="category">
|
||||
<div class="links">
|
||||
<li class="title">daily</li>
|
||||
<li><a href="https://mail.tutanota.com" target="_blank">tutanota</a></li>
|
||||
<li><a href="https://mail.protonmail.com" target="_blank">protonmail</a></li>
|
||||
<li><a href="https://www.youtube.com" target="_blank">youtube</a></li>
|
||||
<li><a href="https://reddit.com/" target="_blank">reddit</a></li>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="category">
|
||||
<div class="links">
|
||||
<li class="title">dev</li>
|
||||
<li><a href="https://github.com/" target="_blank">github</a></li>
|
||||
<li><a href="https://stackoverflow.com/" target="_blank">stackoverflow</a></li>
|
||||
<li><a href="https://distrowatch.com/" target="_blank">distrowatch</a></li>
|
||||
<li><a href="https://devdocs.io/" target="_blank">devdocs</a></li>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="category">
|
||||
<div class="links">
|
||||
<li class="title"><a style="color: #EADBB2" href="https://reddit.com">reddit</a></li>
|
||||
<li><a href="https://reddit.com/r/programming/" target="_blank">r/programming</a></li>
|
||||
<li><a href="https://reddit.com/r/archlinux/" target="_blank">r/archlinux</a></li>
|
||||
<li><a href="https://reddit.com/r/unixporn/" target="_blank">r/unixporn</a></li>
|
||||
<li><a href="https://reddit.com/r/linuxmasterrace/" target="_blank">r/linuxmr</a></li>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="category">
|
||||
<div class="links">
|
||||
<li class="title">fun</li>
|
||||
<li><a href="https://monkeytype.com/" target="_blank">monkeytype</a></li>
|
||||
<li><a href="https://twitter.com/" target="_blank">twitter</a></li>
|
||||
<li><a href="https://twitch.tv/" target="_blank">twitch</a></li>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
39
src/index.ts
Normal file
39
src/index.ts
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
const fetch = (req: Request) => {
|
||||
const url = new URL(req.url);
|
||||
const path = url.pathname;
|
||||
|
||||
if (path.startsWith('/fonts/')) {
|
||||
const fontPath = path.slice('/fonts/'.length);
|
||||
return new Response(Bun.file(`./assets/fonts/${fontPath}`), {
|
||||
headers: {
|
||||
"Content-Type": "application/octet-stream"
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return new Response("404!");
|
||||
};
|
||||
|
||||
Bun.serve({
|
||||
port: Bun.env.PORT || 80,
|
||||
hostname: Bun.env.HOSTNAME || "localhost",
|
||||
static: {
|
||||
"/api/healthcheck": new Response("All good!"),
|
||||
"/": new Response(await Bun.file("./src/index.html").bytes(), {
|
||||
headers: {
|
||||
"Content-Type": "text/html",
|
||||
},
|
||||
}),
|
||||
"/style.css": new Response(await Bun.file("./src/style.css").bytes(), {
|
||||
headers: {
|
||||
"Content-Type": "text/css"
|
||||
},
|
||||
}),
|
||||
"/cat.gif": new Response(await Bun.file("./assets/img/cat.gif").bytes(), {
|
||||
headers: {
|
||||
"Content-Type": "image/gif",
|
||||
},
|
||||
}),
|
||||
},
|
||||
fetch,
|
||||
});
|
||||
152
src/style.css
Normal file
152
src/style.css
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
@font-face {
|
||||
font-family: "Ubuntu";
|
||||
src: url('fonts/Ubuntu-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
:root {
|
||||
--color-bg: #24273a;
|
||||
--color-fg: #D9E0EE;
|
||||
--color-link: #8F9191;
|
||||
--color-link-visited: #F5C2E7;
|
||||
--color-link-hover: #FF79C6 ;
|
||||
}
|
||||
|
||||
html, body {
|
||||
background: var(--color-bg);
|
||||
color: var(--color-fg);
|
||||
font-family: "Ubuntu";
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.vapor {
|
||||
border-radius: 12px;
|
||||
border-style: solid;
|
||||
border-color: #FF79C6;
|
||||
|
||||
}
|
||||
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"."
|
||||
"right"
|
||||
"left"
|
||||
".";
|
||||
|
||||
column-gap: 80px;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.left-container {
|
||||
grid-area: left;
|
||||
aspect-ratio: 1/1;
|
||||
}
|
||||
|
||||
.right-container {
|
||||
grid-area: right;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gif img {
|
||||
max-width: 350px;
|
||||
max-height: 350px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.head {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: 40px;
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.category {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 180px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.bookmarks {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.bookmarks {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1324px) {
|
||||
.container {
|
||||
grid-template-areas:
|
||||
". left right .";
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bookmarks {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: 16px;
|
||||
list-style-type: none;
|
||||
padding: 5px
|
||||
}
|
||||
|
||||
a:link {
|
||||
text-decoration: none;
|
||||
color: var(--color-link);
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: var(--color-link-visited);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--color-link-hover);
|
||||
}
|
||||
|
||||
.blinking {
|
||||
animation: opacity 1s ease-in-out infinite;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@keyframes opacity {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue