docs: add Micro.blog logo and token setup

Author: jpayne-procella

README.md

@@ -61,6 +61,16 @@ DATABASE_PATH=./data/crosspoint.db PORT=8080 node dist/index.js
 | `AUTH_RATE_LIMIT_PER_MINUTE` | `30` | Per-IP limit on registration (0 disables) |
 | `TOKEN_ENC_KEY` | _(unset)_ | Enables external-service connectors. 64 hex chars, a base64 32-byte key, or a ≥32-char passphrase. Encrypts stored connector credentials at rest; unset = connectors disabled. |
 
+### Link Micro.blog
+
+1. Sign in to [Micro.blog](https://micro.blog/).
+2. Open [Account → App tokens](https://micro.blog/account/apps).
+3. Create a separate app token for **CrossPoint Sync**.
+4. In CrossPoint Sync, open your account, choose **Micro.blog**, and paste the new token.
+
+Treat the token like a password: Micro.blog app tokens have full account access. CrossPoint Sync
+encrypts the token at rest using `TOKEN_ENC_KEY`.
+
 ## Point your reader at it
 
 - **KOReader:** Tools → Progress sync → Custom sync server → `http://your-host:8080`

assets/icons/microblog.png

@@ -225,7 +225,7 @@ const LANDING = shell(
      <div class="svc"><div class="lead"><img class="svc-icon" src="/icons/hardcover.png" alt="" width="34" height="34"><div><div class="name">Hardcover</div>
        <div class="desc">Keep your Hardcover shelf and reading progress up to date automatically.</div></div></div>
        <span class="pill warn">beta</span></div>
-     <div class="svc"><div class="lead"><img class="svc-icon" src="/icons/microblog.png" alt="" width="34" height="34" onerror="this.style.display='none'"><div><div class="name">Micro.blog</div>
+     <div class="svc"><div class="lead"><img class="svc-icon" src="/icons/microblog.png" alt="" width="34" height="34"><div><div class="name">Micro.blog</div>
        <div class="desc">Keep your Currently reading and Finished reading bookshelves up to date automatically.</div></div></div>
        <span class="pill">ready</span></div>
      <div class="svc"><div class="lead"><img class="svc-icon" src="/icons/audiobookshelf.png" alt="" width="34" height="34"><div><div class="name">Audiobookshelf</div>
@@ -529,13 +529,23 @@ async function jsend(u, m='POST', body){ const r = await fetch(u,{method:m,heade
 
 const HINTS = {
   hardcover: 'Paste your Hardcover API token from hardcover.app/account/api. Syncs your reading progress and shelf status.',
-  microblog: 'Paste your Micro.blog app token from Account → Edit Apps. Keeps your Currently reading and Finished reading bookshelves in sync.',
+  microblog: 'Connect an app token to keep your Currently reading and Finished reading bookshelves in sync.',
   readwise: 'Paste your Readwise access token from readwise.io/access_token. Syncs your highlights.',
   kosync: 'Mirror your reading progress to another KOReader-compatible (KOSync) server, so your other devices see it too.',
   bookfusion: 'Connect your BookFusion account to sync reading progress. You will approve the request on bookfusion.com.',
   audiobookshelf: 'Sync your reading position to the matching audiobook on your Audiobookshelf server. Create an API key in Audiobookshelf under Settings, Users, API Keys.'
 };
 
+const TOKEN_HELP = {
+  microblog: '<div class="muted" style="margin-bottom:18px"><p style="margin-top:0"><b>Get a Micro.blog app token:</b></p>'
+    + '<ol style="padding-left:20px;margin-bottom:10px">'
+    + '<li>Sign in to Micro.blog in another tab.</li>'
+    + '<li>Open <a href="https://micro.blog/account/apps" target="_blank" rel="noopener noreferrer">Account → App tokens</a>.</li>'
+    + '<li>Create a separate token for <b>CrossPoint Sync</b>.</li>'
+    + '<li>Copy the new token and paste it below.</li>'
+    + '</ol><p style="margin-bottom:0">Treat this token like a password: it has full access to your Micro.blog account. CrossPoint Sync encrypts it before storing it.</p></div>'
+};
+
 (async () => {
   const { ok, status, data } = await jget('/api/v1/connectors');
   if (status === 409) { location.href = '/account'; return; }   // no sync account yet
@@ -553,7 +563,7 @@ function done() { location.href = '/account'; }
 function render(conn) {
   const f = $('form');
   if (conn.credential_kind === 'token') {
-    f.innerHTML = '<label>API token</label><input id="tok" class="mono" placeholder="paste token">'
+    f.innerHTML = (TOKEN_HELP[ID] || '') + '<label>API token</label><input id="tok" class="mono" placeholder="paste token">'
       + '<button class="primary full mt" id="go">Link ' + esc(conn.name) + '</button><div class="err" id="e"></div>';
     $('go').onclick = async () => {
       $('e').textContent = '';

src/routes/web.ts

@@ -9,7 +9,13 @@ describe('Micro.blog web setup', () => {
     expect(html).toContain('Micro.blog');
     expect(html).toContain('Currently reading');
     expect(html).toContain('Finished reading');
-    expect(html).toContain('onerror="this.style.display=\'none\'"');
+
+    const icon = await app.request('/icons/microblog.png');
+    expect(icon.status).toBe(200);
+    expect(icon.headers.get('content-type')).toBe('image/png');
+    expect([...new Uint8Array(await icon.arrayBuffer()).slice(0, 8)]).toEqual([
+      0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a,
+    ]);
   });
 
   it('renders where to create the pasted app token', async () => {
@@ -47,7 +53,13 @@ describe('Micro.blog web setup', () => {
     await new Promise((resolve) => setTimeout(resolve, 0));
 
     expect(getElement('desc').textContent).toBe(
-      'Paste your Micro.blog app token from Account → Edit Apps. Keeps your Currently reading and Finished reading bookshelves in sync.',
+      'Connect an app token to keep your Currently reading and Finished reading bookshelves in sync.',
     );
+    expect(getElement('form').innerHTML).toContain('Sign in to Micro.blog');
+    expect(getElement('form').innerHTML).toContain('https://micro.blog/account/apps');
+    expect(getElement('form').innerHTML).toContain('Account → App tokens');
+    expect(getElement('form').innerHTML).toContain('CrossPoint Sync');
+    expect(getElement('form').innerHTML).toContain('Copy the new token and paste it below');
+    expect(getElement('form').innerHTML).toContain('full access to your Micro.blog account');
   });
 });