Skip to content

Commit f78c84b

Browse files
jpscajpsca
committed
Tabs
1 parent 6b8d8cc commit f78c84b

File tree

13 files changed

+574
-43
lines changed

13 files changed

+574
-43
lines changed

‎docs/assets/css/base.css‎

Lines changed: 101 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1123,7 +1123,6 @@ html.cs-dark .page__content img.invert {
11231123
--admonition-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m15.07 11.25-.9.92C13.45 12.89 13 13.5 13 15h-2v-.5c0-1.11.45-2.11 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41a2 2 0 0 0-2-2 2 2 0 0 0-2 2H8a4 4 0 0 1 4-4 4 4 0 0 1 4 4 3.2 3.2 0 0 1-.93 2.25M13 19h-2v-2h2M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10c0-5.53-4.5-10-10-10"/></svg>');
11241124
}
11251125

1126-
11271126
/******* Search *******/
11281127

11291128
.search {
@@ -1264,3 +1263,104 @@ html.cs-dark .page__content img.invert {
12641263
}
12651264
}
12661265

1266+
/******* Tabs *******/
1267+
1268+
.tabbed-set {
1269+
display: flex;
1270+
position: relative;
1271+
border-radius: 0.1rem;
1272+
flex-flow: column wrap;
1273+
margin: 1em 0px;
1274+
}
1275+
.tabbed-set > input {
1276+
height: 0px;
1277+
opacity: 0;
1278+
position: absolute;
1279+
width: 0px;
1280+
}
1281+
1282+
.tabbed-labels {
1283+
display: flex;
1284+
max-width: 100%;
1285+
scrollbar-width: none;
1286+
overflow: auto;
1287+
border-bottom: 1px solid var(--color-base-darkest);
1288+
}
1289+
.tabbed-labels > label {
1290+
color: var(--color-grey-light);
1291+
cursor: pointer;
1292+
font-size: 0.85rem;
1293+
font-weight: 600;
1294+
scroll-margin-inline-start: 1rem;
1295+
width: 100%;
1296+
border-radius: 0.1rem 0.1rem 0px 0px;
1297+
padding: 0.9rem 1.6em;
1298+
transition: background-color 0.25s, color 0.25s;
1299+
white-space: nowrap;
1300+
text-overflow: ellipsis;
1301+
overflow: hidden;
1302+
}
1303+
@media (min-width: 48rem) {
1304+
.tabbed-labels > label {
1305+
width: auto;
1306+
}
1307+
}
1308+
.tabbed-labels > label:focus {
1309+
outline: 1px dotted var(--color-accent);
1310+
}
1311+
.tabbed-set > input:first-child:checked ~ .tabbed-labels > :first-child,
1312+
.tabbed-set > input:nth-child(10):checked ~ .tabbed-labels > :nth-child(10),
1313+
.tabbed-set > input:nth-child(11):checked ~ .tabbed-labels > :nth-child(11),
1314+
.tabbed-set > input:nth-child(12):checked ~ .tabbed-labels > :nth-child(12),
1315+
.tabbed-set > input:nth-child(13):checked ~ .tabbed-labels > :nth-child(13),
1316+
.tabbed-set > input:nth-child(14):checked ~ .tabbed-labels > :nth-child(14),
1317+
.tabbed-set > input:nth-child(15):checked ~ .tabbed-labels > :nth-child(15),
1318+
.tabbed-set > input:nth-child(16):checked ~ .tabbed-labels > :nth-child(16),
1319+
.tabbed-set > input:nth-child(17):checked ~ .tabbed-labels > :nth-child(17),
1320+
.tabbed-set > input:nth-child(18):checked ~ .tabbed-labels > :nth-child(18),
1321+
.tabbed-set > input:nth-child(19):checked ~ .tabbed-labels > :nth-child(19),
1322+
.tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > :nth-child(2),
1323+
.tabbed-set > input:nth-child(20):checked ~ .tabbed-labels > :nth-child(20),
1324+
.tabbed-set > input:nth-child(3):checked ~ .tabbed-labels > :nth-child(3),
1325+
.tabbed-set > input:nth-child(4):checked ~ .tabbed-labels > :nth-child(4),
1326+
.tabbed-set > input:nth-child(5):checked ~ .tabbed-labels > :nth-child(5),
1327+
.tabbed-set > input:nth-child(6):checked ~ .tabbed-labels > :nth-child(6),
1328+
.tabbed-set > input:nth-child(7):checked ~ .tabbed-labels > :nth-child(7),
1329+
.tabbed-set > input:nth-child(8):checked ~ .tabbed-labels > :nth-child(8),
1330+
.tabbed-set > input:nth-child(9):checked ~ .tabbed-labels > :nth-child(9) {
1331+
color: var(--color-black);
1332+
box-shadow: 0 -4px var(--color-accent) inset;
1333+
}
1334+
.tabbed-labels > label > [href]:first-child {
1335+
color: inherit;
1336+
}
1337+
1338+
.tabbed-content {
1339+
width: 100%;
1340+
}
1341+
.tabbed-block {
1342+
display: none;
1343+
padding-top: 0.75rem;
1344+
}
1345+
.tabbed-set > input:first-child:checked ~ .tabbed-content > :first-child,
1346+
.tabbed-set > input:nth-child(10):checked ~ .tabbed-content > :nth-child(10),
1347+
.tabbed-set > input:nth-child(11):checked ~ .tabbed-content > :nth-child(11),
1348+
.tabbed-set > input:nth-child(12):checked ~ .tabbed-content > :nth-child(12),
1349+
.tabbed-set > input:nth-child(13):checked ~ .tabbed-content > :nth-child(13),
1350+
.tabbed-set > input:nth-child(14):checked ~ .tabbed-content > :nth-child(14),
1351+
.tabbed-set > input:nth-child(15):checked ~ .tabbed-content > :nth-child(15),
1352+
.tabbed-set > input:nth-child(16):checked ~ .tabbed-content > :nth-child(16),
1353+
.tabbed-set > input:nth-child(17):checked ~ .tabbed-content > :nth-child(17),
1354+
.tabbed-set > input:nth-child(18):checked ~ .tabbed-content > :nth-child(18),
1355+
.tabbed-set > input:nth-child(19):checked ~ .tabbed-content > :nth-child(19),
1356+
.tabbed-set > input:nth-child(2):checked ~ .tabbed-content > :nth-child(2),
1357+
.tabbed-set > input:nth-child(20):checked ~ .tabbed-content > :nth-child(20),
1358+
.tabbed-set > input:nth-child(3):checked ~ .tabbed-content > :nth-child(3),
1359+
.tabbed-set > input:nth-child(4):checked ~ .tabbed-content > :nth-child(4),
1360+
.tabbed-set > input:nth-child(5):checked ~ .tabbed-content > :nth-child(5),
1361+
.tabbed-set > input:nth-child(6):checked ~ .tabbed-content > :nth-child(6),
1362+
.tabbed-set > input:nth-child(7):checked ~ .tabbed-content > :nth-child(7),
1363+
.tabbed-set > input:nth-child(8):checked ~ .tabbed-content > :nth-child(8),
1364+
.tabbed-set > input:nth-child(9):checked ~ .tabbed-content > :nth-child(9) {
1365+
display: block;
1366+
}

