@openbooknetwork/kitap 0.1.0 → 0.3.0

package/README.md

@@ -26,6 +26,7 @@ title: Open Body Book
 engine: beden
 languages: [en, tr]
 assets: { url: https://assets.example.org/, bucket: body-assets, endpoint: https://... }
+ask: [chatgpt, claude]               # optional: an Ask button on every page opens the assistant with the page's text
 ```
 
 ```yaml

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openbooknetwork/kitap",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "The book under the Open Book Network sites: stories of pages with a text beside a picture an engine draws, built to a static site in every language",
   "keywords": [
     "static-site",

package/src/app.html

@@ -111,7 +111,11 @@ nav.pages button:focus-visible,nav.pages a.pg:focus-visible{outline:2px solid va
 .legend .r{width:1rem;height:0;border:0;border-top:2px solid var(--rc);position:relative}
 .legend .r.arrow::after{content:"";position:absolute;inset-inline-end:-2px;top:-5px;border:4px solid transparent;border-inline-start:5px solid var(--rc)}
 .legend .r.dashed{border-top-style:dashed}
-.credit{position:absolute;inset-inline-end:.714rem;bottom:.714rem;background:var(--panel);border:1px solid var(--rule);padding:3px .571rem;font-size:.786rem;color:var(--ink-2);pointer-events:auto;
+/* the corner of the map: the Ask button over the credit bar, and the popups they open above both */
+.corner{position:absolute;inset-inline-end:.714rem;bottom:.714rem;z-index:4;display:flex;flex-direction:column;align-items:flex-end;gap:.429rem;pointer-events:auto}
+.ask{display:flex;align-items:center;gap:.357rem;background:var(--panel);border:1px solid var(--rule);border-radius:6px;padding:.357rem .714rem;font:inherit;font-size:.929rem;font-weight:600;color:var(--ink);cursor:pointer}
+.ask svg{width:1.143rem;height:1.143rem} .ask[hidden]{display:none} .ask:focus-visible{outline:2px solid var(--accent)}
+.credit{background:var(--panel);border:1px solid var(--rule);padding:3px .571rem;font-size:.786rem;color:var(--ink-2);pointer-events:auto;
   display:flex;align-items:center;gap:.571rem}
 .credit a{color:inherit}
 .credit :is(#mapdata,#othersrc){background:none;border:0;border-inline-start:1px solid var(--rule);padding:0;padding-inline-start:.571rem;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
@@ -124,6 +128,7 @@ nav.pages button:focus-visible,nav.pages a.pg:focus-visible{outline:2px solid va
 .credits ul{margin:0;padding-inline-start:1rem;display:grid;gap:.286rem}
 .credit #othersrc[hidden]{display:none}
 .credits .made{display:none;margin:0 0 .429rem}
+.credits .ask-list{display:grid;gap:.286rem;margin:0 0 .429rem} .credits .note{margin:0;color:var(--ink-2)}
 /* map tools: the 2D | 3D switch at the top of the map, joined on phones by the Legend button */
 .maptools{position:absolute;top:.714rem;inset-inline-end:.714rem;z-index:3;display:flex;gap:.429rem;align-items:flex-start}
 .view{display:flex;background:var(--panel);border:1px solid var(--rule);border-radius:6px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.15)}
@@ -253,7 +258,7 @@ aside.story figcaption small{display:block;font-size:.786rem;color:var(--ink-2);
   aside.story .text{grid-row:2;grid-column:1;z-index:2;background:var(--paper);overflow:auto;padding:.571rem .143rem 1.143rem}
   body[data-tab="map"] aside.story .text{display:none}
   /* in the text view the map's own overlays step aside; they sit above the text in the stacking order otherwise */
-  body[data-tab="text"] :is(.peek,.maptools,.legend,.credit,.maplibregl-popup,.hl-label){display:none}
+  body[data-tab="text"] :is(.peek,.maptools,.legend,.corner,.maplibregl-popup,.hl-label){display:none}
   .hl-label.pinned{top:calc(.571rem + max(40px,2.857rem) + .429rem)} /* below the map tools and the credit */
   /* the peek card: the first two lines of the page's text over the bottom of the map; a tap opens the text */
   .peek{display:block;position:absolute;inset-inline:.571rem;bottom:.571rem;z-index:3;background:var(--panel);border:1px solid var(--rule);border-radius:8px;
@@ -272,7 +277,9 @@ aside.story figcaption small{display:block;font-size:.786rem;color:var(--ink-2);
   .legend-btn[hidden]{display:none}
   .legend{top:calc(.571rem + max(40px,2.857rem) + .429rem);bottom:auto;inset-inline-start:.571rem;z-index:3;max-width:calc(100% - 1.143rem)}
   body:not(.legend-open) .legend{display:none}
-  .credit{top:.571rem;bottom:auto;inset-inline-end:.571rem;padding:0;border:0;background:none}
+  .corner{top:.571rem;bottom:auto;inset-inline-end:.571rem;flex-direction:row-reverse}
+  .ask{display:grid;place-items:center;width:max(44px,3.143rem);height:max(40px,2.857rem);padding:0;color:var(--ink-2)} .ask span{display:none}
+  .credit{padding:0;border:0;background:none}
   .credit #made{display:none}
   .credit :is(#mapdata,#othersrc){display:grid;place-items:center;width:max(44px,3.143rem);height:max(40px,2.857rem);padding:0;background:var(--panel);border:1px solid var(--rule);border-radius:6px;color:var(--ink-2)}
   .credit :is(#mapdata,#othersrc) svg{display:block} .credit :is(#mapdata,#othersrc) span{display:none}
@@ -338,7 +345,7 @@ aside.story figcaption small{display:block;font-size:.786rem;color:var(--ink-2);
     <div class="maptools"><button type="button" class="legend-btn" id="legend-btn"></button><div class="view" id="view" role="group"><button type="button" data-view="2d" aria-pressed="true"></button><button type="button" data-view="3d" aria-pressed="false"></button></div></div>
     <div class="legend" id="legend"></div>
     <div class="hl-label" id="hl-label" hidden></div>
-    <div class="credit" id="credit"><span id="made"></span><button type="button" id="mapdata" aria-expanded="false" aria-controls="credits"></button><div class="credits" id="credits" hidden></div><button type="button" id="othersrc" aria-expanded="false" aria-controls="othercredits" hidden></button><div class="credits" id="othercredits" hidden></div></div>
+    <div class="corner" id="corner"><button type="button" class="ask" id="ask" aria-expanded="false" aria-controls="askmenu" hidden></button><div class="credits" id="askmenu" hidden></div><div class="credit" id="credit"><span id="made"></span><button type="button" id="mapdata" aria-expanded="false" aria-controls="credits"></button><div class="credits" id="credits" hidden></div><button type="button" id="othersrc" aria-expanded="false" aria-controls="othercredits" hidden></button><div class="credits" id="othercredits" hidden></div></div></div>
     <div class="peek" id="peek" role="button" tabindex="0"><p id="peek-text"></p><span class="more" id="peek-more"></span><button type="button" class="close" id="peek-close">×</button></div>
     <div class="lightbox" id="lightbox" hidden>
       <figure><img id="lb-img" alt=""><figcaption id="lb-cap"></figcaption></figure>

package/src/app.js

@@ -63,6 +63,7 @@ function renderChrome(){
   $('mapdata').innerHTML = `${ICONS.info}<span>${esc(T().map_data)}</span>`; $('mapdata').setAttribute('aria-label', T().map_data);
   $('mapdata').hidden = !B.credits.length;
   $('othersrc').innerHTML = `${ICONS['external-link']}<span>${esc(T().other_sources)}</span>`; $('othersrc').setAttribute('aria-label', T().other_sources);
+  $('ask').innerHTML = `${ICONS['message-circle']}<span>${esc(T().ask)}</span>`; $('ask').setAttribute('aria-label', T().ask); $('ask').hidden = !B.site.ask.length;
   $('credits').innerHTML = `<p class="made">${credit(T())}</p><h4>${esc(T().map_data)}</h4><ul>${B.credits.map(c => `<li>${esc(L(c))}</li>`).join('')}</ul>`;
   $('prev').innerHTML = `${ICONS['chevron-left']} ${esc(T().prev)}`;
   $('next').innerHTML = `${esc(T().next)} ${ICONS['chevron-right']}`;
@@ -201,11 +202,24 @@ $('peek').onkeydown = e => { if (e.key === 'Enter' || e.key === ' ') { e.prevent
 $('peek-close').onclick = e => { e.stopPropagation(); $('peek').hidden = true; };
 $('legend-btn').onclick = () => document.body.classList.toggle('legend-open');
 // the data credit popup and the page's other sources popup share the credit bar, one open at a time
-const CREDIT_POPUPS = { mapdata: 'credits', othersrc: 'othercredits' };
+const CREDIT_POPUPS = { mapdata: 'credits', othersrc: 'othercredits', ask: 'askmenu' };
 const showCredits = (open, btn = 'mapdata') => { for (const [b, p] of Object.entries(CREDIT_POPUPS)) { const on = open && b === btn; $(p).hidden = !on; $(b).setAttribute('aria-expanded', on); } };
 $('mapdata').onclick = () => showCredits($('credits').hidden, 'mapdata');
 $('othersrc').onclick = () => showCredits($('othercredits').hidden, 'othersrc');
-document.addEventListener('click', e => { if (!e.target.closest('.credit')) showCredits(false); });
+// the assistants of site.yaml, each opened in a new tab with the page's text as the prompt; the reader's own account answers
+const ASSISTANTS = { chatgpt: { name: 'ChatGPT', url: q => `https://chatgpt.com/?q=${q}` }, claude: { name: 'Claude', url: q => `https://claude.ai/new?q=${q}` } };
+function askPrompt(p){
+  const d = document.createElement('div'); d.innerHTML = p === OVERVIEW ? `<p>${esc(L(B.summary))}</p>` : p.html[lang];
+  d.querySelectorAll('figure').forEach(f => f.remove()); // the prose only, without the image captions and credits
+  const text = d.textContent.replace(/\s+/g, ' ').trim().slice(0, 2500);
+  return `${T().ask_prompt.replace('{title}', L(p.title)).replace('{url}', location.href)}\n\n${text}`;
+}
+$('ask').onclick = () => {
+  const q = encodeURIComponent(askPrompt(here()));
+  $('askmenu').innerHTML = `<h4>${esc(T().ask_title)}</h4><div class="ask-list">${B.site.ask.map(id => `<a href="${esc(ASSISTANTS[id].url(q))}" target="_blank" rel="noopener">${esc(ASSISTANTS[id].name)} ${ICONS['external-link']}</a>`).join('')}</div><p class="note">${esc(T().ask_note)}</p>`;
+  showCredits($('askmenu').hidden, 'ask');
+};
+document.addEventListener('click', e => { if (!e.target.closest('.corner')) showCredits(false); });
 const showSettings = open => { $('settings').hidden = !open; $('settings-btn').setAttribute('aria-expanded', open); };
 $('settings-btn').onclick = () => showSettings($('settings').hidden);
 document.addEventListener('click', e => { if (!$('settings').hidden && !e.target.closest('.prefs')) showSettings(false); });

package/src/build.mjs

@@ -48,7 +48,7 @@ const readUi = dir => Object.fromEntries(fs.readdirSync(dir).filter(f => f.endsW
 const UI = readUi(UI_DIR);
 // Icons come from Lucide: the shell's own, and the ones an engine asks for by name
 const ICON_DIR = path.dirname(require.resolve('lucide-static/icons/flag.svg'));
-const SHELL_ICONS = ['x', 'external-link', 'chevron-left', 'chevron-right', 'list', 'info', 'settings', 'languages'];
+const SHELL_ICONS = ['x', 'external-link', 'chevron-left', 'chevron-right', 'list', 'info', 'settings', 'languages', 'message-circle'];
 function iconSvg(name, where) {
   const file = path.join(ICON_DIR, name + '.svg');
   if (!exists(file)) fail(where, `unknown icon "${name}", pick a name from https://lucide.dev/icons`);
@@ -375,7 +375,7 @@ function buildStory(p, storyDir, site, engine) {
   // --- bundle and pages ---
   const bundle = {
     id: story.id, title: T(story.title, 'story.title'), summary, span, cover, languages: langs, defaultLanguage: defaultLang, ui, families, engine: engine.id,
-    site: { title: siteT(site.title, 'site.title'), languages: site.langs, defaultLanguage: site.defaultLang,
+    site: { title: siteT(site.title, 'site.title'), languages: site.langs, defaultLanguage: site.defaultLang, ask: site.ask ?? [],
       source: site.repository ? `${site.repository.replace(/\/$/, '')}/tree/${site.branch}/${where.split(path.sep).join('/')}` : null },
     themes: themeList(site.themes, ui, langs), defaultTheme: story.theme ?? site.theme,
     credits: eb.credits ?? [], images, icons, pages: pages.map(({ dir, include, ...p }) => p), tree: navTree(tree),

package/src/dev.mjs

@@ -12,7 +12,7 @@ const RELOAD = `<script>(()=>{let v=null;setInterval(async()=>{try{const r=await
 // Serve root/dist on the port and rebuild on changes: a change in one story's folder rebuilds that story and the main
 // page, any other change every story. Returns the http server. Builds run in a child process, so package edits apply,
 // and with --local-assets, so the images on this machine show before they are uploaded.
-// story serves that one story as a site of its own, built into out, by default dist/.
+// story serves that one story as a site of its own. Every build writes into out, by default dist/, which the server serves.
 export function dev({ root = process.cwd(), port = Number(process.env.PORT) || 8080, log = console.log, story = null, out = null, engine = null } = {}) {
   const DIST = out ? path.resolve(root, out) : path.join(root, 'dist'), CONTENT = path.join(root, 'content');
   // engine is the engine module's path, handed to each build and watched beside kitap's own source
@@ -25,7 +25,7 @@ export function dev({ root = process.cwd(), port = Number(process.env.PORT) || 8
     building = true;
     const t0 = Date.now(), wasAll = all, stories = [...changed];
     all = false; changed = new Set();
-    const scope = story ? ['--story', story, ...(out ? ['--out', out] : [])] : wasAll ? [] : stories.flatMap(s => ['--only', s]);
+    const scope = [...(story ? ['--story', story] : wasAll ? [] : stories.flatMap(s => ['--only', s])), ...(out ? ['--out', out] : [])];
     const p = spawn(process.execPath, [path.join(PKG, 'bin', 'kitap.mjs'), 'build', '--local-assets', ...(engine ? ['--engine', engine] : []), ...scope], { stdio: 'inherit', cwd: root });
     p.on('exit', code => {
       building = false;

package/src/i18n/en.yaml

@@ -28,6 +28,10 @@ search_stories: Search stories
 no_match: "No story matches “{q}”."
 map_data: Data
 other_sources: Other sources
+ask: Ask AI
+ask_title: Ask about this page
+ask_prompt: "I am reading “{title}” at {url}. Answer my questions about it from this text and the page's sources, and say when you are unsure."
+ask_note: Opens in a new tab with the page's text as the question.
 start: Start
 not_found: There is no page at this address.
 settings: Settings

package/src/i18n/tr.yaml

@@ -28,6 +28,10 @@ search_stories: Hikâye ara
 no_match: "“{q}” ile eşleşen hikâye yok."
 map_data: Veri
 other_sources: Diğer kaynaklar
+ask: Yapay zekâya sor
+ask_title: Bu sayfayı sor
+ask_prompt: "“{title}” sayfasını okuyorum: {url}. Sorularımı bu metne ve sayfanın kaynaklarına dayanarak yanıtla, emin olmadığında söyle."
+ask_note: Yeni sekmede, sayfanın metni soru olarak açılır.
 start: Başla
 not_found: Bu adreste bir sayfa yok.
 settings: Ayarlar

package/src/schema.mjs

@@ -28,6 +28,7 @@ export const Site = z.object({
   themes: Themes.optional(),
   url: z.string().url().optional(), // where the site is published, for canonical links, sitemaps and llms.txt
   repository: z.string().url().optional(), // the content repository: a Contribute link on the main page, a source link per story
+  ask: z.array(z.enum(['chatgpt', 'claude'])).default([]), // assistants a page offers to open with its text as the prompt
   branch: z.string().default('main'),
   // the object store that holds the images and the engine's objects: url serves them, bucket and endpoint take uploads
   assets: z.object({ url: z.string().url().refine(u => u.endsWith('/'), 'ends in /'), bucket: z.string().min(1), endpoint: z.string().url() }).strict().optional(),