index.html

<!-- index.html -->

<!DOCTYPE html>
<html>
<head>
  <!-- ****** faviconit.com favicons ****** -->
  <link rel="shortcut icon" href="_media/favicon.ico">
  <link rel="icon" sizes="16x16 32x32 64x64" href="_media/favicon.ico">
  <link rel="icon" type="image/png" sizes="196x196" href="_media/favicon-192.png">
  <link rel="icon" type="image/png" sizes="160x160" href="_media/favicon-160.png">
  <link rel="icon" type="image/png" sizes="96x96" href="_media/favicon-96.png">
  <link rel="icon" type="image/png" sizes="64x64" href="_media/favicon-64.png">
  <link rel="icon" type="image/png" sizes="32x32" href="_media/favicon-32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="_media/favicon-16.png">
  <link rel="apple-touch-icon" href="_media/favicon-57.png">
  <link rel="apple-touch-icon" sizes="114x114" href="_media/favicon-114.png">
  <link rel="apple-touch-icon" sizes="72x72" href="_media/favicon-72.png">
  <link rel="apple-touch-icon" sizes="144x144" href="_media/favicon-144.png">
  <link rel="apple-touch-icon" sizes="60x60" href="_media/favicon-60.png">
  <link rel="apple-touch-icon" sizes="120x120" href="_media/favicon-120.png">
  <link rel="apple-touch-icon" sizes="76x76" href="_media/favicon-76.png">
  <link rel="apple-touch-icon" sizes="152x152" href="_media/favicon-152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="_media/favicon-180.png">
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
  <meta name="msapplication-TileColor" content="#FFFFFF">
  <meta name="msapplication-TileImage" content="_media/favicon-144.png">
  <meta name="msapplication-config" content="/browserconfig.xml">
  <!-- ****** faviconit.com favicons ****** -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta charset="UTF-8">
  <link rel="stylesheet" href="_media/theme-simple-dark.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
  <style>
    header {
      text-align: left;
    }
    footer {
      font-size: 13px !important;
    }
    /* css for the popup vue component */
      #custom-popup {
          position: fixed;
          bottom: 20px;
          right: 20px;
          background-color: #ffffff;
          border: 1px solid #1F282D;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
          padding: 20px;
          max-width: 330px;
          border-radius: 8px;
          z-index:99999;
      }
      .popup-text {
          margin: 0;
          color: #1F282D;
      }
      .popup-close {
          position: absolute;
          top: -12px;
          right: 15px;
          font-size: 50px;
          cursor: pointer;
      }
    /* css for recommended badge on tutorials page */
    .recommended {
        background-clip: padding-box;
        border-radius: 20px;
        background-color: #FFFFFF;
        color: #000000;
        padding: 5px 10px;
        display: inline;
      }
  </style>
