feat(easel): add bootstrap

.gitignore

@@ -2,3 +2,5 @@
 .pytest_cache
 .venv
 #.vscode
+static/node_modules
+static/dist

Dockerfile

@@ -7,6 +7,14 @@ COPY pyproject.toml poetry.lock README.md ./
 RUN poetry config virtualenvs.in-project true
 RUN poetry install --with app --no-root
 
+FROM node:24 AS node-builder
+ENV PATH=/app/node_modules/.bin:$PATH
+WORKDIR /app
+COPY static/package.json static/package-lock.json ./
+RUN npm ci
+COPY static ./
+RUN npm run build
+
 FROM python:3.12-slim
 ENV PATH="/app/.venv/bin:$PATH"
 WORKDIR /app
@@ -18,6 +26,7 @@ ENV LANG=ru_RU.UTF-8
 ENV LC_ALL=ru_RU.UTF-8
 ENV TZ="Europe/Moscow"
 COPY --from=builder /app ./
+COPY --from=node-builder /app/dist ./static/dist
 COPY gallery gallery/
 
 CMD ["uvicorn", "gallery.main:app", "--host", "0.0.0.0", "--port", "80", "--log-config", "gallery/logging.yaml"]

README.md

@@ -1,9 +1,9 @@
-# Gallery
+# API Gallery
 
 ## View
 
 https://api.shmyga.ru
 
-## API Docs
+## Swagger
 
 https://api.shmyga.ru/docs

docker/develop.sh

@@ -1,2 +0,0 @@
-#!/usr/bin/env bash
-docker compose -f docker-compose-develop.yaml up --build --watch

gallery.code-workspace

@@ -33,12 +33,14 @@
         "type": "debugpy",
         "request": "launch",
         "module": "uvicorn",
-        "args": [
+        "args": ["gallery.main:app", "--reload", "--log-config", "gallery/logging.yaml"],
-          "gallery.main:app",
+      },
-          "--reload",
+      {
-          "--log-config",
+        "name": "gallery:static",
-          "gallery/logging.yaml",
+        "cwd": "${workspaceFolder}/static",
-        ],
+        "request": "launch",
+        "type": "node-terminal",
+        "command": "npm run dev",
       },
     ],
   },

gallery/easel/route/api/schedule.py

@@ -7,12 +7,12 @@ from gallery.sketch.schedule.model import ChannelId, Schedule
 
 
 def mount(app: FastAPI):
-    @app.get("/api/schedule/channels")
+    @app.get("/api/schedule/channels", tags=["API"])
     async def get_api_schedule_channels(request: AppRequest) -> list[ChannelId]:
         schedule_api = request.app.state.api.schedule
         return await schedule_api.get_channels()
 
-    @app.get("/api/schedule/{channel}/{date}")
+    @app.get("/api/schedule/{channel}/{date}", tags=["API"])
     async def get_api_schedule_channel_schedule(
         request: AppRequest, channel: str, date: datetime.date
     ) -> Schedule:

gallery/easel/route/api/weather.py

@@ -7,21 +7,21 @@ from gallery.sketch.weather.model import Location, WeatherResponse
 
 
 def mount(app: FastAPI):
-    @app.get("/api/weather/locations")
+    @app.get("/api/weather/locations", tags=["API"])
     async def get_api_weather_locations(
         request: AppRequest, query: str
     ) -> list[Location]:
         weather_api = request.app.state.api.weather
         return await weather_api.find_locations(query)
 
-    @app.get("/api/weather/{location}/day/{date}")
+    @app.get("/api/weather/{location}/day/{date}", tags=["API"])
     async def get_api_weather_day(
         request: AppRequest, location: str, date: datetime.date
     ) -> WeatherResponse:
         weather_api = request.app.state.api.weather
         return await weather_api.get_day(location, date)
 
-    @app.get("/api/weather/{location}/days/{days}")
+    @app.get("/api/weather/{location}/days/{days}", tags=["API"])
     async def get_api_weather_days(
         request: AppRequest, location: str, days: int
     ) -> WeatherResponse:

