Merge pull request #256 from valerymelou/develop

Release V3.0.0

libs/blog/data-access/src/lib/article.ts

@@ -4,6 +4,7 @@ import {
   EntrySkeletonType,
   TagLink,
 } from 'contentful';
+import { Document } from '@contentful/rich-text-types';
 import { Asset } from './asset';
 import { Tag } from './tag';
 
@@ -14,8 +15,9 @@ export class Article {
   cover?: Asset;
   createdAt = '';
   updatedAt = '';
+  publishedAt = '';
   tags: Tag[] = [];
-  content: any;
+  content!: Document;
 
   static fromEntry(
     entry: Entry<EntrySkeletonType, undefined, string>,
@@ -25,6 +27,7 @@ export class Article {
     article.title = entry.fields['title'] as string;
     article.slug = entry.fields['slug'] as string;
     article.abstract = entry.fields['abstract'] as string;
+    article.publishedAt = entry.fields['publishedAt'] as string;
     article.createdAt = entry.sys.createdAt;
     article.updatedAt = entry.sys.updatedAt;
     if (entry.fields['cover'] && assets) {
@@ -46,7 +49,7 @@ export class Article {
           .join(),
       });
     });
-    article.content = entry.fields['content'];
+    article.content = entry.fields['content'] as Document;
     return article;
   }
 }

libs/blog/data-access/src/lib/articles.resolver.ts

@@ -8,5 +8,7 @@ import { ArticleService } from './article.service';
 export const articlesResolver: ResolveFn<Results<Article>> = () => {
   const articleService = inject(ArticleService);
 
-  return articleService.get({});
+  return articleService.get({
+    order: '-fields.publishedAt',
+  });
 };

libs/blog/feature-article/src/lib/blog-article.component.html

@@ -1,13 +1,13 @@
-<article class="relative mx-auto max-w-3xl pt-10">
+<article class="relative max-w-3xl pt-10">
   <a routerLink="/blog" ui-flat-button color="accent" class="mb-4">
     <ng-icon name="bootstrapArrowLeft" strokeWidth="5" size="20"></ng-icon>
     <span class="ml-3">Articles</span>
   </a>
   <dl>
     <dt class="sr-only">Date</dt>
     <dd class="top-0 whitespace-nowrap text-sm leading-6">
