Earthworm Series Navigator

Link to article: Earthworm Series Navigator.

.earthworm {
  --earthworm-segment-border-color: rgba(150,150,150,0.5);
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: stretch;
  margin: 1em 0;
  clear: both;
  min-height: 36px;
}
.earthworm a {
  word-break: normal;
}
.earthworm__previous, .earthworm__hub, .earthworm__next {
  display: flex;
  align-items: center;
}
.earthworm p {
  margin: 0 0.8em;
  text-align: center;
}
.earthworm__previous, .earthworm__next {
  border-top: 2px solid var(--earthworm-segment-border-color);
  border-bottom: 2px solid var(--earthworm-segment-border-color);
  position: relative;
}
.earthworm__hub {
  margin: -3px 0;
  border: 3px solid var(--earthworm-segment-border-color);
  background: linear-gradient(10deg, rgba(150,150,150,0.1), rgba(150,150,150,0));
  position: relative;
}
.earthworm__arrowhead {
  width: auto;
  height: calc(100% + 2px);
  top: -2.5px;
  display: block;
  position: absolute;
  border-style: solid;
  border-color: var(--earthworm-segment-border-color);
}
.earthworm__arrowhead--left {
  left: 0;
  transform: scale(0.707) rotate(-45deg);
  border-width: 2.8px 0 0 2.8px;
  transform-origin: 0% 100%;
  clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
}
.earthworm__arrowhead--right {
  right: 0;
  transform: scale(0.707) rotate(45deg);
  border-width: 2.8px 2.8px 0 0;
  transform-origin: 100% 100%;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
}

/* Hide segments that have url=/ AND (title= OR title=/) */
.earthworm__previous:has(a[href="/"]):is([data-title="\{\$previous-title\}"], [data-title="/"]),
.earthworm__next:has(a[href="/"]):is([data-title="\{\$next-title\}"], [data-title="/"]),
.earthworm__hub:is([data-title="\{\$next-title\}"], [data-title="/"]) a[href="/"] {
  display: none;
}

/* Style href=/ links to look like plain text */
.earthworm a[href="/"] {
  color: #333;
  text-decoration: none;
  cursor: text;
  pointer-events: none;
}

/* Backwards compatibility: support old syntax */
.earthworm--old-syntax-first-true .earthworm__previous,
.earthworm--old-syntax-last-true .earthworm__next,
.earthworm--old-syntax-hub-no .earthworm__hub a {
  display: none;
}

.croqstyle__documentation :is(h1, h2) {
  font-family: Inter, sans-serif;
  font-weight: bold;
}
.croqstyle__documentation h1 ~ h1 { margin-top: 6rem }
.croqstyle__documentation h1 ~ h2 { margin-top: 3rem }

.croqstyle__documentation #toc,
.croqstyle__description {
  border: thin solid #ddd;
  padding: 1em;
  background-color: transparent;
}

/* Don't show it on this page to stop people clicking on the broken links */
.earthworm { display: none }

(none)

:scp-wiki:component:croqstyle [info]

```
earthworm
```
```
earthworm--old-syntax-first-{$first}
```
```
earthworm--old-syntax-last-{$last}
```
```
earthworm--old-syntax-hub-{$hub}
```
```
{$class}
```
```
first
```
```
earthworm__previous
```
```
inner
```
```
earthworm__inner
```
```
image
```
```
earthworm__arrowhead
```
```
earthworm__arrowhead--left
```
```
arrow
```
```
earthworm__arrow
```
```
hub
```
```
earthworm__hub
```
```
last
```
```
earthworm__next
```
```
inner
```
```
earthworm__inner
```
```
image
```
```
earthworm__arrowhead
```
```
earthworm__arrowhead--right
```
```
arrow
```
```
earthworm__arrow
```
```
croqstyle__description
```
```
croqstyle__documentation
```
```
code
```
```
terminal
```
```
croqstyle__description
```
```
code
```
```
terminal
```
```
code
```
```
terminal
```
```
code
```
```
terminal
```

