You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 lines
2.2 KiB
TypeScript
85 lines
2.2 KiB
TypeScript
import { Context } from "koa";
|
|
import { Mountable } from "@sealcode/sealgen";
|
|
import Router from "@koa/router";
|
|
import { sleep } from "../util";
|
|
import { CollectionItem } from "sealious";
|
|
import { Posts } from "../collections/collections";
|
|
import { getMOTD } from "./motd.post";
|
|
|
|
export const actionName = "ssr2";
|
|
|
|
async function footer() {
|
|
return /* HTML */ `<div class="footer">Copyright 2022. ${await getMOTD()}</div>`;
|
|
}
|
|
|
|
function navbar() {
|
|
return /* HTML */ ` <div class="navbar">
|
|
<div class="logo">My app</div>
|
|
<div>
|
|
<a href="/react/">react</a>
|
|
<a href="/ssr1/">ssr1</a>
|
|
<a href="/ssr2/">ssr2</a>
|
|
<a href="/ssr25/">ssr2.5</a>
|
|
<a href="/ssr3/">ssr3</a>
|
|
<a href="/ssr4/">ssr4</a>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
function sidebar() {
|
|
return /* HTML */ `
|
|
<div class="sidebar">
|
|
<ul class="filters">
|
|
<li><input type="checkbox" /> Filtr1</li>
|
|
<li><input type="checkbox" /> Filtr2</li>
|
|
<li><input type="checkbox" /> Filtr3</li>
|
|
<li><input type="checkbox" /> Filtr4</li>
|
|
</ul>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function renderItem(item: CollectionItem<typeof Posts>) {
|
|
return /* HTML */ `
|
|
<li class="item">
|
|
<h3>${item.get("title")}</h3>
|
|
<p>${item.get("description")}</p>
|
|
</li>
|
|
`;
|
|
}
|
|
|
|
async function content() {}
|
|
|
|
export default new (class ssr2Redirect extends Mountable {
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
async canAccess(_: Context) {
|
|
return { canAccess: true, message: "" };
|
|
}
|
|
|
|
mount(router: Router, path: string) {
|
|
router.get(path, async (ctx) => {
|
|
ctx.res.write(`<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>SSR2 version</title>
|
|
<link href="/dist/style.css" rel="stylesheet" type="text/css" />
|
|
</head>
|
|
<body>
|
|
<div id="app">`);
|
|
ctx.res.write(navbar());
|
|
ctx.res.write(sidebar());
|
|
ctx.res.write(`<div class="content">`);
|
|
// ctx.res.write(`<style>.loading:not(:last-child){display: none}</style>`);
|
|
ctx.res.write(`<div class="loading">Loading.....</div>`);
|
|
const { items } = await Posts.suList().fetch();
|
|
ctx.res.write(/* HTML */ ` <ul class="items">
|
|
${items.map((item) => renderItem(item)).join("")}
|
|
</ul>`);
|
|
ctx.res.write("</div>");
|
|
ctx.res.write(await footer());
|
|
ctx.res.end();
|
|
ctx.body = ctx.res;
|
|
});
|
|
}
|
|
})();
|