-      <time [attr.datetime]="article.createdAt">{{
-        article.createdAt | date: 'mediumDate'
+      <time [attr.datetime]="article.publishedAt">{{
+        article.publishedAt | date: 'mediumDate'
       }}</time>
     </dd>
   </dl>
@@ -145,17 +145,7 @@
       >
 
       <ng-container *cfRichTextMark="MARKS.CODE; let node = node">
-        @if (node.value.split('\n').length > 1) {
-          <pre
-            class="bg-dark dark:bg-secondary-dark overflow-auto rounded-md p-4 text-white"
-          ><code [innerHTML]="highlightCode(node.value)"></code></pre>
-        } @else {
-          <div
-            class="bg-dark dark:bg-secondary-dark inline-block rounded-md px-2 leading-5 text-white"
-          >
-            <code [innerHTML]="highlightCode(node.value)"></code>
-          </div>
-        }
+        <ui-code [code]="node.value"></ui-code>
       </ng-container>
     </div>
   </div>

libs/blog/feature-article/src/lib/blog-article.component.ts

@@ -1,13 +1,9 @@
-import { Component, Inject, OnDestroy, OnInit, Renderer2 } from '@angular/core';
-import { CommonModule, DOCUMENT } from '@angular/common';
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { ActivatedRoute, RouterModule } from '@angular/router';
 
 import { BLOCKS, INLINES, MARKS } from '@contentful/rich-text-types';
 
-import { highlight, languages } from 'prismjs';
-import 'prismjs/components/prism-python';
-import 'prismjs/components/prism-rust';
-
 import {
   CfRichTextChildrenDirective,
   CfRichTextMarkDirective,
@@ -19,7 +15,11 @@ import { bootstrapArrowLeft } from '@ng-icons/bootstrap-icons';
 
 import { Article } from '@valerymelou/blog/data-access';
 import { MetadataService } from '@valerymelou/shared/seo';
-import { ButtonComponent, LinkComponent } from '@valerymelou/shared/ui';
+import {
+  ButtonComponent,
+  CodeComponent,
+  LinkComponent,
+} from '@valerymelou/shared/ui';
 
 @Component({
   selector: 'blog-article',
@@ -34,11 +34,12 @@ import { ButtonComponent, LinkComponent } from '@valerymelou/shared/ui';
     NgIconComponent,
     ButtonComponent,
     LinkComponent,
+    CodeComponent,
   ],
   templateUrl: './blog-article.component.html',
   viewProviders: [provideIcons({ bootstrapArrowLeft })],
 })
-export class BlogArticleComponent implements OnInit, OnDestroy {
+export class BlogArticleComponent {
   article!: Article;
   loaded = false;
   ready = false;
@@ -47,13 +48,9 @@ export class BlogArticleComponent implements OnInit, OnDestroy {
   readonly MARKS = MARKS;
   readonly INLINES = INLINES;
 
-  private codeHighlightCssLink!: HTMLLinkElement;
-
   constructor(
-    private renderer: Renderer2,
     private route: ActivatedRoute,
     private metadataService: MetadataService,
-    @Inject(DOCUMENT) private document: Document,
   ) {
     this.route.data.subscribe({
       next: (data) => {
@@ -67,38 +64,4 @@ export class BlogArticleComponent implements OnInit, OnDestroy {
       },
     });
   }
-
-  ngOnInit(): void {
-    this.loadCodeHighlightLib();
-  }
-
-  highlightCode(code: string): string {
-    let language = code.split('\n')[0].replace('```', '');
-
-    if (languages[language]) {
-      code = code.replace('```' + language + '\n', '');
-    } else {
-      language = 'javascript';
-    }
-
-    return highlight(code, languages[language], language);
-  }
-
-  private loadCodeHighlightLib(): void {
-    this.codeHighlightCssLink = this.renderer.createElement('link');
-    this.codeHighlightCssLink.rel = 'stylesheet';
-    this.codeHighlightCssLink.href =
-      'https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/themes/prism-okaidia.min.css';
-    this.codeHighlightCssLink.integrity =
-      'sha512-5HvW0a7ihK3ro2KhwEksDHXgIezsTeZybZDIn8d8Y015Ny+t7QWSIjnlCTjFzlK7Klb604HLGjsNqU/i5mJLjQ==';
-    this.codeHighlightCssLink.crossOrigin = 'anonymous';
-    this.codeHighlightCssLink.referrerPolicy = 'no-referrer';
-    this.renderer.appendChild(this.document.head, this.codeHighlightCssLink);
-  }
-
-  ngOnDestroy(): void {
-    if (this.codeHighlightCssLink) {
-      this.renderer.removeChild(this.document.head, this.codeHighlightCssLink);
-    }
-  }
 }

libs/blog/feature-home/src/lib/blog-home.component.html

@@ -2,11 +2,11 @@
   <h1
     class="mb-5 text-2xl font-bold leading-[3rem] tracking-tight text-black lg:text-4xl dark:text-white"
   >
-    Inside my head
+    Tech thoughts
   </h1>
   <h2 class="text-xl lg:max-w-2xl">
-    I talk about Django, Angular... Web Development in general and many other
-    topics. These are just a few of the things in my head.
+    Diving into the world of Django, Angular, and programming in general. Expect
+    a mix of technical deep dives, project showcases, and industry insights.
   </h2>
 
   <div
@@ -50,8 +50,8 @@ <h2 class="text-xl lg:max-w-2xl">
             >
               <dt class="sr-only">Date</dt>
               <dd class="whitespace-nowrap text-sm leading-6">
-                <time [attr.datetime]="article.createdAt">{{
-                  article.createdAt | date: 'mediumDate'
+                <time [attr.datetime]="article.publishedAt">{{
+                  article.publishedAt | date: 'mediumDate'
                 }}</time>
               </dd>
             </dl>
@@ -60,14 +60,14 @@ <h2 class="text-xl lg:max-w-2xl">
             ui-link
             [routerLink]="[
               '/blog',
-              (article.createdAt | date: 'YYYY-MM-dd') + '-' + article.slug,
+              (article.publishedAt | date: 'YYYY-MM-dd') + '-' + article.slug,
             ]"
           >
             <span
               class="absolute -inset-x-4 -inset-y-2.5 sm:rounded-2xl md:-inset-x-6 md:-inset-y-4"
             >
             </span>
-            <span class="relative">Read the article</span>
+            <span class="relative text-sm">Read the article</span>
           </a>
         </article>
       }

libs/blog/feature-home/src/lib/blog-home.component.ts

@@ -22,9 +22,9 @@ export class BlogHomeComponent {
       },
     });
     metadataService.updateMetadata({
-      title: 'Inside my head | Valery Melou',
+      title: 'Tech thoughts | Valery Melou',
       description:
-        'I talk about Django, Angular... Web Development in general and many other topics. These are just a few of the things in my head.',
+        'Diving into the world of Django, Angular, and programming in general. Expect a mix of technical deep dives, project showcases, and industry insights.',
     });
   }
 }

libs/shared/layout/src/lib/footer/footer.component.html

@@ -1,5 +1,24 @@
 <footer class="mx-5 flex items-center py-8 text-sm font-light lg:mx-[272px]">
   <div class="grid grid-cols-2 gap-8">
+    <div class="col-span-2 flex flex-col sm:col-span-1">
+      <p class="mt-auto">
+        The code of this website is available on
+        <a
+          href="https://github.com/valerymelou/valerymelou.com"
+          ui-link
+          target="_blank"
+          rel="noopener"
+          >GitHub</a
+        >.
+      </p>
+      <p>
+        All the content is from me and edited in
+        <a href="https://contentful.com" ui-link target="_blank" rel="noopener"
+          >Contentful</a
+        >.
+      </p>
+      <p class="text-sm">&copy; {{ date | date: 'yyyy' }} Valery Melou.</p>
+    </div>
     <div class="col-span-2 sm:col-span-1">
       <p>
         Coded in
@@ -35,23 +54,5 @@
         >.
       </p>
     </div>
-    <div class="col-span-2 flex flex-col sm:col-span-1">
-      <p class="mt-auto lg:text-right">
-        The code of this website is available on
-        <a
-          href="https://github.com/valerymelou/valerymelou.com"
-          ui-link
-          target="_blank"
-          rel="noopener"
-          >GitHub</a
-        >.
-      </p>
-      <p class="lg:text-right">
-        All the content is from me and saved on
-        <a href="https://contentful.com" ui-link target="_blank" rel="noopener"
-          >Contentful</a
-        >.
-      </p>
-    </div>
   </div>
 </footer>

libs/shared/layout/src/lib/footer/footer.component.ts

@@ -8,4 +8,6 @@ import { LinkComponent } from '@valerymelou/shared/ui';
   imports: [CommonModule, LinkComponent],
   templateUrl: './footer.component.html',
 })
