Skip to content

Commit ff20580

Browse files
PVinachesPVinaches
authored
feat: playground tab (#238)
* feat: playground tab + high screen responsiveness
1 parent a401f3d commit ff20580

10 files changed

Lines changed: 148 additions & 10 deletions

File tree

‎assets/css/custom.css‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -108,9 +108,24 @@ nav.hb-toc ul li a.pl-8, nav.hb-toc ul li a.pl-12, nav.hb-toc ul li a.pl-16 {
108108
}
109109

110110
/* Align the header navbar with the content in bigger screens */
111-
@media (min-width: 1279px) {
111+
@media (min-width: 1600px) {
112+
header.header > nav.navbar {
113+
max-width: 1600px; /* Instead of 1280px */
114+
}
115+
116+
.mx-auto {
117+
max-width: 1600px !important;
118+
}
119+
}
120+
121+
@media (max-width: 1600px) and (min-width: 1280px) {
112122
header.header > nav.navbar {
113123
max-width: 1280px;
124+
}
125+
}
126+
127+
@media (min-width: 1280px) {
128+
header.header > nav.navbar {
114129
margin-left: auto;
115130
margin-right: auto;
116131
}
@@ -195,4 +210,3 @@ figure.image > img {
195210
cursor: zoom-in !important;
196211
}
197212

198-
/* ...existing code... */

‎config/_default/menus.yaml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@ main:
1212
- name: Documentation
1313
weight: 30
1414
url: docs/
15+
- name: Playground
16+
url: playground/
17+
weight: 35
1518
- name: Roadmap
1619
url: roadmap/
1720
weight: 40

‎content/authors/_content.gotmpl‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
{{/* Get the author data from hugo.Data */}}
2-
{{ $authorData := hugo.Data.authors }}
1+
{{/* Get the author data from site.Data */}}
2+
{{ $authorData := site.Data.authors }}
33

44
{{/* Iterate over each author key-value pair */}}
55
{{ range $slug, $profile := $authorData }}

‎content/playground/_index.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
title: 'Playground'
3+
date: 2026-05-21
4+
type: landing
5+
6+
# SEO Meta Tags
7+
description: 'Try Kaoto online in our interactive playground'
8+
keywords:
9+
- Kaoto Playground
10+
- Try Kaoto Online
11+
- Apache Camel Designer Demo
12+
13+
sections:
14+
- block: markdown
15+
content:
16+
title: ""
17+
text: |-
18+
{{< iframe-fullscreen src="https://red.ht/kaoto" title="Kaoto Playground" aspectRatio="16/9" mobileBreakpoint="700px" >}}
19+
design:
20+
spacing:
21+
padding: ["1rem", 0, "1rem", 0]
22+
css_class: "light"
23+
---

‎layouts/_partials/hbx/blocks/cta-image-paragraph/block.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
{{ $page := .wcPage }}
33
{{ $block := .wcBlock }}
44

5-
<div class="mx-auto max-w-6xl px-6 py-12 lg:px-8">
5+
<div class="mx-auto max-w-96 px-6 py-12 lg:px-8">
66
{{ with $block.content.items }}
77
<div class="grid gap-12">
88
{{ range $index, $item := . }}

‎layouts/_partials/hbx/blocks/features/block.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
{{ $page := .wcPage }}
33
{{ $block := .wcBlock }}
44

5-
<div class="mx-auto max-w-6xl px-6 py-12 lg:px-8 text-center">
5+
<div class="mx-auto max-w-96 px-6 py-12 lg:px-8 text-center">
66
{{ with $block.content.title }}
77
<h2 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl text-center">
88
{{ . | markdownify }}

‎layouts/_partials/hbx/blocks/hero2/block.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
{{ $block := .wcBlock }}
88
<div class="relative isolate px-6 pt-1 lg:px-8">
99

10-
<div class="mx-auto max-w-2xl py-1 sm:py-1 lg:py-2">
10+
<div class="mx-auto max-w-screen-xl py-1 sm:py-1 lg:py-2">
1111

1212
{{ if $block.content.announcement.text }}
1313
{{ $announcement := $block.content.announcement }}

‎layouts/_partials/hbx/blocks/markdown/block.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
{{ $page := .wcPage }}
33
{{ $block := .wcBlock }}
44

5-
<div class="mx-auto max-w-5xl px-6 py-12 lg:px-8 text-center">
5+
<div class="mx-auto max-w-screen-xl px-6 py-12 lg:px-8 text-center">
66
{{ with $block.content.title }}
77
<h2 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl text-center">
88
{{ . | markdownify }}
99
</h2>
1010
{{ end }}
1111
{{ with $block.content.text }}
12-
<div class="prose prose-lg dark:prose-invert mt-6 max-w-none text-center prose-img:mx-auto">
12+
<div class="prose prose-lg dark:prose-invert mt-6 max-w-5xl mx-auto prose-img:mx-auto">
1313
{{ . | $page.RenderString | emojify }}
1414
</div>
1515
{{ end }}

‎layouts/_partials/hbx/blocks/slideshow/block.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-w
1616
<div class="mt-8 grid grid-cols-1 gap-8">
1717
{{ range $index, $item := $block.content.items }}
1818
<div class="item text-center{{ if eq $index 0 }} is-active{{ end }}" style="{{ if eq $index 0 }}display: block;{{ else }}display: none;{{ end }}">
19-
<div class="max-w-screen-md mx-auto ">
19+
<div class="max-w-screen-xl mx-auto ">
2020
<svg class="h-16 mx-auto mb-3 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32">
2121
<path d="M9.563 8.469l-0.813-1.25c-5.625 3.781-8.75 8.375-8.75 12.156 0 3.656 2.688 5.375 4.969 5.375 2.875 0 4.906-2.438 4.906-5 0-2.156-1.375-4-3.219-4.688-0.531-0.188-1.031-0.344-1.031-1.25 0-1.156 0.844-2.875 3.938-5.344zM21.969 8.469l-0.813-1.25c-5.563 3.781-8.75 8.375-8.75 12.156 0 3.656 2.75 5.375 5.031 5.375 2.906 0 4.969-2.438 4.969-5 0-2.156-1.406-4-3.313-4.688-0.531-0.188-1-0.344-1-1.25 0-1.156 0.875-2.875 3.875-5.344z"/>
2222
</svg>

‎layouts/shortcodes/iframe-fullscreen.html‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
{{- $src := .Get "src" -}}
2+
{{- $title := .Get "title" | default "Embedded Content" -}}
3+
{{- $aspectRatio := .Get "aspectRatio" | default "16/9" -}}
4+
{{- $mobileBreakpoint := .Get "mobileBreakpoint" | default "700px" -}}
5+
{{- $uniqueId := printf "iframe%d" now.UnixNano -}}
6+
7+
<style>
8+
.iframe-fullscreen-wrapper {
9+
position: relative;
10+
width: 100%;
11+
height: calc(100vh - 150px);
12+
min-height: {{ $mobileBreakpoint }};
13+
aspect-ratio: {{ $aspectRatio }};
14+
}
15+
.iframe-fullscreen-wrapper:fullscreen {
16+
aspect-ratio: auto;
17+
max-height: none;
18+
}
19+
.iframe-fullscreen-wrapper:fullscreen iframe {
20+
width: 100vw;
21+
height: 100vh;
22+
}
23+
.iframe-fullscreen-wrapper:fullscreen button {
24+
display: none;
25+
}
26+
.iframe-fullscreen-wrapper button {
27+
position: absolute;
28+
top: 10px;
29+
left: 50%;
30+
transform: translateX(-50%);
31+
z-index: 1000;
32+
background: rgba(0, 0, 0, 0.7);
33+
color: white;
34+
border: none;
35+
padding: 8px 16px;
36+
border-radius: 4px;
37+
cursor: pointer;
38+
font-size: 14px;
39+
transition: background 0.2s;
40+
}
41+
.iframe-fullscreen-wrapper button:hover {
42+
background: rgba(0, 0, 0, 0.9);
43+
}
44+
.iframe-fullscreen-wrapper iframe {
45+
width: 100%;
46+
height: 100%;
47+
border: none;
48+
}
49+
.iframe-mobile-msg {
50+
display: none;
51+
text-align: center;
52+
padding: 3rem 2rem;
53+
background: #f8f9fa;
54+
border-radius: 8px;
55+
margin: 2rem 0;
56+
}
57+
.iframe-mobile-msg h3 {
58+
margin-top: 0;
59+
color: #333;
60+
}
61+
.iframe-mobile-msg p {
62+
color: #666;
63+
line-height: 1.6;
64+
margin: 1rem 0;
65+
}
66+
@media (max-width: {{ $mobileBreakpoint }}) {
67+
.iframe-fullscreen-wrapper {
68+
display: none;
69+
}
70+
.iframe-mobile-msg {
71+
display: block;
72+
}
73+
}
74+
</style>
75+
76+
<script>
77+
function toggleFullscreen(wrapperId) {
78+
var wrapper = document.getElementById(wrapperId);
79+
if (document.fullscreenElement) {
80+
document.exitFullscreen();
81+
} else {
82+
wrapper.requestFullscreen().catch(function(e) {
83+
console.error('Error attempting to enable fullscreen:', e);
84+
});
85+
}
86+
}
87+
</script>
88+
89+
<div id="{{ $uniqueId }}" class="iframe-fullscreen-wrapper">
90+
<button onclick="toggleFullscreen('{{ $uniqueId }}')">⛶ Fullscreen</button>
91+
<iframe src="{{ $src }}" title="{{ $title }}" allow="fullscreen" sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-presentation"></iframe>
92+
</div>
93+
94+
<div class="iframe-mobile-msg">
95+
<h3>💻 Desktop Experience Recommended</h3>
96+
<p>For the best experience working with integrations, we recommend using Kaoto on a desktop or laptop device.</p>
97+
<p>Mobile screens are too small to effectively visualize and manage complex integration flows.</p>
98+
</div>

0 commit comments

Comments
 (0)