Glossary Notebook add to Library

mrchristian commented 4 months ago

Jupyter Notebook requirements.

The Co-site Notebook: https://github.com/TIBHannover/semantic-glosar/blob/main/cosite001.ipynb

We need the notebook only to display Co-Site Glossary terms. So far I'm not sure if glossaries in SWB are differentiated.
Currently the output from SWB to Quarto is a table. If possible we need to change this to being HTML with divs, Header values, and classes that then Quarto will convert into Markdown. We need this so that Terms can be rendered in the outputs as different header values and appear in Table of Contents automatically as well as having the ability to apply styles with css to different outputs.

I can provide exact details of what is needed for markup and what fields we want exporting to the Notebooks.

FYI - Here you can see current Table converted to Markdown. Which works - but as mentioned we need something different. https://tibhannover.github.io/semantic-glosar/cosite001.html

mrchristian commented 4 months ago

Note: We would like to have the ability to make Notebooks for the different Glossaries - like Sandbox, IPCC, etc. The hope is by changing glossary name in a Notebook copy we can do this.

mrchristian commented 4 months ago

These are the fields needed for output per term:

Ive attached as an HTML file with idea for how to apply DIVS and css classes.

See:

<!DOCTYPE html>
<html>
  <body>
    <h1>Glossary name</h1>
    <div class="gloss-term-all">
      <div class="gloss-term">
        <h2>Begriff (no lable)</h2>
      </div>
      <div class="gloss-definition">
        <p>Beschreibung (no label)</p>
      </div>
      <div class="gloss-cl-definition">
        <div class="gloss-cl-definition-label">
          <p>label</p>
        </div>
        <p>Klartextbeschreibung (label)</p>
      </div>
      <div class="gloss-acronym">
        <div class="gloss-acronym-label">
          <p>label</p>
        </div><p>Akronym (label)</p>
      </div>
      <div class="gloss-tag">
        <div class="gloss-tag-label">
          <p>label</p>
        </div>
        <p>Tag (label)</p>
      </div>
      <div class="gloss-similar-tag">
        <div class="gloss-similar-label">
          <p>label</p>
        </div>
        <p>Ähnlich (label)</p>
      </div>
      <div class="gloss-subclass-tag">
        <div class="gloss-subclass-label">
          <p>label</p>
        </div><p>Unterklasse von (label)</p>
      </div>
      <div class="gloss-synonyme-tag">
        <div class="gloss-synonyme-label">
          <p>label</p>
        </div>
        <p>Synonyme (label)</p>
      </div>
    </div>
  </body>
</html>

I've followed a little what was used on IPCC Glossary by semanticClimate as we will want to align with them.

https://github.com/semanticClimate/glossary-demo/blob/279f5cc608b73efcc94a5ea33532603a3dc3c3be/html/index.html#L368

Note: As yet we dont know what @baillyk can output from SWB and second if the Markdown conversion would ready any CSS or does it only read the HTML markup along.

The objective in the end is to be able to have Terms marked as H2, or H3 so terms can be listed in ToCs. And for us to be able to tidily display term information parts and apply styles etc, to parts and labels.

As in the EPA example: https://tibhannover.github.io/semantic-glosar/resources/cct.html

calnfynn commented 4 months ago

This is what I think will work:

<html>
  <head>
      <link rel="stylesheet" href="glossary.css">
  </head>
  <body>

    ## <span>Glossary name</span>      

    ### <span class="gloss-term-all gloss-term">Begriff (no label)</span>     

    <span class="gloss-term-all gloss-definition">Beschreibung (no label)</span>   

    **<span class="gloss-term-all gloss-cl-definition-label">label</span>**

    <span class="gloss-term-all gloss-cl-definition">Klartextbeschreibung (label)</span>

    **<span class="gloss-term-all gloss-acronym-label">label</span>**   

    <span class="gloss-term-all gloss-acronym">Akronym (label)</span>

    **<span class="gloss-term-all gloss-tag-label">label</span>**

    <span class="gloss-term-all gloss-tag">Tag (label)</span>

    **<span class="gloss-term-all gloss-similar-tag gloss-similar-label">label</span>**

    <span class="gloss-term-all gloss-similar-tag">Ähnlich (label)</span>

    **<span class="gloss-term-all gloss-subclass-tag gloss-subclass-label">label</span>**

    <span class="gloss-term-all gloss-subclass-tag">Unterklasse von (label)</span>

    **<span class="gloss-term-all gloss-synonyme-tag gloss-synonyme-label">label</span>**

    <span class="gloss-term-all gloss-synonyme-tag">Synonyme (label)</span>
  </body>
</html>

With the following notes:

the styling only works on span containers and it doesn't work on nested containers
- → we'll have to add all relevant classes to each tag instead of using divs
markdown headings #, ## still get converted to h1, h2, etc -- so they show up in the table of contents. they just have to be added infront of the span tag, with a space between
and headings need one empty line above them and one below, otherwise they won't work

calnfynn commented 4 months ago

i updated the code above to add markdown styling for the PDF

TIBHannover / semantic-glossar

Glossary Notebook add to Library #28