AntikytheraMenu

The Antikythera library provides a custom graphical html element called antikythera-menu. This element serves as a container to display information cards about the current article. 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.

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

Emits

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

Value	State
0	Minimal View (just the antikythera logo + DOI)
1	Default (logo + article metadata)
2	Fullscreen View (logo, article metadata, and full information)

INFO

The viewChange value can be accessed via:

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

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

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>
	)
}