</head>
<body>
  <div id="app"></div>
  <script>
    window.$docsify = {
      name: 'Poseidon Framework',
      loadSidebar: true,
      relativePath: true,
      homepage: 'home.md',
      coverpage: true,
      subMaxLevel: 2,
      alias: {
        '/.*/_sidebar.md': '/_sidebar.md'
      },
      search: 'auto',
      search: {
        maxAge: 10000, // Expiration time, the default one day
        paths: 'auto', // or 'auto'
        placeholder: 'Type here to search',
        noData: 'No Results!',
        // Headline depth, 1 - 6
        depth: 6,
        hideOtherSidebarContent: false, // whether or not to hide other sidebar content
      },
      tabs: {
        persist    : true,      // default
        sync       : true,      // default
        theme      : 'classic', // default
        tabComments: true,      // default
        tabHeadings: true       // default
      },
      vueComponents: {
        'popup': { // {{ customText }} statt <span v-html="customText"> für simple text
          template: `
            <div v-if="popUpOpen" id="custom-popup">
              <span class="popup-close" @click="popUpOpen = !popUpOpen">×</span>
              <p class="popup-text">
                <i class='fa fa-info' aria-hidden='true'></i>
                &nbsp;&nbsp;
                <b>Reading tip for newcomers</b>
                <span v-html="customText"></span>
              </p>
            </div>
          `,
          props: ['customText'],
          data() {
            return {
              popUpOpen: true,
              customText2: this.customText
            };
          },
        },
      },
      plugins: [
        function(hook) {
          var header = [
            '<header>',
            '<img alt="GitHub release (latest by date including pre-releases)" src="https://img.shields.io/github/v/release/poseidon-framework/poseidon-schema?include_prereleases&label=Poseidon%20Version&style=for-the-badge">',
            '</header>'
          ].join('');
          var footer = [
            '<hr/>',
            '<footer>',
            '&copy;2025 Poseidon is an initiative of the <a href="https://www.eva.mpg.de/archaeogenetics/index.html">Department of Archaeogenetics</a> at the Max Planck Institute for Evolutionary Anthropology in Leipzig. The main contact is <a href="https://www.eva.mpg.de/archaeogenetics/staff/stephan-schiffels/">Stephan Schiffels</a>. This project has received funding from the European Research Council (ERC) under the European Union’s Horizon 2020 research and innovation programme (grant agreement number 851511). This website was built with <a href="https://github.com/docsifyjs/docsify" target="_blank">docsify</a>.',
            '</footer>'
          ].join('');
          hook.afterEach(function(html) {
            return header + html + footer;
          });
          // mermaid bug fix: https://github.com/Leward/mermaid-docsify/issues/31
          hook.doneEach(function () {
            let mermaidConfig = {
              querySelector: ".mermaid",
            };
            mermaid.run(mermaidConfig);
          });
        }
      ]
    }
  </script>
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/docsify-tabs@1"></script>
  <script src="//cdn.jsdelivr.net/npm/docsify-themeable@0/dist/js/docsify-themeable.min.js"></script>

  <style>
    :root {
      /* this is relative to the path of the docsify-themeable stylesheet, which is now hosted locally */
      --cover-background-image                           : url('/_media/Poseidon-Logo-WaterGraphicNoText.svg');
      --cover-button-border                              : 1px solid white;
      --cover-button-primary-border                              : 1px solid white;
      --cover-max-width                                  : 80em;
      --cover-blockquote-color                           : white ;
      --cover-button-primary-background                  : ;
    }
  </style>

  <script src="//unpkg.com/prismjs/components/prism-bash.min.js"></script>
  <script src="//unpkg.com/prismjs/components/prism-python.min.js"></script>
  <script src="//unpkg.com/prismjs/components/prism-r.min.js"></script>
  <!-- <script src="//unpkg.com/docsify-copy-code"></script> -->
  <script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
  <!-- <script src="//unpkg.com/docsify/lib/plugins/zoom-image.min.js"></script> -->
  <!-- <script src="//unpkg.com/docsify-fontawesome/dist/docsify-fontawesome.min.js"></script> -->
  <script async defer src="https://buttons.github.io/buttons.js"></script>

  <!-- vue -->
  <!-- for development -->
  <!-- <script src="//cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script> -->
  <!-- for production -->
  <script src="//cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/docsify-tabs@1"></script>
  <!-- <script src="https://unpkg.com/browse/docsify@4.7.0/src/plugins/external-script.js"></script> -->

  <!-- leaflet map -->
  <!-- <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
   integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
   crossorigin=""/> -->
  <!-- Make sure you put this AFTER Leaflet's CSS -->
  <!-- <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
   integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
   crossorigin=""></script>
  <script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css"></script>
  <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css"></script> -->
   
  <!-- diagrams with mermaid: https://github.com/Leward/mermaid-docsify -->
  <script type="module">
    import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs";
    mermaid.initialize({ startOnLoad: true, theme: 'dark' });
    window.mermaid = mermaid;
  </script>
  <script src="//unpkg.com/docsify-mermaid@2.0.0/dist/docsify-mermaid.js"></script>
  
</body>
</html>