AntikytheraMenu

The Antikythera library provides a custom graphical html element called antikythera-menu. This element renders a compact sticker with information about the current article and expands into a fullscreen reading companion. By default it will always display a 'general info' card about the article with its title, authors, credits and other information. Additionally it will instantiate annotation cards whenever a matching predefined annotation id is found in span elements with an .annotation class of the visible viewport of the document. For this reason it is important that you have access to both the article entry-id and the article's annotation-ids in order to properly use the AntikytheraMenu element and all of its features.

In v2 the fullscreen view was reworked into snap-scrolled pages containing the entry details (abstract, editorial, 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.

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	true	Entry slug (provided by Antikythera)	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.

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 additonal setup to work with custom html elements. Please explicitely 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 { 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 { 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>
	)
}