AntikytheraMenu

The Antikythera library provides a graphical custom element named <antikythera-menu>. It renders a compact article sticker and expands into a fullscreen reading companion. Entry metadata loads first; full content is fetched when expansion or annotation interaction needs it. Matching .annotation elements are then connected to floating cards. Text-scan annotations may also be inserted automatically from the Sanity scan phrases.

In v2 the fullscreen view was reworked into snap-scrolled pages containing the entry details (abstract, editorial, non-glossary annotations, bibliography, credits), a PDF preview card with PDF and Markdown download buttons for the current entry, a Related Articles section, and an About page sourced from the journal document. Related article cards can show PDF previews and downloads on large screens, but never Markdown export buttons. In v2.1 these pages are content-driven: empty entry and related pages are omitted, so About becomes the first and only snap page when it is the only available content.

INFO

Please contact Antikythera to get the correct slug for your article and its corresponding annotation ids. Alternatively annotation ids can also be queried by using the Antikythera object directly which is explained in the next page.

Props

The <antikythera-menu /> element can be customized via several props (attributes):

Name	Type	Required	Usage	Default
entry	String	false	Entry slug; required for article-specific metadata, content, and annotations.	undefined
theme	String	false	Define menu theme. Options include dark and light.	dark
environment	String	false	Define the environment. Options include production and staging.	production
api-url	String	false	Runtime API host override (valid http/https origin).	baked-in host
api-background-color	String	false	Override the API background color (CMS value takes effect otherwise).	undefined
api-foreground-color	String	false	Override the API foreground color (CMS value takes effect otherwise).	undefined

INFO

The element also observes a few attributes (activeannotation, inactiveannotation, forceopen) that are managed internally by the Antikythera class for annotation coordination. You normally don't need to set these yourself.

Emits

The <antikythera-menu /> element emits a viewChange event whenever it changes view state. The states are:

Value	State
0	Minimal View (compact sticker; on desktop, at most one floating annotation card)
1	Summary View (sticker with title, authors, DOI, release date, and the More Info CTA; desktop annotation cards when enabled)
2	Fullscreen View (expanded overlay with entry details, downloads, Related Articles, and About pages; Return to Article collapses the view)

INFO

The viewChange value can be accessed via:

<antikythera-menu @viewChange="<YOURFUNCTION>" />

const <YOURFUNCTION> = (value) => {
	console.log(value)
}

Annotations

On desktop, annotation cards are gated behind an "Annotations by …" attribution toggle rendered next to the sticker. Clicking an in-article annotation reveals and enables the toggle automatically, so readers who interact with annotations always see them. Floating (viewport-triggered) and inline (expanded view) annotations share the same presentation.

Annotations whose Sanity Type is Glossary Term are press-only: scrolling a highlighted glossary phrase does not add it to the automatic annotation stack. Pressing the phrase opens a single dismissible card below the sticker, including a desktop Close control.

The annotation rich-text editor supports Divider, regular URL marks, and typed Annotation Link references. Pressing an annotation link replaces the source card in its current slot. The existing card leave/enter transition handles the replacement, and linked annotations are fetched by their Sanity document reference when they were not part of the entry's initial annotation list, so links can continue recursively.

The annotation lifecycle is designed for client-side pagination. A document observer queues rescans after page swaps, adopts existing highlight elements without wrapping their text again, and rebinds interaction after DOM moves. Multiple connected highlights may share one annotation ID; a card remains active while any matching highlight is visible. Glossary cards never auto-open or auto-dismiss on scroll, while regular cards keep scroll entry/exit behavior with a short dismissal grace window.

Custom fonts

Uploaded Sanity fonts arrive on the full entry payload as fonts and fontFaceCss. When the menu fetches that response, the library installs or updates one document-level stylesheet. This is required because @font-face declarations inside a custom element's shadow root do not register fonts for the document. The host article template can then apply entry-wide and block-level font-family slugs from the API payload.

Debug shortcuts

While the menu is mounted in the Vite development environment, two keyboard shortcuts help with visual debugging. They are disabled in production builds:

Key	Action
i	Invert the theme colors
g	Toggle a 12-column layout grid overlay

Shortcuts are ignored while typing in inputs, textareas, or editable elements.

Setting up

WARNING

Some frameworks (e.g. Nuxt) require additional setup to work with custom html elements. Please explicitly add 'antikythera-menu' to the list of allowed custom elements in the config file. If you experience issues in other frameworks please consult how custom html elements should be handled for the specific framework used.

e.g. nuxt.config.ts

Details

export default defineNuxtConfig({
	vue: { compilerOptions: { isCustomElement: (tag: any) => tag === 'antikythera-menu' } }
})

Vue/Nuxt

Details

<template>
	<main>
		<nav>
			<antikythera-menu entry="example-entry" />
		</nav>
		<article>
			<p>
				Lorem ipsum dolor sit amet consectetur. Mi quis ut frla tincidunt rhoncus molestie.
				Lorem ipsum dolor sit amet consectetur. Mi quis ut fringilla proin varius nibh elit.
				<span id="example-annotation" class="annotation">Velit</span> lorem nulla tincidunt
				rhoncus placerat sed gravida neque. Arcu id vel eget nec est nec fermentum luctus.
				<span id="second-annotation" class="annotation">aenean</span> Ipsum tellus Ipsum
				tellus Ipsum tellus
			</p>
		</article>
	</main>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { AntikytheraMenu, Antikythera } from '@antikythera/antikythera'
import '@antikythera/antikythera/fonts'

const antikythera = ref(null)

onMounted(async () => {
	antikythera.value = new Antikythera({ entry: 'example-entry' })
})
</script>

React/Nextjs

Details

import { useEffect } from 'react'
import { AntikytheraMenu, Antikythera } from '@antikythera/antikythera'
import '@antikythera/antikythera/fonts'

export default function Home() {
	let antikythera

	useEffect(() => {
		if (!antikythera) {
			antikythera = new Antikythera({ entry: 'example-entry' })
		}
	}, [])

	return (
		<div>
			<main>
				<nav>
					<antikythera-menu entry="example-entry" />
				</nav>
				<article>
					<p>
						Lorem ipsum dolor sit amet consectetur. Mi quis ut frla tincidunt rhoncus
						molestie. Lorem ipsum dolor sit amet consectetur. Mi quis ut fringilla proin
						varius nibh elit.
						<span id="example-annotation" class="annotation">
							Velit
						</span>{' '}
						lorem nulla tincidunt rhoncus placerat sed gravida neque. Arcu id vel eget
						nec est nec fermentum luctus.
						<span id="second-annotation" class="annotation">
							aenean
						</span>{' '}
						Ipsum tellus Ipsum tellus Ipsum tellus
					</p>
				</article>
			</main>
		</div>
	)
}