feat: add collection for authors

docs/src/components/Author.astro

@@ -0,0 +1,41 @@
+---
+import { Icon } from '@astrojs/starlight/components';
+
+interface Props {
+	name: string;
+	twitter?: string;
+    linkedin?: string;
+    github?: string;
+}
+
+const { name, twitter, linkedin, github } = Astro.props;
+
+---
+
+<p class="author">
+    Created by {name}
+    {twitter && <a href={twitter}><Icon class='icon' name="twitter" size="0.75rem" /></a>}
+    {linkedin && <a href={linkedin}><Icon class='icon' name="linkedin" size="0.75rem" /></a>}
+    {github && <a href={github}><Icon class='icon' name="github" size="0.75rem" /></a>}
+
+</p>
+
+<style>
+    .author {
+        display: flex;
+        gap: 0.5rem;
+        align-items: center;
+        margin-top: -1rem;
+        font-size: var(--sl-text-xs);
+        color: var(--sl-color-gray-3);
+    }
+    
+    .icon {
+        vertical-align: middle;
+        color: var(--sl-color-gray-3);
+
+        &:hover {
+            color: var(--sl-color-accent-high)
+        }
+    }
+</style>

docs/src/components/Content.astro

@@ -1,15 +1,18 @@
 ---
-import ChallengeFooter from './ChallengeFooter.astro'
-import CommentSection from './CommentSection.astro'
-import type { Props } from '@astrojs/starlight/props';
 import Default from '@astrojs/starlight/components/MarkdownContent.astro';
+import type { Props } from '@astrojs/starlight/props';
+import { getEntry } from 'astro:content';
+import Author from './Author.astro';
+import ChallengeFooter from './ChallengeFooter.astro';
+import CommentSection from './CommentSection.astro';
 
-const {challengeNumber, author} = Astro.props.entry.data;
+const {challengeNumber} = Astro.props.entry.data;
+const author = Astro.props.entry.data.author ? await getEntry(Astro.props.entry.data.author) : null;
 const renderCommentSection = !Astro.props.entry.data.noCommentSection;
 
 ---
 
-{ challengeNumber && author && <p class="author">Created by {author}</p> }
+{ challengeNumber && author && <Author {...author.data}/> }
 
 <Default {...Astro.props}><slot /></Default>
 

docs/src/components/VideoButton.astro

@@ -1,5 +1,11 @@
 ---
 
+interface Props {
+	link: string;
+	alt: string;
+	flag?: 'FR';
+}
+
 const { link, alt, flag } = Astro.props;
 const isFR = flag === 'FR';
 ---

docs/src/content/authors/devesh-chaudhari.json

@@ -0,0 +1,4 @@
+{
+  "name": "Devesh Chaudhari",
+  "twitter": "https://twitter.com/DeveshChau"
+}

docs/src/content/authors/thomas-laforge.json

@@ -0,0 +1,6 @@
+{
+  "name": "Thomas Laforge",
+  "twitter": "https://twitter.com/laforge_toma",
+  "linkedin": "https://www.linkedin.com/in/thomas-laforge-2b05a945/",
+  "github": "https://github.com/tomalaforge"
+}

docs/src/content/config.ts

@@ -1,23 +1,38 @@
 import { docsSchema, i18nSchema } from '@astrojs/starlight/schema';
-import { defineCollection, z } from 'astro:content';
+import { defineCollection, reference, z } from 'astro:content';
+
+const authors = defineCollection({
+  type: 'data',
+  schema: z.object({
+    name: z.string(),
+    twitter: z.string().url().optional(),
+    linkedin: z.string().url().optional(),
+    github: z.string().url().optional(),
+  }),
+});
+
+const docs = defineCollection({
+  schema: (ctx) =>
+    docsSchema()(ctx).extend({
+      noCommentSection: z.boolean().optional().default(false),
+      challengeNumber: z.union([z.number(), z.boolean()]).default(false),
+      author: reference('authors').optional(),
+      command: z.string().optional(),
+      blogLink: z.string().optional(),
+      videoLink: z
+        .object({
+          link: z.string(),
+          alt: z.string(),
+          flag: z.enum(['FR']).optional(),
+        })
+        .optional(),
+    }),
+});
+
+const i18n = defineCollection({ type: 'data', schema: i18nSchema() });
 
 export const collections = {
-  docs: defineCollection({
-    schema: (ctx) =>
-      docsSchema()(ctx).extend({
-        noCommentSection: z.boolean().optional().default(false),
-        challengeNumber: z.union([z.number(), z.boolean()]).default(false),
-        author: z.string().optional(),
-        command: z.string().optional(),
-        blogLink: z.string().optional(),
-        videoLink: z
-          .object({
-            link: z.string(),
-            alt: z.string(),
-            flag: z.enum(['FR']).optional(),
-          })
-          .optional(),
-      }),
-  }),
-  i18n: defineCollection({ type: 'data', schema: i18nSchema() }),
+  docs: docs,
+  i18n: i18n,
+  authors: authors,
 };

