Skip to content

Commit 8d3ecd5

Browse files
andre-dietrichandre-dietrich
committed
added examples
1 parent bf01ca0 commit 8d3ecd5

File tree

2 files changed

+181
-2
lines changed

2 files changed

+181
-2
lines changed

‎content/english/_index.md‎

Lines changed: 45 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ banner:
1818
<i class="fa fa-arrow-right pl-2"></i>
1919
</button>
2020
image: "/images/main.png"
21-
21+
2222
# Demo Video Section
2323
demo_video:
2424
enable: true
@@ -31,6 +31,50 @@ demo_video:
3131
link: "https://liascript.github.io/course/?https://raw.githubusercontent.com/LiaScript/Hello-LiaScript/refs/heads/main/README.md#1"
3232

3333

34+
shorts:
35+
enable: true
36+
title: "LiaScript Shorts"
37+
description: "Quick, focused video snippets showing specific LiaScript capabilities in just a few seconds."
38+
playlist: "https://www.youtube.com/watch?v=saxAFw7XpjI&list=PL7LrRfaZulhch1ZtC6nSWOPcu1Xm80rlf&index=1"
39+
items:
40+
- id: "saxAFw7XpjI"
41+
title: "Short #1 – One Document, Many Representations (Part 1)"
42+
description: "A single Markdown file can become a narrative presentation, lecture, or interactive course. This demo also shows how LiaScript handles text-to-speech with automatic fallbacks."
43+
44+
- id: "kiGn5xhe-A8"
45+
title: "Short #2 – One Document, Many Representations (Part 2)"
46+
description: "More examples of how one Markdown source can be transformed into multiple localized or adapted versions of the same course."
47+
48+
- id: "RAQeOPYED28"
49+
title: "Short #3 – Intelligent Image Handling"
50+
description: "LiaScript treats images context-aware: floating layouts, automatic galleries, captioning, and optimal sizing — depending on how you structure your Markdown paragraph."
51+
52+
- id: "bA3ZdSTalG4"
53+
title: "Short #4 – Embedding Media Made Easy"
54+
description: "LiaScript supports four lightweight ways to embed media: classic images, audio tags, inline videos, and flexible URL-based embeds for any custom content."
55+
56+
- id: "9kIdg-9rmHg"
57+
title: "Short #5 – Quizzes in 100 Seconds"
58+
description: "Create rich quizzes directly in Markdown: multiple choice, single choice, matrix questions, text input, dropdowns, or gap texts — all without an LMS."
59+
60+
- id: "-VrEtZvhn6I"
61+
title: "Short #6 – Executable Code Blocks"
62+
description: "Make code snippets editable and runnable inside your course by attaching a simple script definition. Perfect for tutorials and programming lessons."
63+
64+
- id: "DuxVovCc7os"
65+
title: "Short #7 – Tables & Data Visualization"
66+
description: "LiaScript can turn Markdown tables into charts automatically. Ten plot types are available, and you can still pick your preferred visualization."
67+
68+
- id: "5jjXT-JsyYY"
69+
title: "Short #8 – Custom Macros"
70+
description: "Define your own macros or reusable LiaScript components with just an @name. Add parameters, shortcuts, and even block macros to simplify authoring."
71+
72+
- id: "C5Lyn0by580"
73+
title: "Short #9 – Serverless & Decentralized Hosting"
74+
description: "Host LiaScript courses anywhere: classic HTTPS, GitHub, GitLab, Nextcloud, Dropbox, IPFS, data URIs, Nostr, WebTorrent, OnionShare, and more."
75+
76+
77+
3478
# Features
3579
features:
3680
- title: "No build steps. No configuration."

‎themes/hugoplate/layouts/index.html‎

Lines changed: 136 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ <h1 class="mb-4 text-h3 lg:text-h1">
4545
<h2 class="h2 mb-4">
4646
{{ .title | markdownify }}
4747
</h2>
48-
<p class="text-lg text-gray-600">
48+
<p class="text-lg">
4949
{{ .description | markdownify }}
5050
</p>
5151

@@ -81,6 +81,92 @@ <h2 class="h2 mb-4">
8181
{{ end }}
8282
<!-- /Demo Video -->
8383

