Massive rework and beautification

assets/scss/_nav.scss

@@ -0,0 +1,218 @@
+//
+// Main navbar
+//
+
+.td-navbar-cover {
+    background: $primary;
+
+    @include media-breakpoint-up(md) {
+        background: transparent !important;
+
+        .nav-link {
+            text-shadow: 1px 1px 2px $dark;
+        }
+
+    }
+
+    &.navbar-bg-onscroll .nav-link {
+        text-shadow: none;
+    }
+}
+
+.navbar-bg-onscroll {
+    background: $primary !important;
+    opacity: inherit;
+}
+
+.td-navbar {
+    background: #212121;
+    min-height: 4rem;
+    margin: 0;
+    z-index: 32;
+
+    @include media-breakpoint-up(md) {
+        position: fixed;
+        top: 0;
+        width: 100%;
+    }
+
+
+    .navbar-brand {
+        text-transform: none;
+        text-align: middle;
+
+        .nav-link {
+            display: inline-block;
+            margin-right: -30px;
+        }
+
+        svg {
+            display: inline-block;
+            margin: 0 10px;
+            height: 30px;
+        }
+    }
+
+    .nav-link {
+        text-transform: none;
+        font-weight: $font-weight-bold;
+    }
+
+    .td-search-input {
+        border: none;
+        color: $navbar-dark-color;
+        @include placeholder {
+            color: $navbar-dark-color;
+        }
+    }
+
+    .dropdown {
+        min-width: 100px;
+    }
+
+    @include media-breakpoint-down(md) {
+        padding-right: .5rem;
+        padding-left: .75rem;
+
+        .td-navbar-nav-scroll {
+            max-width: 100%;
+            height: 2.5rem;
+            margin-top: .25rem;
+            overflow: hidden;
+            font-size: .875rem;
+
+            .nav-link {
+                padding-right: .25rem;
+                padding-left: 0;
+            }
+
+            .navbar-nav {
+                padding-bottom: 2rem;
+                overflow-x: auto;
+                white-space: nowrap;
+                -webkit-overflow-scrolling: touch;
+
+            }
+        }
+    }
+}
+
+// Icons
+#main_navbar {
+    li i {
+    padding-right: 0.5em;
+
+        &:before {
+            display: inline-block;
+            text-align: center;
+            min-width: 1em;
+        }
+    }
+  .alert {
+    background-color: inherit;
+    padding:0;
+    color: $secondary;
+    border: 0;
+    font-weight: inherit;
+
+        &:before {
+            display: inline-block;
+            font-style: normal;
+            font-variant: normal;
+            text-rendering: auto;
+            -webkit-font-smoothing: antialiased;
+            font-family: "Font Awesome 5 Free";
+            font-weight: 900; 
+            content: "\f0d9";
+            padding-left: 0.5em;
+            padding-right: 0.5em;
+        }
+    }  
+}
+
+// Foldable sidebar menu
+nav.foldable-nav {
+
+    &#td-section-nav {
+        position: relative;
+    }
+    
+    &#td-section-nav label {
+        margin-bottom: 0;
+        width: 100%;
+    }
+    
+    .td-sidebar-nav__section, .with-child ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+    
+    .ul-1 > li {
+        padding-left: 1.5em;
+    }
+
+    ul.foldable {
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
+    }
+
+    input:checked ~ ul.foldable {
+        max-height: 100000vmax;
+        transition: max-height 1s ease-in-out;
+    }
+
+    input[type=checkbox] { display: none; }
+
+    .with-child, .without-child { 
+        position: relative; 
+        padding-left: 1.5em;
+    }
+
+    .ul-1 .with-child > label:before {
+        display: inline-block;
+        font-style: normal;
+        font-variant: normal;
+        text-rendering: auto;
+        -webkit-font-smoothing: antialiased;
+        font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0da";
+        position: absolute;
+        left: 0.1em;
+        padding-left: 0.4em;
+        padding-right: 0.4em;
+        font-size: 1em;
+        color: $gray-900;
+        transition: all 0.5s;
+        &:hover{
+        transform: rotate(90deg);
+        }
+    }
+
+    .ul-1 .with-child > input:checked ~ label:before { 
+        color: $primary;
+        transform: rotate(90deg);
+        transition: transform 0.5s; 
+    }
+
+    .with-child ul { margin-top: 0.1em; }
+    
+}    
+
+@media (hover: hover) and (pointer: fine) {
+    
+    nav.foldable-nav {
+
+        .ul-1 .with-child > label:hover:before { 
+            color: $primary;
+            transform: rotate(30deg);
+            transition: transform 0.5s; 
+        }
+
+        .ul-1 .with-child > input:checked ~ label:hover:before { 
+            color: $primary;
+            transform: rotate(60deg) !important;
+            transition: transform 0.5s; 
+        }
+    }
+}

