feat: hooked the APIs of the app into the pyoide core.

src/renderer/components/DocumentationView/DocumentationView.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from 'react';
 import Markdown from 'marked-react';
 import hljs from '@highlightjs/cdn-assets/es/highlight.min.js';
 import type { ReactNode } from 'react';
-import documentationContent from '../../../../DOCUMENTATION.md?raw';
+import defaultDocumentationContent from '../../../../DOCUMENTATION.md?raw';
 import { useAppStore } from '../../store';
 import { useI18n } from '../../i18n';
 import { ensureRendererPicoThemeStylesheet, getRendererPicoTheme } from '../../utils/picoTheme';
@@ -84,7 +84,17 @@ function resolveTargetHeadingInArticle(articleElement: HTMLElement, targetId: st
   return null;
 }
 
-export const DocumentationView: React.FC = () => {
+interface DocumentationViewProps {
+  content?: string;
+  titleKey?: string;
+  subtitleKey?: string;
+}
+
+export const DocumentationView: React.FC<DocumentationViewProps> = ({
+  content = defaultDocumentationContent,
+  titleKey = 'docs.title',
+  subtitleKey = 'docs.subtitle',
+}) => {
   const { t: tr } = useI18n();
   const { picoTheme } = useAppStore();
   const resolvedTheme = getRendererPicoTheme(picoTheme);
@@ -258,8 +268,8 @@ export const DocumentationView: React.FC = () => {
   return (
     <div className="documentation-view">
       <div className="documentation-header">
-        <h1>{tr('docs.title')}</h1>
-        <p>{tr('docs.subtitle')}</p>
+        <h1>{tr(titleKey)}</h1>
+        <p>{tr(subtitleKey)}</p>
       </div>
       <main
         className="documentation-scroll"
@@ -267,7 +277,7 @@ export const DocumentationView: React.FC = () => {
       >
         <div className="documentation-content markdown-body pico" data-theme="auto" data-pico-theme={resolvedTheme}>
           <article className="documentation-article" ref={articleRef}>
-            <Markdown renderer={markdownRenderer}>{documentationContent}</Markdown>
+            <Markdown renderer={markdownRenderer}>{content}</Markdown>
           </article>
         </div>
       </main>

src/renderer/components/Editor/Editor.tsx

@@ -26,6 +26,8 @@ import { AISuggestionsModal, AISuggestions } from '../AISuggestionsModal/AISugge
 import { openEntityTab } from '../../navigation/tabPolicy';
 import { EditorRoute, resolveEditorRoute } from '../../navigation/editorRouting';
 import { useI18n } from '../../i18n';
+import documentationContent from '../../../../DOCUMENTATION.md?raw';
+import apiDocumentationContent from '../../../../API.md?raw';
 import './Editor.css';
 
 const UI_DATE_LOCALE: Record<string, string> = {
@@ -1781,7 +1783,20 @@ export const Editor: React.FC = () => {
       editorRoute.tabId && editorRoute.gitDiffResource
         ? <GitDiffView key={editorRoute.tabId} filePath={editorRoute.gitDiffResource} />
         : <Dashboard />,
-    documentation: () => <DocumentationView />,
+    documentation: () => (
+      <DocumentationView
+        content={documentationContent}
+        titleKey="docs.title"
+        subtitleKey="docs.subtitle"
+      />
+    ),
+    'api-documentation': () => (
+      <DocumentationView
+        content={apiDocumentationContent}
+        titleKey="docs.apiTitle"
+        subtitleKey="docs.apiSubtitle"
+      />
+    ),
     'site-validation': () => <SiteValidationView />,
     scripts: () => <ScriptsView scriptId={editorRoute.tabId} />,
     post: () => (editorRoute.tabId ? <PostEditor key={editorRoute.tabId} postId={editorRoute.tabId} /> : <Dashboard />),

src/renderer/components/TabBar/TabBar.tsx

@@ -77,6 +77,10 @@ const getTabTitle = (
     return tr('docs.title');
   }
 
+  if (tab.type === 'api-documentation') {
+    return tr('docs.apiTitle');
+  }
+
   if (tab.type === 'site-validation') {
     return tr('siteValidation.tabTitle');
   }
@@ -157,6 +161,13 @@ const getTabIcon = (tab: Tab): React.ReactNode => {
           <path d="M5 4h6v1H5V4zm0 2h6v1H5V6zm0 2h6v1H5V8zm0 2h4v1H5v-1z"/>
         </svg>
       );
+    case 'api-documentation':
+      return (
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+          <path d="M2.5 2A1.5 1.5 0 0 0 1 3.5v9A1.5 1.5 0 0 0 2.5 14h11a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 13.5 2h-11zm0 1h11a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5z"/>
+          <path d="M4 5h2v1H4V5zm3 0h5v1H7V5zM4 7.5h2v1H4v-1zm3 0h5v1H7v-1zM4 10h2v1H4v-1zm3 0h5v1H7v-1z"/>
+        </svg>
+      );
     case 'site-validation':
       return (
         <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">