- ghost-progress-plugin Vorschau
- Scrolle und sieh zu, wie sich der Balken oben von 0% auf 100% füllt. Ändere Optionen im linken Panel, der Einbettungscode aktualisiert sich mit.
-
- Einführung
- ghost-progress-plugin ist ein winziger, abhängigkeitsfreier Lesefortschrittsbalken für Ghost. Es begann als Widget für Ghost, funktioniert aber auch in Notion-basierten Blogs und überall, wo du ein Skript einbinden kannst. Beim Lesen füllt sich ein dünner Balken und zeigt, wie weit du im Artikel bist. Diese Seite ist ein Live-Beispiel: Der Balken oben ist das echte Widget.
-
- Installation
- Einmal mit diesem Snippet einbinden, ohne Build-Schritt und ohne Theme-Dateien zu bearbeiten:
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-progress-plugin@1/progress.css">
-<script src="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-progress-plugin@1/progress.min.js"
- data-content=".gh-content"
- data-position="top"></script>
- Code-Injection
- Füge es in Ghost unter Settings → Code injection → Site Footer ein. Auf Notion-basiertem Hosting fügst du es im Feld für eigenen Code ein: oopy hat ein head/footer-Codefeld, super.so hat einen Custom-Code-Bereich, und dort setzt du data-content auf .notion-page-content. Auf jeder anderen Seite platzierst du es direkt vor dem schließenden </body>-Tag.
- Optionen
- Alles wird über data-*-Attribute am Script-Tag konfiguriert: der Inhalts-Selektor, die Position, die Dicke und der Z-Index:
- data-content=".gh-content"
-data-position="top"
-data-height="4"
-data-z-index="100"
-
- Anpassung
- Farbe und Dicke des Balkens sind anpassbar. Jede Klasse und CSS-Variable ist unter greedylabs-ghost-progress benannt, sodass er nie mit deinem Theme kollidiert.
- Farben
- Die Füllung folgt standardmäßig der Akzentfarbe deines Ghost-Themes (--ghost-accent-color); setze data-color oder überschreibe die CSS-Variablen, um sie zu ändern. Die ungelesene Spur ist standardmäßig transparent, gib ihr also eine Farbe, damit der Balken auch bei 0% sichtbar ist:
- .greedylabs-ghost-progress {
- --greedylabs-ghost-progress-track: rgba(0,0,0,.08);
-}
-@media (prefers-color-scheme: dark) {
- .greedylabs-ghost-progress {
- --greedylabs-ghost-progress-track: rgba(255,255,255,.14);
- }
-}
- Position
- Nutze data-position für oben oder unten und data-height für die Dicke in Pixeln. Der Balken erreicht 0%, wenn der obere Rand des Artikels den oberen Rand des Viewports erreicht, und 100%, wenn sein unterer Rand den unteren erreicht.
-
- Häufige Fragen
-
- Misst es die ganze Seite oder nur den Artikel?
- Nur den Artikel, auf den data-content zeigt. Header, Beitragsbild und Footer zählen nicht zum Fortschritt.
- Warum ist der Balken oben unsichtbar?
- Bei 0% hat die Füllung keine Breite und die Spur ist standardmäßig transparent. Gib der Spur eine Farbe (siehe Farben), damit der Balken auch leer sichtbar ist.
- Funktioniert es außerhalb von Ghost?
- Ja. Überall, wo du ein Skript einbinden kannst, zeige mit data-content auf deinen Artikel-Container. Bei Notion ist das .notion-page-content.
-
- Fazit
- ghost-progress-plugin ist Open Source unter der MIT-Lizenz; Code und Issues findest du auf GitHub. Probiere die Optionen im linken Panel aus und kopiere das Snippet, wenn es passt. Wenn es dir geholfen hat, freue ich mich über einen Kaffee ☕.
-
-
-
-
-
-
-
-
-
diff --git a/demo.js b/demo.js
deleted file mode 100644
index 21709b7..0000000
--- a/demo.js
+++ /dev/null
@@ -1,172 +0,0 @@
-/* Configurator logic for the ghost-progress-plugin demo page.
- Drives the widget (loaded from ./progress.js with data-auto="false") via its
- create()/destroy() API, regenerates the embed snippet, and reports usage to
- Umami. None of this ships with the distributed widget. */
-(function () {
- // jsDelivr serves our GitHub repo; @1 tracks the latest v1.x release and is
- // auto-minified (the .min file). If jsDelivr has a hiccup, Statically mirrors
- // the same paths at cdn.statically.io/gh/GreedyLabs/ghost-progress-plugin@main.
- var CDN = 'https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-progress-plugin@1';
- var DEF = window.GreedyLabsGhostProgress.defaults;
- // per-page localized strings (set by each generated //index.html)
- var I = window.GPROG_I18N || { copy: '복사', copyDone: '복사됨' };
- var instance = null;
- var $ = function (id) { return document.getElementById(id); };
-
- // Safe Umami event tracker (no-op if the script is blocked/unloaded)
- function track(name, data) {
- try { if (window.umami && window.umami.track) { window.umami.track(name, data); } } catch (e) {}
- }
-
- // Parse an integer field, falling back to the default only when it's empty/
- // invalid, NOT when it's a legitimate 0 (a `|| DEF` would swallow zero).
- function intField(id, def) {
- var v = parseInt($(id).value, 10);
- return isNaN(v) ? def : v;
- }
-
- function read() {
- return {
- content: $('f-content').value.trim() || '.gh-content',
- position: $('f-position').value,
- height: intField('f-height', DEF.height),
- useThemeColor: $('f-useThemeColor').checked,
- color: $('f-color').value,
- zIndex: intField('f-zindex', DEF.zIndex)
- };
- }
-
- function render() {
- var o = read();
- $('f-color').disabled = o.useThemeColor;
-
- if (instance) { instance.destroy(); instance = null; }
- instance = window.GreedyLabsGhostProgress.create({
- content: '.demo-article',
- position: o.position,
- height: o.height,
- color: o.useThemeColor ? undefined : o.color,
- zIndex: o.zIndex
- });
- updateSnippet(o);
- }
-
- function esc(s) { return String(s).replace(/&/g, '&').replace(//g, '>'); }
-
- function updateSnippet(o) {
- var a = [];
- a.push('data-content="' + esc(o.content) + '"');
- a.push('data-position="' + esc(o.position) + '"');
- if (o.height !== DEF.height) { a.push('data-height="' + o.height + '"'); }
- if (!o.useThemeColor) { a.push('data-color="' + esc(o.color) + '"'); }
- if (o.zIndex !== DEF.zIndex) { a.push('data-z-index="' + o.zIndex + '"'); }
-
- var code =
- '\n' +
- '
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Feature image
-
-
- ghost-progress-plugin preview
- Scroll and watch the bar at the top fill from 0% to 100%. Change options in the left panel and the embed code updates with them.
-
- Getting started
- ghost-progress-plugin is a tiny, dependency-free reading progress bar for Ghost. It started as a Ghost widget, but it also works on Notion-based blogs, and anywhere you can add a script. As you read, a thin bar fills to show how far through the article you are. This page is a live example: the bar at the top is the real widget.
-
- Installation
- Add it once with this snippet, no build step, no theme files to edit:
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-progress-plugin@1/progress.css">
-<script src="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-progress-plugin@1/progress.min.js"
- data-content=".gh-content"
- data-position="top"></script>
- Code injection
- In Ghost, paste it into Settings → Code injection → Site Footer. On Notion-based hosting, add it in the custom-code field: oopy has a head/footer code box in its site settings, super.so has a Custom Code area, and there you set data-content to .notion-page-content. On any other site, put it just before the closing </body> tag.
- Options
- Everything is configured with data-* attributes on the script tag: the content selector, the position, the height, and the z-index:
- data-content=".gh-content"
-data-position="top"
-data-height="4"
-data-z-index="100"
-
- Customize
- The bar color and thickness are adjustable. Every class and CSS variable is namespaced under greedylabs-ghost-progress, so it never clashes with your theme.
- Colors
- The fill follows your Ghost theme accent (--ghost-accent-color) by default; set data-color or override the CSS variables to change it. The unread track is transparent by default, so give it a color to make the bar visible even at 0%:
- .greedylabs-ghost-progress {
- --greedylabs-ghost-progress-track: rgba(0,0,0,.08);
-}
-@media (prefers-color-scheme: dark) {
- .greedylabs-ghost-progress {
- --greedylabs-ghost-progress-track: rgba(255,255,255,.14);
- }
-}
- Position
- Use data-position for top or bottom, and data-height for the thickness in pixels. The bar reaches 0% when the article top meets the top of the viewport, and 100% when its bottom meets the bottom.
-
- FAQ
-
- Does it track the whole page or just the article?
- Just the article you point data-content at. The header, feature image, and footer do not count toward the progress.
- Why is the bar invisible at the top?
- At 0% the fill has no width and the track is transparent by default. Give the track a color (see Colors) to show the bar even when empty.
- Does it work outside Ghost?
- Yes. Anywhere you can inject a script, point data-content at your article container. For Notion that is .notion-page-content.
-
- Wrapping up
- ghost-progress-plugin is open source under the MIT license; the code and issues live on GitHub. Try the options in the left panel and copy the embed snippet when you are happy. If it helped you, a coffee is always appreciated ☕.
-
-
-
-
-
-
-
-
-