‎docs/assets/css/index.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
}
4040
}
4141

42-
@media (min-width: 64em) {
42+
@media (min-width: 64rem) {
4343
.page-index .headline {
4444
padding: 4rem;
4545
font-size: 1.6rem;
@@ -114,7 +114,7 @@
114114
}
115115
}
116116

117-
@media (min-width: 80em) {
117+
@media (min-width: 80rem) {
118118
.page-index .grid {
119119
flex-direction: row;
120120
}
@@ -153,7 +153,7 @@
153153
color: var(--color-grey-light);
154154
max-width: 100%;
155155
}
156-
@media (min-width: 64em) {
156+
@media (min-width: 64rem) {
157157
.footer div {
158158
font-size: 1.2rem;
159159
}

‎docs/assets/icons/tab.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎docs/content/markdown/tabs.md‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
---
2+
title: Tabs
3+
icon: icons/tab.svg
4+
---
5+
6+
Some parts of your documentation might become clear by organzing them in tabs, such as language-specific code snippets (e.g., tabs for Python, JavaScript, etc.) or an example that uses several files (e.g. a tabs for HTML, CSS, and JavaScript of a component)
7+
8+
A tab is defined using the `///` syntax and the name `tab`. Tabs should also specify the tab title in the
9+
header. Consecutive tabs will automatically be grouped.
10+
11+
/// example | Tabs
12+
13+
```md
14+
/// tab | Tab 1 title
15+
Tab 1 content
16+
///
17+
18+
/// tab | Tab 2 title
19+
Tab 2 content
20+
///
21+
```
22+
23+
//// tab | Tab 1 title
24+
Tab 1 content
25+
////
26+
27+
//// tab | Tab 2 title
28+
Tab 2 content
29+
////
30+
///
31+
32+
If you want to have two tab containers right after each other, you specify a hard break that will force the specified tab to start a brand new tab container.
33+
34+
/// example | New Tab Group
35+
36+
```md
37+
/// tab | Tab A title
38+
Tab A content
39+
///
40+
41+
/// tab | Tab B title
42+
Tab B content
43+
///
44+
45+
/// tab | Tab C Title
46+
new: true
47+
48+
Will be part of a separate, new tab group.
49+
///
50+
```
51+
52+
//// tab | Tab A title
53+
Tab A content
54+
////
55+
56+
//// tab | Tab B title
57+
Tab B content
58+
////
59+
60+
//// tab | Tab C title
61+
new: true
62+
Will be part of a separate, new tab group.
63+
////
64+
///
65+
66+
If desired, you can specify a tab to be selected by default with the `select` option.
67+
68+
```md
69+
/// tab | Tab 1 title
70+
Tab 1 content
71+
///
72+
73+
/// tab | Tab 2 title
74+
select: True
75+
76+
Tab 2 should be selected by default.
77+
///
78+
```
79+
80+
As with other blocks, you can always add new classes, and id or other attributes via the `attrs` option.
81+
82+
```md
83+
/// tab | Some title
84+
attrs: {class: class-name: id: id-name}
85+
86+
Some content
87+
///
88+
```

‎docs/content/quickstart/setup.md‎

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,32 +6,44 @@ title: Installation
66

77
### Add it to your project
88

9-
Use your package manager, for example with `uv`:
9+
Use your package manager
10+
11+
/// tab | Using "**uv**"
1012

1113
```bash
1214
uv add writeadoc --group docs
1315
```
1416

15-
or with `poetry`:
17+
///
18+
19+
/// tab | Using "**Poetry**"
1620

1721
```bash
1822
poetry add writeadoc --group docs
1923
```
2024

25+
///
26+
27+
2128
### Or install it by itself
2229

23-
Using `uv`:
30+
/// tab | Using "**uv**"
2431

2532
```bash
2633
uv pip install writeadoc
2734
```
2835

29-
...or regular `pip`:
36+
///
37+
38+
/// tab | Using "**pip**"
3039

3140
```bash
3241
pip install writeadoc
3342
```
3443

44+
///
45+
46+
3547
## Creating a new project
3648

3749
Getting started is super easy. To create a new project, run the following command from the command line:
@@ -47,13 +59,16 @@ Take a moment to review the initial project that has been created for you.
4759

4860
![Default project](/assets/images/project.png)
4961

50-
There is a `docs.py` Python file and three folders: "assets", "content", and "views".
62+
There is a `docs.py` Python file and three folders:
63+
64+
The "**assets**" folder contains images, fonts, CSS, and JS files used by your docs.
5165

52-
The "assets" folder contains images, fonts, CSS, and JS files used by your docs.
53-
The "views" folder contains the templates (the "theme") for the pages of your documentation.
54-
The "content" folder will contain your documentation markdown source files. Right now, it
66+
The "**views**" folder contains the templates (the "theme") for the pages of your documentation.
67+
68+
The "**content**" folder will contain your documentation markdown source files. Right now, it
5569
contains two demo pages: `index.md` and `welcome.md`.
5670

71+
5772
## Running the development server
5873

5974
WriteADoc comes with a built-in development server that lets you preview your documentation as you work on it.

‎docs/docs.py‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"markdown/tables.md",
3030
"markdown/admonitions.md",
3131
"markdown/attributes.md",
32+
"markdown/tabs.md",
3233
"markdown/html.md",
3334
],
3435
},

‎pyproject.toml‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ authors = [
77
]
88
license = { "file" = "MIT-LICENSE" }
99
readme = "README.md"
10-
requires-python = ">=3.12"
10+
requires-python = ">=3.11"
1111
dependencies = [
1212
"docstring-parser>=0.17.0",
1313
"hecto>=2.0.1",
@@ -83,9 +83,10 @@ addopts = "--doctest-modules --ignore=src/writeadoc/blueprint"
8383
legacy_tox_ini = """
8484
[tox]
8585
env_list =
86-
3.12
87-
3.13
86+
pypy3.11
8887
3.14
88+
3.13
89+
3.12
8990
9091
[testenv]
9192
runner = uv-venv-lock-runner

0 commit comments

Comments
 (0)