E2H E2H: "Etherpad Hypermedia"

Auto-generates and restyles open-editable websites,
by transforming Etherpad text pads to HTML format.
by @dcht00 (david@middlemachine.com) from the CHT hackbase

With:
https://translatewiki.net/images/thumb/6/6f/Etherpad_lite.svg/200px-Etherpad_lite.svg.png Etherpad   https://php.net/images/logos/php-med-trans.png PHP  https://seeklogo.com/images/C/css-logo-36E0A08420-seeklogo.com.gif CSS

Last updates:
    2014-10-xx first version, hacked @ TechInc, Amsterdam
    2015-10-30 readying for release
    2016-01-29 added CSS support
    2016-10-07 feature additions
    2017-04-19 more feature additions







Basics

Generates websites from Etherpad pads!

Examples:
    * This site!
    * https://totalism.org/
    * 🔗season4
    * 🔗manual
    * 🔗alike
    * [...]


E2H->HTML websites Etherpad documents->E2H Etherpad documents->using basic styles (Bold, Italic, Underline,...) Etherpad documents->using extended syntax E2H E2H HTML websites HTML websites Etherpad documents Etherpad documents using basic styles (Bold, Italic, Underline,...) using basic styles (Bold, Italic, Underline,...) using extended syntax using extended syntax


Features:
    * insert images
    * simple internal and cross-instance links
    * hyperlinks-on-text
    * auto-generated table of contents
    * pad-editable or static CSS styling (themes)
    * page footer with "Edit pad" and "Edit CSS" buttons
    * powerful text-to-graph capability
    * transclusion (inclusion of pages by reference) and partial transclusion
    * support for pods:
        * for simple addressing of content on other Etherpad/Mediawiki instances
        * seamless mirroring of currently-inaccessible content
    * SSL support
    * [...]






Works with...

    Your own Etherpad instance

Contact me if you need any help setting this up for your small site, project or organisation.

If you want your own deployment, see 🔗E2H#Deployment.
Source code by default is Peer-Production License.

You can use the current hosted deployment freely, after I whitelist your Etherpad instance (see below).


    Existing Etherpad instances

All modern Etherpad-lite instances, like:
    * https://pad.totalism.org/
    * http://piratepad.be/
    * http://piratenpad.de
    * http://board.net (example)
    * [...]

Old Etherpad instances:
    * Mozpad:
        https://festival.etherpad.mozilla.org/-kylTRteukS ->
        https://festival.etherpad.mozilla.org/ep/pad/export/-kylTRteukS/latest?format=html
    * Titanpad works:
        https://titanpad.com/3SOIzaVeOi ->
        https://titanpad.com/ep/pad/export/3SOIzaVeOi/latest?format=html
    * http://pads.ccc.de/
    * [...]

If you are having problems using it with any specific pad, or need to whitelist a server, contact me.





Usage

    Pad syntax

To style the text, just use Etherpad styles:
    Bold, Italic, Underline.

Edit this pad (button on bottom!) to see usage examples for most of these.


:
    * Insert images:
        like "[img:http://LINK|WIDTH]" <-- width like "50%" or "300px"

    * Links-on-text:
        like "text_label"
    
    * Insert automatic TOC:
        like "[TOC]"
        bold+underline text to create a heading
        drop increments of 4 spaces for subheadings
        helps a lot with content organisation!
    
    * Internal links ("intralinks"):
        example: "🔗E2H" (for pad of same name)

    * Cross-instance links ("cross-links"):
        like "[:pod:padname]"
        example: "Wikipedia🔗Ted_Nelson"
    
    * Query for pictures from folder:
        like "[pics:part_of_filename]"
        (example on 🔗trucko page)
    
    * Include google "My maps":
        * like "[gmap:google_mid|label]"
        * get:
            * rendered link with .kmz and .gpx exports
            * automatic offline backups
        * see on 🔗maps (top list)
        * [...]

    * Include content via Date:
        as "[date:YYYY-MM-DD]" and then "[date++]"
        This auto-includes related content (images, ...) from the archives, under a subheading.
        Useful for logs.
    
    * [extra:visible|hovered]:
        for explanations on text, like this
    
    * [TRANSCLUDE:url] and [TRANSCLUDEX::padname:query_part]

    * [style:padname]:
        nab style from another pad!
        (actually, includes "padname-css" into stylesheet)
    
    * [...] <----------------- (new)



Arbitrary small syntax (might get more power in the future):
    * "    * ":
        a bullet (unordered list, or a "set")
    * "    > ":
        an option (either-or list, or a "set of options")
    * "[...]":
        add more bullets here!
    * "???" or "(?)":
        needs more clarification
    * "(new)":
        place in pad to add new content, to be sorted later
    * [...]




    Page rendering (optional parameters)

Basic:
    * &STYLE to include CSS styling
    * &BTN to include 'Edit pad' button at the bottom
    * &BTNCSS to include "Edit CSS" buton
    * &css=[XXX] specify one of the built-in themes (found in E2H folder as css-XXX.css)
    * &customcss=[path to .css file] specify own .css theme. See Theming below.