[[div class="earthworm earthworm--old-syntax-first-{$first} earthworm--old-syntax-last-{$last} earthworm--old-syntax-hub-{$hub} {$class}"]]
[[div class="first earthworm__previous" data-title="{$previous-title}"]]
  [[div class="inner earthworm__inner"]]
    [[image https://scp-wiki.wdfiles.com/local--files/component%3Aearthworm/Transparent.gif class="image earthworm__arrowhead earthworm__arrowhead--left"]]

    [[div class="arrow earthworm__arrow"]]
    [[/div]]

  [[/div]]

  [[[{$previous-url} | {$previous-title}]]]
[[/div]]
[[div class="hub earthworm__hub" data-title="{$hub-title}"]]
  [[[{$hub-url} | {$hub-title}]]]
[[/div]]
[[div class="last earthworm__next" data-title="{$next-title}"]]
  [[div class="inner earthworm__inner"]]
    [[image https://scp-wiki.wdfiles.com/local--files/component%3Aearthworm/Transparent.gif class="image earthworm__arrowhead earthworm__arrowhead--right"]]

    [[div class="arrow earthworm__arrow"]]
    [[/div]]

  [[/div]]

  [[[{$next-url} | {$next-title}]]]
[[/div]]
[[/div]]

[[module CSS]]
.earthworm {
  --earthworm-segment-border-color: rgba(150,150,150,0.5);
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: stretch;
  margin: 1em 0;
  clear: both;
  min-height: 36px;
}
.earthworm a {
  word-break: normal;
}
.earthworm__previous, .earthworm__hub, .earthworm__next {
  display: flex;
  align-items: center;
}
.earthworm p {
  margin: 0 0.8em;
  text-align: center;
}
.earthworm__previous, .earthworm__next {
  border-top: 2px solid var(--earthworm-segment-border-color);
  border-bottom: 2px solid var(--earthworm-segment-border-color);
  position: relative;
}
.earthworm__hub {
  margin: -3px 0;
  border: 3px solid var(--earthworm-segment-border-color);
  background: linear-gradient(10deg, rgba(150,150,150,0.1), rgba(150,150,150,0));
  position: relative;
}
.earthworm__arrowhead {
  width: auto;
  height: calc(100% + 2px);
  top: -2.5px;
  display: block;
  position: absolute;
  border-style: solid;
  border-color: var(--earthworm-segment-border-color);
}
.earthworm__arrowhead--left {
  left: 0;
  transform: scale(0.707) rotate(-45deg);
  border-width: 2.8px 0 0 2.8px;
  transform-origin: 0% 100%;
  clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
}
.earthworm__arrowhead--right {
  right: 0;
  transform: scale(0.707) rotate(45deg);
  border-width: 2.8px 2.8px 0 0;
  transform-origin: 100% 100%;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
}

/* Hide segments that have url=/ AND (title= OR title=/) */
.earthworm__previous:has(a[href="/"]):is([data-title="\{\$previous-title\}"], [data-title="/"]),
.earthworm__next:has(a[href="/"]):is([data-title="\{\$next-title\}"], [data-title="/"]),
.earthworm__hub:is([data-title="\{\$next-title\}"], [data-title="/"]) a[href="/"] {
  display: none;
}

/* Style href=/ links to look like plain text */
.earthworm a[href="/"] {
  color: #333;
  text-decoration: none;
  cursor: text;
  pointer-events: none;
}

/* Backwards compatibility: support old syntax */
.earthworm--old-syntax-first-true .earthworm__previous,
.earthworm--old-syntax-last-true .earthworm__next,
.earthworm--old-syntax-hub-no .earthworm__hub a {
  display: none;
}
[[/module]]

[[iftags +component]]

[[include :scp-wiki:component:croqstyle -=- ]]
[[module css]]
.croqstyle__documentation :is(h1, h2) {
  font-family: Inter, sans-serif;
  font-weight: bold;
}
.croqstyle__documentation h1 ~ h1 { margin-top: 6rem }
.croqstyle__documentation h1 ~ h2 { margin-top: 3rem }

.croqstyle__documentation #toc,
.croqstyle__description {
  border: thin solid #ddd;
  padding: 1em;
  background-color: transparent;
}

/* Don't show it on this page to stop people clicking on the broken links */
.earthworm { display: none }
[[/module]]

[[div class="croqstyle__description"]]
Earthworm Series Navigator is a decent-looking navigator for any series of articles, originally created by [[*user Croquembouche]] for the 2018 Doomsday contest.

It looks like this:

[[=image https://scp-wiki.wikidot.com/local--files/component:earthworm/ZVOFu08.webp]]

Don't like worms? Check out the [[[component:advanced-navigation-toolbar|ANT Series Navigator]]]!
[[/div]]

[[div class="croqstyle__documentation"]]
+ Usage

On any wiki:

[[div class="code terminal"]]
##var(--c-keyword)|[[####var(--c-operator)|include## ##var(--c-value)|:scp-wiki:component:earthworm##
##var(--c-keyword)||## ##var(--c-builtin)|previous-url## ##var(--c-keyword)|=## ##var(--c-symbol)|URL_OF_PREVIOUS##
##var(--c-keyword)||## ##var(--c-builtin)|previous-title## ##var(--c-keyword)|=## ##var(--c-string)|Title of previous page##
##var(--c-keyword)||## ##var(--c-builtin)|next-url## ##var(--c-keyword)|=## ##var(--c-symbol)|URL_OF_NEXT##
##var(--c-keyword)||## ##var(--c-builtin)|next-title## ##var(--c-keyword)|=## ##var(--c-string)|Title of text page##
##var(--c-keyword)||## ##var(--c-builtin)|hub-url## ##var(--c-keyword)|=## ##var(--c-symbol)|URL_OF_HUB##
##var(--c-keyword)||## ##var(--c-builtin)|hub-title## ##var(--c-keyword)|=## ##var(--c-string)|Title of hub page##
##var(--c-keyword)|]]##
[[/div]]

You should have up to 3 articles that you need to link to:
# The previous article in the series.
# The next article in the series.
# The hub page for the series.

(If you need more, e.g. splitting into 2 branches, [[[component:advanced-navigation-toolbar | ANT Series Navigator]]] might have you covered.)

For these examples, let's pretend you are adding Earthworm to SCP-002. Your previous page is SCP-001, then next page is SCP-003, and the hub page is SCP Series 1.

++ Previous page

**If there is a previous page:**

Replace {{URL_OF_PREVIOUS}} with the URL for the previous page in the series. You can use the full URL, {{@@https://scp-wiki.wikidot.com/scp-001@@}}, or just the slug, {{scp-001}}.

Replace {{Title of previous page}} with the title of the previous page.

**If there isn't (i.e. this is the first page in the series):**

Disable the previous page link by setting its URL to {{/}} //(i.e. {{previous-url=/}})//. The title will show as plain text. If you don't want any text, omit the {{previous-title}} field or leave it empty.

++ Next page

**If there is a next article:**

Replace {{URL_OF_NEXT}} with the URL for the next page in the series. You can use the full URL, {{@@https://scp-wiki.wikidot.com/scp-003@@}}, or just the slug, {{scp-003}}.

Replace {{Title of next page}} with the title of the next page.

**If there isn't (i.e. this is the last page in the series):**

Disable the next page link by setting its URL to {{/}} //(i.e. {{next-url=/}})//. The title will show as plain text (e.g. "Coming soon..."). If you don't want any text, omit the {{next-title}} field or leave it empty.

++ Hub page

**If there is a hub page:**

Replace {{URL_OF_HUB}} with the URL for the hub of the series. You can use the full URL, {{@@https://scp-wiki.wikidot.com/scp-series-1@@}}, or just the slug, {{scp-series-1}}.

Replace {{Title of hub page}} with the title of the hub page.

**If there isn't a hub page:**

Disable the hub page link by setting its URL to {{/}} //(i.e. {{hub-url=/}})//. The title will show as plain text. If you don't want any text, set the title to {{/}} as well, but the little box in the middle of the earthworm will still appear.

[[div class="croqstyle__description"]]
+ Examples

++ Page in the middle of a series

[[=image earthworm-example-middle.png]]

[[div class="code terminal"]]
##var(--c-keyword)|[[####var(--c-operator)|include## ##var(--c-value)|:scp-wiki:component:earthworm##
##var(--c-keyword)||## ##var(--c-builtin)|previous-url####var(--c-keyword)| = ####var(--c-symbol)|scp-001##
##var(--c-keyword)||## ##var(--c-builtin)|previous-title####var(--c-keyword)| = ####var(--c-string)|SCP-001##
##var(--c-keyword)||## ##var(--c-builtin)|next-url####var(--c-keyword)| = ####var(--c-symbol)|scp-003##
##var(--c-keyword)||## ##var(--c-builtin)|next-title####var(--c-keyword)| = ####var(--c-string)|SCP-003##
##var(--c-keyword)||## ##var(--c-builtin)|hub-url####var(--c-keyword)| = ####var(--c-symbol)|scp-series-1##
##var(--c-keyword)||## ##var(--c-builtin)|hub-title####var(--c-keyword)| = ####var(--c-string)|SCP Series 1##
##var(--c-keyword)|]]##
[[/div]]

++ Page at the start of a series

[[=image earthworm-example-start.png]]

[[div class="code terminal"]]
##var(--c-keyword)|[[####var(--c-operator)|include## ##var(--c-value)|:scp-wiki:component:earthworm##
##var(--c-keyword)||## ##var(--c-builtin)|previous-url####var(--c-keyword)| = ####var(--c-symbol)|/##
##var(--c-keyword)||## ##var(--c-builtin)|next-url####var(--c-keyword)| = ####var(--c-symbol)|introductory-antimemetics##
##var(--c-keyword)||## ##var(--c-builtin)|next-title####var(--c-keyword)| = ####var(--c-string)|Introductory Antimemetics##
##var(--c-keyword)||## ##var(--c-builtin)|hub-url####var(--c-keyword)| = ####var(--c-symbol)|antimemetics-division-hub##
##var(--c-keyword)||## ##var(--c-builtin)|hub-title####var(--c-keyword)| = ####var(--c-string)|Antimemetics Division##
##var(--c-keyword)|]]##
[[/div]]

++ Page at the end of a series, with a teaser for more

[[=image earthworm-example-end-teaser.png]]

[[div class="code terminal"]]
##var(--c-keyword)|[[####var(--c-operator)|include## ##var(--c-value)|:scp-wiki:component:earthworm##
##var(--c-keyword)||## ##var(--c-builtin)|previous-url####var(--c-keyword)| = ####var(--c-symbol)|a-gullet-made-of-the-flesh-of-a-swan##
##var(--c-keyword)||## ##var(--c-builtin)|previous-title####var(--c-keyword)| = ####var(--c-string)|A Gullet, Made of the Flesh of a Swan##
##var(--c-keyword)||## ##var(--c-builtin)|next-url####var(--c-keyword)| = ####var(--c-symbol)|/##
##var(--c-keyword)||## ##var(--c-builtin)|next-title####var(--c-keyword)| = ####var(--c-string)|Coming soon...##
##var(--c-keyword)||## ##var(--c-builtin)|hub-url####var(--c-keyword)| = ####var(--c-symbol)|end-of-death-hub#lookout-281##
##var(--c-keyword)||## ##var(--c-builtin)|hub-title####var(--c-keyword)| = ####var(--c-string)|LOOKOUT 281##
##var(--c-keyword)|]]##
[[/div]]
[[/div]]
[[/div]]

[[/iftags]]

Earthworm Series Navigator

Module Styles

Inline Styles

Includes

CSS Classes

Page Source