Antikythera Docs

Appearance

Introduction ​

Welcome to the docs of the Antikythera library: a library that connects your frontend application to Anytikythera's content and annotation system. The library is composed out of two distinct objects Antikythera and AntikytheraMenu and can be used together or in isolation depending on your needs.

Antikythera forms the connection of the antikythera backend (database and assets) and your frontend application in the form of a queryable object (API).

AntikytheraMenu is a custom html element acting as a container that instantiates prestyled Antikythera annotation cards. This element is meant to interact with your website in a specific predefined way (more on this in the next page).

Access to the Antikythera library is limited and managed by a private npm package. As a consequence the library is much more suited to a node-js environment (e.g. vue, react, svelte, solid, etc.) as opposed to working with a plain index.html file.

Installation ​

The Antikythera Library is available via @antikythera’s private npm registry.

In order to install the package, you must request an npm Access Token. Once your Access Token has been properly configured, you can install the package via:

bash
npm i @antikythera/antikythera@latest

Access Token Configuration ​

Local Config ​

To install this package locally, you must first add an .npmrc file to your project root. Your file must specify the registry and Access Token scope:

bash
@antikythera:registry=https://registry.npmjs.org/
//registry.npmjs.org/:_authToken=<ACCESS_TOKEN>

WARNING

Please make sure your .npmrc file is included in your .gitignore file as it will contain sensitive data.

Deployment Config ​

To make sure your package is installed on deployment, you must add an NPM_TOKEN environmental variable:

md
NPM_TOKEN=<ACCESS_TOKEN>

Setting up ​

WARNING

The Antikythera object is a client-only web component. This means that it should be instantiated on the client side of your application.

Framework Recommendation

The Antikythera Component + API have been most extensively tested with React or Vue.

In your frontend code you can instantiate and access the Antikythera objects like this:

Vue/Nuxt

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

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

React/Next

Details
jsx
import { Antikythera, AntikytheraMenu } from '@antikythera/antikythera'
import '@antikythera/antikythera/fonts'

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

Eleventy

Details
html
<!DOCTYPE html>
<html lang="en">
	<body>
		<script>
			// We need to Polyfill process (since we are not in a node-js environment)
			window.process = { env: { NODE_ENV: 'production' } }
		</script>
		<script type="module">
			import { Antikythera, AntikytheraMenu } from './js/antikythera.js'

			document.addEventListener('DOMContentLoaded', async () => {
				const antikythera = new Antikythera({ entry: 'example-entry' })
				window.article = await antikythera.getEntry('example-entry')
				document.getElementById('article-title').textContent = window.article?.entry?.title
				document.getElementById('article-content').innerHTML =
					window.article?.entry?.content
			})
		</script>
		<div>
			<antikythera-menu entry="example-entry"></antikythera-menu>
			<aside>
				<h1 id="article-title">ARTICLE TITLE</h1>
				<div id="article-content">CONTENT</div>
			</aside>
		</div>
	</body>
</html>

WARNING

After running 'npm install' manually copy the antikythera.js file into the ./src/js folder. The antikythera.js file is located at ./node_modules/@antikythera/antikythera/antikythera.js.

Additionally, copy the fonts directory, alongside the /css/fonts.css into your app. Make sure to register the typefaces in your eleventy.js configuration file:

module.exports = function (eleventyConfig) {
	eleventyConfig.addPassthroughCopy("src/fonts/ESAllianz-Bold.woff");
	eleventyConfig.addPassthroughCopy("src/fonts/ESAllianz-Bold.woff2");

	eleventyConfig.addPassthroughCopy("src/fonts/ESAllianz-BoldItalic.woff");
	eleventyConfig.addPassthroughCopy("src/fonts/ESAllianz-BoldItalic.woff2");

	eleventyConfig.addPassthroughCopy("src/fonts/ESAllianz-Book.woff");
	eleventyConfig.addPassthroughCopy("src/fonts/ESAllianz-Book.woff2");

	eleventyConfig.addPassthroughCopy("src/fonts/ESAllianz-BookItalic.woff");
	eleventyConfig.addPassthroughCopy("src/fonts/ESAllianz-BookItalic.woff2");
}

Vanilla JS/HTML

Details
html
<!DOCTYPE html>
<html lang="en">
	<head>
		<link rel="stylesheet" href="./node_modules/@antikythera/antikythera/dist/css/fonts.css" />
	</head>
	<script>
		// We need to polyfill process (since we are not in a node-js environment)
		window.process = { env: { NODE_ENV: 'production' } }
	</script>
	<script type="module">
		import { Antikythera } from './node_modules/@antikythera/antikythera/dist/antikythera.js'

		document.addEventListener('DOMContentLoaded', async () => {
			const antikythera = new Antikythera({
				entry: 'example-entry'
			})
			window.article = await antikythera.getEntry({ textStyle: 'html' })
			document.getElementById('article-title').textContent = window.article?.entry?.title
			document.getElementById('article-content').innerHTML = window.article?.entry?.content

			// We call this manually since article content is fetched
			// In the case where the article content is local this is not necessary (see docs for more info)
			await antikythera.detectAnnotations()
		})
	</script>
	<body>
		<h1>Antikythera integration in a Vanilla JS project</h1>
		<div>
			<antikythera-menu entry="example-entry"></antikythera-menu>
			<aside>
				<h1 id="article-title">ARTICLE TITLE</h1>
				<div id="article-content">CONTENT</div>
			</aside>
		</div>
	</body>
</html>

Svelte, Gatsby, Solidjs

tk. (2025)