84+
<!-- Shorts Playlist -->
85+
{{ with .Params.shorts }}
86+
{{ if .enable }}
87+
<section class="section py-12">
88+
<div class="container">
89+
<div class="row justify-center mb-10 text-center">
90+
<div class="lg:col-8 md:col-10 col-12">
91+
<h2 class="h2 mb-4">
92+
{{ .title | markdownify }}
93+
</h2>
94+
<p class="text-lg">
95+
{{ .description | markdownify }}
96+
</p>
97+
</div>
98+
</div>
99+
100+
<div class="row">
101+
{{ range .items }}
102+
<div class="lg:col-4 md:col-6 col-12 mb-8">
103+
<div
104+
class="bg-theme-light dark:bg-darkmode-theme-light rounded-xl overflow-hidden h-full flex flex-col shadow-sm">
105+
<!-- 16:9 Thumbnail -->
106+
<button
107+
type="button"
108+
class="relative w-full cursor-pointer"
109+
style="padding-bottom: 56.25%; height: 0; overflow: hidden;"
110+
onclick="openShortsModal('{{ .id }}')">
111+
<img
112+
src="https://img.youtube.com/vi/{{ .id }}/hqdefault.jpg"
113+
alt="{{ .title }}"
114+
class="absolute inset-0 w-full h-full object-cover" />
115+
<span
116+
class="absolute inset-0 flex items-center justify-center">
117+
<span
118+
class="inline-flex h-14 w-14 items-center justify-center rounded-full bg-black/60 text-white">
119+
<i class="fa fa-play text-xl"></i>
120+
</span>
121+
</span>
122+
</button>
123+
124+
<!-- Card Body -->
125+
<div class="p-5 flex-1 flex flex-col">
126+
<h3 class="h5 font-semibold mb-2">
127+
{{ .title }}
128+
</h3>
129+
{{ with .description }}
130+
<p class="mb-4 text-sm text-gray-600 dark:text-gray-300">
131+
{{ . }}
132+
</p>
133+
{{ end }}
134+
135+
136+
<div class="mt-auto">
137+
<a
138+
href="https://www.youtube.com/watch?v={{ .id }}"
139+
target="_blank"
140+
rel="noopener"
141+
class="btn btn-outline-primary btn-sm">
142+
Watch on YouTube
143+
<i class="fa fa-arrow-right pl-2"></i>
144+
</a>
145+
</div>
146+
</div>
147+
</div>
148+
</div>
149+
{{ end }}
150+
</div>
151+
152+
{{ with .playlist }}
153+
<div class="text-center mt-6">
154+
<a
155+
href="{{ . }}"
156+
target="_blank"
157+
rel="noopener"
158+
class="btn btn-primary">
159+
View full playlist
160+
<i class="fa fa-arrow-right pl-2"></i>
161+
</a>
162+
</div>
163+
{{ end }}
164+
</div>
165+
</section>
166+
{{ end }}
167+
{{ end }}
168+
<!-- /Shorts Playlist -->
169+
84170
<!-- Features -->
85171
{{ range $i, $e:= .Params.features }}
86172
<section class="section-sm bg-gradient">
@@ -177,6 +263,55 @@ <h3 class="h5 font-primary font-semibold">
177263
{{ end }}
178264
<!-- /Testimonials -->
179265

266+
<!-- Shorts Modal -->
267+
<div
268+
id="shorts-modal"
269+
class="fixed inset-0 z-50 hidden items-center justify-center"
270+
style="width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.8);"
271+
onclick="closeShortsModal()">
272+
<button
273+
type="button"
274+
class="absolute top-3 right-3 z-10 inline-flex h-8 w-8 items-center justify-center rounded-full bg-white text-black"
275+
onclick="closeShortsModal()">
276+
<span class="sr-only">Close</span>
277+
&times;
278+
</button>
279+
<div
280+
class="relative w-full max-w-3xl mx-4 md:mx-auto bg-black rounded-xl overflow-hidden"
281+
style="min-width: 90%; width: 90%;">
282+
<div
283+
class="relative w-full"
284+
style="padding-bottom: 56.25%; height: 0; overflow: hidden;">
285+
<iframe
286+
id="shorts-modal-iframe"
287+
src=""
288+
frameborder="0"
289+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
290+
allowfullscreen
291+
style="position:absolute; top:0; left:0; width:100%; height:100%;">
292+
</iframe>
293+
</div>
294+
</div>
295+
</div>
296+
297+
<script>
298+
function openShortsModal(videoId) {
299+
var modal = document.getElementById("shorts-modal");
300+
var iframe = document.getElementById("shorts-modal-iframe");
301+
iframe.src = "https://www.youtube.com/embed/" + videoId + "?autoplay=1";
302+
modal.classList.remove("hidden");
303+
modal.classList.add("flex");
304+
}
305+
306+
function closeShortsModal() {
307+
var modal = document.getElementById("shorts-modal");
308+
var iframe = document.getElementById("shorts-modal-iframe");
309+
iframe.src = "";
310+
modal.classList.add("hidden");
311+
modal.classList.remove("flex");
312+
}
313+
</script>
314+
180315
<script>
181316
function load(url) {
182317
url = url.trim();

0 commit comments

Comments
 (0)