serve.zone/npmcdn
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Jürgen Kunz
2026-01-04 22:42:19 +00:00
parent abed903b06
commit febf480b60
22 changed files with 2665 additions and 321 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.playwright-mcp/mainpage5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 94 KiB

BIN
.playwright-mcp/mainpage6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 94 KiB

BIN
.playwright-mcp/mainpage7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 94 KiB

BIN
.playwright-mcp/newui.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 94 KiB

4
cli.child.ts Normal file
View File

@@ -0,0 +1,4 @@
#!/usr/bin/env node
process.env.CLI_CALL = 'true';
import * as cliTool from './ts/index.js';
cliTool.runCli();

2
cli.js
View File

@@ -1,4 +1,4 @@
#!/usr/bin/env node #!/usr/bin/env node
process.env.CLI_CALL = 'true'; process.env.CLI_CALL = 'true';
const cliTool = require('./dist_ts/index'); const cliTool = await import('./dist_ts/index.js');
cliTool.runCli(); cliTool.runCli();

6
cli.ts.js
View File

@@ -1,5 +1,5 @@
#!/usr/bin/env node #!/usr/bin/env node
process.env.CLI_CALL = 'true'; process.env.CLI_CALL = 'true';
import '@git.zone/tsrun';
const cliTool = await import('./ts/index.js'); import * as tsrun from '@git.zone/tsrun';
cliTool.runCli(); tsrun.runPath('./cli.child.js', import.meta.url);

39
html/index.html Normal file
View File

@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>opencdn</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
height: 100%;
background: #09090b;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="module" src="./bundle.js"></script>
<script>
window.addEventListener('DOMContentLoaded', () => {
const appContainer = document.getElementById('app');
const config = window.__OPENCDN_CONFIG__ || {};
const path = window.location.pathname;
let element;
if (path.startsWith('/peek')) {
element = document.createElement('opencdn-peekpage');
element.allowedPackages = config.allowedPackages || [];
} else {
element = document.createElement('opencdn-mainpage');
element.version = config.version || '1.0.0';
element.mode = config.mode || 'prod';
element.allowedPackages = config.allowedPackages || [];
}
appContainer.appendChild(element);
});
</script>
</body>
</html>

19
package.json
View File

@@ -1,7 +1,7 @@
{ {
"name": "npmcdn", "name": "@serve.zone/opencdn",
"version": "1.0.3", "version": "1.0.3",
"description": "a cdn using npm as source", "description": "A CDN that serves files directly from npm packages",
"type": "module", "type": "module",
"main": "dist_ts/index.js", "main": "dist_ts/index.js",
"typings": "dist_ts/index.d.ts", "typings": "dist_ts/index.d.ts",
@@ -11,16 +11,26 @@
"test": "(tstest test/)", "test": "(tstest test/)",
"start": "(node --max_old_space_size=100 ./cli.js)", "start": "(node --max_old_space_size=100 ./cli.js)",
"startTs": "(node cli.ts.js)", "startTs": "(node cli.ts.js)",
"build": "(tsbuild --web)" "build": "(tsbuild tsfolders --allowimplicitany && tsbundle element --production)",
"buildBackend": "(tsbuild --web)",
"bundleUI": "pnpm run build && tsx scripts/bundle-ui.ts",
"watch": "tswatch website"
}, },
"devDependencies": { "devDependencies": {
"@git.zone/tsbuild": "^4.1.0", "@git.zone/tsbuild": "^4.1.0",
"@git.zone/tsbundle": "^2.6.3",
"@git.zone/tsrun": "^2.0.1", "@git.zone/tsrun": "^2.0.1",
"@git.zone/tstest": "^3.1.4", "@git.zone/tstest": "^3.1.4",
"@git.zone/tswatch": "^2.3.13",
"@push.rocks/smartnetwork": "^4.4.0", "@push.rocks/smartnetwork": "^4.4.0",
"@push.rocks/smartrequest": "^5.0.1" "@push.rocks/smartrequest": "^5.0.1",
"@types/node": "^22.10.0"
}, },
"dependencies": { "dependencies": {
"@design.estate/dees-catalog": "^3.3.1",
"@design.estate/dees-domtools": "^2.3.6",
"@design.estate/dees-element": "^2.1.3",
"@design.estate/dees-wcctools": "^2.0.1",
"@losslessone_private/lole-serviceserver": "^1.0.54", "@losslessone_private/lole-serviceserver": "^1.0.54",
"@push.rocks/projectinfo": "^5.0.2", "@push.rocks/projectinfo": "^5.0.2",
"@push.rocks/qenv": "^6.1.0", "@push.rocks/qenv": "^6.1.0",
@@ -35,7 +45,6 @@
"@types/express": "^5.0.6", "@types/express": "^5.0.6",
"compression": "^1.8.1", "compression": "^1.8.1",
"express": "^4.22.1", "express": "^4.22.1",
"lit-ntml": "^4.0.2",
"prom-client": "^15.1.3" "prom-client": "^15.1.3"
}, },
"private": true, "private": true,

1118
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

8
readme.md
View File