docs/src/content/docs/challenges/angular/1-projection.md

@@ -1,7 +1,7 @@
 ---
 title: 🟢 Projection
 description: Challenge 1 is about learning how to project DOM element through components
-author: Thomas Laforge
+author: thomas-laforge
 challengeNumber: 1
 command: angular-projection
 blogLink: https://medium.com/@thomas.laforge/create-a-highly-customizable-component-cc3a9805e4c5

docs/src/content/docs/challenges/angular/10-pipe-utility.md

@@ -1,7 +1,7 @@
 ---
 title: 🔴 Utility Wrapper Pipe
 description: Challenge 10 is about creating a pipe to wrap utilities
-author: Thomas Laforge
+author: thomas-laforge
 challengeNumber: 10
 command: angular-pipe-hard
 sidebar:

docs/src/content/docs/challenges/angular/13-styling.md

@@ -1,7 +1,7 @@
 ---
 title: 🟠 Highly Customizable CSS
 description: Challenge 13 is about creating highly customizable CSS styles
-author: Thomas Laforge
+author: thomas-laforge
 challengeNumber: 13
 command: angular-styling
 sidebar:

docs/src/content/docs/challenges/angular/16-di.md

@@ -1,7 +1,7 @@
 ---
 title: 🔴 Master Dependancy Injection
 description: Challenge 16 is about masjering how dependancy injection works
-author: Thomas Laforge
+author: thomas-laforge
 challengeNumber: 16
 command: angular-di
 sidebar:

docs/src/content/docs/challenges/angular/21-achor-scrolling.md

@@ -1,7 +1,7 @@
 ---
 title: 🟢 Anchor Navigation
 description: Challenge 21 is about navigating inside the page with anchor
-author: Thomas Laforge
+author: thomas-laforge
 challengeNumber: 21
 command: angular-anchor-scrolling
 sidebar:

docs/src/content/docs/challenges/angular/22-router-input.md

@@ -1,7 +1,7 @@
 ---
 title: 🟢 @RouterInput()
 description: Challenge 22 is about using the @Input decorator to retreive router params.
-author: Thomas Laforge
+author: thomas-laforge
 challengeNumber: 22
 command: angular-router-input
 blogLink: https://medium.com/ngconf/accessing-route-params-in-angular-1f8e12770617

docs/src/content/docs/challenges/angular/3-directive-enhancement.md

@@ -1,7 +1,7 @@
 ---
 title: 🟠 Directive Enhancement
 description: Challenge 3 is about enhancing a built-in directive
-author: Thomas Laforge
+author: thomas-laforge
 challengeNumber: 3
 command: angular-ngfor-enhancement
 blogLink: https://medium.com/@thomas.laforge/ngfor-enhancement-716b44656a6c

docs/src/content/docs/challenges/angular/30-interop-rxjs-signal.md

@@ -1,7 +1,7 @@
 ---
 title: 🔴 Interoperability Rxjs/Signal
 description: Challenge 30 is about learning how to mix signal with Rxjs
-author: Thomas Laforge
+author: thomas-laforge
 challengeNumber: 30
 command: angular-interop-rxjs-signal
 sidebar:

docs/src/content/docs/challenges/angular/31-module-to-standalone.md

@@ -1,7 +1,7 @@
 ---
 title: 🟢 Module to Standalone
 description: Challenge 31 is about migrating a module based application to a standalone application.
-author: Thomas Laforge
+author: thomas-laforge
 challengeNumber: 31
 command: angular-module-to-standalone
 sidebar:

