Skip to content

Commit 0401907

Browse files
mofirojeanmofirojean
committed
feat: implement pipes list page
1 parent 3995279 commit 0401907

File tree

19 files changed

+707
-250
lines changed

19 files changed

+707
-250
lines changed

‎apps/docs/src/app/app.config.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
22
import { provideRouter } from '@angular/router';
33
import { appRoutes } from './app.routes';
4+
import { provideHttpClient, withFetch } from '@angular/common/http';
45

56
export const appConfig: ApplicationConfig = {
6-
providers: [provideBrowserGlobalErrorListeners(), provideRouter(appRoutes)],
7+
providers: [
8+
provideBrowserGlobalErrorListeners(),
9+
provideRouter(appRoutes),
10+
provideHttpClient(withFetch())
11+
],
712
};

‎apps/docs/src/app/app.css‎

Whitespace-only changes.

‎apps/docs/src/app/app.html‎

Lines changed: 20 additions & 212 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="min-h-screen bg-background text-foreground font-sans antialiased selection:bg-primary selection:text-primary-foreground overflow-x-hidden">
1+
<div class="min-h-screen bg-background text-foreground font-sans antialiased selection:bg-primary selection:text-primary-foreground">
22
<!-- Navbar -->
33
<header class="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
44
<div class="container mx-auto flex h-14 max-w-screen-2xl items-center justify-between px-4 md:px-8">
@@ -11,218 +11,26 @@
1111
</a>
1212
</div>
1313

