index page typescript template and styling WIP

95482f5b04099e8ba28ce3b0ced06c4b0d318b33

Tucker McKnight | Mon Dec 29 2025

index page typescript template and styling WIP

Side-by-side

Stacked

js_templates/helpers/nav.ts:36

Before

    homepageButtons: reposConfig.repos[repoName].defaultTemplateConfiguration?.homepageButtons

After

    homepageButtons: reposConfig.repos[repoName].defaultTemplateConfiguration?.homepageButtons || []

js_templates/index.ts:0

Before

After

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

After

import indexJsTemplate from './js_templates/index.ts'

main.ts:251

Before

  // INDEX.NJK
  const indexTemplate = fsImport.readFileSync(`${import.meta.dirname}/templates/index.njk`).toString()
    'repos/index.njk',
    topLayoutPartial + indexTemplate + bottomLayoutPartial,

After

  // INDEX.TS
    'repos/index.11ty.js',
    indexJsTemplate(eleventyConfig),

scss/design-board.scss:281

Before

After

src/repos.ts:56

Before

      defaultBranch: "main",

After

      defaultBranch: reposConfig.repos[repoName].defaultBranch,