Design pattern index page

src/_data/sidenav.yml

@@ -443,20 +443,7 @@
     - title: Recommendations
       permalink: /app-architecture/recommendations
     - title: Design patterns
-      permalink: /cookbook/architecture
-      children:
-        - title: Optimistic state
-          permalink: /cookbook/architecture/optimistic-state
-        - title: Command
-          permalink: /cookbook/architecture/command
-        - title: Result
-          permalink: /cookbook/architecture/result
-        - title: "Persistent storage architecture: Key-value data"
-          permalink: /cookbook/architecture/key-value-data
-        - title: "Persistent storage architecture: SQL"
-          permalink: /cookbook/architecture/sql
-        - title: Offline-first
-          permalink: /cookbook/architecture/offline-first
+      permalink: /app-architecture/design-patterns
 
 - title: Platform integration
   permalink: /platform-integration

src/_includes/expansion-list.html

@@ -0,0 +1,58 @@
+{%- comment -%}
+This component expects a list of article or page objects.
+The frontmatter of each article should have the following attributes:
+- title: String - name of the article
+- description: String - 1-2 sentence description of the article
+- content-tags: List<String> - A short list of items that describe what the reader
+    can expect from the content or describe meta information about the article.
+    i.e. data, user-experience OR tutorial, 10 minute read
+- icon-path: String - the path to an image that is shown in next to the title
+{%- endcomment -%}
+
+<div class="expansion-panel-list">
+    {% for item in list -%}
+    {% assign id = base_id | append: '-expansion-' | append: forloop.index -%}
+    {% if item.expanded -%}
+        {% assign expanded = 'true' -%}
+        {% assign show = 'show' -%}
+    {% else -%}
+        {% assign class = 'collapsed' -%}
+        {% assign expanded = 'false' -%}
+        {% assign show = '' -%}
+    {% endif -%}
+    <div class="expansion-panel">
+        <a class="{{class}} collapsible"
+           data-toggle="collapse"
+           href="#{{id}}"
+           role="button"
+           aria-expanded="{{expanded}}"
+           aria-controls="{{id}}">
+            <div class="expansion-panel-title">
+                <div class="expansion-panel-title-leading">
+                    {%- if item.data.icon-path %}
+                        <img src="{{item.data.icon-path}}" alt="An icon showing a generic application." />
+                    {%- else %}
+                        <img src="/assets/images/docs/app-architecture/design-patterns/kv-store-icon.svg" alt="A ivon showing a generic application." />
+                    {%- endif %}
+
+                </div>
+                <div class="expansion-panel-title-content">
+                    <p class="content-title">{{item.data.title}}</p>
+                    <ul class="content-tags">
+                    {% for content-tag in item.data.content-tags -%}
+                        <li class="tag">{{content-tag}}</li>
+                    {% endfor -%}
+                    </ul>
+                    <p class="content-description">{{item.data.description}}</p>
+                </div>
+            </div>
+        </a>
+        <div class="expansion-panel-body collapse {{show}}" id="{{id}}">
+            <p>{{item.content | truncatewords: 100}}  <a href="{{item.url}}">Read full article</a></p>
+
+            <!-- Required to add "margin" that doesn't cause expansion jank -->
+            <div class="separator"></div>
+        </div>
+    </div>
+    {% endfor -%}
+</div>

src/_sass/base/_variables.scss

@@ -21,9 +21,11 @@ $site-color-sub-grey: #8d9399;
 $site-color-nav-links: #6E7274;
 $site-color-body: #212121; // Poor contrast with links
 $site-color-body-light: color.scale($site-color-body, $lightness: 20%);
+$site-color-body-caption: color.scale($site-color-body, $lightness: 30%);
 $site-color-footer: #303c42;
 $site-color-primary: $flutter-color-blue-500;
 $twitter-color: #60CAF6;
+$site-color-panel-background: color.scale($site-color-primary, $lightness: 95%);
 
 // Fonts
 $font-size-base-weight: 400;

src/_sass/components/_expansion-list.scss

