Start of UI work
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
Fabian Stamm 2020-07-29 20:47:36 +02:00
parent 7a88c636fd
commit 6a4d1c3b22
8 changed files with 124 additions and 1 deletions

View File

@ -29,5 +29,5 @@ ADD src /app/src
RUN /usr/bin/deno cache --unstable src/registry.ts RUN /usr/bin/deno cache --unstable src/registry.ts
VOLUME [ "/data" ] VOLUME [ "/app/data" ]
ENTRYPOINT [ "/usr/bin/deno", "run", "-A", "--unstable", "/app/src/registry.ts" ] ENTRYPOINT [ "/usr/bin/deno", "run", "-A", "--unstable", "/app/src/registry.ts" ]

View File

@ -15,4 +15,11 @@ export * as Compress from "https://git.stamm.me/Deno/DenReg/raw/branch/master/ta
import DS from "https://raw.githubusercontent.com/hibas123/dndb/master/mod.ts"; import DS from "https://raw.githubusercontent.com/hibas123/dndb/master/mod.ts";
/// <reference path="./types/jsx.d.ts" />
export {
React,
jsx,
Fragment,
} from "https://deno.hibas123.de/raw/@denreg-jsx/mod.ts";
export const Datastore = DS; export const Datastore = DS;

View File

@ -1,3 +1,4 @@
/// <reference path="./types/jsx.d.ts" />
import { ABC, CorsMW, LoggerMW } from "./deps.ts"; import { ABC, CorsMW, LoggerMW } from "./deps.ts";
import config from "./config.ts"; import config from "./config.ts";
@ -13,6 +14,14 @@ api(app.group("api"));
import raw from "./http/raw.ts"; import raw from "./http/raw.ts";
raw(app.group("raw")); raw(app.group("raw"));
import view from "./http/views.ts";
view(app.group("/"));
import render from "./renderer.tsx";
app.renderer = {
render: render,
};
app.start({ port }); app.start({ port });
console.log("Running server at http://0.0.0.0:" + port); console.log("Running server at http://0.0.0.0:" + port);
console.log("Open at http://127.0.0.1:" + port); console.log("Open at http://127.0.0.1:" + port);

View File

@ -0,0 +1,16 @@
import { ABC } from "../deps.ts";
import { basicauth } from "../utils.ts";
export default function views(g: ABC.Group) {
g.get(
"/",
async (ctx) => {
return ctx.render("index");
// const render = await IndexView();
// console.log(render);
// ctx.response.body = render;
// ctx.response.status = 200;
},
basicauth("views")
);
}

37
registry/src/renderer.tsx Normal file
View File

@ -0,0 +1,37 @@
/// <reference path="./types/jsx.d.ts" />
import { React, jsx } from "./deps.ts";
class StringReader implements Deno.Reader {
private data: Uint8Array;
private offset = 0;
constructor(text: string) {
this.data = new TextEncoder().encode(text);
}
async read(p: Uint8Array): Promise<number | null> {
if (this.offset >= this.data.byteLength) return null;
const forLength = Math.min(p.length, this.data.length - this.offset);
for (let i = 0; i < forLength; i++) {
p[i] = this.data[i + this.offset];
}
this.offset += forLength;
return forLength;
}
}
export default async function render(
name: string,
data: any
): Promise<Deno.Reader> {
const component: {
default: () => JSX.IntrinsicElements | Promise<JSX.IntrinsicElements>;
} = await import(`./views/${name}.tsx`);
const res = await (<component.default {...data} />).render();
console.log(res);
return new StringReader(res as string);
}

5
registry/src/types/jsx.d.ts vendored Normal file
View File

@ -0,0 +1,5 @@
declare namespace JSX {
interface IntrinsicElements {
[elemName: string]: any;
}
}

View File

@ -0,0 +1,16 @@
/// <reference path="../types/jsx.d.ts" />
import { React } from "../deps.ts";
export default function Base(d: any, children: any[]) {
return (
<html>
<head>
<link
rel="stylesheet"
href="https://deno.hibas123.de/raw/@hibas123-theme@2.0.2/out/base.css"
/>
</head>
<body class="light-theme">{children}</body>
</html>
);
}

View File

@ -0,0 +1,33 @@
/// <reference path="../types/jsx.d.ts" />
import { React, Fragment } from "../deps.ts";
import Base from "./_base.tsx";
import DB, { IPackage } from "../db.ts";
function Package({ pkg }: { pkg: IPackage }) {
const { name, versions } = pkg;
return (
<div class="card elv-4">
<div style="font-weight: bold">{name}</div>
<ul class="list">
{versions.map((version) => (
<li>{version}</li>
))}
</ul>
</div>
);
}
export default async function index() {
const packages = await DB.find({});
return (
<Base>
<div class="container">
{packages.map((pkg) => (
<Package pkg={pkg} />
))}
</div>
</Base>
);
}