page-read-check

Mit der Komponente PageReadCheck kann der Bearbeitungs- und Lesezustand einer Seite als "gelesen" oder "ungelesen" markiert werden.

import PageReadCheck from '@tdev/page-read-check/PageReadCheck';

<PageReadCheck id="2cf38080-4b13-4b0f-a589-94e78cce585c" />

http://localhost:3000

0:00

0:10

Mit Mindestlesezeit

Über die minReadTime kann eine Mindestlesezeit vorgegeben werden, bevor die Seite als "gelesen" markiert werden kann. Der Timer startet und stoppt automatisch, wenn die Seite sichtbar bzw. unsichtbar wird. Der Standardwert beträgt 10 Sekunden.

<PageReadCheck minReadTime={15} />

http://localhost:3000

0:00

0:10

Lesezeit nach Freischaltung fortsetzen

Standardmässig wird die Lesezeit nicht weiter gezählt, wenn die Seite freigeschaltet wurde. Mit der Option continueAfterUnlock kann dieses Verhalten geändert werden, sodass die Lesezeit auch nach Freischaltung weiter gezählt wird.

<PageReadCheck continueAfterUnlock id="4a84e4a2-dee6-4575-bcd3-9682af03a17d" />

http://localhost:3000

0:00

0:10

Anpassung der Texte

Die angezeigten Texte und Tooltipps können angepasst werden:

<PageReadCheck
    text={(unlocked, doc) => {
        if (unlocked || doc.canUnlock) {
            return `Gelesen ${doc.fReadTime}`;
        }
        return `Noch ${doc.meta.minReadTime - doc.readTime}s übrig`;
    }}
    disabledReason={(doc) => `Erst ${doc.fReadTime} bearbeitet, das ist zu wenig!`}
/>

http://localhost:3000

Noch 10s übrig

0:10

Installation

packages/tdev/page-read-check

Kopiere des packages/tdev/page-read-check-Verzeichnis in das tdev-website/website/packages-Verzeichnis oder über updateTdev.config.yaml hinzufügen.

Hinzufügen des page-read-check-Package zu den apiDocumentProviders im siteConfig.ts:

siteConfig.ts

const getSiteConfig: SiteConfigProvider = () => {
    return {
        apiDocumentProviders: [
            require.resolve('@tdev/page-read-check/register'),
        ]
    };
};

Falls nicht die standardoptionen des PageIndexPluginDefaultOptions verwendet werden, muss zusätzlich die remark-Plugin-Konfiguration angepasst werden, damit die neuen Dokumente im Seitenindex erfasst werden:

siteConfig.ts

import pageIndexPlugin from './packages/tdev/page-index/plugin';

const getSiteConfig: SiteConfigProvider = () => ({
    remarkPlugins: [
        [
            pageIndexPlugin,
            {
                // ...
                components: [
                    {
                        name: 'PageReadCheck',
                        docTypeExtractor: () => 'page_read_check'
                    }
                ]
            }
        ]
    ]
});

Danach muss erneut installiert werden:

yarn install