Skip to content

Commit 220164d

Browse files
amondnetamondnet
authored
feat(layer): add PageHero, PageSection, PageCard components and enhance ButtonA (#5)
* feat(layer): add PageHero, PageSection, PageCard components and enhance ButtonA - Add new PageHero MDC component for landing page hero section with headline, title, description, and links - Add new PageSection MDC component for structured content sections with customizable layout - Add new PageCard MDC component for displaying card-based content - Enhance ButtonA component to support size and variant props (lg, outline, etc.) - Update index.md to use new MDC components with improved semantic structure - Update index.vue with proper 404 error handling and comprehensive SEO meta tags - Improve page layout by removing unnecessary prose styling from landing page Closes #docs-index * refactor(layer): rename components to follow Nuxt UI naming convention - Rename ButtonA to UButton - Rename PageHero to UPageHero - Rename PageSection to UPageSection - Rename PageCard to UPageCard - Update index.md to use kebab-case component names (u-button, u-page-hero, etc.) * feat(docs): enhance landing page with Docus-style layout and components - Update index.md with improved hero section and feature cards grid - Add UPageGrid component for responsive grid layouts - Add FloatingNuxt component with hover animation effect - Add spotlight prop to UPageCard for group hover effects - Reorder UPageCard slots to show content above media (Docus pattern) - Install and configure @nuxt/icon module for icon support - Add shadcn-vue dependency for CLI tooling * feat(layer): add Docus-style callout components with type variants - Add info, warning, success, error variants to Alert component - Enhance Callout with type support (note, tip, warning, caution) - Create shortcut components (Note, Tip, Warning, Caution) - Add default padding to TabsContent component - Update landing page to showcase new callout types
1 parent 527cb76 commit 220164d

22 files changed

Lines changed: 1040 additions & 156 deletions

‎apps/docs/app/components/content/FloatingNuxt.vue‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<template>
2+
<div class="flex-1 flex items-center justify-center">
3+
<NuxtImg
4+
src="/landing/nuxt-logo-3D.svg"
5+
class="h-42 floating-logo"
6+
alt="Nuxt 3D Logo"
7+
/>
8+
</div>
9+
</template>
10+
11+
<style>
12+
.floating-logo {
13+
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
14+
}
15+
.group:hover .floating-logo {
16+
transform: translateY(-20px);
17+
}
18+
</style>

‎apps/docs/content/index.md‎

Lines changed: 145 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,156 @@
11
---
22
title: PleaseAI Docs
3-
description: Ship fast, flexible, and SEO-optimized documentation with beautiful design out of the box. Built with shadcn-vue and Nuxt Content.
3+
seo:
4+
title: Write beautiful docs with Markdown
5+
description: Ship fast, flexible, and SEO-optimized documentation with beautiful design out of the box. Built with shadcn-vue and Nuxt Content.
46
---
57

6-
::div{.flex.flex-col.items-center.text-center.py-16.md:py-24}
8+
::u-page-hero
9+
#headline
10+
:::u-button{to="https://github.com/pleaseai/docs/releases" target="_blank" variant="outline" size="sm"}
11+
docs-please v1.0 →
12+
:::
713

8-
# Write beautiful docs with Markdown.
14+
#title
15+
Write beautiful docs with Markdown.
916

10-
Ship fast, flexible, and SEO-optimized documentation with beautiful design out of the box.
17+
#description
18+
Ship fast, flexible, and SEO-optimized documentation with beautiful design out of the box. Built with **shadcn-vue** and **Nuxt Content**.
1119

12-
Built with **shadcn-vue** and **Nuxt Content**.
20+
#links
21+
:::u-button{to="/docs/getting-started/introduction" size="lg"}
22+
Get Started →
23+
:::
1324

14-
::div{.flex.flex-wrap.justify-center.gap-4.mt-8}
15-
::ButtonA{to="/docs"}
16-
Get Started
17-
::
18-
19-
::ButtonA{to="https://github.com/pleaseai/docs" target="\_blank" external}
20-
GitHub
21-
::
25+
:::u-button{to="https://github.com/pleaseai/docs" target="_blank" variant="outline" size="lg"}
26+
Star on GitHub
27+
:::
2228
::
2329

24-
::
25-
26-
---
27-
28-
## Features
29-
30-
::div{.grid.grid-cols-1.md:grid-cols-2.lg:grid-cols-3.gap-6.mt-8}
31-
32-
::FeatureCard{title="shadcn-vue Components"}
33-
Beautiful, accessible UI components built with Reka UI primitives and styled with Tailwind CSS.
34-
::
35-
36-
::FeatureCard{title="Tailwind CSS v4"}
37-
Modern CSS with native CSS variables, oklch colors, and lightning-fast performance.
38-
::
39-
40-
::FeatureCard{title="Dark Mode"}
41-
Built-in dark/light mode support with smooth transitions and system preference detection.
42-
::
43-
44-
::FeatureCard{title="MDC Syntax"}
45-
Write pages in Markdown and extend with MDC syntax to embed Vue components seamlessly.
46-
::
47-
48-
::FeatureCard{title="Full-text Search"}
49-
Auto-generated navigation and full-text search for your documentation.
50-
::
51-
52-
::FeatureCard{title="Nuxt Layer"}
53-
Reusable Nuxt layer architecture - extend and customize to fit your needs.
54-
::
55-
56-
::
57-
58-
---
59-
60-
## Quick Start
61-
62-
```bash
63-
npm install docs-please
64-
```
65-
66-
```ts [nuxt.config.ts]
67-
export default defineNuxtConfig({
68-
extends: ['docs-please']
69-
})
70-
```
71-
72-
```md [content/docs/index.md]
73-
---
74-
title: Introduction
75-
description: Getting started with your documentation
76-
---
77-
78-
# Welcome
79-
80-
Start writing your documentation in Markdown.
81-
```
82-
83-
---
84-
85-
## Documentation
86-
87-
Explore the documentation to learn more about features and customization options.
88-
89-
::div{.flex.flex-wrap.gap-4.mt-6}
90-
::ButtonA{to="/docs/getting-started/introduction"}
91-
Introduction
92-
::
93-
94-
::ButtonA{to="/docs/components/overview"}
95-
Components
96-
::
30+
::u-page-section
31+
:::u-page-grid{class="lg:grid-cols-2"}
32+
::::u-page-card
33+
---
34+
spotlight: true
35+
class: col-span-1
36+
target: _blank
37+
to: https://nuxt.com
38+
---
39+
:::::floating-nuxt
40+
:::::
41+
42+
#title
43+
Built with [Nuxt 4]{.text-primary}
44+
45+
#description
46+
Optimized by the most famous Vue framework. Everything you need to build fast, performant, and SEO-friendly documentation websites.
47+
::::
48+
49+
::::u-page-card{to="https://ui.shadcn.com" target="_blank" class="col-span-1"}
50+
#title
51+
Powered by [shadcn-vue]{.text-primary}
52+
53+
#description
54+
Beautiful, accessible UI components built with Reka UI primitives. Minimal by design but highly customizable for your documentation needs.
55+
::::
56+
57+
::::u-page-card
58+
---
59+
spotlight: true
60+
class: col-span-1 lg:col-span-2
61+
---
62+
:::::tabs{default-value="preview"}
63+
::::::tabs-list
64+
:::::::tabs-trigger{value="preview"}
65+
Preview
66+
:::::::
67+
:::::::tabs-trigger{value="code"}
68+
Code
69+
:::::::
70+
::::::
71+
::::::tabs-content{value="preview"}
72+
:::::::div{class="flex flex-col gap-4"}
73+
::::::::note{class="my-0"}
74+
Here's some additional information for you.
75+
::::::::
76+
77+
::::::::tip{class="my-0"}
78+
Here's a helpful suggestion.
79+
::::::::
80+
81+
::::::::warning{class="my-0"}
82+
Be careful with this action as it might have unexpected results.
83+
::::::::
84+
85+
::::::::caution{class="my-0"}
86+
This action cannot be undone.
87+
::::::::
88+
:::::::
89+
::::::
90+
91+
::::::tabs-content{value="code" class="text-sm overflow-x-auto"}
92+
```mdc
93+
::note
94+
Here's some additional information.
95+
::
96+
97+
::tip
98+
Here's a helpful suggestion.
99+
::
100+
101+
::warning
102+
Be careful with this action.
103+
::
104+
105+
::caution
106+
This action cannot be undone.
107+
::
108+
```
109+
::::::
110+
:::::
111+
112+
#title
113+
Enhanced Markdown syntax by [Nuxt Content]{.text-primary}
114+
115+
#description
116+
Write your pages in Markdown and extend with MDC syntax to embed Vue components seamlessly. Structure, routing, and rendering are handled for you.
117+
::::
118+
119+
::::u-page-card{class="col-span-1"}
120+
#title
121+
Customize with [App Config]{.text-primary}
122+
123+
#description
124+
Update colors, social links, header logos and component styles globally using `app.config.ts`, no direct code modifications required.
125+
126+
#body
127+
```ts [app.config.ts]
128+
export default defineAppConfig({
129+
docs: {
130+
title: 'My Docs',
131+
github: {
132+
owner: 'myorg',
133+
name: 'my-docs'
134+
}
135+
}
136+
})
137+
```
138+
::::
139+
140+
::::u-page-card{class="col-span-1"}
141+
#title
142+
[Dark Mode]{.text-primary} built-in
143+
144+
#description
145+
Built-in dark/light mode support with smooth transitions and system preference detection. No configuration required.
146+
::::
147+
148+
::::u-page-card{class="col-span-1 lg:col-span-2"}
149+
#title
150+
Built-in navigation and [full-text search]{.text-primary}
151+
152+
#description
153+
Only focus on ordering your content. Auto-generated side navigation and full-text search are built-in to help users find what they need.
154+
::::
155+
:::
97156
::

‎apps/docs/public/landing/nuxt-logo-3D.svg‎

Lines changed: 29 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)