Antikythera Docs

Appearance

FAQ / Antikythera Support ​

Please find a composite of overarching questions regarding the development of Antikythera articles.

Do you have any server requirements or stack requirements for the article website? ​

Antikythera articles are deployed via Netlify and prioritize JavaScript frameworks. Existing integrations cover React/Next.js, Vue/Nuxt, Eleventy, and vanilla JavaScript. If you need another framework, check whether it supports browser custom elements and client-only initialization, then contact Antikythera for integration guidance.

INFO

Please note that the Antikythera API layer is instantiated on the client side. Netlify supports static sites, SPAs, and SSR apps.

How do we store/share the code for the site (and connect it to the hosting provider)? ​

We use Netlify for deployment. Netlify supports GitHub (our preference), GitLab, and Bitbucket for automatic deployment.

How can we access the antikythera API and query its database for content? ​

The client library is the private @antikythera/antikythera npm package. The browser client calls the Nitro read API at https://api.antikythera.org by default; approved local or preview integrations can override the API origin with apiUrl / api-url.

Where does the black overlay box come from? ​

The black sticker and overlay are rendered by the <antikythera-menu> custom element from @antikythera/antikythera. Once initialized with the article slug, it loads metadata first and fetches the full entry when expansion or annotation interaction requires it.

INFO

The theme of the Menu Component can be customized (dark and light are currently available).

How is SEO configured? ​

SEO meta tag and Open Graph tag configuration is the responsibility of the team building the article’s site. The API is client-side, tag configuration should avoid sourcing content directly from the API.

Does the API add the annotation highlighting or does the developer add the highlight? ​

For scan-enabled annotations, the client finds matching phrases and wraps the configured keyword with an annotation element. It also supports manually authored .annotation elements. The default class gets injected highlight CSS unless customCss: true; use the init() options to provide another class.

Are the annotations fetched each time? And how will the annotations be updated after the article is released? ​

Annotations are added by the Antikythera team via their Admin panel. Annotations can be added upon and after article release. The Antikythera API has two methods for adding annotations:

  1. Recommended: enable scan text in Sanity. The client asynchronously matches configured phrases, wraps the keyword, and observes later DOM changes. This lets Antikythera add annotations after release and supports client-side paginated articles without requiring a redeploy.
  2. Manually wrap a phrase in an element with class .annotation and the annotation ID. The client adopts existing highlights and rebinds them after DOM moves; this is useful when layout or wording requires exact author control.

Glossary annotations are click-only. Regular commentary/related cards can still open and close from viewport entry/exit.

Do we want designers to have their own staging website or using antikythera’s hosting? ​

Designers can use their own staging site for development. However, the article’s production site will be hosted on Antikythera’s Netlify account.

Don't see your question here? ​

Please don't hesitate to reach out to our team to seek clarification.