Extra:
    * &noAnchors to disable autoinserting anchors on underline+bold text
    * &noTOC to disable TOC, even if inserted into page
    * &DEBUG to enable DEBUG mode

Unsure??:
    * &CSSPAD ... Don't think it works atm? Check...

___  ___  ___  ___  ___  ___  ___  

Future:
    * specify content license
    * "Edit pad" button position: top/bottom/side
    * enable navigation in header (by specifying link to pad with a list of items)



    New features

(Some of these are documented in more details internally).

:
    * PIWIK open source analytics support:
        see https://piwik.org

    * transclusion:
        * any foreign page
        * full inner page, or page on any pod
        * partial transclusion (by section)

    * set page style (CSS) via pad:
        * CSSPAD works now
        * "_=XXX" master override
        * example: http://localhost/CHT/E2H/e2h.php?_=cht5-frags&CSSPAD=hyperphoto

    * draw network graphs by Etherpad:
        using the "[graph]" directive, parsed via own intermediate language, to Graphviz
        (see 🔗graph-beer for a simple example)

    * Linkroute:
        discovers and routes to content on local machine, physically accessible resources (external drives), and from other trusted nodes (in a distributed / P2P DNS way)

    * specific instance configuration:
        " __CONFIG_LOCAL" file

    * local network autoconfiguration:
        useful for deployments on laptops as etherpad+E2H servers, retaining functioning links

    * Offline regular backups:
        uses E2T + cronjobs + DISTRO + git gui.
        Stores: .txt and .html versions.



EXPERIMENTAL:
    * hypothes.is annotation support:
        * either via URL:
            add "&hypo" OR "&hypo&stick" (to continue browsing site in annotation mode)
        * or by adding to any pad (to make annotation there by default):
            "[HYPOTHESIS]".

    * [...] <----------------------- (new)




    Theming

Custom theme via .css file:
    "&customcss=http://e2h.middlemachine.com/E2H/css.css"
    Use the above .css file as the base for your theme.
    If you want to just mess with the colors a bit, it's best to find+replace current colors (which are used several times inside the .css).

Custom theme via pad file:
    "&CSSPAD=padname"

Default style if not specified:
    https://pad.totalism.org/p/CSS-default
    (or equivalent in your install)






https://i.giphy.com/XNwL6zRSv8fxm.gif

Deployment

    #1: Use my proxy [Simplest!]

Use the "https://totalism.org/e2h.php" E2H proxy.
Please contact me in this case, so I can whitelist your service.


        For Etherpad-Lite instances

Examples:
    * https://totalism.org/e2h.php?link=pad.totalism.org/p/E2H&STYLE&BTN&noTOC&CSSPAD
    * https://totalism.org/e2h.php?link=pad.totalism.org/p/web&STYLE&BTN&noTOC
    * https://totalism.org/e2h.php?link=piratepad.be/p/hbf-bxl-2014&STYLE&BTN
    * https://totalism.org/e2h.php?link=lite4.framapad.org/p/Alps_Hackathon_camp_2014&STYLE&css=whitey

Link:
    https://totalism.org/e2h.php?link=PAD
    'link' = link to the Etherpad-lite pad url, only part after "http://"


        For old Etherpad instances (Mozpad, TitanPad, ...)

Examples:
    * https://totalism.org/e2h.php?link=teams.piratenpad.de&pad=D7Krh5QPiy&NONLITE&STYLE
    * https://totalism.org/e2h.php?link=titanpad.com&pad=3SOIzaVeOi&STYLE&BTN&NONLITE&CSSPAD=E2H
    * https://totalism.org/e2h.php?link=festival.etherpad.mozilla.org&pad=-kylTRteukS&STYLE&BTN&NONLITE :
        (mozilla etherpad down 2017-09-14)

Link:
    https://totalism.org/e2h.php?link=DOMAIN&pad=NAME&NONLITE
    ------------------------
    link = domain only
    pad = pad name
    Add "&NONLITE" parameter.




    #2: Self-hosted

Contact me if you're interested in the source code.

View source of this page, it should be clear how to use it.

Setup:
    * copy the .html source (this page)
    * host the e2h.php
    * change the 'link' to point to your Etherpad (in HEAD, near '#transclude')
    * you're done

Optional:
    * Copy + customize the .css files





Future development / Todos

See 🔗E2H-todo !

Directions:
    * hypertheory, see 🔗text and 🔗hyperreader
    * Ted Nelson's view of the web, see Wikipedia🔗Project_Xanadu
    * also see 🔗workflow, for developments to cover the CHT Hackbase's case
    * [...]




Support the development

See 🔗donate, or hire me to help you set this up.




Notes

The Etherpad logos by Marcel Klehr are licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.


JavaScript license information


(Site generated by E2H, an "Etherpad hypermedia" project by @dcht00). Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.


Edit Site

Edit CSS