Skip to content

Commit cbeb960

Browse files
ShewartShewart
committed
feat: animated home page and site footer
A bento of animated scenes replaces the feature cards: a terminal replay of shelldocs init and build, a search panel that opens search, markdown to page, a preview frame and the export's files. CSS and two small scripts, so it runs on the static export. The home page gets a footer with the Shell family, a copy button on the install command and its own search dialog.
1 parent 2adf7b0 commit cbeb960

9 files changed

Lines changed: 620 additions & 70 deletions

File tree

‎Components/App.razor‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@
3232
<body>
3333
<Routes @rendermode="RenderMode.InteractiveServer" />
3434
<script src="_content/ShellDocs.Components/shelldocs.js"></script>
35+
<script src="cli-replay.js"></script>
36+
<script src="copy-button.js"></script>
3537
<script type="module">
3638
import { createHighlighter } from 'https://esm.sh/shiki@1.24.0';
3739
window.__shiki = await createHighlighter({

‎Components/Home/FeatureBento.razor‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
@* "What's in ShellDocs?": a bento of small animated scenes, one per feature. Everything is CSS
2+
and wwwroot/cli-replay.js, with no Blazor event handlers, so it runs on the static export too.
3+
Motion stops under prefers-reduced-motion. *@
4+
5+
<section class="bento-section" aria-labelledby="bento-title">
6+
<header class="bento-head">
7+
<h2 id="bento-title">What's in ShellDocs?</h2>
8+
<p>A docs site from a folder of markdown, on any host.</p>
9+
</header>
10+
11+
<div class="bento">
12+
@* CLI: the terminal replays init and build *@
13+
<div class="cell span-2">
14+
<div class="visual visual-cli">
15+
<div class="terminal" data-cli-replay role="img" aria-label="Replay of shelldocs init and shelldocs build in a terminal">
16+
<div class="terminal-bar"><span></span><span></span><span></span><em>MyDocs : shelldocs</em></div>
17+
<div class="term-body"></div>
18+
</div>
19+
</div>
20+
<div class="text">
21+
<h3>One command to scaffold, one to publish</h3>
22+
<p><code>shelldocs init</code> creates a Blazor Web App wired end to end. <code>shelldocs build</code> prerenders every page into a folder any static host can serve.</p>
23+
<a href="/docs/getting-started/quick-start">Quick start →</a>
24+
</div>
25+
</div>
26+
27+
@* Search: the keys tap, the highlight walks the results. Clicking opens the real dialog. *@
28+
<div class="cell">
29+
<button type="button" class="visual visual-search" data-search-open aria-label="Open search">
30+
<span class="search-panel" aria-hidden="true">
31+
<span class="search-field">
32+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7" /><path d="M21 21l-4.35-4.35" /></svg>
33+
<span class="search-query">code tabs</span>
34+
<span class="keys"><kbd>Ctrl</kbd><kbd>K</kbd></span>
35+
</span>
36+
<span class="search-rows">
37+
<span class="search-hl"></span>
38+
<span class="search-row"><b>Code tabs on previews</b><i>Components</i></span>
39+
<span class="search-row"><b>With code tabs</b><i>IframePreview</i></span>
40+
<span class="search-row"><b>Switching together</b><i>Code tabs on previews</i></span>
41+
</span>
42+
</span>
43+
</button>
44+
<div class="text">
45+
<h3>Search with no server</h3>
46+
<p>Titles, headings and body text, ranked in the browser. It works the same on a static export. Click the panel to try it.</p>
47+
<a href="/docs/guides/search">How search works →</a>
48+
</div>
49+
</div>
50+
51+
@* Markdown: source lines on the left become a page on the right *@
52+
<div class="cell">
53+
<div class="visual visual-md" aria-hidden="true">
54+
<div class="md-source">
55+
<span class="md-line l1"><i>#</i> Getting started</span>
56+
<span class="md-line l2">Install the tool.</span>
57+
<span class="md-line l3"><i>&lt;Callout&gt;</i></span>
58+
<span class="md-line l4">Needs .NET 10.</span>
59+
<span class="md-line l5"><i>&lt;/Callout&gt;</i></span>
60+
</div>
61+
<svg class="md-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7" /></svg>
62+
<div class="md-page">
63+
<span class="md-h">Getting started</span>
64+
<span class="md-p"></span>
65+
<span class="md-callout"><span class="md-callout-dot"></span><span class="md-callout-bar"></span></span>
66+
</div>
67+
</div>
68+
<div class="text">
69+
<h3>Markdown first</h3>
70+
<p>Frontmatter, fenced code, and Blazor components written as tags in the middle of your prose.</p>
71+
<a href="/docs/authoring">Authoring →</a>
72+
</div>
73+
</div>
74+
75+
@* Live previews: the frame flips between Preview and Code *@
76+
<div class="cell">
77+
<div class="visual visual-preview" aria-hidden="true">
78+
<div class="frame">
79+
<div class="frame-bar">
80+
<span class="frame-tab tab-preview">Preview</span>
81+
<span class="frame-tab tab-code">Code</span>
82+
</div>
83+
<div class="frame-body">
84+
<div class="frame-panel panel-preview"><span class="demo-button">Save changes</span></div>
85+
<div class="frame-panel panel-code">
86+
<span><i>&lt;Button</i> Variant=<b>"primary"</b><i>&gt;</i></span>
87+
<span>&nbsp;&nbsp;Save changes</span>
88+
<span><i>&lt;/Button&gt;</i></span>
89+
</div>
90+
</div>
91+
</div>
92+
</div>
93+
<div class="text">
94+
<h3>Live component previews</h3>
95+
<p>A <code>razor:preview</code> fence renders your real components next to their source, from any library you register.</p>
96+
<a href="/docs/authoring/razor-preview">razor:preview →</a>
97+
</div>
98+
</div>
99+
100+
@* Static export: the files of a build tick off one by one *@
101+
<div class="cell">
102+
<div class="visual visual-export" aria-hidden="true">
103+
<ul class="files">
104+
<li class="f1"><span class="tick"></span>docs/introduction/index.html</li>
105+
<li class="f2"><span class="tick"></span>404.html</li>
106+
<li class="f3"><span class="tick"></span>_shelldocs/search.json</li>
107+
<li class="f4"><span class="tick"></span>sitemap.xml</li>
108+
</ul>
109+
</div>
110+
<div class="text">
111+
<h3>Any static host</h3>
112+
<p>GitHub Pages, Cloudflare Pages, Netlify, or a .NET host when you need live demos. This site is a static export.</p>
113+
<a href="/docs/guides/deployment">Deployment →</a>
114+
</div>
115+
</div>
116+
</div>
117+
</section>

0 commit comments

Comments
 (0)