Giter VIP home page Giter VIP logo

zbmed-semtec.github.io's People

Contributors

honeyl3 avatar ljgarcia avatar rohitharavinder avatar

Watchers

 avatar

Forkers

honeyl3

zbmed-semtec.github.io's Issues

User story: Have an overview of what's going on in the SemTec team

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

User story: Redundant information in pages

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.

Developer story: styling the inner table

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.

Developer Story: Replace the link above the table

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

Developer story: How to use the team pages repo

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.

User story: I want to see a table with the dataset information

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

Image

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>

Developer story: I want the json-ld to be embedded in the rendering page

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.