firefox/tridactyl.tridactyl
1
0
Fork 0
mirror of https://github.com/tridactyl/tridactyl.git synced 2026-09-10 07:16:33 -04:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Fix #5311: add nav pane to :tutor

Browse source
This commit is contained in:
Oliver Blanthorn 2026-07-23 17:32:15 +02:00
parent f5f9f2708a
commit 2bf0e5bd54
No known key found for this signature in database
GPG key ID: 2BB8C36BB504BFF3
2 changed files with 42 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
scripts/make_tutorial.sh
View file

@ -13,7 +13,8 @@ dest="../../../generated/static/clippy/"
for page in $pages
do
fileroot=$(echo "$page" | cut -d'.' -f-2)
sed "/REPLACETHIS/,$ d" tutor.template.html > "$dest$fileroot.html"
sed -e "s|href=\"$fileroot.html\"|aria-current=\"page\" &|" \
-e "/REPLACETHIS/,$ d" tutor.template.html > "$dest$fileroot.html"
"$(yarn bin)/marked" "$page" >> "$dest$fileroot.html"
sed "1,/REPLACETHIS/ d" tutor.template.html >> "$dest$fileroot.html"
sed -i.bak "s|\(href=['\"]\./[^'\"]*\)\.md\(['\"]\)|\1.html\2|g" "$dest$fileroot.html"

40
src/static/clippy/tutor.template.html
View file

@ -2,14 +2,54 @@
<html lang="en" class="TridactylOwnNamespace">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tridactyl Tutorial</title>
<link rel="stylesheet" href="../css/newtab.css">
<link rel="stylesheet" href="../css/content.css">
<link rel="stylesheet" href="../css/hint.css">
<link rel="stylesheet" href="../css/viewsource.css">
<link rel="shortcut icon" href="../logo/Tridactyl_64px.png">
<style>
.tutorial-nav {
position: fixed;
inset: 2em auto 2em max(1em, calc(50% - 35em));
width: 12em;
padding-right: 1em;
overflow-y: auto;
border-right: 1px solid;
}
.tutorial-nav ol { padding-left: 1.5em; }
.tutorial-nav li { break-inside: avoid; hyphens: none; text-align: left; }
.tutorial-nav [aria-current="page"] { font-weight: bold; text-decoration-thickness: 0.15em; }
@media screen and (max-width: 70em) {
.tutorial-nav {
position: static;
width: auto;
padding: 0 0 1em;
border-right: 0;
border-bottom: 1px solid;
}
.tutorial-nav ol { columns: 2; }
}
</style>
</head>
<body>
<nav class="tutorial-nav" aria-label="Tutorial pages">
<strong>Tutorial pages</strong>
<ol>
<li><a href="./1-tutor.html">Introduction</a></li>
<li><a href="./2-normal_mode.html">Normal mode</a></li>
<li><a href="./3-hint_mode.html">Hint mode</a></li>
<li><a href="./3-1-visual_mode.html">Visual mode</a></li>
<li><a href="./4-command_mode.html">Command mode</a></li>
<li><a href="./5-settings.html">Settings</a></li>
<li><a href="./6-containers.html">Containers</a></li>
<li><a href="./7-native_messenger.html">Native messenger</a></li>
<li><a href="./8-marks.html">Marks</a></li>
<li><a href="./8-1-i18n.html">Internationalisation</a></li>
<li><a href="./9-help.html">Getting help</a></li>
</ol>
</nav>
REPLACETHIS
</body>
<script src="../../content.js"></script>