@@ -0,0 +1,144 @@
+@use '../base/variables' as *;
+@use '../vendor/bootstrap';
+
+.expansion-panel-list {
+  background: $site-color-panel-background;
+  border: 1px solid rgba(0, 0, 0, 0.125);
+  border-radius: 12px;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+
+  // Add padding on small screens, because images aren't displayed.
+  @include bootstrap.media-breakpoint-down(md) {
+    padding-left: 1rem;
+  }
+
+  // Rotates chevron
+  @mixin collapsible() {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-right: 1rem;
+
+    &::after {
+      // Duplicated since Firefox doesn't support content alt text.
+      content: 'keyboard_arrow_down';
+      content: 'keyboard_arrow_down' / '';
+      font: $site-font-icon;
+      transition: transform .25s ease-in-out;
+    }
+
+    .collapsing {
+      transition-duration: 0.15s;
+    }
+
+    &:not(.collapsed) {
+      &::after {
+        content: 'keyboard_arrow_down' / '';
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  .expansion-panel {
+    > a {
+      // Adds display:flex, align:center, and justify:space-between.
+      @include collapsible();
+    }
+
+    a:hover {
+      text-decoration: none;
+    }
+
+  }
+
+  .expansion-panel-title {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .expansion-panel-title-leading {
+      height: 8rem;
+      width: 8rem;
+      margin: .5rem;
+      padding: 1rem;
+
+      // hide on small screens
+      display: none;
+      @include bootstrap.media-breakpoint-up(md) {
+        display: flex;
+        flex: 1 0 auto;
+      }
+
+      img {
+        margin: auto;
+      }
+    }
+
+    .expansion-panel-title-content {
+      .content-title {
+        color: $site-color-black;
+        font-size: 1rem;
+        font-weight: 500;
+        margin-bottom: .25rem;
+
+        @include bootstrap.media-breakpoint-up(md) {
+          font-size: 1.25rem;
+        }
+      }
+
+      .content-description {
+        color: $site-color-body;
+        margin-bottom: $site-spacer / 2;
+      }
+
+      .content-tags {
+        display: flex;
+        flex-direction: row;
+        list-style: none;
+        padding-left: 0;
+        margin-bottom: .75rem;
+
+        .tag {
+          color: $site-color-body-caption;
+          font-size: .8rem;
+          line-height: 1;
+          margin-bottom: 0;
+
+          &::after {
+            // Duplicated since Firefox doesn't support content alt text.
+            content: ' |\00a0';
+            content: ' |\00a0';
+          }
+        }
+
+        :last-child::after {
+          content: '';
+          content: '';
+        }
+      }
+    }
+  }
+
+  .expansion-panel-body {
+    margin: auto;
+    width: 90%;
+    border-top: .05rem solid rgba(0, 0, 0, 0.125);
+
+    p {
+      color: $site-color-body;
+      margin-top: 2rem;
+    }
+
+
+    .separator {
+      margin-bottom: 3rem;
+    }
+  }
+
+  :last-child {
+    .expansion-panel-body {
+      border-bottom: none;
+     }
+  }
+}

src/_sass/site.scss

@@ -16,6 +16,7 @@
 @use 'components/content';
 @use 'components/cookie-notice';
 @use 'components/d2h';
+@use 'components/expansion-list';
 @use 'components/footer';
 @use 'components/header';
 @use 'components/juicy-button';

src/content/app-architecture/design-patterns.md

@@ -0,0 +1,27 @@
+---
+title: Architecture design patterns
+short-title: Design patterns
+description: >
+  A collection of articles about useful design patterns for Flutter applications.
+prev:
+  title: Recommendations
+  path: /app-architecture/recommendations
+toc: false
+---
+
+If you've already read through the [architecture guide][] page,
+or if you're comfortable with Flutter and the MVVM pattern,
+the following articles are for you.
+
+These articles aren't about high-level app architecture,
+rather they're about solving specific design problems that improve your 
+application's code base regardless of how you've architected your app.
+That said, the articles do assume the MVVM pattern laid out on the 
+previous pages in the code examples.
+
+{% assign recipes = collections.design-patterns -%}
+{% render expansion-list.html, list: recipes, base_id: 'design-patterns' %}
+
+
+
+[architecture guide]: /app-architecture/guide