SWPanel

For the website team

The SWPanel reader, for any Markdown manual

The same Markdown file stored by the Knowledge Library becomes a page on the website with the SWPanel reader: an index that follows your reading, text size to suit you, rating and “I've read the manual”. Without touching the manual.

See a sample manual Download the kit
<!-- En la cabecera de la página --> <link rel="stylesheet" href="kit-manuales/swpanel-manual.css"> <script src="kit-manuales/swpanel-manual.js"></script> <!-- El Markdown del manual, tal cual sale de SWPanel --> <script type="text/markdown" data-swm data-tema="FTP y archivos" data-tag="FTP" data-backhref="../comunidad/index.html" data-askhref="../ayuda-y-manuales/index.html"> # Gestionar las cuentas FTP de tu Hosting en SWPanel ### Qué es el FTP, cómo crear y administrar cuentas FTP… ... </script> <script>SWManual.auto();</script>

The three examples

Real manuals, rendered from their Markdown

Three SWPanel 2027 manuals, untouched. On the community page they appear in bold and underlined.

Create a MySQL or MariaDB database in SWPanel and get your application to connect to it

Manual 32 · Databases · 29 min

Open in the reader

Manage your Hosting's FTP accounts in SWPanel: what FTP is, creating accounts and connecting with FileZilla

Manual 555 · FTP and files · 12 min

Open in the reader

Set up a Hosting email account in Outlook

Manual 214 · Email · 20 min

Open in the reader

How it integrates

Three ways, the same result

Choose depending on where the manual lives: inside the page, in a separate file or rendered on the server so search engines can read it.

  1. Include the reader

    One stylesheet and one script, with no dependencies. Everything hangs from the .swm class, so it doesn't clash with the website's styles.

    <!-- En la cabecera de la página --> <link rel="stylesheet" href="kit-manuales/swpanel-manual.css"> <script src="kit-manuales/swpanel-manual.js"></script>

  2. Paste the Markdown as is

    Inside a text/markdown block, with the topic and links in attributes. SWManual.auto() renders all the manuals on the page.

    <!-- El Markdown del manual, tal cual sale de SWPanel --> <script type="text/markdown" data-swm data-tema="FTP y archivos" data-tag="FTP" data-backhref="../comunidad/index.html" data-askhref="../ayuda-y-manuales/index.html"> # Gestionar las cuentas FTP de tu Hosting en SWPanel ### Qué es el FTP, cómo crear y administrar cuentas FTP… ... </script> <script>SWManual.auto();</script>

  3. Or render it from your code

    With the Markdown the server returns, and deciding where each “View manual” leads.

    // O desde tu propio código, con el Markdown que te devuelva el servidor fetch('manuales/M555.md').then(r => r.text()).then(md => { const r = SWManual.renderPage(md, { tema: 'FTP y archivos', backHref: '../comunidad/index.html', resolveManual: id => 'manual.asp?id=' + id // enlaces «Ver manual» del Markdown }); document.getElementById('lector').innerHTML = r.html; SWManual.mount(document.getElementById('lector')); });

  4. And on the server, for Google

    The same file works in Node: generate the reader's HTML and serve it already rendered. That's how this website's sample pages are built.

    // En el servidor (Node), para servir el HTML ya pintado y que Google lo lea const SWManual = require('./kit-manuales/swpanel-manual.js'); const r = SWManual.renderPage(markdown, { tema: 'Bases de datos', minutes: 29 }); // r.html: el lector entero · r.title, r.subtitle, r.minutes, r.toc: para la ficha y el SEO

What it understands

SWPanel's Markdown, with its conventions

Besides standard Markdown, the reader knows the conventions of the Library manuals.

SWPanel Markdown conventions and how they render
## <a id="indice"></a>Índice SWPanel's anchors in headings: the index and internal links keep working.
> **Importante - …** Labeled quotes are rendered as notices: Important and Careful in amber, Note and Before you start in blue, Tip in violet and Best practice in green.
<a href="javascript:top.ver_manual('ID')"> Links to other manuals become website links, with their book icon.
Reader options and what each one is for
tema · tag The manual's topic and the label shown above the title and in the top bar.
minutes Reading minutes. If not specified, they are calculated from the manual's word count.
updated Update date shown next to the reading time.
backHref · closeHref Where “Back”, the cross and “I've read the manual, close” lead.
askHref The link of “Was something missing? Ask the AI”.
resolveManual(id) Converts SWPanel Markdown links (javascript:top.ver_manual('ID')) into a website address.
resolveNumber(n) With autolinkManuals, it converts “manual 47” in the text into a link.
imageBase Prefix for images with a relative path. Those from static.swpanel.com stay as they are.
onRate · onDone Callbacks when someone rates the manual or marks it as read, to store it wherever you want.

The kit

Everything you need, in one folder

The reader files, a sample page and the three original manuals.

  • JS

    swpanel-manual.js

    The reader: Markdown to HTML and the behavior. No dependencies.

    In preparation
  • CSS

    swpanel-manual.css

    The reader's styles, all under .swm.

    In preparation
  • HTML

    ejemplo.html

    A page that renders a manual in the browser.

    In preparation
  • MD

    README.md

    How to integrate it, step by step.

    In preparation
  • MD

    M32-crear-base-de-datos-mysql-mariadb.md

    Original Markdown of manual 32.

    In preparation
  • MD

    M555-cuentas-ftp-hosting.md

    Original Markdown of manual 555.

    In preparation
  • MD

    M214-outlook-correo-hosting.md

    Original Markdown of manual 214.

    In preparation
  • ZIP

    kit-lector-manuales.zip

    All of the above in a single file.

    In preparation

The whole library, open

SWPanel manuals and videos, with search and by topic, without logging in to the panel.

Start for free Open the library