assets/scss/_sidebar-toc.scss

@@ -0,0 +1,65 @@
+//
+// Right side toc
+//
+.td-sidebar-toc {
+    border-left: 1px solid $border-color;
+
+    @supports (position: sticky) {
+        position: sticky;
+        top: 4rem;
+        height: calc(100vh - 4rem);
+        overflow-y: auto;
+    }
+
+    order: 2;
+    padding-top: 0.75rem;
+    padding-bottom: 1.5rem;
+    vertical-align: top;
+
+}
+
+.td-page-meta {
+    a {
+        display: block;
+        font-weight: $font-weight-medium;
+    }
+}
+
+.td-toc {
+    padding-top: 5px;
+    margin-top: 10px;
+    border-top: 1px solid $black;
+
+    a {
+        display: block;
+        font-weight: $font-weight-medium;
+        padding-bottom: .25rem;
+    }
+
+    li {
+        list-style: none;
+        display: block;
+    }
+
+    li li {
+        margin-left: 0.5rem;
+    }
+
+    #TableOfContents {
+        // Hugo's ToC is a mouthful, this can be used to style the top level h2 entries.
+        > ul > li > ul > li > a {}
+
+        a {
+            color: $gray-600;
+
+            &:hover {
+                color: $blue;
+                text-decoration: none;
+            }
+        }
+    }
+
+    ul {
+        padding-left: 0;
+    }
+}

assets/scss/_styles_project.scss

@@ -0,0 +1,2 @@
+.td-page-meta--child { display: none !important; }
+.td-page-meta--project-issue { display: none !important; }

assets/scss/_variables_project.scss

@@ -8,7 +8,7 @@ Add styles or override variables from the theme here.
 
 body {
 	font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif !important;
-	font-weight:300 !important;
+	font-weight:500 !important;
 }
 
 $display1-weight: 500 !default;
