Skip to content

Commit 4c51ea6

Browse files
dahliaclaude
dahlia
and
claude
committed
Initial commit: Fedify Studio teaser landing page
Create a Vue 3 + Vite + UnoCSS landing page for Fedify Studio, an upcoming ActivityPub development and debugging platform (H2 2026). Features: - Dark/light mode with system preference detection - Responsive design with mobile-first approach - Sections: Hero, Pain Points, Features, Roadmap, Newsletter, Footer - Smooth CSS animations and transitions - Lucide icons via @iconify-json/lucide Co-Authored-By: Claude <noreply@anthropic.com>
0 parents  commit 4c51ea6

29 files changed

Lines changed: 3807 additions & 0 deletions

‎.claude/settings.local.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"permissions": {
3+
"allow": [
4+
"mcp__context7__resolve-library-id",
5+
"mcp__context7__get-library-docs",
6+
"Skill(frontend-design:frontend-design)",
7+
"Bash(pnpm create:*)",
8+
"Bash(pnpm build:*)",
9+
"mcp__playwright__browser_navigate",
10+
"mcp__playwright__browser_snapshot",
11+
"mcp__playwright__browser_take_screenshot",
12+
"mcp__playwright__browser_click",
13+
"mcp__playwright__browser_evaluate",
14+
"mcp__playwright__browser_close"
15+
],
16+
"deny": [],
17+
"ask": []
18+
}
19+
}

‎.gitignore‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?
25+
26+
.playwright-mcp/

‎.vscode/extensions.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"recommendations": ["Vue.volar"]
3+
}

‎CLAUDE.md‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
# CLAUDE.md
2+
3+
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
4+
5+
## Project Overview
6+
7+
This is the teaser landing page for **Fedify Studio**, an upcoming ActivityPub development and debugging platform (releasing H2 2026). It's a static Vue 3 application built with Vite and UnoCSS.
8+
9+
## Tech Stack
10+
11+
- **Vue 3** with Composition API and `<script setup>` syntax
12+
- **Vite 7** as the build tool
13+
- **UnoCSS** for atomic CSS (Tailwind-compatible utilities)
14+
- **TypeScript** for type safety
15+
- **pnpm** as the package manager
16+
17+
## Common Commands
18+
19+
```bash
20+
pnpm install # Install dependencies
21+
pnpm dev # Start dev server at http://localhost:5173
22+
pnpm build # Type-check and build for production
23+
pnpm preview # Preview production build
24+
```
25+
26+
## Project Structure
27+
28+
- `src/components/` - Vue single-file components for each section
29+
- `src/composables/` - Reusable composition functions (e.g., `useDarkMode`)
30+
- `src/style.css` - Global styles, CSS variables for theming
31+
- `uno.config.ts` - UnoCSS configuration (presets, theme colors, shortcuts)
32+
- `public/` - Static assets (logos)
33+
34+
## Key Patterns
35+
36+
### Dark Mode
37+
Dark mode is implemented via:
38+
1. CSS class `.dark` on `<html>` element
39+
2. CSS variables in `src/style.css` that change based on `.dark` class
40+
3. `useDarkMode` composable for toggle logic
41+
4. Initial detection in `index.html` script (prevents flash)
42+
43+
### Styling
44+
- Use UnoCSS utility classes (Tailwind-compatible)
45+
- Custom colors defined in `uno.config.ts` under `theme.colors.fedify`
46+
- Shortcuts defined for common patterns (`btn`, `btn-primary`, `card`, etc.)
47+
- Global animations defined in `src/style.css`
48+
49+
### Components
50+
All section components are in `src/components/`:
51+
- `TheHeader.vue` - Fixed header with nav and dark mode toggle
52+
- `HeroSection.vue` - Hero with animated background
53+
- `PainPointsSection.vue` - Problem statement cards
54+
- `FeaturesSection.vue` - Feature grid with icons
55+
- `RoadmapSection.vue` - Timeline of development phases
56+
- `NewsletterSection.vue` - Email subscription form (UI only, no backend)
57+
- `TheFooter.vue` - Footer with links
58+
59+
## Design Guidelines
60+
61+
- **Color palette**: Based on Fedify logo (sky blue #0ea5e9, violet #a855f7, pink #ec4899)
62+
- **Typography**: IBM Plex Sans (body), Instrument Sans (display)
63+
- **Style**: Clean, professional, subtle gradients, not overly flashy
64+
- **Responsive**: Mobile-first, breakpoints at sm/md/lg
65+
66+
## Notes
67+
68+
- Newsletter form is frontend-only (no backend integration yet)
69+
- The `WHITEPAPER.md` file contains detailed feature specifications
70+
- Logo files are in both root directory and `public/` folder

‎README.md‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# Fedify Studio Landing Page
2+
3+
Teaser landing page for **Fedify Studio**, a comprehensive web-based development and debugging platform for ActivityPub. Coming H2 2026.
4+
5+
Fedify Studio is a sister project of [Fedify](https://fedify.dev/), the TypeScript library for building federated server applications.
6+
7+
## Tech Stack
8+
9+
- **Build Tool**: [Vite](https://vite.dev/) 7.x
10+
- **Framework**: [Vue](https://vuejs.org/) 3.x with Composition API
11+
- **Styling**: [UnoCSS](https://unocss.dev/) (atomic CSS engine)
12+
- **Icons**: [Lucide](https://lucide.dev/) via `@iconify-json/lucide`
13+
- **Language**: TypeScript
14+
15+
## Development
16+
17+
```bash
18+
# Install dependencies
19+
pnpm install
20+
21+
# Start development server
22+
pnpm dev
23+
24+
# Build for production
25+
pnpm build
26+
27+
# Preview production build
28+
pnpm preview
29+
```
30+
31+
## Project Structure
32+
33+
```
34+
src/
35+
├── main.ts # App entry point
36+
├── App.vue # Root component
37+
├── style.css # Global styles & CSS variables
38+
├── composables/
39+
│ └── useDarkMode.ts # Dark mode toggle logic
40+
└── components/
41+
├── TheHeader.vue # Navigation & dark mode toggle
42+
├── HeroSection.vue # Hero with gradient background
43+
├── PainPointsSection.vue # ActivityPub development challenges
44+
├── FeaturesSection.vue # Key features grid
45+
├── RoadmapSection.vue # Development roadmap timeline
46+
├── NewsletterSection.vue # Email subscription form
47+
└── TheFooter.vue # Footer with links
48+
```
49+
50+
## Features
51+
52+
- **Dark/Light Mode**: Respects system preference, with manual toggle
53+
- **Responsive Design**: Mobile-first approach
54+
- **Smooth Animations**: CSS animations with staggered delays
55+
- **Accessible**: Semantic HTML, ARIA labels, keyboard navigation
56+
57+
## Related Links
58+
59+
- [Fedify Framework](https://fedify.dev/)
60+
- [Fedify GitHub](https://github.com/fedify-dev/fedify)
61+
- [Fedify Studio White Paper](./WHITEPAPER.md)

0 commit comments

Comments
 (0)