Start of using bootstrap for layout

Wed Apr 09 2025

tucker.mcknight@gmail.com

bd2b873186746e57f5a4f9adb718b5e1aaa7e65c

darcs pull https://repos.tuckerm.us/repos/eleventy-darcs/branches/main -h bd2b873186746e57f5a4f9adb718b5e1aaa7e65c

Before

After

  <head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="/main.css" />
    <link rel="stylesheet" type="text/css" href="/prism.css" />
  </head>

_includes/main.njk:8

Before

    <head>
      <link rel="stylesheet" type=&quot;
      text/css&quot; href="/main.css" />
        <link rel="stylesheet" type="text/css" href=&quot;/prism.css&quot;/>
      </head>
    <h1>

    <a href="/">
  Darcs Repositories</a></h1>

    {{content | safe}}

After

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

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

main.css:1

Before

body {
  font-size: 14px;
}

After

main.css:81

Before

  border: 1px solid black;
  padding: 0.5rem;
  width: fit-content;

After

  font-family: monospace;
  font-size: 12px;

main.css:84

Before

.clone #clone-command {
  display: inline;
  margin-right: 0.5rem;
}

After

patch.njk:8

Before

<h2><a href="/repos/{{patchInfo.repoName | slugify }}">
  {{patchInfo.repoName}}</a&gt;&lt;/h2>
    <p>{{patchInfo.patch.name}}</p>
<div class="clone">
  {% set url = [darcsConfig.baseUrl, "/repos/", patchInfo.repoName | slugify ] | join | url %}&lt;pre id=&quot;clone-command&quot;&gt;darcs pull {{ url }} -h {{patchInfo.patch.hash}}</pre><button id=&quot;repo-clone" onclick="copyCommand()"&gt;
  Copy</buton>

After

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

patch.njk:13

Before

<p >{{patchInfo.patch.date | date }}</p>
        <pre class="patch-description">{{patchInfo.patch.description}}</pre>
      <pre class="patch-hash">
    {{patchInfo.patch.hash}}
      </pre>
      <br />

After

<div class="row">
  <div class="col-auto">
    <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">
    <div class="input-group mb-3">
      <span id="clone-command" class="clone input-group-text">
        {% set url = [darcsConfig.baseUrl, "/repos/", patchInfo.repoName | slugify] | join | url %}
        darcs pull {{ url }} -h {{patchInfo.patch.hash}}
      </span>
      <btn class="btn btn-primary" onclick="copyCommand()">Copy</span>
    </div>
  </div>
</div>

repo.njk:8

Before

<h2&gt;{{repo}}&lt;/h1>
  <div class="clone">
   {% set url = [darcsConfig.baseUrl, &quot;/repos/", repo | slugify] | join | url %}
  &lt;pre id=&quot;clone-command"&gt;darcs clone {{ url }}</pre>
  <button id="repo-clone" onclick="copyCommand()">Copy</buton>

After

<div class=&quot;row&quot;>
  <div class="col">
    <h1>{{repo}}</h1>
  </div>

repo.njk:13

Before

<ul >
      <li ><a href="/repos/{{repo | slugify}}/files">Files</a></li>
      <li ><a href="/repos/{{repo | slugify}}/patches/page1">Patches</a></li>
    </ul>

After

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

<div class="row">
  <div class="col-auto">
    <div class="input-group mb-3">
      <span class="clone input-group-text">
        {% set url = [darcsConfig.baseUrl, "/repos/", repo | slugify] | join | url %}
        darcs clone {{ url }}
      </span>
      <btn class="btn btn-primary" onclick="copyCommand()">Copy</span>
    </div>
  </div>
</div>