| {{- /* /docs landing — light card grid, driven by data/docs.yml + data/stars.yml */ -}} |
| <!doctype html> |
| <html lang="{{ .Site.Language.Lang }}" class="no-js td-docs"> |
| <head> |
| {{ partial "head.html" . }} |
| <title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{ . }} | {{ end }}{{ .Site.Title }}{{ end }}</title> |
| </head> |
| <body class="td-{{ .Kind }} td-docs-landing"> |
| <header>{{ partial "navbar.html" . }}</header> |
| |
| <main class="td-main" role="main"> |
| <section class="docs-hero"> |
| <div class="container"> |
| <span class="eyebrow">DOCS · {{ len .Site.Data.docs }} SECTIONS</span> |
| <h1>Projects & documentation</h1> |
| <p>SkyWalking is the Server, UI, native storage and many agents. Start with the |
| <a href="#SkyWalkingServers">Server</a> to understand installation and deployment, then pick the |
| agents and integrations you need — or deploy the |
| <a href="#Showcase">showcase</a> for a quick preview.</p> |
| <div class="docs-chips"> |
| {{ range .Site.Data.docs }} |
| {{ $cat := or .buttonText (replace .type " " "") }} |
| <a class="docs-chip" href="#{{ $cat }}">{{ .type }}</a> |
| {{ end }} |
| </div> |
| </div> |
| </section> |
| |
| {{- /* Get started — two quickstarts: run the Showcase, or run SkyWalking */ -}} |
| {{ with .Site.Data.quickstart }} |
| <section class="qs-section" id="get-started"> |
| <div class="container"> |
| <h2 class="qs-head">Get started in minutes</h2> |
| <div class="qs-grid"> |
| {{ range $key := slice "showcase" "skywalking" }} |
| {{ $q := index $.Site.Data.quickstart $key }} |
| <article class="qs-card" id="qs-{{ $key }}"> |
| <div class="qs-card-top"> |
| <span class="qs-badge{{ if eq $key "showcase" }} is-rec{{ end }}">{{ $q.badge }}</span> |
| <h3>{{ $q.title }}</h3> |
| <p>{{ $q.blurb }}</p> |
| </div> |
| <div class="qs-term" data-qs="{{ $key }}"> |
| <div class="qs-tabs" role="tablist"> |
| {{ range $i, $t := $q.tabs }} |
| <button class="qs-tab{{ if eq $i 0 }} active{{ end }}" data-tab="{{ $i }}" type="button">{{ $t.os }}</button> |
| {{ end }} |
| </div> |
| {{ range $i, $t := $q.tabs }} |
| <div class="qs-pane{{ if eq $i 0 }} active{{ end }}" data-pane="{{ $i }}"> |
| <div class="qs-pane-bar"> |
| <span class="qs-lang">{{ $t.lang }}</span> |
| <button class="qs-copy" type="button" data-code={{ $t.code | chomp }}>Copy</button> |
| </div> |
| <div class="qs-code-lines"> |
| {{ range $li, $line := (split (chomp $t.code) "\n") }} |
| <div class="qs-line"><span class="qs-ln">{{ add $li 1 }}</span><span class="qs-code">{{ $line }}</span></div> |
| {{ end }} |
| </div> |
| </div> |
| {{ end }} |
| </div> |
| <a class="qs-docs" href="{{ $q.docsLink }}">{{ $q.docsLabel }} →</a> |
| </article> |
| {{ end }} |
| </div> |
| </div> |
| </section> |
| {{ end }} |
| |
| <div class="container docs-wrap"> |
| {{ range .Site.Data.docs }} |
| {{ $cat := or .buttonText (replace .type " " "") }} |
| <h2 class="docs-cat" id="{{ $cat }}">{{ .type }}</h2> |
| <div class="docs-grid"> |
| {{ range .list }} |
| {{ if .descriptionItem }} |
| <article class="docs-card docs-card--note"><div>{{ .descriptionItem }}</div></article> |
| {{ else }} |
| {{ $id := replace .name " " "" }}{{ $id := replace $id ")" "" }}{{ $id := replace $id "(" "" }} |
| {{ $user := .user }}{{ $repo := .repo }} |
| {{ $stars := index $.Site.Data.stars.repos (printf "%s/%s" $user $repo) }} |
| <article class="docs-card" id="{{ $id }}"> |
| <header class="docs-card-head"> |
| {{ if .icon }}<img class="docs-icon" width="30" height="30" src="/images/project/{{ .icon }}.svg" alt="">{{ end }} |
| <h5 class="docs-card-title">{{ .name }}</h5> |
| {{ with $stars }} |
| <a class="docs-stars" href="https://github.com/{{ $user }}/{{ $repo }}" target="_blank" rel="noopener" title="Stars on GitHub"> |
| <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 17.3l-6.18 3.7 1.64-7.03L2 9.24l7.19-.62L12 2l2.81 6.62L22 9.24l-5.46 4.73L18.18 21z"/></svg> |
| <span>{{ .stars }}</span> |
| </a> |
| {{ end }} |
| <a class="card-anchor" href="#{{ $id }}" data-anchor="{{ $id }}" title="Copy link to {{ .name }}" aria-label="Copy link to {{ .name }}"> |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg> |
| </a> |
| </header> |
| <p class="docs-card-desc">{{ .description | markdownify }}</p> |
| <footer class="docs-card-foot"> |
| {{ with .docs }} |
| {{- /* primary = the "Latest" entry if present, else the first one */ -}} |
| {{ $primary := index . 0 }} |
| {{ range . }}{{ if or (eq .version "Latest") (eq .versionName "Latest") }}{{ $primary = . }}{{ end }}{{ end }} |
| {{ $others := slice }} |
| {{ range . }}{{ if ne .link $primary.link }}{{ $others = $others | append . }}{{ end }}{{ end }} |
| <a class="docs-btn" href="{{ $primary.link }}" target="_blank" rel="noopener">Read docs →</a> |
| {{ if $others }} |
| <details class="docs-ver"> |
| <summary>versions</summary> |
| <ul> |
| {{ range $others }}<li><a href="{{ .link }}" target="_blank" rel="noopener">{{ or .versionName .version }}</a></li>{{ end }} |
| </ul> |
| </details> |
| {{ end }} |
| {{ end }} |
| {{ if and $user $repo }} |
| <a class="docs-gh" href="https://github.com/{{ $user }}/{{ $repo }}" target="_blank" rel="noopener" aria-label="GitHub repository"> |
| <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 .5C5.65.5.5 5.66.5 12.02c0 5.09 3.29 9.4 7.86 10.93.57.11.78-.25.78-.55v-2.13c-3.2.69-3.87-1.36-3.87-1.36-.52-1.32-1.27-1.68-1.27-1.68-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.02 1.75 2.69 1.25 3.34.95.1-.74.4-1.25.73-1.54-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.29 1.18-3.1-.12-.29-.51-1.45.11-3.02 0 0 .97-.31 3.18 1.18.92-.26 1.91-.39 2.9-.39.99 0 1.98.13 2.9.39 2.21-1.49 3.18-1.18 3.18-1.18.62 1.57.23 2.73.11 3.02.74.81 1.18 1.84 1.18 3.1 0 4.42-2.69 5.39-5.25 5.68.41.36.78 1.06.78 2.13v3.16c0 .31.21.67.79.55C20.21 21.42 23.5 17.11 23.5 12.02 23.5 5.66 18.35.5 12 .5z"/></svg> |
| </a> |
| {{ end }} |
| </footer> |
| </article> |
| {{ end }} |
| {{ end }} |
| </div> |
| {{ end }} |
| </div> |
| |
| {{ partial "footer.html" . }} |
| </main> |
| |
| {{ partial "event-popup.html" . }} |
| {{ partial "sidebar-skywalking.html" . }} |
| {{ partial "scripts.html" . }} |
| <script> |
| // quickstart OS tabs + copy |
| document.querySelectorAll('.qs-term').forEach(function (term) { |
| term.querySelectorAll('.qs-tab').forEach(function (tab) { |
| tab.addEventListener('click', function () { |
| var i = tab.getAttribute('data-tab'); |
| term.querySelectorAll('.qs-tab').forEach(function (t) { t.classList.toggle('active', t === tab); }); |
| term.querySelectorAll('.qs-pane').forEach(function (p) { p.classList.toggle('active', p.getAttribute('data-pane') === i); }); |
| }); |
| }); |
| }); |
| document.querySelectorAll('.qs-copy').forEach(function (btn) { |
| btn.addEventListener('click', function () { |
| navigator.clipboard && navigator.clipboard.writeText(btn.getAttribute('data-code') || '').then(function () { |
| var old = btn.textContent; btn.textContent = 'Copied'; setTimeout(function () { btn.textContent = old; }, 1400); |
| }); |
| }); |
| }); |
| </script> |
| {{ partial "card-permalink.html" . }} |
| </body> |
| </html> |