gallery/easel/route/view/common/__init__.py

@@ -6,6 +6,7 @@ from fastapi.responses import HTMLResponse
 from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
 
+from gallery.util import root_path
 from gallery.version import __version__
 
 
@@ -15,13 +16,15 @@ class Section(NamedTuple):
 
 
 SECTIONS = [
-    Section("weather", "Погода"),
+    Section("weather", "Weather"),
-    Section("schedule", "Телепрограмма"),
+    Section("schedule", "TV program"),
 ]
 
 
 def mount(app: FastAPI):
     base_dir = Path(__file__).parent
+    print("!", root_path / "static/dist")
+    app.mount("/static/main", StaticFiles(directory=root_path / "static/dist"))
     app.mount("/static/common", StaticFiles(directory=base_dir / "static"))
     templates = Jinja2Templates(directory=base_dir / "templates")
 

gallery/easel/route/view/common/static/style.css

@@ -1,84 +1,3 @@
-/*
-base
-*/
-body {
-  font-size: 1.5rem;
-}
-
-h3 {
-  margin: 0.5rem 0;
-}
-
-/*
-table
-*/
-table {
-  table-layout: fixed;
-  border-collapse: collapse;
-}
-
-table,
-th,
-td {
-  text-align: center;
-}
-
-td {
-  padding: 0.1rem 0.4rem;
-}
-
-/*
-a.button
-*/
-a.button {
-  text-decoration: none;
-  color: inherit;
-}
-
-.button.disabled {
-  pointer-events: none;
-  cursor: default;
-  color: gray;
-  filter: grayscale(100%);
-}
-
-/*
-app
-*/
-.app-container {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: stretch;
-}
-
-.app-menu {
-  display: flex;
-  flex-direction: column;
-  margin: 0.5rem;
-}
-
-.app-content {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-}
-
-.app-header {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  gap: 0.5rem;
-  justify-content: center;
-}
-
-.app-link-home > * {
-  width: 2rem;
-  height: 2rem;
-  background-image: url("/static/common/gallery.png");
-  background-size: contain;
-}
-
 .icon {
   display: inline-block;
   width: 2rem;
@@ -86,29 +5,20 @@ app
   background-size: contain;
 }
 
