docyard 0.9.0 → 1.0.1

data/lib/docyard/server/sse_server.rb

@@ -0,0 +1,157 @@
+# frozen_string_literal: true
+
+require "socket"
+require "json"
+
+module Docyard
+  class SSEServer
+    HEARTBEAT_INTERVAL = 15
+    DEFAULT_PORT = 4201
+
+    def initialize(port: DEFAULT_PORT)
+      @port = port
+      @connections = []
+      @mutex = Mutex.new
+      @running = false
+      @server = nil
+      @accept_thread = nil
+      @heartbeat_thread = nil
+    end
+
+    attr_reader :port
+
+    def start
+      @running = true
+      @server = TCPServer.new("127.0.0.1", @port)
+      @server.setsockopt(Socket::SOL_SOCKET, Socket::SO_REUSEADDR, true)
+
+      start_accept_thread
+      start_heartbeat_thread
+    end
+
+    def stop
+      @running = false
+      close_server
+      @accept_thread&.kill
+      @heartbeat_thread&.kill
+      close_all_connections
+    end
+
+    def broadcast(event_type, data = {})
+      message = format_sse_message(event_type, data)
+      dead_connections = []
+
+      @mutex.synchronize do
+        @connections.each do |conn|
+          write_to_connection(conn, message) or dead_connections << conn
+        end
+
+        dead_connections.each { |conn| remove_connection_unsafe(conn) }
+      end
+    end
+
+    def connection_count
+      @mutex.synchronize { @connections.size }
+    end
+
+    private
+
+    def close_server
+      @server&.close
+    rescue StandardError
+      nil
+    end
+
+    def start_accept_thread
+      @accept_thread = Thread.new do
+        while @running
+          begin
+            client = @server.accept
+            Thread.new { handle_new_connection(client) }
+          rescue IOError, Errno::EBADF
+            break unless @running
+          end
+        end
+      end
+    end
+
+    def handle_new_connection(client)
+      request = read_http_request(client)
+      return close_client(client) unless valid_sse_request?(request)
+
+      send_sse_headers(client)
+      @mutex.synchronize { @connections << client }
+    rescue StandardError
+      close_client(client)
+    end
+
+    def close_client(client)
+      client.close
+    rescue StandardError
+      nil
+    end
+
+    def read_http_request(client)
+      lines = []
+      while (line = client.gets)
+        break if line.strip.empty?
+
+        lines << line
+      end
+      lines.join
+    end
+
+    def valid_sse_request?(request)
+      request.include?("GET /_docyard/events") || request.include?("GET / ")
+    end
+
+    def send_sse_headers(client)
+      headers = [
+        "HTTP/1.1 200 OK",
+        "Content-Type: text/event-stream",
+        "Cache-Control: no-cache",
+        "Connection: keep-alive",
+        "Access-Control-Allow-Origin: *",
+        "",
+        ""
+      ].join("\r\n")
+
+      client.write(headers)
+      client.write("retry: 1000\n\n")
+      client.flush
+    end
+
+    def start_heartbeat_thread
+      @heartbeat_thread = Thread.new do
+        while @running
+          sleep HEARTBEAT_INTERVAL
+          broadcast("heartbeat", { time: Time.now.to_i }) if @running
+        end
+      end
+    end
+
+    def write_to_connection(conn, message)
+      conn.write_nonblock(message)
+      true
+    rescue IO::WaitWritable, IOError, Errno::EPIPE, Errno::ECONNRESET, Errno::ETIMEDOUT
+      false
+    end
+
+    def format_sse_message(event_type, data)
+      json_data = data.to_json
+      "event: #{event_type}\ndata: #{json_data}\n\n"
+    end
+
+    def remove_connection_unsafe(conn)
+      @connections.delete(conn)
+      close_client(conn)
+    end
+
+    def close_all_connections
+      @mutex.synchronize do
+        @connections.each { |conn| close_client(conn) }
+        @connections.clear
+      end
+    end
+  end
+end

