index page typescript template and styling WIP

95482f5b04099e8ba28ce3b0ced06c4b0d318b33

Tucker McKnight <tmcknight@instructure.com> | Mon Dec 29 2025

index page typescript template and styling WIP
js_templates/helpers/nav.ts:36
Before
35
36
37
38
39
40
    repoBranchCommitsBase: () => repoBranchCommitsBase,
    repoCurrentBranchCommits: () => `${repoBranchCommitsBase}page1`,
    repoCurrentBranchBranches: () => `${currentBranchPath}/branches`,
    homepageButtons: reposConfig.repos[repoName].defaultTemplateConfiguration?.homepageButtons
  }
}
After
35
36
37
38
39
40
    repoBranchCommitsBase: () => repoBranchCommitsBase,
    repoCurrentBranchCommits: () => `${repoBranchCommitsBase}page1`,
    repoCurrentBranchBranches: () => `${currentBranchPath}/branches`,
    homepageButtons: reposConfig.repos[repoName].defaultTemplateConfiguration?.homepageButtons || []
  }
}
js_templates/index.ts:0
Before








































⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
After
-1
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
export default async (eleventyConfig: any) => {
  const slugify = eleventyConfig.getFilter("slugify")

  return (data: any) => {
    return `
      <!doctype html>
      <html lang="en">
        <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title>Repositories</title>
          <link rel="stylesheet" href="/css/design-board.css">
        </head>
        <body>
          <div class="container my-4">
            <div class="row">
              <div class="col">
                <h1>Tucker's Repositories</h1>
              </div>
            </div>
            <div class="row">
              <div class="col d-flex flex-wrap">
                ${data.repos.map((repo) => {
                  return `
                    <div class="mx-2 card bezel-gray" style="width: 18rem;">
                      <div class="card-body">
                        <h2 class="card-title fs-5">${repo.name}</h2>
                        ${repo.description ? `<p class="card-text">${repo.description}</p>` : ''}
                        <a href="${data.reposPath}/${slugify(repo.name)}/branches/${repo.defaultBranch}" class="btn btn-primary text-white">Go to ${repo.name}</a>
                      </div>
                    </div>
                  `
                }).join('')}
              </div>
            </div>
          </div>
        </div>
      </body>
    </html>
  `
  }
}
main.ts:17
Before
16
17
18
19

20
import filesJsTemplate from './js_templates/files.ts'
import fileJsTemplate from './js_templates/file.ts'
import commitJsTemplate from './js_templates/commit.ts'

⁣
const ajv = new Ajv()
const exec = util.promisify(childProcess.exec)
After
16
17
18
19
20
21
import filesJsTemplate from './js_templates/files.ts'
import fileJsTemplate from './js_templates/file.ts'
import commitJsTemplate from './js_templates/commit.ts'
import indexJsTemplate from './js_templates/index.ts'

const ajv = new Ajv()
const exec = util.promisify(childProcess.exec)
main.ts:251
Before
250
251
252
253
254
255
256
257
258
259
  const topLayoutPartial = fsImport.readFileSync(`${import.meta.dirname}/partial_templates/main_top.njk`).toString()
  const bottomLayoutPartial = fsImport.readFileSync(`${import.meta.dirname}/partial_templates/main_bottom.njk`).toString()

  // INDEX.NJK
  const indexTemplate = fsImport.readFileSync(`${import.meta.dirname}/templates/index.njk`).toString()
  eleventyConfig.addTemplate(
    'repos/index.njk',
    topLayoutPartial + indexTemplate + bottomLayoutPartial,
    {
      permalink: `${reposPath}/index.html`,
    }
After
250
251
252
253

254
255
256
257
258
  const topLayoutPartial = fsImport.readFileSync(`${import.meta.dirname}/partial_templates/main_top.njk`).toString()
  const bottomLayoutPartial = fsImport.readFileSync(`${import.meta.dirname}/partial_templates/main_bottom.njk`).toString()

  // INDEX.TS
⁣
  eleventyConfig.addTemplate(
    'repos/index.11ty.js',
    indexJsTemplate(eleventyConfig),
    {
      permalink: `${reposPath}/index.html`,
    }
scss/design-board.scss:281
Before
280
281

[data-bs-theme=dark] [data-type=after] mark, [data-bs-theme=dark] .token.inserted {
  background-color: rgba(51, 247, 160, .1); /* different green for dark mode; looks better */
⁣
}
After
280
281
282
[data-bs-theme=dark] [data-type=after] mark, [data-bs-theme=dark] .token.inserted {
  background-color: rgba(51, 247, 160, .1); /* different green for dark mode; looks better */
}
src/repos.ts:56
Before
55
56
57
58
59
60
      description: reposConfig.repos[repoName].description,
      branches,
      cloneUrl: cloneUrl.cloneUrl(reposConfig.baseUrl, repoName),
      defaultBranch: "main",
      tags: [], // todo
      commits,
    })
After
55
56
57
58
59
60
      description: reposConfig.repos[repoName].description,
      branches,
      cloneUrl: cloneUrl.cloneUrl(reposConfig.baseUrl, repoName),
      defaultBranch: reposConfig.repos[repoName].defaultBranch,
      tags: [], // todo
      commits,
    })