sdarbinyan/marketplaces
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(content-management): expose SEO fields in Static Pages editor
Some checks failed
Architecture Governance / architecture (push) Has been cancelled
Details

Browse Source 
ContentPage.seo (title/description/keywords/canonical/ogTitle/ogDescription/
ogImage) was already modeled and serialized to bootstrap JSON but had no
editable UI. Added updateSeo() to the component and a translated SEO fieldset
using app-form-field/app-input. Added seoSection/seoTitle/seoDescription/
seoKeywords/seoCanonical/seoOgTitle/seoOgDescription/seoOgImage translation
keys to en/ru/hy and the Translations type.

Verified in browser at /edit/static-pages: SEO section renders with
translated labels for all three mock pages.
This commit is contained in:
sdarbinyan
2026-07-15 04:11:18 +04:00
parent f11b02134c
commit 97bd4b2b95
7 changed files with 77 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/app/features/content-management/components/static-pages-editor.component.html
View File

@@ -71,6 +71,31 @@
</label>
</div>
}
<h4 class="page-card__subheading">{{ 'builder.seoSection' | translate }}</h4>
<div class="editor-grid two">
<app-form-field [label]="'builder.seoTitle' | translate">
<app-input [ngModel]="page.seo?.title || ''" (ngModelChange)="updateSeo(page.id, { title: $event })" />
</app-form-field>
<app-form-field [label]="'builder.seoDescription' | translate">
<app-input [ngModel]="page.seo?.description || ''" (ngModelChange)="updateSeo(page.id, { description: $event })" />
</app-form-field>
<app-form-field [label]="'builder.seoKeywords' | translate">
<app-input [ngModel]="page.seo?.keywords || ''" (ngModelChange)="updateSeo(page.id, { keywords: $event })" />
</app-form-field>
<app-form-field [label]="'builder.seoCanonical' | translate">
<app-input [ngModel]="page.seo?.canonical || ''" (ngModelChange)="updateSeo(page.id, { canonical: $event })" />
</app-form-field>
<app-form-field [label]="'builder.seoOgTitle' | translate">
<app-input [ngModel]="page.seo?.ogTitle || ''" (ngModelChange)="updateSeo(page.id, { ogTitle: $event })" />
</app-form-field>
<app-form-field [label]="'builder.seoOgDescription' | translate">
<app-input [ngModel]="page.seo?.ogDescription || ''" (ngModelChange)="updateSeo(page.id, { ogDescription: $event })" />
</app-form-field>
<app-form-field [label]="'builder.seoOgImage' | translate">
<app-input [ngModel]="page.seo?.ogImage || ''" (ngModelChange)="updateSeo(page.id, { ogImage: $event })" />
</app-form-field>
</div>
</div>
</app-card>
}

9
src/app/features/content-management/components/static-pages-editor.component.scss
View File

@@ -18,6 +18,15 @@
color: var(--text-primary, #1e3c38);
}
.page-card__subheading {
margin: 4px 0 0;
font-size: 0.875rem;
font-weight: 700;
color: var(--text-secondary, #5f6e6a);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.toggle-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));

12
src/app/features/content-management/components/static-pages-editor.component.ts
View File

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/c
import { FormsModule } from '@angular/forms';
import { ProjectEditorFacade } from '../../project-editor/facade/project-editor.facade';
import { ContentManagementFacade } from '../facade/content-management.facade';
import { ContentPage } from '../models/content-page.model';
import { ContentPage, ContentPageSeoConfig } from '../models/content-page.model';
import { TranslatePipe } from '../../../i18n/translate.pipe';
import { MarketplaceHtmlEditorComponent } from '../../project-editor/components/html-editor/marketplace-html-editor.component';
import { ButtonComponent } from '../../../shared/ui/button/button.component';
@@ -81,6 +81,16 @@ export class StaticPagesEditorComponent {
})));
}
updateSeo(id: string, patch: Partial<ContentPageSeoConfig>): void {
this.persist(this.pages().map(page => page.id !== id ? page : ({
...page,
seo: {
...(page.seo ?? {}),
...patch,
}
})));
}
move(id: string, direction: -1 | 1): void {
const pages = [...this.pages()].sort((a, b) => a.order - b.order);
const index = pages.findIndex(page => page.id === id);