fix: misc fixes (#62)

* fix: file tree for backend architecture * fix: file tree in barrel files * fix: file tree for testing * fix: formatting * fix: file tree in architecture * fix: update landing page link * fix: url's and layout
VGVentures · Aug 29, 2024 · d4020c4 · d4020c4
1 parent d9de4c7
commit d4020c4
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 71 deletions.
diff --git a/src/components/vgv_hero/vgv-hero-breakout.astro b/src/components/vgv_hero/vgv-hero-breakout.astro
@@ -1,36 +1,53 @@
 ---
 interface Props {
-  // featureImage: ImageMetadata;
+  firstUrl?: string;
+  secondUrl?: string;
 }
 
-// const props = Astro.props;
+const props = Astro.props;
 ---
 
 <div
   class="max-w-screen-xl px-5 mx-auto flex flex-col items-center justify-center dark:text-slate-300 text-slate-600"
 >
   <slot name="heading" />
 
-  <div class="grid md:grid-cols-2 py-10 min-w-[100%]">
-    <div class="grid place-items-center pb-10 md:pb-0 md:order-2">
-      <slot name="first-image" />
-    </div>
+  <a class="block quiet" href={props.firstUrl ?? ""}>
+    <div class="quiet grid md:grid-cols-2 py-10 min-w-[100%]">
+      <div class="grid place-items-center pb-10 md:pb-0 md:order-2 mx-8">
+        <slot name="first-image" />
+      </div>
 
-    <div class="grid place-items-center">
-      <div class="max-w-lg h-[100%]">
-        <slot name="first-content" />
+      <div class="grid place-items-center">
+        <div class="max-w-lg h-[100%]">
+          <slot name="first-content" />
+        </div>
       </div>
     </div>
-  </div>
+  </a>
 
-  <div class="grid md:grid-cols-2 py-10 min-w-[100%]">
-    <div class="grid place-items-center pb-10 md:pb-0 order-1">
-      <slot name="second-image" />
-    </div>
-    <div class="grid place-items-center order-1">
-      <div class="max-w-lg h-[100%]">
-        <slot name="second-content" />
+  <a class="block quiet" href={props.secondUrl ?? ""}>
+    <div class="grid md:grid-cols-2 py-10 min-w-[100%]">
+      <div class="grid place-items-center pb-10 md:pb-0 order-1 mx-8">
+        <slot name="second-image" />
+      </div>
+      <div class="grid place-items-center order-1">
+        <div class="max-w-lg h-[100%]">
+          <slot name="second-content" />
+        </div>
       </div>
     </div>
-  </div>
+  </a>
 </div>
+
+<style>
+  .quiet,
+  .quiet:visited,
+  .quiet:hover,
+  .quiet:active,
+  .quiet:focus,
+  .quiet:focus-visible {
+    text-decoration: inherit;
+    color: inherit;
+  }
+</style>
diff --git a/src/content/docs/architecture/index.mdx b/src/content/docs/architecture/index.mdx
@@ -3,6 +3,7 @@ title: Architecture
 description: Architecture best practices.
 ---
 
+import { FileTree, TabItem, Tabs } from "@astrojs/starlight/components";
 import Diagram from "~/components/diagram.astro";
 import architectureDark from "./diagrams/layered_architecture_dark.png";
 import architectureLight from "./diagrams/layered_architecture_light.png";
@@ -55,48 +56,48 @@ The presentation layer is the layer that includes the Flutter UI dependencies. I
 
 The presentation layer and state management live in the project's `lib` folder. The data and repository layers will live as separate packages within the project's `packages` folder.
 
-Good ✅
-
-```txt
-my_app/
-  |- lib/
-  |   |- login/
-  |   |   |- bloc/
-  |   |   |   - login_bloc.dart
-  |   |   |   - login_event.dart
-  |   |   |   - login_state.dart
-  |   |   |- view/
-  |   |   |   - login_page.dart
-  |   |   |   - view.dart
-  |- packages/
-  |   |- user_repository/
-  |   |   |- lib/
-  |   |   |   |- src/
-  |   |   |   |   |- models/
-  |   |   |   |   |   - models.dart
-  |   |   |   |   |   - user.dart
-  |   |   |   |   |- user_repository.dart
-  |   |   |   - user_repository.dart
-  |   |   |- test/
-  |   |   |   |- models/
-  |   |   |   |   - user_test.dart
-  |   |   |   - user_repository_test.dart
-  |   |- api_client/
-  |   |   |- lib/
-  |   |   |   |- src/
-  |   |   |   |   - api_client.dart
-  |   |   |   - api_client.dart
-  |   |   |- test/
-  |   |   |   - api_client_test.dart
-  |- test/
-  |   |- login/
-  |   |   |- bloc/
-  |   |   |   - login_bloc_test.dart
-  |   |   |   - login_event_test.dart
-  |   |   |   - login_state_test.dart
-  |   |   |- view/
-  |   |   |   - login_page_test.test
-```
+<FileTree>
+
+- my_app/
+  - lib/
+    - login/
+      - bloc/
+        - login_bloc.dart
+        - login_event.dart
+        - login_state.dart
+      - view/
+        - login_page.dart
+        - view.dart
+  - packages/
+    - user_repository/
+      - lib/
+        - src/
+          - models/
+            - models.dart
+            - user.dart
+          - user_repository.dart
+        - user_repository.dart
+      - test/
+        - models/
+          - user_test.dart
+        - user_repository_test.dart
+    - api_client/
+      - lib/
+        - src/
+          - api_client.dart
+        - api_client.dart
+      - test/
+        - api_client_test.dart
+  - test/
+    - login/
+      - bloc/
+        - login_bloc_test.dart
+        - login_event_test.dart
+        - login_state_test.dart
+      - view/
+        - login_page_test.test
+
+</FileTree>
 
 Each layer abstracts the underlying layers' implementation details. Avoid indirect dependencies between layers. For example, the repository layer shouldn't need to know how the data is fetched in the data layer, and the presentation layer shouldn't directly access values from Shared Preferences. In other words, the implementation details should not leak between the layers. Using layered architecture ensures flexibility, reusability, and testability as the codebase grows.
 

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -40,7 +40,7 @@ const props = await generateStarlightPageRouteData({
         actions: [
           {
             text: "Read the Best Practices",
-            link: "/architecture",
+            link: "/very_good_engineering/philosophy/",
             icon: "right-arrow",
             variant: "primary",
           },
@@ -103,7 +103,10 @@ const actions = props.entry.data.hero?.actions ?? [];
     </div>
   </VgvHeroFeature>
 
-  <VgvHeroBreakout>
+  <VgvHeroBreakout
+    firstUrl="https://cli.vgv.dev/"
+    secondUrl="https://dartfrog.vgv.dev/"
+  >
     <Fragment slot="heading">
       <VgvChip color="purple">SHIP FASTER</VgvChip>
       <VgvHeroSectionHeader>
@@ -133,20 +136,23 @@ const actions = props.entry.data.hero?.actions ?? [];
         &#128187; The Command-Line Interface to generate scalable templates and
         use helpful commands.
       </h3>
-      <p class="max-w-[100%] mt-4 text-balance text-center md:text-left">
-        Generate a <a href="https://cli.vgv.dev/docs/templates/core"
+      <p
+        class="max-w-[100%] mt-4 text-balance text-center md:text-left flex flex-row flex-wrap"
+      >
+        Generate a&nbsp;<a href="https://cli.vgv.dev/docs/templates/core"
           >Flutter app</a
-        >, <a href="https://cli.vgv.dev/docs/templates/flame_game"
+        >,&nbsp;<a href="https://cli.vgv.dev/docs/templates/flame_game"
           >Flame game
-        </a>,
+        </a>,&nbsp;
         <a href="https://cli.vgv.dev/docs/templates/flutter_pkg">
           Flutter package
-        </a>,
-        <a href="https://cli.vgv.dev/docs/templates/dart_pkg">Dart package</a>,
+        </a>,&nbsp;
+        <a href="https://cli.vgv.dev/docs/templates/dart_pkg">Dart package</a
+        >,&nbsp;
         <a href="https://cli.vgv.dev/docs/templates/federated_plugin">
           federated plugin
-        </a>, or
-        <a href="https://cli.vgv.dev/docs/templates/dart_cli">Dart CLI</a>
+        </a>, or&nbsp;
+        <a href="https://cli.vgv.dev/docs/templates/dart_cli">Dart CLI</a>&nbsp;
         with one command.
       </p>
       <ul class="pl-4 mt-6 text-center md:text-left">
@@ -192,7 +198,7 @@ const actions = props.entry.data.hero?.actions ?? [];
 
           <span class="text-sm">Hot Reload</span>
         </li>
-        <li class="flex gap-2">
+        <li class="flex gap-2 items-baseline">
           <Icon name="approve-check" color="green" class="size-6" />
 
           <span class="text-sm"