erjemin/2026-etpgrf-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mod: темы (светлая и темная) включаются автоматически

Browse Source
This commit is contained in:
Sergei Erjemin
2026-01-10 15:44:18 +03:00
parent eb79db9f89
commit b03b517970
4 changed files with 45 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
etpgrf_site/typograph/templates/typograph/base.html
View File

@@ -1,21 +1,37 @@
<!doctype html> {% load static %}<!doctype html>
<html lang="ru"> <html lang="ru">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}ETPGRF — единая типографика для веба{% endblock %}</title> <title>{% block title %}ETPGRF — единая типографика для веба{% endblock %}</title>
{# Bootstrap 5 CSS #}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" /> {# Bootstrap 5 CSS #}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
{# Bootstrap Icons #}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" /> {# Bootstrap Icons #}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
{# HTMX #}<script src="https://unpkg.com/htmx.org@1.9.10"></script> {# HTMX #}<script src="https://unpkg.com/htmx.org@1.9.10"></script>
{# Alpine.js #}<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> {# Alpine.js #}<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
{# Polyfill for Import Maps #}<script async src="https://ga.jspm.io/npm:es-module-shims@1.10.0/dist/es-module-shims.js"></script> {# Polyfill for Import Maps #}<script async src="https://ga.jspm.io/npm:es-module-shims@1.10.0/dist/es-module-shims.js"></script>
<script type="text/javascript">
// Автоматическое переключение темы (Dark/Light)
(function() {
function updateTheme(e) {
const theme = e.matches ? 'dark' : 'light';
document.documentElement.setAttribute('data-bs-theme', theme);
}
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
updateTheme(darkModeMediaQuery); // Установить при загрузке
darkModeMediaQuery.addEventListener('change', updateTheme); // Слушать изменения
})();
</script>
<style> <style>
/* Небольшие стили для красоты */ /* Небольшие стили для красоты */
body { background-color: #f8f9fa; } body { background-color: var(--bs-body-bg); }
.result-box { .result-box {
background: white; /* Используем переменные Bootstrap для адаптации к теме */
border: 1px solid #dee2e6; background: var(--bs-body-bg);
color: var(--bs-body-color);
border: 1px solid var(--bs-border-color);
border-radius: 0.375rem; border-radius: 0.375rem;
padding: 1rem; padding: 1rem;
min-height: 300px; min-height: 300px;
@@ -25,6 +41,12 @@
white-space: pre-wrap; /* Чтобы pre переносил строки */ white-space: pre-wrap; /* Чтобы pre переносил строки */
font-family: inherit; /* Наследуем шрифт, если это pre */ font-family: inherit; /* Наследуем шрифт, если это pre */
} }
/* Стили для CodeMirror, чтобы он вписался в Bootstrap */
.cm-editor {
border: 1px solid var(--bs-border-color);
border-radius: 0.375rem;
height: 300px; /* Фиксированная высота */
}
/* --- Висячая пунктуация (Hanging Punctuation) --- */ /* --- Висячая пунктуация (Hanging Punctuation) --- */
/* Слева */ /* Слева */

16
etpgrf_site/typograph/templates/typograph/index.html
View File

@@ -266,11 +266,17 @@
syntaxHighlighting, syntaxHighlighting,
defaultHighlightStyle, defaultHighlightStyle,
bracketMatching, bracketMatching,
defaultKeymap defaultKeymap,
Compartment
} from "{% static 'codemirror/editor.js' %}"; } from "{% static 'codemirror/editor.js' %}";
const resultWrapper = document.getElementById('cm-result-wrapper'); const resultWrapper = document.getElementById('cm-result-wrapper');
const themeCompartment = new Compartment();
function getTheme() {
return window.matchMedia('(prefers-color-scheme: dark)').matches ? oneDark : [];
}
// Словарь названий для спецсимволов // Словарь названий для спецсимволов
const charNames = { const charNames = {
0x00a0: "NoBreakable Space (неразрывный пробел — &nbsp;)", 0x00a0: "NoBreakable Space (неразрывный пробел — &nbsp;)",
@@ -317,7 +323,7 @@
bracketMatching(), bracketMatching(),
keymap.of(defaultKeymap), keymap.of(defaultKeymap),
html(), html(),
oneDark, themeCompartment.of(getTheme()),
EditorState.readOnly.of(true) EditorState.readOnly.of(true)
] ]
}); });
@@ -335,5 +341,11 @@
}); });
} }
}); });
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
resultView.dispatch({
effects: themeCompartment.reconfigure(getTheme())
});
});
</script> </script>
{% endblock %} {% endblock %}

5
frontend-assembly/src/editor.js
View File

@@ -1,6 +1,9 @@
// Реэкспорт всех необходимых модулей для использования в браузере (через <script type="module">) // Реэкспорт всех необходимых модулей для использования в браузере (через <script type="module">)
export { EditorState } from "@codemirror/state"; export {
EditorState,
Compartment
} from "@codemirror/state";
export { export {
EditorView, EditorView,
lineNumbers, lineNumbers,

1
public/static/codemirror/editor.js
View File

@@ -22853,6 +22853,7 @@ var oneDark = [oneDarkTheme, /* @__PURE__ */ syntaxHighlighting(oneDarkHighlight
function createReadOnlyEditor(parent, text) { function createReadOnlyEditor(parent, text) {
} }
export { export {
Compartment,
Decoration, Decoration,
EditorState, EditorState,
EditorView, EditorView,