docs/src/content/docs/challenges/angular/32-bug-cd.md

@@ -1,7 +1,7 @@
 ---
 title: 🟠 Change Detection Bug
 description: Challenge 32 is about debugging an application that has issue when change detection is triggered
-author: Thomas Laforge
+author: thomas-laforge
 challengeNumber: 32
 command: angular-bug-cd
 blogLink: https://medium.com/ngconf/function-calls-inside-template-are-dangerous-15f9822a6629

docs/src/content/docs/challenges/angular/33-decoupling.md

@@ -1,7 +1,7 @@
 ---
 title: 🟠 Decoupling Components
 description: Challenge 33 is about decoupling two strongly coupled components using Injection Token
-author: Thomas Laforge
+author: thomas-laforge
 challengeNumber: 33
 command: angular-decoupling
 sidebar:

docs/src/content/docs/challenges/angular/39-injection-token.md

@@ -1,7 +1,7 @@
 ---
 title: 🟠 InjectionToken
 description: Challenge 39 is about learning the power of dependancy injection
-author: Thomas Laforge
+author: thomas-laforge
 challengeNumber: 39
 command: angular-injection-token
 sidebar:

docs/src/content/docs/challenges/angular/4-context-outlet-typed.md

@@ -1,7 +1,7 @@
 ---
 title: 🔴 Typed ContextOutlet
 description: Challenge 4 is about strongly typing ngContextOutlet directives
-author: Thomas Laforge
+author: thomas-laforge
 challengeNumber: 4
 command: angular-context-outlet-type
 blogLink: https://medium.com/@thomas.laforge/ngtemplateoutlet-type-checking-5d2dcb07a2c6

docs/src/content/docs/challenges/angular/5-crud.md

@@ -1,7 +1,7 @@
 ---
 title: 🟢 Crud application
 description: Challenge 5 is about refactoring a crud application
-author: Thomas Laforge
+author: thomas-laforge
 challengeNumber: 5
 command: angular-crud
 sidebar:

docs/src/content/docs/challenges/angular/6-permissions.md

@@ -1,7 +1,7 @@
 ---
 title: 🟠 Structural Directive
 description: Challenge 6 is about creating a structural directive to handle permissions
-author: Thomas Laforge
+author: thomas-laforge
 challengeNumber: 6
 command: angular-permissions
 blogLink: https://medium.com/@thomas.laforge/create-a-custom-structural-directive-to-manage-permissions-like-a-pro-11a1acad30ad

docs/src/content/docs/challenges/angular/8-pipe-pure.md

@@ -1,7 +1,7 @@
 ---
 title: 🟢 Pure Pipe
 description: Challenge 8 is about creating a pure pipe
-author: Thomas Laforge
+author: thomas-laforge
 challengeNumber: 8
 command: angular-pipe-easy
 blogLink: https://medium.com/ngconf/deep-dive-into-angular-pipes-c040588cd15d

docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md

@@ -1,7 +1,7 @@
 ---
 title: 🟠 Wrap Function Pipe
 description: Challenge 9 is about creating a pipe to wrap component fonctions
-author: Thomas Laforge
+author: thomas-laforge
 challengeNumber: 9
 command: angular-pipe-intermediate
 blogLink: https://medium.com/ngconf/boost-your-apps-performance-by-wrapping-your-functions-inside-a-pipe-7e889a901d1d

docs/src/content/docs/challenges/ngrx/2-effect-selector.md

@@ -1,7 +1,7 @@
 ---
 title: 🟠 Effect vs Selector
 description: Challenge 2 is about learning the difference between effects and selectors in NgRx
-author: Thomas Laforge
+author: thomas-laforge
 challengeNumber: 2
 command: ngrx-effect-selector
 blogLink: https://medium.com/@thomas.laforge/ngrx-effect-vs-reducer-vs-selector-58337ab59043

docs/src/content/docs/challenges/ngrx/7-power-effect.md

@@ -1,7 +1,7 @@
 ---
 title: 🔴 Power of Effect
 description: Challenge 7 is about creating an Ngrx effect with another Rxjs Hot observable
-author: Thomas Laforge
+author: thomas-laforge
 challengeNumber: 7
 command: ngrx-notification
 sidebar:

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

