Scrolling to a Specific Element Using CETEIcean and XPath

Overview This is a memo on how to scroll to a specific element using CETEIcean and XPath. Demo You can try it at the following URL. https://next-ceteicean-router.vercel.app/xpath/ After accessing the page and scrolling, it is displayed as follows. Obtaining the XPath The above example targets the XML file from the “Koui Genji Monogatari Text DB.” https://kouigenjimonogatari.github.io/tei/01.xml The following XPath is specified. /TEI/text[1]/body[1]/p[1]/seg[267] To obtain this XPath, you can right-click on the target element in Oxygen XML Editor and select “Copy XPath.” ...

March 27, 2025 · 4 min · Nakamura

A Sample App Displaying Images with Mirador and Text with CETEIcean

Overview I created a sample app that loads TEI/XML files, displays images with Mirador, and displays text with CETEIcean. You can try it from the following URL. Demo Site https://nakamura196.github.io/ceteicean-mirador/ Background I have previously developed applications that provide similar functionality. Implementation example using Next.js Implementation example using XSLT This time, I introduce an approach using only HTML and plain JavaScript. Target Data The target is the following Koui Genji Monogatari Text DB. ...

March 14, 2025 · 7 min · Nakamura

Developing a Viewer with Next.js + CETEIcean + React TEI Router

Overview This is a memo on developing a TEI/XML viewer combining Next.js, CETEIcean, and React TEI Router. Background CETEIcean is a JavaScript library that converts TEI/XML to HTML5. https://github.com/TEIC/CETEIcean React TEI Router is a library that enables structured display of TEI/XML using React components, based on CETEIcean. It is described as follows: https://github.com/pfefferniels/react-teirouter TEI for React using CETEIcean and routes By combining these, I created a viewer that can customize and display TEI/XML in Next.js. ...

March 2, 2025 · 11 min · Nakamura

I Created a Sample Repository Using CETEIcean and Nuxt 3

Overview I created a sample repository using CETEIcean and Nuxt 3. https://github.com/TEIC/CETEIcean I referenced the following issue. https://github.com/TEIC/CETEIcean/issues/27 The script introduced there did not work with CETEIcean v1.8.0, so I created a minimal repository that works with CETEIcean v1.8.0 and Nuxt 3. Demo Page https://nakamura196.github.io/ceteicean-nuxt3 Source Code https://github.com/nakamura196/ceteicean-nuxt3 Main File https://github.com/nakamura196/ceteicean-nuxt3/blob/main/app.vue Summary I hope this serves as a useful reference. I would also like to express my gratitude to those who developed CETEIcean. ...

July 27, 2023 · 1 min · Nakamura

Trying Out Gatsby CETEIcean

Overview I tried out Gatsby CETEIcean, created by Raffaele Viglianti. https://github.com/raffazizzi/gatsby-ceteicean-workshop Prototype Site The following is the prototype site. I have added several customizations, including MUI, vertical text display, and links to RDF data. https://nakamura196.github.io/gatsby-ceteicean-workshop/ The TEI/XML files from the “Koui Genji Monogatari Text DB” are used as the data source. https://kouigenjimonogatari.github.io/ Source Code The source code including the customizations can be found at the following link. https://github.com/nakamura196/gatsby-ceteicean-workshop Summary Using Gatsby CETEIcean, it seems possible to efficiently develop publishing environments for TEI/XML files. ...

December 20, 2022 · 1 min · Nakamura