@opendocsdev/cli 0.2.7 → 0.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendocsdev/cli",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "publishConfig": {
     "access": "public"
   },

package/src/engine/src/components/react/PageFooter.tsx

@@ -8,6 +8,11 @@ interface PageLink {
   description?: string;
 }
 
+interface FooterConfig {
+  copyright?: string;
+  links?: { title: string; url: string }[];
+}
+
 interface PageFooterProps {
   path: string;
   backend?: string;
@@ -16,6 +21,7 @@ interface PageFooterProps {
   previousPage?: PageLink | null;
   nextPage?: PageLink | null;
   lastUpdated?: string;
+  footer?: FooterConfig;
   className?: string;
 }
 
@@ -27,10 +33,12 @@ export function PageFooter({
   previousPage,
   nextPage,
   lastUpdated,
+  footer,
   className,
 }: PageFooterProps) {
   const hasNavigation = previousPage || nextPage;
   const showFeedback = feedbackEnabled && backend && siteId;
+  const hasFooter = footer?.copyright || (footer?.links && footer.links.length > 0);
 
   return (
     <footer
@@ -84,6 +92,44 @@ export function PageFooter({
           </div>
         </nav>
       )}
+
+      {/* Footer content */}
+      {hasFooter && (
+        <div className="mt-8 pt-6 border-t border-[var(--color-border)]">
+          <div className="flex flex-col sm:flex-row items-center justify-between gap-3">
+            {footer?.copyright && (
+              <p className="text-sm text-[var(--color-muted)]">{footer.copyright}</p>
+            )}
+            {footer?.links && footer.links.length > 0 && (
+              <div className="flex items-center gap-4">
+                {footer.links.map((link) => (
+                  <a
+                    key={link.url}
+                    href={link.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-sm text-[var(--color-muted)] hover:text-[var(--color-foreground)] transition-colors"
+                  >
+                    {link.title}
+                  </a>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Built with OpenDocs */}
+      <div className="mt-6 flex items-center justify-center">
+        <a
+          href="https://docs.opendocs.dev"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-xs text-[var(--color-muted)]/60 hover:text-[var(--color-muted)] transition-colors"
+        >
+          Built with OpenDocs
+        </a>
+      </div>
     </footer>
   );
 }

package/src/engine/src/components/react/Sidebar.tsx

@@ -12,7 +12,7 @@ import {
   type NavigationGroup,
 } from "../../lib/utils";
 import { ThemeToggle } from "./ThemeToggle";
-import { GitHubLink } from "./GitHubLink";
+import { SocialLinks } from "./SocialLinks";
 import { SidebarSearchTrigger } from "./SidebarSearchTrigger";
 
 interface LogoConfig {
@@ -26,6 +26,8 @@ interface SidebarProps {
   logo?: string | LogoConfig;
   currentPath: string;
   githubUrl?: string;
+  discordUrl?: string;
+  twitterUrl?: string;
 }
 
 // Check if any page in a group of children is active
@@ -250,11 +252,18 @@ function Logo({ logo, siteName }: { logo?: string | LogoConfig; siteName: string
     );
   }
 
+  const nameEl = (
+    <span className="text-base font-semibold text-[var(--color-foreground)]">
+      {siteName}
+    </span>
+  );
+
   // String logo - no theme switching needed
   if (typeof logo === "string") {
     return (
-      <a href="/" className="flex items-center gap-2">
-        <img src={logo} alt={siteName} className="h-8 w-auto" />
+      <a href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
+        <img src={logo} alt={siteName} className="h-7 w-auto" />
+        {nameEl}
       </a>
     );
   }
@@ -264,17 +273,19 @@ function Logo({ logo, siteName }: { logo?: string | LogoConfig; siteName: string
 
   if (dark) {
     return (
-      <a href="/" className="flex items-center gap-2">
-        <img src={light} alt={siteName} className="h-8 w-auto dark:hidden" />
-        <img src={dark} alt={siteName} className="h-8 w-auto hidden dark:block" />
+      <a href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
+        <img src={light} alt={siteName} className="h-7 w-auto dark:hidden" />
+        <img src={dark} alt={siteName} className="h-7 w-auto hidden dark:block" />
+        {nameEl}
       </a>
     );
   }
 
   // Only light logo provided
   return (
-    <a href="/" className="flex items-center gap-2">
-      <img src={light} alt={siteName} className="h-8 w-auto" />
+    <a href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
+      <img src={light} alt={siteName} className="h-7 w-auto" />
+      {nameEl}
     </a>
   );
 }
@@ -285,6 +296,8 @@ export function Sidebar({
   logo,
   currentPath: initialPath,
   githubUrl,
+  discordUrl,
+  twitterUrl,
 }: SidebarProps) {
   // Track current path locally so it updates after View Transition navigations
   const [currentPath, setCurrentPath] = useState(initialPath);
@@ -298,9 +311,9 @@ export function Sidebar({
   return (
     <div className="flex flex-col h-full">
       {/* Logo/Site name + Theme toggle */}
-      <div className="flex items-center justify-between h-16 px-4">
+      <div className="flex items-center justify-between h-14 px-4">
         <Logo logo={logo} siteName={siteName} />
-        <ThemeToggle />
+        <ThemeToggle className="flex-shrink-0" />
       </div>
 
       {/* Search trigger */}
@@ -363,10 +376,10 @@ export function Sidebar({
         ))}
       </nav>
 
-      {/* Bottom section with GitHub link */}
-      {githubUrl && (
+      {/* Bottom section with social links */}
+      {(githubUrl || discordUrl || twitterUrl) && (
         <div className="px-4 py-3">
-          <GitHubLink url={githubUrl} />
+          <SocialLinks github={githubUrl} discord={discordUrl} twitter={twitterUrl} />
         </div>
       )}
     </div>

package/src/engine/src/components/react/SocialLinks.tsx

@@ -0,0 +1,59 @@
+import { Github } from "lucide-react";
+import { cn } from "../../lib/utils";
+
+// Inline Discord SVG — lucide-react doesn't include Discord
+function DiscordIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" className={className} aria-hidden="true">
+      <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" />
+    </svg>
+  );
+}
+
+// Inline X/Twitter SVG
+function TwitterIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" className={className} aria-hidden="true">
+      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+    </svg>
+  );
+}
+
+interface SocialLinksProps {
+  github?: string;
+  discord?: string;
+  twitter?: string;
+  className?: string;
+}
+
+const linkStyle = cn(
+  "flex items-center justify-center w-9 h-9 rounded-lg transition-colors",
+  "text-[var(--color-muted)] hover:text-[var(--color-foreground)]",
+  "hover:bg-[var(--color-surface-sunken)]"
+);
+
+export function SocialLinks({ github, discord, twitter, className }: SocialLinksProps) {
+  if (!github && !discord && !twitter) return null;
+
+  return (
+    <div className={cn("flex items-center gap-1", className)}>
+      {github && (
+        <a href={github} target="_blank" rel="noopener noreferrer" className={linkStyle} aria-label="GitHub">
+          <Github className="w-5 h-5" aria-hidden="true" />
+        </a>
+      )}
+      {discord && (
+        <a href={discord} target="_blank" rel="noopener noreferrer" className={linkStyle} aria-label="Discord">
+          <DiscordIcon className="w-5 h-5" />
+        </a>
+      )}
+      {twitter && (
+        <a href={twitter} target="_blank" rel="noopener noreferrer" className={linkStyle} aria-label="Twitter">
+          <TwitterIcon className="w-5 h-5" />
+        </a>
+      )}
+    </div>
+  );
+}
+
+export default SocialLinks;

package/src/engine/src/components/react/ThemeToggle.tsx

@@ -36,14 +36,14 @@ export function ThemeToggle({ className }: ThemeToggleProps) {
       <button
         type="button"
         className={cn(
-          "flex items-center justify-center w-9 h-9 rounded-lg transition-colors",
+          "flex items-center justify-center w-7 h-7 rounded-md transition-colors",
           "text-[var(--color-muted)] hover:text-[var(--color-foreground)]",
           "hover:bg-[var(--color-surface-sunken)]",
           className
         )}
         aria-label="Toggle theme"
       >
-        <span className="w-5 h-5" />
+        <span className="w-4 h-4" />
       </button>
     );
   }
@@ -53,7 +53,7 @@ export function ThemeToggle({ className }: ThemeToggleProps) {
       type="button"
       onClick={toggleTheme}
       className={cn(
-        "flex items-center justify-center w-9 h-9 rounded-lg transition-colors",
+        "flex items-center justify-center w-7 h-7 rounded-md transition-colors",
         "text-[var(--color-muted)] hover:text-[var(--color-foreground)]",
         "hover:bg-[var(--color-surface-sunken)]",
         className
@@ -61,9 +61,9 @@ export function ThemeToggle({ className }: ThemeToggleProps) {
       aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
     >
       {isDark ? (
-        <Sun className="w-5 h-5" />
+        <Sun className="w-4 h-4" />
       ) : (
-        <Moon className="w-5 h-5" />
+        <Moon className="w-4 h-4" />
       )}
     </button>
   );

package/src/engine/src/layouts/DocsLayout.astro

@@ -35,7 +35,10 @@ const faviconPath = config.favicon || "/favicon.ico";
 const navigation = config.navigation || [];
 const logo = config.logo;
 const githubUrl = config.socialLinks?.github;
+const discordUrl = config.socialLinks?.discord;
+const twitterUrl = config.socialLinks?.twitter;
 const feedbackEnabled = config.features?.feedback !== false;
+const footerConfig = config.footer as { copyright?: string; links?: { title: string; url: string }[] } | undefined;
 
 // Backend config
 const backendConfig = config.backend as { apiUrl?: string; siteId?: string } | undefined;
@@ -48,6 +51,10 @@ const accentColor = config.theme?.accentColor || primaryColor;
 const primary = generateColorVariants(primaryColor);
 const accent = generateColorVariants(accentColor);
 
+// Favicon MIME type from extension
+const faviconExt = faviconPath.split(".").pop()?.toLowerCase();
+const faviconType = faviconExt === "svg" ? "image/svg+xml" : faviconExt === "png" ? "image/png" : faviconExt === "ico" ? "image/x-icon" : undefined;
+
 // SEO metadata
 const siteUrl = (config.metadata as { url?: string; ogImage?: string } | undefined)?.url || "";
 const ogImage = (config.metadata as { url?: string; ogImage?: string } | undefined)?.ogImage;
@@ -55,6 +62,9 @@ const canonicalUrl = siteUrl ? `${siteUrl}${currentPath}` : "";
 const pageDescription = description || `${title} - ${siteName}`;
 const fullTitle = `${title} | ${siteName}`;
 
+// Extract Twitter handle from URL for twitter:site meta tag
+const twitterHandle = twitterUrl ? `@${twitterUrl.replace(/\/$/, "").split("/").pop()}` : undefined;
+
 // Build breadcrumb segments from current path
 const pathSegments = currentPath.split("/").filter(Boolean);
 const breadcrumbItems = pathSegments.map((segment, i) => ({
@@ -72,7 +82,11 @@ const { previous: previousPage, next: nextPage } = getPageNavigation(navigation,
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content={pageDescription} />
-    <link rel="icon" type="image/x-icon" href={faviconPath} />
+    {faviconType ? (
+      <link rel="icon" type={faviconType} href={faviconPath} />
+    ) : (
+      <link rel="icon" href={faviconPath} />
+    )}
     <title>{fullTitle}</title>
 
     {/* Canonical URL */}
@@ -88,11 +102,13 @@ const { previous: previousPage, next: nextPage } = getPageNavigation(navigation,
     <meta property="og:site_name" content={siteName} />
     {canonicalUrl && <meta property="og:url" content={canonicalUrl} />}
     {ogImage && <meta property="og:image" content={ogImage.startsWith("http") ? ogImage : `${siteUrl}${ogImage}`} />}
+    {ogImage && <meta property="og:image:alt" content={pageDescription} />}
 
     {/* Twitter Card */}
     <meta name="twitter:card" content={ogImage ? "summary_large_image" : "summary"} />
     <meta name="twitter:title" content={fullTitle} />
     <meta name="twitter:description" content={pageDescription} />
+    {twitterHandle && <meta name="twitter:site" content={twitterHandle} />}
     {ogImage && <meta name="twitter:image" content={ogImage.startsWith("http") ? ogImage : `${siteUrl}${ogImage}`} />}
 
     {/* Structured Data */}
@@ -163,6 +179,8 @@ const { previous: previousPage, next: nextPage } = getPageNavigation(navigation,
           logo={logo}
           currentPath={currentPath}
           githubUrl={githubUrl}
+          discordUrl={discordUrl}
+          twitterUrl={twitterUrl}
         />
       </aside>
 
@@ -187,6 +205,8 @@ const { previous: previousPage, next: nextPage } = getPageNavigation(navigation,
             logo={logo}
             currentPath={currentPath}
             githubUrl={githubUrl}
+            discordUrl={discordUrl}
+            twitterUrl={twitterUrl}
           />
         </div>
       </aside>
@@ -209,7 +229,7 @@ const { previous: previousPage, next: nextPage } = getPageNavigation(navigation,
             </button>
 
             <!-- Logo/site name -->
-            <a href="/" class="flex items-center justify-center">
+            <a href="/" class="flex items-center gap-2">
               {logo ? (
                 typeof logo === "string" ? (
                   <img src={logo} alt={siteName} class="h-6 w-auto" />
@@ -221,9 +241,8 @@ const { previous: previousPage, next: nextPage } = getPageNavigation(navigation,
                 ) : (
                   <img src={logo.light} alt={siteName} class="h-6 w-auto" />
                 )
-              ) : (
-                <span class="text-lg font-semibold text-[var(--color-foreground)]">{siteName}</span>
-              )}
+              ) : null}
+              <span class="text-base font-semibold text-[var(--color-foreground)]">{siteName}</span>
             </a>
 
             <!-- Search button -->
@@ -259,6 +278,7 @@ const { previous: previousPage, next: nextPage } = getPageNavigation(navigation,
               previousPage={previousPage}
               nextPage={nextPage}
               lastUpdated={lastUpdated}
+              footer={footerConfig}
             />
             <CopyButton />
           </main>