Enzyklopädie

This is a short rewrite of Wolfgang’s post on Embedding TEI Publisher Components in Hugo . For WordPress you can do the same thing very easily. I used the example of Wolfgang’s post; just make sure that your site is whitelisted.

Just install the Code Embed Plugin and create a custom field ¹ with the name „CODEpbembed“ and the value:

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.4.3/webcomponents-loader.js"></script><script type="module" src="https://unpkg.com/@teipublisher/pb-components@latest/dist/pb-components-bundle.js"></script>

Then add another custom field with the name „CODEpbkant“ and the value:

<pb-page endpoint="https://teipublisher.com/exist/apps/tei-publisher" emit="kant" class="embedded"><pb-document id="kant" path="test/kant_rvernunft_1781.TEI-P5.xml" odd="dta"></pb-document><pb-navigation direction="forward" keyboard="right" emit="kant" subscribe="kant"><paper-fab icon="icons:chevron-right"></paper-fab></pb-navigation><pb-navigation direction="backward" keyboard="left" emit="kant" subscribe="kant"><paper-fab icon="icons:chevron-left"></paper-fab></pb-navigation><pb-view src="kant" xpath="//teiHeader/fileDesc/titleStmt/title" emit="kant" subscribe="kant"><pb-param name="header" value="short"></pb-param></pb-view><pb-view class="transcription" src="kant" view="page" emit="kant" subscribe="kant" append-footnotes="" animation=""></pb-view></pb-page>

We add a third custom field with some CSS:

pb-page {
    position: relative;
    padding-top: 10px;
    border-top: 1px solid #e0e0e0;
}

.embedded pb-navigation {
    position: absolute;
    top: 45%;
}

.embedded pb-navigation[direction="forward"] {
    right: 0;
}

.nav {
    height: 40px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}
pb-view {
    margin-left: auto;
    margin-right: auto;
}
.transcription {
    overflow: auto;
    display: flex;
    justify-content: center;
    height: 400px;
}
pb-navigation[direction="forward"] {
    float: right;
}

Use the Custom Field like this (without the whitespace between the brackets):

{ {CODECss}}
{ {CODEpbembed}}
{ {CODEpbkant}}