Skip to content

Commit b44e835

Browse files
mythzmythz
committed
update docs
1 parent fd361d2 commit b44e835

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

74 files changed

+4667
-15
lines changed

‎app/(home)/page.tsx‎

Lines changed: 91 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -190,10 +190,10 @@ export default function HomePage() {
190190
<div className="space-y-32">
191191
<TemplateSection
192192
title="Next.js RSC"
193-
description="The cutting edge of React. Leverage full Next.js React Server Components to fetch data directly on the server, reducing bundle size and improving performance."
193+
description="The cutting edge of React. Leverage the full uncompromising power of Next.js React Server Components to access .NET APIs directly on the server, reducing bundle size and improving performance."
194194
href="/docs/templates/next-rsc"
195-
screenshot="https://raw.githubusercontent.com/ServiceStack/docs.servicestack.net/main/MyApp/wwwroot/img/pages/react/next-rsc.webp"
196-
diagram="https://raw.githubusercontent.com/ServiceStack/docs.servicestack.net/refs/heads/main/MyApp/wwwroot/img/pages/react/info/next-rsc-prod.svg"
195+
screenshot="https://github.com/ServiceStack/docs.servicestack.net/blob/main/MyApp/wwwroot/img/pages/react/next-rsc.webp?raw=true"
196+
diagram="https://github.com/ServiceStack/docs.servicestack.net/blob/main/MyApp/wwwroot/img/pages/react/info/next-rsc-prod.svg?raw=true"
197197
features={[
198198
"Server Components",
199199
"Hybrid Rendering",
@@ -207,10 +207,10 @@ export default function HomePage() {
207207

208208
<TemplateSection
209209
title="Next.js Static"
210-
description="The ultimate solution for public-facing websites. Combines the SEO and performance of Static Site Generation (SSG) with a dynamic .NET API."
210+
description="The ultimate solution for public-facing websites. Combines the SEO and performance of Static Site Generation (SSG) with a dynamic .NET API. Ideal for marketing sites, landing pages, blogs, and content-focused sites that benefit from SEO."
211211
href="/docs/templates/next-static"
212-
screenshot="https://raw.githubusercontent.com/ServiceStack/docs.servicestack.net/main/MyApp/wwwroot/img/pages/react/next-static.webp"
213-
diagram="https://raw.githubusercontent.com/ServiceStack/docs.servicestack.net/refs/heads/main/MyApp/wwwroot/img/pages/react/info/next-static-prod.svg"
212+
screenshot="https://github.com/ServiceStack/docs.servicestack.net/blob/main/MyApp/wwwroot/img/pages/react/next-static.webp?raw=true"
213+
diagram="https://github.com/ServiceStack/docs.servicestack.net/blob/main/MyApp/wwwroot/img/pages/react/info/next-static-prod.svg?raw=true"
214214
features={[
215215
"Static Export to /dist",
216216
"Served by ASP.NET Core Kestrel",
@@ -225,10 +225,10 @@ export default function HomePage() {
225225

226226
<TemplateSection
227227
title="React Static"
228-
description="A classic Single Page Application (SPA) experience powered by Vite. Perfect for dashboards, internal tools, and highly interactive apps."
228+
description="Minimal foundation for a classic Single Page Application (SPA) statically generated by Vite. Perfect for dashboards, internal tools, admin panels, and highly interactive apps where SEO isn't a priority."
229229
href="/docs/templates/react-static"
230-
screenshot="https://raw.githubusercontent.com/ServiceStack/docs.servicestack.net/main/MyApp/wwwroot/img/pages/react/react-static.webp"
231-
diagram="https://raw.githubusercontent.com/ServiceStack/docs.servicestack.net/refs/heads/main/MyApp/wwwroot/img/pages/react/info/react-static-prod.svg"
230+
screenshot="https://github.com/ServiceStack/docs.servicestack.net/blob/main/MyApp/wwwroot/img/pages/react/react-static.webp?raw=true"
231+
diagram="https://github.com/ServiceStack/docs.servicestack.net/blob/main/MyApp/wwwroot/img/pages/react/info/react-static-prod.svg?raw=true"
232232
features={[
233233
"Client-side Routing",
234234
"Lightning Fast Vite Dev Server",
@@ -240,6 +240,88 @@ export default function HomePage() {
240240
setDiagramMode={setDiagramMode}
241241
/>
242242
</div>
243+
244+
</div>
245+
</div>
246+
247+
{/* Full Featured Templates Divider - Full Width Dark Section */}
248+
<section className="relative w-full bg-slate-950 border-y border-white/10 overflow-hidden">
249+
{/* Background Effects */}
250+
<div className="absolute inset-0 opacity-20 pointer-events-none">
251+
<svg className="h-full w-full" aria-hidden="true">
252+
<defs>
253+
<pattern id="featured-grid" width="40" height="40" patternUnits="userSpaceOnUse">
254+
<path d="M0 40L40 0H20L0 20M40 40V20L20 40" stroke="#0ea5e9" strokeWidth="1" fill="none" opacity="0.1" />
255+
</pattern>
256+
</defs>
257+
<rect width="100%" height="100%" fill="url(#featured-grid)" />
258+
</svg>
259+
</div>
260+
261+
<div className="absolute top-0 left-1/4 h-64 w-64 rounded-full bg-blue-600/20 blur-[80px] pointer-events-none"></div>
262+
<div className="absolute bottom-0 right-1/4 h-64 w-64 rounded-full bg-cyan-500/10 blur-[80px] pointer-events-none"></div>
263+
264+
<div className="relative z-10 max-w-4xl mx-auto px-4 py-16 text-center">
265+
<div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-cyan-500/30 bg-cyan-500/10 text-sm font-medium text-cyan-300 mb-6">
266+
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
267+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
268+
</svg>
269+
Reference Implementations
270+
</div>
271+
272+
<h2 className="text-4xl md:text-5xl font-bold text-white tracking-tight mb-6">
273+
Full Featured Templates
274+
</h2>
275+
276+
<p className="text-lg text-slate-300 max-w-3xl mx-auto leading-relaxed">
277+
Full-featured .NET React Templates providing a good reference implementation for integrating several React features
278+
including <strong className="text-white">Blog</strong>, <strong className="text-white">MDX</strong>, <strong className="text-white">Todos</strong> and <strong className="text-white">shadcn/ui</strong> components alongside .NET features
279+
like <strong className="text-white">API Keys</strong>, <strong className="text-white">AI Chat</strong> &amp; <strong className="text-white">Swagger UI</strong>.
280+
</p>
281+
</div>
282+
</section>
283+
284+
{/* Full Featured Templates Content */}
285+
<div className="flex-1 w-full bg-background text-foreground">
286+
<div className="max-w-6xl mx-auto px-4 py-24 space-y-24">
287+
{/* Full Featured Template Showcase */}
288+
<div className="space-y-32">
289+
<TemplateSection
290+
title="Next.js"
291+
description="A comprehensive Next.js template showcasing the full power of integrating React with .NET. Features a complete Blog with MDX, Todos implementation, shadcn/ui components, API Keys management, AI Chat integration, and Swagger UI for API exploration."
292+
href="/docs/templates/nextjs"
293+
screenshot="https://github.com/ServiceStack/docs.servicestack.net/blob/main/MyApp/wwwroot/img/pages/react/nextjs.webp?raw=true"
294+
diagram="https://github.com/ServiceStack/docs.servicestack.net/blob/main/MyApp/wwwroot/img/pages/react/info/next-rsc-prod.svg?raw=true"
295+
features={[
296+
"Blog with MDX Support",
297+
"shadcn/ui Components",
298+
"API Keys & AI Chat",
299+
"OpenApi & Scalar UI",
300+
]}
301+
command="npx create-net nextjs ProjectName"
302+
diagramMode={diagramMode}
303+
setDiagramMode={setDiagramMode}
304+
/>
305+
306+
<TemplateSection
307+
title="React SPA"
308+
description="A feature-rich React Single Page Application powered by Vite. Includes Blog functionality, Todos, shadcn/ui components, API Keys management, AI Chat capabilities, and Swagger UI - all integrated with a robust .NET backend."
309+
href="/docs/templates/react-spa"
310+
screenshot="https://github.com/ServiceStack/docs.servicestack.net/blob/main/MyApp/wwwroot/img/pages/react/react-spa.webp?raw=true"
311+
diagram="https://github.com/ServiceStack/docs.servicestack.net/blob/main/MyApp/wwwroot/img/pages/react/info/react-static-prod.svg?raw=true"
312+
features={[
313+
"Blog with MDX Support",
314+
"shadcn/ui Components",
315+
"API Keys & AI Chat",
316+
"OpenApi & Swagger UI",
317+
]}
318+
command="npx create-net react-spa ProjectName"
319+
reversed
320+
diagramMode={diagramMode}
321+
setDiagramMode={setDiagramMode}
322+
/>
323+
</div>
324+
243325
<PricingCallout />
244326
</div>
245327
</div>

‎components/info.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import type { ReactNode } from 'react';
2+
3+
interface InfoProps {
4+
children: ReactNode;
5+
title?: string;
6+
}
7+
8+
/**
9+
* A Vue-style info component for documentation.
10+
* Displays an info callout with a blue accent, similar to VitePress/VuePress info blocks.
11+
*/
12+
export function Info({ children, title = 'INFO' }: InfoProps) {
13+
return (
14+
<div className="my-4 rounded-lg border border-blue-200 bg-blue-50 dark:border-blue-900/50 dark:bg-blue-950/30">
15+
<div className="flex items-start gap-3 px-4 pb-4 pt-2">
16+
<div className="flex-1">
17+
<p className="mb-2 text-sm font-semibold uppercase text-blue-700 dark:text-blue-400">
18+
{title}
19+
</p>
20+
<div className="text-sm text-blue-800 dark:text-blue-200 [&>p]:m-0 [&>p:not(:last-child)]:mb-2">
21+
{children}
22+
</div>
23+
</div>
24+
</div>
25+
</div>
26+
);
27+
}
28+

‎components/react-template.tsx‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
"use client";
2+
3+
import Templates, { Index } from "./templates"
4+
5+
export function ReactTemplates({ names, className }: { names: string[], className?: string }) {
6+
const templates = names.map(name => Index[name]);
7+
return <Templates templates={templates} className={className} />;
8+
}
9+
10+
interface ReactTemplateProps {
11+
name: string;
12+
description: string;
13+
}
14+
export function ReactTemplate({ name, description }: ReactTemplateProps) {
15+
const template = Index[name];
16+
17+
return (
18+
<div className="mb-24 not-prose">
19+
{/* Simple header */}
20+
<div className="mb-8">
21+
<h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl flex justify-between items-center">
22+
<div>{template.name}</div>
23+
<a className="group inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-gray-900 hover:bg-gray-800 text-white text-sm font-medium transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-105"
24+
href={`https://github.com/NetCoreTemplates/${name}`}>
25+
<svg className="size-5 group-hover:rotate-12 transition-transform duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"/></svg>
26+
Source Code
27+
</a>
28+
</h2>
29+
<p className="mt-3 text-xl text-gray-600 dark:text-gray-400 mb-8">
30+
{description}
31+
</p>
32+
</div>
33+
34+
{/* Templates section with enhanced styling */}
35+
<div className="my-10 transform transition-all duration-300 hover:scale-[1.02]">
36+
<Templates templates={[template]} />
37+
</div>
38+
39+
{/* Screenshots with enhanced hover effects and layout */}
40+
<div className="flex flex-col lg:flex-row justify-center items-center gap-8 lg:gap-10 my-10">
41+
{/* light screenshot */}
42+
<a className="group relative overflow-hidden rounded-2xl shadow-2xl hover:shadow-3xl transition-all duration-300 transform hover:scale-105 hover:-rotate-1"
43+
href={`https://${name}.web-templates.io`}>
44+
<div className="absolute inset-0 bg-gradient-to-tr from-blue-400 to-purple-500 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
45+
<img className="w-80 h-80 md:w-96 md:h-96 object-cover ring-4 ring-gray-200 group-hover:ring-indigo-400 transition-all duration-300"
46+
src={`/img/pages/react/${name}.webp`}
47+
alt={`${template.name} light theme`} />
48+
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
49+
<p className="text-white text-base font-semibold">Light Theme</p>
50+
</div>
51+
</a>
52+
53+
{/* dark screenshot */}
54+
<a className="group relative overflow-hidden rounded-2xl shadow-2xl hover:shadow-3xl transition-all duration-300 transform hover:scale-105 hover:rotate-1"
55+
href={`https://${name}.web-templates.io`}>
56+
<div className="absolute inset-0 bg-gradient-to-tr from-purple-500 to-pink-400 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
57+
<img className="w-80 h-80 md:w-96 md:h-96 object-cover ring-4 ring-gray-200 group-hover:ring-purple-400 transition-all duration-300"
58+
src={`/img/pages/react/${name}-dark.webp`}
59+
alt={`${template.name} dark theme`} />
60+
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
61+
<p className="text-white text-base font-semibold">Dark Theme</p>
62+
</div>
63+
</a>
64+
</div>
65+
</div>
66+
);
67+
}

0 commit comments

Comments
 (0)