Before

After

    <meta name="viewport" content="width=device-width, initial-scale=1">

_includes/main.njk:9

Before

    <nav class="navbar bg-body-tertiary">
        <div class="container-fluid">
              <a class="navbar-brand"href="/" >Darcs Repositories</a>

After

    <div class="container-lg">
      <div class="row pt-5">
        <div class="col">
          <header>
            <div class="row d-flex justify-content-between">
              <div class="col-auto">
                <nav class="fs-4 pb-3">
                  <a href="/" class=&quot;text-decoration-none"&gt;Darcs Repositories</a>
                  {% if nav.repoName %}<span class="text-secondary mx-3">&gt;</span><a href="#" class="text-decoration-none">eleventy-darcs</a>{% endif %}
                </nav>
              </div>
            </div>
            {% if nav.repoName %}
            <nav class="nav-tabs mb-4">
              <ul class="nav">
                <li class="nav-item">
                  <a class="nav-link {% if navTab == "landing" %}active{% endif %}" href="/repos/{{nav.repoName | slugify}}">Landing Page</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link {% if navTab == "files" %}active{% endif %}" href="/repos/{{nav.repoName | slugify}}/files">Files</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link {% if navTab == "patches" %}active{% endif %}" href="/repos/{{nav.repoName | slugify}}/patches/page1">Patches</a>
                </li>
              </ul>
            </nav>
            {% endif %}
          </header>
        </div>

_includes/main.njk:39

Before

      </nav>
        <div class="container-fluid">
          {{content | safe}}

After

      <div class=&quot;row"&gt;
        <div class="col">
          {{content | safe}}
        </div>
      </div>

file.11tydata.js:1

Before

After

export default {
  eleventyComputed: {
    nav: {
      repoName: (data) => {
        return data.fileInfo.repoName
      }
    }
  }
}

file.njk:7

Before

After

navTab: files

file.njk:10

Before

<h2><a href="/repos/{{fileInfo.repoName | slugify}}">{{fileInfo.repoName}}</a></h2>

After

files.11tydata.js:1

Before

After

export default {
  eleventyComputed: {
    nav: {
      repoName: (data) => {
        return data.repo
      }
    }
  }
}

files.njk:7

Before

After

navTab: files

files.njk:9

Before

<h2><a href="/repos/{{repo | slugify}}/">{{repo}}</a></h2>
<h3>Files</h3>

After

main.css:59

Before

.patch-description {
  font-size: 14px;
}

After

main.css:62

