Skip to content

Commit dd05586

Browse files
AnatoliyKN1B22AnatoliyKN1B22
committed
feat: add header and public layout components
- Implemented a responsive header component with navigation links and theme settings. - Created a public layout component that includes the header and footer. - Added corresponding tests for the header and public components. feat: create content page with blog functionality - Developed a content page that displays blog posts with search and category filtering. - Implemented tilt effect on blog cards for enhanced user interaction. - Added tests for the content component. feat: implement form page for order submission - Created a form page layout for order processing. - Added corresponding tests for the form component. feat: add gallery page with background effects - Developed a gallery page with a visually appealing background and section for gallery items. - Added tests for the gallery component. feat: create home page with multiple sections - Implemented a home page that includes various sections such as hero, features, and testimonials. - Added tests for the home component. feat: add list page with product catalog - Created a list page that displays a catalog of products with individual item components. - Added tests for the list and list item components. feat: implement profile page for product details - Developed a profile page to showcase product details with an option to return to the catalog. - Added tests for the profile component. feat: create table page for order management - Implemented a table page for managing orders with a dedicated section. - Added tests for the table component.
1 parent 856b037 commit dd05586

File tree

128 files changed

+3776
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

128 files changed

+3776
-0
lines changed

‎app.config.server.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { ApplicationConfig, mergeApplicationConfig } from '@angular/core';
2+
import { provideServerRendering, withRoutes } from '@angular/ssr';
3+
import { appConfig } from './app.config';
4+
import { serverRoutes } from './app.routes.server';
5+
6+
const serverConfig: ApplicationConfig = {
7+
providers: [provideServerRendering(withRoutes(serverRoutes))],
8+
};
9+
10+
export const config = mergeApplicationConfig(appConfig, serverConfig);

‎app.config.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
2+
import { provideRouter } from '@angular/router';
3+
4+
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
5+
import { routes } from './app.routes';
6+
7+
export const appConfig: ApplicationConfig = {
8+
providers: [
9+
provideBrowserGlobalErrorListeners(),
10+
provideRouter(routes),
11+
provideClientHydration(withEventReplay()),
12+
],
13+
};

‎app.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
:host {
2+
display: block;
3+
min-height: 100vh;
4+
background: var(--c-bg-primary);
5+
color: var(--c-text-primary);
6+
font-family: var(--ff-base);
7+
font-size: var(--fs);
8+
letter-spacing: var(--letter-spacing);
9+
}
10+
11+
.section {
12+
padding-top: 5rem;
13+
}
14+
15+
/* Активний пункт меню */
16+
.navbar-item.is-active {
17+
font-weight: 600;
18+
background-color: transparent;
19+
}

‎app.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<router-outlet></router-outlet>

‎app.routes.server.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { RenderMode, ServerRoute } from '@angular/ssr';
2+
3+
export const serverRoutes: ServerRoute[] = [
4+
{
5+
path: '**',
6+
renderMode: RenderMode.Prerender,
7+
},
8+
];

‎app.routes.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { Routes } from '@angular/router';
2+
import { Public } from './layouts/public/public';
3+
import { Content } from './pages/content/content';
4+
import { Form } from './pages/form/form';
5+
import { Gallery } from './pages/gallery/gallery';
6+
import { Home } from './pages/home/home';
7+
import { ProfileComponent } from './pages/profile/profile';
8+
import { Table } from './pages/table/table';
9+
import { ListItemsComponent } from './pages/list/list-item/list-item';
10+
11+
export const routes: Routes = [
12+
{
13+
path: '',
14+
component: Public,
15+
children: [
16+
{path: '', redirectTo: 'home', pathMatch: 'full' },
17+
{ path: 'home', component: Home },
18+
{ path: 'list', component: ListItemsComponent },
19+
{ path: 'profile', component: ProfileComponent },
20+
{ path: 'form', component: Form },
21+
{ path: 'table', component: Table },
22+
{ path: 'gallery', component: Gallery },
23+
{ path: 'content', component: Content },
24+
],
25+
},
26+
];

‎app.spec.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { TestBed } from '@angular/core/testing';
2+
import { AppComponent } from './app';
3+
4+
describe('App', () => {
5+
beforeEach(async () => {
6+
await TestBed.configureTestingModule({
7+
imports: [AppComponent],
8+
}).compileComponents();
9+
});
10+
11+
it('should create the app', () => {
12+
const fixture = TestBed.createComponent(AppComponent);
13+
const app = fixture.componentInstance;
14+
expect(app).toBeTruthy();
15+
});
16+
17+
it('should render title', async () => {
18+
const fixture = TestBed.createComponent(AppComponent);
19+
await fixture.whenStable();
20+
const compiled = fixture.nativeElement as HTMLElement;
21+
expect(compiled.querySelector('h1')?.textContent).toContain('Hello, theme-bulma');
22+
});
23+
});

