dbdocs 1.6.1__tar.gz → 1.6.3__tar.gz

{dbdocs-1.6.1 → dbdocs-1.6.3}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: dbdocs
-Version: 1.6.1
+Version: 1.6.3
 Summary: Alternative dbt docs site: Catalog + ERD + column-level lineage
 Project-URL: Homepage, https://github.com/datnguye/dbt-docs
 Project-URL: Repository, https://github.com/datnguye/dbt-docs

{dbdocs-1.6.1 → dbdocs-1.6.3}/dbdocs/site/builder.py

@@ -211,7 +211,7 @@ class ReportBuilder:
                 counts[label] = counts.get(label, 0) + len(collection)
         return counts
 
-    def generate(self, output_dir: "str | None" = None) -> str:
+    def generate(self, output_dir: "str | None" = None, versioned: bool = False) -> str:
         """Render the site into ``output_dir`` (or config's). Returns its path.
 
         The data dict is written as an external ``dbdocs-data.json.gz`` that the
@@ -225,6 +225,10 @@ class ReportBuilder:
         see ``_write_api`` for the layout. The api/ directory is created after the
         bundle copytree (so the rmtree + copytree cycle doesn't touch it) and is
         not shipped in the wheel.
+
+        ``versioned=True`` is set by ``deploy()`` to signal that a
+        ``versions.json`` sibling exists; the SPA gates its version-switcher fetch
+        on this flag so a plain ``generate`` build never makes a 404 request.
         """
         out = Path(output_dir) if output_dir else Path(self.config.output_path)
         if out.exists():
@@ -233,6 +237,7 @@ class ReportBuilder:
         copytree(src=BUNDLE_DIR, dst=out, dirs_exist_ok=True)
 
         data = self.build_data()
+        data["metadata"]["versioned"] = versioned
         data["metadata"].update(self._stage_branding(out))
         index = out / "index.html"
         index.write_text(strip_marker(index.read_text(encoding="utf-8")), encoding="utf-8")

{dbdocs-1.6.1 → dbdocs-1.6.3}/dbdocs/site/bundle/assets/css/style.css

@@ -87,7 +87,7 @@ code, pre { font-family: "SF Mono", "Roboto Mono", Menlo, Consolas, monospace; }
 .brand-generated { color: var(--text-soft); font-size: 12px; font-weight: 400; white-space: nowrap; }
 .search-wrap { position: relative; flex: 1; max-width: 520px; }
 #search {
-  width: 100%; padding: 7px 12px; border-radius: var(--radius);
+  width: 100%; padding: 7px 76px 7px 12px; border-radius: var(--radius);
   border: 1px solid var(--border); background: var(--bg-soft); color: var(--text);
 }
 #search:focus { outline: none; border-color: var(--accent); }
@@ -190,7 +190,11 @@ body.nav-collapsed .nav-collapse { display: none; }
 }
 .nav-reopen:hover { color: var(--accent); border-color: var(--accent); }
 body.nav-collapsed .nav-reopen { display: inline-flex; }
