docs: add link to playground in main page.

Author: plusvic

.github/workflows/site.yaml

@@ -38,23 +38,28 @@ jobs:
     steps:
     - name: Checkout
       uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683  # v4.2.2
+
     - name: Setup Node.js
       uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a  # v4.2.0
       with:
         node-version: '22'
         cache: 'npm'
         cache-dependency-path: 'site'
+
     - name: Setup Pages
       id: pages
       uses: actions/configure-pages@983d7736d9b0ae728b81ab479565c72886d7745b  # v5.0.0
+
     - name: Install dependencies
       run: |
         cd site
         [[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true
+
     - name: Install playground dependencies
       run: |
         cd playground
         npm install
+
     - name: Build production website
       env:
         # For maximum backward compatibility with Hugo modules
@@ -67,15 +72,18 @@ jobs:
           --gc \
           --minify \
           --environment production
+
     - name: Build playground
       run: |
         cd playground
         npm run build
+
     - name: Merge playground into Pages artifact
       run: |
         rm -rf site/public/playground
         mkdir -p site/public/playground
         cp -R playground/dist/. site/public/playground/
+
     - name: Upload artifact
       uses: actions/upload-pages-artifact@56afc609e74202658d3ffba0e8f6dda462b719fa  # v3.0.1
       with:

site/.hugo_build.lock

@@ -9,9 +9,13 @@
 }
 
 .docs-toc {
-	width: 290px;
+  width: 290px;
 }
 
 .expressive-code pre {
   padding: 8px;
+}
+
+.bg-dots {
+  margin-top: -4rem;
 }

site/assets/scss/common/_custom.scss

@@ -80,6 +80,7 @@
       "btn-cta",
       "btn-lg",
       "btn-link",
+      "btn-outline-secondary",
       "btn-primary",
       "callout",
       "callout-body",

site/hugo_stats.json

@@ -133,6 +133,9 @@
       <a class="btn btn-primary btn-cta rounded-pill btn-lg my-3"
          href="docs/{{ if site.Params.doks.docsVersioning }}{{ site.Params.doks.docsVersion }}/{{ end }}intro/getting-started/"
          role="button">{{ i18n "get_started" }}</a>
+      <a class="btn btn-outline-secondary btn-cta rounded-pill btn-lg my-3"
+         href="playground/"
+         role="button">Playground</a>
       {{ .Content }}
     </div>
   </div>
@@ -172,16 +175,4 @@ <h2 class="h4">Easy integration</h2>
 {{ end }}
 
 {{ define "sidebar-footer" }}
-{{ if site.Params.doks.sectionFooter -}}
-<section class="section section-md container-fluid bg-light">
-  <div class="row justify-content-center text-center">
-    <div class="col-lg-7">
-      <h2 class="mt-2">Start building with Doks today</h2>
-      <a class="btn btn-primary rounded-pill px-4 my-2"
-         href="/docs/{{ if site.Params.doks.docsVersioning }}{{ site.Params.doks.docsVersion }}/{{ end }}prologue/introduction/"
-         role="button">{{ i18n "get-started" }}</a>
-    </div>
-  </div>
-</section>
-{{ end -}}
 {{ end }}