14-
<nav class="flex items-center gap-2">
15-
<a
16-
href="https://github.com/your-repo"
17-
target="_blank"
18-
rel="noopener noreferrer"
19-
hlmBtn
20-
variant="ghost"
21-
size="icon"
22-
class="text-muted-foreground hover:text-foreground"
23-
>
24-
<ng-icon name="lucideGithub" class="h-5 w-5"></ng-icon>
25-
<span class="sr-only">GitHub</span>
26-
</a>
27-
28-
<button
29-
hlmBtn
30-
variant="ghost"
31-
size="icon"
32-
(click)="toggleTheme()"
33-
class="text-muted-foreground hover:text-foreground"
34-
>
35-
@if (theme() === 'dark') {
36-
<ng-icon name="lucideMoon" class="h-5 w-5 transition-all"></ng-icon>
37-
} @else if (theme() === 'light') {
38-
<ng-icon name="lucideSun" class="h-5 w-5 transition-all"></ng-icon>
39-
} @else {
40-
<ng-icon name="lucideMonitor" class="h-5 w-5 transition-all"></ng-icon>
41-
}
42-
<span class="sr-only">Toggle theme</span>
43-
</button>
44-
</nav>
45-
</div>
46-
</header>
47-
48-
<main class="relative flex flex-col items-center justify-center overflow-hidden pt-16 md:pt-24 lg:pt-32 pb-16">
49-
50-
<!-- Hero Background Pattern -->
51-
<div class="absolute inset-0 -z-10 h-full w-full bg-background [background:radial-gradient(125%_125%_at_50%_10%,#000_40%,#63e_100%)] dark:[background:radial-gradient(125%_125%_at_50%_10%,#000_40%,#63e_100%)] opacity-20"></div>
52-
<div class="absolute inset-0 -z-10 h-full w-full bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:14px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]"></div>
53-
54-
<!-- Hero Content -->
55-
<div class="container relative z-10 flex flex-col items-center text-center px-4 md:px-6" >
56-
<div class="inline-flex items-center rounded-full border border-border bg-background/50 px-3 py-1 text-sm font-medium text-muted-foreground backdrop-blur-sm mb-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
57-
<span class="flex h-2 w-2 rounded-full bg-primary mr-2"></span>
58-
v1.0.0 is now available
59-
</div>
60-
61-
<h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl max-w-4xl bg-clip-text text-transparent bg-gradient-to-b from-foreground to-foreground/70 animate-in fade-in slide-in-from-bottom-6 duration-700">
62-
Transform Data with <br class="hidden sm:block" />
63-
<span class="text-primary">Modern Angular Pipes</span>
64-
</h1>
65-
66-
<p class="mt-6 max-w-[42rem] text-lg text-muted-foreground sm:text-xl animate-in fade-in slide-in-from-bottom-8 duration-700 delay-100">
67-
A lightweight, type-safe, and performant collection of pure pipes for your Angular applications.
68-
Built for modern Angular with standalone support.
69-
</p>
70-
71-
<div class="mt-10 flex flex-wrap items-center justify-center gap-4 animate-in fade-in slide-in-from-bottom-10 duration-700 delay-200">
72-
<a
73-
hlmBtn
74-
size="lg"
75-
class="gap-2 min-w-[160px]"
76-
href="#get-started"
77-
>
78-
Get Started
79-
<ng-icon name="lucideArrowRight" class="h-4 w-4"></ng-icon>
80-
</a>
81-
<a
82-
hlmBtn
83-
variant="outline"
84-
size="lg"
85-
class="gap-2 min-w-40"
86-
href="https://github.com/your-repo"
87-
target="_blank"
88-
>
89-
<ng-icon name="lucideGithub" class="h-4 w-4"></ng-icon>
90-
GitHub
91-
</a>
92-
</div>
93-
94-
<!-- Pipe Visual Animation -->
95-
<div class="mt-20 relative w-full max-w-5xl mx-auto perspective-[2000px] animate-in fade-in zoom-in-95 duration-1000 delay-300">
96-
<div class="relative rounded-xl border border-border bg-card/50 shadow-2xl backdrop-blur-sm overflow-hidden transform rotate-x-12 transition-transform hover:rotate-x-0 duration-700 ease-out">
97-
<div class="flex items-center border-b border-border bg-muted/50 px-4 py-2">
98-
<div class="flex space-x-2">
99-
<div class="h-3 w-3 rounded-full bg-red-500/80"></div>
100-
<div class="h-3 w-3 rounded-full bg-yellow-500/80"></div>
101-
<div class="h-3 w-3 rounded-full bg-green-500/80"></div>
102-
</div>
103-
<div class="mx-auto text-xs font-medium text-muted-foreground">example.component.ts</div>
104-
</div>
105-
<div class="grid grid-cols-1 md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-border">
106-
<div class="p-6 md:p-8 bg-background/30">
107-
<div class="space-y-4">
108-
<div class="flex items-center justify-between">
109-
<span class="text-sm font-medium text-muted-foreground">Input Data</span>
110-
<span class="text-xs px-2 py-0.5 rounded-full bg-blue-500/10 text-blue-500">Raw</span>
111-
</div>
112-
<div class="rounded-md bg-muted/50 p-4 font-mono text-sm">
113-
<div class="text-green-500">const data = [</div>
114-
<div class="pl-4 text-foreground">1, 2, 3, 4, 5</div>
115-
<div class="text-green-500">];</div>
116-
</div>
117-
</div>
118-
</div>
119-
120-
<div class="relative p-6 md:p-8 bg-background/30 flex flex-col justify-center">
121-
<!-- Pipe Connector Visual -->
122-
<div class="absolute left-0 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10 hidden md:flex h-8 w-8 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg ring-4 ring-background">
123-
<ng-icon name="lucideArrowRight" class="h-4 w-4"></ng-icon>
124-
</div>
125-
126-
<div class="space-y-4">
127-
<div class="flex items-center justify-between">
128-
<span class="text-sm font-medium text-muted-foreground">Template Usage</span>
129-
<span class="text-xs px-2 py-0.5 rounded-full bg-primary/10 text-primary">Transformed</span>
130-
</div>
131-
<div class="rounded-md bg-muted/50 p-4 font-mono text-sm">
132-
<div class="text-blue-400">&lt;p&gt;</div>
133-
<div class="pl-4">
134-
<span class="text-foreground">{{ '{' }}{{ '{' }} </span>
135-
<span class="text-yellow-500">data</span>
136-
<span class="text-primary font-bold"> | count </span>
137-
<span class="text-foreground"> {{ '}' }}{{ '}' }}</span>
138-
</div>
139-
<div class="text-blue-400">&lt;/p&gt;</div>
140-
<div class="mt-2 pt-2 border-t border-border/50 text-muted-foreground text-xs">
141-
Output: <span class="text-foreground font-bold text-base ml-2">5</span>
142-
</div>
143-
</div>
144-
</div>
145-
</div>
146-
</div>
147-
</div>
148-
</div>
149-
</div>
150-
</main>
151-
152-
<!-- Features Section -->
153-
<section id="get-started" class="container mx-auto py-16 md:py-24 lg:py-32 px-4 md:px-6">
154-
<div class="mx-auto grid max-w-5xl items-center gap-6 lg:grid-cols-2 lg:gap-12">
155-
<div class="flex flex-col justify-center space-y-4">
156-
<div class="inline-block rounded-lg bg-muted px-3 py-1 text-sm text-muted-foreground w-fit">
157-
Why NgxTransforms?
158-
</div>
159-
<h2 class="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
160-
Built for the Modern Web
161-
</h2>
162-
<p class="max-w-[600px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
163-
Stop rewriting the same utility pipes in every project. We provide a robust, tested, and performant collection of pipes that just work.
164-
</p>
165-
<ul class="grid gap-4 mt-4">
166-
<li class="flex items-center gap-3">
167-
<div class="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-primary">
168-
<ng-icon name="lucideZap" class="h-4 w-4"></ng-icon>
169-
</div>
170-
<span class="font-medium">Blazing fast pure pipes</span>
171-
</li>
172-
<li class="flex items-center gap-3">
173-
<div class="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-primary">
174-
<ng-icon name="lucideShieldCheck" class="h-4 w-4"></ng-icon>
175-
</div>
176-
<span class="font-medium">Fully typed & null safe</span>
177-
</li>
178-
<li class="flex items-center gap-3">
179-
<div class="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-primary">
180-
<ng-icon name="lucideBox" class="h-4 w-4"></ng-icon>
181-
</div>
182-
<span class="font-medium">Standalone & Tree-shakeable</span>
183-
</li>
184-
</ul>
185-
</div>
186-
<div class="mx-auto w-full max-w-[500px] lg:max-w-none">
187-
<div class="rounded-xl border border-border bg-card text-card-foreground shadow-sm">
188-
<div class="p-6 pt-0 mt-6">
189-
<h3 class="text-2xl font-semibold leading-none tracking-tight mb-4">Quick Install</h3>
190-
<div class="relative rounded-md bg-muted p-4 font-mono text-sm">
191-
<div class="flex justify-between items-center">
192-
<span class="text-foreground">npm install &#64;ngx-transforms/core</span>
193-
<button hlmBtn variant="ghost" size="icon" class="h-6 w-6 text-muted-foreground hover:text-foreground">
194-
<ng-icon name="lucideCopy" class="h-3 w-3"></ng-icon>
195-
</button>
196-
</div>
197-
</div>
198-
199-
<h3 class="text-2xl font-semibold leading-none tracking-tight mt-8 mb-4">Usage</h3>
200-
<div class="relative rounded-md bg-muted p-4 font-mono text-sm overflow-x-auto">
201-
<div class="text-blue-400">import <span class="text-foreground">&#123;</span> <span class="text-yellow-400">CountPipe</span> <span class="text-foreground">&#125;</span> from <span class="text-green-400">'&#64;ngx-transforms/core'</span>;</div>
202-
<br>
203-
<div class="text-blue-400">&#64;Component<span class="text-foreground">(&#123;</span></div>
204-
<div class="pl-4 text-foreground">standalone: <span class="text-blue-400">true</span>,</div>
205-
<div class="pl-4 text-foreground">imports: [<span class="text-yellow-400">CountPipe</span>],</div>
206-
<div class="pl-4 text-foreground">template: <span class="text-green-400">`{{ '{' }}{{ '{' }} items | count {{ '}' }}{{ '}' }}`</span></div>
207-
<div class="text-foreground">&#125;)</div>
208-
</div>
209-
</div>
210-
</div>
14+
<div class="flex flex-1 items-center justify-end gap-2">
15+
<!-- <div class="w-full flex-1 md:w-auto md:flex-none">-->
16+
<!-- <button-->
17+
<!-- class="inline-flex items-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2 relative w-full justify-start text-sm text-muted-foreground sm:pr-12 md:w-40 lg:w-64"-->
18+
<!-- >-->
19+
<!-- <span class="hidden lg:inline-flex">Search documentation...</span>-->
20+
<!-- <span class="inline-flex lg:hidden">Search...</span>-->
21+
<!-- <kbd class="pointer-events-none absolute right-1.5 top-1.5 hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">-->
22+
<!-- <span class="text-xs">⌘</span>K-->
23+
<!-- </kbd>-->
24+
<!-- </button>-->
25+
<!-- </div>-->
26+
27+
<nav class="flex items-center gap-2">
28+
<app-github-stars />
29+
<app-theme />
30+
</nav>
21131
</div>
21232
</div>
213-
</section>
33+
</header>
21434

