@ewanc26/pds-landing 1.0.0 → 2.0.2

package/dist/components/PDSPage.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { LinkItem } from './LinkList.svelte';
+interface Props {
+    /** Text shown in the terminal titlebar. */
+    cardTitle?: string;
+    promptUser?: string;
+    promptHost?: string;
+    promptPath?: string;
+    tagline?: string;
+    /**
+     * Origin prepended to `/xrpc/…` calls.
+     * Leave empty (`''`) to use the current page's origin (default).
+     */
+    baseUrl?: string;
+    showStatus?: boolean;
+    showEndpoints?: boolean;
+    showLinks?: boolean;
+    showContact?: boolean;
+    showFooter?: boolean;
+    /**
+     * Static links always shown in the Links section.
+     * Dynamic links (privacy policy / ToS) from `describeServer` are
+     * appended automatically.
+     */
+    staticLinks?: LinkItem[];
+    blueskyHandle?: string;
+    blueskyClientUrl?: string;
+    showNixpkg?: boolean;
+    showAtproto?: boolean;
+}
+declare const PDSPage: import("svelte").Component<Props, {}, "">;
+type PDSPage = ReturnType<typeof PDSPage>;
+export default PDSPage;

package/dist/components/PromptLine.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	interface Props {
+		/** Username portion (before the @). */
+		user: string;
+		/** Hostname (after the @). */
+		host: string;
+		/** Shell path shown after the colon. Defaults to `~`. */
+		path?: string;
+	}
+
+	let { user, host, path = '~' }: Props = $props();
+</script>
+
+<div class="pds-prompt-line">
+	<span class="pds-user-marker">{user}@{host}</span><span class="pds-prompt-path">:{path}</span
+	><span class="pds-prompt-char" aria-hidden="true"> $</span>
+</div>
+
+<style>
+	.pds-prompt-line {
+		display: flex;
+		align-items: baseline;
+		margin-bottom: 0.3rem;
+	}
+
+	.pds-user-marker {
+		color: var(--pds-color-green);
+		font-weight: 700;
+		word-break: break-all;
+		font-size: clamp(0.95em, 4vw, 1.15em);
+		letter-spacing: -0.01em;
+	}
+
+	.pds-prompt-path {
+		color: var(--pds-color-subtext-0);
+		font-weight: 700;
+		font-size: clamp(0.95em, 4vw, 1.15em);
+		opacity: 0.6;
+		user-select: none;
+	}
+
+	.pds-prompt-char {
+		color: var(--pds-color-subtext-0);
+		font-weight: 700;
+		font-size: clamp(0.95em, 4vw, 1.15em);
+		user-select: none;
+	}
+</style>

package/dist/components/PromptLine.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    /** Username portion (before the @). */
+    user: string;
+    /** Hostname (after the @). */
+    host: string;
+    /** Shell path shown after the colon. Defaults to `~`. */
+    path?: string;
+}
+declare const PromptLine: import("svelte").Component<Props, {}, "">;
+type PromptLine = ReturnType<typeof PromptLine>;
+export default PromptLine;

package/dist/components/SectionLabel.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		label?: string;
+		children?: Snippet;
+	}
+
+	let { label, children }: Props = $props();
+</script>
+
+<div class="pds-section-label">
+	{#if children}{@render children()}{:else}{label ?? ''}{/if}
+</div>
+
+<style>
+	.pds-section-label {
+		font-weight: 700;
+		text-transform: uppercase;
+		font-size: 0.72em;
+		letter-spacing: 0.12em;
+		color: var(--pds-color-green);
+		margin-bottom: 0.7rem;
+	}
+</style>

package/dist/components/SectionLabel.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    label?: string;
+    children?: Snippet;
+}
+declare const SectionLabel: import("svelte").Component<Props, {}, "">;
+type SectionLabel = ReturnType<typeof SectionLabel>;
+export default SectionLabel;