-.sidebar { flex: 1; overflow-y: auto; padding: 12px; }
+.sidebar {
+  flex: 1; min-height: 0; overflow: hidden; padding: 12px;
+  display: flex; flex-direction: column;
+}
+.sidebar > .nav-cta, .sidebar > .nav-tabs, .sidebar > .nav-filter { flex-shrink: 0; }
 .nav-filter {
   width: 100%; box-sizing: border-box; margin: 6px 0 10px;
   padding: 7px 10px; font-size: 13px; border-radius: var(--radius);
@@ -289,7 +293,7 @@ body.nav-collapsed .nav-reopen { display: inline-flex; }
 .nav-tab:hover { color: var(--text); background: var(--bg-elev); }
 .nav-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
 .nav-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
-.nav-tab-panel { min-height: 0; }
+.nav-tab-panel { flex: 1; min-height: 0; overflow-y: auto; }
 
 /* Resource-type dot */
 .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
@@ -599,6 +603,178 @@ a.score-chip:hover {
 a.score-chip:hover .score-name { text-decoration: none; }
 a.score-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 @media (prefers-reduced-motion: reduce) { .score-chip { transition: none; } a.score-chip:hover { transform: none; } }
+
+/* ── theme transition ───────────────────────────────────────────────────────
+   A brief ease so toggling dark mode fades rather than snapping. Scoped only
+   to background/border/color so it doesn't make every interaction feel laggy.
+   Applied via the .theme-transition class that ui.js adds for 300ms then removes. */
+.theme-transition,
+.theme-transition *,
+.theme-transition *::before,
+.theme-transition *::after {
+  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.2s ease !important;
+}
+
+/* ── page-mount micro-transition ────────────────────────────────────────────
+   Subtle fade+slide-up when route() replaces #app content (150ms, fast). */
+@keyframes page-enter {
+  from { opacity: 0; transform: translateY(6px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.page-enter { animation: page-enter 0.15s ease-out both; }
+
+/* ── graph skeleton loader ──────────────────────────────────────────────────
+   Shimmer gradient shown inside .graph-host while the React Flow bundle mounts.
+   Replaced by the graph once dbdocsGraph.mount() fires. */
+@keyframes shimmer {
+  0%   { background-position: -200% 0; }
+  100% { background-position:  200% 0; }
+}
+.graph-skeleton {
+  width: 100%; height: 480px; border-radius: var(--radius);
+  background: linear-gradient(90deg,
+    var(--bg-soft) 25%,
+    var(--bg-elev) 37%,
+    var(--bg-soft) 63%);
+  background-size: 200% 100%;
+  animation: shimmer 1.4s linear infinite;
+}
+
+/* ── toast notifications ────────────────────────────────────────────────────
+   Corner-anchored stack. Individual toasts slide in from the right, fade out.
+   The ARIA live region (#toast-region) is visually positioned at the bottom-right. */
+#toast-region {
+  position: fixed; bottom: 24px; right: 24px; z-index: 200;
+  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
+  max-width: 320px;
+}
+.toast {
+  display: flex; align-items: center; gap: 10px; pointer-events: none;
+  padding: 10px 16px; border-radius: var(--radius);
+  background: var(--bg-elev); border: 1px solid var(--border);
+  box-shadow: 0 4px 16px rgba(0,0,0,0.15); color: var(--text);
+  font-size: 13px; font-weight: 500;
+  animation: toast-in 0.2s ease-out both;
+}
+.toast.toast-out {
+  animation: toast-out 0.2s ease-in both;
+}
+@keyframes toast-in {
+  from { opacity: 0; transform: translateX(24px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+@keyframes toast-out {
+  from { opacity: 1; transform: translateX(0); }
+  to   { opacity: 0; transform: translateX(24px); }
+}
+
+/* ── command palette ────────────────────────────────────────────────────────
+   Centered modal overlay with a frosted backdrop. */
+#cmd-backdrop {
+  position: fixed; inset: 0; z-index: 100;
+  background: rgba(0,0,0,0.45);
+  display: flex; align-items: flex-start; justify-content: center;
+  padding-top: 15vh;
+}
+#cmd-palette {
+  width: min(640px, 92vw);
+  background: var(--bg-elev); border: 1px solid var(--border);
+  border-radius: calc(var(--radius) + 2px); box-shadow: 0 12px 48px rgba(0,0,0,0.24);
+  overflow: hidden;
+  animation: palette-in 0.14s ease-out both;
+}
+@keyframes palette-in {
+  from { opacity: 0; transform: scale(0.97) translateY(-8px); }
+  to   { opacity: 1; transform: scale(1)    translateY(0); }
+}
+.cmd-input-wrap {
+  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+}
+.cmd-input-wrap .ic { flex-shrink: 0; }
+#cmd-input {
+  flex: 1; border: none; outline: none; background: transparent;
+  font-size: 15px; color: var(--text); line-height: 1.4;
+}
+#cmd-input::placeholder { color: var(--text-soft); }
+.cmd-kbd-close {
+  flex-shrink: 0; padding: 2px 6px; border-radius: 4px;
+  background: var(--bg-soft); border: 1px solid var(--border);
+  color: var(--text-soft); font-size: 11px; font-family: inherit;
+}
+#cmd-results {
+  max-height: 360px; overflow-y: auto;
+  padding: 4px 0;
+}
+.cmd-result {
+  display: flex; align-items: center; gap: 10px;
+  padding: 9px 16px; cursor: pointer; color: var(--text);
+  font-size: 13px; text-decoration: none;
+}
+.cmd-result:hover, .cmd-result.cmd-active {
+  background: var(--accent-soft); text-decoration: none;
+}
+.cmd-result-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cmd-result-meta { font-size: 11px; color: var(--text-soft); white-space: nowrap; flex-shrink: 0; }
+.cmd-section-label {
+  padding: 6px 16px 2px; font-size: 10px; font-weight: 700; letter-spacing: .06em;
+  text-transform: uppercase; color: var(--text-soft);
+}
+.cmd-empty { padding: 20px 16px; text-align: center; color: var(--text-soft); font-size: 13px; }
+
+/* ── ⌘K hint in the search box ──────────────────────────────────────────────
+   A small kbd chip rendered inside .search-wrap (absolute-positioned right edge). */
+.cmd-hint {
+  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
+  pointer-events: none;
+  display: flex; align-items: center; gap: 3px;
+}
+.cmd-hint kbd {
+  padding: 1px 5px; border-radius: 4px;
+  background: var(--bg-elev); border: 1px solid var(--border);
+  color: var(--text-soft); font-size: 10px; font-family: inherit;
+  line-height: 1.6;
+}
+
+/* ── sticky table headers ───────────────────────────────────────────────────
+   th in the Columns/Tests/other node-page tables stick at the top of their
+   scroll container (.content) on vertical scroll. background is explicitly set
+   so rows don't bleed through. */
+.node-section-body th {
+  position: sticky; top: 0; z-index: 2;
+  background: var(--bg-elev); box-shadow: 0 1px 0 var(--border);
+}
+
+/* ── scroll-spy active section ──────────────────────────────────────────────
+   When IntersectionObserver marks a node-section as visible, its summary gets a
+   subtle left accent stripe via the .section-in-view modifier. */
+details.node-section.section-in-view > summary.node-section-summary {
+  color: var(--accent);
+}
+details.node-section.section-in-view > summary.node-section-summary .node-section-title {
+  color: var(--accent);
+}
+details.node-section.section-in-view > summary.node-section-summary::before {
+  color: var(--accent);
+}
+
+/* ── Reduced-motion gate ────────────────────────────────────────────────────
+   Neutralize the palette/toast/page/skeleton/theme keyframes + transitions. */
+@media (prefers-reduced-motion: reduce) {
+  .theme-transition,
+  .theme-transition *,
+  .theme-transition *::before,
+  .theme-transition *::after {
+    transition: none !important;
+  }
+  .page-enter { animation: none; }
+  .graph-skeleton { animation: none; background: var(--bg-soft); }
+  .toast { animation: none; }
+  .toast.toast-out { animation: none; opacity: 0; }
+  #cmd-palette { animation: none; }
+  @keyframes toast-in  { from { opacity: 1; transform: none; } to { opacity: 1; transform: none; } }
+  @keyframes toast-out { from { opacity: 0; transform: none; } to { opacity: 0; transform: none; } }
+}
 .score-chip.good { border-left-color: var(--score-good); }
 .score-chip.warn { border-left-color: var(--score-warn); }
 .score-chip.bad  { border-left-color: var(--score-bad); }
@@ -625,6 +801,10 @@ a.score-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2
 .health-error { background: var(--status-error-bg); color: var(--status-error-fg); border-color: var(--status-error-bd); }
 .health-skip  { background: var(--bg-soft); color: var(--text-soft); border-color: var(--border); }
 
+[data-theme="dark"] .toast { box-shadow: 0 4px 16px rgba(0,0,0,0.45); }
+[data-theme="dark"] #cmd-palette { box-shadow: 0 12px 48px rgba(0,0,0,0.55); }
+[data-theme="dark"] #cmd-backdrop { background: rgba(0,0,0,0.65); }
+
 /* Hamburger + search toggle — hidden on desktop, revealed on phones below. */
 .nav-toggle { display: none; font-size: 18px; }
 .search-toggle { display: none; }