> For the complete documentation index, see [llms.txt](https://comic-git.gitbook.io/documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://comic-git.gitbook.io/documentation/expert-editing/webring.md). # Webring Do you remember [webrings](https://fanlore.org/wiki/Webring)? It seemed like every Geocities page had one, back in the day. If you want that same kind of shared navigation between comics, comic\_git supports it. A comic\_git webring is driven by a JSON file that lists all the comics in the ring. Each comic\_git site fetches that same JSON file, figures out where its own comic is in the list, and then renders either: * Previous / Home / Next navigation * a full list of all webring members

## How it works Setting up your webring in comic\_git is really simple, and only requires two steps. ### Upload webring.json {% hint style="info" %} If someone else already created the webring JSON file, and you only need to connect your own comic\_git site to it, you can skip ahead to [updating your comic\_info.ini](#update-your-comic_infoini). {% endhint %} Upload a `webring.json` file to somewhere out on the publicly accessible internet. It could be Dropbox link, a file on another website, or even hosted from your own comic\_git site. But it should be an absolute URL, meaning it should start with `https://`. This gives not only you but every website on that webring access to the same webring data. The format for this file is in the [JSON File](#json-file) section below. ### Update your comic\_info.ini Update your `comic_info.ini` file per the [Config Options](#config-options) section below. ## JSON File The JSON file contains the information needed for each site on the webring to build its own webring layout, all using the same data. Its structure matters, so follow the schema below. Also, all URLs in the JSON file should be absolute URLs, meaning they should start with `https://`. ### Top-level fields

version

* Required * Value: `number`: `1`

label

* Optional * Value: `string` * Default: empty string The heading shown above the webring on the site.

home

* Optional * Value: `dictionary` * Default: none If defined, a link to the webring homepage will appear in the webring layout. This uses the same structure as the [Comic dictionary](#comic-dictionary) below, except that it does not need an `id`.

members

* Required * Value: `list` of dictionaries A list of all comics in the webring. Each item must match the [Comic dictionary](#comic-dictionary) schema below. The order of this list defines the Previous and Next links for each comic. The list wraps around, so the first and last members connect to each other.

### Comic dictionary

id

* Required * Value: `string` A unique ID for the comic. This is the value comic\_git uses to identify your comic inside the webring member list. This value is **not** required for the `home` entry.

name

* Optional * Value: `string` * Default: empty string The name of the comic as displayed on the website. If an `image` is defined, the image may be shown instead of the text name.

url

* Required * Value: `string`: absolute URL The homepage URL for the comic.

image

* Optional * Value: `string`: absolute URL of an image file * Default: none If defined, the image is displayed as a link to the comic.

### Example Payload ```json { "version": 1, "label": "Our Comics Webring!", "home": { "name": "Home", "url": "https://my.webring.com/", "image": "https://my.webring.com/icon.png" }, "members": [ { "id": "comic_a", "name": "Albert's Atrium", "url": "https://comic.albert.net/", "image": "https://comic.albert.net/icon.png" }, { "id": "comic_b", "name": "Bertrand's Barn", "url": "https://bertrand.github.io/my_barn", "image": "https://bertrand.github.io/my_barn/your_content/images/webring.jpg" }, { "id": "comic_c", "name": "Clara's Cliffside", "url": "https://clara-is-cool.neocities.org/", "image": "https://images.ctfassets.net/hrltx12pl8hq/7JnR6tVVwDyUM8Cbci3GtJ/bf74366cff2ba271471725d0b0ef418c/shutterstock_376532611-og.jpg" } ] } ``` ## Config Options

Enable webring

* Optional * Value: `boolean`: `True` or `False` * Default: `False` If `True`, enables the webring feature. If `False`, all other options in this section are ignored.

Endpoint

* Required if `Enable webring` is `True` * Value: `string` The location of the webring JSON data. In normal use, this should be an absolute URL to a remotely hosted `webring.json` file, such as: ``` https://my.webring.com/webring.json ``` For local development, see [Local Development](#local-development).

Webring ID

* Required if `Enable webring` is `True` * Value: `string` A unique ID for your comic, matching the `id` field of your comic's entry in the webring JSON. comic\_git uses this value to: * determine your Previous and Next neighbors in the webring * identify your own comic when `Exclude own comic from members = True`

Show all members

* Optional * Value: `boolean`: `True` or `False` * Default: `False` If `True`, the webring displays all members at once instead of rendering Previous and Next links.

Exclude own comic from members

* Optional * Value: `boolean`: `True` or `False` * Default: `False` If `True`, your own comic will be removed from the member list shown when `Show all members = True`. This relies on `Webring ID`, so make sure your `Webring ID` exactly matches your member entry's `id`.

### Example ```ini [Webring] Enable webring = True Endpoint = https://my.webring.com/webring.json Webring ID = comic_b Show all members = True Exclude own comic from members = True ``` ## Local Development If you want to test a webring locally before you have a real hosted endpoint ready, comic\_git supports a special local-development mode. Set: ```ini [Webring] Endpoint = local ``` When `Endpoint = local`, comic\_git reads this file directly from your host repo at: ``` your_content/webring.json ``` This mode exists only to make local development easier. Even in local mode, the `url` and `image` values inside `webring.json` should still be absolute URLs. ## Customizing the look with CSS If you want to change how your webring looks without changing its HTML layout, you can target the CSS classes used by the default `webring.tpl` template. The webring uses one of two layouts: * a Previous / Home / Next layout * a full members list layout when `Show all members = True` The HTML structure looks like this: ``` nav.webring ├── h2.webring-header (only if `label` is defined) │ ├── when `Show all members = True` │ ├── div.webring-members │ │ └── div.webring-member (one per member) │ │ └── a.webring-link │ │ └── img.webring-img │ │ │ └── if `home` is defined │ ├── div.webring-home │ │ └── a.webring-link │ │ └── img.webring-img │ └── div.webring-label │ └── a.webring-link │ └── when `Show all members = False` └── div.webring-links ├── div.webring-prev │ └── a.webring-link │ └── img.webring-img ├── div.webring-home (if `home` is defined) │ └── a.webring-link │ └── img.webring-img ├── div.webring-next │ └── a.webring-link │ └── img.webring-img ├── div.webring-label │ └── a.webring-link ("Previous") ├── div.webring-label (for `home`, if defined) │ └── a.webring-link └── div.webring-label └── a.webring-link ("Next") ``` {% hint style="info" %} The default template also inserts a plain blank `

` in the Previous / Home / Next layout when `home` is not defined, so the spacing still works. That blank element does not have a CSS class. {% endhint %} ### CSS classes used by the default webring | CSS class | Purpose | | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------- | | `.webring` | The outer `