package/dist/components/StatusGrid.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import KVGrid from './KVGrid.svelte';
+	import type { KVItem } from './KVGrid.svelte';
+	import { fetchPDSStatus, type PDSHealth, type PDSDescription } from '../utils/fetchPDSStatus.js';
+
+	interface Props {
+		/**
+		 * Base URL to prepend to `/xrpc/…` calls.
+		 * Defaults to `''` (same origin — correct for in-browser use).
+		 */
+		baseUrl?: string;
+	}
+
+	let { baseUrl = '' }: Props = $props();
+
+	const LOADING_ITEMS: KVItem[] = [
+		{ key: 'reachable', value: '…', status: 'loading' },
+		{ key: 'version', value: '…', status: 'loading' },
+		{ key: 'did', value: '…', status: 'loading' },
+		{ key: 'accounts', value: '…', status: 'loading' },
+		{ key: 'invite required', value: '…', status: 'loading' }
+	];
+
+	let items: KVItem[] = $state([...LOADING_ITEMS]);
+
+	function buildItems(
+		health: PDSHealth,
+		description: PDSDescription,
+		accountCount: number
+	): KVItem[] {
+		const result: KVItem[] = [
+			{
+				key: 'reachable',
+				value: health.reachable ? '✓ online' : '✗ unreachable',
+				status: health.reachable ? 'ok' : 'err'
+			},
+			{
+				key: 'version',
+				value: health.version ?? (health.reachable ? 'unknown' : '—'),
+				status: health.reachable ? undefined : 'err'
+			},
+			{
+				key: 'did',
+				value: description.did ?? '—'
+			},
+			{
+				key: 'accounts',
+				value: accountCount >= 0 ? accountCount.toString() : '—'
+			},
+			{
+				key: 'invite required',
+				value:
+					description.inviteCodeRequired === null
+						? '—'
+						: description.inviteCodeRequired
+							? 'yes'
+							: 'no',
+				status:
+					description.inviteCodeRequired === null
+						? undefined
+						: description.inviteCodeRequired
+							? 'warn'
+							: 'ok'
+			}
+		];
+
+		if (description.phoneVerificationRequired !== null) {
+			result.push({
+				key: 'phone verify',
+				value: description.phoneVerificationRequired ? 'yes' : 'no',
+				status: description.phoneVerificationRequired ? 'warn' : 'ok'
+			});
+		}
+
+		if (description.availableUserDomains.length > 0) {
+			result.push({
+				key: 'user domains',
+				value: description.availableUserDomains.join(', ')
+			});
+		}
+
+		return result;
+	}
+
+	onMount(async () => {
+		const { health, description, accountCount } = await fetchPDSStatus(baseUrl);
+		items = buildItems(health, description, accountCount);
+	});
+</script>
+
+<KVGrid {items} />

package/dist/components/StatusGrid.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    /**
+     * Base URL to prepend to `/xrpc/…` calls.
+     * Defaults to `''` (same origin — correct for in-browser use).
+     */
+    baseUrl?: string;
+}
+declare const StatusGrid: import("svelte").Component<Props, {}, "">;
+type StatusGrid = ReturnType<typeof StatusGrid>;
+export default StatusGrid;

package/dist/components/Tagline.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		text?: string;
+		children?: Snippet;
+	}
+
+	let { text, children }: Props = $props();
+</script>
+
+<p class="pds-tagline">
+	{#if children}{@render children()}{:else}{text ?? ''}{/if}
+</p>
+
+<style>
+	.pds-tagline {
+		color: var(--pds-color-overlay-0);
+		font-size: 0.82em;
+		margin-top: 0.2rem;
+		margin-bottom: 1.4rem;
+		line-height: 1.5;
+	}
+</style>

package/dist/components/Tagline.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    text?: string;
+    children?: Snippet;
+}
+declare const Tagline: import("svelte").Component<Props, {}, "">;
+type Tagline = ReturnType<typeof Tagline>;
+export default Tagline;