‎app.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
// src/app/app.component.ts
2+
import { Component, inject } from '@angular/core';
3+
import { RouterOutlet } from '@angular/router';
4+
import { ThemeService } from 'wacom';
5+
6+
@Component({
7+
selector: 'app-root',
8+
imports: [RouterOutlet],
9+
templateUrl: './app.html',
10+
styleUrl: './app.css',
11+
})
12+
export class AppComponent {
13+
private _themeService = inject(ThemeService);
14+
15+
constructor() {
16+
this._themeService.init();
17+
}
18+
}

‎components/about/about.css‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
:host {
2+
display: block;
3+
}
4+
5+
.about__section {
6+
background: var(--c-bg-secondary);
7+
color: var(--c-text-primary);
8+
padding: var(--sp-8) 0;
9+
}
10+
11+
.about__title {
12+
color: var(--c-text-secondary);
13+
letter-spacing: var(--letter-spacing);
14+
}
15+
16+
.about__text {
17+
color: var(--c-text-primary);
18+
}
19+
20+
.about__muted {
21+
color: var(--c-text-muted);
22+
}
23+
24+
.about__strong {
25+
color: var(--c-text-secondary);
26+
}
27+
28+
.about__card {
29+
border: 1px solid var(--c-border);
30+
border-radius: var(--radius-card);
31+
box-shadow: var(--shadow-sm);
32+
background: var(--c-bg-secondary);
33+
}
34+
35+
.about__cardBody {
36+
padding: var(--sp-5);
37+
}
38+
39+
.about__box {
40+
border: 1px solid var(--c-border);
41+
border-radius: var(--radius-card);
42+
box-shadow: var(--shadow-sm);
43+
background: var(--c-bg-secondary);
44+
padding: var(--sp-6);
45+
}
46+
47+
.about__note {
48+
border-radius: var(--radius-card);
49+
border: 1px solid var(--c-border);
50+
background: var(--c-bg-tertiary);
51+
color: var(--c-text-primary);
52+
padding: var(--sp-4);
53+
}
54+
55+
.about__noteText {
56+
margin: 0;
57+
color: var(--c-text-primary);
58+
}

‎components/about/about.html‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<section class="section about__section">
2+
<div class="container">
3+
<div class="columns is-variable is-6">
4+
<div class="column is-6-desktop">
5+
<h2 class="title is-3 about__title">about</h2>
6+
<p class="content about__text">
7+
This page is a static starter that demonstrates a full landing layout with
8+
consistent spacing, typography, and reusable section patterns.
9+
</p>
10+
11+
<div class="columns is-multiline is-variable is-3 mt-4">
12+
<div class="column is-6-tablet">
13+
<div class="card about__card">
14+
<div class="card-content about__cardBody">
15+
<p class="has-text-weight-semibold">modern structure</p>
16+
<p class="about__muted mt-2">
17+
Sections are easy to reorder and extend.
18+
</p>
19+
</div>
20+
</div>
21+
</div>
22+
23+
<div class="column is-6-tablet">
24+
<div class="card about__card">
25+
<div class="card-content about__cardBody">
26+
<p class="has-text-weight-semibold">bulma-first</p>
27+
<p class="about__muted mt-2">
28+
Minimal custom CSS, maximum utility.
29+
</p>
30+
</div>
31+
</div>
32+
</div>
33+
</div>
34+
</div>
35+
36+
<div class="column is-6-desktop">
37+
<div class="box about__box">
38+
<p class="is-size-7 has-text-weight-semibold is-uppercase about__muted">
39+
quick facts
40+
</p>
41+
42+
<div class="columns is-multiline is-variable is-4 mt-3">
43+
<div class="column is-6">
44+
<p class="is-size-7 has-text-weight-semibold about__muted">stack</p>
45+
<p class="has-text-weight-semibold mt-1 about__strong">
46+
Angular · SSR · Bulma
47+
</p>
48+
</div>
49+
50+
<div class="column is-6">
51+
<p class="is-size-7 has-text-weight-semibold about__muted">setup</p>
52+
<p class="has-text-weight-semibold mt-1 about__strong">
53+
static content
54+
</p>
55+
</div>
56+
57+
<div class="column is-6">
58+
<p class="is-size-7 has-text-weight-semibold about__muted">goal</p>
59+
<p class="has-text-weight-semibold mt-1 about__strong">
60+
fast iteration
61+
</p>
62+
</div>
63+
64+
<div class="column is-6">
65+
<p class="is-size-7 has-text-weight-semibold about__muted">design</p>
66+
<p class="has-text-weight-semibold mt-1 about__strong">
67+
clean + minimal
68+
</p>
69+
</div>
70+
</div>
71+
72+
<div class="notification about__note mt-4">
73+
<p class="about__noteText">
74+
Next step: replace copy with your real brand story.
75+
</p>
76+
</div>
77+
</div>
78+
</div>
79+
</div>
80+
</div>
81+
</section>

0 commit comments

Comments
 (0)