As a developer, I wan to know how the team pages repo work. For instance, what technology is used to create the pages (markdocs and GitHub actions) and how are the pages created (dynamically from the metadata folder using the createPage.py, and statically adding pages directly to docs folder). I also want to know how I should run the createPage.py and what to do next (it has to run from the repo root due the to relative paths it uses and then there should be a commit of the created files so the GitHub actions are triggered and the pages are created).

Task: add a new section to the readme.me "Developer documentation" covering the points above, use subsections to better organize the text.

As a developer, whenever a json from the /metadata folder is converted into a page in the /docs folder, I want the json to be embedded in the rendering page.

For the sample.json example, when the sample.md is created, (see issue #4), at the end of the sample.md, the following code should be added:

<script type="application/ld+json">
{ 
    "@context": "https://schema.org", 
    "@type": "Dataset",
    "@id": "https://github.com/BioSchemas/github-markup-example/blob/main/data/sample.csv",
    "http://purl.org/dc/terms/conformsTo": "https://bioschemas.org/profiles/Dataset/0.4-DRAFT", 

    "description": "Toy data used as an example on how to add Bioschemas markup to your data",
    "identifier": "https://github.com/BioSchemas/github-markup-example/blob/main/data/sample.csv",
    "keywords":  [
      {
        "@type": "DefinedTerm", 
        "@id": "http://edamontology.org/data_0006", 
        "name": "Data"
      },
      "Sample data"
    ], 
    "license": "https://creativecommons.org/licenses/by/4.0/",
    "name": "Hello fruit data",
    "url": "https://bioschemas.org/github-markup-example/data.html" 
}
</script>

See example at https://zbmed-semtec.github.io/bioschemas-github-markup-example/data.html (you need to use developer tools to see the code)

As a user, I do not want to see the json code but a page with a table with the information for a dataset.

• The properties "@type", "@id", "@context", and "http://purl.org/dc/terms/conformsTo" will not be rendered
• The title of the page would be "Dataset information"
• Under the title there would be a link with the text "Click here to access this dataset" and the link would be the url in the "@id" property
• The table would have one column with the name of the property and another with the value of the property
• The table will support second nested properties using a list with direct elements and inner tables if needed (for JSON objects, i.e., identified because they are surrounded by {} brackets)
• Whenever there is a nested "@id", there will be a link "Click here for more information on this object" and a link using the url in the "@id" property, indicate the type before the link
• Use different row backgrounds for odd and even columns, similar to https://www.researchobject.org/packaging_data_with_ro-crate/files/rainfall-1.2.1/ro-crate-preview.html, in the example I used styles, see what styles for tables exist and what looks nice, maybe use a second style for the inner tables
• Anything that looks like a URL should be clickable and open in another tab

For the the sample.json, a file sample.md under /docs/datasets would be created and it would look like

And the corresponding code looks like:

<h1>Dataset metadata</h1>
<p><a href="https://github.com/BioSchemas/github-markup-example/blob/main/data/sample.csv" target="_blank">Click here to get the metadata for this object in JSON-LD</a></p>
<table class="blueTable">
<tbody>
  <tr>
    <td>description</td>
    <td>Toy data used as an example on how to add Bioschemas markup to your data</td>
  </tr>
  <tr>
    <td>identifier</td>
    <td><a href="https://github.com/BioSchemas/github-markup-example/blob/main/data/sample.csv" target="_blank">https://github.com/BioSchemas/github-markup-example/blob/main/data/sample.csv</a></td>
  </tr>
  <tr>
    <td>keywords</td>
    <td>
      <ul>
        <li>
          <table class="blueTable">
          <tbody>
            <tr>
              <td colspan="2">DefinedTerm - <a href="http://edamontology.org/data_0006" target="_blank">Click here for more information on this object</a></td>
            </tr>
            <tr>
              <td>name</td>
              <td>Data</td>
            </tr>
          </tbody>
          </table>
        </li>
        <li>Sample data</li>
      </ul>
    </td>
  </tr>
  <tr>
    <td>license</td>
    <td><a href="https://creativecommons.org/licenses/by/4.0/" target="_blank">https://creativecommons.org/licenses/by/4.0/</a></td>
  </tr>
  <tr>
    <td>name</td>
    <td>Hello fruit data</td>
  </tr>
  <tr>
    <td>url</td>
    <td><a href="https://bioschemas.org/github-markup-example/data.html" target="_blank">https://bioschemas.org/github-markup-example/data.html</a></td>
  </tr>
</tbody>
</table>

As a developer, I need a way to distinguish current and former members, even if an alumnus is still part of ZB MED.

As a user, I can imagine that former tam members are all alumni of ZB MED and current team member are all members of members of ZB MED. There is no need to repeat this information.

To cover this case, let's create a list of properties not to be processed. ``alumniOf``` should be in that list and not be rendered at all.

As a developer, I would like to improve the styling of the inner table, by adding extra spacing between the rows, use horizontal lines or try to use floating divs.

As a Developer I want replace the text "Download JSON-LD" and the corresponding link with a link to the JSON file that serves as the data source for the table. Also I wanted to add an icon to it

• Find a way to include the version, last modification date (look at dct, schema.org) and link it to the resource (e.g., web page or JSON-LD) * Use no arrow for the link to the property * Write the corresponding Profile Turtle representation using only the webpage resource * Get the corresponding Profile JSON-LD using https://www.easyrdf.org/converter

As a developer, I want to replace the text "Click here for more information on this object" with "Visit object" and add an icon to it.

As a researcher visiting the pages of the SemTec team, I want to get an overview of what's going on there in terms of: projects and results.

For this we need to create a folder structure under the docs folder (the one used by the pages) as follows:

• Projects
• Datasets
• Software
• Vocabularies
• People
• Collaborations