package/dist/components/TerminalCard.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		/** Text shown in the titlebar after the traffic-light dots. */
+		title?: string;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let { title = 'terminal', class: cls = '', children }: Props = $props();
+</script>
+
+<div class="pds-card {cls}">
+	<div class="pds-card-titlebar">
+		<span class="pds-dot" aria-hidden="true"></span>
+		<span class="pds-dot" aria-hidden="true"></span>
+		<span class="pds-dot" aria-hidden="true"></span>
+		<span class="pds-card-title">{title}</span>
+	</div>
+	<div class="pds-card-body">
+		{#if children}{@render children()}{/if}
+	</div>
+</div>
+
+<style>
+	.pds-card {
+		width: 100%;
+		max-width: 680px;
+		overflow: hidden;
+		border-radius: 0.5rem;
+		background-color: var(--pds-color-mantle);
+		border: 1px solid var(--pds-color-surface-1);
+		box-shadow:
+			0 0 0 1px color-mix(in srgb, var(--pds-color-green) 6%, transparent),
+			0 8px 32px color-mix(in srgb, var(--pds-color-shadow) 50%, transparent);
+	}
+
+	.pds-card-titlebar {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.55rem 1rem;
+		background-color: var(--pds-color-surface-0);
+		color: var(--pds-color-green);
+		border-bottom: 1px solid color-mix(in srgb, var(--pds-color-green) 15%, transparent);
+		font-size: 0.75rem;
+		min-width: 0;
+	}
+
+	.pds-card-title {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		min-width: 0;
+		margin-left: 0.4rem;
+	}
+
+	.pds-dot {
+		width: 10px;
+		height: 10px;
+		border-radius: 50%;
+		flex-shrink: 0;
+		background-color: color-mix(in srgb, var(--pds-color-green) 25%, transparent);
+		border: 1px solid color-mix(in srgb, var(--pds-color-green) 40%, transparent);
+	}
+
+	.pds-card-body {
+		padding: 1.4rem 1.6rem;
+	}
+
+	@media (max-width: 440px) {
+		.pds-card-body {
+			padding: 1.1rem;
+		}
+	}
+</style>

package/dist/components/TerminalCard.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Text shown in the titlebar after the traffic-light dots. */
+    title?: string;
+    class?: string;
+    children?: Snippet;
+}
+declare const TerminalCard: import("svelte").Component<Props, {}, "">;
+type TerminalCard = ReturnType<typeof TerminalCard>;
+export default TerminalCard;

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+export { fetchPDSStatus } from './utils/fetchPDSStatus.js';
+export type { PDSHealth, PDSDescription, PDSStatusResult } from './utils/fetchPDSStatus.js';
+export { default as TerminalCard } from './components/TerminalCard.svelte';
+export { default as PromptLine } from './components/PromptLine.svelte';
+export { default as Tagline } from './components/Tagline.svelte';
+export { default as SectionLabel } from './components/SectionLabel.svelte';
+export { default as Divider } from './components/Divider.svelte';
+export { default as KVGrid } from './components/KVGrid.svelte';
+export type { KVItem } from './components/KVGrid.svelte';
+export { default as LinkList } from './components/LinkList.svelte';
+export type { LinkItem } from './components/LinkList.svelte';
+export { default as StatusGrid } from './components/StatusGrid.svelte';
+export { default as ContactSection } from './components/ContactSection.svelte';
+export { default as PDSFooter } from './components/PDSFooter.svelte';
+export { default as PDSPage } from './components/PDSPage.svelte';

package/dist/index.js

@@ -0,0 +1,17 @@
+// ─── Utilities ────────────────────────────────────────────────────────────────
+export { fetchPDSStatus } from './utils/fetchPDSStatus.js';
+// ─── Primitive components ─────────────────────────────────────────────────────
+export { default as TerminalCard } from './components/TerminalCard.svelte';
+export { default as PromptLine } from './components/PromptLine.svelte';
+export { default as Tagline } from './components/Tagline.svelte';
+export { default as SectionLabel } from './components/SectionLabel.svelte';
+export { default as Divider } from './components/Divider.svelte';
+export { default as KVGrid } from './components/KVGrid.svelte';
+export { default as LinkList } from './components/LinkList.svelte';
+// ─── Smart / data-fetching components ────────────────────────────────────────
+export { default as StatusGrid } from './components/StatusGrid.svelte';
+// ─── Compound / section components ───────────────────────────────────────────
+export { default as ContactSection } from './components/ContactSection.svelte';
+export { default as PDSFooter } from './components/PDSFooter.svelte';
+// ─── Full-page convenience component ─────────────────────────────────────────
+export { default as PDSPage } from './components/PDSPage.svelte';

package/dist/utils/fetchPDSStatus.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Types and utilities for fetching live status from an ATProto PDS.
+ */
+export interface PDSHealth {
+    reachable: boolean;
+    /** Reported software version, or null if unreachable / not exposed. */
+    version: string | null;
+}
+export interface PDSDescription {
+    did: string | null;
+    inviteCodeRequired: boolean | null;
+    phoneVerificationRequired: boolean | null;
+    availableUserDomains: string[];
+    links: {
+        privacyPolicy?: string;
+        termsOfService?: string;
+    } | null;
+    contact: {
+        email?: string;
+    } | null;
+}
+export interface PDSStatusResult {
+    health: PDSHealth;
+    description: PDSDescription;
+    /** Total repo count, or -1 if the fetch failed. */
+    accountCount: number;
+}
+/**
+ * Fetch live status from a PDS.
+ *
+ * @param baseUrl - Origin to prepend to `/xrpc/…` paths.
+ *                  Defaults to `''` (same origin, works in-browser).
+ */
+export declare function fetchPDSStatus(baseUrl?: string): Promise<PDSStatusResult>;

package/dist/utils/fetchPDSStatus.js

