Comments (2)
Hello @kibin-app thanks for your question! I think the Server Side Rendering comment you quoted is somewhat misleading because in order to define the Custom Elements, window
needs to be available (see define()). However, that process only needs to happen on the client side.
In order to implement SSR, it's helpful to think of CETEIcean as performing three main tasks:
- transforming the TEI source data into
tei-
prefixed elements with the addition of some helpfuldata-
attributes to avoid data loss. This is handled by makeHTML5() - register the transformed elements as Custom Elements, handled by define()
- apply behaviors
The last two tasks need to happen in the client and will require window
. But the first task can be done server side. The example XSLT included in the repository, for example, takes care of that. In short, you would have to implement that code on your own.
There is an example of this in the wild: I adapted CETEIcean code to work with Gatsby specifically to take advantage of SSR, but also for being able to use React components instead of behaviors. You can find the code and some docs at https://github.com/raffazizzi/gatsby-transformer-ceteicean . It performs the required transformation step I mentioned above and allows users to queue further transformations if they need them. Feel free to open issues there if you have questions about that code.
This transformer has a companion Gatsby "theme" that performs the other two steps on the client: register the Custom Elements and route React components to handle behaviors. The code is here: https://github.com/raffazizzi/gatsby-theme-ceteicean
I hope this helps!
from ceteicean.
Thank you for the swift reply and the example! That does help a lot indeed. I'll debate with myself if it's worth the extra mile or just leave it on the client side.
from ceteicean.
Related Issues (20)
- How to debug HOT 1
- Strange behaviour when attribute is missing HOT 4
- Further clean-up of the CETEIcean.css HOT 2
- Endnotes no longer work! HOT 1
- Tables are broken!
- Modularize the `note` behavior
- Add option to mute URL fragment parsing HOT 3
- Problem with behaviours HOT 3
- Use CETEIcean to extract and transform only a subelement of a TEI document HOT 3
- CETEIcean does not follow <xi:include/> entries HOT 2
- Manipulating CETEIcean output elements with JS document.querySelector('tei-p[attribute='value]') HOT 1
- alternate behaviors based on attribute values - example? HOT 1
- Declaring character entities with CETEIcean? HOT 3
- Update spanish tutorial
- Babel seems to 'trip' over double semi-colon HOT 2
- Behavior-functions are not triggered HOT 3
- pb behaviors not triggered
- Leading space before URL attribute causes .rw() method to assume an empty URL HOT 2
- confusing line in tutorial HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ceteicean.