Skip to content

Commit

Permalink
Update Transloco configuration to include Romanian language
Browse files Browse the repository at this point in the history 
Update all translations
  • Loading branch information
@hidragos
hidragos committed Sep 23, 2024
1 parent d440b4e commit bbf855b
Show file tree
Hide file tree
Showing 13 changed files with 536 additions and 316 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
- **☁️ Supabase Integration**: Utilizes Supabase for backend functionality.
- **🔑 Login with Google**: Easy login functionality using Google accounts.
- **🚀 GitHub Actions for CI/CD**: Automated workflow for building and deploying the application.
- **🌍 i18n**: Available in English and Spanish. (Română în curând!)
- **🌍 i18n**: Available in English, Spanish and Romanian.
- **🌙 Dark Mode**: Toggle between light and dark mode.
- **📄 PDF Resume**: A single source of truth for my resume. Download a PDF version with just one click.
<br>
Expand Down
9 changes: 7 additions & 2 deletions src/app/app.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,17 @@ import { provideClientHydration } from '@angular/platform-browser';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { provideRouter } from '@angular/router';
import { provideTransloco, TranslocoService } from '@jsverse/transloco';
import { SupabaseService, ThemeService, TranslationService } from '@shared';
import {
LANGUAGES,
SupabaseService,
ThemeService,
TranslationService,
} from '@shared';

import { routes } from './app.routes';
import { TranslateHttpLoader } from './translate-loader';

const availableLanguages = ['en', 'es'];
const availableLanguages = LANGUAGES;