Before

}
.patch-pages {
  list-style: none;
  overflow: hidden;
}
.patch-pages li {
  float: left;
  margin: 0.25rem;
}
.patch-pages li:first-of-type {
  margin-left: 0;
}
.page-current {
  font-weight: bold;

After

patch.11tydata.js:1

Before

After

export default {
  eleventyComputed: {
    nav: {
      repoName: (data) => {
        return data.patchInfo.repoName
      }
    }
  }
}

patch.njk:7

Before

After

navTab: patches

patch.njk:10

Before

  <div class="col">
    <h2>
    <a href=&quot;/repos/{{patchInfo.repoName | slugify }}&quot;>
    {{patchInfo.repoName}}</a>
    </h2>

After

  <div class="col-auto">
    <h1>{{patchInfo.patch.name}}</h2>
    <p&gt;{{patchInfo.patch.date | date }}&lt;/p>
    <p>{{patchInfo.patch.author }}</p>
    <pre class="patch-description">{{patchInfo.patch.description}}</pre>

patch.njk:17

Before

<div class="row ">

After

<div class="row border-bottom">

patch.njk:19

Before

    <div class="card">
      <div class="card-header">
        <h2 class="h5 card-title">{{patchInfo.patch.name}}</h2>
        <p class=&quot;card-subtitle text-body-secondary"&gt;{{patchInfo.patch.date | date }}</p>
        <p class="card-subtitle text-body-secondary">{{patchInfo.patch.author }}</p>
      </div>
      <div class="card-body">
        <pre class="patch-description">{{patchInfo.patch.description}}</pre>
      </div>
    </div>
  </div>
  <div class="col-auto">

After

    <p>{{patchInfo.patch.hash}}</p>

patch.njk:25

Before

      <btn class="btn btn-primary" onclick="copyCommand()">Copy</span>

After

      <button class="btn btn-primary" id="clone-button" onclick="copyCommand()">Copy</button>

patch.njk:49

Before

    const text = document.getElementById("clone-command").textContent
    const button = document.getElementById("repo-clone")

After

    const text = document.getElementById("clone-command").innerText
    const button = document.getElementById("clone-button")

patches.11tydata.js:1

Before

After

export default {
  eleventyComputed: {
    nav: {
      repoName: (data) => {
        return data.patchPage.repoName
      }
    }
  }
}

patches.njk:7

Before

After

navTab: patches

patches.njk:9

Before

<h2><a href="/repos/{{patchPage.repoName | slugify}}">
  {{patchPage.repoName}}</a></h2>
<h3>Patches, page {{patchPage.pageNumber}}</h3>
<ul class="patch-pages">
    {% for pageObj in (paginatedPatches | pagesJustForRepo(patchPage.repoName)) %}
    <li >
      <a {% if pageObj.pageNumber == patchPage.pageNumber %}class="page-current" {% endif %}href="/repos/{{patchPage.repoName | slugify}}/patches/page{{pageObj.pageNumber}}">Page {{ pageObj.pageNumber }}</a>
    </li>
    {% endfor %}
  </ul>

After

<nav aria-label="Page navigation example">
  <ul class="pagination">
    {% for pageObj in (paginatedPatches | pagesJustForRepo(patchPage.repoName)) %}
    <li class=&quot;page-item"&gt;
      <a class="page-link {% if pageObj.pageNumber == patchPage.pageNumber %}active{% endif %}" href="/repos/{{patchPage.repoName | slugify}}/patches/page{{pageObj.pageNumber}}">{{ pageObj.pageNumber }}</a>
    </li>
    {% endfor %}
  </ul>
</nav>

patches.njk:32

Before

<ul class="patch-pages">
    {% for pageObj in (paginatedPatches | pagesJustForRepo(patchPage.repoName)) %}
    <li >
      <a {% if pageObj.pageNumber == patchPage.pageNumber %}class="page-current" {% endif %}href="/repos/{{patchPage.repoName | slugify}}/patches/page{{pageObj.pageNumber}}">Page {{ pageObj.pageNumber }}</a>
    </li>
    {% endfor %}
  </ul>

After

<nav aria-label="Page navigation example">
  <ul class="pagination">
    {% for pageObj in (paginatedPatches | pagesJustForRepo(patchPage.repoName)) %}
    <li class=&quot;page-item"&gt;
      <a class="page-link {% if pageObj.pageNumber == patchPage.pageNumber %}active{% endif %}" href="/repos/{{patchPage.repoName | slugify}}/patches/page{{pageObj.pageNumber}}">{{ pageObj.pageNumber }}</a>
    </li>
    {% endfor %}
  </ul>
</nav>

repo.11tydata.js:1

Before

After

export default {
  eleventyComputed: {
    nav: {
      repoName: (data) => {
        return data.repo
      }
    }
  }
}

repo.njk:7

Before

After

navTab: landing

repo.njk:10

Before

  <div class="col">
    <h1>{{repo}}</h1>
  </div>
</div>
<div class="row">
  <div class="col">
    <ul class="nav">
      <li class="nav-item"><a class="nav-link" href="/repos/{{repo | slugify}}/files">Files</a></li>
      <li class="nav-item"><a class="nav-link" href="/repos/{{repo | slugify}}/patches/page1">Patches</a></li>
    </ul>
  </div>
</div>

<div class="row">

After

repo.njk:12

Before

      <span class="clone input-group-text">

After

      <span id="clone-command" class="clone input-group-text">

repo.njk:16

Before

      <btn class="btn btn-primary" onclick="copyCommand()">Copy</span>

After

      <button class="btn btn-primary" id="clone-button" onclick="copyCommand()">Copy</button>

repo.njk:21

Before

{{ repo | getReadMe | renderContent("md") | safe }}

After

<div class="row">
  <div class="col-8">
    {{ repo | getReadMe | renderContent("md") | safe }}
  </div>
</div>

repo.njk:29

Before

    const text = document.getElementById("clone-command").textContent
    const button = document.getElementById("repo-clone")

After

    const text = document.getElementById("clone-command").innerText
    const button = document.getElementById("clone-button")

More implementation of using bootstrap for the UI