webmemex.js 🔗

webmemex.js is a script you can add to a website to create a sidebar with the incoming and outgoing links on a page.

Screenshot of webmemex.js in use on jamesg.blog

How it works

webmemex.js is a script you can add to a website. WebMemex allows you to use two HTML components on your website:

You can use one or both of these components on the same page.

Setup

Installation

First, add the webmemex.js script to your website. You can find the script in the GitHub repository.

Add the script below the closing body tag.

<script src="webmemex.js"></script>

Incoming Links

To add the incoming links component to your website, add the following HTML to your website:

<incoming-links data-api-url="https://webmention.io/api/mentions.jf2?target="></incoming-links>

You will need to specify an API URL for a WebMemex server. See instructions in the "Set Up a Server" section for more information.

Outgoing Links

To add the outgoing links component to your website, add the following HTML to your website:

<outgoing-links data-api-url="https://localhost:5000/outgoing_links"></outgoing-links>

You will need to specify an API URL for a WebMemex server. See instructions in the "Set Up a Server" section for more information.

Set Up a WebMemex Server

webmemex.js makes an API call to a compatible server that returns metadata about provided outgoing links, or information about incoming links. A hosted version at the following URL is the default:

A hosted version of this server is available for testing at:

https://jamesg.blog/lp/incoming_links

We strongly recommend setting up a WebMemex server on your own infrastructure.

To do so, download the project GitHub repository and install the server:

git clone https://github.com/capjamesg/webmemex.js.git
cd webmemex.js
pip install -r requirements.txt

Then, you can run the server:

python3 app.py

The server opens two API endpoint to which you can make requests:

API Reference

Incoming Links

The url parameter is the URL of the page for which you want to retrieve incoming links.

Here is an example of a request to the API endpoint:

GET https://localhost:5000/incoming_links?url=
https://capjamesg.github.io/webmemex.js/

The server returns a JSON response with information about incoming links:


[
    {
        "authors": [
        {
            "name": "",
            "photo": "https://github.githubassets.com/favicons/favicon.png",
            "url": "https://github.com"
        }
        ],
        "description": "Display cards for all of the outgoing links on a web page. - GitHub - capjamesg/webmemex.js: Display cards for all of the outgoing links on a web page.",
        "name": "GitHub - capjamesg/webmemex.js: Display cards for all of the outgoing links on a web page.",
        "photo": "https://opengraph.githubassets.com/29d030c09f4d5fae227230ac71988cbb4cc38a2f074d6879996a4553d365e90f/capjamesg/webmemex.js",
        "post_html": "Search code, repositories, users, issues, pull requests...",
        "post_text": "Search code, repositories, users, issues, pull requests...",
        "video": "",
        "webmention_endpoint": ""
    }
    ...
]

Outgoing Links

The urls parameter is a comma-separated list of URLs to which you want to get metadata.

Here is an example of a request to the API endpoint:

GET https://localhost:5000/outgoing_links?urls=https://github.com/capjamesg/webmemex.js

The server returns a JSON response with metadata about the provided URLs:


[
    {
        "authors": [
        {
            "name": "",
            "photo": "https://github.githubassets.com/favicons/favicon.png",
            "url": "https://github.com"
        }
        ],
        "description": "Display cards for all of the outgoing links on a web page. - GitHub - capjamesg/webmemex.js: Display cards for all of the outgoing links on a web page.",
        "name": "GitHub - capjamesg/webmemex.js: Display cards for all of the outgoing links on a web page.",
        "photo": "https://opengraph.githubassets.com/29d030c09f4d5fae227230ac71988cbb4cc38a2f074d6879996a4553d365e90f/capjamesg/webmemex.js",
        "post_html": "Search code, repositories, users, issues, pull requests...",
        "post_text": "Search code, repositories, users, issues, pull requests...",
        "video": "",
        "webmention_endpoint": ""
    }
    ...
]

To configure the URL of the API endpoint, add the data-api-url attribute to the link-aside component:

<link-aside data-api-url="https://localhost:5000/outgoing_links"></link-aside>
Google