A lightweight web component that generates a table of contents from a GitHub repository folder. Simply drop it into your page and configure the repository path and link prefix to create an automatically updating list of files.
See it in action at http://austegard.com/bsky/
Add the web component script to your page:
<script src="https://austegard.com/scripts/github-toc.js"></script>
Add the component to your HTML with the required attributes:
<github-toc
repo-path="https://github.com/username/repo/tree/branch/path"
link-prefix="https://your-site.com/path"
exclude="index.html, *.js, *.css"
include="*.html">
</github-toc>
| Attribute | Required | Description | Example |
|---|---|---|---|
repo-path |
Yes | Full GitHub URL to the repository folder | "https://github.com/username/repo/tree/main/docs" |
link-prefix |
No | Base URL prefix for generated links. If omitted, links will point directly to the files on GitHub. | "https://your-site.com/docs" |
exclude |
No | Comma-separated list of wildcard patterns to exclude | "index*, *.js, *.css" |
include |
No | Comma-separated list of wildcard patterns to include. If omitted, all files not excluded will be included. | "*.html, *.md" |
The exclude attribute supports wildcard patterns to filter out unwanted files.
* to match any sequence of charactersExamples:
"index*" - Excludes all files starting with “index”"*.js" - Excludes all JavaScript files"temp*, *.bak" - Excludes files starting with “temp” and ending with “.bak”The include attribute allows you to specify which files to show. If this attribute is not used, all files that are not excluded will be shown by default.
* to match any sequence of charactersExamples:
"*.html" - Includes only HTML files"project-*, doc-*" - Includes files starting with “project-“ or “doc-“The component automatically detects and links to associated README files following this pattern:
example.html, it looks for example_README.md in the same directoryThis feature makes it easy to provide and access documentation for individual files in your repository.
Complete HTML page example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Repository Contents</title>
<script src="https://austegard.com/scripts/github-toc.js"></script>
<style>
body {
font-family: system-ui, sans-serif;
max-width: 800px;
margin: 2rem auto;
padding: 0 1rem;
}
</style>
</head>
<body>
<h1>Repository Contents</h1>
<github-toc
repo-path="https://github.com/username/repo/tree/main/docs"
link-prefix="https://your-site.com/docs"
exclude="index*, *.js, *.css">
</github-toc>
</body>
</html>
Works in all modern browsers that support Web Components:
MIT License