Skip to content

Commit 646ef67

Browse files
tomalaforgetomalaforge
committed
feat(): add two pages to tests ssr
1 parent 62b0fd2 commit 646ef67

File tree

6 files changed

+284
-13
lines changed

6 files changed

+284
-13
lines changed

‎doc-angular/src/app/app.routes.ts‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,15 @@
11
import { Route } from '@angular/router';
22

3-
export const appRoutes: Route[] = [];
3+
export const appRoutes: Route[] = [
4+
{
5+
path: '',
6+
pathMatch: 'full',
7+
loadComponent: () => import('./landing-page').then((m) => m.LandingPage),
8+
},
9+
{
10+
path: 'challenges',
11+
loadComponent: () =>
12+
import('./page/getting-started').then((m) => m.GettingStarted),
13+
},
14+
{ path: '**', redirectTo: '' },
15+
];

‎doc-angular/src/app/landing-page.ts‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
import { ChangeDetectionStrategy, Component } from '@angular/core';
2+
import { RouterLink } from '@angular/router';
3+
4+
@Component({
5+
selector: 'cha-landing-page',
6+
template: `
7+
<div class="bg-gray-50 text-gray-900">
8+
<!-- Hero Section -->
9+
<section
10+
class="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-gradient-to-br from-red-600 to-orange-500 px-4 text-center text-white">
11+
<!-- Decorative background shapes -->
12+
<div
13+
class="pointer-events-none absolute inset-0 bg-gradient-to-r from-red-700 to-orange-600 opacity-20 blur-3xl"></div>
14+
15+
<h1
16+
class="mb-6 transform text-4xl font-extrabold transition duration-700 hover:scale-105 md:text-6xl">
17+
Master Angular One Challenge at a Time
18+
</h1>
19+
<p class="mb-8 max-w-xl text-lg md:text-xl">
20+
Practice real-world Angular problems. Enhance your skills. Get
21+
job-ready.
22+
</p>
23+
<div
24+
class="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
25+
<a
26+
routerLink="/challenges"
27+
class="rounded-lg bg-white px-8 py-4 font-semibold text-red-600 transition hover:bg-gray-100">
28+
Start Solving Challenges
29+
</a>
30+
<a
31+
routerLink="/challenges"
32+
class="rounded-lg border border-white px-8 py-4 font-semibold transition hover:bg-white hover:text-red-600">
33+
Browse Challenges
34+
</a>
35+
</div>
36+
</section>
37+
38+
<!-- Features Section -->
39+
<section class="py-20">
40+
<div class="container mx-auto px-4 text-center">
41+
<h2 class="mb-12 text-3xl font-bold md:text-4xl">
42+
Why Angular Challenges?
43+
</h2>
44+
<div class="grid gap-8 md:grid-cols-3">
45+
<!-- Feature 1 -->
46+
<div
47+
class="transform rounded-lg bg-white p-8 shadow transition duration-500 hover:-translate-y-2">
48+
<svg
49+
class="mx-auto mb-4 h-12 w-12 text-red-600"
50+
fill="currentColor"
51+
viewBox="0 0 20 20">
52+
<path
53+
d="M10 2a8 8 0 100 16 8 8 0 000-16zM9 12l-3-3 1.414-1.414L9 9.172l4.586-4.586L15 6l-6 6z" />
54+
</svg>
55+
<h3 class="mb-2 text-xl font-semibold">Real-world scenarios</h3>
56+
<p>
57+
Learn by solving practical Angular problems from beginner to
58+
expert.
59+
</p>
60+
</div>
61+
62+
<!-- Feature 2 -->
63+
<div
64+
class="transform rounded-lg bg-white p-8 shadow transition duration-500 hover:-translate-y-2">
65+
<svg
66+
class="mx-auto mb-4 h-12 w-12 text-red-600"
67+
fill="currentColor"
68+
viewBox="0 0 20 20">
69+
<path
70+
d="M2 5a2 2 0 012-2h3v2H4v10h3v2H4a2 2 0 01-2-2V5zm12-2h3a2 2 0 012 2v10a2 2 0 01-2 2h-3v-2h3V5h-3V3zm-2 0v14h-4V3h4z" />
71+
</svg>
72+
<h3 class="mb-2 text-xl font-semibold">Instant feedback</h3>
73+
<p>
74+
See results in real-time with embedded unit tests and solutions.
75+
</p>
76+
</div>
77+
78+
<!-- Feature 3 -->
79+
<div
80+
class="transform rounded-lg bg-white p-8 shadow transition duration-500 hover:-translate-y-2">
81+
<svg
82+
class="mx-auto mb-4 h-12 w-12 text-red-600"
83+
fill="currentColor"
84+
viewBox="0 0 20 20">
85+
<path
86+
d="M10 2a8 8 0 100 16 8 8 0 000-16zm1 12H9v-2h2v2zm0-4H9V6h2v4z" />
87+
</svg>
88+
<h3 class="mb-2 text-xl font-semibold">Career growth</h3>
89+
<p>Ace interviews and improve your confidence in Angular.</p>
90+
</div>
91+
</div>
92+
</div>
93+
</section>
94+
95+
<!-- Popular Challenges Section -->
96+
<section class="bg-gray-100 py-20">
97+
<div class="container mx-auto px-4">
98+
<h2 class="mb-12 text-center text-3xl font-bold md:text-4xl">
99+
Popular Challenges
100+
</h2>
101+
<div class="grid gap-8 md:grid-cols-3">
102+
<!-- Example Challenge Card -->
103+
<div
104+
class="transform rounded-lg bg-white p-6 shadow transition hover:-translate-y-2 hover:shadow-lg">
105+
<h3 class="mb-2 text-xl font-semibold">Build a Custom Pipe</h3>
106+
<p class="mb-4 text-gray-600">
107+
Create a pipe to transform data for your templates.
108+
</p>
109+
<span
110+
class="mb-4 inline-block rounded bg-green-100 px-2 py-1 text-xs text-green-800">
111+
Beginner
112+
</span>
113+
<a
114+
routerLink="/challenges/custom-pipe"
115+
class="block rounded bg-red-600 px-4 py-2 text-center text-white transition hover:bg-red-700">
116+
Solve Now
117+
</a>
118+
</div>
119+
120+
<!-- Repeat dynamically with *ngFor -->
121+
</div>
122+
</div>
123+
</section>
124+
125+
<!-- Call to Action Section -->
126+
<section
127+
class="bg-gradient-to-r from-red-600 to-orange-500 py-20 text-center text-white">
128+
<h2 class="mb-6 text-3xl font-bold md:text-4xl">
129+
Ready to become an Angular pro?
130+
</h2>
131+
<a
132+
routerLink="/challenges"
133+
class="rounded-lg bg-white px-8 py-4 font-semibold text-red-600 transition hover:bg-gray-100">
134+
Get Started For Free
135+
</a>
136+
</section>
137+
138+
<!-- Footer -->
139+
<footer class="bg-gray-800 py-10 text-center text-gray-400">
140+
<div class="mb-4">
141+
<a routerLink="/" class="mx-2 hover:text-white">Home</a>
142+
<a routerLink="/challenges" class="mx-2 hover:text-white">
143+
Challenges
144+
</a>
145+
<a routerLink="/about" class="mx-2 hover:text-white">About</a>
146+
<a
147+
href="https://github.com/angular-challenges"
148+
target="_blank"
149+
class="mx-2 hover:text-white">
150+
GitHub
151+
</a>
152+
<a routerLink="/contact" class="mx-2 hover:text-white">Contact</a>
153+
</div>
154+
<p class="text-sm">
155+
© 2025 Angular Challenges. Built with ❤️ for the Angular community.
156+
</p>
157+
</footer>
158+
</div>
159+
`,
160+
changeDetection: ChangeDetectionStrategy.OnPush,
161+
imports: [RouterLink],
162+
})
163+
export class LandingPage {}

