p-doom/crowd-code-dataset-0.2 huggingface dataset:
[content] examples/crowd_code.html (html)

      {
        "author":"Franz Srambical",
        "authorURL":"https://srambical.fr/",
        "affiliations": [{"name": "p(doom)", "url": "https://pdoom.org/"},
                         {"name": "TUM"}]
      }
[content] examples/crowd_code.html (html)

      {
        "author":"Mihir Mahajan",
        "authorURL":"https://maharajamihir.github.io/",
        "affiliations": [{"name": "p(doom)", "url": "https://pdoom.org/"},
                         {"name": "TUM"}]
      }
[tab] src/components/d-byline.js (javascript)
// Copyright 2018 The Distill Template Authors
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

// import style from '../styles/d-byline.css';

export function bylineTemplate(frontMatter) {
  return `
  <div class="byline grid">
    <div class="authors-affiliations grid">
      <h3>Authors</h3>
      <h3>Affiliations</h3>
      ${frontMatter.authors.map(author => `
        <p class="author">
          ${author.personalURL ? `
            <a class="name" href="${author.personalURL}">${author.name}</a>` : `
            <span class="name">${author.name}</span>`}
          ${author.equalContrib ? `<sup>*</sup>` : ``}
        </p>
        <p class="affiliation">
        ${author.affiliations.map(affiliation =>
          affiliation.url ? `<a class="affiliation" href="${affiliation.url}">${affiliation.name}</a>` : `<span class="affiliation">${affiliation.name}</span>`
        ).join(', ')}
        </p>
      `).join('')}
    </div>
    ${frontMatter.authors.some(a => a.equalContrib) ? `
    <div>
      <p><sup>*</sup> Equal contribution</p>
    </div>` : ``}
    <div>
      <h3>Published</h3>
      ${frontMatter.publishedDate ? `
        <p>${frontMatter.publishedMonth} ${frontMatter.publishedDay}, ${frontMatter.publishedYear}</p> ` : `
        <p><em>Not published yet.</em></p>`}
    </div>
    <div>
      <h3>DOI</h3>
      ${frontMatter.doi ? `
        <p><a href="https://doi.org/${frontMatter.doi}">${frontMatter.doi}</a></p>` : `
        <p><em>No DOI yet.</em></p>`}
    </div>
  </div>
`;
}

export class Byline extends HTMLElement {

  static get is() { return 'd-byline'; }

