feat(examples): add collapsible <details> shortcode and style for better UX on multi-file pages

- Introduced a reusable Hugo shortcode: layouts/shortcodes/details.html
- Wrapped long example-file blocks in collapsible <details> sections on:
  - community-provisioners/service
  - community-provisioners/dns
- Applied consistent styling in assets/scss/examples.scss:
  - Light/dark mode support
  - Soft borders, spacing, and hover effects
  - Improved code block readability inside collapses

Closes #201

Author: victor-ikeme

assets/scss/_examples.scss

@@ -13,6 +13,35 @@
   }
 }
 
+/* Collapsible <details> styling */
+details {
+  margin: 1.2rem 0;
+  padding: 0.6rem 1rem;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  background-color: #f9f9f9;
+}
+
+details[open] {
+  background-color: #fefefe;
+  border-color: #999;
+}
+
+details summary {
+  font-weight: 600;
+  cursor: pointer;
+  margin: -0.4rem -1rem 0.6rem -1rem;
+  padding: 0.6rem 1rem;
+  background-color: #ececec;
+  border-radius: 6px 6px 0 0;
+  transition: background-color 0.2s ease;
+}
+
+details summary:hover {
+  background-color: #e2e2e2;
+}
+
+
 @media (min-width: 768px) {
   .td-404 main,
   .td-main main .examples-index-page {

content/en/examples/score/resources/community-provisioners/dns.md

@@ -10,13 +10,21 @@ flavor: "Resources"
 
 ---
 
+{{% details "score.yaml" %}}
 {{% example-file filename="score.yaml" dir="score/resources/community-provisioners/dns" githubUrl="https://github.com/score-spec/community-provisioners/blob/main" %}}
+{{% /details %}}
 
 {{< tabs >}}
 {{% tab name="score-compose" %}}
+
+{{% details "10-dns-in-codespace.provisioners.yaml" %}}
 {{% example-file filename="10-dns-in-codespace.provisioners.yaml" dir="score/resources/community-provisioners/dns/score-compose" githubUrl="https://github.com/score-spec/community-provisioners/blob/main" %}}
+{{% /details %}}
+
+{{% details "10-dns-with-url.provisioners.yaml" %}}
 {{% example-file filename="10-dns-with-url.provisioners.yaml" dir="score/resources/community-provisioners/dns/score-compose" githubUrl="https://github.com/score-spec/community-provisioners/blob/main" %}}
 {{% example-file filename="README.md" dir="score/resources/community-provisioners/dns/score-compose" githubUrl="https://github.com/score-spec/community-provisioners/blob/main" %}}
+{{% /details %}}
 
 ---
 
@@ -66,9 +74,12 @@ docker ps
 
 {{%/ tab %}}
 {{% tab name="score-k8s" %}}
+
+{{% details "10-dns-in-codespace.provisioners.yaml" %}}
 {{% example-file filename="10-dns-in-codespace.provisioners.yaml" dir="score/resources/community-provisioners/dns/score-k8s" githubUrl="https://github.com/score-spec/community-provisioners/blob/main" %}}
 {{% example-file filename="10-dns-with-url.provisioners.yaml" dir="score/resources/community-provisioners/dns/score-k8s" githubUrl="https://github.com/score-spec/community-provisioners/blob/main" %}}
 {{% example-file filename="README.md" dir="score/resources/community-provisioners/dns/score-k8s" githubUrl="https://github.com/score-spec/community-provisioners/blob/main" %}}
+{{% /details %}}
 
 ---
 

content/en/examples/score/resources/community-provisioners/service.md

@@ -7,17 +7,25 @@ excerpt: ''
 hasMore: false
 parent: "Community Provisioners"
 flavor: "Resources"
-
 ---
 
+{{% details "score-backend.yaml" %}}
 {{% example-file filename="score-backend.yaml" dir="score/resources/community-provisioners/service" githubUrl="https://github.com/score-spec/community-provisioners/blob/main" %}}
+{{% /details %}}
+
+{{% details "score-frontend.yaml" %}}
 {{% example-file filename="score-frontend.yaml" dir="score/resources/community-provisioners/service" githubUrl="https://github.com/score-spec/community-provisioners/blob/main" %}}
+{{% /details %}}
 
 {{< tabs >}}
+
 {{% tab name="score-compose" %}}
+
+{{% details "10-service.provisioners.yaml (score-compose)" %}}
 {{% example-file filename="10-service.provisioners.yaml" dir="score/resources/community-provisioners/service/score-compose" githubUrl="https://github.com/score-spec/community-provisioners/blob/main" %}}
+{{% /details %}}
 
----
+...
 
 Initialize your local workspace, by importing a specific community provisioner:
 
@@ -63,12 +71,19 @@ See the running containers:
 docker ps
 ```
 
-{{%/ tab %}}
+{{% /tab %}}
+
 {{% tab name="score-k8s" %}}
+
+{{% details "10-service-with-netpol.provisioners.yaml (score-k8s)" %}}
 {{% example-file filename="10-service-with-netpol.provisioners.yaml" dir="score/resources/community-provisioners/service/score-k8s" githubUrl="https://github.com/score-spec/community-provisioners/blob/main" %}}
+{{% /details %}}
+
+{{% details "10-service.provisioners.yaml (score-k8s)" %}}
 {{% example-file filename="10-service.provisioners.yaml" dir="score/resources/community-provisioners/service/score-k8s" githubUrl="https://github.com/score-spec/community-provisioners/blob/main" %}}
+{{% /details %}}
 
----
+...
 
 Initialize your local workspace, by importing a specific community provisioner:
 
@@ -114,5 +129,6 @@ See the running containers:
 kubectl get all
 ```
 
-{{%/ tab %}}
+{{% /tab %}}
+
 {{< /tabs >}}

layouts/shortcodes/details.html

@@ -0,0 +1,4 @@
+<details{{ with .Get 1 }} {{ . | safeHTML }}{{ end -}}>
+  <summary>{{ with .Get 0 -}}{{ . | safeHTML }}{{ else -}}{{ errorf "No summary provided"}}{{ end -}}</summary>
+  {{ with .Inner -}}{{ . | markdownify}}{{ else -}}{{ errorf "No details provided"}}{{ end -}}
+</details>