-ul.app-list {
+.widget .app {
-  list-style: none;
+  padding: 0.5rem !important;
-  padding-left: 0;
-  width: 30rem;
-  margin: auto;
 }
 
-ul.app-list > li {
+.widget header {
-  border: 1px solid lightgrey;
+  display: none !important;
 }
 
-ul.app-list > li > a {
+.widget main {
   display: flex;
-  gap: 0.25rem;
+  flex-direction: column;
-  padding: 0.5rem 2rem;
+  align-items: center;
-  text-decoration: none;
-  color: inherit;
 }
 
-ul.app-list > li:hover {
+.widget footer {
-  border-color: rgb(125, 125, 255);
+  display: none !important;
-}
-
-ul.app-list > li:hover > a {
-  color: rgb(125, 125, 255);
 }

gallery/easel/route/view/common/templates/base.html

@@ -9,6 +9,10 @@
   <meta http-equiv="X-UA-Compatible"
         content="ie=edge">
   <title>{% block title %}{% endblock %}</title>
+  <link rel="stylesheet"
+        href="/static/main/gallery-static.css?v={{version}}">
+  <script type="module"
+          src="/static/main/gallery-static.js?v={{version}}"></script>
   <link rel="stylesheet"
         href="/static/common/style.css?v={{version}}">
   <link rel="icon"
@@ -17,22 +21,83 @@
   {% endblock %}
 </head>
 
-<body class="app-container">
+<body>
-  <div class="app-menu">
+  <div class="app col-lg-8 mx-auto p-3 py-md-5">
-    <a class="app-link-home"
+    <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
-       href="/">
+      <a href="/"
-      <div></div>
+         class="d-flex align-items-center text-dark text-decoration-none">
+        <div class="icon me-2"
+             style="background-image: url(/static/common/gallery.png);"></div>
+        <span class="fs-4 text-body">API Gallery</span>
       </a>
-  </div>
+      <ul class="navbar-nav flex-row flex-wrap ms-md-auto">
-  <div class="app-content">
+        <li class="nav-item dropdown">
-    <h3 class="app-header">
+          <button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
-      {% block header %}{% endblock %}</span>
+                  id="bd-theme"
-    </h3>
+                  type="button"
+                  aria-expanded="false"
+                  data-bs-toggle="dropdown"
+                  aria-label="Toggle theme (auto)">
+            <i class="bi me-2 opacity-50 theme-icon-active"></i>
+            <span class="d-lg-none ms-2"
+                  id="bd-theme-text">Toggle theme</span>
+          </button>
+          <ul class="dropdown-menu dropdown-menu-end"
+              aria-labelledby="bd-theme-text">
+            <li>
+              <button type="button"
+                      class="dropdown-item d-flex align-items-center"
+                      data-bs-theme-value="light"
+                      aria-pressed="false">
+                <i class="bi bi-sun-fill me-2 opacity-50 theme-icon"></i>
+                Light
+              </button>
+            </li>
+            <li>
+              <button type="button"
+                      class="dropdown-item d-flex align-items-center"
+                      data-bs-theme-value="dark"
+                      aria-pressed="false">
+                <i class="bi bi-moon-stars-fill me-2 opacity-50 theme-icon"></i>
+                Dark
+              </button>
+            </li>
+            <li>
+              <button type="button"
+                      class="dropdown-item d-flex align-items-center active"
+                      data-bs-theme-value="auto"
+                      aria-pressed="true">
+                <i class="bi bi-circle-half me-2 opacity-50 theme-icon"></i>
+                Auto
+              </button>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </header>
+    <main>
       {% block content %}{% endblock %}
-    <div class="app-footer">
+    </main>
-      {% block footer %}{% endblock %}
+    <footer class="pt-5 my-5 text-muted border-top">
-    </div>
+      Created by shmyga &middot; &copy; 2026
+    </footer>
   </div>
+  <script>
+    (function () {
+      document.toggleTheme = () => {
+        const current = document.documentElement.getAttribute('data-bs-theme');
+        const next = current === 'dark' ? 'light' : 'dark';
+        document.documentElement.setAttribute('data-bs-theme', next);
+        localStorage.setItem('theme', next);
+      };
+
+      const params = new URLSearchParams(window.location.search);
+      const widget = params.get('widget') || window.location.hostname.startsWith('weather');
+      if (widget) {
+        document.body.classList.add('widget');
+      }
+    }());
+  </script>
 </body>
 
 </html>

gallery/easel/route/view/common/templates/root_index.html

@@ -1,21 +1,24 @@
 {% extends "base.html" %}
-{% block title %}Информация{% endblock %}
+{% block title %}Index{% endblock %}
 {% block head %}
 {{ super() }}
 {% endblock %}
 
-{% block header %}Информация{% endblock %}
-
 {% block content %}
-<ul class="app-list">
+<h1>View</h1>
+<div class="list-group mb-5">
   {% for section in sections %}
-  <li>
+  <a href="{{section.link}}"
-    <a href="{{section.link}}">
+     class="list-group-item list-group-item-action px-4">
-      <span class="icon"
+    <div class="d-flex w-100">
+      <span class="icon me-2"
             style="background-image: url(/static/{{section.link}}/{{section.link}}.png);"></span>
-      <span>{{section.title}}</span>
+      <h4>{{section.title}}</h4>
+    </div>
   </a>
-  </li>
   {% endfor %}
-</ul>
+</div>
+<hr class="col-3 col-md-2 mb-5">
+<h1>Docs</h1>
+<a href="/docs" target="_blank"><h4>Swagger</h4></a>
 {% endblock %}

gallery/easel/route/view/schedule/static/style.css

@@ -1,25 +0,0 @@
-table.schedule-table {
-  width: 60rem;
-  margin: auto;
-  table-layout: auto
-}
-
-table.schedule-table tr {
-  border-bottom: 1px solid lightgray;
-}
-
-table.schedule-table td {
-  text-align: left;
-}
-
-table.schedule-table tr.live {
-  font-weight: bold;
-}
-
-table.schedule-table .title {
-  margin-top: 0.5rem;
-  font-style: italic;
-  font-weight: bold;
-  font-size: 120%;
-  background-color: lightgray;
-}

gallery/easel/route/view/schedule/templates/channel.html

@@ -11,18 +11,17 @@
       type="image/x-icon">
 {% endblock %}
 
-{% block header %}
-<a class="button {{'disabled' if response.date == datetime.date.today() else ''}}"
-   href="../tag/{{tag_util.create_tag('day', response.date, -1)}}">⬅️</a>
-<a class="button"
-   href="../..">⬆️</a>
-<span>{{response.channel.name}} | {{response.date.strftime('%a, %d %B %Y')}}</span>
-<a class="button"
-   href="../tag/{{tag_util.create_tag('day', response.date, 1)}}">➡️</a>
-{% endblock %}
-
 {% block content %}
-<table class="schedule-table">
+<h4>
+  <a class="button {{'disabled' if response.date == datetime.date.today() else ''}}"
+     href="../tag/{{tag_util.create_tag('day', response.date, -1)}}">⬅️</a>
+  <a class="button"
+     href="../..">⬆️</a>
+  <span>{{response.channel.name}} | {{response.date.strftime('%a, %d %B %Y')}}</span>
+  <a class="button"
+     href="../tag/{{tag_util.create_tag('day', response.date, 1)}}">➡️</a>
+</h4>
+<table class="table">
   <thead>
     <tr>
       <td></td>
@@ -32,7 +31,7 @@
   </thead>
   <tbody>
     {% for value in response.values %}
-    <tr class="{{'live' if value.live else ''}}">
+    <tr class="{{'table-success' if value.live else ''}}">
       <td>{{value.start.strftime('%H:%M')}}</td>
       <td>{{(value.end - value.start) | timedelta_format}}</td>
       <td>{{value.label}}</td>

gallery/easel/route/view/schedule/templates/index.html

@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% block title %}ТВ{% endblock %}
+{% block title %}TV program{% endblock %}
 {% block head %}
 {{ super() }}
 <link rel="stylesheet"
@@ -9,13 +9,18 @@
       type="image/x-icon">
 {% endblock %}
 
-{% block header %}Телепрограмма{% endblock %}
-
 {% block content %}
-<ul class="app-list">
+<h1>TV program</h1>
-    <li style="margin-bottom: 0.25rem; font-weight: bold;"><a href="schedule/tag/today">Все</a></li>
+<div class="list-group mb-5">
+  <a href="schedule/tag/today"
+     class="list-group-item list-group-item-action px-4">
+    <span class="fw-bold">Все</span>
+  </a>
   {% for channel in channels %}
-    <li><a href="schedule/{{channel.id}}">{{channel.name}}</a></li>
+  <a href="schedule/{{channel.id}}"
+     class="list-group-item list-group-item-action px-4">
+    <span class="text-primary">{{channel.name}}</span>
+  </a>
   {% endfor %}
-</ul>
+</div>
 {% endblock %}

gallery/easel/route/view/schedule/templates/schedule.html

@@ -11,19 +11,18 @@
       type="image/x-icon">
 {% endblock %}
 
-{% block header %}
-<a class="button {{'disabled' if response.date == datetime.date.today() else ''}}"
-   href="../tag/{{tag_util.create_tag('day', response.date, -1)}}">⬅️</a>
-<a class="button"
-   href="..">⬆️</a>
-<span>{{'Прямые трансляции' if live else 'Программа'}} | {{response.date.strftime('%a, %d %B %Y')}}</span>
-<a class="button"
-   href="../tag/{{tag_util.create_tag('day', response.date, 1)}}">➡️</a>
-{% endblock %}
-
 {% block content %}
+<h4>
+  <a class="button {{'disabled' if response.date == datetime.date.today() else ''}}"
+     href="../tag/{{tag_util.create_tag('day', response.date, -1)}}">⬅️</a>
+  <a class="button"
+     href="..">⬆️</a>
+  <span>{{'Прямые трансляции' if live else 'Программа'}} | {{response.date.strftime('%a, %d %B %Y')}}</span>
+  <a class="button"
+     href="../tag/{{tag_util.create_tag('day', response.date, 1)}}">➡️</a>
+</h4>
 <div>
-  <table class="schedule-table {{'live' if live else ''}}">
+  <table class="table">
     <thead>
       <tr>
         <td></td>
@@ -35,7 +34,7 @@
       {% for response in responses %}
       {% set values = (response.values|selectattr('live') if live else response.values)|list %}
       {% if values|length > 0 %}
-      <tr class="title">
+      <tr class="table-primary fs-4">
         <td colspan="3">
           <div>{{response.channel.name}}</div>
         </td>
@@ -43,7 +42,7 @@
         <td></td>
       </tr>
       {% for value in values %}
-      <tr class="{{'live' if not live and value.live else ''}}">
+      <tr class="{{'table-success' if not live and value.live else ''}}">
         <td>{{value.start.strftime('%H:%M')}}</td>
         <td>{{(value.end - value.start) | timedelta_format}}</td>
         <td>{{value.label}}</td>

gallery/easel/route/view/weather/static/style.css

@@ -1,16 +1,15 @@
 .header {
-  font-size: 1rem;
+  font-size: 0.9rem;
   text-align: left;
   padding-top: 0.25rem;
 }
 
 .date {
-  font-size: 1.5rem;
+  background: rgba(1, 0, 0, 0.1) !important;
-  background: rgba(0, 0, 0, 0.1);
 }
 
 .date.now {
-  background: rgba(0, 128, 255, 0.2);
+  background: rgba(0, 128, 255, 0.2) !important;
 }
 
 .date .value a {
@@ -59,7 +58,7 @@
 }
 
 .pressure {
-  padding: 0;
+  padding: 0 !important;
 }
 
 .pressure .value {

gallery/easel/route/view/weather/templates/index.html

@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% block title %}Погода{% endblock %}
+{% block title %}Weather{% endblock %}
 {% block head %}
 {{ super() }}
 <link rel="stylesheet"
@@ -9,27 +9,73 @@
       type="image/x-icon">
 {% endblock %}
 
-{% block header %}Погода{% endblock %}
-
 {% block content %}
+<h1>Weather</h1>
 <form action=""
       method="get"
-      style="margin: 0 auto 1rem;">
+      class="mb-4">
-  <input id="query"
+  <div class="input-group mb-3">
-         name="query">
+    <input type="text"
-  <button type="submit">Search</button>
+           class="form-control"
+           id="query"
+           name="query"
+           placeholder="Enter the city name">
+    <button class="btn btn-primary"
+            type="submit">Search</button>
+  </div>
 </form>
-<ul class="app-list">
+<ul id="locations"
+    class="list-group mb-5">
   {% for location in locations %}
-  <li>
+  <a href="weather/{{location.id}}"
-    <a href="weather/{{location.id}}">
+     class="list-group-item list-group-item-action px-4"
-      <span>{{location.name}}</span>
+     onclick="saveLocation({id:'{{location.id}}', name:'{{location.name}}'});">
-      <span style="font-size: 70%; margin-left: 0.5rem;">
+    <span class="text-primary">{{location.name}}</span>
+    <span class="small ms-1 text-secondary">
       {{location.country}}, {{location.district}}, {{location.subdistrict}}
     </span>
     <span></span>
   </a>
-  </li>
   {% endfor %}
 </ul>
+<script>
+  (function () {
+    document.loadLocations = () => {
+      const locations = JSON.parse(window.localStorage.getItem('locations') || '{}');
+      const container = document.querySelector('#locations');
+      container.innerHTML = '';
+      for (const [id, name] of Object.entries(locations)) {
+        const element = document.createElement('a');
+        element.href = `weather/${id}`;
+        element.className = 'list-group-item list-group-item-action px-4 d-flex justify-content-between align-items-start';
+        element.innerHTML = `
+        <span class="text-primary me-auto">${name}</span>
+        <span class="text-danger" onclick="removeLocation('${id}'); event.preventDefault();">&#x2715;</span>
+        `;
+        container.appendChild(element);
+      }
+    }
+
+    document.saveLocation = (location) => {
+      const locations = JSON.parse(window.localStorage.getItem('locations') || '{}');
+      locations[location.id] = location.name;
+      window.localStorage.setItem('locations', JSON.stringify(locations));
+    }
+
+    document.removeLocation = (id) => {
+      const locations = JSON.parse(window.localStorage.getItem('locations') || '{}');
+      delete locations[id];
+      window.localStorage.setItem('locations', JSON.stringify(locations));
+      document.loadLocations();
+    }
+
+    const params = new URLSearchParams(window.location.search);
+    const searchQuery = params.get('query');
+    if (searchQuery) {
+      document.querySelector('#query').value = searchQuery;
+    } else {
+      document.loadLocations();
+    }
+  })();
+</script>
 {% endblock %}

gallery/easel/route/view/weather/templates/weather.html

@@ -9,24 +9,23 @@
       type="image/x-icon">
 {% endblock %}
 
-{% block header %}
-{% if response.period == 'day' %}
-<a class="button {{'disabled' if response.date == datetime.date.today() else ''}}"
-   href="../tag/{{tag_util.create_tag('day', response.date, -1)}}">⬅️</a>
-<a class="button"
-   href="../tag/days-10">⬆️</a>
-<span>{{response.location}} | {{response.date.strftime('%a, %d %B %Y')}}</span>
-<a class="button"
-   href="../tag/{{tag_util.create_tag('day', response.date, 1)}}">➡️</a>
-{% endif %}
-{% if response.period == 'days' %}
-<span>{{response.location}} | {{response.date.strftime('%a, %d %B %Y')}}</span>
-{% endif %}
-{% endblock %}
-
 {% block content %}
-<div>
+<h4>
-  <table style="margin: auto;">
+  {% if response.period == 'day' %}
+  <a class="button {{'disabled' if response.date == datetime.date.today() else ''}}"
+     href="../tag/{{tag_util.create_tag('day', response.date, -1)}}">⬅️</a>
+  <a class="button"
+     href="../tag/days-10">⬆️</a>
+  <span>{{response.location}} | {{response.date.strftime('%a, %d %B %Y')}}</span>
+  <a class="button"
+     href="../tag/{{tag_util.create_tag('day', response.date, 1)}}">➡️</a>
+  {% endif %}
+  {% if response.period == 'days' %}
+  <span>{{response.location}} | {{response.date.strftime('%a, %d %B %Y')}}</span>
+  {% endif %}
+</h4>
+<div class="table-responsive">
+  <table class="table table-borderless table-compact text-center w-auto" style="font-size: 130%;">
     <tbody>
       <!-- date -->
       <tr>

gallery/util.py

@@ -1,5 +1,11 @@
+from pathlib import Path
+
+
 class TimeUnit:
     SECOND = 1
     MINUTE = 60 * SECOND
     HOUR = 60 * MINUTE
     DAY = 24 * HOUR
+
+
+root_path = Path(__file__).parent.parent

static/.dockerignore

@@ -0,0 +1,2 @@
+node_modules/
+dist/

static/.nvmrc

@@ -0,0 +1 @@
+24

static/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "gallery-static",
+  "version": "0.1.0",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch"
+  },
+  "author": "shmyga <shmyga.z@gmail.com>",
+  "license": "ISC",
+  "description": "",
+  "dependencies": {
+    "@popperjs/core": "^2.11.8",
+    "bootstrap": "^5.3.8",
+    "bootstrap-icons": "^1.13.1",
+    "sass": "^1.99.0"
+  },
+  "devDependencies": {
+    "vite": "^8.0.9"
+  }
+}

static/src/index.ts

@@ -0,0 +1,3 @@
+import "./main.scss";
+import "bootstrap";
+import "./theme";

static/src/main.scss

@@ -0,0 +1,9 @@
+@import "bootstrap/scss/bootstrap";
+$bootstrap-icons-font-dir: "bootstrap-icons/font/fonts";
+@import "bootstrap-icons/font/bootstrap-icons";
+
+.table.table-compact {
+  td {
+    padding: 0.1rem 0.4rem;
+  }
+}

static/src/theme.js

@@ -0,0 +1,84 @@
+/*!
+ * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2025 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ */
+
+(() => {
+  "use strict";
+
+  const getStoredTheme = () => localStorage.getItem("theme");
+  const setStoredTheme = (theme) => localStorage.setItem("theme", theme);
+
+  const getPreferredTheme = () => {
+    const storedTheme = getStoredTheme();
+    if (storedTheme) {
+      return storedTheme;
+    }
+
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  };
+
+  const setTheme = (theme) => {
+    if (theme === "auto") {
+      document.documentElement.setAttribute(
+        "data-bs-theme",
+        window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light",
+      );
+    } else {
+      document.documentElement.setAttribute("data-bs-theme", theme);
+    }
+  };
+
+  setTheme(getPreferredTheme());
+
+  const showActiveTheme = (theme, focus = false) => {
+    const themeSwitcher = document.querySelector("#bd-theme");
+
+    if (!themeSwitcher) {
+      return;
+    }
+
+    const themeSwitcherText = document.querySelector("#bd-theme-text");
+    const activeThemeIcon = document.querySelector(".theme-icon-active");
+    const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`);
+    const activeThemeIconClass = btnToActive.querySelector("i.bi").className.match(/bi-[\w-]+/)[0];
+
+    document.querySelectorAll("[data-bs-theme-value]").forEach((element) => {
+      element.classList.remove("active");
+      element.setAttribute("aria-pressed", "false");
+    });
+
+    btnToActive.classList.add("active");
+    btnToActive.setAttribute("aria-pressed", "true");
+    const classesToRemove = Array.from(activeThemeIcon.classList).filter((className) => className.startsWith("bi-"));
+    activeThemeIcon.classList.remove(...classesToRemove);
+    activeThemeIcon.classList.add(activeThemeIconClass);
+    const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
+    themeSwitcher.setAttribute("aria-label", themeSwitcherLabel);
+
+    if (focus) {
+      themeSwitcher.focus();
+    }
+  };
+
+  window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
+    const storedTheme = getStoredTheme();
+    if (storedTheme !== "light" && storedTheme !== "dark") {
+      setTheme(getPreferredTheme());
+    }
+  });
+
+  window.addEventListener("DOMContentLoaded", () => {
+    showActiveTheme(getPreferredTheme());
+
+    document.querySelectorAll("[data-bs-theme-value]").forEach((toggle) => {
+      toggle.addEventListener("click", () => {
+        const theme = toggle.getAttribute("data-bs-theme-value");
+        setStoredTheme(theme);
+        setTheme(theme);
+        showActiveTheme(theme, true);
+      });
+    });
+  });
+})();

static/vite.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from "vite";
+import packageJson from "./package.json";
+
+export default defineConfig({
+  base: "./",
+  build: {
+    outDir: "./dist",
+    lib: {
+      entry: "./src/index.ts",
+      name: packageJson.name,
+      fileName: (format) => `${packageJson.name}.js`,
+    },
+  },
+});