@mdguggenbichler/slugbase-core 0.0.4 → 0.0.6

package/frontend/src/pages/admin/AdminLayout.tsx

@@ -0,0 +1,40 @@
+import { useTranslation } from 'react-i18next';
+import { Outlet } from 'react-router-dom';
+import { ExternalLink } from 'lucide-react';
+
+export default function AdminLayout() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div>
+        <h1 className="text-2xl font-semibold text-foreground">{t('admin.title')}</h1>
+        <p className="mt-2 text-sm text-muted-foreground">{t('admin.description')}</p>
+      </div>
+
+      {/* Child route content */}
+      <Outlet />
+
+      {/* API Documentation Link */}
+      <div className="mt-8 pt-6 border-t border-border">
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="text-sm text-muted-foreground">
+              {t('admin.apiDocsNote')}
+            </p>
+          </div>
+          <a
+            href="/api-docs"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-primary hover:text-primary/90 transition-colors"
+          >
+            <ExternalLink className="h-4 w-4" />
+            {t('admin.viewApiDocs')}
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}

package/frontend/src/pages/admin/AdminMembersPage.tsx

@@ -0,0 +1,5 @@
+import AdminUsers from '../../components/admin/AdminUsers';
+
+export default function AdminMembersPage() {
+  return <AdminUsers />;
+}

package/frontend/src/pages/admin/AdminOIDCPage.tsx

@@ -0,0 +1,5 @@
+import AdminOIDCProviders from '../../components/admin/AdminOIDCProviders';
+
+export default function AdminOIDCPage() {
+  return <AdminOIDCProviders />;
+}

package/frontend/src/pages/admin/AdminSettingsPage.tsx

@@ -0,0 +1,5 @@
+import AdminSettings from '../../components/admin/AdminSettings';
+
+export default function AdminSettingsPage() {
+  return <AdminSettings />;
+}

package/frontend/src/pages/admin/AdminTeamsPage.tsx

@@ -0,0 +1,5 @@
+import AdminTeams from '../../components/admin/AdminTeams';
+
+export default function AdminTeamsPage() {
+  return <AdminTeams />;
+}

package/frontend/src/utils/favicon.ts

@@ -0,0 +1,36 @@
+/**
+ * Get favicon URL for a given website URL
+ * Tries multiple methods to get the favicon
+ */
+export function getFaviconUrl(url: string): string {
+  try {
+    const urlObj = new URL(url);
+    const origin = urlObj.origin;
+    
+    // Try common favicon locations
+    return `${origin}/favicon.ico`;
+  } catch {
+    // If URL parsing fails, return empty string
+    return '';
+  }
+}
+
+/**
+ * Fetch favicon with fallback handling
+ * Returns a favicon URL or empty string if it can't be determined
+ */
+export async function fetchFavicon(url: string): Promise<string> {
+  try {
+    const urlObj = new URL(url);
+    const origin = urlObj.origin;
+    
+    // Try direct favicon.ico first (most reliable)
+    const directFavicon = `${origin}/favicon.ico`;
+    
+    // Return the direct favicon URL - let the browser handle loading
+    // If it fails, the component will show the fallback icon
+    return directFavicon;
+  } catch {
+    return '';
+  }
+}

package/frontend/src/utils/formatRelativeTime.ts

@@ -0,0 +1,37 @@
+/**
+ * Format an ISO date string as relative time (e.g. "2d ago", "5m ago").
+ * Returns "Never" or "-" for null/undefined/empty.
+ */
+export function formatRelativeTime(isoString: string | null | undefined): string {
+  if (!isoString || isoString.trim() === '') return 'Never';
+  const date = new Date(isoString);
+  if (Number.isNaN(date.getTime())) return '-';
+  const now = Date.now();
+  const diffMs = now - date.getTime();
+  const diffSec = Math.floor(diffMs / 1000);
+  const diffMin = Math.floor(diffSec / 60);
+  const diffHour = Math.floor(diffMin / 60);
+  const diffDay = Math.floor(diffHour / 24);
+  const diffWeek = Math.floor(diffDay / 7);
+
+  if (diffSec < 10) return 'just now';
+  if (diffSec < 60) return `${diffSec}s ago`;
+  if (diffMin < 60) return `${diffMin}m ago`;
+  if (diffHour < 24) return `${diffHour}h ago`;
+  if (diffDay < 7) return `${diffDay}d ago`;
+  if (diffWeek < 4) return `${diffWeek}w ago`;
+  return date.toLocaleDateString();
+}
+
+/**
+ * Format an ISO date string for tooltip (full date and time).
+ */
+export function formatFullDateTime(isoString: string | null | undefined): string {
+  if (!isoString || isoString.trim() === '') return '';
+  const date = new Date(isoString);
+  if (Number.isNaN(date.getTime())) return '';
+  return date.toLocaleString(undefined, {
+    dateStyle: 'medium',
+    timeStyle: 'short',
+  });
+}

package/frontend/src/utils/safeHref.ts

@@ -0,0 +1,31 @@
+/**
+ * Return a safe href for <a> tags (http/https only). Use for bookmark and preference URLs
+ * as defense-in-depth; backend already validates on save.
+ * Returns '#' for invalid or dangerous schemes (e.g. javascript:, data:) so the link does nothing.
+ */
+export function safeHref(url: string | undefined | null): string {
+  if (!url || typeof url !== 'string') {
+    return '#';
+  }
+  const trimmed = url.trim();
+  if (!trimmed) return '#';
+  const lower = trimmed.toLowerCase();
+  if (
+    lower.startsWith('javascript:') ||
+    lower.startsWith('data:') ||
+    lower.startsWith('vbscript:') ||
+    lower.startsWith('file:') ||
+    lower.startsWith('about:')
+  ) {
+    return '#';
+  }
+  try {
+    const parsed = new URL(trimmed, window.location.origin);
+    if (parsed.protocol === 'http:' || parsed.protocol === 'https:') {
+      return parsed.href;
+    }
+  } catch {
+    // invalid URL
+  }
+  return '#';
+}

package/frontend/src/vite-env.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_SLUGBASE_MODE?: string;
+  readonly VITE_API_URL?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdguggenbichler/slugbase-core",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "SlugBase core: backend and frontend entrypoints for self-hosted and cloud apps",
   "type": "module",
   "exports": {
@@ -12,5 +12,13 @@
   "scripts": {},
   "engines": {
     "node": ">=20"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "react-router-dom": ">=6",
+    "i18next": ">=23",
+    "react-i18next": ">=13",
+    "axios": ">=1"
   }
 }