215-
<!-- Footer -->
216-
<footer class="border-t border-border/40 bg-background py-6 md:py-0">
217-
<div class="container mx-auto flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row px-4 md:px-8">
218-
<p class="text-center text-sm leading-loose text-muted-foreground md:text-left">
219-
Built by <a href="#" class="font-medium underline underline-offset-4">Mofiro Jean</a>.
220-
The source code is available on <a href="#" class="font-medium underline underline-offset-4">GitHub</a>.
221-
</p>
222-
<div class="flex items-center gap-4">
223-
<a href="#" class="text-sm text-muted-foreground hover:underline underline-offset-4">Privacy</a>
224-
<a href="#" class="text-sm text-muted-foreground hover:underline underline-offset-4">Terms</a>
225-
</div>
226-
</div>
227-
</footer>
35+
<router-outlet></router-outlet>
22836
</div>

‎apps/docs/src/app/app.routes.ts‎

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,41 @@
11
import { Route } from '@angular/router';
2+
import { Landing } from './pages/landing';
3+
import { Introduction } from './pages/introduction';
4+
import { PipesPageComponent } from './pages/pipes';
5+
import { Count } from './pages/count';
6+
import { PipesList } from './pages/pipes-list';
27

3-
export const appRoutes: Route[] = [];
8+
export const appRoutes: Route[] = [
9+
{
10+
path: '',
11+
component: Landing,
12+
pathMatch: 'full',
13+
},
14+
{
15+
path: 'docs',
16+
component: PipesPageComponent,
17+
children: [
18+
{
19+
path: 'introduction',
20+
component: Introduction,
21+
},
22+
{
23+
path: 'pipes',
24+
children: [
25+
{
26+
path: '',
27+
component: PipesList,
28+
},
29+
{
30+
path: 'count',
31+
component: Count,
32+
},
33+
],
34+
},
35+
],
36+
},
37+
{
38+
path: '**',
39+
redirectTo: '',
40+
},
41+
];