data/lib/docyard/server/static_file_app.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+require "rack/mime"
+
+module Docyard
+  class StaticFileApp
+    def initialize(root)
+      @root = root
+    end
+
+    def call(env)
+      path = env["PATH_INFO"]
+      file_path = File.join(@root, path)
+
+      if path.end_with?("/") || File.directory?(file_path)
+        index_path = File.join(file_path, "index.html")
+        return serve_file(index_path) if File.file?(index_path)
+      elsif File.file?(file_path)
+        return serve_file(file_path)
+      end
+
+      serve_not_found
+    end
+
+    private
+
+    def serve_file(path)
+      content = File.read(path)
+      content_type = Rack::Mime.mime_type(File.extname(path), "application/octet-stream")
+      [200, { "content-type" => content_type }, [content]]
+    end
+
+    def serve_not_found
+      error_page = File.join(@root, "404.html")
+      if File.file?(error_page)
+        [404, { "content-type" => "text/html; charset=utf-8" }, [File.read(error_page)]]
+      else
+        [404, { "content-type" => "text/plain" }, ["Not Found"]]
+      end
+    end
+  end
+end

data/lib/docyard/templates/assets/css/components/banner.css

@@ -53,6 +53,10 @@ body.has-announcement .secondary-header {
   top: calc(var(--header-height) + var(--tab-bar-height) + var(--announcement-height));
 }
 
+body.has-announcement:not(.has-tabs) .secondary-header {
+  top: calc(var(--header-height) + var(--announcement-height));
+}
+
 body.has-announcement .layout {
   padding-top: calc(var(--header-height) + var(--tab-bar-height) + var(--announcement-height));
 }
@@ -70,6 +74,33 @@ body.has-announcement:not(.has-tabs) .layout {
   padding-top: calc(var(--header-height) + var(--announcement-height));
 }
 
+@media (max-width: 1280px) and (min-width: 1025px) {
+  body.has-announcement .layout {
+    padding-top: calc(var(--header-height) + var(--tab-bar-height) + var(--announcement-height) + var(--secondary-header-height));
+  }
+
+  body.has-announcement:not(.has-tabs) .layout {
+    padding-top: calc(var(--header-height) + var(--announcement-height) + var(--secondary-header-height));
+  }
+}
+
+/* Mobile: tab bar is hidden, so don't include tab-bar-height */
+@media (max-width: 1024px) {
+  body.has-announcement .secondary-header {
+    top: calc(var(--header-height) + var(--announcement-height));
+  }
+
+  body.has-announcement .layout {
+    padding-top: calc(var(--header-height) + var(--announcement-height) + var(--secondary-header-height));
+  }
+
+  body.has-announcement .sidebar {
+    top: 0;
+    height: 100vh;
+    height: 100dvh;
+  }
+}
+
 .docyard-announcement__content {
   display: flex;
   align-items: center;

data/lib/docyard/templates/assets/css/components/breadcrumbs.css

@@ -40,7 +40,8 @@
   box-shadow: 0 0 0 var(--ring-width) oklch(from var(--ring) l c h / 50%);
 }
 
