Merge pull request #21 from code-dimension/facade-pattern-post

Facade pattern post

src/components/Footer.astro

@@ -13,7 +13,7 @@
 
 				<a
 					class='flex mt-6 text-light hover:decoration-light hover:decoration-solid hover:underline hover:underline-offset-2'
-					href='https://codedimension.substack.com'
+					href='https://www.codedimension.com.br/se-inscreva/'
 				>
 					Assine nossa Newsletter
 				</a>

src/components/ListPosts.astro

@@ -5,16 +5,16 @@ import { cn } from '@/utils'
 
 type Props = {
 	posts: CollectionEntry<'blog'>[]
-	FirstBig?: boolean
+	lastestPostBig?: boolean
 }
 
-const { posts, FirstBig = false } = Astro.props
+const { posts, lastestPostBig = false } = Astro.props
 ---
 
 <section
 	class={cn(
 		`grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3  gap-8 mt-3`,
-		FirstBig && `md:[&>*:first-child]:col-span-2`
+		lastestPostBig && `md:[&>*:first-child]:col-span-2`
 	)}
 >
 	{

src/content/blog/conheca-control-flow-syntax.mdx

@@ -4,7 +4,7 @@ category: Angular
 description: >-
   Angular 17  está trazendo a nova Control Flow Syntax que promete revolucionar
   a forma como você pode escrever aplicações Front-End!
-pubDate: 2023-11-13T03:00:00.000Z
+pubDate: '2023-11-13'
 draft: false
 tags:
   - angular

src/content/blog/implementando-facade-patten-com-angular.mdx

@@ -0,0 +1,141 @@
+---
+title: 'Implementando o padrão Facade em Aplicações Angular'
+description: Simplifique sua codificação e eleve a qualidade das suas aplicações em apenas alguns passos!
+pubDate: '2024-01-28'
+heroImage: '/images/posts/facade-pattern-in-angular.png'
+category: 'Angular'
+tags:
+  - angular
+draft: false
+---
+
+O Angular é um poderoso framework para o desenvolvimento de aplicações web e oferece uma estrutura robusta para organizar e estruturar o código.
+
+À medida que as aplicações crescem em complexidade, é comum lidar com vários serviços, módulos e componentes, tornando a manutenção e a compreensão do código mais desafiadoras.
+
+O padrão Facade surge como uma solução elegante para simplificar a interação do cliente com subsistemas complexos, proporcionando uma interface unificada.
+
+Neste artigo, exploraremos como implementar o padrão Facade em uma aplicação Angular.
+
+## O que é o padrão Facade?
+
+O padrão Facade é um padrão de projeto estrutural que fornece uma interface simplificada para um conjunto de interfaces mais complexo em um subsistema.
+
+Ele visa reduzir a complexidade, oferecendo um ponto de entrada único para os clientes interagirem com o sistema, ocultando a complexidade dos detalhes internos.
+
+## Por que usar o padrão Facade em Angular?
+
+Angular promove a modularidade e a reutilização de código, dividindo a aplicação em componentes, serviços e módulos.
+
+À medida que a aplicação cresce, o número de serviços e interações entre componentes pode aumentar, resultando em uma complexidade que pode se tornar difícil de gerenciar.
+
+A implementação do padrão Facade em Angular pode proporcionar benefícios significativos:
+
+1. **Simplicidade para o Cliente:** Facilita para o desenvolvedor cliente interagir com subsistemas complexos sem a necessidade de compreender todos os detalhes internos.
+
+2. **Encapsulamento:** Oculta a complexidade do código, fornecendo uma interface clara e bem definida para o cliente. Isso reduz a dependência direta entre o cliente e os detalhes internos do sistema.
+
+3. **Desacoplamento:** Minimiza a dependência entre os diversos componentes do sistema, facilitando alterações futuras sem impactar diretamente os clientes.
+
+## Implementação do padrão Facade em Angular
+
+Vamos considerar um cenário em que temos um subsistema complexo composto por vários serviços em um aplicativo Angular.
+
+Vamos implementar um Facade para simplificar a interação com esses serviços.
+
+### 1. Definindo Subsistemas
+
+Primeiro, criamos os serviços que compõem o subsistema. Vamos assumir três serviços simples como exemplo:
+
+```typescript
+// Subsistema A
+@Injectable({
+	providedIn: 'root'
+})
+export class SubsistemaAService {
+	operacaoA(): string {
+		return 'Operação A'
+	}
+}
+
+// Subsistema B
+@Injectable({
+	providedIn: 'root'
+})
+export class SubsistemaBService {
+	operacaoB(): string {
+		return 'Operação B'
+	}
+}
+
+// Subsistema C
+@Injectable({
+	providedIn: 'root'
+})
+export class SubsistemaCService {
+	operacaoC(): string {
+		return 'Operação C'
+	}
+}
+```
+
+### 2. Criando a Fachada (Facade)
+
+Agora, vamos criar a fachada que fornecerá uma interface simplificada para o cliente interagir com os subsistemas:
+
+```typescript
+@Injectable({
+	providedIn: 'root'
+})
+export class FacadeService {
+	constructor(
+		private subsistemaA: SubsistemaAService,
+		private subsistemaB: SubsistemaBService,
+		private subsistemaC: SubsistemaCService
+	) {}
+
+	operacaoCompleta(): string {
+		let resultado = ''
+		resultado += this.subsistemaA.operacaoA()
+		resultado += this.subsistemaB.operacaoB()
+		resultado += this.subsistemaC.operacaoC()
+		return resultado
+	}
+}
+```
+
+A `FacadeService` agora encapsula a complexidade dos subsistemas, fornecendo um método `operacaoCompleta()` para realizar uma operação composta.
+
+### 3. Utilizando a Fachada na Aplicação
+
+No componente ou serviço onde precisamos interagir com os subsistemas, podemos injetar a fachada e utilizar seus métodos de forma simplificada:
+
+```typescript
+import { Component } from '@angular/core'
+import { FacadeService } from './facade.service'
+
+@Component({
+	selector: 'app-root',
+	template: `
+		<div>
+			<h1>Usando o padrão Facade em Angular</h1>
+			<p>{{ resultado }}</p>
+		</div>
+	`
+})
+export class AppComponent {
+	resultado: string
+
+	constructor(private facadeService: FacadeService) {
+		this.resultado = this.facadeService.operacaoCompleta()
+	}
+}
+```
+
+## Conclusão
+
+A implementação do padrão Facade em aplicações Angular proporciona uma maneira elegante de simplificar a interação com subsistemas complexos.
+
+Ao encapsular a complexidade dos serviços em uma fachada, facilitamos o desenvolvimento, manutenção e compreensão do código.
+
+Utilizar padrões de projeto como o Facade contribui para a construção de aplicações mais escaláveis, modulares e de fácil manutenção no ecossistema Angular.

src/content/blog/signals-o-que-e-como-utilizar.mdx

@@ -1,7 +1,7 @@
 ---
 title: 'Signals: O que é e como utilizar'
 description: Entenda como usar essa maravilhosa funcionalidade do Angular 16
-pubDate: '2023-07-03T01:14:37.640Z'
+pubDate: '2023-07-03'
 heroImage: '/images/posts/1__b8XBKnnk9Eo1oDOfNIERyg.png'
 category: 'Angular'
 tags:

src/pages/index.astro

@@ -5,8 +5,7 @@ import TitlePage from '@/components/TitlePage'
 import BaseLayout from '@/layouts/BaseLayout'
 import { getPosts } from '@/utils'
 
-const MAX_POSTS = 5 // max number of posts to show on the home page
-const posts = await getPosts(MAX_POSTS)
+const posts = await getPosts()
 ---
 
 <BaseLayout title='Home'>
@@ -15,7 +14,7 @@ const posts = await getPosts(MAX_POSTS)
 
 	<div>
 		<h2 class='text-lg font-medium tracking-wide text-end'>Últimos Posts</h2>
-		<ListPosts FirstBig={true} posts={posts} />
+		<ListPosts lastestPostBig={true} posts={posts} />
 	</div>
 </BaseLayout>
 

src/utils/post.ts

@@ -9,7 +9,7 @@ export const getCategories = async () => {
 export const getPosts = async (max?: number) => {
 	return (await getCollection('blog'))
 		.filter((post) => !post.data.draft)
-		.sort((a, b) => a.data.pubDate.getMilliseconds() - b.data.pubDate.getMilliseconds())
+		.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime())
 		.slice(0, max)
 }