This document provides an overview of the AStack documentation website, a Next.js-based marketing and documentation site that serves as the primary entry point for users discovering the framework. The website showcases framework features, provides quick-start guides, and offers interactive examples.
For detailed information about the website's internal structure and layouts, see Website Architecture. For documentation of individual UI components and their implementations, see Website Components.
The website serves three primary functions:
The website is located in the website/ directory within the monorepo and is deployed at https://astack.tech.
Sources: website/README.md1-62
| Technology | Purpose |
|---|---|
| Next.js | React framework with SSR/SSG capabilities |
| TypeScript | Type-safe development |
| Tailwind CSS | Utility-first styling |
| Geist Font | Typography via next/font |
The website uses Next.js App Router architecture with React Server Components and implements a dark glassmorphism design aesthetic featuring gradient effects, mesh backgrounds, and smooth animations.
Sources: website/README.md15-35 website/app/page.tsx1-10
The website is configured as a workspace package in the monorepo structure, allowing it to reference framework packages during development while maintaining independent deployability.
Sources: pnpm-workspace.yaml1-3 website/README.md1-62
The main page at / implements a single-page application layout with all major sections rendered in sequence. The fixed navbar enables anchor-based navigation to each section.
Sources: website/app/page.tsx1-70
The Navbar component provides persistent navigation with the following elements:
| Element | Purpose | Implementation |
|---|---|---|
| Logo + Brand | Site identity | Image with gradient text website/components/Navbar.tsx9-25 |
| Beta Badge | Version status indicator | Animated badge with pulse effect website/components/Navbar.tsx23 |
| Nav Links | Section anchors | Links to #features, #computation-model, etc. website/components/Navbar.tsx27-43 |
| GitHub Stars | Social proof | Dynamic fetch from GitHub API website/components/Navbar.tsx46 |
| GitHub Link | Repository access | External link with icon website/components/Navbar.tsx47-57 |
The navbar is positioned with fixed top-0 and uses backdrop blur for the glassmorphism effect.
Sources: website/components/Navbar.tsx1-63
The BetaNotification component displays current release information:
The component implements intelligent fallback logic: it first attempts to fetch the latest non-prerelease version, and if none exists (404 response), fetches all releases and displays the most recent one.
Sources: website/components/BetaNotification.tsx1-124
The website integrates with GitHub's REST API for dynamic content:
The GitHubStars component fetches and displays repository star count:
Implementation pattern:
useEffectSources: website/components/GitHubStars.tsx1-56
The BetaNotification component fetches release metadata:
| Endpoint | Purpose | Fallback Strategy |
|---|---|---|
/releases/latest | Fetch latest stable release | On 404, fetch /releases |
/releases | Fetch all releases | Use first item if available |
Release Data Structure:
Sources: website/components/BetaNotification.tsx6-77
The website implements a cohesive visual design system:
Based on the logo gradient, the design uses:
from-teal-400 to-blue-500)from-blue-600 via-indigo-600)bg-black) with transparency overlays| Effect | Implementation | Usage |
|---|---|---|
| Glassmorphism | backdrop-blur-md with transparency | Navbar, cards |
| Gradients | bg-gradient-to-r with color stops | Text, backgrounds, borders |
| Glow | Blur overlays with low opacity | Section separators, focus areas |
| Animations | animate-pulse | Beta badge, notification indicators |
Sources: website/components/Navbar.tsx7-23 website/components/BetaNotification.tsx79-83
The AStack logo is an SVG with geometric hexagonal design:
The logo uses a three-layer design with progressive opacity to create depth, applied to hexagonal and diamond shapes that evoke component modularity and connection.
Sources: website/public/logo.svg1-16
The main page renders the following content sections in order:
| Section | Anchor ID | Purpose |
|---|---|---|
| Hero | (top) | Value proposition, primary CTA |
| Features | #features | Framework capabilities overview |
| Computation Model | #computation-model | Four core patterns explanation |
| Quick Start | #quickstart | Installation and first example |
| Comparison | #comparison | Framework differentiation |
| Use Cases | #use-cases | Application scenarios |
| Footer | (bottom) | Links, branding, copyright |
Each section is implemented as a separate React component imported into the main page.
Sources: website/app/page.tsx1-70
The development server runs on port 3000 with hot module replacement enabled. The build process generates optimized static and server assets in the .next/ directory.
Sources: website/README.md17-58
| Command | Purpose |
|---|---|
pnpm dev | Start development server with hot reload |
pnpm build | Create production build in .next/ |
pnpm start | Serve production build locally |
The website uses Next.js's automatic font optimization via next/font to load the Geist font family efficiently.
Sources: website/README.md17-35
While the website primarily serves as a marketing and documentation platform, it does integrate framework packages for demonstration purposes:
The website imports these packages to display accurate code examples and ensure documentation stays synchronized with actual framework APIs.
Sources: website/README.md59-62
The website embodies AStack's technical philosophy through its design choices:
The color palette (deep blues and greens from the logo) creates a technology-oriented aesthetic that appeals to the target developer audience while maintaining accessibility and readability.
Sources: website/README.md7-15
Refresh this wiki