From 19381030cb9b137fd25de5a8d0ee1771a8cfc470 Mon Sep 17 00:00:00 2001
From: Liam Pietralla <liam.pietralla@gmail.com>
Date: Tue, 19 Nov 2024 16:39:20 +1100
Subject: [PATCH] angualar base

---
 .vitepress/config.mts           |  8 +++++
 docs/angular/base-components.md | 64 +++++++++++++++++++++++++++++++++
 docs/angular/index.md           |  3 ++
 docs/index.md                   |  4 +++
 4 files changed, 79 insertions(+)
 create mode 100644 docs/angular/base-components.md
 create mode 100644 docs/angular/index.md

diff --git a/.vitepress/config.mts b/.vitepress/config.mts
index f466c3b..51e3520 100644
--- a/.vitepress/config.mts
+++ b/.vitepress/config.mts
@@ -38,6 +38,14 @@ export default defineConfig({
           { text: 'Controller Testing', link: '/dotnet/controller-testing' },
         ]
       },
+      {
+        text: 'Angular',
+        link: '/angular/',
+        collapsed: true,
+        items: [
+          { text: 'Base Components', link: '/angular/base-components' },
+        ]
+      },
       {
         text: 'Ansible',
         link: '/ansible/',
diff --git a/docs/angular/base-components.md b/docs/angular/base-components.md
new file mode 100644
index 0000000..264bbc4
--- /dev/null
+++ b/docs/angular/base-components.md
@@ -0,0 +1,64 @@
+# Base Components
+
+This is a small collection of handy base angular components. 
+
+## Layout
+
+::: code-group
+
+```ts:line-numbers [vstack.component.ts]  
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-vstack',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="vstack" [ngStyle]="{ gap: gap }">
+      <ng-content />
+    </div>
+  `,
+  styles: `
+    .vstack {
+      display: flex;
+      flex-direction: column;
+    }
+  `
+})
+export class VStackComponent {
+  @Input() gap: string = '5px';
+}
+```
+
+:::
+
+::: code-group
+
+```ts:line-numbers [hstack.component.ts]
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-hstack',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="hstack" [ngStyle]="{ gap: gap }">
+      <ng-content />
+    </div>
+  `,
+  styles: `
+    .hstack {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
+  `
+})
+export class HStackComponent {
+  @Input() gap: string = '5px';
+}
+```
+
+:::
\ No newline at end of file
diff --git a/docs/angular/index.md b/docs/angular/index.md
new file mode 100644
index 0000000..4bc3ea5
--- /dev/null
+++ b/docs/angular/index.md
@@ -0,0 +1,3 @@
+# Angular Snippets and Musings
+
+#### [Base Components](./base-components.md)
\ No newline at end of file
diff --git a/docs/index.md b/docs/index.md
index 6325ea8..b6723cf 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -10,6 +10,10 @@ hero:
       text: .NET
       link: /dotnet/
       
+    - theme: alt
+      text: Angular
+      link: /angular/
+
     - theme: alt
       text: Ansible
       link: /ansible/
-- 
2.45.2