feat: add email subsciption

apps/angular/anchor-scrolling/jest.config.ts

@@ -2,7 +2,7 @@
 export default {
   displayName: 'angular-anchor-scrolling',
   preset: '../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/subscription-setup.ts'],
   coverageDirectory: '../../../coverage/apps/angular/anchor-scrolling',
   transform: {
     '^.+\\.(ts|mjs|js|html)$': [

apps/angular/bug-cd/jest.config.ts

@@ -2,7 +2,7 @@
 export default {
   displayName: 'angular-bug-cd',
   preset: '../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/subscription-setup.ts'],
   coverageDirectory: '../../../coverage/apps/angular/bug-cd',
   transform: {
     '^.+\\.(ts|mjs|js|html)$': [

apps/angular/crud/jest.config.ts

@@ -2,7 +2,7 @@
 export default {
   displayName: 'angular-crud',
   preset: '../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/subscription-setup.ts'],
   globals: {},
   coverageDirectory: '../../../coverage/apps/angular/crud',
   transform: {

apps/angular/injection-token/jest.config.ts

@@ -2,7 +2,7 @@
 export default {
   displayName: 'angular-injection-token',
   preset: '../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/subscription-setup.ts'],
   coverageDirectory: '../../../coverage/apps/angular/injection-token',
   transform: {
     '^.+\\.(ts|mjs|js|html)$': [

apps/angular/interop-rxjs-signal/jest.config.ts

@@ -2,7 +2,7 @@
 export default {
   displayName: 'angular-interop-rxjs-signal',
   preset: '../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/subscription-setup.ts'],
   coverageDirectory: '../../../coverage/apps/angular/interop-rxjs-signal',
   transform: {
     '^.+\\.(ts|mjs|js|html)$': [

apps/angular/projection/jest.config.ts

@@ -2,7 +2,7 @@
 export default {
   displayName: 'angular-projection',
   preset: '../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/subscription-setup.ts'],
   globals: {},
   coverageDirectory: '../../../coverage/apps/angular/projection',
   transform: {

apps/angular/router-input/src/app/app.component.ts

@@ -12,7 +12,7 @@ import { RouterLink, RouterModule } from '@angular/router';
     <label for="testId">TestId</label>
     <input id="testId" type="number" [formControl]="testId" />
     <button
-      [routerLink]="'test/' + testId.value"
+      [routerLink]="'subscription/' + testId.value"
       [queryParams]="{ user: userName.value }">
       Test
     </button>

apps/angular/router-input/src/app/app.routes.ts

@@ -6,7 +6,7 @@ export const appRoutes: Route[] = [
     loadComponent: () => import('./home.component'),
   },
   {
-    path: 'test/:testId',
+    path: 'subscription/:testId',
     loadComponent: () => import('./test.component'),
     data: {
       permission: 'admin',

apps/angular/router-input/src/app/test.component.ts

@@ -2,8 +2,9 @@ import { AsyncPipe } from '@angular/common';
 import { Component, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { map } from 'rxjs';
+
 @Component({
-  selector: 'app-test',
+  selector: 'app-subscription',
   standalone: true,
   imports: [AsyncPipe],
   template: `

apps/forms/control-value-accessor/jest.config.ts

@@ -2,7 +2,7 @@
 export default {
   displayName: 'forms-control-value-accessor',
   preset: '../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/subscription-setup.ts'],
   coverageDirectory: '../../../coverage/apps/forms/control-value-accessor',
   transform: {
     '^.+\\.(ts|mjs|js|html)$': [

apps/ngrx/effect-selector/jest.config.ts

@@ -2,7 +2,7 @@
 export default {
   displayName: 'ngrx-effect-selector',
   preset: '../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/subscription-setup.ts'],
   globals: {},
   coverageDirectory: '../../../coverage/apps/ngrx/effect-selector',
   transform: {

apps/performance/ngfor-optimize/jest.config.ts

@@ -2,7 +2,7 @@
 export default {
   displayName: 'performance-ngfor-optimize',
   preset: '../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/subscription-setup.ts'],
   coverageDirectory: '../../../coverage/apps/performance/ngfor-optimize',
   transform: {
     '^.+\\.(ts|mjs|js|html)$': [

apps/performance/scroll-cd/jest.config.ts

@@ -2,7 +2,7 @@
 export default {
   displayName: 'performance-scroll-cd',
   preset: '../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/subscription-setup.ts'],
   globals: {},
   coverageDirectory: '../../../coverage/apps/performance/scroll-cd',
   transform: {

apps/rxjs/catch-error/jest.config.ts

@@ -2,7 +2,7 @@
 export default {
   displayName: 'rxjs-catch-error',
   preset: '../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/subscription-setup.ts'],
   coverageDirectory: '../../../coverage/apps/rxjs/catch-error',
   transform: {
     '^.+\\.(ts|mjs|js|html)$': [

apps/rxjs/race-condition/cypress/support/component.ts

@@ -1,6 +1,6 @@
 // ***********************************************************
 // This example support/component.ts is processed and
-// loaded automatically before your test files.
+// loaded automatically before your subscription files.
 //
 // This is a great place to put global configuration and
 // behavior that modifies Cypress.

apps/rxjs/race-condition/jest.config.ts

@@ -2,7 +2,7 @@
 export default {
   displayName: 'rxjs-race-condition',
   preset: '../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/subscription-setup.ts'],
   globals: {},
   coverageDirectory: '../../../coverage/apps/rxjs/race-condition',
   transform: {

apps/testing/checkbox/jest.config.ts

@@ -2,7 +2,7 @@
 export default {
   displayName: 'testing-checkbox',
   preset: '../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/subscription-setup.ts'],
   coverageDirectory: '../../../coverage/apps/testing/checkbox',
   transform: {
     '^.+\\.(ts|mjs|js|html)$': [

apps/testing/create-harness/jest.config.ts

@@ -2,7 +2,7 @@
 export default {
   displayName: 'testing-create-harness',
   preset: '../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/subscription-setup.ts'],
   transform: {
     '^.+\\.(ts|mjs|js|html)$': [
       'jest-preset-angular',

apps/testing/harness/jest.config.ts

@@ -2,7 +2,7 @@
 export default {
   displayName: 'testing-harness',
   preset: '../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/subscription-setup.ts'],
   transform: {
     '^.+\\.(ts|mjs|js|html)$': [
       'jest-preset-angular',

apps/testing/input-output/cypress/support/component.ts

@@ -1,6 +1,6 @@
 // ***********************************************************
 // This example support/component.ts is processed and
-// loaded automatically before your test files.
+// loaded automatically before your subscription files.
 //
 // This is a great place to put global configuration and
 // behavior that modifies Cypress.

apps/testing/input-output/jest.config.ts

@@ -2,7 +2,7 @@
 export default {
   displayName: 'testing-input-output',
   preset: '../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/subscription-setup.ts'],
   transform: {
     '^.+\\.(ts|mjs|js|html)$': [
       'jest-preset-angular',

apps/testing/modal/cypress/support/component.ts

@@ -1,6 +1,6 @@
 // ***********************************************************
 // This example support/component.ts is processed and
-// loaded automatically before your test files.
+// loaded automatically before your subscription files.
 //
 // This is a great place to put global configuration and
 // behavior that modifies Cypress.

apps/testing/modal/jest.config.ts

@@ -2,7 +2,7 @@
 export default {
   displayName: 'testing-modal',
   preset: '../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/subscription-setup.ts'],
   transform: {
     '^.+\\.(ts|mjs|js|html)$': [
       'jest-preset-angular',

apps/testing/nested/cypress/support/component.ts

@@ -1,6 +1,6 @@
 // ***********************************************************
 // This example support/component.ts is processed and
-// loaded automatically before your test files.
+// loaded automatically before your subscription files.
 //
 // This is a great place to put global configuration and
 // behavior that modifies Cypress.

apps/testing/nested/jest.config.ts

@@ -2,7 +2,7 @@
 export default {
   displayName: 'testing-nested',
   preset: '../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/subscription-setup.ts'],
   transform: {
     '^.+\\.(ts|mjs|js|html)$': [
       'jest-preset-angular',

apps/testing/router-outlet/cypress/support/component.ts

@@ -1,6 +1,6 @@
 // ***********************************************************
 // This example support/component.ts is processed and
-// loaded automatically before your test files.
+// loaded automatically before your subscription files.
 //
 // This is a great place to put global configuration and
 // behavior that modifies Cypress.

apps/testing/router-outlet/jest.config.ts

@@ -2,7 +2,7 @@
 export default {
   displayName: 'testing-router-outlet',
   preset: '../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/subscription-setup.ts'],
   globals: {},
   transform: {
     '^.+\\.(ts|mjs|js|html)$': [

apps/testing/table/README.md

@@ -10,13 +10,13 @@ NOT IMPLEMENTED YET
 If the title is correctly typed, you can send the request otherwise you get a nice error and the request is not sent.
 You can play with it by running : `npx nx serve testing-table`.
 
-The goal is to test this behavior with Testing library and Cypress
+The goal is to subscription this behavior with Testing library and Cypress
 
-The file named `child.component.spec.ts` will let test your application using Testing Library. To run the test suits, you need to run `npx nx test testing-table`. You can also install [Jest Runner](https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner) to execute your test by clicking on the `Run` button above each `describe` or `it` blocks.
+The file named `child.component.spec.ts` will let subscription your application using Testing Library. To run the subscription suits, you need to run `npx nx subscription testing-table`. You can also install [Jest Runner](https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner) to execute your subscription by clicking on the `Run` button above each `describe` or `it` blocks.
 
-For testing cypress, you will execute your test inside the `child.component.cy.ts` and run `npx nx component-test testing-table` to execute your test suits. You can add the `--watch` flag to execute your test in watch mode.
+For testing cypress, you will execute your subscription inside the `child.component.cy.ts` and run `npx nx component-subscription testing-table` to execute your subscription suits. You can add the `--watch` flag to execute your subscription in watch mode.
 
-I created some `it` blocks but feel free to add more test if you like to. -->
+I created some `it` blocks but feel free to add more subscription if you like to. -->
 
 ### Submitting your work
 

apps/testing/table/cypress/support/component.ts

@@ -1,6 +1,6 @@
 // ***********************************************************
 // This example support/component.ts is processed and
-// loaded automatically before your test files.
+// loaded automatically before your subscription files.
 //
 // This is a great place to put global configuration and
 // behavior that modifies Cypress.

apps/testing/table/jest.config.ts

@@ -2,7 +2,7 @@
 export default {
   displayName: 'testing-table',
   preset: '../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/subscription-setup.ts'],
   transform: {
     '^.+\\.(ts|mjs|js|html)$': [
       'jest-preset-angular',

apps/testing/table/src/app/table.component.spec.ts

@@ -40,7 +40,7 @@ describe('AppComponent', () => {
     // await userEvent.click(okButton);
   });
 
-  // test('error message is shown if you click "Cancel" in the confirmation modal after submitting a name', async () => {
+  // subscription('error message is shown if you click "Cancel" in the confirmation modal after submitting a name', async () => {
   //   userEvent.setup();
   //   await render(AppComponent);
 
@@ -68,7 +68,7 @@ describe('AppComponent', () => {
   //   expect(errorText).toBeInTheDocument();
   // });
 
-  // test('confirm message is shown if you click "Confirm" in the confirmation modal after submitting a name', async () => {
+  // subscription('confirm message is shown if you click "Confirm" in the confirmation modal after submitting a name', async () => {
   //   userEvent.setup();
   //   await render(AppComponent);
 

apps/testing/todos-list/cypress/support/component.ts

@@ -1,6 +1,6 @@
 // ***********************************************************
 // This example support/component.ts is processed and
-// loaded automatically before your test files.
+// loaded automatically before your subscription files.
 //
 // This is a great place to put global configuration and
 // behavior that modifies Cypress.

apps/testing/todos-list/jest.config.ts

@@ -2,7 +2,7 @@
 export default {
   displayName: 'testing-todos-list',
   preset: '../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/subscription-setup.ts'],
   transform: {
     '^.+\\.(ts|mjs|js|html)$': [
       'jest-preset-angular',

docs/src/components/ActionButtonFooter.astro

@@ -4,32 +4,36 @@ import MyIcon from './MyIcon.astro';
 import type { Props } from '@astrojs/starlight/props';
 
 const { labels } = Astro.props;
-
 ---
 
 <div class="action-footer">
-    <a class="action-button" href='https://github.com/tomalaforge/angular-challenges'>
-        <div>{labels['buttons.star']}</div>
-        <Icon name='github' size="1rem" />
+  <a class="action-button" href="/subscription">
+    <div>Email subscription</div>
+    <Icon name="email" size="1rem" />
   </a>
 
-    <a class="action-button button-sponsor" href='https://github.com/sponsors/tomalaforge'>
+  <a class="action-button" href="https://github.com/tomalaforge/angular-challenges">
+    <div>{labels['buttons.star']}</div>
+    <Icon name="github" size="1rem" />
+  </a>
+
+  <a class="action-button button-sponsor" href="https://github.com/sponsors/tomalaforge">
     <div>{labels['buttons.sponsor']}</div>
-        <MyIcon name='heart' size="1rem" color="white" />
+    <MyIcon name="heart" size="1rem" color="white" />
   </a>
 </div>
 
 <style>
   .action-button {
-        display: flex!important;
+    display: flex !important;
     justify-content: center;
     gap: 0.5em;
     align-items: center;
     border-radius: 999rem;
-        color: var(--sl-color-white)!important;
+    color: var(--sl-color-white) !important;
     line-height: 1.1875;
     text-decoration: none;
-        font-size: var(--sl-text-sm)!important;
+    font-size: var(--sl-text-sm) !important;
     border: 1px solid;
     font-size: var(--sl-text-base);
     padding: 0.4rem 0.8rem;
@@ -48,4 +52,5 @@ const { labels } = Astro.props;
     color: white;
   }
 
+
 </style>

docs/src/components/SubscriptionForm.astro

@@ -1,89 +1,15 @@
 ---
-import { Card } from '@astrojs/starlight/components';
+import ClipboardCopy from './ClipboardCopy.astro';
+const { isNote } = Astro.props;
 ---
 
-<!-- SendPulse Subscription Form -->
-<style>.sp-force-hide {
-  display: none;
-}
-
-.sp-form[sp-id="232070"] {
-  display: block;
-  background: #ffffff;
-  padding: 15px;
-  width: 450px;
-  max-width: 100%;
-  border-radius: 8px;
-  border-color: #dddddd;
-  border-style: solid;
-  border-width: 1px;
-  font-family: Arial, "Helvetica Neue", sans-serif;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: auto;
-}
-
-.sp-form[sp-id="232070"] input[type="checkbox"] {
-  display: inline-block;
-  opacity: 1;
-  visibility: visible;
-}
-
-.sp-form[sp-id="232070"] .sp-form-fields-wrapper {
-  margin: 0 auto;
-  width: 420px;
-}
-
-.sp-form[sp-id="232070"] .sp-form-control {
-  background: #ffffff;
-  border-color: #cccccc;
-  border-style: solid;
-  border-width: 1px;
-  font-size: 15px;
-  padding-left: 8.75px;
-  padding-right: 8.75px;
-  border-radius: 4px;
-  height: 35px;
-  width: 100%;
-}
-
-.sp-form[sp-id="232070"] .sp-field label {
-  color: #444444;
-  font-size: 13px;
-  font-style: normal;
-  font-weight: bold;
-}
-
-.sp-form[sp-id="232070"] .sp-button-messengers {
-  border-radius: 4px;
-}
-
-.sp-form[sp-id="232070"] .sp-button {
-  border-radius: 4px;
-  background-color: #0089bf;
-  color: #ffffff;
-  width: auto;
-  font-weight: bold;
-}
-
-.sp-form[sp-id="232070"] .sp-button-container {
-  text-align: left;
-}</style>
 <div class="sp-form-outer sp-force-hide">
   <div id="sp-form-232070" sp-id="232070" sp-hash="55b64e0209886940495b216b7a9a04ac634ac0dbd809c542ab00e6228035f8c4"
        sp-lang="en" class="sp-form sp-form-regular sp-form-embed sp-form-horizontal"
        sp-show-options="%7B%22satellite%22%3Afalse%2C%22maDomain%22%3A%22login.sendpulse.com%22%2C%22formsDomain%22%3A%22forms.sendpulse.com%22%2C%22condition%22%3A%22onEnter%22%2C%22scrollTo%22%3A25%2C%22delay%22%3A10%2C%22repeat%22%3A3%2C%22background%22%3A%22rgba(0%2C%200%2C%200%2C%200.5)%22%2C%22position%22%3A%22bottom-right%22%2C%22animation%22%3A%22%22%2C%22hideOnMobile%22%3Afalse%2C%22submitRedirectUrl%22%3A%22%22%2C%22urlFilter%22%3Afalse%2C%22urlFilterConditions%22%3A%5B%7B%22force%22%3A%22hide%22%2C%22clause%22%3A%22contains%22%2C%22token%22%3A%22%22%7D%5D%2C%22analytics%22%3A%7B%22ga%22%3A%7B%22eventLabel%22%3A%22Subscription_form_angular_challenge%22%2C%22send%22%3Atrue%7D%7D%2C%22utmEnable%22%3Afalse%7D">
-    <div class="sp-form-fields-wrapper">
-      <div class="sp-message">
-        <div></div>
-      </div>
     <form novalidate="" class="sp-element-container ">
-        <div class="sp-field sp-field-full-width-add sp-field-full-width sp-field-full-width-add-active"
-             sp-id="sp-09e3e6a3-44e8-4ba2-872b-96675cdbb1b4" data->
-          <div style="font-family: inherit; line-height: 1.2;"><p>Get updated when a new Challenge is published</p>
-          </div>
-        </div>
-        <div class="sp-field " sp-id="sp-76dfa588-3af2-4619-b685-835cf8c62ef0"><label class="sp-control-label"><span>Email</span><strong>*</strong></label><input
+      <div class="sp-field " sp-id="sp-76dfa588-3af2-4619-b685-835cf8c62ef0">
+        <input
           type="email" sp-type="email" name="sform[email]" class="sp-form-control " placeholder="username@gmail.com"
           sp-tips="%7B%22required%22%3A%22Required%20field%22%2C%22wrong%22%3A%22Wrong%20email%22%7D" autocomplete="on"
           required="required"></div>
@@ -91,14 +17,77 @@ import { Card } from '@astrojs/starlight/components';
         <button id="sp-82642eda-e68f-4b7a-a2b8-69e9d9bb5c99" class="sp-button">Subscribe</button>
       </div>
     </form>
-      <div class="sp-link-wrapper sp-brandname__left"><a class="sp-link " target="_blank"
-                                                         href="https://sendpulse.com/forms-powered-by-sendpulse?from=8570088"><span
-        class="sp-link-img">&nbsp;</span><span translate="FORM.PROVIDED_BY">Provided by SendPulse</span></a></div>
-    </div>
   </div>
 </div>
 <script type="text/javascript" async="async"
         src="//web.webformscr.com/apps/fc3/build/default-handler.js?1705909791474"></script>
-<!-- /SendPulse Subscription Form -->
+
+{isNote ?
+<aside aria-label="Note" class="starlight-aside starlight-aside--note">
+  <p class="starlight-aside__title" aria-hidden="true">
+    <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" class="starlight-aside__icon">
+      <path
+        d="M12 11C11.7348 11 11.4804 11.1054 11.2929 11.2929C11.1054 11.4804 11 11.7348 11 12V16C11 16.2652 11.1054 16.5196 11.2929 16.7071C11.4804 16.8946 11.7348 17 12 17C12.2652 17 12.5196 16.8946 12.7071 16.7071C12.8946 16.5196 13 16.2652 13 16V12C13 11.7348 12.8946 11.4804 12.7071 11.2929C12.5196 11.1054 12.2652 11 12 11ZM12.38 7.08C12.1365 6.97998 11.8635 6.97998 11.62 7.08C11.4973 7.12759 11.3851 7.19896 11.29 7.29C11.2017 7.3872 11.1306 7.49882 11.08 7.62C11.024 7.73868 10.9966 7.86882 11 8C10.9992 8.13161 11.0245 8.26207 11.0742 8.38391C11.124 8.50574 11.1973 8.61656 11.29 8.71C11.3872 8.79833 11.4988 8.86936 11.62 8.92C11.7715 8.98224 11.936 9.00632 12.099 8.99011C12.2619 8.97391 12.4184 8.91792 12.5547 8.82707C12.691 8.73622 12.8029 8.61328 12.8805 8.46907C12.9582 8.32486 12.9992 8.16378 13 8C12.9963 7.73523 12.8927 7.48163 12.71 7.29C12.6149 7.19896 12.5028 7.12759 12.38 7.08ZM12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 20C10.4178 20 8.87104 19.5308 7.55544 18.6518C6.23985 17.7727 5.21447 16.5233 4.60897 15.0615C4.00347 13.5997 3.84504 11.9911 4.15372 10.4393C4.4624 8.88743 5.22433 7.46197 6.34315 6.34315C7.46197 5.22433 8.88743 4.4624 10.4393 4.15372C11.9911 3.84504 13.5997 4.00346 15.0615 4.60896C16.5233 5.21447 17.7727 6.23984 18.6518 7.55544C19.5308 8.87103 20 10.4177 20 12C20 14.1217 19.1572 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20Z"></path>
+    </svg>
+    Notes
+  </p>
+  <p>This email will only be used for sending new challenges updates.</p>
+</aside>
+  :
+<span class="subnote">*This email will only be used for sending new challenges updates.</span>
+  }
+
+<style>
+  .sp-force-hide {
+    display: none;
+  }
+
+  .sp-form-outer {
+    display: flex;
+    align-items: center;
+    height: 100%;
+  }
+
+  .sp-form[sp-id="232070"] {
+    background: transparent;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+
+    .sp-element-container {
+      gap: 16px;
+    }
+
+    .sp-field {
+      padding: 0;
+    }
+
+    input[type="checkbox"] {
+      display: inline-block;
+      opacity: 1;
+      visibility: visible;
+    }
+
+    .sp-button-container {
+      margin-top: 0;
+    }
 
 
+    .sp-button {
+      gap: 0.5em;
+      align-items: center;
+      border-radius: 999rem;
+      padding: 0.5rem 1.125rem;
+      color: var(--sl-color-white);
+      line-height: 1.1875;
+      text-decoration: none;
+      font-size: var(--sl-text-sm);
+      background: var(--sl-color-text-accent);
+    }
+  }
+
+  .subnote {
+    font-size: var(--sl-text-xs);
+  }
+
+</style>

docs/src/content/docs/challenges/nx/25-generator-lib-ext.md

@@ -32,7 +32,7 @@ You should only override the jest configuration is the `unitTestRunner` option i
 export default {
   displayName: '< libName >', // 👈 lib name
   preset: '../../../jest.preset.js', // 👈 be careful with the path
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/subscription-setup.ts'],
   transform: {
     '^.+\\.(ts|mjs|js|html)$': [
       'jest-preset-angular',

docs/src/content/docs/index.mdx

@@ -24,12 +24,20 @@ hero:
 import { Card, CardGrid } from '@astrojs/starlight/components';
 import MyIcon from '../../components/MyIcon.astro';
 
+import SubscriptionForm from '../../components/SubscriptionForm.astro'
+
+
 <CardGrid>
+
 <Card title="43 Challenges">
     This repository gathers 43 challenges related to <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> and <b>Typescript</b>.
     These challenges resolve around real-life issues or specific features to elevate your skills.
 </Card>
 
+<Card title="Subscribe to get notify of latest challenges">
+<SubscriptionForm isNote={false}/>
+</Card>
+
 <Card title="Become an OSS Maintainer">
   One of the goals of this repository is to <b>lower the barrier</b> to entry
   for Open Source Software (OSS). By engaging with these challenges, you will

docs/src/content/docs/subscription/index.mdx

@@ -0,0 +1,10 @@
+---
+title: Subscription
+description: Subscribe to email.
+noCommentSection: true
+---
+import SubscriptionForm from '../../../components/SubscriptionForm.astro'
+
+<div>If you want to be informed of new challenges, you can subscribe to the email form.</div>
+<SubscriptionForm isNote={true} />
+

docs/src/content/docs/test/index.mdx

@@ -1,9 +0,0 @@
----
-title: Test
-description: Guide to checking out someone else's answer.
-sidebar:
-  order: 3
----
-import SubscriptionForm from '../../../components/SubscriptionForm.astro'
-
-<SubscriptionForm />

docs/src/styles/custom-css.css

@@ -159,3 +159,7 @@ details {
     cursor: pointer;
   }
 }
+
+.body:where(.astro-v5tidmuc) {
+  height: 100%;
+}

jest.preset.js

@@ -8,8 +8,8 @@ module.exports = {
    * It's recommend you update to the latest format.
    * You can do this by removing snapshotFormat property
    * and running tests with --update-snapshot flag.
-   * Example: "nx affected --targets=test --update-snapshot"
+   * Example: "nx affected --targets=subscription --update-snapshot"
    * More info: https://jestjs.io/docs/upgrading-to-jest29#snapshot-format
    */
-  snapshotFormat: { escapeString: true, printBasicPrototype: true },
+  snapshotFormat: { escapeString: true, printBasicPrototype: true }
 };

libs/angular/di/jest.config.ts

@@ -2,7 +2,7 @@
 export default {
   displayName: 'angular/di',
   preset: '../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/subscription-setup.ts'],
   coverageDirectory: '../../../coverage/libs/angular/di',
   transform: {
     '^.+\\.(ts|mjs|js|html)$': [

libs/decoupling/brain/jest.config.ts

@@ -2,7 +2,7 @@
 export default {
   displayName: 'decoupling-brain',
   preset: '../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/subscription-setup.ts'],
   coverageDirectory: '../../../coverage/libs/decoupling/brain',
   transform: {
     '^.+\\.(ts|mjs|js|html)$': [

libs/decoupling/core/jest.config.ts

@@ -2,7 +2,7 @@
 export default {
   displayName: 'decoupling-core',
   preset: '../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/subscription-setup.ts'],
   coverageDirectory: '../../../coverage/libs/decoupling/core',
   transform: {
     '^.+\\.(ts|mjs|js|html)$': [

libs/decoupling/helmet/jest.config.ts

@@ -2,7 +2,7 @@
 export default {
   displayName: 'decoupling-helmet',
   preset: '../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/subscription-setup.ts'],
   coverageDirectory: '../../../coverage/libs/decoupling/helmet',
   transform: {
     '^.+\\.(ts|mjs|js|html)$': [

libs/module-to-standalone/admin/feature/jest.config.ts

@@ -2,7 +2,7 @@
 export default {
   displayName: 'module-to-standalone-admin-feature',
   preset: '../../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/subscription-setup.ts'],
   coverageDirectory:
     '../../../../coverage/libs/module-to-standalone/admin/feature',
   transform: {

libs/module-to-standalone/admin/shared/jest.config.ts

@@ -2,7 +2,7 @@
 export default {
   displayName: 'module-to-standalone-admin-shared',
   preset: '../../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/subscription-setup.ts'],
   coverageDirectory:
     '../../../../coverage/libs/module-to-standalone/admin/shared',
   transform: {

libs/module-to-standalone/core/providers/jest.config.ts

@@ -2,7 +2,7 @@
 export default {
   displayName: 'module-to-standalone-core-providers',
   preset: '../../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/subscription-setup.ts'],
   coverageDirectory:
     '../../../../coverage/libs/module-to-standalone/core/providers',
   transform: {

libs/module-to-standalone/core/service/jest.config.ts

@@ -2,7 +2,7 @@
 export default {
   displayName: 'module-to-standalone-core-service',
   preset: '../../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/subscription-setup.ts'],
   coverageDirectory:
     '../../../../coverage/libs/module-to-standalone/core/service',
   transform: {

libs/module-to-standalone/forbidden/jest.config.ts

@@ -2,7 +2,7 @@
 export default {
   displayName: 'module-to-standalone-forbidden',
   preset: '../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/subscription-setup.ts'],
   coverageDirectory: '../../../coverage/libs/module-to-standalone/forbidden',
   transform: {
     '^.+\\.(ts|mjs|js|html)$': [

libs/module-to-standalone/home/jest.config.ts

@@ -2,7 +2,7 @@
 export default {
   displayName: 'module-to-standalone-home',
   preset: '../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/subscription-setup.ts'],
   coverageDirectory: '../../../coverage/libs/module-to-standalone/home',
   transform: {
     '^.+\\.(ts|mjs|js|html)$': [

libs/module-to-standalone/shell/jest.config.ts

@@ -2,7 +2,7 @@
 export default {
   displayName: 'module-to-standalone-shell',
   preset: '../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/subscription-setup.ts'],
   coverageDirectory: '../../../coverage/libs/module-to-standalone/shell',
   transform: {
     '^.+\\.(ts|mjs|js|html)$': [

libs/module-to-standalone/user/contact/jest.config.ts

@@ -2,7 +2,7 @@
 export default {
   displayName: 'module-to-standalone-user-contact',
   preset: '../../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/subscription-setup.ts'],
   coverageDirectory:
     '../../../../coverage/libs/module-to-standalone/user/contact',
   transform: {

libs/module-to-standalone/user/home/jest.config.ts

@@ -2,7 +2,7 @@
 export default {
   displayName: 'module-to-standalone-user-home',
   preset: '../../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/subscription-setup.ts'],
   coverageDirectory: '../../../../coverage/libs/module-to-standalone/user/home',
   transform: {
     '^.+\\.(ts|mjs|js|html)$': [

libs/module-to-standalone/user/shell/jest.config.ts

@@ -2,7 +2,7 @@
 export default {
   displayName: 'module-to-standalone-user-shell',
   preset: '../../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/subscription-setup.ts'],
   coverageDirectory:
     '../../../../coverage/libs/module-to-standalone/user/shell',
   transform: {

libs/ngrx-notification/backend/jest.config.ts

@@ -2,7 +2,7 @@
 export default {
   displayName: 'ngrx-notification-backend',
   preset: '../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/subscription-setup.ts'],
   globals: {},
   coverageDirectory: '../../../coverage/libs/ngrx-notification/backend',
   transform: {

libs/ngrx-notification/model/jest.config.ts

@@ -2,7 +2,7 @@
 export default {
   displayName: 'ngrx-notification-model',
   preset: '../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/subscription-setup.ts'],
   globals: {},
   coverageDirectory: '../../../coverage/libs/ngrx-notification/model',
   transform: {

libs/shared/directives/jest.config.ts

@@ -2,7 +2,7 @@
 export default {
   displayName: 'shared-directives',
   preset: '../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/subscription-setup.ts'],
   coverageDirectory: '../../../coverage/libs/shared/directives',
   transform: {
     '^.+\\.(ts|mjs|js|html)$': [

libs/shared/ngrx-callstate-store/jest.config.ts

@@ -2,7 +2,7 @@
 export default {
   displayName: 'shared-ngrx-callstate-store',
   preset: '../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/subscription-setup.ts'],
   globals: {},
   coverageDirectory: '../../../coverage/libs/shared/ngrx-callstate-store',
   transform: {

libs/shared/utils/jest.config.ts

@@ -2,7 +2,7 @@
 export default {
   displayName: 'shared-utils',
   preset: '../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/subscription-setup.ts'],
   globals: {},
   coverageDirectory: '../../../coverage/libs/shared/utils',
   transform: {