Skip to content

Commit fb38c96

Browse files
mckenzieartsmckenziearts
committed
✨ add meta service
1 parent cf6f5c0 commit fb38c96

File tree

9 files changed

+175
-108
lines changed

9 files changed

+175
-108
lines changed

‎src/app/shared/components/buttons/default.component.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@ import { Observable } from 'rxjs';
88
[type]="type"
99
[disabled]="loading$ | async"
1010
[ngClass]="class"
11-
class="inline-flex items-center px-4 py-2 text-sm font-medium bg-white border rounded-md shadow-sm border-slate-300 text-slate-600 hover:bg-slate-50 hover:text-slate-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2">
11+
class="inline-flex items-center px-4 py-2 text-sm font-medium bg-white border rounded-md shadow-sm border-slate-300 text-slate-600 hover:bg-slate-50 hover:text-slate-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:bg-gray-700 dark:hover:bg-gray-800 dark:text-slate-300 dark:hover:text-white dark:focus:ring-offset-gray-800">
1212
<span *ngIf="loading$ | async">
1313
<svg
14-
class="w-5 h-5 mr-3 -ml-1 text-slate-500 animate-spin"
14+
class="w-5 h-5 mr-3 -ml-1 text-slate-500 dark:text-slate-400 animate-spin"
1515
fill="none"
1616
viewBox="0 0 24 24">
1717
<circle

‎src/app/shared/components/buttons/link.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { Component, Input } from '@angular/core';
66
<a
77
[routerLink]="link"
88
[ngClass]="class"
9-
class="inline-flex items-center rounded-md border border-transparent bg-primary-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2">
9+
class="inline-flex items-center rounded-md border border-transparent bg-primary-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:bg-gray-700 dark:hover:bg-gray-800 dark:text-slate-300 dark:hover:text-white dark:focus:ring-offset-gray-800">
1010
<ng-content></ng-content>
1111
</a>
1212
`,

‎src/app/shared/components/buttons/primary.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { Observable } from 'rxjs';
77
<button
88
[type]="type"
99
[disabled]="loading$ | async"
10-
class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:ring-primary-500 border border-transparent rounded-md shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition ease-in-out duration-150"
10+
class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:ring-primary-500 border border-transparent rounded-md shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition ease-in-out duration-150 dark:focus:ring-offset-gray-800"
1111
[ngClass]="class"
1212
matRipple
1313
matRippleColor="primary">

‎src/app/shared/components/simple-drawer/button.component.ts

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

‎src/app/shared/components/simple-drawer/simple-drawer.component.html

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

‎src/app/shared/components/simple-drawer/simple-drawer.component.ts

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

‎src/app/shared/helpers/meta-data.ts

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { environment } from 'environments/environment';
2+
3+
export const siteTitle = environment.appName;
4+
5+
export interface SeoInterface {
6+
[key: string]: {
7+
title: string;
8+
description?: string;
9+
keywords?: string;
10+
metaTags?: {
11+
[key: string]: string;
12+
};
13+
};
14+
}
15+
16+
export const meta: SeoInterface = {
17+
'/auth/login': {
18+
title: $localize`Connexion | ${siteTitle}`,
19+
description: $localize`Connexion à votre compte`,
20+
keywords: $localize`connexion, compte, admin, cpanel`,
21+
metaTags: {
22+
'og:url': `${environment.baseUrl}/auth/login`,
23+
},
24+
},
25+
'/auth/forgot-password': {
26+
title: $localize`Mot de passe oublié | ${siteTitle}`,
27+
description: $localize`Réinitialisez votre mot de passe`,
28+
keywords: $localize`mot de passe, oublié, admin, cpanel`,
29+
metaTags: {
30+
'og:url': `${environment.baseUrl}/auth/forgot-password`,
31+
},
32+
},
33+
'/dashboard': {
34+
title: $localize`Tableau de bord | ${siteTitle}`,
35+
description: $localize`Tableau de bord`,
36+
keywords: $localize`tableau de bord, admin, cpanel`,
37+
metaTags: {
38+
'og:url': `${environment.baseUrl}/dashboard`,
39+
},
40+
},
41+
};

‎src/app/shared/services/seo.service.ts

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
import { Injectable, OnDestroy } from '@angular/core';
2+
import { Router, NavigationEnd } from '@angular/router';
3+
import { Subscription } from 'rxjs';
4+
import { Meta, MetaDefinition, Title } from '@angular/platform-browser';
5+
6+
import { meta } from '../helpers/meta-data';
7+
8+
@Injectable({
9+
providedIn: 'root',
10+
})
11+
export class SeoService implements OnDestroy {
12+
private subscription = new Subscription();
13+
14+
constructor(
15+
private router: Router,
16+
private meta: Meta,
17+
private title: Title
18+
) {
19+
this.subscription.add(
20+
this.router.events.subscribe(event => {
21+
if (event instanceof NavigationEnd) {
22+
const url = event.url;
23+
this.updateTitle(url);
24+
this.updateMeta(url);
25+
}
26+
})
27+
);
28+
}
29+
30+
private updateTitle(url: string): void {
31+
this.title.setTitle(meta[url].title);
32+
}
33+
34+
private updateMeta(url: string): void {
35+
const oldTagOgTitle = this.meta.getTag('property="og:title"');
36+
const newTagOgTitle = {
37+
property: 'og:title',
38+
content: meta[url].title,
39+
};
40+
const oldTagTwitterTitle = this.meta.getTag('name="twitter:title"');
41+
const newTagTwitterTitle = {
42+
name: 'twitter:title',
43+
content: meta[url].title,
44+
};
45+
const oldTagDescription = this.meta.getTag('name="description"');
46+
const newTagDescription = {
47+
name: 'description',
48+
content: meta[url].description,
49+
};
50+
const oldTagOgDescription = this.meta.getTag('property="og:description"');
51+
const newTagOgDescription = {
52+
property: 'og:description',
53+
content: meta[url].description,
54+
};
55+
const oldTagTwitterDescription = this.meta.getTag(
56+
'property="og:description"'
57+
);
58+
const newTagTwitterDescription = {
59+
property: 'og:description',
60+
content: meta[url].description,
61+
};
62+
const oldTagOgImage = this.meta.getTag('property="og:image"');
63+
const imageTag =
64+
meta[url].metaTags?.['image'] ??
65+
this.meta.getTag('property="og:image"')!.content;
66+
const newTagOgImage = {
67+
property: 'og:image',
68+
content: imageTag,
69+
};
70+
const oldTagTwitterImage = this.meta.getTag('name="twitter:image"');
71+
const newTagTwitterImage = {
72+
name: 'twitter:image',
73+
content: imageTag,
74+
};
75+
const oldTagOgUrl = this.meta.getTag('property="og:url"');
76+
const newTagOgUrl = {
77+
property: 'og:url',
78+
content: meta[url].metaTags?.['og:url'],
79+
};
80+
const oldTagKeywords = this.meta.getTag('name="keywords"');
81+
const newTagKeywords = {
82+
name: 'keywords',
83+
content: meta[url].keywords,
84+
};
85+
86+
// Update description
87+
oldTagDescription
88+
? this.meta.updateTag(newTagDescription as MetaDefinition)
89+
: this.meta.addTag(newTagDescription as MetaDefinition);
90+
// Update og:description
91+
oldTagOgDescription
92+
? this.meta.updateTag(newTagOgDescription as MetaDefinition)
93+
: this.meta.addTag(newTagOgDescription as MetaDefinition);
94+
// Update twitter:description
95+
oldTagTwitterDescription
96+
? this.meta.updateTag(newTagTwitterDescription as MetaDefinition)
97+
: this.meta.addTag(newTagTwitterDescription as MetaDefinition);
98+
// Update og:title
99+
oldTagOgTitle
100+
? this.meta.updateTag(newTagOgTitle as MetaDefinition)
101+
: this.meta.addTag(newTagOgTitle as MetaDefinition);
102+
// Update twitter:title
103+
oldTagTwitterTitle
104+
? this.meta.updateTag(newTagTwitterTitle as MetaDefinition)
105+
: this.meta.addTag(newTagTwitterTitle as MetaDefinition);
106+
// Update og:image
107+
oldTagOgImage
108+
? this.meta.updateTag(newTagOgImage as MetaDefinition)
109+
: this.meta.addTag(newTagOgImage as MetaDefinition);
110+
// Update twitter:image
111+
oldTagTwitterImage
112+
? this.meta.updateTag(newTagTwitterImage as MetaDefinition)
113+
: this.meta.addTag(newTagTwitterImage as MetaDefinition);
114+
// Update og:url
115+
oldTagOgUrl
116+
? this.meta.updateTag(newTagOgUrl as MetaDefinition)
117+
: this.meta.addTag(newTagOgUrl as MetaDefinition);
118+
// Update keywords
119+
oldTagKeywords
120+
? this.meta.updateTag(newTagKeywords as MetaDefinition)
121+
: this.meta.addTag(newTagKeywords as MetaDefinition);
122+
}
123+
124+
ngOnDestroy() {
125+
this.subscription.unsubscribe();
126+
}
127+
}

‎src/app/shared/shared.module.ts

Lines changed: 3 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,6 @@ import { NgModule } from '@angular/core';
22
import { CommonModule } from '@angular/common';
33
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
44
import { NgxPermissionsModule } from 'ngx-permissions';
5-
import { MatSidenavModule } from '@angular/material/sidenav';
6-
import { MatFormFieldModule } from '@angular/material/form-field';
7-
import { MatDatepickerModule } from '@angular/material/datepicker';
8-
import { MatNativeDateModule } from '@angular/material/core';
95

106
import { ThemeModule } from './themes/theme.module';
117

@@ -62,25 +58,12 @@ const DECLARATIONS = [
6258
StatusValuePipe,
6359
];
6460

65-
const MODULES = [
66-
CommonModule,
67-
ThemeModule,
68-
MatFormFieldModule,
69-
MatDatepickerModule,
70-
];
61+
const MODULES = [CommonModule, ThemeModule];
7162

7263
@NgModule({
7364
declarations: DECLARATIONS,
74-
imports: [
75-
FormsModule,
76-
ReactiveFormsModule,
77-
MatSidenavModule,
78-
MatFormFieldModule,
79-
MatDatepickerModule,
80-
MatNativeDateModule,
81-
...MODULES,
82-
],
83-
providers: [MatDatepickerModule, MatNativeDateModule],
65+
imports: [FormsModule, ReactiveFormsModule, ...MODULES],
66+
providers: [],
8467
exports: [...DECLARATIONS, ...MODULES, NgxPermissionsModule],
8568
})
8669
export class SharedModule {}

0 commit comments

Comments
 (0)