‎doc-angular/src/app/page/getting-started.ts‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import { Component } from '@angular/core';
2+
import { RouterLink } from '@angular/router';
3+
4+
@Component({
5+
selector: 'cha-getting-started',
6+
template: `
7+
<div class="bg-white text-gray-800">
8+
<!-- Header / Hero -->
9+
<section
10+
class="bg-gradient-to-r from-red-600 to-orange-500 py-20 text-center text-white">
11+
<div class="container mx-auto px-4">
12+
<h1 class="mb-4 text-4xl font-bold md:text-5xl">Getting Started</h1>
13+
<p class="mx-auto max-w-2xl text-lg md:text-xl">
14+
Welcome to Angular Challenges! Learn how to set up and solve your
15+
first challenge.
16+
</p>
17+
</div>
18+
</section>
19+
20+
<!-- Intro Section -->
21+
<section class="py-16">
22+
<div class="container mx-auto max-w-3xl px-4">
23+
<h2 class="mb-4 text-2xl font-bold">What are Angular Challenges?</h2>
24+
<p class="mb-6">
25+
Angular Challenges are bite-sized practical problems designed to
26+
help you practice real-world Angular concepts. Each challenge is
27+
independent and focuses on a specific topic, like components, pipes,
28+
services, forms, and more.
29+
</p>
30+
31+
<h2 class="mb-4 text-2xl font-bold">How It Works</h2>
32+
<ol class="list-inside list-decimal space-y-4">
33+
<li>
34+
<strong>Pick a Challenge:</strong>
35+
Browse challenges by category and difficulty. Choose one that
36+
matches your current learning goal.
37+
</li>
38+
<li>
39+
<strong>Read the Instructions:</strong>
40+
Each challenge comes with clear requirements and context. Read
41+
carefully before coding.
42+
</li>
43+
<li>
44+
<strong>Code in the Online Editor:</strong>
45+
Solve the challenge directly in your browser. Our platform runs
46+
Angular code with instant feedback.
47+
</li>
48+
<li>
49+
<strong>Check Your Solution:</strong>
50+
Validate your solution against provided tests. If it passes,
51+
you’re ready to move on!
52+
</li>
53+
<li>
54+
<strong>Review Official Solutions:</strong>
55+
Compare your approach with the official solution to learn best
56+
practices and different patterns.
57+
</li>
58+
</ol>
59+
</div>
60+
</section>
61+
62+
<!-- Example Challenge Preview -->
63+
<section class="bg-gray-50 py-16">
64+
<div class="container mx-auto max-w-4xl px-4">
65+
<h2 class="mb-6 text-center text-2xl font-bold">
66+
Try Your First Challenge
67+
</h2>
68+
<div class="mb-6 rounded-lg bg-white p-6 shadow">
69+
<h3 class="mb-2 text-xl font-semibold">
70+
Challenge: Create a Custom Pipe
71+
</h3>
72+
<p class="mb-4 text-gray-600">
73+
Build a pipe that capitalizes the first letter of each word in a
74+
string.
75+
</p>
76+
<a
77+
routerLink="/challenges/custom-pipe"
78+
class="inline-block rounded bg-red-600 px-6 py-3 text-white transition hover:bg-red-700">
79+
Start This Challenge
80+
</a>
81+
</div>
82+
</div>
83+
</section>
84+
85+
<!-- CTA Section -->
86+
<section
87+
class="bg-gradient-to-r from-red-600 to-orange-500 py-16 text-center text-white">
88+
<h2 class="mb-4 text-3xl font-bold md:text-4xl">
89+
Ready to solve your first Angular Challenge?
90+
</h2>
91+
<a
92+
routerLink="/challenges"
93+
class="rounded-lg bg-white px-8 py-4 font-semibold text-red-600 transition hover:bg-gray-100">
94+
Browse All Challenges
95+
</a>
96+
</section>
97+
</div>
98+
`,
99+
imports: [RouterLink],
100+
})
101+
export class GettingStarted {}

