Skip to content

Commit 7e45e10

Browse files
alexwpenginealexwpengine
committed
WIP - added more templates
1 parent 5fa6503 commit 7e45e10

29 files changed

+1381
-348
lines changed

‎examples/angular/template-hierarchy-data-fetching/example-app/src/app/app.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
11
import { Component, signal } from '@angular/core';
2-
import { RouterOutlet } from '@angular/router';
2+
33
import { HeaderComponent, FooterComponent } from './components';
44
import { DynamicContentComponent } from './components/dynamic-content/dynamic-content.component';
55

66
@Component({
77
selector: 'app-root',
88
imports: [
9-
//RouterOutlet,
109
HeaderComponent,
1110
DynamicContentComponent,
1211
FooterComponent,
1312
],
1413
templateUrl: './app.html'
1514
})
16-
export class App {
17-
protected title = signal('HeadlessWP Toolkit');
15+
export class App {
1816
}

‎examples/angular/template-hierarchy-data-fetching/example-app/src/app/assets/scss/components/post-card.scss‎

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

‎examples/angular/template-hierarchy-data-fetching/example-app/src/app/components/blog/blog.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Component, OnInit, signal } from '@angular/core';
22
import { CommonModule } from '@angular/common';
3-
import { GraphQLService, GraphQLStateService, gql } from '../../shared/utils/graphql.service';
3+
import { GraphQLService, GraphQLStateService, gql } from '../../utils/graphql.service';
44

55
interface Post {
66
id: string;

‎examples/angular/template-hierarchy-data-fetching/example-app/src/app/components/comments/comment-item/comment-item.component.scss‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
.comment-item {
2+
display: flex;
3+
flex-direction: column;
4+
padding: 10px;
5+
border: 1px solid #ccc;
6+
border-radius: 5px;
7+
margin-bottom: 10px;
8+
background: #f9fafb;
9+
border-radius: 0.5rem;
10+
padding: 1rem;
11+
margin-bottom: 1rem;
12+
.comment-header {
13+
display: flex;
14+
justify-content: space-between;
15+
align-items: center;
16+
margin-bottom: 5px;
17+
}
18+
.author-info {
19+
display: flex;
20+
align-items: center;
21+
margin-bottom: 5px;
22+
}
23+
.avatar img {
24+
width: 2rem;
25+
height: 2rem;
26+
border-radius: 50%;
27+
margin-right: 1rem;
28+
}
29+
.comment-date {
30+
font-size: 0.8rem;
31+
color: #666;
32+
}
33+
.comment-footer {
34+
display: flex;
35+
justify-content: flex-end;
36+
margin-top: 1rem;
37+
}
38+
&.is-reply {
39+
background-color: #f0f0f0;
40+
border-left: 3px solid #007bff;
41+
margin-left: 15px;
42+
}
43+
}
44+
.comment-meta {
45+
display: flex;
46+
align-items: flex-start;
47+
margin-bottom: 0.75rem;
48+
}
49+
50+
.comment-avatar {
51+
width: 40px;
52+
height: 40px;
53+
border-radius: 50%;
54+
margin-right: 0.75rem;
55+
flex-shrink: 0;
56+
}
57+
58+
.comment-info {
59+
flex: 1;
60+
}
61+
62+
.comment-author {
63+
font-weight: 600;
64+
margin-bottom: 0.25rem;
65+
}
66+
67+
.author-link {
68+
color: #3b82f6;
69+
text-decoration: none;
70+
}
71+
72+
.author-link:hover {
73+
text-decoration: underline;
74+
}
75+
76+
.author-name {
77+
color: #374151;
78+
}
79+
80+
.comment-date {
81+
color: #6b7280;
82+
font-size: 0.875rem;
83+
}
84+
85+
.comment-content {
86+
margin-bottom: 0.75rem;
87+
line-height: 1.6;
88+
}
89+
90+
.comment-content :deep(p) {
91+
margin-bottom: 0.5rem;
92+
}
93+
94+
.comment-content :deep(p:last-child) {
95+
margin-bottom: 0;
96+
}
97+
98+
.comment-actions {
99+
display: flex;
100+
justify-content: flex-end;
101+
gap: 1rem;
102+
}

‎examples/angular/template-hierarchy-data-fetching/example-app/src/app/components/comments/comments.component.scss‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
#comment-form {
2+
display: flex;
3+
flex-direction: column;
4+
gap: 1rem;
5+
background-color: #f9f9f9;
6+
padding: 1rem;
7+
margin-top: 1rem;
8+
}
9+
.message-container {
10+
margin-bottom: 1rem;
11+
}
12+
13+
.success-message,
14+
.error-message {
15+
display: flex;
16+
align-items: center;
17+
justify-content: space-between;
18+
padding: 12px 16px;
19+
border-radius: 4px;
20+
margin-bottom: 1rem;
21+
}
22+
23+
.success-message {
24+
background-color: #d4edda;
25+
border: 1px solid #c3e6cb;
26+
color: #155724;
27+
}
28+
29+
.error-message {
30+
background-color: #f8d7da;
31+
border: 1px solid #f5c6cb;
32+
color: #721c24;
33+
}
34+
35+
.message-content {
36+
display: flex;
37+
align-items: center;
38+
gap: 8px;
39+
}
40+
41+
.message-icon {
42+
font-weight: bold;
43+
font-size: 1.1em;
44+
}
45+
46+
.message-text {
47+
flex: 1;
48+
}
49+
50+
.dismiss-button {
51+
background: none;
52+
border: none;
53+
font-size: 1.2em;
54+
cursor: pointer;
55+
padding: 0;
56+
width: 20px;
57+
height: 20px;
58+
display: flex;
59+
align-items: center;
60+
justify-content: center;
61+
opacity: 0.7;
62+
}
63+
64+
.dismiss-button:hover {
65+
opacity: 1;
66+
}
67+
68+
.success-message .dismiss-button {
69+
color: #155724;
70+
}
71+
72+
.error-message .dismiss-button {
73+
color: #721c24;
74+
}
75+
input, textarea {
76+
width: 100%;
77+
padding: 0.5rem;
78+
border: 1px solid #ccc;
79+
border-radius: 4px;
80+
box-sizing: border-box;
81+
}

‎examples/angular/template-hierarchy-data-fetching/example-app/src/app/components/dynamic-content/dynamic-content.component.html‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,9 @@
44
</div>
55

66
<!-- Loading state -->
7-
<div *ngIf="isLoading()" class="loading-container">
8-
<div class="spinner"></div>
9-
<p>Loading content...</p>
10-
</div>
7+
<ng-container *ngIf="isLoading()">
8+
<app-loading></app-loading>
9+
</ng-container>
1110

1211
<!-- Error state -->
1312
<div *ngIf="hasError() && !isLoading()" class="error-container">
@@ -16,10 +15,5 @@
1615

1716
<!-- Dynamic content -->
1817
<ng-container *ngIf="componentToRender() && !isLoading() && !hasError()">
19-
<ng-container
20-
*ngComponentOutlet="
21-
componentToRender();
22-
inputs: { seedQuery: templateData()?.seedQuery, templateData: templateData() }
23-
">
24-
</ng-container>
25-
</ng-container>
18+
<ng-container *ngComponentOutlet="componentToRender()"> </ng-container>
19+
</ng-container>

0 commit comments

Comments
 (0)