openvibers/openvibe.blog Commits

Blog: an empty AI desk draws the kit's empty state (#261)

OP OpenVibers committed 3 days ago · e2a1c9231f · 3 files, +11 −2

A desk with no post yet said so in a bare sentence with no way forward.
It now uses the shared kit's empty state and its button, See the other
desks; the desk page loads kit.css. test/desks.test.js checks the empty
desk and its button.

Changes

ddiff --git a/server/desks/render.js b/server/desks/render.js
iindex 2614998..62019d6 100644
---- a/server/desks/render.js
++++ b/server/desks/render.js
@@@ -4,6 +4,7 @@
   * AI-written and not reviewed by a person; the satire desk says, above the text, that it is made up.
   */
  const ssr = require('openvibe-publishing/ssr');
++const kit = require('openvibe-shared/kit');
  const catalog = require('./catalog');
  const { periodLabel } = require('./desks');
  
@@@ -48,7 +49,7 @@ ${p.dek ? h`<p class="summary">${p.dek}</p>` : ''}
  <header class="blog-header"><h1>${desk.title}</h1><p class="lede">${desk.about}</p>
  <p class="feeds">${every(desk)} · Follow: <a href="/desks/${desk.key}/feed.xml" type="application/rss+xml">RSS</a> <a href="/desks/${desk.key}/atom.xml" type="application/atom+xml">Atom</a></p></header>
  ${desk.satire ? satireBanner() : h`<p class="disclosure" role="note"><strong>Written by AI.</strong> ${AI_NOTE}</p>`}
--<section aria-label="Posts">${posts.length ? h`<ol class="post-list">${posts.map(item)}</ol>` : h`<p class="empty">Nothing written here yet. The first post appears after the desk's first ${desk.every === 'week' ? 'week' : 'day'} of items.</p>`}</section>
++<section aria-label="Posts">${posts.length ? h`<ol class="post-list">${posts.map(item)}</ol>` : raw(kit.empty({ icon: 'book', title: 'Nothing written yet', text: `The first post appears after the desk's first ${desk.every === 'week' ? 'week' : 'day'} of items.`, action: { href: '/desks', label: 'See the other desks', icon: 'grid' } }))}</section>
  ${raw(ssr.paginationHtml(pager))}
  ${staff ? h`<p class="meta">Staff see hidden posts here too.</p>` : ''}`);
  }
ddiff --git a/server/desks/routes.js b/server/desks/routes.js
iindex c1e608a..ef3fc28 100644
---- a/server/desks/routes.js
++++ b/server/desks/routes.js
@@@ -103,7 +103,7 @@ function createDeskRoutes(ctx) {
          send(req, res, 200, {
              title: desk.title, description: desk.about, canonical: abs(pager.page === 1 ? path : `${path}?page=${pager.page}`),
              feeds: feedsOf(desk), prev: pager.prev ? pager.prev.href : null, next: pager.next ? pager.next.href : null,
--            body: render.deskPage({ desk, posts, pager, staff }),
++            body: render.deskPage({ desk, posts, pager, staff }), styles: ['kit.css'],
          }, { cacheable: !staff });
      }));
  
ddiff --git a/test/desks.test.js b/test/desks.test.js
iindex 8a891fa..5ef390c 100644
---- a/test/desks.test.js
++++ b/test/desks.test.js
@@@ -102,6 +102,14 @@ function stub(handler) {
      let news;
      let satire;
  
++    await check('a desk with no post draws the kit empty state and one button', async () => {
++        const r = await t.get('/desks/news');
++        assert.strictEqual(r.status, 200);
++        assert.match(r.text, /class="ovk-empty"/, 'the kit empty state is used, not a bare sentence');
++        assert.match(r.text, /Nothing written yet/);
++        assert.match(r.text, /class="ovk-btn[^"]*" href="\/desks"/, 'the empty state offers one button forward');
++    });
++
      await check('a tick pulls, then writes the news, food and satire posts; a desk below its minimum writes nothing', async () => {
          assert.ok(desks.enabled);
          const r = await desks.tick();