feat(docs): setup all docs

This commit is contained in:
thomas
2023-09-18 22:40:09 +02:00
parent ea7eee2d4a
commit 412e105c5e
45 changed files with 526 additions and 36 deletions

View File

@@ -5,21 +5,331 @@ import { defineConfig } from 'astro/config';
export default defineConfig({
integrations: [
starlight({
title: 'My Docs',
title: 'Angular Challenges',
logo: {
src: './public/angular-challenge.webp',
alt: 'angular challenges logo',
},
favicon: './public/angular-challenge.ico',
social: {
github: 'https://github.com/withastro/starlight',
linkedin: 'https://www.linkedin.com/in/thomas-laforge-2b05a945/',
twitter: 'https://twitter.com/laforge_toma',
},
sidebar: [
{
label: 'Guides',
items: [{ label: 'Example Guide', link: '/guides/example/' }],
autogenerate: { directory: 'guides' },
},
{
label: 'Reference',
label: 'Challenges',
items: [
{
label: 'Example Guide',
items: [{ label: 'Example Guide', link: '/guides/example/' }],
label: 'Angular',
items: [
{
label: 'Projection',
link: '/challenges/angular/projection',
badge: {
text: 'E',
variant: 'success',
},
},
{
label: 'Directive enhancement',
link: '/challenges/angular/directive-enhancement',
badge: {
text: 'M',
variant: 'caution',
},
},
{
label: 'ContextOutlet Typing',
link: '/challenges/angular/context-outlet-typing',
badge: {
text: 'H',
variant: 'danger',
},
},
{
label: 'CRUD',
link: '/challenges/angular/crud',
badge: {
text: 'E',
variant: 'success',
},
},
{
label: 'Permissions',
link: '/challenges/angular/permissions',
badge: {
text: 'M',
variant: 'caution',
},
},
{
label: 'Simple Pure Pipe',
link: '/challenges/angular/pipe-pure',
badge: {
text: 'E',
variant: 'success',
},
},
{
label: 'WrapFn Pipe',
link: '/challenges/angular/pipe-wrapFn',
badge: {
text: 'M',
variant: 'caution',
},
},
{
label: 'Utility Pipe',
link: '/challenges/angular/pipe-utility',
badge: {
text: 'H',
variant: 'danger',
},
},
{
label: 'Change Dectection - scroll',
link: '/challenges/angular/scroll-cd',
badge: {
text: 'M',
variant: 'caution',
},
},
{
label: 'Styling',
link: '/challenges/angular/styling',
badge: {
text: 'M',
variant: 'caution',
},
},
{
label: 'Dependancy Injection',
link: '/challenges/angular/di',
badge: {
text: 'H',
variant: 'danger',
},
},
{
label: 'Anchor Scrolling',
link: '/challenges/angular/anchor-scrolling',
badge: {
text: 'E',
variant: 'success',
},
},
{
label: 'Router Input',
link: '/challenges/angular/router-input',
badge: {
text: 'E',
variant: 'success',
},
},
{
label: 'Interop Rxjs Signal',
link: '/challenges/angular/interop-rxjs-signal',
badge: {
text: 'H',
variant: 'danger',
},
},
{
label: 'Module to Standalone',
link: '/challenges/angular/modaule-to-standalone',
badge: {
text: 'E',
variant: 'success',
},
},
{
label: 'Bug - Change Detection',
link: '/challenges/angular/bug-cd',
badge: {
text: 'M',
variant: 'caution',
},
},
{
label: "Component's Decoupling",
link: '/challenges/angular/decoupling',
badge: {
text: 'M',
variant: 'caution',
},
},
],
},
{
label: 'Angular - Performance',
items: [
{
label: 'Default vs OnPush',
link: '/challenges/angular-performance/default-onpush',
badge: {
text: 'E',
variant: 'success',
},
},
],
},
{
label: 'Testing',
items: [
{
label: 'Router',
link: '/challenges/testing/router',
badge: {
text: 'M',
variant: 'caution',
},
},
{
label: 'Nested Component',
link: '/challenges/testing/nested-comp',
badge: {
text: 'M',
variant: 'caution',
},
},
{
label: 'Input Output',
link: '/challenges/testing/input-output',
badge: {
text: 'M',
variant: 'caution',
},
},
{
label: 'Modal',
link: '/challenges/testing/modal',
badge: {
text: 'M',
variant: 'caution',
},
},
{
label: 'harness',
link: '/challenges/testing/harness',
badge: {
text: 'E',
variant: 'success',
},
},
{
label: 'Harness Creation',
link: '/challenges/testing/harness-creation',
badge: {
text: 'M',
variant: 'caution',
},
},
{
label: 'Checkbox',
link: '/challenges/testing/checkbox',
badge: {
text: 'E',
variant: 'success',
},
},
{
label: 'Reallife Application',
link: '/challenges/testing/real-application',
badge: {
text: 'H',
variant: 'danger',
},
},
],
},
{
label: 'RxJs',
items: [
{
label: 'Bug - Chaining Operators',
link: '/challenges/rxjs/bug-chaining-operator',
badge: {
text: 'M',
variant: 'caution',
},
},
{
label: 'Race Condition',
link: '/challenges/rxjs/race-condition',
badge: {
text: 'E',
variant: 'success',
},
},
],
},
{
label: 'Nx',
items: [
{
label: 'Extending Library Generator',
link: '/challenges/nx/generator-lib-ext',
badge: {
text: 'H',
variant: 'danger',
},
},
{
label: 'Component Generator',
link: '/challenges/nx/generator-comp',
badge: {
text: 'M',
variant: 'caution',
},
},
{
label: 'Custom Eslint Rule',
link: '/challenges/nx/forbid-enum-rule',
badge: {
text: 'E',
variant: 'success',
},
},
],
},
{
label: 'NgRx',
items: [
{
label: 'Effect vs Selector',
link: '/challenges/ngrx/effect-selector',
badge: {
text: 'M',
variant: 'caution',
},
},
{
label: 'Power of Effects',
link: '/challenges/ngrx/power-effect',
badge: {
text: 'H',
variant: 'danger',
},
},
],
},
{
label: 'Typescript',
items: [
{
label: 'Function Overload',
link: '/challenges/typescript/overload-fn',
badge: {
text: 'M',
variant: 'caution',
},
},
],
},
],
},

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill-rule="evenodd" d="M81 36 64 0 47 36l-1 2-9-10a6 6 0 0 0-9 9l10 10h-2L0 64l36 17h2L28 91a6 6 0 1 0 9 9l9-10 1 2 17 36 17-36v-2l9 10a6 6 0 1 0 9-9l-9-9 2-1 36-17-36-17-2-1 9-9a6 6 0 1 0-9-9l-9 10v-2Zm-17 2-2 5c-4 8-11 15-19 19l-5 2 5 2c8 4 15 11 19 19l2 5 2-5c4-8 11-15 19-19l5-2-5-2c-8-4-15-11-19-19l-2-5Z" clip-rule="evenodd"/><path d="M118 19a6 6 0 0 0-9-9l-3 3a6 6 0 1 0 9 9l3-3Zm-96 4c-2 2-6 2-9 0l-3-3a6 6 0 1 1 9-9l3 3c3 2 3 6 0 9Zm0 82c-2-2-6-2-9 0l-3 3a6 6 0 1 0 9 9l3-3c3-2 3-6 0-9Zm96 4a6 6 0 0 1-9 9l-3-3a6 6 0 1 1 9-9l3 3Z"/><style>path{fill:#000}@media (prefers-color-scheme:dark){path{fill:#fff}}</style></svg>

Before

Width:  |  Height:  |  Size: 696 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 96 KiB

View File

@@ -0,0 +1,4 @@
---
title: Submit your answer
description: Guide to submit an answer
---

View File

@@ -0,0 +1,4 @@
---
title: Submit your answer
description: Guide to submit an answer
---

View File

@@ -0,0 +1,4 @@
---
title: Submit your answer
description: Guide to submit an answer
---

View File

@@ -0,0 +1,4 @@
---
title: Submit your answer
description: Guide to submit an answer
---

View File

@@ -0,0 +1,4 @@
---
title: Submit your answer
description: Guide to submit an answer
---

View File

@@ -0,0 +1,4 @@
---
title: Submit your answer
description: Guide to submit an answer
---

View File

@@ -0,0 +1,4 @@
---
title: Submit your answer
description: Guide to submit an answer
---

View File

@@ -0,0 +1,4 @@
---
title: Submit your answer
description: Guide to submit an answer
---

View File

@@ -0,0 +1,4 @@
---
title: Submit your answer
description: Guide to submit an answer
---

View File

@@ -0,0 +1,4 @@
---
title: Submit your answer
description: Guide to submit an answer
---

View File

@@ -0,0 +1,4 @@
---
title: Submit your answer
description: Guide to submit an answer
---

View File

@@ -0,0 +1,4 @@
---
title: Submit your answer
description: Guide to submit an answer
---

View File

@@ -0,0 +1,4 @@
---
title: Submit your answer
description: Guide to submit an answer
---

View File

@@ -0,0 +1,4 @@
---
title: Submit your answer
description: Guide to submit an answer
---

View File

@@ -0,0 +1,52 @@
---
title: Projection
description: angular-challenge-1/projection
---
#1 - <span class="sl-badge success astro-vohx2lp7">Easy</span>
## Statement
Refactor this working exemple of a dasboard containing multiple cards (teachers, students, ...)
Implement the City card.
## Constraints:
- You **must** keep **CardComponent** and **ListItemComponent**
- **NgFor** directive must be declare and stay inside **CardComponent**
- No **NgIf** or **NgSwitch** inside **CardComponent**
- CSS: prefer not to use **::ng-deep**, find a better way
## Submitting your work
1. Fork the project
2. clone it
3. npm ci
4. **nx serve projection**
5. _...work on it_
6. Commit your work
7. Submit a PR with a title beginning with **Answer:1** that I will review and other dev can review.
<a href="https://github.com/tomalaforge/angular-challenges/pulls?q=label%3A1+label%3Aanswer">
<img
src="https://img.shields.io/badge/-Solutions-green"
alt="Projection solution"
/>
</a>
<a href='https://github.com/tomalaforge/angular-challenges/pulls?q=label%3A1+label%3A"answer+author"'>
<img
src="https://img.shields.io/badge/-Author solution-important"
alt="Projection solution author"
/>
</a>
<a
href="https://medium.com/@thomas.laforge/create-a-highly-customizable-component-cc3a9805e4c5"
target="_blank"
rel="noopener noreferrer">
<img
src="https://img.shields.io/badge/-Blog post explanation-blue"
alt="Projection blog article"
/>
</a>
_You can ask any question on_ <a href="https://twitter.com/laforge_toma" target="_blank" rel="noopener noreferrer"><img src="./../../logo/twitter.svg" height=20px alt="twitter"/></a>

View File

@@ -0,0 +1,4 @@
---
title: Submit your answer
description: Guide to submit an answer
---

View File

@@ -0,0 +1,4 @@
---
title: Submit your answer
description: Guide to submit an answer
---

View File

@@ -0,0 +1,4 @@
---
title: Submit your answer
description: Guide to submit an answer
---

View File

@@ -0,0 +1,4 @@
---
title: Submit your answer
description: Guide to submit an answer
---

View File

@@ -0,0 +1,4 @@
---
title: Submit your answer
description: Guide to submit an answer
---

View File

@@ -0,0 +1,4 @@
---
title: Submit your answer
description: Guide to submit an answer
---

View File

@@ -0,0 +1,4 @@
---
title: Submit your answer
description: Guide to submit an answer
---

View File

@@ -0,0 +1,4 @@
---
title: Submit your answer
description: Guide to submit an answer
---

View File

@@ -0,0 +1,4 @@
---
title: Submit your answer
description: Guide to submit an answer
---

View File

@@ -0,0 +1,4 @@
---
title: Submit your answer
description: Guide to submit an answer
---

View File

@@ -0,0 +1,4 @@
---
title: Submit your answer
description: Guide to submit an answer
---

View File

@@ -0,0 +1,4 @@
---
title: Submit your answer
description: Guide to submit an answer
---

View File

@@ -0,0 +1,4 @@
---
title: Submit your answer
description: Guide to submit an answer
---

View File

@@ -0,0 +1,4 @@
---
title: Submit your answer
description: Guide to submit an answer
---

View File

@@ -0,0 +1,4 @@
---
title: Submit your answer
description: Guide to submit an answer
---

View File

@@ -0,0 +1,4 @@
---
title: Submit your answer
description: Guide to submit an answer
---

View File

@@ -0,0 +1,4 @@
---
title: Submit your answer
description: Guide to submit an answer
---

View File

@@ -0,0 +1,4 @@
---
title: Submit your answer
description: Guide to submit an answer
---

View File

@@ -0,0 +1,4 @@
---
title: Submit your answer
description: Guide to submit an answer
---

View File

@@ -1,6 +1,6 @@
---
title: Example Guide
description: A guide in my new Starlight docs site.
title: Getting Started
description: A guide on how to get started with Angular Challenges.
---
Guides lead a user through a specific task they want to accomplish, often with a sequence of steps.

View File

@@ -0,0 +1,4 @@
---
title: Submit your answer
description: Guide to submit an answer
---

View File

@@ -0,0 +1,4 @@
---
title: Contribute
description: Guide to contribute
---

View File

@@ -1,14 +1,14 @@
---
title: Welcome to Starlight
description: Get started building your docs site with Starlight.
title: Welcome to Angular Challenges
description: Get started by resolving those challenges and becoming a better Angular FrontEnd engineer.
template: splash
hero:
tagline: Congrats on setting up a new Starlight project!
image:
file: ../../assets/houston.webp
file: ../../assets/angular-challenge.webp
actions:
- text: Example Guide
link: /guides/example/
- text: Get Started
link: /guides/getting-started/
icon: right-arrow
variant: primary
- text: Read the Starlight docs
@@ -21,16 +21,16 @@ import { Card, CardGrid } from '@astrojs/starlight/components';
## Next steps
<CardGrid stagger>
<Card title="Update content" icon="pencil">
Edit `src/content/docs/index.mdx` to see this page change.
</Card>
<Card title="Add new content" icon="add-document">
Add Markdown or MDX files to `src/content/docs` to create new pages.
</Card>
<Card title="Configure your site" icon="setting">
Edit your `sidebar` and other config in `astro.config.mjs`.
</Card>
<Card title="Read the docs" icon="open-book">
Learn more in [the Starlight Docs](https://starlight.astro.build/).
</Card>
<Card title="Update content" icon="pencil">
Edit `src/content/docs/index.mdx` to see this page change.
</Card>
<Card title="Add new content" icon="add-document">
Add Markdown or MDX files to `src/content/docs` to create new pages.
</Card>
<Card title="Configure your site" icon="setting">
Edit your `sidebar` and other config in `astro.config.mjs`.
</Card>
<Card title="Read the docs" icon="open-book">
Learn more in [the Starlight Docs](https://starlight.astro.build/).
</Card>
</CardGrid>

View File

@@ -1,11 +0,0 @@
---
title: Example Reference
description: A reference page in my new Starlight docs site.
---
Reference pages are ideal for outlining how things work in terse and clear terms.
Less concerned with telling a story or addressing a specific use case, they should give a comprehensive outline of what your documenting.
## Further reading
- Read [about reference](https://diataxis.fr/reference/) in the Diátaxis framework