@@ -1,8 +1,8 @@
# npmcdn # @serve.zone/opencdn
> 🚀 A blazing-fast CDN that serves files directly from npm packages > 🚀 A blazing-fast CDN that serves files directly from npm packages
`npmcdn` is a lightweight, TypeScript-powered CDN server that allows you to serve specific files from npm packages. Think of it as your own private unpkg/jsdelivr, but with fine-grained control over which packages are accessible. `@serve.zone/opencdn` is a lightweight, TypeScript-powered CDN server that allows you to serve specific files from npm packages. Think of it as your own private unpkg/jsdelivr, but with fine-grained control over which packages are accessible.
## Issue Reporting and Security ## Issue Reporting and Security
@@ -21,13 +21,13 @@ For reporting bugs, issues, or security vulnerabilities, please visit [community
## 📦 Installation ## 📦 Installation
```bash ```bash
pnpm add npmcdn pnpm add @serve.zone/opencdn
``` ```
## 🚀 Quick Start ## 🚀 Quick Start
```typescript ```typescript
import { UiPublicServer } from 'npmcdn'; import { UiPublicServer } from '@serve.zone/opencdn';
const server = new UiPublicServer({ const server = new UiPublicServer({
port: 3000, port: 3000,

204
scripts/bundle-ui.ts Normal file
View File

@@ -0,0 +1,204 @@
/**
* UI Bundler Script for opencdn
* Encodes all files from dist_serve/ as base64
* and generates ts/embedded-ui.generated.ts
*
* Usage:
* pnpm bundleUI # One-time bundle
*/
import * as fs from 'fs';
import * as path from 'path';
import { fileURLToPath } from 'url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const PROJECT_ROOT = path.join(__dirname, '..');
const UI_DIST_PATH = path.join(PROJECT_ROOT, 'dist_bundle');
const HTML_PATH = path.join(PROJECT_ROOT, 'html');
const OUTPUT_PATH = path.join(PROJECT_ROOT, 'ts', 'embedded-ui.generated.ts');
const CONTENT_TYPES: Record<string, string> = {
'.html': 'text/html',
'.js': 'application/javascript',
'.mjs': 'application/javascript',
'.css': 'text/css',
'.json': 'application/json',
'.png': 'image/png',
'.jpg': 'image/jpeg',
'.jpeg': 'image/jpeg',
'.gif': 'image/gif',
'.svg': 'image/svg+xml',
'.ico': 'image/x-icon',
'.woff': 'font/woff',
'.woff2': 'font/woff2',
'.ttf': 'font/ttf',
'.eot': 'application/vnd.ms-fontobject',
'.otf': 'font/otf',
'.map': 'application/json',
'.txt': 'text/plain',
'.xml': 'application/xml',
'.webp': 'image/webp',
'.webmanifest': 'application/manifest+json',
};
interface IEmbeddedFile {
path: string;
base64: string;
contentType: string;
size: number;
}
function walkDir(dir: string, baseDir: string, files: IEmbeddedFile[] = []): IEmbeddedFile[] {
if (!fs.existsSync(dir)) {
return files;
}
const entries = fs.readdirSync(dir, { withFileTypes: true });
for (const entry of entries) {
const fullPath = path.join(dir, entry.name);
if (entry.isDirectory()) {
walkDir(fullPath, baseDir, files);
} else if (entry.isFile()) {
const relativePath = '/' + path.relative(baseDir, fullPath).replace(/\\/g, '/');
const ext = path.extname(entry.name).toLowerCase();
const contentType = CONTENT_TYPES[ext] || 'application/octet-stream';
const content = fs.readFileSync(fullPath);
const base64 = content.toString('base64');
files.push({
path: relativePath,
base64,
contentType,
size: content.length,
});
console.log(`[bundle-ui] Encoded: ${relativePath} (${formatSize(content.length)})`);
}
}
return files;
}
function bundleUI(): void {
console.log('[bundle-ui] Starting UI bundling...');
console.log(`[bundle-ui] Source (dist): ${UI_DIST_PATH}`);
console.log(`[bundle-ui] Source (html): ${HTML_PATH}`);
console.log(`[bundle-ui] Output: ${OUTPUT_PATH}`);
const files: IEmbeddedFile[] = [];
let totalSize = 0;
// Walk through dist_serve directory (bundled JS)
if (fs.existsSync(UI_DIST_PATH)) {
walkDir(UI_DIST_PATH, UI_DIST_PATH, files);
} else {
console.log('[bundle-ui] WARNING: dist_serve not found, skipping...');
}
// Walk through html directory (static HTML)
if (fs.existsSync(HTML_PATH)) {
walkDir(HTML_PATH, HTML_PATH, files);
} else {
console.log('[bundle-ui] WARNING: html directory not found, skipping...');
}
if (files.length === 0) {
console.error('[bundle-ui] ERROR: No files found to bundle!');
console.error('[bundle-ui] Run "pnpm build" first to build the UI');
process.exit(1);
}
// Calculate total size
for (const file of files) {
totalSize += file.size;
}
// Sort files for consistent output
files.sort((a, b) => a.path.localeCompare(b.path));
// Generate TypeScript module
const tsContent = generateTypeScript(files, totalSize);
// Write output file
fs.writeFileSync(OUTPUT_PATH, tsContent);
console.log(`[bundle-ui] Generated ${OUTPUT_PATH}`);
console.log(`[bundle-ui] Total files: ${files.length}`);
console.log(`[bundle-ui] Total size: ${formatSize(totalSize)}`);
console.log(`[bundle-ui] Bundling complete!`);
}
function generateTypeScript(files: IEmbeddedFile[], totalSize: number): string {
const fileEntries = files
.map(
(f) =>
` ['${f.path}', { base64: '${f.base64}', contentType: '${f.contentType}' }]`
)
.join(',\n');
return `// AUTO-GENERATED FILE - DO NOT EDIT
// Generated by scripts/bundle-ui.ts
// Total files: ${files.length}
// Total size: ${formatSize(totalSize)}
// Generated at: ${new Date().toISOString()}
interface IEmbeddedFile {
base64: string;
contentType: string;
}
const EMBEDDED_FILES: Map<string, IEmbeddedFile> = new Map([
${fileEntries}
]);
/**
* Get an embedded file by path
* @param path - The file path (e.g., '/index.html')
* @returns The file data and content type, or null if not found
*/
export function getEmbeddedFile(path: string): { data: Buffer; contentType: string } | null {
const file = EMBEDDED_FILES.get(path);
if (!file) return null;
// Decode base64 to Buffer
const data = Buffer.from(file.base64, 'base64');
return { data, contentType: file.contentType };
}
/**
* Check if an embedded file exists
* @param path - The file path to check
*/
export function hasEmbeddedFile(path: string): boolean {
return EMBEDDED_FILES.has(path);
}
/**
* List all embedded file paths
*/
export function listEmbeddedFiles(): string[] {
return Array.from(EMBEDDED_FILES.keys());
}
/**
* Get the total number of embedded files
*/
export function getEmbeddedFileCount(): number {
return EMBEDDED_FILES.size;
}
`;
}
function formatSize(bytes: number): string {
if (bytes < 1024) return `${bytes} B`;
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
}
// Run bundler
bundleUI();

52
ts/embedded-ui.generated.ts Normal file
View File

File diff suppressed because one or more lines are too long

3
ts/index.ts
View File

@@ -6,10 +6,9 @@ process.env.UIP_ENV = process.env.BACKEND_URL?.includes('develop-backend') ? 'de
export const defaultPublicServer = new UiPublicServer({ export const defaultPublicServer = new UiPublicServer({
port: 3000, port: 3000,
packageBaseDirectory: './public/',
npmRegistryUrl: 'https://registry.npmjs.org/', npmRegistryUrl: 'https://registry.npmjs.org/',
allowedPackages: [ allowedPackages: [
'@pushrocks/smartfile' '@push.rocks/smartfile'
], ],
mode: process.env.UIP_ENV === 'dev' ? 'dev' : 'prod', mode: process.env.UIP_ENV === 'dev' ? 'dev' : 'prod',
log: false, log: false,

420
ts/npm-publicserver.classes.uipublicserver.ts
View File

@@ -1,12 +1,18 @@
import * as interfaces from './interfaces.js'; import * as interfaces from './interfaces.js';
import * as plugins from './plugins.js'; import * as plugins from './plugins.js';
import * as paths from './paths.js'; import * as paths from './paths.js';
import * as ntml from './ntml/index.js'; import { getEmbeddedFile, hasEmbeddedFile, listEmbeddedFiles } from './embedded-ui.generated.js';
export interface IPackageConfig {
baseDirectory?: string; // Override base directory for this package
registry?: string; // Override registry URL for this package
}
export interface IPublicServerOptions { export interface IPublicServerOptions {
packageBaseDirectory?: string; packageBaseDirectory?: string; // Default base directory (default: './')
npmRegistryUrl?: string; npmRegistryUrl?: string; // Default registry URL
allowedPackages?: string[]; allowedPackages?: string[]; // List of allowed package names
packageConfigs?: Record<string, IPackageConfig>; // Per-package configuration
port?: number; port?: number;
mode: 'dev' | 'prod'; mode: 'dev' | 'prod';
log?: boolean; log?: boolean;
@@ -17,7 +23,6 @@ export interface IPublicServerOptions {
*/ */
export class UiPublicServer { export class UiPublicServer {
public projectinfo = new plugins.projectinfo.ProjectinfoNpm(paths.packageDir); public projectinfo = new plugins.projectinfo.ProjectinfoNpm(paths.packageDir);
public readme: string;
public startedAt: string; public startedAt: string;
private server: plugins.http.Server; private server: plugins.http.Server;
private npmRegistry: plugins.smartnpm.NpmRegistry; private npmRegistry: plugins.smartnpm.NpmRegistry;
@@ -29,12 +34,38 @@ export class UiPublicServer {
packageBaseDirectory: './', packageBaseDirectory: './',
npmRegistryUrl: 'https://registry.npmjs.org', npmRegistryUrl: 'https://registry.npmjs.org',
allowedPackages: [], allowedPackages: [],
packageConfigs: {},
port: 8080, port: 8080,
mode: 'dev', mode: 'dev',
log: true, log: true,
}; };
public options: IPublicServerOptions; public options: IPublicServerOptions;
/**
* Get the base directory for a specific package
*/
private getPackageBaseDirectory(packageName: string): string {
const packageConfig = this.options.packageConfigs?.[packageName];
let baseDir = packageConfig?.baseDirectory || this.options.packageBaseDirectory;
if (!baseDir.endsWith('/')) {
baseDir += '/';
}
return baseDir;
}
/**
* Get the registry for a specific package
*/
private getPackageRegistry(packageName: string): plugins.smartnpm.NpmRegistry {
const packageConfig = this.options.packageConfigs?.[packageName];
if (packageConfig?.registry && packageConfig.registry !== this.options.npmRegistryUrl) {
return new plugins.smartnpm.NpmRegistry({
npmRegistryUrl: packageConfig.registry,
});
}
return this.npmRegistry;
}
constructor(optionsArg?: IPublicServerOptions) { constructor(optionsArg?: IPublicServerOptions) {
// lets create an npm instance for the registry that we are talking to // lets create an npm instance for the registry that we are talking to
this.options = { this.options = {
@@ -51,24 +82,12 @@ export class UiPublicServer {
}); });
} }
/**
* initializes the readme content
*/
private async initReadme(): Promise<void> {
const readmePath = plugins.path.join(paths.packageDir, 'readme.md');
const readmeContent = await plugins.smartfile.fs.toStringSync(readmePath);
this.readme = await plugins.smartmarkdown.SmartMarkdown.easyMarkdownToHtml(readmeContent);
}
/** /**
* starts the server * starts the server
*/ */
public async startServer() { public async startServer() {
console.log('starting the uipublicserver'); console.log('starting the uipublicserver');
// Initialize readme
await this.initReadme();
const done = plugins.smartpromise.defer(); const done = plugins.smartpromise.defer();
const expressApplication = plugins.express(); const expressApplication = plugins.express();
@@ -84,38 +103,83 @@ export class UiPublicServer {
expressApplication.use(plugins.compression({ filter: shouldCompress })); expressApplication.use(plugins.compression({ filter: shouldCompress }));
// Serve embedded UI files (index.html, bundle.js, etc.)
expressApplication.get('/', async (req, res) => {
await this.serveIndexHtml(req, res);
});
expressApplication.get('/index.html', async (req, res) => {
await this.serveIndexHtml(req, res);
});
// Serve other embedded static files (bundle.js, css, etc.)
expressApplication.get('/bundle.js', async (req, res) => {
res.setHeader('cache-control', 'no-cache, no-store, must-revalidate');
await this.serveEmbeddedFile('/bundle.js', res);
});
expressApplication.get('/bundle.js.map', async (req, res) => {
res.setHeader('cache-control', 'no-cache, no-store, must-revalidate');
await this.serveEmbeddedFile('/bundle.js.map', res);
});
// Serve any other embedded files
expressApplication.use('/assets', async (req, res, next) => {
const filePath = '/assets' + req.path;
if (hasEmbeddedFile(filePath)) {
await this.serveEmbeddedFile(filePath, res);
} else {
next();
}
});
// API endpoint for file listing (dev mode)
if (this.options.mode === 'dev') { if (this.options.mode === 'dev') {
expressApplication.use('/peek/', async (req, res) => { expressApplication.get('/api/files/:org/:package', async (req, res) => {
const host = req.headers.host || 'localhost'; const packageName = `${req.params.org}/${req.params.package}`;
const parsedUrl = new plugins.url.URL(`http://${host}${req.url}`); const version = (req.query.version as string) || '';
const simpleResponse: interfaces.ISimpleResponse = await this.renderPeek({ const distTag = (req.query.disttag as string) || '';
headers: req.headers,
parsedUrl, if (!this.options.allowedPackages.includes(packageName)) {
}); res.status(403).json({ error: 'Package not allowed' });
for (const header of Object.keys(simpleResponse.headers)) { return;
res.setHeader(header, simpleResponse.headers[header]);
} }
res.status(simpleResponse.status);
res.write(simpleResponse.body); const baseDirectory = this.getPackageBaseDirectory(packageName);
res.end(); const registry = this.getPackageRegistry(packageName);
try {
const result = await registry.getFilesFromPackage(
packageName,
plugins.path.join(baseDirectory),
{ version, distTag }
);
const files = result.map(smartfile => {
return smartfile.path.replace(plugins.path.join('package', baseDirectory), '');
}); });
expressApplication.use('/readme/', async (req, res) => { // Get package info for versions
const host = req.headers.host || 'localhost'; const packageInfo = await registry.getPackageInfo(packageName).catch(() => null);
const parsedUrl = new plugins.url.URL(`http://${host}${req.url}`); const versions = packageInfo?.allVersions?.slice(-20).reverse().map(v => v.version) || [];
const simpleResponse: interfaces.ISimpleResponse = await this.renderReadme({
headers: req.headers, res.json({ files, versions });
parsedUrl, } catch (err) {
}); res.status(404).json({ error: 'Package not found' });
for (const header of Object.keys(simpleResponse.headers)) {
res.setHeader(header, simpleResponse.headers[header]);
} }
res.status(simpleResponse.status); });
res.write(simpleResponse.body);
res.end(); // Peek route serves the SPA
expressApplication.get('/peek/*', async (req, res) => {
await this.serveIndexHtml(req, res);
});
expressApplication.get('/peek', async (req, res) => {
await this.serveIndexHtml(req, res);
}); });
} }
// Main package serving route
expressApplication.use('/', async (req, res) => { expressApplication.use('/', async (req, res) => {
const host = req.headers.host || 'localhost'; const host = req.headers.host || 'localhost';
const parsedUrl = new plugins.url.URL(`http://${host}${req.url}`); const parsedUrl = new plugins.url.URL(`http://${host}${req.url}`);
@@ -143,6 +207,52 @@ export class UiPublicServer {
await done.promise; await done.promise;
} }
/**
* Serve the index.html with configuration injected
*/
private async serveIndexHtml(req: plugins.express.Request, res: plugins.express.Response) {
const embeddedFile = getEmbeddedFile('/index.html');
if (!embeddedFile) {
res.status(500).send('UI not bundled. Run pnpm bundleUI first.');
return;
}
// Inject configuration into the HTML
let html = embeddedFile.data.toString('utf-8');
const config = {
version: this.projectinfo.version,
mode: this.options.mode,
allowedPackages: this.options.allowedPackages,
};
// Inject config script before the closing </head> tag
const configScript = `<script>window.__OPENCDN_CONFIG__ = ${JSON.stringify(config)};</script>`;
html = html.replace('</head>', `${configScript}\n</head>`);
res.setHeader('content-type', embeddedFile.contentType);
res.setHeader('cache-control', 'no-cache');
res.status(200).send(html);
}
/**
* Serve an embedded file
*/
private async serveEmbeddedFile(filePath: string, res: plugins.express.Response) {
const embeddedFile = getEmbeddedFile(filePath);
if (!embeddedFile) {
res.status(404).send('File not found');
return;
}
res.setHeader('content-type', embeddedFile.contentType);
res.setHeader('content-length', embeddedFile.data.length.toString());
// Only set cache-control if not already set
if (!res.getHeader('cache-control')) {
res.setHeader('cache-control', 'public, max-age=31536000, immutable');
}
res.status(200).send(embeddedFile.data);
}
public disableLogging() { public disableLogging() {
this.options.log = false; this.options.log = false;
} }
@@ -171,25 +281,14 @@ export class UiPublicServer {
private render: interfaces.IRenderFunction = async (req) => { private render: interfaces.IRenderFunction = async (req) => {
const pathArray = req.parsedUrl.pathname.split('/'); const pathArray = req.parsedUrl.pathname.split('/');
if (pathArray.length < 3) { // Handle root path - already served by express routes above
const textArray = [ if (pathArray.length < 3 || !pathArray[1].startsWith('@')) {
`serving javascript to the web for Lossless GmbH.<br/>`,
`Running in mode: <b>${this.options.mode}</b><br/><br/>`,
];
if (this.options.mode === 'dev') {
textArray.push(
`<b>Wondering what we serve?</b> <a href="/peek/">Lets take a peek!</a><br/>`
);
textArray.push(`<b>Documentation:</b> <a href="/readme/">Read the docs</a>`);
}
return { return {
headers: { headers: {
'content-type': 'text/html', 'content-type': 'text/html',
}, },
status: 201, status: 404,
body: await plugins.litNtml.html` body: this.getErrorPage('Not Found', 'The requested path was not found.'),
${ntml.getBody(this, textArray)}
`,
}; };
} }
@@ -198,11 +297,11 @@ export class UiPublicServer {
if (!npmOrg.startsWith('@')) { if (!npmOrg.startsWith('@')) {
console.log('malformed npmorg'); console.log('malformed npmorg');
return { return {
status: 500, status: 400,
headers: { headers: {
'content-type': 'text/html', 'content-type': 'text/html',
}, },
body: `npmorg "${npmOrg}" must start with @`, body: this.getErrorPage('Bad Request', `npm org "${npmOrg}" must start with @`),
}; };
} }
@@ -219,15 +318,17 @@ export class UiPublicServer {
headers: { headers: {
'content-type': 'text/html', 'content-type': 'text/html',
}, },
status: 503, status: 403,
body: await plugins.litNtml.html` body: this.getErrorPage('Forbidden', 'The requested package is not allowlisted for public access.'),
the requested package is not allowlisted for public access
`,
}; };
} }
// Get per-package configuration
const baseDirectory = this.getPackageBaseDirectory(packageName);
const registry = this.getPackageRegistry(packageName);
// lets care about the inner package path // lets care about the inner package path
let filePath = this.options.packageBaseDirectory; let filePath = baseDirectory;
let first = true; let first = true;
for (let i = 3; i < pathArray.length; i++) { for (let i = 3; i < pathArray.length; i++) {
if (first) { if (first) {
@@ -253,7 +354,7 @@ export class UiPublicServer {
smartfile = await this.requestMap[requestDescriptor].promise; smartfile = await this.requestMap[requestDescriptor].promise;
} else { } else {
this.requestMap[requestDescriptor] = plugins.smartpromise.defer(); this.requestMap[requestDescriptor] = plugins.smartpromise.defer();
smartfile = await this.npmRegistry smartfile = await registry
.getFileFromPackage(packageName, filePath, { .getFileFromPackage(packageName, filePath, {
version, version,
distTag, distTag,
@@ -272,9 +373,9 @@ export class UiPublicServer {
headers: { headers: {
'content-type': 'text/html', 'content-type': 'text/html',
}, },
body: await ntml.getBody( body: this.getErrorPage(
this, 'Not Found',
`${packageName}@${version} does not have a file at "${filePath}"` `${packageName}@${version || 'latest'} does not have a file at "${filePath}"`
), ),
}; };
} }
@@ -298,121 +399,78 @@ export class UiPublicServer {
}; };
}; };
private renderPeek: interfaces.IRenderFunction = async (req) => { /**
const pathArray = req.parsedUrl.pathname.split('/'); * Generate a simple error page
const npmOrg = pathArray[1]; */
const npmPackage = pathArray[2]; private getErrorPage(title: string, message: string): string {
const npmPackageName = `${npmOrg}/${npmPackage}`; return `<!DOCTYPE html>
const distTag = req.parsedUrl.searchParams.get('disttag'); <html lang="en">
const version = req.parsedUrl.searchParams.get('version'); <head>
<meta charset="UTF-8">
// lets care about cors <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${title} - opencdn</title>
if (!npmOrg || !npmPackage || !this.options.allowedPackages.includes(npmPackageName)) { <style>
return { * { margin: 0; padding: 0; box-sizing: border-box; }
status: 200, body {
headers: { min-height: 100vh;
'content-type': 'text/html', background: #09090b;
}, font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
body: ` color: #fafafa;
${await ntml.getBody(this, [ display: flex;
`<a href="../">../ -> Go back</a><br/>`, align-items: center;
`<b>allowlisted packages:</b><br/>`, justify-content: center;
...this.options.allowedPackages.map((packageArg) => { padding: 24px;
return ` -webkit-font-smoothing: antialiased;
<div>"${packageArg}" -> mapping to "${this.options.packageBaseDirectory}" inside the package <a href="/peek/${packageArg}">Peek...</a></div>
`;
}),
])}
`,
};
} }
const result = await this.npmRegistry .card {
.getFilesFromPackage(npmPackageName, plugins.path.join(this.options.packageBaseDirectory), { background: #09090b;
version: version, border: 1px solid #27272a;
distTag: distTag, border-radius: 8px;
}) padding: 48px;
.catch((err) => { max-width: 500px;
return; text-align: center;
});
if (!result) {
return {
status: 404,
headers: {
'content-type': 'text/html',
},
body: `
${await ntml.getBody(this, [
`<a href="/peek/">/peek/ -> Go to peek overview</a><br/>`,
`<b>Not found: package ${npmPackageName}@${
version || 'latest'
} is not available on the supplied registry</b><br/>`,
])}
`,
};
} }
.icon {
const packageInfo = await this.npmRegistry.getPackageInfo(npmPackageName); font-size: 64px;
margin-bottom: 24px;
return { opacity: 0.8;
status: 200, }
headers: { h2 {
'content-type': 'text/html', font-size: 24px;
}, font-weight: 600;
body: ` color: #fafafa;
${await ntml.getBody(this, [ margin-bottom: 12px;
`<a href="/peek/">/peek/ -> Go to peek overview</a><br/><br/>`, }
`<h1>${npmPackageName}@${version || distTag || '<i>inferred</i> latest'}</h1>`, p {
`<b>Versions:</b> ${packageInfo.allVersions color: #a1a1aa;
.map( margin-bottom: 32px;
(versionArg) => line-height: 1.5;
`<a href="./${npmPackage}?version=${versionArg.version}">${versionArg.version}</a> | ` }
) a {
.join('')}<br/><br/>`, display: inline-block;
`<b>DistTags:</b> ${ padding: 10px 20px;
packageInfo.allDistTags background: #27272a;
.map( border: 1px solid #27272a;
(distTagArg) => border-radius: 6px;
`<a href="./${npmPackage}?disttag=${distTagArg.name}">${distTagArg.name} (${distTagArg.targetVersion})</a> | ` color: #fafafa;
) text-decoration: none;
.join('') || 'no dist tags found!' font-weight: 500;
}<br/><br/>`, font-size: 14px;
`<b>File Overview at version and path:</b><br/>`, transition: all 0.15s;
`"<b>${npmPackageName}@${ }
version || distTag || '<i>inferred</i> latest' a:hover {
}</b>" under internal path "<b>${this.options.packageBaseDirectory}</b>"<br/></br>`, border-color: #d4d4d8;
...result.map((smartfile) => { }
const displayPath = smartfile.path.replace( </style>
plugins.path.join('package', this.options.packageBaseDirectory), </head>
'' <body>
); <div class="card">
return `<a href="/${npmPackageName}/${displayPath}?version=${version || ''}&disttag=${ <div class="icon">📦</div>
distTag || '' <h2>${title}</h2>
}">${displayPath}</a><br/>`; <p>${message}</p>
}), <a href="/">← Back to Home</a>
])} </div>
`, </body>
}; </html>`;
};
private renderReadme: interfaces.IRenderFunction = async (req) => {
return {
status: 200,
headers: {
'content-type': 'text/html',
},
body: await ntml.getBody(this, [
`<style>
pre {
display: block;
background: #fafafa;
border: 1px dotted #CCC;
padding: 20px;
} }
</style>`,
this.readme,
]),
};
};
} }

60
ts/ntml/body.ts
View File

@@ -1,60 +0,0 @@
import type { UiPublicServer } from '../npm-publicserver.classes.uipublicserver.js';
import * as plugins from '../plugins.js';
export const getBody = async (uipublicServerArg: UiPublicServer, contentArg: string | string[]) => {
return await plugins.litNtml.html`
<head></head>
<body>
<style>
body {
margin: 0px;
padding: 20px;
background: #eeeeeb;
font-family: 'Courier New', Courier, monospace;
}
.main {
background: #ffffff;
max-width: 1000px;
margin: auto;
border: 1px dashed #CCCCCC;
border-radius: 10px;
padding: 20px;
padding-bottom: 60px;
position:relative;
overflow: hidden;
}
.logo {
text-align: center;
background: #fafafa;
border-bottom: 1px dotted #CCCCCC;
margin-left: -20px;
margin-top: -20px;
margin-right: -20px;
margin-bottom: 20px;
padding: 20px;
}
.footer {
position: absolute;
bottom: 0px;
right: 0px;
left: 0px;
text-align: center;
line-height: 40px;
background: #fafafa;
}
</style>
<div class="main">
<div class="logo">
<img src="https://assetbroker.lossless.one/brandfiles/lossless/svg-minimal-bright.svg" onclick="window.location.href = 'https://lossless.com'" />
</div>
${contentArg}
<div class="footer">
UiPublicServer v${uipublicServerArg.projectinfo.version} |
running since ${uipublicServerArg.startedAt} |
<a href="https://lossless.gmbh" target="_blank">Legal Info</a></div>
</div>
</body>
`;
};

1
ts/ntml/index.ts
View File

@@ -1 +0,0 @@
export * from './body.js';

3
ts/plugins.ts
View File

@@ -29,7 +29,6 @@ export {
// unscoped packages // unscoped packages
import compression from 'compression'; import compression from 'compression';
import express from 'express'; import express from 'express';
import * as litNtml from 'lit-ntml';
import * as promClient from 'prom-client'; import * as promClient from 'prom-client';
export { compression, express, litNtml, promClient }; export { compression, express, promClient };

2
ts_web/elements/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export * from './opencdn-mainpage.js';
export * from './opencdn-peekpage.js';

358
ts_web/elements/opencdn-mainpage.ts Normal file
View File

@@ -0,0 +1,358 @@
import {
DeesElement,
property,
html,
customElement,
type TemplateResult,
css,
state,
} from '@design.estate/dees-element';
import '@design.estate/dees-catalog';
declare global {
interface HTMLElementTagNameMap {
'opencdn-mainpage': OpencdnMainpage;
}
}
@customElement('opencdn-mainpage')
export class OpencdnMainpage extends DeesElement {
@property({ type: String })
public accessor version: string = '1.0.0';
@property({ type: String })
public accessor mode: string = 'prod';
@property({ type: Array })
public accessor allowedPackages: string[] = [];
@state()
private accessor currentView: 'home' | 'peek' | 'docs' = 'home';
// Shadcn-like color palette
public static styles = [
css`
:host {
--background: #09090b;
--foreground: #fafafa;
--card: #09090b;
--card-foreground: #fafafa;
--muted: #27272a;
--muted-foreground: #a1a1aa;
--border: #27272a;
--input: #27272a;
--primary: #fafafa;
--primary-foreground: #18181b;
--secondary: #27272a;
--secondary-foreground: #fafafa;
--accent: #27272a;
--accent-foreground: #fafafa;
--ring: #d4d4d8;
--radius: 0.5rem;
display: block;
min-height: 100vh;
background: var(--background);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
color: var(--foreground);
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: border-box;
}
.container {
max-width: 700px;
margin: 0 auto;
padding: 60px 24px;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.header {
text-align: center;
margin-bottom: 48px;
}
.logo {
display: inline-flex;
align-items: center;
gap: 14px;
margin-bottom: 16px;
}
.logo-icon {
width: 48px;
height: 48px;
background: var(--foreground);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.logo-icon dees-icon {
--dees-icon-color: var(--background);
}
.logo-text {
font-size: 36px;
font-weight: 600;
color: var(--foreground);
letter-spacing: -0.02em;
}
.tagline {
color: var(--muted-foreground);
font-size: 16px;
font-weight: 400;
}
.content {
flex: 1;
display: flex;
flex-direction: column;
gap: 24px;
}
.card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px;
}
.usage-box {
background: var(--muted);
border-radius: var(--radius);
padding: 20px 24px;
border: 1px solid var(--border);
}
.usage-title {
color: var(--muted-foreground);
font-size: 14px;
margin-bottom: 12px;
text-align: center;
}
.usage-code {
font-family: 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, monospace;
font-size: 14px;
color: var(--foreground);
background: var(--background);
padding: 14px 18px;
border-radius: calc(var(--radius) - 2px);
text-align: center;
border: 1px solid var(--border);
}
.nav-buttons {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.nav-buttons dees-button {
--dees-button-width: auto;
}
.packages-section {
margin-top: 8px;
}
.packages-title {
color: var(--foreground);
font-size: 14px;
font-weight: 500;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.packages-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.package-tag {
background: var(--secondary);
color: var(--muted-foreground);
padding: 8px 14px;
border-radius: calc(var(--radius) - 2px);
font-family: 'SF Mono', 'Fira Code', monospace;
font-size: 13px;
border: 1px solid var(--border);
cursor: pointer;
transition: all 0.15s ease;
}
.package-tag:hover {
background: var(--accent);
color: var(--foreground);
border-color: var(--ring);
}
.footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 32px;
margin-top: auto;
border-top: 1px solid var(--border);
font-size: 13px;
color: var(--muted-foreground);
}
.status {
display: inline-flex;
align-items: center;
gap: 8px;
color: #22c55e;
font-size: 13px;
font-weight: 500;
}
.status-dot {
width: 8px;
height: 8px;
background: #22c55e;
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.version {
font-family: 'SF Mono', monospace;
color: var(--muted-foreground);
font-size: 12px;
}
.mode-badge {
padding: 4px 10px;
border-radius: calc(var(--radius) - 2px);
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.mode-badge.dev {
background: rgba(34, 197, 94, 0.1);
color: #22c55e;
}
.mode-badge.prod {
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
}
.footer-right {
display: flex;
align-items: center;
gap: 16px;
}
.footer-link {
color: var(--muted-foreground);
text-decoration: none;
transition: color 0.15s ease;
font-size: 13px;
}
.footer-link:hover {
color: var(--foreground);
}
.empty-state {
text-align: center;
padding: 40px 20px;
color: var(--muted-foreground);
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
`,
];
public render(): TemplateResult {
return html`
<div class="container">
<div class="header">
<div class="logo">
<div class="logo-icon">
<dees-icon .icon=${'lucide:package'} .iconSize=${24}></dees-icon>
</div>
<span class="logo-text">opencdn</span>
</div>
<p class="tagline">Serve files directly from npm packages</p>
</div>
<div class="content">
<div class="usage-box">
<div class="usage-title">Request files using:</div>
<div class="usage-code">/@scope/package/path/to/file.js?version=1.0.0</div>
</div>
${this.mode === 'dev' ? html`
<div class="nav-buttons">
<dees-button type="highlighted" @click=${() => window.location.href = '/peek/'}>
<dees-icon .icon=${'lucide:folder-open'} .iconSize=${16} slot="iconLeft"></dees-icon>
Browse Packages
</dees-button>
<dees-button @click=${() => window.location.href = '/readme/'}>
<dees-icon .icon=${'lucide:book-open'} .iconSize=${16} slot="iconLeft"></dees-icon>
Documentation
</dees-button>
</div>
` : ''}
${this.allowedPackages.length > 0 ? html`
<div class="packages-section">
<div class="packages-title">
<dees-icon .icon=${'lucide:boxes'} .iconSize=${16}></dees-icon>
Available Packages
</div>
<div class="packages-list">
${this.allowedPackages.map(pkg => html`
<span class="package-tag" @click=${() => window.location.href = `/peek/${pkg}`}>
${pkg}
</span>
`)}
</div>
</div>
` : html`
<div class="empty-state">
<dees-icon .icon=${'lucide:package-x'} .iconSize=${48} style="opacity: 0.5;"></dees-icon>
<p>No packages configured</p>
</div>
`}
</div>
<div class="footer">
<div style="display: flex; align-items: center; gap: 12px;">
<span class="status">
<span class="status-dot"></span>
Online
</span>
<span class="version">v${this.version}</span>
<span class="mode-badge ${this.mode}">${this.mode}</span>
</div>
<div class="footer-right">
<a href="https://task.vc" target="_blank" class="footer-link">Task Venture Capital</a>
</div>
</div>
</div>
`;
}
}

682
ts_web/elements/opencdn-peekpage.ts Normal file
View File

@@ -0,0 +1,682 @@
import {
DeesElement,
property,
html,
customElement,
type TemplateResult,
cssManager,
css,
state,
} from '@design.estate/dees-element';
import '@design.estate/dees-catalog';
declare global {
interface HTMLElementTagNameMap {
'opencdn-peekpage': OpencdnPeekpage;
}
}
interface IFileNode {
name: string;
path: string;
isFile: boolean;
children?: IFileNode[];
}
@customElement('opencdn-peekpage')
export class OpencdnPeekpage extends DeesElement {
@property({ type: String })
public accessor packageName: string = '';
@property({ type: String })
public accessor version: string = '';
@property({ type: Array })
public accessor allowedPackages: string[] = [];
@state()
private accessor files: string[] = [];
@state()
private accessor fileTree: IFileNode[] = [];
@state()
private accessor selectedFile: string | null = null;
@state()
private accessor fileContent: string = '';
@state()
private accessor loading: boolean = false;
@state()
private accessor searchQuery: string = '';
@state()
private accessor availableVersions: string[] = [];
@state()
private accessor expandedFolders: Set<string> = new Set();
public static styles = [
cssManager.defaultStyles,
css`
:host {
--background: #09090b;
--foreground: #fafafa;
--muted: #27272a;
--muted-foreground: #a1a1aa;
--border: #27272a;
--primary: #fafafa;
--primary-foreground: #18181b;
--secondary: #27272a;
--ring: #d4d4d8;
display: block;
height: 100vh;
background: var(--background);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
color: var(--foreground);
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: border-box;
}
.app {
display: flex;
flex-direction: column;
height: 100%;
}
/* Header */
.header {
display: flex;
align-items: center;
gap: 16px;
padding: 12px 20px;
background: var(--background);
border-bottom: 1px solid var(--border);
}
.header-logo {
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
color: var(--foreground);
text-decoration: none;
cursor: pointer;
transition: color 0.15s;
}
.header-logo:hover {
color: var(--muted-foreground);
}
.header-sep {
color: var(--border);
}
.header-package {
font-weight: 600;
color: var(--foreground);
}
.header-version {
padding: 4px 10px;
background: var(--muted);
border-radius: 6px;
font-size: 12px;
color: var(--muted-foreground);
}
.header-spacer {
flex: 1;
}
.version-select {
padding: 8px 12px;
background: var(--muted);
border: 1px solid var(--border);
border-radius: 6px;
color: var(--foreground);
font-size: 13px;
cursor: pointer;
transition: border-color 0.15s;
}
.version-select:hover,
.version-select:focus {
border-color: var(--ring);
outline: none;
}
/* Main Content */
.main {
display: flex;
flex: 1;
overflow: hidden;
}
/* Sidebar */
.sidebar {
width: 300px;
background: var(--background);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
}
.sidebar-header {
padding: 12px 16px;
font-size: 12px;
font-weight: 500;
color: var(--muted-foreground);
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 1px solid var(--border);
}
.file-tree {
flex: 1;
overflow-y: auto;
padding: 8px 0;
}
/* Tree Items */
.tree-folder {
user-select: none;
}
.folder-header {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
cursor: pointer;
font-size: 13px;
color: var(--foreground);
transition: background 0.15s;
}
.folder-header:hover {
background: var(--muted);
}
.folder-chevron {
margin-left: auto;
font-size: 10px;
color: var(--muted-foreground);
transition: transform 0.15s;
}
.folder-chevron.open {
transform: rotate(90deg);
}
.folder-children {
padding-left: 16px;
}
.tree-file {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
cursor: pointer;
font-size: 13px;
color: var(--muted-foreground);
transition: all 0.15s;
}
.tree-file:hover {
background: var(--muted);
color: var(--foreground);
}
.tree-file.active {
background: var(--primary);
color: var(--primary-foreground);
}
/* Content Area */
.content {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.content-header {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
background: var(--background);
border-bottom: 1px solid var(--border);
}
.content-path {
font-family: 'SF Mono', 'Fira Code', monospace;
font-size: 13px;
color: var(--muted-foreground);
}
.content-path span {
color: var(--foreground);
}
.content-actions {
margin-left: auto;
display: flex;
gap: 8px;
}
/* Code Viewer */
.code-viewer {
flex: 1;
overflow: auto;
background: var(--background);
}
.code-viewer pre {
margin: 0;
padding: 16px 20px;
font-family: 'SF Mono', 'Fira Code', monospace;
font-size: 13px;
line-height: 1.6;
white-space: pre-wrap;
word-break: break-all;
color: var(--foreground);
}
/* Empty State */
.empty-state {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--muted-foreground);
gap: 12px;
}
/* Package List View */
.package-list-container {
max-width: 700px;
margin: 0 auto;
padding: 60px 24px;
width: 100%;
}
.page-title {
font-size: 24px;
font-weight: 600;
margin-bottom: 24px;
}
.search-box {
position: relative;
margin-bottom: 20px;
}
.search-input {
width: 100%;
padding: 14px 16px 14px 44px;
background: var(--muted);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--foreground);
font-size: 14px;
font-family: inherit;
outline: none;
transition: border-color 0.15s;
}
.search-input:focus {
border-color: var(--ring);
}
.search-input::placeholder {
color: var(--muted-foreground);
}
.search-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--muted-foreground);
}
.package-count {
color: var(--muted-foreground);
font-size: 13px;
margin-bottom: 16px;
}
.package-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.package-link {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
background: var(--muted);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--foreground);
font-family: 'SF Mono', 'Fira Code', monospace;
font-size: 14px;
cursor: pointer;
transition: all 0.15s;
}
.package-link:hover {
background: var(--primary);
border-color: var(--primary);
color: var(--primary-foreground);
}
.no-results {
text-align: center;
padding: 40px 20px;
color: var(--muted-foreground);
}
/* Scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--muted);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #3f3f46;
}
`,
];
async connectedCallback() {
super.connectedCallback();
// Parse URL to get package name
const path = window.location.pathname;
if (path.startsWith('/peek/') && path.length > 6) {
const parts = path.slice(6).split('/');
if (parts[0]?.startsWith('@') && parts[1]) {
this.packageName = `${parts[0]}/${parts[1]}`;
await this.loadPackageFiles();
}
}
}
private async loadPackageFiles() {
if (!this.packageName) return;
this.loading = true;
try {
// Fetch file list from API
const response = await fetch(`/api/files/${this.packageName}?version=${this.version}`);
if (response.ok) {
const data = await response.json();
this.files = data.files || [];
this.availableVersions = data.versions || [];
this.fileTree = this.buildFileTree(this.files);
}
} catch (err) {
console.error('Failed to load package files:', err);
}
this.loading = false;
}
private buildFileTree(files: string[]): IFileNode[] {
const root: IFileNode[] = [];
for (const filePath of files) {
const parts = filePath.split('/').filter(Boolean);
let currentLevel = root;
let currentPath = '';
for (let i = 0; i < parts.length; i++) {
const part = parts[i];
currentPath += '/' + part;
const isFile = i === parts.length - 1;
let existing = currentLevel.find(n => n.name === part);
if (!existing) {
existing = {
name: part,
path: currentPath,
isFile,
children: isFile ? undefined : [],
};
currentLevel.push(existing);
}
if (!isFile && existing.children) {
currentLevel = existing.children;
}
}
}
// Sort: folders first, then files, alphabetically
const sortNodes = (nodes: IFileNode[]) => {
nodes.sort((a, b) => {
if (a.isFile && !b.isFile) return 1;
if (!a.isFile && b.isFile) return -1;
return a.name.localeCompare(b.name);
});
for (const node of nodes) {
if (node.children) sortNodes(node.children);
}
};
sortNodes(root);
return root;
}
private toggleFolder(path: string) {
const newSet = new Set(this.expandedFolders);
if (newSet.has(path)) {
newSet.delete(path);
} else {
newSet.add(path);
}
this.expandedFolders = newSet;
}
private async selectFile(filePath: string) {
this.selectedFile = filePath;
this.loading = true;
try {
const url = `/${this.packageName}${filePath}?version=${this.version}`;
const response = await fetch(url);
this.fileContent = await response.text();
} catch (err) {
this.fileContent = 'Failed to load file';
}
this.loading = false;
}
private navigateToPackage(pkg: string) {
window.location.href = `/peek/${pkg}`;
}
private get filteredPackages(): string[] {
if (!this.searchQuery) return this.allowedPackages;
const query = this.searchQuery.toLowerCase();
return this.allowedPackages.filter(pkg => pkg.toLowerCase().includes(query));
}
private renderTreeNode(node: IFileNode): TemplateResult {
if (node.isFile) {
return html`
<div
class="tree-file ${this.selectedFile === node.path ? 'active' : ''}"
@click=${() => this.selectFile(node.path)}
>
<dees-icon .icon=${'lucide:file'} .iconSize=${14}></dees-icon>
${node.name}
</div>
`;
}
const isExpanded = this.expandedFolders.has(node.path);
return html`
<div class="tree-folder">
<div class="folder-header" @click=${() => this.toggleFolder(node.path)}>
<dees-icon .icon=${isExpanded ? 'lucide:folder-open' : 'lucide:folder'} .iconSize=${14}></dees-icon>
${node.name}
<span class="folder-chevron ${isExpanded ? 'open' : ''}">▶</span>
</div>
${isExpanded && node.children ? html`
<div class="folder-children">
${node.children.map(child => this.renderTreeNode(child))}
</div>
` : ''}
</div>
`;
}
private renderPackageList(): TemplateResult {
const filtered = this.filteredPackages;
return html`
<div class="package-list-container">
<div class="header-logo" @click=${() => window.location.href = '/'}>
<dees-icon .icon=${'lucide:package'} .iconSize=${24}></dees-icon>
opencdn
</div>
<h1 class="page-title" style="margin-top: 32px;">Browse Packages</h1>
<div class="search-box">
<dees-icon class="search-icon" .icon=${'lucide:search'} .iconSize=${16}></dees-icon>
<input
type="text"
class="search-input"
placeholder="Search packages..."
.value=${this.searchQuery}
@input=${(e: Event) => this.searchQuery = (e.target as HTMLInputElement).value}
/>
</div>
<div class="package-count">
${filtered.length === this.allowedPackages.length
? `${this.allowedPackages.length} package${this.allowedPackages.length !== 1 ? 's' : ''} available`
: `${filtered.length} of ${this.allowedPackages.length} packages`}
</div>
${filtered.length > 0 ? html`
<div class="package-list">
${filtered.map(pkg => html`
<div class="package-link" @click=${() => this.navigateToPackage(pkg)}>
<dees-icon .icon=${'lucide:package'} .iconSize=${16}></dees-icon>
${pkg}
</div>
`)}
</div>
` : html`
<div class="no-results">No packages found matching your search.</div>
`}
</div>
`;
}
private renderFileBrowser(): TemplateResult {
return html`
<div class="app">
<header class="header">
<div class="header-logo" @click=${() => window.location.href = '/'}>
<dees-icon .icon=${'lucide:package'} .iconSize=${20}></dees-icon>
opencdn
</div>
<span class="header-sep">/</span>
<span class="header-package">${this.packageName}</span>
<span class="header-version">${this.version || 'latest'}</span>
<div class="header-spacer"></div>
${this.availableVersions.length > 0 ? html`
<select
class="version-select"
@change=${(e: Event) => {
this.version = (e.target as HTMLSelectElement).value;
this.loadPackageFiles();
}}
>
<option value="">latest</option>
${this.availableVersions.map(v => html`
<option value=${v} ?selected=${v === this.version}>${v}</option>
`)}
</select>
` : ''}
<dees-button @click=${() => window.location.href = '/peek/'}>
<dees-icon .icon=${'lucide:arrow-left'} .iconSize=${14} slot="iconLeft"></dees-icon>
All Packages
</dees-button>
</header>
<div class="main">
<aside class="sidebar">
<div class="sidebar-header">Files (${this.files.length})</div>
<div class="file-tree">
${this.fileTree.map(node => this.renderTreeNode(node))}
</div>
</aside>
<main class="content">
${this.selectedFile ? html`
<div class="content-header">
<div class="content-path">
<span>${this.selectedFile}</span>
</div>
<div class="content-actions">
<dees-button @click=${() => {
const url = `/${this.packageName}${this.selectedFile}?version=${this.version}`;
window.open(url, '_blank');
}}>
<dees-icon .icon=${'lucide:external-link'} .iconSize=${14} slot="iconLeft"></dees-icon>
Raw
</dees-button>
</div>
</div>
<div class="code-viewer">
${this.loading ? html`
<div class="empty-state">
<dees-spinner></dees-spinner>
</div>
` : html`
<pre>${this.fileContent}</pre>
`}
</div>
` : html`
<div class="empty-state">
<dees-icon .icon=${'lucide:file-text'} .iconSize=${48} style="opacity: 0.5;"></dees-icon>
<div>Select a file to view its contents</div>
</div>
`}
</main>
</div>
</div>
`;
}
public render(): TemplateResult {
if (this.packageName) {
return this.renderFileBrowser();
}
return this.renderPackageList();
}
}

1
ts_web/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './elements/index.js';