Deno/DenReg
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Wiki Activity

Further progress on registry UI.
Some checks failed
continuous-integration/drone/push Build is failing
Details

Browse Source 
Add package README view support and style adjustments
This commit is contained in:
Fabian Stamm
2020-07-31 20:16:12 +02:00
parent 0bee324519
commit 7fcdf2c383
13 changed files with 336 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
registry/src/views/_base.tsx
View File

@ -1,16 +1,25 @@
/// <reference path="../types/jsx.d.ts" />
import { React } from "../deps.ts";
const styles = new TextDecoder().decode(
Deno.readFileSync("src/views/styles.css")
);
export default function Base(d: any, children: any[]) {
return (
<html>
<head>
<link
{/* <link
rel="stylesheet"
href="https://deno.hibas123.de/raw/@hibas123-theme@2.0.2/out/base.css"
/> */}
<link
rel="stylesheet"
href="https://unpkg.com/papercss@1.6.1/dist/paper.min.css"
/>
<style innerHTML={styles}></style>
</head>
<body class="light-theme">{children}</body>
<body class="site">{children}</body>
</html>
);
}

30
registry/src/views/_default.tsx Normal file
View File

@ -0,0 +1,30 @@
/// <reference path="../types/jsx.d.ts" />
import { React, Fragment } from "../deps.ts";
export function Main(a: any, children: any) {
return (
<div style="grid-area: main">
<div class="paper">{children}</div>
</div>
);
}
export function Menu({}: any, children: any) {
return (
<div style="grid-area: menu">
<div class="paper">
<div class="row flex-right">
<button class="sm-4">Login</button>
<button class="sm-4">SignUp</button>
</div>
<h3 class="sidebar-title" style="text-align:center">
<a href="/" style="all:inherit;">
DenReg
</a>
</h3>
{children}
</div>
</div>
);
}

66
registry/src/views/index.tsx
View File

@ -2,32 +2,74 @@
import { React, Fragment } from "../deps.ts";
import Base from "./_base.tsx";
import DB, { IPackage } from "../db.ts";
import { sortVersions } from "../utils.ts";
function Package({ pkg }: { pkg: IPackage }) {
const { name, versions } = pkg;
const { name, versions, author, description } = pkg;
const sorted = versions.sort(sortVersions).reverse();
return (
<div class="card elv-4">
<div style="font-weight: bold">{name}</div>
<ul class="list">
{versions.map((version) => (
<li>{version}</li>
))}
</ul>
<div
class="card margin"
onClick={"window.location.href = '/package/" + name + "'"}
>
<div class="card-body">
<h4 class="card-title">
{name} <span class="badge">{sorted[0]}</span>
</h4>
<h5 class="card-subtitle">By {author}</h5>
<div class="card-text">
{/* {versions.map((version) => (
<li>{version}</li>
))} */}
{description}
</div>
</div>
</div>
);
}
export default async function index() {
const packages = await DB.find({});
import { Main, Menu } from "./_default.tsx";
export default async function index({ search }: any) {
let packages: IPackage[] = [];
if (search && search !== "") {
packages = await DB.package.find({
name: RegExp(`${search}`),
});
} else {
packages = await DB.package.find({});
}
return (
<Base>
<div class="container">
<Main>
<form method="GET" action="./">
<div class="form-group margin">
{/* <label for="searchInput">Search</label> */}
<div style="display:flex">
<input
placeholder="Search..."
class="input-block"
type="text"
id="searchInput"
name="q"
value={search}
/>
<button>Submit</button>
</div>
</div>
</form>
{packages.map((pkg) => (
<Package pkg={pkg} />
))}
</div>
</Main>
<Menu>
<ul>
<li>Item</li>
</ul>
</Menu>
</Base>
);
}

70
registry/src/views/package.tsx Normal file
View File

@ -0,0 +1,70 @@
/// <reference path="../types/jsx.d.ts" />
import { React, Fragment, Marked } from "../deps.ts";
import Base from "./_base.tsx";
import DB, { IPackage } from "../db.ts";
import { sortVersions, getFile } from "../utils.ts";
// function Package({ pkg }: { pkg: IPackage }) {
// const { name, versions, author } = pkg;
// const sorted = versions.sort(sortVersions);
// return (
// <div
// class="card margin"
// onClick={"window.location.href = '/package/" + name + "'"}
// >
// <div class="card-body">
// <h4 class="card-title">{name}</h4>
// <ul class="card-text">
// {versions.map((version) => (
// <li>{version}</li>
// ))}
// {author} {sorted[0]}
// </ul>
// </div>
// </div>
// );
// }
import { Main, Menu } from "./_default.tsx";
export default async function index({ packageName }: any) {
const pkg = await DB.package.findOne({ name: packageName });
if (!pkg)
return (
<Base>
<h1>Not found</h1>
</Base>
);
const readmeContent = await getFile(
packageName,
undefined,
"README.md"
).then((res) => {
if (res)
return Marked.parse(new TextDecoder().decode(res)).content as string;
else return undefined;
});
return (
<Base>
<Main>
<h2 style="margin-bottom: 0">Package: {pkg.name}</h2>
<h4 class="text-muted" style="margin-top: 0; margin-left: .5rem">
By {pkg.author}
</h4>
{readmeContent !== undefined ? (
<div innerHTML={readmeContent} />
) : (
<div class="alert alert-warning">No README.md found!</div>
)}
</Main>
<Menu></Menu>
</Base>
);
}

17
registry/src/views/styles.css Normal file
View File

@ -0,0 +1,17 @@
.site {
display: grid;
grid-template-areas: "main menu";
grid-template-columns: 2fr 1fr;
gap: 1rem;
padding-left: 1rem;
padding-right: 1rem;
}
@media only screen and (max-width: 64rem) {
.site {
grid-template-columns: 1fr;
grid-template-areas:
"menu"
"main";
}
}