vatsrahul1001 opened a new pull request, #1718:
URL: https://github.com/apache/airflow-site/pull/1718
Adds a `codetabs` / `codetab` Hugo shortcode pair so blog and landing
content can show tabbed code blocks — the Hugo analog of the sphinx docs'
`sphinx-design` `tab-set`/`tab-item`. Motivated by review feedback on the 3.4.0
blog post (#1717), where the three language-SDK code examples would read better
as tabs than as separate collapsibles.
This Docsy version does not ship the `tabpane` shortcode, so this is a small
self-contained implementation (no new runtime deps; Bootstrap is not loaded on
these pages).
### What's included
- `layouts/shortcodes/codetabs.html` — the tab container (renders the tab
bar + panels; emits a tiny self-contained switcher script once per page).
- `layouts/shortcodes/codetab.html` — one tab; registers its header +
markdownified body with the parent and emits nothing itself.
- `assets/scss/_codetabs.scss` — styling using the existing `$colors` map
(brand `cerulean-blue`), with a `[data-bs-theme="dark"]` block for dark mode;
imported from `main-custom.scss`.
### Usage
```
{{</* codetabs */>}}
{{</* codetab header="TypeScript" sync="typescript" */>}}
```typescript
console.log("hi");
```
{{</* /codetab */>}}
{{</* codetab header="Go" sync="go" */>}}
```go
fmt.Println("hi")
```
{{</* /codetab */>}}
{{</* /codetabs */>}}
```
- First tab shown by default; fenced code keeps normal Chroma highlighting
(rendered via `markdownify`).
- `sync` is optional and mirrors sphinx-design's `:sync:` — tabs sharing a
`sync` value switch together across the page.
- Call with `{{</* codetab */>}}` (not `{{%% %%}}`) so the body is handed in
raw and highlighted correctly.
### Notes
- Verified by self-review of the templates/SCSS; I could not run a local
`hugo` build in my environment, so please confirm the preview/CI render. Raw
HTML rendering is already enabled on the site (`unsafe = true`) and existing
posts use raw `<details>`, so the markup is supported.
- Once this merges, the 3.4.0 blog PR (#1717) can switch its language-SDK
sections from collapsibles to `codetabs`.
Generated-by: Claude Code (Opus 4.8)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