‎apps/docs/src/app/app.spec.ts‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎apps/docs/src/app/app.ts‎

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import { Component, inject } from '@angular/core';
1+
import { Component } from '@angular/core';
22
import { RouterModule } from '@angular/router';
3-
import { HlmButtonImports } from '@spartan-ng/helm/button';
43
import { NgIconComponent, provideIcons } from '@ng-icons/core';
54
import {
65
lucidePipette,
@@ -14,12 +13,13 @@ import {
1413
lucideBox,
1514
lucideCopy
1615
} from '@ng-icons/lucide';
17-
import { ThemeService } from './service';
16+
import {Theme} from './reusables/theme/theme';
17+
import {GithubStars} from './reusables/github/github-stars';
1818

1919
@Component({
2020
selector: 'app-root',
2121
standalone: true,
22-
imports: [RouterModule, HlmButtonImports, NgIconComponent],
22+
imports: [RouterModule, NgIconComponent, Theme, GithubStars],
2323
providers: [
2424
provideIcons({
2525
lucidePipette,
@@ -31,21 +31,11 @@ import { ThemeService } from './service';
3131
lucideZap,
3232
lucideShieldCheck,
3333
lucideBox,
34-
lucideCopy
34+
lucideCopy,
3535
})
3636
],
3737
templateUrl: './app.html',
38-
styleUrl: './app.css',
38+
styles: ``,
3939
})
4040
export class App {
41-
protected title = 'docs';
42-
private themeService = inject(ThemeService);
43-
protected theme = this.themeService.theme;
44-
45-
toggleTheme() {
46-
const current = this.theme();
47-
if (current === 'light') this.themeService.setTheme('dark');
48-
else if (current === 'dark') this.themeService.setTheme('system');
49-
else this.themeService.setTheme('light');
50-
}
5141
}

0 commit comments

Comments
 (0)