@@ -34,7 +34,7 @@ ul, ol {
 }
 
 .navbar-brand {
-  color: #048273 !important
+  color: #008489 !important
 }
 
 .navbar-bg-onscroll {
@@ -119,8 +119,8 @@ input[type="search"]::placeholder {
 .hero {
   padding: 20px 0px 25px 0px;
   color: white;
-  background: rgb(33,39,73);
+  background: rgb(65, 127, 143);
-  background: linear-gradient(130deg, #473782 50%, #2c2c62 70%);
+  background: linear-gradient(130deg, #4487a1 50%, #0188a3 70%);
   margin-left: -15px;
   margin-right: -15px;
   position: relative;
@@ -150,7 +150,7 @@ input[type="search"]::placeholder {
 			width: 60vw;
 			height: 60vw;
 			display: block;
-			background: linear-gradient(90deg, rgba(42,24,102,1) 59%, rgba(44,44,98,1) 70%);
+			background: linear-gradient(90deg, rgb(0, 129, 155) 59%, rgba(0,145,193,1) 70%);
 			position: absolute;
 			left: -20vw;
 			top: -20vw;
@@ -163,7 +163,7 @@ input[type="search"]::placeholder {
 			width: 20vw;
 			height: 100vw;
 			display: block;
-			background: linear-gradient(-74deg, #2c2c62 50%, #3f3479 70%);
+			background: linear-gradient(-74deg, #007e97 50%, #0091c1 70%);
 			position: absolute;
 			left: 55vw;
 			bottom: -40vw;
@@ -190,11 +190,11 @@ input[type="search"]::placeholder {
 // }
 
 .hero-big {
-  background: rgb(112, 85, 255);
+  background: rgb(0,145,193);
   background: linear-gradient(
     140deg,
-    rgba(112, 85, 255, 1) 0%,
+    rgba(0,145,193, 1) 0%,
-    rgba(140, 61, 180, 1) 100%
+    rgba(0,94,113, 1) 100%
   );
   padding: 12px 38px;
   border: none;
@@ -206,14 +206,14 @@ input[type="search"]::placeholder {
   align-items: center;
 
   font-size: 22px;
-  font-weight: 400;
+  font-weight: 600;
   color: white;
   margin: 10px 0px 40px 0px;
 }
 
 .hero-mid {
-  background: rgb(112, 85, 255);
+  background: rgb(0,145,193);
-  background: linear-gradient(140deg,rgba(112, 85, 255, 1) 0%, rgba(140, 61, 180, 1) 100%);
+  background: linear-gradient(140deg,rgba(0,145,193, 1) 0%, rgba(0,94,113, 1) 100%);
   padding: 16px 30px;
   border-radius: 4px;
   border: none;
@@ -222,7 +222,7 @@ input[type="search"]::placeholder {
   justify-content: center;
   align-items: center;
   font-size: 18px;
-  font-weight: 400;
+  font-weight: 600;
   color: white;
   margin: 30px 0px 10px 0px;
 	&:hover {
@@ -247,7 +247,7 @@ input[type="search"]::placeholder {
 		border-bottom: 1px solid transparent;
 		&:hover {
 			color: #fff !important;
-			border-bottom: 1px solid #E361FD;
+			border-bottom: 1px solid #00b1f7;
 		}
 	}
 }
@@ -273,7 +273,7 @@ input[type="search"]::placeholder {
 
 .section-text {
   color: #5a5b75;
-  font-weight: 400;
+  font-weight: 600;
   margin: 12px 0px;
   font-size: 18px;
 }
@@ -441,7 +441,7 @@ input[type="search"]::placeholder {
   text-transform: uppercase;
   border-radius: 5px;
   color: #5a5b75;
-  font-weight: 400;
+  font-weight: 600;
   font-size: 16px;
 }
 
@@ -461,20 +461,20 @@ input[type="search"]::placeholder {
   background: white;
   padding: 12px 22px;
   border-radius: 4px;
-  border: 1px solid #8147d2;
+  border: 1px solid #00b1f7;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   font-size: 18px;
-  font-weight: 400;
+  font-weight: 600;
-  color: #8147d2;
+  color: #00b1f7;
   margin: 30px 0px 10px 0px;
   font-weight: 700;
 
 	&:hover {
-		background: #7055ff;
+		background: #55d7ff;
-    background: linear-gradient(140deg, #7055ff 0%, #8c3db4 100%);
+    background: linear-gradient(140deg, #55d7ff 0%, #3d98b4 100%);
 		color: #fff;
 		box-shadow: 0 3px 7px #b7b7b7;
 	}
@@ -516,7 +516,7 @@ input[type="search"]::placeholder {
 }
 
 .text-highlight {
-  color: #8147d2;
+  color: #00b1f7;
 }
 
 .community-cards .row {

config.toml

@@ -20,7 +20,7 @@ tag = "tags"
 
 [params.taxonomy]
 # set taxonomyCloud = [] to hide taxonomy clouds
-taxonomyCloud = []
+taxonomyCloud = ["tags", "categories"] 
 
 # If used, must have same lang as taxonomyCloud
 taxonomyCloudTitle = ["Tag Cloud", "Categories", "Authors"]
@@ -74,14 +74,14 @@ id = ""
 [languages.en]
 description = "Guidelines for when Developing AL for Microsoft Dynamics 365 Business Central"
 languageName = "English"
-title = "alguidelines.dev"
+title = "alguidelines.dev - Business Central Design Patterns"
 # Weight used for sorting.
 weight = 1
 
 # Everything below this are Site Params
 
 [params]
-copyright = "Copyright © 2020 alguidelines.dev Project"
+copyright = "alguidelines.dev Project"
 github_repo = "https://github.com/microsoft/alguidelines"
 github_project_repo = "https://github.com/microsoft/alguidelines"
 privacy_policy = ""
@@ -200,9 +200,9 @@ url = "/docs/"
 pre = "<i class='fas fa-book'></i>"
 weight = 10
 [[menu.main]]
-name = "Blog"
+name = "Discussions"
-url = "/blog/"
+url = "https://github.com/microsoft/alguidelines/discussions/"
-pre = "<i class='fas fa-blog'></i>"
+pre = "<i class='fas fa-comments'></i>"
 weight = 11
 [[menu.main]]
 name = "GitHub"

content/_index.md

@@ -11,22 +11,18 @@ images: ["images/og-image-fission.png"]
       <div class="col-xl-7 col-lg-6 col-md-6 hero-section-mobile">
         <h1 class="hero-title">
           Guidelines and Patterns<br />
-          for AL for<br />
+          for Development for<br />
           Microsoft Dynamics 365 Business Central
         </h1>
         <img
           class="img-fluid hero-banner show-mobile-big"
-          src="/images/fission-illustration.svg"
+          src="/images/brainstorming-team-meeting_38894532.png"
-          alt-text="Fission Banner"
+          alt-text="Teamwork Graphic"
         />
         <br />
-        <a href="/docs/installation/"
+        <a href="https://www.youtube.com/watch?v=CWpaD9RUa6U"
           ><button class="hero-big">
-            <img
+            <i class="fab fa-youtube"></i>&nbsp;&nbsp; Watch the Launch
-              src="/images/github-icon.png"
-              width="22px"
-              style="margin-right: 12px"
-            />Install Fission
           </button></a
         >
       </div>
@@ -34,8 +30,8 @@ images: ["images/og-image-fission.png"]
   <div class="col-xl-5 col-lg-6 col-md-6 show-desktop-big">
         <img
           class="img-fluid hero-banner"
-          src="/images/fission-illustration.svg"
+          src="/images/brainstorming-team-meeting_38894532.png"
-          alt-text="Fission Banner"
+          alt-text="Teamwork Graphic"
         />
       </div>
     </div>
@@ -47,28 +43,23 @@ images: ["images/og-image-fission.png"]
     <br />
     <div class="row">
       <div class="col-lg-5">
-        <h2 class="section-title">What is Fission?</h2>
+        <h2 class="section-title">Design Patterns?</h2>
         <p class="section-text-bold">
-          Fission is a framework for serverless functions on Kubernetes.
+          A "Design Pattern" is a software design template to solve common development needs.
         </p>
         <p class="section-text">
-          Write short-lived functions in any language, and map them to HTTP
+          This site is community run and Microsoft endorsed.
-          requests (or other event triggers).
         </p>
-        <p class="section-text">
+        <a href="/docs"
-          Deploy functions instantly with one command. There are no containers
+          ><button class="hero-mid">Learn More</button></a
-          to build, and no Docker registries to manage.
-        </p>
-        <a href="/docs/installation/"
-          ><button class="hero-mid">Learn More &amp; Install Fission</button></a
         >
       </div>
 
   <div class="col-lg-7">
         <img
           class="img-fluid show-mobile-margin"
-          src="/images/body-img-1.svg"
+          src="/images/body-img-1.png"
-          alt-text="Fission Banner"
+          alt-text="Design Patterns Banner"
         />
       </div>
     </div>
@@ -88,248 +79,42 @@ images: ["images/og-image-fission.png"]
 
   <div class="col-lg-4">
         <div class="card-shadow">
-          <img src="/images/focus.svg" width="50px" class="img-card" />
+          <h2 class="section-text-bold"><i class="fas fa-retweet"></i></h2>
-          <h4 class="section-text-bold">Focus on Code,<br />Not Plumbing</h4>
+          <h4 class="section-text-bold">Repeatability</h4>
           <p class="section-text">
-            Fission lets developers run code functions easily, while automating
+            By using consistent patterns and best practices, code is far more reusable across diverse projects.
-            the menial work of configuring Kubernetes micro-services concepts
-            behind the scenes. Just write your code functions and Fission will
-            make it run on Kubernetes.
           </p>
         </div>
       </div>
       <div class="col-lg-4">
         <div class="card-shadow">
-          <img src="/images/portable.svg" width="50px" class="img-card" />
+          <h2><i class="fas fa-people-carry"></i></h2>
-          <h4 class="section-text-bold">
+          <h4 class="section-text-bold">Teamwork</h4>
-            Portable: Run your Lambda-like service, anywhere
-          </h4>
           <p class="section-text">
-            Fission is open source under the Apache license. Fission works on a
+            If all code uses design patterns and best practices, it's simpler for new team members to ensure
-            Kubernetes cluster anywhere: on your laptop, in any public cloud, or
+            that code is correct, as well as making it easier to jump into a project.
-            in a private data-center. Write your application with the
-            flexibility of deploying it anywhere.
           </p>
         </div>
       </div>
       <div class="col-lg-4">
         <div class="card-shadow">
-          <img src="/images/extensible.svg" width="50px" class="img-card" />
+          <h2><i class="fas fa-rocket"></i></h2>
-          <h4 class="section-text-bold">
+          <h4 class="section-text-bold">Performance</h4>
-            Extensible and<br />
-            Customizable
-          </h4>
           <p class="section-text">
-            Fission is extensible to any programming language (Python, NodeJS,
+            Many design patterns and best practices are also heavily focused on ensuring compliance with
-            Go, C#, PHP are supported today). It abstracts away containers by
+            the latest performance recommendations to get the most out of every system.
-            default, but you can build your own containers if you need to.
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="container">
-    <div class="row feature-section">
-      <div class="col-lg-12 center-text" style="margin-bottom: 50px">
-        <h2 class="section-title">Features</h2>
-      </div>
-      <div class="col-lg-4">
-        <div class="feature-card">
-          <div class="card-header-custom">
-            <img
-              src="/images/kubernetes-native.svg"
-              width="36px"
-              class="img-card-header"
-            />
-            <h4 class="section-text-bold">Kubernetes Native</h4>
-          </div>
-          <p class="section-text">
-            Fission is open source under the Apache License. It works on a
-            Kubernetes cluster anywhere: in your private datacenter, in a public
-            cloud, or on your laptop.
-          </p>
-        </div>
-      </div>
-
-  <div class="col-lg-4">
-        <div class="feature-card">
-          <div class="card-header-custom">
-            <img
-              src="/images/fast-cold.svg"
-              width="36px"
-              class="img-card-header"
-            />
-            <h4 class="section-text-bold">Fast Cold-Start</h4>
-          </div>
-          <p class="section-text">
-            Fission maintains a configurable pool of containers, so your
-            functions have very low cold-start latencies, typically ~100msec.
-          </p>
-        </div>
-      </div>
-
-  <div class="col-lg-4">
-        <div class="feature-card">
-          <div class="card-header-custom">
-            <img
-              src="/images/declarative.svg"
-              width="36px"
-              class="img-card-header"
-            />
-            <h4 class="section-text-bold">
-              Declarative Application Specifications
-            </h4>
-          </div>
-          <p class="section-text">
-            Declarative specifications give the developer the capability to
-            define a function once and then deploy it anywhere. Fission
-            resources (functions, triggers etc.) can be checked into source
-            control, and the application can be recreated from them.
-          </p>
-        </div>
-      </div>
-
-  <div class="col-lg-4">
-        <div class="feature-card">
-          <div class="card-header-custom">
-            <img
-              src="/images/administration.svg"
-              width="36px"
-              class="img-card-header"
-            />
-            <h4 class="section-text-bold">
-              Administration & Operational Simplicity
-            </h4>
-          </div>
-          <p class="section-text">
-            Fission aims for operational simplicity by incorporating logs
-            directly into the CLI, via integration with Fluentd. It also
-            integrates with Prometheus for metrics tracking and dashboard
-            visibility.
-          </p>
-        </div>
-      </div>
-
-  <div class="col-lg-4">
-        <div class="feature-card">
-          <div class="card-header-custom">
-            <img src="/images/istio.svg" width="36px" class="img-card-header" />
-            <h4 class="section-text-bold">Istio Service-mesh Integration</h4>
-          </div>
-          <p class="section-text">
-            Fission integrates with Istio, which is an open platform to connect,
-            manage and secure micro-services. With Istio, users also get the
-            ability to monitor function usage and trace request latency through
-            dashboards.
-          </p>
-        </div>
-      </div>
-
-  <div class="col-lg-4">
-        <div class="feature-card">
-          <div class="card-header-custom">
-            <img
-              src="/images/language.svg"
-              width="36px"
-              class="img-card-header"
-            />
-            <h4 class="section-text-bold">Wide Language Support</h4>
-          </div>
-          <p class="section-text">
-            Fission is extensible to any programming language of your choice.
-            Python, NodeJS, Go, C#, PHP are supported today, but you can build
-            your own custom containers if you need to.
-          </p>
-        </div>
-      </div>
-
-  <div class="col-lg-4">
-        <div class="feature-card">
-          <div class="card-header-custom">
-            <img
-              src="/images/autoscaling.svg"
-              width="36px"
-              class="img-card-header"
-            />
-            <h4 class="section-text-bold">Function Autoscaling</h4>
-          </div>
-          <p class="section-text">
-            Fission provides autoscaling for functions based on CPU usage. In
-            the future, custom metrics will be also supported for scaling
-            functions. You can set the initial and maximum CPU for a function
-            and target CPU at which autoscaling will be triggered.
           </p>
         </div>
       </div>
     </div>
   </div>
+ 
 </div>
 
 <div class="wide-image show-desktop">
   <img src="/images/wave.webp" class="big-waves" />
 </div>
 
-<div class="body-container push-up">
-  <div class="container">
-    <div class="row">
-      <div class="col-lg-12 center-text" style="margin-bottom: 50px">
-        <h2 class="section-title">Use Cases</h2>
-      </div>
-      <div class="col-lg-10 center-text info-card" style="margin-bottom: 50px">
-        <h3 class="section-text-bold">Build Serverless API Backends</h3>
-        <p class="section-text">
-          Create API backends for web and mobile apps without managing servers.
-          Just write functions, and map them to HTTP routes. Fission takes care
-          of the rest: deployment, routing, scalability, availability. Use
-          Kubernetes service discovery and networking to interoperate with
-          other services, like Redis, Postgres, Etcd etc.
-        </p>
-        <img
-          src="/images/use-case-1.png"
-          class="img-fluid"
-          alt-text="Build Serverless API Backends use case diagram"
-        />
-        <br /><br />
-      </div>
-
-  <div class="col-lg-10 center-text info-card" style="margin-bottom: 50px">
-        <h3 class="section-text-bold">Easily Implement Webhooks</h3>
-        <p class="section-text">
-          Webhooks are a popular way to integrate with third-party services.
-          Slack provides webhooks that are triggered by certain words or
-          messages; GitHub provides webhooks triggered by events in Git
-          repositories. Fission is a great place to implement webhooks: just
-          write the code, map it to a URL, and point the webhook at that URL.
-        </p>
-        <img
-          src="/images/use-case-2.png"
-          class="img-fluid"
-          alt-text="Easily implement webhook use case diagram"
-        />
-        <br /><br />
-      </div>
-
-  <div class="col-lg-10 center-text info-card" style="margin-bottom: 50px">
-        <h3 class="section-text-bold">Write Kubernetes Event Handlers</h3>
-        <p class="section-text">
-          By subscribing to Kubernetes watches, you can write custom automation
-          for your Kubernetes infrastructure. Fission’s integration with
-          Kubernetes watches allows you to monitor resources such as Pods and
-          Services, and execute arbitrary functions when the watched set of
-          resources change.
-        </p>
-        <img
-          src="/images/use-case-3.png"
-          class="img-fluid"
-          alt-text="Write Kubernetes Event Handlers use case diagram"
-        />
-        <br /><br />
-      </div>
-    </div>
-  </div>
-</div>
-
 <div class="body-container whats-new">
   <div class="container">
     <div class="row">
@@ -338,19 +123,33 @@ images: ["images/og-image-fission.png"]
       </div>
       <div class="col-lg-4">
         <div class="card-shadow">
-          <span class="card-badge">FISSION DZONE REFCARD</span>
+          <span class="card-badge">PATTERN</span>
           <h4 class="section-text-bold mt-4">
-            New! Download the <span class="d-lg-block">Fission.io Refcard</span>
+            Event Bridge
           </h4>
           <div class="card-shadow-content">
             <p class="section-text">
-              Get started with Serverless on Kubernetes in 5 minutes! Learn how
+              In the world of interfaces, it is important to preserve (certain) events over multiple implementation of the interface.
-              to set up Fission, its key concepts, how to create and invoke a
-              function, monitor its performance, and more.
             </p>
-            <a
+            <a href="/docs/patterns/event-bridge-pattern/">
-              href="https://platform9.com/wp-content/uploads/2019/03/dzone-refcard-fissionio.pdf"
+              <button class="hero-mid align-self-end">Read Now</button>
-              ><button class="hero-mid align-self-end">Download Now!</button></a
+            </a>
+          </div>
+        </div>
+      </div>
+
+  <div class="col-lg-4">
+        <div class="card-shadow">
+          <span class="card-badge">BEST PRACTICE</span>
+          <h4 class="section-text-bold mt-4">
+            CASE Action on next line
+          </h4>
+          <div class="card-shadow-content">
+            <p class="section-text">
+              A CASE action should start on a line after the possibility.
+            </p>
+            <a href="/docs/bestpractices/case-actions/"
+              ><button class="hero-mid-2 align-self-end">Read Now</button></a
             >
           </div>
         </div>
@@ -358,36 +157,17 @@ images: ["images/og-image-fission.png"]
 
   <div class="col-lg-4">
         <div class="card-shadow">
-          <span class="card-badge">BLOG</span>
+          <span class="card-badge">PATTERN</span>
           <h4 class="section-text-bold mt-4">
-            Fission PostgreSQL Database <span class="d-lg-block">Sample</span>
+            Façade
           </h4>
           <div class="card-shadow-content">
             <p class="section-text">
-              Learn how to use Fission functions with PostgreSQL database and
+             The intent of this pattern is to provide a unified API to a single or a collection of potentially complex subsystems.
-              perform basic operations on it.
-            </p>
-            <a href="/blog/how-to-use-postgresql-database-with-fission-functions/"
-              ><button class="hero-mid-2 align-self-end">Read More</button></a
-            >
-          </div>
-        </div>
-      </div>
-
-  <div class="col-lg-4">
-        <div class="card-shadow">
-          <span class="card-badge">BLOG</span>
-          <h4 class="section-text-bold mt-4">
-            Next.js Application with <span class="d-lg-block">Fission</span>
-          </h4>
-          <div class="card-shadow-content">
-            <p class="section-text">
-             Learn how you can create a Next.js application with Fission.
-             We create a Next.js blog in this tutorial.
             </p>
             <a
-              href="/blog/serverless-next.js-example-blog-with-fission/"
+              href="/docs/patterns/facade-pattern/"
-              ><button class="hero-mid-2 align-self-end">Read More</button></a
+              ><button class="hero-mid-2 align-self-end">Read Now</button></a
             >
           </div>
         </div>
@@ -407,52 +187,38 @@ images: ["images/og-image-fission.png"]
 
   <div class="show-mobile">
           <div class="community-cards">
-            <a href="/slack"
+            <a href="https://discord.gg/4wbfNv3"
               ><div class="card-shadow">
                 <div class="card-header-custom">
-                  <img
+                  <h2 style="padding-right: 0.8rem;"><i class="fab fa-discord"></i></h2>
-                    src="/images/slack.svg"
+                  <h2 class="section-text-bold">Discord</h2>
-                    width="30px"
-                    class="img-card-header"
-                  />
-                  <p class="section-text-bold">Slack</p>
                 </div>
                 <p class="section-text">
-                  Join the Fission community to engage with the fission team,
+                  Join the BC Community to engage with other BC Professionals.
-                  interact with other users, and contribute ideas and feedback.
                 </p>
               </div></a
             >
 
-  <a href="https://github.com/fission"
+  <a href="https://github.com/microsoft/alguidelines"
               ><div class="card-shadow">
                 <div class="card-header-custom">
-                  <img
+                  <h2 style="padding-right: 0.8rem;"><i class="fab fa-github"></i></h2>
-                    src="/images/github.svg"
+                  <h2 class="section-text-bold">GitHub</h2>
-                    width="30px"
-                    class="img-card-header"
-                  />
-                  <p class="section-text-bold">GitHub</p>
                 </div>
                 <p class="section-text">
-                  Dive into the code and learn more about Fission. Submit PRs
+                  Dive into the code. Submit PRs
                   and collaborate with other like-minded contributors.
                 </p>
               </div></a
             >
-            <a href="https://twitter.com/fissionio"
+            <a href="https://twitter.com/search?q=%23bcalhelp"
               ><div class="card-shadow twitter-card" style="margin-left: auto">
                 <div class="card-header-custom">
-                  <img
+                  <h2 style="padding-right: 0.8rem;"><i class="fab fa-twitter"></i></h2>
-                    src="/images/twitter.svg"
+                  <h2 class="section-text-bold">Twitter</h2>
-                    width="36px"
-                    class="img-card-header"
-                  />
-                  <p class="section-text-bold">Twitter</p>
                 </div>
                 <p class="section-text">
-                  Follow us <b class="text-highlight">@fissionio</b> to stay up
+                  Chat about this with the <b class="text-highlight">#bcalhelp</b> hashtag.
-                  to date with Fission news.
                 </p>
               </div></a
             >
@@ -463,58 +229,44 @@ images: ["images/og-image-fission.png"]
   <div class="col-lg-8 community-cards show-desktop">
         <div class="row">
           <div class="col-lg-6">
-            <a href="/slack"
+            <a href="https://discord.gg/4wbfNv3"
               ><div class="card-shadow">
                 <div class="card-header-custom">
-                  <img
+                  <h2 style="padding-right: 0.8rem;"><i class="fab fa-discord"></i></h2>
-                    src="/images/slack.svg"
+                  <h2 class="section-text-bold">Discord</h2>
-                    width="30px"
-                    class="img-card-header"
-                  />
-                  <p class="section-text-bold">Slack</p>
                 </div>
                 <p class="section-text">
-                  Join the Fission community to engage with the fission team,
+                  Join the BC Community to engage with other BC Professionals.
-                  interact with other users, and contribute ideas and feedback.
                 </p>
               </div></a
             >
           </div>
           <div class="col-lg-6">
-            <a href="https://github.com/fission"
+            <a href="https://github.com/microsoft/alguidelines"
               ><div class="card-shadow">
                 <div class="card-header-custom">
-                  <img
+                  <h2 style="padding-right: 0.8rem;"><i class="fab fa-github"></i></h2>
-                    src="/images/github.svg"
+                  <h2 class="section-text-bold">GitHub</h2>
-                    width="30px"
-                    class="img-card-header"
-                  />
-                  <p class="section-text-bold">GitHub</p>
                 </div>
                 <p class="section-text">
-                  Dive into the code and learn more about Fission. Submit PRs
+                  Dive into the code.  Submit PRs
                   and collaborate with other like-minded contributors.
                 </p>
               </div></a
             >
           </div>
           <div class="col-lg-6">
-            <a href="https://twitter.com/fissionio"
+            <a href="https://twitter.com/search?q=%23bcalhelp"
               ><div
                 class="card-shadow twitter-card-desktop"
                 style="margin-left: auto"
               >
                 <div class="card-header-custom">
-                  <img
+                  <h2 style="padding-right: 0.8rem;"><i class="fab fa-twitter"></i></h2>
-                    src="/images/twitter.svg"
+                  <h2 class="section-text-bold">Twitter</h2>
-                    width="36px"
-                    class="img-card-header"
-                  />
-                  <p class="section-text-bold">Twitter</p>
                 </div>
                 <p class="section-text">
-                  Follow us <b class="text-highlight">@fissionio</b> to stay up
+                  Chat about this with the <b class="text-highlight">#bcalhelp</b> hashtag.
-                  to date with Fission news.
                 </p>
               </div></a
             >

content/docs/patterns/event-bridge-pattern/index.md

@@ -1,6 +1,6 @@
 ---
 title: "Event Bridge"
-tags: [""]
+tags: ["Interface"]
 categories: ["Pattern"]
 ---
 

layouts/partials/navbar.html

@@ -0,0 +1,36 @@
+{{ $cover := and (.HasShortcode "blocks/cover") (not .Site.Params.ui.navbar_translucent_over_cover_disable) }}
+<nav class="js-navbar-scroll navbar navbar-expand navbar-dark {{ if $cover}} td-navbar-cover {{ end }}flex-column flex-md-row td-navbar">
+        <a class="navbar-brand" href="{{ .Site.Home.RelPermalink }}">
+		    <img src="/images/alguidelines-bclogo-pattern-white.png" height="32px">
+            <span class="font-weight-bold">{{ .Site.Title }}</span>
+	    </a>
+	<div class="td-navbar-nav-scroll ml-md-auto" id="main_navbar">
+		<ul class="navbar-nav mt-2 mt-lg-0">
+			{{ $p := . }}
+			{{ range .Site.Menus.main }}
+			<li class="nav-item mr-4 mb-2 mb-lg-0">
+				{{ $active := or ($p.IsMenuCurrent "main" .) ($p.HasMenuCurrent "main" .) }}
+				{{ with .Page }}
+				{{ $active = or $active ( $.IsDescendant .)  }}
+				{{ end }}
+				{{ $pre := .Pre }}
+				{{ $post := .Post }}
+				{{ $url := urls.Parse .URL }}
+				{{ $baseurl := urls.Parse $.Site.Params.Baseurl }}
+				<a class="nav-link{{if $active }} active{{end}}" href="{{ with .Page }}{{ .RelPermalink }}{{ else }}{{ .URL | relLangURL }}{{ end }}" {{ if ne $url.Host $baseurl.Host }}target="_blank" {{ end }}>{{ with .Pre}}{{ $pre }}{{ end }}<span{{if $active }} class="active"{{end}}>{{ .Name }}</span>{{ with .Post}}{{ $post }}{{ end }}</a>
+			</li>
+			{{ end }}
+			{{ if  .Site.Params.versions }}
+			<li class="nav-item dropdown mr-4 d-none d-lg-block">
+				{{ partial "navbar-version-selector.html" . }}
+			</li>
+			{{ end }}
+			{{ if  (gt (len .Site.Home.Translations) 0) }}
+			<li class="nav-item dropdown mr-4 d-none d-lg-block">
+				{{ partial "navbar-lang-selector.html" . }}
+			</li>
+			{{ end }}
+		</ul>
+	</div>
+	<div class="navbar-nav d-none d-lg-block">{{ partial "search-input.html" . }}</div>
+</nav>