Skip to content

Commit a648eb7

Browse files
cybermaggedoncybermaggedon
authored
Complete the docker compose documentation (#13)
* Code tabs and PRE layout improvements * Intro box on Docker Compose guide * Update to models advice * Docker networking discussion * Docker compose updates * LLM guidance * Troubleshooting * Add Fathom
1 parent cb39432 commit a648eb7

21 files changed

+1635
-410
lines changed

‎_config.yml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,3 +100,6 @@ defaults:
100100
values:
101101
layout: page
102102

103+
fathom:
104+
site_id: RJHALETV
105+

‎_includes/code_tabs.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
{% comment %}
2+
Code Tabs Include for Just the Docs
3+
4+
Usage:
5+
{% capture python %}
6+
```python
7+
print("Hello")
8+
```
9+
{% endcapture %}
10+
11+
{% capture javascript %}
12+
```javascript
13+
console.log("Hello");
14+
```
15+
{% endcapture %}
16+
17+
{% include code_tabs.html
18+
tabs="Python,JavaScript"
19+
content1=python
20+
content2=javascript
21+
%}
22+
{% endcomment %}
23+
24+
{% assign tab_names = include.tabs | split: "," %}
25+
{% assign tab_id = include.tabs | slugify | append: "-" | append: site.time | date: "%s%N" %}
26+
27+
<div class="code-tabs" data-tab-group="{{ tab_id }}">
28+
<div class="code-tabs-nav" role="tablist">
29+
{% for tab_name in tab_names %}
30+
{% assign tab_slug = tab_name | strip | slugify %}
31+
<button
32+
class="code-tabs-btn{% if forloop.first %} active{% endif %}"
33+
role="tab"
34+
aria-selected="{% if forloop.first %}true{% else %}false{% endif %}"
35+
aria-controls="{{ tab_id }}-panel-{{ forloop.index }}"
36+
data-tab="{{ tab_slug }}"
37+
id="{{ tab_id }}-tab-{{ forloop.index }}">
38+
{{ tab_name | strip }}
39+
</button>
40+
{% endfor %}
41+
</div>
42+
43+
<div class="code-tabs-content">
44+
{% for tab_name in tab_names %}
45+
{% assign tab_slug = tab_name | strip | slugify %}
46+
{% assign content_var = "content" | append: forloop.index %}
47+
<div
48+
class="code-tabs-panel{% if forloop.first %} active{% endif %}"
49+
role="tabpanel"
50+
id="{{ tab_id }}-panel-{{ forloop.index }}"
51+
aria-labelledby="{{ tab_id }}-tab-{{ forloop.index }}"
52+
data-tab="{{ tab_slug }}"
53+
{% unless forloop.first %}hidden{% endunless %}>
54+
{{ include[content_var] | markdownify }}
55+
</div>
56+
{% endfor %}
57+
</div>
58+
</div>

‎_includes/fathom.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{% if jekyll.environment == "production" %}
2+
<script src="https://cdn.usefathom.com/script.js" data-site="{{ site.fathom.site_id }}" defer></script>
3+
{% endif %}

‎_includes/guide-intro-box.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
{% assign box_font_size = include.font_size | default: "0.9em" %}
2+
3+
<div style="border: 2px solid #4a9eff; background-color: #1e2a3a; padding: 20px; margin: 20px 0; border-radius: 8px; font-size: {{ box_font_size }};">
4+
5+
{% if include.description %}
6+
<div style="margin-bottom: 20px;">
7+
<strong style="color: #4a9eff; font-size: 0.85em; text-transform: uppercase;">Description</strong>
8+
<p style="margin: 5px 0 0 0; line-height: 1.5;">{{ include.description }}</p>
9+
</div>
10+
{% endif %}
11+
12+
{% if include.difficulty or include.duration %}
13+
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 15px;">
14+
15+
{% if include.difficulty %}
16+
<div>
17+
<strong style="color: #4a9eff; font-size: 0.85em; text-transform: uppercase;">Difficulty</strong>
18+
<p style="margin: 5px 0 0 0;">{{ include.difficulty | capitalize }}</p>
19+
</div>
20+
{% endif %}
21+
22+
{% if include.duration %}
23+
<div>
24+
<strong style="color: #4a9eff; font-size: 0.85em; text-transform: uppercase;">Duration</strong>
25+
<p style="margin: 5px 0 0 0;">{{ include.duration }}</p>
26+
</div>
27+
{% endif %}
28+
29+
</div>
30+
{% endif %}
31+
32+
{% if include.you_will_need %}
33+
<div style="margin-bottom: 15px;">
34+
<strong style="color: #4a9eff; font-size: 0.85em; text-transform: uppercase;">You will need</strong>
35+
<div style="margin: 5px 0 0 0;">
36+
{{ include.you_will_need }}
37+
</div>
38+
</div>
39+
{% endif %}
40+
41+
{% if include.goal %}
42+
<div>
43+
<strong style="color: #4a9eff; font-size: 0.85em; text-transform: uppercase;">Goal</strong>
44+
<p style="margin: 5px 0 0 0;">{{ include.goal }}</p>
45+
</div>
46+
{% endif %}
47+
48+
</div>

‎_includes/head_custom.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<!-- Add this to your _includes/head_custom.html file -->
2+
<!-- If the file already exists, just add the script tag below -->
3+
4+
<script src="{{ '/assets/js/code_tabs.js' | relative_url }}" defer></script>

‎_layouts/page.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
---
22
layout: default
33
---
4-
4+
{% include fathom.html %}
55
{% include todo-banner.html %}
6-
76
{{ content }}

‎_sass/custom/custom.scss‎

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
// Code Tabs Styling for Just the Docs
2+
// Add this to your _sass/custom/custom.scss file
3+
4+
.code-tabs {
5+
margin: 1.5rem 0;
6+
border: 1px solid var(--border-color, #e1e4e8);
7+
border-radius: 6px;
8+
overflow: hidden;
9+
}
10+
11+
.code-tabs-nav {
12+
display: flex;
13+
flex-wrap: wrap;
14+
background-color: var(--sidebar-color, #f5f6fa);
15+
border-bottom: 1px solid var(--border-color, #e1e4e8);
16+
gap: 0;
17+
}
18+
19+
.code-tabs-btn {
20+
padding: 0.6rem 1.2rem;
21+
border: none;
22+
background: transparent;
23+
cursor: pointer;
24+
font-size: 0.85rem;
25+
font-weight: 500;
26+
color: var(--grey-dk-100, #5c5c5c);
27+
transition: all 0.15s ease;
28+
position: relative;
29+
margin-bottom: -1px;
30+
border-bottom: 2px solid transparent;
31+
32+
&:hover {
33+
color: var(--link-color, #0366d6);
34+
background-color: rgba(0, 0, 0, 0.03);
35+
}
36+
37+
&:focus {
38+
outline: 2px solid var(--link-color, #0366d6);
39+
outline-offset: -2px;
40+
}
41+
42+
&.active {
43+
color: var(--link-color, #0366d6);
44+
background-color: var(--body-background-color, #fff);
45+
border-bottom-color: var(--link-color, #0366d6);
46+
}
47+
}
48+
49+
.code-tabs-content {
50+
background-color: var(--body-background-color, #fff);
51+
}
52+
53+
.code-tabs-panel {
54+
display: none;
55+
56+
&.active {
57+
display: block;
58+
}
59+
60+
// Remove margins from code blocks inside tabs
61+
> .highlighter-rouge,
62+
> .highlight,
63+
> pre,
64+
> div > .highlighter-rouge,
65+
> div > .highlight,
66+
> div > pre {
67+
margin: 0;
68+
border: none;
69+
border-radius: 0;
70+
71+
pre {
72+
margin: 0;
73+
border: none;
74+
border-radius: 0;
75+
}
76+
}
77+
78+
// Handle the paragraph wrapper that markdownify adds
79+
> p {
80+
margin: 0;
81+
82+
> .highlighter-rouge,
83+
> .highlight {
84+
margin: 0;
85+
}
86+
}
87+
}
88+
89+
// Dark mode support (if using Just the Docs dark mode)
90+
@media (prefers-color-scheme: dark) {
91+
.code-tabs {
92+
border-color: #373b41;
93+
}
94+
95+
.code-tabs-nav {
96+
background-color: #1e1e1e;
97+
border-bottom-color: #373b41;
98+
}
99+
100+
.code-tabs-btn {
101+
color: #a0a0a0;
102+
103+
&:hover {
104+
background-color: rgba(255, 255, 255, 0.05);
105+
}
106+
107+
&.active {
108+
background-color: #0d1117;
109+
}
110+
}
111+
112+
.code-tabs-content {
113+
background-color: #0d1117;
114+
}
115+
}
116+
117+
// Just the Docs specific dark mode class
118+
[data-theme="dark"] {
119+
.code-tabs {
120+
border-color: #373b41;
121+
}
122+
123+
.code-tabs-nav {
124+
background-color: #1e1e1e;
125+
border-bottom-color: #373b41;
126+
}
127+
128+
.code-tabs-btn {
129+
color: #a0a0a0;
130+
131+
&:hover {
132+
background-color: rgba(255, 255, 255, 0.05);
133+
}
134+
135+
&.active {
136+
background-color: #0d1117;
137+
}
138+
}
139+
140+
.code-tabs-content {
141+
background-color: #0d1117;
142+
}
143+
}
144+
145+
pre {
146+
max-height: 30rem; // adjust this to whatever you want
147+
overflow-y: auto;
148+
}
149+
150+
details {
151+
152+
border: 1px solid var(--border-color, #e1e4e8);
153+
border-radius: 6px;
154+
padding: 0.75rem 1rem;
155+
margin: 1rem 0;
156+
157+
summary {
158+
cursor: pointer;
159+
font-weight: 500;
160+
161+
&:hover {
162+
color: var(--link-color, #0366d6);
163+
}
164+
}
165+
166+
> *:nth-child(n+2) {
167+
margin-top: 1rem;
168+
}
169+
170+
img {
171+
max-width: 100%;
172+
border: 1px solid var(--border-color, #e1e4e8);
173+
border-radius: 4px;
174+
}
175+
}
176+

0 commit comments

Comments
 (0)