-export class FooterComponent {}
+export class FooterComponent {
+  date = new Date();
+}

libs/shared/layout/src/lib/logo/logo.component.html

@@ -4,7 +4,7 @@
   }
 
   <img
-    src="/assets/images/valerymelou.jpg"
+    src="/assets/images/logo.svg"
     class="border-dark rounded-full border-2 dark:border-white"
     alt="Valery Melou"
     width="40"

libs/shared/ui/src/index.ts

@@ -5,3 +5,5 @@ export * from './lib/menu/menu.component';
 export * from './lib/menu/menu-trigger-for.directive';
 
 export * from './lib/link/link.component';
+
+export * from './lib/code/code.component';

libs/shared/ui/src/lib/code/code.component.html

@@ -0,0 +1,29 @@
+@if (code) {
+  @if (code.split(' ').length === 1) {
+    <div [innerHTML]="highlightedCode" class="code inline-flex"></div>
+  } @else {
+    <div class="group relative">
+      <span
+        class="absolute right-2 top-2 text-xs text-slate-400 opacity-100 transition-all duration-300 ease-in-out group-hover:opacity-0"
+        >{{ language }}</span
+      >
+      <button
+        class="absolute right-2 top-2 flex h-10 min-w-10 items-center justify-center rounded-lg border border-slate-400 bg-slate-100 text-slate-400 opacity-0 transition-all duration-300 ease-in-out group-hover:opacity-100 dark:border-slate-400 dark:bg-slate-900"
+        aria-label="Copy"
+        [ngClass]="{ 'px-4': copied }"
+        (click)="copy()"
+      >
+        @if (copied) {
+          <span class="text-sm">Copied</span>
+          <ng-icon name="bootstrapCheck" size="20"></ng-icon>
+        } @else {
+          <ng-icon name="bootstrapCopy"></ng-icon>
+        }
+      </button>
+      <div
+        [innerHTML]="highlightedCode"
+        class="code dark:border-secondary-dark overflow-x-auto rounded-md border border-slate-100"
+      ></div>
+    </div>
+  }
+}

libs/shared/ui/src/lib/code/code.component.scss

@@ -0,0 +1,25 @@
+:host {
+  display: inline-block;
+  width: 100%;
+}
+
+pre {
+  padding: 24px;
+  border-radius: 4px;
+}
+
+.inline-flex {
+  pre {
+    padding: 0 6px;
+  }
+}
+
+html.dark .shiki,
+html.dark .shiki span {
+  color: var(--shiki-dark) !important;
+  background-color: var(--shiki-dark-bg) !important;
+  /* Optional, if you also want font styles */
+  font-style: var(--shiki-dark-font-style) !important;
+  font-weight: var(--shiki-dark-font-weight) !important;
+  text-decoration: var(--shiki-dark-text-decoration) !important;
+}