@@ -0,0 +1,65 @@
+/**
+ * Types and utilities for fetching live status from an ATProto PDS.
+ */
+async function fetchJSON(url) {
+    const r = await fetch(url);
+    if (!r.ok)
+        throw new Error(`HTTP ${r.status}`);
+    return r.json();
+}
+/**
+ * Fetch live status from a PDS.
+ *
+ * @param baseUrl - Origin to prepend to `/xrpc/…` paths.
+ *                  Defaults to `''` (same origin, works in-browser).
+ */
+export async function fetchPDSStatus(baseUrl = '') {
+    // ── health ────────────────────────────────────────────────────────────────
+    let health = { reachable: false, version: null };
+    try {
+        const h = (await fetchJSON(`${baseUrl}/xrpc/_health`));
+        health = { reachable: true, version: h.version ?? null };
+    }
+    catch {
+        // leave defaults
+    }
+    // ── description ───────────────────────────────────────────────────────────
+    let description = {
+        did: null,
+        inviteCodeRequired: null,
+        phoneVerificationRequired: null,
+        availableUserDomains: [],
+        links: null,
+        contact: null
+    };
+    try {
+        const d = (await fetchJSON(`${baseUrl}/xrpc/com.atproto.server.describeServer`));
+        description = {
+            did: d.did ?? null,
+            inviteCodeRequired: d.inviteCodeRequired ?? null,
+            phoneVerificationRequired: d.phoneVerificationRequired ?? null,
+            availableUserDomains: d.availableUserDomains ?? [],
+            links: d.links ?? null,
+            contact: d.contact ?? null
+        };
+    }
+    catch {
+        // leave defaults
+    }
+    // ── account count (paginated) ─────────────────────────────────────────────
+    let accountCount = 0;
+    try {
+        let cursor;
+        do {
+            const url = `${baseUrl}/xrpc/com.atproto.sync.listRepos?limit=1000` +
+                (cursor ? `&cursor=${encodeURIComponent(cursor)}` : '');
+            const r = (await fetchJSON(url));
+            accountCount += (r.repos ?? []).length;
+            cursor = r.cursor;
+        } while (cursor);
+    }
+    catch {
+        accountCount = -1;
+    }
+    return { health, description, accountCount };
+}

package/package.json

@@ -1,32 +1,69 @@
 {
-  "name": "@ewanc26/pds-landing",
-  "version": "1.0.0",
-  "description": "Static landing page for Ewan's personal ATProto PDS at pds.ewancroft.uk",
-  "private": false,
-  "publishConfig": {
-    "access": "public"
-  },
-  "files": [
-    "dist",
-    "README.md"
-  ],
-  "keywords": [
-    "atproto",
-    "bluesky",
-    "pds",
-    "landing-page",
-    "static-site"
-  ],
-  "author": "Ewan Croft",
-  "license": "AGPL-3.0-only",
-  "devDependencies": {
-    "tailwindcss": "^3.4.0",
-    "tsup": "^8.5.0",
-    "typescript": "^5.9.3"
-  },
-  "scripts": {
-    "build": "node build.mjs",
-    "dev": "tailwindcss --config tailwind.config.js --input styles/input.css --output dist/style.css --watch",
-    "type-check": "tsc --noEmit"
-  }
-}
+	"name": "@ewanc26/pds-landing",
+	"version": "2.0.2",
+	"description": "Composable Svelte components for an ATProto PDS landing page — terminal-aesthetic UI with live status fetching.",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run prepack",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && publint",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check .",
+		"format": "prettier --write ."
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js",
+			"default": "./dist/index.js"
+		}
+	},
+	"peerDependencies": {
+		"@sveltejs/kit": ">=2.0.0",
+		"svelte": "^5.0.0",
+		"tailwindcss": ">=4.0.0"
+	},
+	"dependencies": {
+		"@ewanc26/ui": "workspace:*"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-static": "^3.0.10",
+		"@sveltejs/kit": "^2.50.2",
+		"@sveltejs/package": "^2.5.7",
+		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"@tailwindcss/typography": "^0.5.19",
+		"@tailwindcss/vite": "^4.1.18",
+		"prettier": "^3.8.1",
+		"prettier-plugin-svelte": "^3.4.1",
+		"prettier-plugin-tailwindcss": "^0.7.2",
+		"publint": "^0.3.17",
+		"svelte": "^5.51.0",
+		"svelte-check": "^4.4.2",
+		"tailwindcss": "^4.1.18",
+		"typescript": "^5.9.3",
+		"vite": "^7.3.1"
+	},
+	"keywords": [
+		"svelte",
+		"atproto",
+		"bluesky",
+		"pds",
+		"landing-page"
+	],
+	"publishConfig": {
+		"access": "public"
+	}
+}