export const appConfig: ApplicationConfig = {
providers: [
Expand Down
234 changes: 119 additions & 115 deletions src/app/pages/blog/blog-article-edit/blog-article-edit.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import { MatMenuModule } from '@angular/material/menu';
import { MatSnackBar } from '@angular/material/snack-bar';
import { DomSanitizer } from '@angular/platform-browser';
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
import { TranslocoPipe } from '@jsverse/transloco';
import { TranslocoDirective } from '@jsverse/transloco';
import {
AreYouSureData,
AreYouSureDialogComponent,
Expand Down Expand Up @@ -59,134 +59,138 @@ import { ArticleService } from '../article.service';
TogglablePlaceholderDirective,
RouterModule,
MatRipple,
TranslocoPipe,
TranslocoDirective,
],
template: `
<mat-card [appearance]="'outlined'" class="h-full">
<mat-card-content>
<form
[formGroup]="articleForm"
*ngIf="articleForm && article"
(ngSubmit)="onSubmit()"
class="flex flex-col h-full"
>
<mat-card-header>
<mat-card-title>
<div
class="flex sm:flex-row items-start gap-1 flex-col justify-between flex-wrap"
>
<span
class="text-end w-full text-2xl"
[ngClass]="{ 'opacity-0': articleForm.pristine }"
<ng-container *transloco="let t">
<mat-card [appearance]="'outlined'" class="h-full">
<mat-card-content>
<form
[formGroup]="articleForm"
*ngIf="articleForm && article"
(ngSubmit)="onSubmit()"
class="flex flex-col h-full"
>
<mat-card-header>
<mat-card-title>
<div
class="flex sm:flex-row items-start gap-1 flex-col justify-between flex-wrap"
>
*
</span>
<mat-form-field appearance="outline" class="w-full">
<textarea
cdkTextareaAutosize
matInput
#input
[placeholder]="'Title'"
formControlName="title"
[maxLength]="100"
></textarea>
</mat-form-field>
</div>
</mat-card-title>
</mat-card-header>
<div class="grow">
<app-wysiwyg-editor
placeholder="Content"
formControlName="content"
></app-wysiwyg-editor>
<div class="mt-8 flex flex-col">
<div>
<mat-form-field appearance="outline">
<input
matInput
[appTogglablePlaceholder]="'New tag'"
[(ngModel)]="newTag"
[ngModelOptions]="{ standalone: true }"
(keydown)="onAddTag($event)"
(keydown.enter)="$event.preventDefault()"
/>
<button
matSuffix
mat-icon-button
class="mr-2"
(click)="onAddTag()"
type="button"
<span
class="text-end w-full text-2xl"
[ngClass]="{ 'opacity-0': articleForm.pristine }"
>
<mat-icon>add</mat-icon>
</button>
</mat-form-field>
</div>
<mat-chip-set class="pt-2">
<mat-chip
*ngFor="let tag of tags?.value"
(click)="onRemoveTag(tag)"
>
<div class="flex flex-row justify-start items-center">
<span class="text-xs">{{ tag }}</span>
*
</span>
<mat-form-field appearance="outline" class="w-full">
<textarea
cdkTextareaAutosize
matInput
#input
[placeholder]="t('blog.edit.titlePlaceholder')"
formControlName="title"
[maxLength]="100"
></textarea>
</mat-form-field>
</div>
</mat-card-title>
</mat-card-header>
<div class="grow">
<app-wysiwyg-editor
[placeholder]="t('blog.edit.contentPlaceholder')"
formControlName="content"
></app-wysiwyg-editor>
<div class="mt-8 flex flex-col">
<div>
<mat-form-field appearance="outline">
<input
matInput
[appTogglablePlaceholder]="t('blog.edit.tagsPlaceholder')"
[(ngModel)]="newTag"
[ngModelOptions]="{ standalone: true }"
(keydown)="onAddTag($event)"
(keydown.enter)="$event.preventDefault()"
/>
<button
matChipRemove
(click)="onRemoveTag(tag)"
matSuffix
mat-icon-button
class="mr-2"
(click)="onAddTag()"
type="button"
>
<mat-icon>cancel</mat-icon>
<mat-icon>add</mat-icon>
</button>
</div>
</mat-chip>
</mat-chip-set>
</div>
<div
class="flex sm:flex-row flex-col-reverse justify-between gap-4 pt-4"
>
</mat-form-field>
</div>
<mat-chip-set class="pt-2">
<mat-chip
*ngFor="let tag of tags?.value"
(click)="onRemoveTag(tag)"
>
<div class="flex flex-row justify-start items-center">
<span class="text-xs">{{ tag }}</span>
<button
matChipRemove
(click)="onRemoveTag(tag)"
type="button"
>
<mat-icon>cancel</mat-icon>
</button>
</div>
</mat-chip>
</mat-chip-set>
</div>
<div
class="flex sm:flex-row flex-col-reverse justify-start gap-4"
class="flex sm:flex-row flex-col-reverse justify-between gap-4 pt-4"
>
<button
(click)="onDelete()"
*ngIf="id"
color="warn"
mat-button
type="button"
<div
class="flex sm:flex-row flex-col-reverse justify-start gap-4"
>
Delete
</button>
<button
*ngIf="id"
mat-button
type="button"
(click)="onRestore()"
[disabled]="articleForm.pristine"
<button
(click)="onDelete()"
*ngIf="id"
color="warn"
mat-button
type="button"
>
{{ t('blog.edit.delete') }}
</button>
<button
*ngIf="id"
mat-button
type="button"
(click)="onRestore()"
[disabled]="articleForm.pristine"
>
{{ t('blog.edit.restore') }}
</button>
</div>
<div
class="flex sm:flex-row flex-col-reverse justify-end gap-4"
>
Restore
</button>
</div>
<div class="flex sm:flex-row flex-col-reverse justify-end gap-4">
<button mat-button type="button" (click)="toggleEdit()">
Preview
</button>
<button mat-flat-button [disabled]="articleForm.pristine">
Save
</button>
<button mat-button type="button" (click)="toggleEdit()">
{{ t('blog.edit.preview') }}
</button>
<button mat-flat-button [disabled]="articleForm.pristine">
{{ t('blog.edit.save') }}
</button>
</div>
</div>
</div>
</div>
<div
class="flex flex-col items-end justify-end pt-4"
*ngIf="articleForm.get('title')?.invalid"
>
<p class="color-error" *ngFor="let message of errorMessages">
* {{ message }}
</p>
</div>
</form>
</mat-card-content>
</mat-card>
<div
class="flex flex-col items-end justify-end pt-4"
*ngIf="articleForm.get('title')?.invalid"
>
<p class="color-error" *ngFor="let message of errorMessages">
* {{ message }}
</p>
</div>
</form>
</mat-card-content>
</mat-card>
</ng-container>
`,
styles: [
`
Expand Down
18 changes: 11 additions & 7 deletions src/app/pages/blog/blog-article-list/blog-article-list.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ import { ArticleService } from '../article.service';
<mat-card appearance="outlined">
<!-- Tags Section -->
<div class="pl">
<span class="text-xs pl-1">tags:</span>
<span class="text-xs pl-1 lowercase">{{ t('blog.list.tags') }}:</span>
<mat-card-content>
<mat-chip-set class="pt-2" aria-label="Tag selection">
<mat-chip *ngFor="let tag of tags">
Expand All @@ -48,7 +48,9 @@ import { ArticleService } from '../article.service';
<!-- Authors Section -->
<div class="mt-1">
<span class="text-xs pl-1">authors:</span>
<span class="text-xs pl-1 lowercase"
>{{ t('blog.list.authors') }}:</span
>
<mat-card-content>
<mat-chip-set class="pt-2" aria-label="Author selection">
<mat-chip *ngFor="let author of authors">
Expand All @@ -60,7 +62,9 @@ import { ArticleService } from '../article.service';
<!-- Articles Section with Infinite Scroll -->
<div class="mt-8">
<span class="text-xs pl-1">blog:</span>
<span class="text-xs pl-1 lowercase "
>{{ t('blog.list.articles') }}:</span
>
<ng-container *ngFor="let article of articles; let last = last">
<mat-card-content class="mb-4">
<mat-card-header>
Expand Down Expand Up @@ -91,7 +95,7 @@ import { ArticleService } from '../article.service';
class="hover:underline color-secondary pt-8"
[routerLink]="['/blog', article.id]"
>
Read more...
{{ t('blog.list.readMore') }}...
</a>
<div
class="flex justify-end"
Expand All @@ -106,7 +110,7 @@ import { ArticleService } from '../article.service';
[routerLink]="['/blog', article.id, 'edit']"
mat-button
>
Edit
{{ t('blog.list.edit') }}
</a>
</div>
</mat-card-content>
Expand All @@ -115,7 +119,7 @@ import { ArticleService } from '../article.service';
<!-- Loading Spinner -->
<div *ngIf="loading" class="loading-spinner">
{{ t('loading') }}...
{{ t('blog.list.loading') }}...
</div>
<!-- Error Message -->
Expand All @@ -125,7 +129,7 @@ import { ArticleService } from '../article.service';
<!-- End of Articles Message -->
<div *ngIf="allLoaded" class="end-message">
No more articles to load.
{{ t('blog.list.end') }}
</div>
</div>
</mat-card>
Expand Down
Loading

0 comments on commit bbf855b

Please sign in to comment.