@@ -1,7 +1,7 @@
 ---
 title: 🔴 Extend Lib Generator
 description: Challenge 25 is about creating a Nx generator to extend the built-in Library Generator
-author: Thomas Laforge
+author: thomas-laforge
 challengeNumber: 25
 sidebar:
   order: 207

docs/src/content/docs/challenges/nx/26-generator-comp.md

@@ -1,7 +1,7 @@
 ---
 title: 🟠 Component Generator
 description: Challenge 26 is about creating a Nx generator to create a custom component
-author: Thomas Laforge
+author: thomas-laforge
 challengeNumber: 26
 sidebar:
   order: 116
@@ -88,7 +88,7 @@ export class UserStore extends ComponentStore<UserState> implements OnStateInit,
       loading: this.loading$,
       error: this.error$,
     },
-    { debounce: true }
+    { debounce: true },
   );
 
   ngrxOnStateInit() {
@@ -106,11 +106,11 @@ export class UserStore extends ComponentStore<UserState> implements OnStateInit,
         this.userService.loadUsers().pipe(
           tapResponse(
             (users) => this.patchState({ users, loading: false }),
-            (err: string) => this.patchState({ error: err, loading: false })
-          )
-        )
-      )
-    )
+            (err: string) => this.patchState({ error: err, loading: false }),
+          ),
+        ),
+      ),
+    ),
   );
 }
 ```

docs/src/content/docs/challenges/nx/27-forbid-enum-rule.md

@@ -1,7 +1,7 @@
 ---
 title: 🟢 Custom Eslint Rule
 description: Challenge 27 is about creating a custom Eslint Rule to forbid enums
-author: Thomas Laforge
+author: thomas-laforge
 challengeNumber: 27
 sidebar:
   order: 12

docs/src/content/docs/challenges/performance/12-scroll-cd.md

@@ -1,7 +1,7 @@
 ---
 title: 🟠 Optimize Change Detection
 description: Challenge 12 about optimizing the number of change detection cycle while scrolling
-author: Thomas Laforge
+author: thomas-laforge
 challengeNumber: 12
 command: performance-scroll-cd
 sidebar:

docs/src/content/docs/challenges/performance/34-default-onpush.md

@@ -1,7 +1,7 @@
 ---
 title: 🟢 Default vs OnPush
 description: Challenge 34 is about learning the difference between Default and OnPush Change Detection Strategy.
-author: Thomas Laforge
+author: thomas-laforge
 challengeNumber: 34
 command: performance-default-onpush
 sidebar:

docs/src/content/docs/challenges/performance/35-memoize.md

@@ -1,7 +1,7 @@
 ---
 title: 🟢 Memoization
 description: Challenge 35 is about learning how pure pipe works
-author: Thomas Laforge
+author: thomas-laforge
 challengeNumber: 35
 command: performance-memoized
 sidebar:

docs/src/content/docs/challenges/performance/36-ngfor-optimize.md

@@ -1,7 +1,7 @@
 ---
 title: 🟢 NgFor Optimization
 description: Challenge 36 is about learning how trackby works
-author: Thomas Laforge
+author: thomas-laforge
 challengeNumber: 36
 command: performance-ngfor-optimize
 sidebar:

docs/src/content/docs/challenges/performance/37-ngfor-biglist.md

@@ -1,7 +1,7 @@
 ---
 title: 🟠 Optimize Big List
 description: Challenge 37 is about learning how virtualization optimize big list rendering
-author: Thomas Laforge
+author: thomas-laforge
 challengeNumber: 37
 command: performance-ngfor-biglist
 sidebar:

docs/src/content/docs/challenges/rxjs/11-bug-chaining-operator.md

@@ -1,7 +1,7 @@
 ---
 title: 🟠 High Order Operator Bug
 description: Challenge 11 is about resolving a Rxjs bug because of high order operators
-author: Thomas Laforge
+author: thomas-laforge
 challengeNumber: 11
 command: rxjs-pipe-bug
 sidebar:

docs/src/content/docs/challenges/rxjs/14-race-condition.md

@@ -1,7 +1,7 @@
 ---
 title: 🟢 Race Condition
 description: Challenge 14 is about race condition in Rxjs
-author: Thomas Laforge
+author: thomas-laforge
 challengeNumber: 14
 command: rxjs-race-condition
 sidebar:

docs/src/content/docs/challenges/rxjs/38-rxjs-catch-error.md

@@ -1,7 +1,7 @@
 ---
 title: 🟢 catchError
 description: Challenge 38 is about learning obervable completion.
-author: Devesh Chaudhari
+author: devesh-chaudhari
 command: rxjs-catch-error
 challengeNumber: 38
 sidebar:

docs/src/content/docs/challenges/testing/17-router.md

@@ -1,7 +1,7 @@
 ---
 title: 🟠 Router
 description: Challenge 17 is about testing the router
-author: Thomas Laforge
+author: thomas-laforge
 challengeNumber: 17
 command: testing-router-outlet
 sidebar:

docs/src/content/docs/challenges/testing/18-nested-comp.md

@@ -1,7 +1,7 @@
 ---
 title: 🟠 Nested Components
 description: Challenge 18 is about testing nested components
-author: Thomas Laforge
+author: thomas-laforge
 challengeNumber: 18
 command: testing-nested
 sidebar:

docs/src/content/docs/challenges/testing/19-input-output.md

@@ -1,7 +1,7 @@
 ---
 title: 🟠 Input Output
 description: Challenge 19 is about testing inputs and ouputs
-author: Thomas Laforge
+author: thomas-laforge
 challengeNumber: 19
 command: testing-input-output
 sidebar:

docs/src/content/docs/challenges/testing/20-modal.md

@@ -1,7 +1,7 @@
 ---
 title: 🟠 Modal
 description: Challenge 20 is about testing modals
-author: Thomas Laforge
+author: thomas-laforge
 challengeNumber: 20
 command: testing-modal
 sidebar:

docs/src/content/docs/challenges/testing/23-harness.md

@@ -1,7 +1,7 @@
 ---
 title: 🟢 Harness
 description: Challenge 23 is about testing with component harnesses
-author: Thomas Laforge
+author: thomas-laforge
 challengeNumber: 23
 command: testing-harness
 sidebar:

docs/src/content/docs/challenges/testing/24-harness-creation.md

@@ -1,7 +1,7 @@
 ---
 title: 🟠 Harness Creation
 description: Challenge 24 is about creating a component harness.
-author: Thomas Laforge
+author: thomas-laforge
 challengeNumber: 24
 command: testing-create-harness
 sidebar:

docs/src/content/docs/challenges/testing/28-checkbox.md

@@ -1,7 +1,7 @@
 ---
 title: 🟢 Checkbox
 description: Challenge 28 is about testing a simple checkbox
-author: Thomas Laforge
+author: thomas-laforge
 challengeNumber: 28
 command: testing-checkbox
 sidebar:

docs/src/content/docs/challenges/testing/29-real-application.md

@@ -1,7 +1,7 @@
 ---
 title: 🔴 Real-life Application
 description: Challenge 29 is about testing a real-life application
-author: Thomas Laforge
+author: thomas-laforge
 challengeNumber: 29
 command: testing-todos-list
 sidebar:

docs/src/content/docs/challenges/typescript/15-overload-fn.md

@@ -1,7 +1,7 @@
 ---
 title: 🟠 Function Overload
 description: Challenge 15 is about creating overload functions
-author: Thomas Laforge
+author: thomas-laforge
 challengeNumber: 15
 command: typescript-overload
 blogLink: https://medium.com/ngconf/function-overloading-in-typescript-8236706b2c05

docs/src/content/docs/es/challenges/angular/1-projection.md

@@ -1,7 +1,7 @@
 ---
 title: 🟢 Proyección
 description: Desafio 1 trata sobre aprender a proyectar elementos del DOM a través de componentes,
-author: Thomas Laforge
+author: thomas-laforge
 challengeNumber: 1
 command: angular-projection
 blogLink: https://medium.com/@thomas.laforge/create-a-highly-customizable-component-cc3a9805e4c5

docs/src/content/docs/es/challenges/angular/39-injection-token.md

@@ -1,7 +1,7 @@
 ---
 title: 🟠 InjectionToken
 description: Desafio de Angular 39 para aprender sobre el poder del InjectionToken
-author: Thomas Laforge
+author: thomas-laforge
 challengeNumber: 39
 command: angular-injection-token
 sidebar: