feat/light-mode

Jenkinsfile.deploy

@@ -12,6 +12,12 @@ pipeline {
         timestamps()
     }
 
+    parameters {
+        string(name: 'DB_MAIN_EU', defaultValue: '', description: 'The EU database to use for the main branch')
+        string(name: 'DB_MAIN_US_WEST', defaultValue: '', description: 'The US West database to use for the main branch')
+        string(name: 'DB_MAIN_US_EAST', defaultValue: '', description: 'The US East database to use for the main branch')
+    }
+
     environment {
         KV_DEV = credentials('cf-kv-dev')
         KV_PROD = credentials('cf-kv-prod')
@@ -78,6 +84,27 @@ pipeline {
                 }
             }
         }
+        stage("Select master db") {
+            steps {
+                script {
+                    env.USE_PARAMS_DB="false"                    
+                    def setCount = 0
+                    if (params.DB_MAIN_EU != "") setCount++
+                    if (params.DB_MAIN_US_WEST != "") setCount++
+                    if (params.DB_MAIN_US_EAST != "") setCount++
+                    if (setCount > 0 && setCount < 3) {
+                        error("Only some main db params are set. Please set all or none.")
+                    }
+
+
+                    if (setCount == 3) { 
+                        echo "Using params db"
+                        env.USE_PARAMS_DB = "true"
+                    }
+
+                }
+            }
+        }
         stage("Branch db") {
             steps {
                 script {
@@ -103,12 +130,29 @@ pipeline {
                         error("DB branch name is too long")
                     }
                 withCredentials([string(credentialsId: 'tursor_api_token', variable: 'TURSO_API_TOKEN')]) {                    
+                    echo "prams status $USE_PARAMS_DB"
+                    if (env.USE_PARAMS_DB == "true") {
+                        echo "Using params db"
+                        sh """
+                            turso org switch angular-love
+                            turso db create eu-${DB_BRANCH_NAME} --from-db $DB_MAIN_EU --group blog-eu
+                            turso db create usw-${DB_BRANCH_NAME} --from-db $DB_MAIN_US_WEST --group blog-us-west
+                            turso db create use-${DB_BRANCH_NAME} --from-db $DB_MAIN_US_EAST --group blog-us-east
+                        """
+                    } else {
+                        echo "Using normal db"
+                        sh """
+                            turso org switch angular-love
+                            turso db create eu-${DB_BRANCH_NAME} --from-db $TURSO_EU_DB --group blog-eu
+                            turso db create usw-${DB_BRANCH_NAME} --from-db $TURSO_US_WEST_DB --group blog-us-west
+                            turso db create use-${DB_BRANCH_NAME} --from-db $TURSO_US_EAST_DB --group blog-us-east
+                        """
+
+                    }
+
+
                     sh """
                         turso org switch angular-love
-                        turso db create eu-${DB_BRANCH_NAME} --from-db $TURSO_EU_DB --group blog-eu
-                        turso db create usw-${DB_BRANCH_NAME} --from-db $TURSO_US_WEST_DB --group blog-us-west
-                        turso db create use-${DB_BRANCH_NAME} --from-db $TURSO_US_EAST_DB --group blog-us-east
-
                         turso db list -g blog-eu | grep -q "eu-${DB_BRANCH_NAME}" || { echo "EU database not found after creation"; exit 1; }
                         turso db list -g blog-us-west | grep -q "usw-${DB_BRANCH_NAME}" || { echo "US West database not found after creation"; exit 1; }
                         turso db list -g blog-us-east | grep -q "use-${DB_BRANCH_NAME}" || { echo "US East database not found after creation"; exit 1; }

apps/blog/scripts/build-routes.mjs

@@ -47,7 +47,7 @@ const constructUrl = (path, lang) => `/${lang}/${path}`;
  * @returns {Promise<void>}
  */
 async function fetchArticleRoutes(lang, skip = 0, take = 50) {
-  const url = `${API_BASE_URL}/articles?skip=${skip}&take=${take}`;
+  const url = `${API_BASE_URL}/articles?skip=${skip}&take=${take}&showHidden`;
   try {
     const { data, total } = await fetch(url, {
       headers: {

libs/blog-bff/articles/api/src/lib/api.ts

@@ -38,6 +38,7 @@ app.get('/', async (c) => {
       featuredImageUrl: articles.imageUrl,
       readingTime: articles.readingTime,
       publishDate: articles.publishDate,
+      hidden: articles.publishDate,
       author: {
         slug: authors.slug,
         name: authors.name,
@@ -50,6 +51,7 @@ app.get('/', async (c) => {
       and(
         eq(articles.status, ArticleStatus.Publish),
         eq(articles.language, dbLangMap[c.var.lang]),
+        ...showHiddenFilter(articles, queryParams.showHidden),
         ...withCategoryFilters(articles, queryParams.category),
       ),
     )
@@ -64,6 +66,7 @@ app.get('/', async (c) => {
       and(
         eq(articleCounts.lang, dbLangMap[c.var.lang]),
         eq(articleCounts.status, ArticleStatus.Publish),
+        ...showHiddenFilter(articleCounts, queryParams.showHidden),
         ...withCategoryFilters(articleCounts, queryParams.category),
       ),
     )
@@ -140,6 +143,13 @@ app.get('/:id/related', async (c) => {
 
 export default app;
 
+function showHiddenFilter(
+  table: typeof articles | typeof articleCounts,
+  showHidden?: string,
+) {
+  return showHidden !== undefined ? [] : [eq(table.isHidden, false)];
+}
+
 function withCategoryFilters(
   table: typeof articles | typeof articleCounts,
   category?: string,

libs/blog-bff/newsletter/src/lib/api.ts

@@ -43,20 +43,16 @@ app.post('/subscribe', async (c) => {
   const { BREVO_API_KEY, BREVO_API_URL } = env(c);
 
   let listIds: number[];
-  let templateId: number;
 
   if (lang === 'pl') {
     listIds = [NewsletterList.PL, NewsletterList.PLNew];
-    templateId = NewsletterTemplate.PL;
   } else {
     listIds = [NewsletterList.EN];
-    templateId = NewsletterTemplate.EN;
   }
 
   try {
     const parsedEmail = v.parse(EmailSchema, newSubscriber);
     const client = new NewsletterClient(BREVO_API_URL, BREVO_API_KEY);
-    let sendTemplate = true;
 
     try {
       const existingContact = await client.getContact(parsedEmail);
@@ -75,9 +71,6 @@ app.post('/subscribe', async (c) => {
           listIds: mergedListIds,
         });
       }
-
-      // Contact is already on the list, we should not send a welcoming template
-      sendTemplate = !alreadySubscribed;
     } catch (err) {
       if (
         typeof err === 'object' &&
@@ -94,23 +87,6 @@ app.post('/subscribe', async (c) => {
       }
     }
 
-    if (sendTemplate) {
-      const template = await client.getTemplate(templateId);
-
-      await client.sendEmail({
-        sender: {
-          id: template.sender.id,
-        },
-        subject: template.subject,
-        htmlContent: template.htmlContent,
-        to: [
-          {
-            email: parsedEmail,
-          },
-        ],
-      });
-    }
-
     return c.json({ success: true }, 200);
   } catch (e) {
     if (e instanceof v.ValiError) {

libs/blog-bff/newsletter/src/lib/newsletter-client.ts

@@ -6,17 +6,6 @@ export class NewsletterClient {
     private _apiKey: string,
   ) {}
 
-  getTemplate(templateId: number): Promise<Template> {
-    return this.request<Template>(`smtp/templates/${templateId}`);
-  }
-
-  sendEmail(dto: SendEmailDto): Promise<void> {
-    return this.request<void>(`smtp/email`, {
-      method: 'POST',
-      body: dto,
-    });
-  }
-
   createContact(contact: NewContactDto): Promise<void> {
     return this.request(`contacts`, {
       method: 'POST',

libs/blog-bff/shared/schema/src/lib/schema.ts

@@ -74,6 +74,7 @@ export const articles = sqliteTable(
       .$type<ArticleTranslation[]>()
       .notNull(),
     seo: text('seo', { mode: 'json' }).$type<SeoData>(),
+    isHidden: integer('is_hidden', { mode: 'boolean' }).notNull(),
     categories: text('categories', { mode: 'json' })
       .notNull()
       .$type<string[]>(),
@@ -100,36 +101,42 @@ export const articles = sqliteTable(
     uniqueIndex('article_slug_idx').on(table.slug),
     index('article_guide_covering_idx').on(
       table.status,
+      table.isHidden,
       table.language,
       table.isGuide,
       table.publishDate,
     ),
     index('article_recommended_covering_idx').on(
       table.status,
+      table.isHidden,
       table.language,
       table.isRecommended,
       table.publishDate,
     ),
     index('article_news_covering_idx').on(
       table.status,
+      table.isHidden,
       table.language,
       table.isNews,
       table.publishDate,
     ),
     index('article_in_depth_covering_idx').on(
       table.status,
+      table.isHidden,
       table.language,
       table.isInDepth,
       table.publishDate,
     ),
     index('article_covering_idx').on(
       table.status,
+      table.isHidden,
       table.language,
       table.publishDate,
     ),
     index('article_author_covering_idx').on(
       table.authorId,
       table.status,
+      table.isHidden,
       table.language,
       table.publishDate,
     ),
@@ -145,6 +152,7 @@ export const articleCounts = sqliteTable(
     isGuide: integer('is_guide', { mode: 'boolean' }).notNull(),
     isInDepth: integer('is_in_depth', { mode: 'boolean' }).notNull(),
     isRecommended: integer('is_recommended', { mode: 'boolean' }).notNull(),
+    isHidden: integer('is_hidden', { mode: 'boolean' }).notNull(),
     rowCount: integer('row_count').notNull(),
   },
   (table) => [
@@ -155,6 +163,7 @@ export const articleCounts = sqliteTable(
       table.isGuide,
       table.isInDepth,
       table.isRecommended,
+      table.isHidden,
     ),
   ],
 );

libs/blog/about-us/feature-about-us/src/lib/feature-about-us/feature-about-us.component.html

@@ -1,9 +1,9 @@
 <ng-container *transloco="let t; read: 'aboutUsPage'">
-  <h2 class="py-4 text-[40px] font-bold">
+  <h2 class="text-al-primary-foreground py-4 text-[40px] font-bold">
     {{ t('title') }}
   </h2>
 
-  <al-card>
+  <al-card class="bg-transparent">
     <section
       alCardContent
       aria-labelledby="angular-love"
@@ -35,13 +35,18 @@ <h2 class="py-4 text-[40px] font-bold">
     <al-newsletter alCardContent />
   </al-card>
 
-  <h2 class="mb-8 mt-10 text-[40px] font-bold">
+  <h2 class="text-al-primary-foreground mb-8 mt-10 text-[40px] font-bold">
     {{ t('authorsTitle') }}
   </h2>
 </ng-container>
 
 @for (author of authorsCards(); track author.slug) {
-  <al-author-card class="mb-6 block" [author]="author" [linkable]="true" />
+  <al-author-card
+    class="mb-6 block"
+    [author]="author"
+    [linkable]="true"
+    [hideGradient]="hideGradientInAuthorCards()"
+  />
 
   @if ($index === noAuthorsInView() - 2) {
     @defer (on viewport) {

libs/blog/about-us/feature-about-us/src/lib/feature-about-us/feature-about-us.component.ts

@@ -16,6 +16,7 @@ import {
 } from '@angular-love/blog/shared/ui-card';
 import { InfiniteScrollTriggerDirective } from '@angular-love/blog/shared/ui-pagination';
 import { SocialMediaIconsComponent } from '@angular-love/blog/shared/ui-social-media-icons';
+import { AppThemeStore } from '@angular-love/data-access-app-theme';
 
 @Component({
   selector: 'al-about-us',
@@ -41,6 +42,10 @@ export class FeatureAboutUsComponent implements OnInit {
     return this.authorsCards()?.length || 0;
   });
 
+  readonly theme = inject(AppThemeStore).theme;
+
+  readonly hideGradientInAuthorCards = computed(() => this.theme() === 'light');
+
   private readonly _skip = this._authorListStore.skip;
   private readonly _total = this._authorListStore.total;
   private readonly _pageSize = this._authorListStore.pageSize;

libs/blog/app-theme/data-access-app-theme/src/app-theme.store.ts

@@ -1,16 +1,16 @@
 import { isPlatformBrowser } from '@angular/common';
 import { inject, Injectable, PLATFORM_ID } from '@angular/core';
-import { signalStore, withMethods, withState } from '@ngrx/signals';
+import { patchState, signalStore, withMethods, withState } from '@ngrx/signals';
 
-type Theme = 'dark' | 'light';
+export type Theme = 'dark' | 'light';
 
 interface AppThemeStore {
   theme: Theme;
 }
 
 export const AppThemeStore = signalStore(
   { providedIn: 'root' },
-  withState<AppThemeStore>({ theme: 'light' }),
+  withState<AppThemeStore>({ theme: 'dark' }),
   withMethods(
     (
       store,
@@ -19,7 +19,18 @@ export const AppThemeStore = signalStore(
     ) => ({
       syncWithSystemTheme: () => {
         if (isPlatformBrowser(platformId)) {
-          ccConsumer.setThemeClass(getSystemTheme());
+          const theme =
+            (localStorage.getItem('theme') as Theme) ?? getSystemTheme();
+          ccConsumer.setThemeAttribute(theme);
+          patchState(store, { theme: theme });
+        }
+      },
+      toggleTheme: () => {
+        if (isPlatformBrowser(platformId)) {
+          const newTheme = store.theme() === 'dark' ? 'light' : 'dark';
+          ccConsumer.setThemeAttribute(newTheme);
+          localStorage.setItem('theme', newTheme);
+          patchState(store, { theme: newTheme });
         }
       },
     }),
@@ -35,15 +46,15 @@ function getSystemTheme(): Theme {
 /* todo: create consumer interface and decouple AppThemeStore from CCAppThemeConsumer*/
 @Injectable({ providedIn: 'root' })
 export class CCAppThemeConsumer {
-  setThemeClass(theme: Theme): void {
-    const htmlElement = document.documentElement;
-    switch (theme) {
-      case 'dark':
-        htmlElement.classList.add('cc--darkmode');
-        break;
-      case 'light':
-        htmlElement.classList.remove('cc--darkmode');
-        break;
+  setThemeAttribute(theme: Theme): void {
+    document.documentElement.setAttribute('data-theme', theme);
+
+    const classList = document.documentElement.classList;
+
+    if (theme === 'dark') {
+      classList.add('cc--darkmode');
+    } else {
+      classList.remove('cc--darkmode');
     }
   }
 }

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

@@ -53,6 +53,7 @@ <h1 id="article-title" class="flex text-[40px] font-bold">
   </section>
   <aside class="order-3 col-span-12 lg:col-span-4">
     <al-author-card
+      [articleCard]="true"
       [author]="articleDetails().author"
       [clampText]="true"
       [linkable]="true"