  set frontMatter(frontMatter) {
    this.innerHTML = bylineTemplate(frontMatter);
  }

}
[content] src/components/d-byline.js (javascript)
            <a class="name" href="${author.personalURL}">${author.name}${author.equalContrib ? `<sup>*</sup>` : ``}</a>` : `
            <span class="name">${author.name}${author.equalContrib ? `<sup>*</sup>` : ``}</span>`}
[content] src/components/d-byline.js (javascript)
        ${author.affiliations.map(affiliation =>
          affiliation.url ? `<a class="affiliation" href="${affiliation.url}">${affiliation.name}</a>` : `<span class="affiliation">${affiliation.name}</span>`
        ).join(', ')}
[tab] examples/index.html (html)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="google-site-verification" content="csNYtDpSllpbkTyXPeTcMy5XxF76j8loFUcyrVczaZE" />
    <title>p(doom)</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lora:ital@0;1&display=swap" rel="stylesheet">
    <link rel="icon" type="image/png" href="favicon.png">
    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            font-family: 'Lora', serif;
            color: #e8e8e8;
            background-color: black;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
        #title {
            font-size: calc(10vw + 2rem);
            font-style: italic;
        }
        #description {
            font-size: 2em;
            margin: 20px 5%;
            text-align: left;
        }
        #description a {
            color: white;
        }
        #logo {
            width: calc(20vw + 2rem);
            max-width: 400px;
            margin-bottom: 20px;
        }
        #header-container {
            display: flex;
            flex-direction: row;
            align-items: center;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="header-container">
        <img id="logo" src="logo.png" alt="p(doom)">
        <div id="title">p(doom)</div>
    </div>
    <div id="description">
        Pioneering truly open research on the path to AGI.
        <div id="links">
            <a href="blog.html">Research.</a>
            <a href="about.html">About.</a>
            <a href="https://discord.gg/G4JNuPX2VR">Join.</a>
        </div>
    </div>
</body>
</html>
[content] examples/index.html (html)
    <header class="site-header" role="banner">
        <div class="content">
            <a href="/" class="logo">
                <img src="logo.png" alt="p(doom) logo" />
                p(doom)
            </a>
            <nav class="nav" role="navigation" aria-label="Primary">
                <a href="blog.html">Research</a>
                <a href="about.html">About</a>
                <a href="https://discord.gg/G4JNuPX2VR">Join</a>
            </nav>
        </div>
    </header>
    <div class="page-offset">
        <div id="header-container">
            <img id="logo" src="logo.png" alt="p(doom)">
            <div id="title">p(doom)</div>
        </div>
        <div id="description">
            Pioneering truly open research on the path to AGI.
            <div id="links">
                <a href="blog.html">Research.</a>
                <a href="about.html">About.</a>
                <a href="https://discord.gg/G4JNuPX2VR">Join.</a>
            </div>
[content] examples/index.html (html)
        /* Standalone site header to match Distill header */
        .site-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 60px;
            background-color: hsl(200, 60%, 15%);
            box-sizing: border-box;
            z-index: 10;
            border-bottom: 1px solid rgba(0, 0, 0, 0.08);
            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
        }
        .site-header .content {
            max-width: 1080px;
            margin: 0 auto;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 16px;
        }
        .site-header a {
            font-size: 16px;
            height: 60px;
            line-height: 60px;
            text-decoration: none;
            color: rgba(255, 255, 255, 0.8);
        }
        .site-header a:hover {
            color: rgba(255, 255, 255, 1);
        }
        .site-header .logo {
            display: flex;
            align-items: center;
            font-size: 30px;
            font-weight: 200;
            font-style: italic;
        }
        .site-header .logo img {
            width: 48px;
            height: 48px;
            margin-right: 6px;
        }
        .site-header .nav a {
            font-size: 12px;
            margin-left: 24px;
            text-transform: uppercase;
        }
        @media(min-width: 1080px) {
            .site-header { height: 70px; }
            .site-header .content { height: 70px; }
            .site-header a { height: 70px; line-height: 70px; }
        }
[content] examples/index.html (html)
    <div id="header-container">
        <img id="logo" src="logo.png" alt="p(doom)">
        <div id="title">p(doom)</div>
    </div>
    <div id="description">
        Pioneering truly open research on the path to AGI.
        <div id="links">
            <a href="blog.html">Research.</a>
            <a href="about.html">About.</a>
            <a href="https://discord.gg/G4JNuPX2VR">Join.</a>
[content] examples/index.html (html)
        /* Standalone site header to match Distill header */
        .site-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 60px;
            background-color: #000;
            box-sizing: border-box;
            z-index: 10;
            border-bottom: 1px solid rgba(0, 0, 0, 0.08);
            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
        }
        .site-header .content {
            max-width: 1080px;
            margin: 0 auto;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 16px;
        }
        .site-header a {
            font-size: 16px;
            height: 60px;
            line-height: 60px;
            text-decoration: none;
            color: rgba(255, 255, 255, 0.8);
        }
        .site-header a:hover {
            color: rgba(255, 255, 255, 1);
        }
        .site-header .logo {
            display: flex;
            align-items: center;
            font-size: 30px;
            font-weight: 200;
            font-style: italic;
        }
        .site-header .logo img {
            width: 48px;
            height: 48px;
            margin-right: 6px;
        }
        .site-header .nav a {
            font-size: 12px;
            margin-left: 24px;
            text-transform: uppercase;
        }
        @media(min-width: 1080px) {
            .site-header { height: 70px; }
            .site-header .content { height: 70px; }
            .site-header a { height: 70px; line-height: 70px; }
        }
[content] src/controller.js (javascript)
      // Ensure a header is present on client load if not prerendered
      const existingHeader = document.querySelector("distill-header");
      if (!existingHeader) {
        const headerEl = document.createElement("distill-header");
        // If prerender didn't inject innerHTML, rely on the web component's template
        document.body.insertBefore(headerEl, document.body.firstChild);
      }
[tab] src/distill-components/distill-header-template.js (javascript)
import logo from '../assets/pdoom-logo.png';

export const headerTemplate = `
<style>
distill-header {
  font-family: 'Lora', serif;
  font-style: italic;
  position: relative;
  height: 60px;
  background-color: #000;
  width: 100%;
  box-sizing: border-box;
  z-index: 2;
  color: rgba(0, 0, 0, 0.8);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}
distill-header .content {
  height: 70px;
  grid-column: page;
}
distill-header a {
  font-size: 16px;
  height: 60px;
  line-height: 60px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.8);
  padding: 22px 0;
}
distill-header a:hover {
  color: rgba(255, 255, 255, 1);
}
distill-header img {
  width: 48px;
  position: relative;
  top: 10px;
  margin-right: 2px;
}
@media(min-width: 1080px) {
  distill-header {
    height: 70px;
  }
  distill-header a {
    height: 70px;
    line-height: 70px;
    padding: 28px 0;
  }
  distill-header .logo {
  }
}
distill-header .logo {
  font-size: 30px;
  font-weight: 200;
}
distill-header .nav {
  float: right;
  font-weight: 300;
}
distill-header .nav a {
  font-size: 12px;
  margin-left: 24px;
  text-transform: uppercase;
}
</style>
<div class="content">
  <a href="/" class="logo">
    <img src="${logo}" alt="p(doom) logo" />
    p(doom)
  </a>
  <nav class="nav">
    <a href="blog.html">Research</a>
    <a href="about.html">About</a>
    <a href="https://discord.gg/G4JNuPX2VR">Join</a>
  </nav>
</div>
`;
[content] src/distill-components/distill-header-template.js (javascript)
  height: 60px;
  /* grid-column: page; */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  box-sizing: border-box;
  max-width: 1080px;
  margin: 0 auto;
[content] src/distill-components/distill-header-template.js (javascript)
  distill-header { height: 70px; }
  distill-header .header-content { height: 70px; }
  distill-header a { height: 70px; line-height: 70px; }
}
distill-header .logo {
  display: flex;
  align-items: center;
[content] src/distill-components/distill-header-template.js (javascript)
distill-header .header-content {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  box-sizing: border-box;
  max-width: 1080px;
  margin: 0 auto;
[content] src/distill-components/distill-header-template.js (javascript)
distill-header .header-content {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  box-sizing: border-box;
  width: 100%;
  max-width: 1080px;
[tab] src/transforms/html.js (javascript)
// Copyright 2018 The Distill Template Authors
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

export default function(dom) {

  const head = dom.querySelector('head');

  // set language to 'en'
  if (!dom.querySelector('html').getAttribute('lang')) {
    dom.querySelector('html').setAttribute('lang', 'en');
  }

  // set charset to 'utf-8'
  if (!dom.querySelector('meta[charset]')) {
    const meta = dom.createElement('meta');
    meta.setAttribute('charset', 'utf-8');
    head.appendChild(meta);
  }

  // set viewport
  if (!dom.querySelector('meta[name=viewport]')) {
    const meta = dom.createElement('meta');
    meta.setAttribute('name', 'viewport');
    meta.setAttribute('content', 'width=device-width, initial-scale=1');
    head.appendChild(meta);
  }

  // ensure Google Fonts (Lora) is available so header renders with correct font
  const hasLoraFont = !!dom.querySelector('link[href*="fonts.googleapis.com"][href*="Lora"]');
  if (!hasLoraFont) {
    if (!dom.querySelector('link[rel="preconnect"][href="https://fonts.googleapis.com"]')) {
      const preconnect1 = dom.createElement('link');
      preconnect1.setAttribute('rel', 'preconnect');
      preconnect1.setAttribute('href', 'https://fonts.googleapis.com');
      head.appendChild(preconnect1);
    }
    if (!dom.querySelector('link[rel="preconnect"][href="https://fonts.gstatic.com"]')) {
      const preconnect2 = dom.createElement('link');
      preconnect2.setAttribute('rel', 'preconnect');
      preconnect2.setAttribute('href', 'https://fonts.gstatic.com');
      preconnect2.setAttribute('crossorigin', '');
      head.appendChild(preconnect2);
    }
    const stylesheet = dom.createElement('link');
    stylesheet.setAttribute('rel', 'stylesheet');
    stylesheet.setAttribute('href', 'https://fonts.googleapis.com/css2?family=Lora:ital@0;1&display=swap');
    head.appendChild(stylesheet);
  }
}
[content] src/distill-components/distill-header-template.js (javascript)
distill-header .header-content {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  box-sizing: border-box;
  grid-column: screen;
  max-width: 1080px;
  margin: 0 auto;
  justify-self: center;
[content] src/distill-components/distill-header-template.js (javascript)
  height: 60px;
  grid-column: screen;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  box-sizing: border-box;
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
[content] src/distill-components/distill-header-template.js (javascript)
import logo from '../assets/pdoom-logo.png';

export const headerTemplate = `
<style>
distill-header {
  font-family: 'Lora', serif;
  font-style: italic;
  position: relative;
  height: 60px;
  background-color: hsl(200, 60%, 15%);
  width: 100%;
  box-sizing: border-box;
  z-index: 2;
  color: rgba(0, 0, 0, 0.8);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}
distill-header .content {
  height: 70px;
  grid-column: page;
}
distill-header a {
  font-size: 16px;
  height: 60px;
  line-height: 60px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.8);
  padding: 22px 0;
}
distill-header a:hover {
  color: rgba(255, 255, 255, 1);
}
distill-header img {
  width: 48px;
  position: relative;
  top: 10px;
  margin-right: 2px;
}
@media(min-width: 1080px) {
  distill-header {
    height: 70px;
  }
  distill-header a {
    height: 70px;
    line-height: 70px;
    padding: 28px 0;
  }
  distill-header .logo {
  }
}
distill-header .logo {
  font-size: 30px;
  font-weight: 200;
}
distill-header .nav {
  float: right;
  font-weight: 300;
}
distill-header .nav a {
  font-size: 12px;
  margin-left: 24px;
  text-transform: uppercase;
}
</style>
<div class="content">
  <a href="/" class="logo">
    <img src="${logo}" alt="p(doom) logo" />
    p(doom)
  </a>
</div>
`;
[tab] src/styles/styles-base.css (css)
/*
 * Copyright 2018 The Distill Template Authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

html {
  font-size: 14px;
	line-height: 1.6em;
  /* font-family: "Libre Franklin", "Helvetica Neue", sans-serif; */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
  /*, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";*/
  text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
}

@media(min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  margin: 0;
  overflow-y: scroll; /* Reserve scrollbar space to avoid horizontal shift */
}

a {
  color: #004276;
}

figure {
  margin: 0;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

table th {
	text-align: left;
}

table thead {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

table thead th {
  padding-bottom: 0.5em;
}

table tbody :first-child td {
  padding-top: 0.5em;
}

pre {
  overflow: auto;
  max-width: 100%;
}

p {
  margin-top: 0;
  margin-bottom: 1em;
}

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
  line-height: 1em;
}

sub {
  top: 0.4em;
}

.kicker,
.marker {
  font-size: 15px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.5);
}


/* Headline */

@media(min-width: 1024px) {
  d-title h1 span {
    display: block;
  }
}

/* Figure */

figure {
  position: relative;
  margin-bottom: 2.5em;
  margin-top: 1.5em;
}

figcaption+figure {

}

figure img {
  width: 100%;
}

figure svg text,
figure svg tspan {
}

figcaption,
.figcaption {
  color: rgba(0, 0, 0, 0.6);
  font-size: 12px;
  line-height: 1.5em;
}

@media(min-width: 1024px) {
figcaption,
.figcaption {
    font-size: 13px;
  }
}

figure.external img {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
  padding: 18px;
  box-sizing: border-box;
}

figcaption a {
  color: rgba(0, 0, 0, 0.6);
}

figcaption b,
figcaption strong, {
  font-weight: 600;
  color: rgba(0, 0, 0, 1.0);
}
[content] examples/index.html (html)
        .site-header .nav {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
            font-weight: 500;
        }
[content] examples/index.html (html)
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
            font-weight: 500;
[content] examples/index.html (html)
#links a {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
[content] examples/index.html (html)
        #links a {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
[content] examples/index.html (html)
        @media(max-width: 640px) and (orientation: portrait) {
            .site-header { height: 80px; }
            .site-header .content {
                height: 80px;
                padding: 8px 16px;
                flex-direction: column;
                align-items: flex-start;
                gap: 6px;
            }
            .site-header a {
                height: auto;
                line-height: 1.3;
            }
            .site-header .logo { font-size: 28px; }
            .site-header .logo img { width: 44px; height: 44px; }
            .site-header .nav { width: 100%; display: flex; flex-wrap: wrap; gap: 8px 12px; }
            .site-header .nav a { margin-left: 0; padding: 6px 0; font-size: 14px; }
            .page-offset { padding-top: 96px; }
            /* Restore smaller main content font sizes on portrait */
            #title { font-size: 2.5rem; }
            #description { font-size: 1.25em; }
        }
[content] examples/index.html (html)
        /* Wrap nav to next line on small screens */
        @media(max-width: 640px) {
            .site-header { height: auto; }
            .site-header .content { height: auto; flex-wrap: wrap; padding: 8px 16px; }
            .site-header .nav { width: 100%; display: flex; justify-content: flex-start; }
            .site-header .nav a { margin-left: 0; margin-right: 16px; }
            .site-header a { height: 40px; line-height: 40px; }
        }
[content] examples/index.html (html)
        /* Wrap nav to next line on small screens */
        @media(max-width: 640px) {
            .site-header { height: auto; }
            .site-header .content { height: auto; flex-wrap: wrap; padding: 8px 16px; }
            .site-header .nav { width: 100%; display: flex; justify-content: flex-start; }
            .site-header .nav a { margin-left: 0; margin-right: 16px; }
            .site-header a { height: 40px; line-height: 40px; }
            .page-offset { padding-top: 96px; }
        }
[content] examples/index.html (html)
        /* Wrap nav to next line on small screens */
        @media(max-width: 640px) {
            .site-header { height: auto; }
            .site-header .content { height: auto; flex-wrap: wrap; padding: 8px 16px; }
            .site-header .nav { width: 100%; display: flex; justify-content: flex-end; }
            .site-header .nav a { margin-left: 24px; margin-right: 0; }
            .site-header a { height: 60px; line-height: 60px; }
            .page-offset { padding-top: 120px; }
        }
[content] examples/index.html (html)
        /* Wrap nav to next line on small screens */
        @media(max-width: 640px) {
            .site-header { height: auto; position: static; }
            .site-header .content { height: auto; padding: 8px 12px; flex-direction: column; align-items: flex-start; gap: 6px; }
            .site-header a { height: auto; line-height: 1.3; }
            .site-header .logo { font-size: 24px; line-height: 1; }
            .site-header .logo img { width: 36px; height: 36px; }
            .site-header .nav { width: 100%; display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: flex-start; }
            .site-header .nav a { margin-left: 0; margin-right: 0; padding: 6px 0; font-size: 12px; }
            .page-offset { padding-top: 0; }
        }