Do a lot

.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-  "deno.enable": true
-}

README.md

@@ -1,5 +1,7 @@
-# nameservers
+# Server Template Page
 
-The website I use for my nameservers
+This is the template I use for the landing page on my numerous servers.
 
-Contact me if you want to use them as your nameservers (or even secondary ones)
+It is build with [Lume](https://lume.land) and deployed manually.
+
+All it does is make basic pages with a favicon, a main image along with corresponding meta tags.

_config.ts

@@ -1,27 +1,29 @@
 import lume from "lume/mod.ts";
-import minifyHTML from "lume/plugins/minify_html.ts";
-import imagick from "lume/plugins/imagick.ts";
+import base_path from "lume/plugins/base_path.ts";
 import inline from "lume/plugins/inline.ts";
 import jsx_preact from "lume/plugins/jsx_preact.ts";
-import lightningcss from "lume/plugins/lightningcss.ts";
-import sass from "lume/plugins/sass.ts";
-import sitemap from "lume/plugins/sitemap.ts";
-import sourceMaps from "lume/plugins/source_maps.ts";
-
+import lightningCss from "lume/plugins/lightningcss.ts";
+import metas from "lume/plugins/metas.ts";
+import minify_html from "lume/plugins/minify_html.ts";
+import og_images from "lume/plugins/og_images.ts";
+import robots from "lume/plugins/robots.ts";
 
 const site = lume({
-	src: "./src",
-	dest: "./dist",
+	emptyDest: true,
+	src: "src",	
+	dest: "dist",
 });
 
-site
-	.use(sitemap())
-	.use(jsx_preact())
-	.use(imagick())
-	.use(sass())
-	.use(lightningcss())
-	.use(inline())
-	.use(minifyHTML())
-	.use(sourceMaps());
+site.use(base_path());
+site.use(inline());
+site.use(lightningCss())
+site.use(jsx_preact());
+site.use(metas());
+site.use(minify_html());
+site.use(og_images());
+site.use(robots());
+
+site.copy([".png", ".jpg"], (file) => `${file.replace("/img", "").split(".")[0].split("_icon")[0]}${file.replace("/img", "")}`);
+site.copy(".domains", "jeanne/.domains")
 
 export default site;

deno.json

@@ -1,12 +1,17 @@
 {
-  "importMap": "import_map.json",
+  "compilerOptions": {
+    "jsx": "precompile",
+    "jsxImportSource": "npm:preact",
+    "types": [
+      "lume/types.ts"
+    ]
+  },
   "tasks": {
-    "lume": "echo \"import 'lume/cli.ts'\" | deno run --unstable -A -",
+    "lume": "echo \"import 'lume/cli.ts'\" | deno run -A -",
     "build": "deno task lume",
     "serve": "deno task lume -s"
   },
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "jsxImportSource": "npm:preact"
+  "imports": {
+    "lume/": "https://deno.land/x/lume@v2.1.2/"
   }
 }

import_map.json

@@ -1,7 +0,0 @@
-{
-  "imports": {
-    "lume/": "https://deno.land/x/lume@v1.17.3/",
-    "preact/jsx-runtime": "https://deno.land/x/lume@v1.17.3/deps/preact_runtime.ts",
-    "preact": "https://deno.land/x/lume@v1.17.3/deps/preact.ts"
-  }
-}

src/.domains

@@ -0,0 +1 @@
+jeanne.froth.zone

src/_components/favicon.tsx

@@ -1,3 +0,0 @@
-export default (o: { char: string }) => (
-  <link rel="icon" href={`../img/${o.char}fishe.webp`} inline />
-);

src/_components/footer.tsx

@@ -1,17 +0,0 @@
-import { PageData } from "lume/core.ts";
-
-export default (data: { contact: string, name: string, source: string }) => (
-  <footer>
-    <small>
-      <a href={data.source}>
-        source
-      </a>
-      <small>
-        <br />
-        <br />
-        Contact <a href={data.contact}>{data.name}</a>{" "}
-        if you want to use this nameserver as your own.
-      </small>
-    </small>
-  </footer>
-);

src/_components/image.tsx

@@ -1,4 +0,0 @@
-export default (o: { char: string }) => (
-  //{/* @ts-ignore */}
-  <img alt={o.char as string} src={`../img/${o.char as string}.webp`} inline />
-);

src/_data/site.json

@@ -1,6 +0,0 @@
-{
-  "endpoint": "froth.zone",
-  "source": "https://git.froth.zone/sam/nameservers",
-  "contact": "https://samtherapy.net/contact",
-  "name": "Sam"
-}

src/_includes/components/favicon.tsx

@@ -0,0 +1,3 @@
+export default (o: { char: string }) => (
+  <link rel="icon" href={`${o.char.toLowerCase()}_icon.png`} />
+);

src/_includes/components/image.tsx

@@ -0,0 +1,3 @@
+export default (o: { char: string }) => (
+  <img alt={o.char} title={o.char} src={`${o.char.toLowerCase()}.jpg`} />
+);

src/_includes/layouts/_main.njk

@@ -1,2 +0,0 @@
-<!DOCTYPE html>
-{{ content | safe }}

src/_includes/layouts/layout.tsx

@@ -0,0 +1,22 @@
+import Favicon from "../components/favicon.tsx";
+import Image from "../components/image.tsx";
+
+interface OurData extends Lume.Data {
+  character: string;
+}
+
+export default (data: OurData, helpers: Lume.Helpers) => (
+  <html lang="en">
+    <head>
+      <meta charSet="utf-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <title>{data.metas?.title}</title>
+      <Favicon char={data.character} />
+      {/* @ts-expect-error */} 
+      <link rel="stylesheet" href="/styles.css" inline />
+    </head>
+    <body>
+      <Image char={data.character} />
+    </body>
+  </html>
+);

src/_includes/layouts/main.tsx

@@ -1,23 +0,0 @@
-import { PageData } from "https://deno.land/x/lume@v1.11.4/core.ts";
-import Favicon from "../../_components/favicon.tsx";
-import Image from "../../_components/image.tsx";
-import Footer from "../../_components/footer.tsx";
-export const layout = "layouts/_main.njk";
-
-export default (data: PageData) => (
-  <html lang="en">
-    <head>
-      <title>{data.site.endpoint} Nameserver</title>
-      <meta charSet="utf-8" />
-      <meta name="viewport" content="width=device-width" />
-      <meta name="description" content="Landing page for the froth.zone nameserver service" />
-      <Favicon char={data.body as string} />
-      {/* @ts-ignore */}
-      <link rel="stylesheet" href="../styles.css" inline />
-    </head>
-    <body>
-      <Image char={data.body as string} />
-      <Footer source={data.site.source} name={data.site.name} contact={data.site.contact} />
-    </body>
-  </html>
-);

src/img/_data.json

@@ -1,5 +0,0 @@
-{
-  "imagick": {
-    "format": "webp"
-  }
-}

src/miscservers.page.ts

@@ -0,0 +1,22 @@
+export const layout = "layouts/layout.tsx";
+
+export default function* () {
+	const characters = ["Kaguya", "Mio", "Haruhi", "Kosaki", "Jeanne"];
+	for (const character of characters) {
+		yield {
+			url: `/${character.toLowerCase()}/`,
+			character,
+			metas: {
+				title: `${character} - Landing Page`,
+				site: "Server Landing Page",
+				description: "A landing page for one of my many random servers.",
+				icon: `https://${character.toLowerCase()}.froth.zone/${character.toLowerCase()}_icon.png`,
+				image: `https://${character.toLowerCase()}.froth.zone/${character.toLowerCase()}.jpg`,
+				robots: true,
+				generator: true,
+				twitter: "@weezerfan94",
+				color: "#000000",
+			},
+		};
+	}
+}

src/nameservers.page.ts

@@ -0,0 +1,22 @@
+export const layout = "layouts/layout.tsx";
+
+export default function* () {
+	const characters = ["Rin", "Sakura", "Saber", "Illya"];
+	for (const character of characters) {
+		yield {
+			url: `/${character.toLowerCase()}/`,
+			character,
+			metas: {
+				title: `${character} - Froth.zone Nameserver`,
+				site: "Nameserver Landing Page",
+				description: "A landing page for the froth.zone nameservers",
+				icon: `https://${character.toLowerCase()}.froth.zone/${character.toLowerCase()}_icon.png`,
+				image: `https://${character.toLowerCase()}.froth.zone/${character.toLowerCase()}.jpg`,
+				robots: true,
+				generator: true,
+				twitter: "@weezerfan94",
+				color: "#000000",
+			},
+		};
+	}
+}

src/pages.tmpl.ts

@@ -1,20 +0,0 @@
-export const layout = "layouts/main.tsx";
-
-export default function* () {
-  yield {
-    url: "/rin/",
-    body: "rin",
-  };
-  yield {
-    url: "/sakura/",
-    body: "sakura",
-  };
-  yield {
-    url: "/saber/",
-    body: "saber",
-  };
-  yield {
-    url: "/illya/",
-    body: "illya",
-  };
-}

src/styles.css

@@ -1,6 +1,5 @@
-$primary-color: #000;
-
-body, html {
+body,
+html {
 	min-width: 100%;
 	min-height: 100%;
 }
@@ -19,25 +18,27 @@ body {
 	left: 50%;
 	margin-right: -50%;
 	transform: translate(-50%, -50%);
-	max-height: 80%;
+	height: 100%;
 	margin: auto;
 }
 
 /* For mobile phones: */
 img {
-	max-width: 20em;
+	max-height: 55vh;
+	max-width: 40vh;
 }
 
-@media only screen and (min-width: 1300px) {
-	/* For desktop: */
+@media only screen and (min-width: 1000px) {
 	img {
-		max-width: 25%;
+		max-height: 80%;
+		max-width: 50%;
 	}
 }
 
 a {
 	color: rgba(200, 200, 200, 0.8);
 }
+
 a:hover {
 	color: rgba(200, 200, 200, 1);
-}
+}