Fixed JavaDoc Website Embedding

docs/website/assets/css/extended/cn1-javadoc-embed.css

@@ -2,36 +2,77 @@
   max-width: min(1700px, 98vw);
 }
 
-.post-single--api-javadoc .post-description {
-  margin-top: 0.35rem;
-}
-
-.post-single--api-javadoc .post-meta {
+.cn1-javadoc-links {
   display: flex;
   align-items: center;
   gap: 0.55rem;
-  margin-top: 0.7rem;
+  margin: 0.4rem 0 1rem;
   font-size: 0.95rem;
 }
 
-.cn1-api-javadoc-frame-wrap {
-  margin-top: 1.1rem;
+.cn1-javadoc {
   border: 1px solid var(--border);
   border-radius: 12px;
-  overflow: hidden;
+  padding: 0.7rem;
   background: var(--entry);
+  color: var(--content);
+  --body-text-color: var(--content);
+  --block-text-color: var(--content);
+  --body-background-color: var(--entry);
+  --section-background-color: var(--entry);
+  --detail-background-color: var(--entry);
+  --code-background-color: var(--code-bg);
+  --pre-background-color: var(--code-bg);
+  --pre-text-color: var(--content);
+  --snippet-background-color: var(--code-bg);
+  --snippet-text-color: var(--content);
+  --table-header-color: color-mix(in srgb, var(--entry) 70%, var(--theme) 30%);
+  --even-row-color: var(--entry);
+  --odd-row-color: color-mix(in srgb, var(--entry) 90%, var(--theme) 10%);
+  --border-color: var(--border);
+  --title-color: var(--primary);
+  --link-color: var(--primary);
+  --link-color-active: var(--primary);
+  --toc-background-color: var(--theme);
+  --toc-hover-color: color-mix(in srgb, var(--entry) 80%, var(--theme) 20%);
+  --toc-highlight-color: color-mix(in srgb, var(--entry) 70%, var(--theme) 30%);
+  --navbar-background-color: color-mix(in srgb, var(--entry) 70%, #1f4a75 30%);
+  --navbar-text-color: var(--primary);
+  --subnav-background-color: color-mix(in srgb, var(--entry) 78%, var(--theme) 22%);
+  --subnav-link-color: var(--primary);
+  --selected-background-color: color-mix(in srgb, var(--primary) 26%, var(--entry) 74%);
+  --selected-text-color: var(--content);
+  --search-input-background-color: var(--entry);
+  --search-input-text-color: var(--content);
+  --search-input-placeholder-color: var(--secondary);
+}
+
+.cn1-javadoc .main-grid {
+  margin: 0;
 }
 
-.cn1-api-javadoc-frame {
-  display: block;
-  width: 100%;
-  height: min(76vh, 1200px);
-  border: 0;
-  background: #fff;
+.cn1-javadoc a {
+  color: var(--primary);
 }
 
-@media (max-width: 900px) {
-  .cn1-api-javadoc-frame {
-    height: 72vh;
-  }
+body.dark .cn1-javadoc {
+  background: var(--theme);
+  --body-background-color: var(--theme);
+  --section-background-color: var(--theme);
+  --detail-background-color: var(--theme);
+  --table-header-color: color-mix(in srgb, var(--theme) 70%, #1b2b40 30%);
+  --even-row-color: var(--theme);
+  --odd-row-color: color-mix(in srgb, var(--theme) 86%, #0d1726 14%);
+  --toc-background-color: #101a2a;
+  --toc-hover-color: #172439;
+  --toc-highlight-color: #1d2d45;
+  --navbar-background-color: #1b2d45;
+  --subnav-background-color: #152235;
+  --subnav-link-color: #cfe2ff;
+  --link-color: #b7d2ff;
+  --link-color-active: #d6e6ff;
+  --title-color: #e3edff;
+  --search-input-background-color: #111b2b;
+  --search-input-text-color: #e9eef7;
+  --search-input-placeholder-color: #8ea1bc;
 }

docs/website/assets/js/cn1-javadoc.js

@@ -0,0 +1,58 @@
+(() => {
+  const root = document.querySelector(".cn1-javadoc");
+  if (!root) return;
+
+  const toRoute = (href) => {
+    let url;
+    try {
+      url = new URL(href, window.location.href);
+    } catch (_e) {
+      return null;
+    }
+    if (url.origin !== window.location.origin) return null;
+    if (!url.pathname.startsWith("/javadoc")) return null;
+    if (!url.pathname.endsWith(".html")) return null;
+    return url.pathname === "/javadoc/index.html"
+      ? { fetchPath: "/javadoc/_index-raw.html", browserPath: "/javadoc/" }
+      : { fetchPath: url.pathname, browserPath: url.pathname };
+  };
+
+  const calcPathToRoot = (fetchPath) => {
+    const rel = fetchPath.replace(/^\/javadoc\//, "");
+    const depth = Math.max(0, rel.split("/").length - 1);
+    return depth === 0 ? "./" : "../".repeat(depth);
+  };
+
+  const loadIntoContainer = async (route, pushState) => {
+    const res = await fetch(route.fetchPath, { credentials: "same-origin" });
+    if (!res.ok) return;
+    const html = await res.text();
+    const doc = new DOMParser().parseFromString(html, "text/html");
+    if (!doc.body) return;
+    root.innerHTML = doc.body.innerHTML;
+    window.pathtoroot = calcPathToRoot(route.fetchPath);
+    if (typeof window.loadScripts === "function") {
+      window.loadScripts(document, "script");
+    }
+    if (pushState) {
+      window.history.pushState({ cn1Javadoc: route.browserPath }, "", route.browserPath);
+    }
+    window.scrollTo({ top: 0, behavior: "auto" });
+  };
+
+  root.addEventListener("click", (event) => {
+    const link = event.target.closest("a[href]");
+    if (!link || link.target || link.hasAttribute("download")) return;
+    if (link.getAttribute("href").startsWith("#")) return;
+    const route = toRoute(link.href);
+    if (!route) return;
+    event.preventDefault();
+    loadIntoContainer(route, true).catch(() => {});
+  });
+
+  window.addEventListener("popstate", () => {
+    const route = toRoute(window.location.href);
+    if (!route) return;
+    loadIntoContainer(route, false).catch(() => {});
+  });
+})();

docs/website/content/api.md

@@ -3,7 +3,7 @@ title: "API"
 date: 2015-03-03
 slug: "javadoc"
 layout: "api-javadoc"
-description: "Codename One JavaDoc embedded in the Codename One website."
+description: "Codename One JavaDoc"
 aliases:
   - /api/
 ---

docs/website/layouts/_default/api-javadoc.html

@@ -1,25 +1,21 @@
 {{- define "main" -}}
 <article class="post-single post-single--api-javadoc">
-  <header class="post-header">
-    {{ partial "breadcrumbs.html" . }}
-    <h1 class="post-title entry-hint-parent">{{ .Title }}</h1>
-    <div class="post-description">
-      Browse the Codename One JavaDoc with the standard website navigation and theme.
-    </div>
-    <div class="post-meta">
-      <a href="/javadoc/_index-raw.html">Open raw JavaDoc</a>
-      <span>&middot;</span>
-      <a href="/files/javadocs.zip">Download ZIP</a>
-    </div>
-  </header>
+  <div class="cn1-javadoc-links">
+    <a href="/javadoc/_index-raw.html">Open raw JavaDoc</a>
+    <span>&middot;</span>
+    <a href="/files/javadocs.zip">Download ZIP</a>
+  </div>
 
-  <div class="cn1-api-javadoc-frame-wrap">
-    <iframe
-      class="cn1-api-javadoc-frame"
-      src="/javadoc/_index-raw.html"
-      title="Codename One JavaDoc"
-      loading="lazy">
-    </iframe>
+  <div class="cn1-javadoc">
+    {{- $javadocFragment := "generated/javadoc-content.html" -}}
+    {{- if fileExists $javadocFragment -}}
+      {{- readFile $javadocFragment | safeHTML -}}
+    {{- else -}}
+      <p>
+        JavaDoc content isn't generated in this build.
+        Run the website build with <code>WEBSITE_INCLUDE_JAVADOCS=true</code>.
+      </p>
+    {{- end -}}
   </div>
 </article>
 {{- end -}}

docs/website/layouts/partials/extend_head.html

@@ -11,6 +11,19 @@
 </style>
   {{- end -}}
 {{- end -}}
+{{- if eq .Layout "api-javadoc" -}}
+  {{- $javadocCssPath := "static/javadoc/resource-files/stylesheet-scoped.css" -}}
+  {{- if fileExists $javadocCssPath -}}
+<style>
+{{ readFile $javadocCssPath | safeCSS }}
+</style>
+  {{- end -}}
+<script type="text/javascript" src="/javadoc/script-files/script.js"></script>
+<script type="text/javascript" src="/javadoc/script-files/jquery-3.7.1.min.js"></script>
+<script type="text/javascript" src="/javadoc/script-files/jquery-ui.min.js"></script>
+<script type="text/javascript" src="/javadoc/script-files/highlight.min.js"></script>
+<script type="text/javascript" src="/javadoc/script-files/javadoc-highlight-init.js"></script>
+{{- end -}}
 {{- with site.GetPage "section" "blog" -}}
   {{- with .OutputFormats.Get "RSS" -}}
 <link rel="alternate" type="{{ .MediaType.Type }}" href="{{ .Permalink }}" title="{{ site.Title }} Blog RSS">

docs/website/layouts/partials/footer.html

@@ -64,11 +64,15 @@ <h3>Important Links</h3>
 {{- $cn1Demo := resources.Get "js/cn1-demo.js" | minify | fingerprint }}
 {{- $cn1Pricing := resources.Get "js/cn1-pricing.js" | minify | fingerprint }}
 {{- $cn1Crisp := resources.Get "js/cn1-crisp.js" | minify | fingerprint }}
+{{- $cn1Javadoc := resources.Get "js/cn1-javadoc.js" | minify | fingerprint }}
 <script defer src="{{ $cn1Site.RelPermalink }}" integrity="{{ $cn1Site.Data.Integrity }}"></script>
 <script defer src="{{ $cn1Home.RelPermalink }}" integrity="{{ $cn1Home.Data.Integrity }}"></script>
 <script defer src="{{ $cn1Demo.RelPermalink }}" integrity="{{ $cn1Demo.Data.Integrity }}"></script>
 <script defer src="{{ $cn1Pricing.RelPermalink }}" integrity="{{ $cn1Pricing.Data.Integrity }}"></script>
 <script defer src="{{ $cn1Crisp.RelPermalink }}" integrity="{{ $cn1Crisp.Data.Integrity }}"></script>
+{{- if eq .Layout "api-javadoc" -}}
+<script defer src="{{ $cn1Javadoc.RelPermalink }}" integrity="{{ $cn1Javadoc.Data.Integrity }}"></script>
+{{- end -}}
 
 <script>
     let menu = document.getElementById('menu')