-.breadcrumb-toggle .docyard-icon {
+.breadcrumb-toggle .docyard-icon,
+.breadcrumb-toggle i[class*="ph-"] {
   width: 18px;
   height: 18px;
 }

data/lib/docyard/templates/assets/css/components/callout.css

@@ -15,16 +15,17 @@
 
 .docyard-callout__icon {
   flex-shrink: 0;
-  width: 1.25rem;
-  height: 1.25rem;
+  width: 1.5rem;
+  height: 1.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.docyard-callout__icon .docyard-icon {
-  width: 100%;
-  height: 100%;
+.docyard-callout__icon .docyard-icon,
+.docyard-callout__icon i[class*="ph-"] {
+  font-size: 1.25rem;
+  display: inline-block;
 }
 
 .docyard-callout__icon svg {
@@ -98,11 +99,30 @@
 }
 
 .docyard-callout__body :not(pre)>code {
-  background-color: oklch(from var(--input) l c h / 30%);
   padding: 0.125rem 0.375rem;
   border-radius: var(--radius-sm);
 }
 
+.docyard-callout--note .docyard-callout__body :not(pre)>code {
+  background-color: oklch(from var(--callout-note-border) l c h / 15%);
+}
+
+.docyard-callout--tip .docyard-callout__body :not(pre)>code {
+  background-color: oklch(from var(--callout-tip-border) l c h / 15%);
+}
+
+.docyard-callout--important .docyard-callout__body :not(pre)>code {
+  background-color: oklch(from var(--callout-important-border) l c h / 15%);
+}
+
+.docyard-callout--warning .docyard-callout__body :not(pre)>code {
+  background-color: oklch(from var(--callout-warning-border) l c h / 15%);
+}
+
+.docyard-callout--danger .docyard-callout__body :not(pre)>code {
+  background-color: oklch(from var(--callout-danger-border) l c h / 15%);
+}
+
 .docyard-callout--note {
   border-color: var(--callout-note-border);
   background-color: var(--callout-note-background);

data/lib/docyard/templates/assets/css/components/code-block.css

@@ -57,7 +57,8 @@
   flex-shrink: 0;
 }
 
-.docyard-code-block__icon .docyard-icon {
+.docyard-code-block__icon .docyard-icon,
+.docyard-code-block__icon i[class*="ph-"] {
   width: 1rem;
   height: 1rem;
   display: inline-flex;
@@ -468,7 +469,8 @@
     gap: var(--spacing-2);
   }
 
-  .docyard-code-block__icon .docyard-icon {
+  .docyard-code-block__icon .docyard-icon,
+  .docyard-code-block__icon i[class*="ph-"] {
     width: 0.875rem;
     height: 0.875rem;
   }

data/lib/docyard/templates/assets/css/components/code-group.css

@@ -44,7 +44,7 @@
 .docyard-code-group__tab {
   display: inline-flex;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   gap: var(--spacing-1-5);
   padding: var(--spacing-2) var(--spacing-2-5);
   background: transparent;
@@ -60,9 +60,7 @@
   flex-shrink: 0;
   line-height: 1.5;
   outline: none;
-  max-width: 12rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  max-width: 14rem;
 }
 
 .docyard-code-group__tab:hover {
@@ -79,7 +77,8 @@
   border-radius: var(--radius-sm);
 }
 
-.docyard-code-group__tab .docyard-icon {
+.docyard-code-group__tab .docyard-icon,
+.docyard-code-group__tab i[class*="ph-"] {
   width: 1rem;
   height: 1rem;
   display: inline-flex;
@@ -91,6 +90,13 @@
   height: 100%;
 }
 
+.docyard-code-group__tab-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  direction: rtl;
+  text-align: left;
+}
+
 .docyard-code-group__indicator {
   position: absolute;
   bottom: 0;
@@ -100,12 +106,18 @@
   border-radius: 1px;
   pointer-events: none;
   z-index: 1;
+  opacity: 0;
   transition:
     transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
-    width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+    width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
+    opacity 0.15s ease;
   will-change: transform, width;
 }
 
+.docyard-code-group__indicator.is-ready {
+  opacity: 1;
+}
+
 .docyard-code-group__tabs-scroll-container.can-scroll-left .docyard-code-group__tabs {
   mask-image: linear-gradient(to right, transparent, black 2rem);
   -webkit-mask-image: linear-gradient(to right, transparent, black 2rem);
@@ -252,7 +264,8 @@
     gap: var(--spacing-1);
   }
 
-  .docyard-code-group__tab .docyard-icon {
+  .docyard-code-group__tab .docyard-icon,
+  .docyard-code-group__tab i[class*="ph-"] {
     width: 0.875rem;
     height: 0.875rem;
   }

data/lib/docyard/templates/assets/css/components/feedback.css

@@ -0,0 +1,126 @@
+.feedback {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-3);
+  margin-top: var(--spacing-10);
+  padding-top: var(--spacing-6);
+}
+
+.feedback__question {
+  margin: 0;
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--foreground);
+}
+
+.feedback__buttons {
+  display: flex;
+  gap: var(--spacing-2);
+}
+
+.feedback__btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0;
+  background-color: var(--background);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  color: var(--muted-foreground);
+  cursor: pointer;
+  transition:
+    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
+    background-color var(--transition-fast),
+    border-color var(--transition-fast),
+    color var(--transition-fast),
+    box-shadow 0.2s ease;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.feedback__btn:hover {
+  background-color: var(--background);
+  border-color: var(--foreground);
+  color: var(--foreground);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.feedback__btn:active {
+  transform: scale(0.92);
+  transition:
+    transform 0.1s cubic-bezier(0.4, 0, 1, 1),
+    background-color var(--transition-fast),
+    border-color var(--transition-fast),
+    color var(--transition-fast);
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0.05);
+}
+
+.feedback__btn:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+
+.feedback__btn i[class*="ph-"] {
+  font-size: 1.125rem;
+  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.feedback__btn.is-selected {
+  background-color: var(--primary);
+  border-color: var(--primary);
+  color: var(--primary-foreground);
+  pointer-events: none;
+}
+
+.feedback__btn.is-selected i[class*="ph-"] {
+  animation: feedbackPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.feedback__btn.is-not-selected {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+@keyframes feedbackPop {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.3);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.feedback__thanks {
+  margin: 0;
+  font-size: var(--text-sm);
+  color: var(--muted-foreground);
+  animation: feedbackFadeIn 0.3s ease;
+}
+
+.feedback__thanks[hidden] {
+  display: none;
+}
+
+@keyframes feedbackFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.feedback.is-submitted .feedback__question {
+  display: none;
+}
+
+.feedback.is-submitted .feedback__buttons {
+  display: none;
+}

data/lib/docyard/templates/assets/css/components/file-tree.css

@@ -51,7 +51,8 @@
   transition: transform 0.1s cubic-bezier(0.4, 0, 1, 1), background-color 0.1s ease;
 }
 
-.docyard-filetree__entry .docyard-icon {
+.docyard-filetree__entry .docyard-icon,
+.docyard-filetree__entry i[class*="ph-"] {
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
@@ -66,12 +67,12 @@
   height: 100%;
 }
 
-.docyard-filetree__entry .docyard-icon-folder-open,
-.docyard-filetree__entry .docyard-icon-folder {
+.docyard-filetree__entry .ph-folder-open,
+.docyard-filetree__entry .ph-folder {
   color: var(--muted-foreground);
 }
 
-.docyard-filetree__entry .docyard-icon-file-text {
+.docyard-filetree__entry .ph-file-text {
   color: var(--muted-foreground);
   opacity: 0.6;
 }

data/lib/docyard/templates/assets/css/components/heading-anchor.css

@@ -12,7 +12,7 @@
 .has-tabs .content h4[id],
 .has-tabs .content h5[id],
 .has-tabs .content h6[id] {
-  scroll-margin-top: calc(var(--header-height) + 3rem + var(--spacing-6));
+  scroll-margin-top: calc(var(--header-height) + var(--tab-bar-height) + var(--spacing-6));
 }
 
 @media (max-width: 1280px) and (min-width: 1025px) {
@@ -22,7 +22,7 @@
   .content h4[id],
   .content h5[id],
   .content h6[id] {
-    scroll-margin-top: calc(var(--header-height) + 3rem + var(--spacing-6));
+    scroll-margin-top: calc(var(--header-height) + var(--secondary-header-height) + var(--spacing-6));
   }
 }
 

data/lib/docyard/templates/assets/css/components/icon.css

@@ -1,3 +1,8 @@
+i[class*="ph-"] {
+  font-size: 1.15em;
+  vertical-align: -0.15em;
+}
+
 .docyard-icon {
   display: inline-flex;
   align-items: center;

data/lib/docyard/templates/assets/css/components/nav-menu.css

@@ -33,17 +33,23 @@
   background: var(--background);
   border-bottom: 1px solid var(--border);
   z-index: calc(var(--z-dropdown) + 1);
-  transform: translateY(-8px);
+  transform: scale(0.98) translateY(-8px);
+  transform-origin: top center;
   opacity: 0;
   pointer-events: none;
-  transition: transform 0.15s ease-out, opacity 0.15s ease-out;
+  transition:
+    transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 0.12s ease-out;
   box-shadow: var(--shadow-lg);
 }
 
 .nav-menu-dropdown.is-open {
-  transform: translateY(0);
+  transform: scale(1) translateY(0);
   opacity: 1;
   pointer-events: auto;
+  transition:
+    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
+    opacity 0.15s ease-out;
 }
 
 .nav-menu-content {
@@ -96,7 +102,8 @@
   opacity: 0.7;
 }
 
-.nav-menu-item-icon .docyard-icon {
+.nav-menu-item-icon .docyard-icon,
+.nav-menu-item-icon i[class*="ph-"] {
   width: 18px;
   height: 18px;
 }
@@ -225,6 +232,15 @@
   }
 }
 
+/* Adjust dropdown position when announcement banner is visible */
+body.has-announcement .nav-menu-overlay {
+  top: calc(var(--header-height) + var(--announcement-height));
+}
+
+body.has-announcement .nav-menu-dropdown {
+  top: calc(var(--header-height) + var(--announcement-height));
+}
+
 /* Reduced motion preference */
 @media (prefers-reduced-motion: reduce) {
   .nav-menu-overlay,

data/lib/docyard/templates/assets/css/components/navigation.css

@@ -43,6 +43,10 @@
   height: 1rem;
 }
 
+.nav-section-icon i[class*="ph-"] {
+  font-size: 1rem;
+}
+
 .sidebar nav ul {
   list-style: none;
   padding: 0;
@@ -242,11 +246,19 @@
   transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
-[data-nav-toggle][aria-expanded="true"] .nav-group-icon .docyard-icon {
+.nav-group-icon i[class*="ph-"] {
+  display: inline-block;
+  font-size: 1rem;
+  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+[data-nav-toggle][aria-expanded="true"] .nav-group-icon .docyard-icon,
+[data-nav-toggle][aria-expanded="true"] .nav-group-icon i[class*="ph-"] {
   transform: rotate(90deg);
 }
 
-[data-nav-toggle][aria-expanded="false"] .nav-group-icon .docyard-icon {
+[data-nav-toggle][aria-expanded="false"] .nav-group-icon .docyard-icon,
+[data-nav-toggle][aria-expanded="false"] .nav-group-icon i[class*="ph-"] {
   transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1);
 }
 
@@ -302,6 +314,10 @@
   height: 1rem;
 }
 
+.nav-item-icon i[class*="ph-"] {
+  font-size: 1rem;
+}
+
 .nav-item-text {
   flex: 1;
   min-width: 0;
@@ -322,17 +338,23 @@
   height: 0.75rem;
 }
 
+.nav-item-external i[class*="ph-"] {
+  font-size: 0.75rem;
+}
+
 @media (prefers-reduced-motion: reduce) {
 
   .sidebar nav a,
   .nav-group-header,
   .nav-group-icon .docyard-icon,
+  .nav-group-icon i[class*="ph-"],
   .nav-group-children,
   .mobile-menu-toggle {
     transition: none;
   }
 
-  [data-nav-toggle][aria-expanded="true"] .nav-group-icon .docyard-icon {
+  [data-nav-toggle][aria-expanded="true"] .nav-group-icon .docyard-icon,
+  [data-nav-toggle][aria-expanded="true"] .nav-group-icon i[class*="ph-"] {
     transform: none;
   }
 }