doc-angular/src/app/app.component.ts renamed to doc-angular/src/app/shell.ts

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
11
import { ChangeDetectionStrategy, Component } from '@angular/core';
2-
import { RouterModule } from '@angular/router';
2+
import { RouterOutlet } from '@angular/router';
33

44
@Component({
5-
imports: [RouterModule],
65
selector: 'cha-root',
76
template: `
8-
<div>{{ title }}</div>
97
<router-outlet />
108
`,
119
changeDetection: ChangeDetectionStrategy.OnPush,
10+
imports: [RouterOutlet],
1211
})
13-
export class AppComponent {
14-
protected title = 'doc-angular';
15-
}
12+
export class Shell {}

‎doc-angular/src/main.server.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { bootstrapApplication } from '@angular/platform-browser';
2-
import { AppComponent } from './app/app.component';
32
import { config } from './app/app.config.server';
3+
import { Shell } from './app/shell';
44

5-
const bootstrap = () => bootstrapApplication(AppComponent, config);
5+
const bootstrap = () => bootstrapApplication(Shell, config);
66

77
export default bootstrap;

‎doc-angular/src/main.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import { bootstrapApplication } from '@angular/platform-browser';
2-
import { AppComponent } from './app/app.component';
32
import { appConfig } from './app/app.config';
3+
import { Shell } from './app/shell';
44

5-
bootstrapApplication(AppComponent, appConfig).catch((err) =>
6-
console.error(err),
7-
);
5+
bootstrapApplication(Shell, appConfig).catch((err) => console.error(err));

0 commit comments

Comments
 (0)