Merge pull request #114 from microsoft/docsy-theme-redo

Docsy theme redo

.github/workflows/regen-gh-pages.yml

@@ -21,7 +21,23 @@ jobs:
         uses: peaceiris/actions-hugo@v2
         with:
           hugo-version: 'latest'
+          extended: true    # Use extended Hugo
 
+      - name: Setup Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+
+      - name: Cache dependencies
+        uses: actions/cache@v1
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+      - name: Prepare postcss-cli
+        run: npm ci
+        
       - name: Build
         run: hugo --minify
 

.gitignore

@@ -1 +1,7 @@
 public/
+/node_modules/
+/resources/_gen/
+
+## Locking files for when working with local servers
+.hugo_build.lock
+package-lock.json

.gitmodules

@@ -1,3 +1,3 @@
-[submodule "themes/relearn"]
-	path = themes/relearn
-	url = https://github.com/McShelby/hugo-theme-relearn.git
+[submodule "themes/docsy"]
+	path = themes/docsy
+	url = https://github.com/google/docsy.git

README.md

@@ -1,9 +1,29 @@
+# alguidelines.dev Site Source Repo
+
+This is the source for the [alguidelines.dev](https://alguidelines.dev)
+website.
 # Business Central Design Patterns & Best Practices
 
 This site is meant to house some of the community's knowledge about Microsoft Dynamics 365 Business Central AL Development best practices, particularly around hosting Design Patterns.
 
 Please see the [ALGuidelines.dev](https://alguidelines.dev/) site for the full information about this project.
 
+## Repo organization
+
+This is a [hugo](https://gohugo.io) statically-generated site, hosted
+on [GitHub Pages](https://https://pages.github.com).  The site is automatically built by
+GitHub Actions (see regen-gh-pages.yml).
+
+All site content is stored in the `content` directory in markdown format.
+
+```text
+content/en
+├── _index.html  # Landing page
+├── author       # Info about blog authors
+├── blog         # Blog posts
+├── docs         # Documentation pages
+└── search.md
+```
 ## Contributing
 
 This project welcomes contributions and suggestions.  Most contributions require you to agree to a
@@ -18,6 +38,32 @@ This project has adopted the [Microsoft Open Source Code of Conduct](https://ope
 For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or
 contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
 
+### Setup
+
+1. Clone and setup
+```sh
+# Clone all submodules
+git submodule update --init --recursive --depth 1
+# Install NPM dependencies
+npm install
+```
+2. Run Hugo server
+```
+$ hugo server
+Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
+Press Ctrl+C to stop
+```
+You can visit [localhost:1313](http://localhost:1313/) in browser to preview website.
+
+### Making changes
+
+1. Create a new branch
+2. Make your changes
+3. Verify your changes locally with Hugo server
+4. Commit and push your changes to the branch
+5. Raise a PR to main branch
+6. Once PR is merged, your changes would be live on the site
+
 ## Trademarks
 
 This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft 

assets/icons/logo.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255 255"><defs><style>.cls-1{fill:#2ea98e;}</style></defs><title>AL logo_VS_smallest version_v3</title><path class="cls-1" d="M92.71,61.16a12.38,12.38,0,0,0-11.56-8h-.44a12.38,12.38,0,0,0-11.56,8l-52.79,138H46.58l8.06-23h52.58l8.06,23h30.21Zm-29.16,89,17.38-49.58L98.3,150.2Z"/><path class="cls-1" d="M189.7,172.2V54.2h-28V180.92c0,12.21,11.34,18.28,18,18.28h59v-27Z"/></svg>

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

@@ -0,0 +1,720 @@
+/*
+
+Add styles or override variables from the theme here.
+
+*/
+
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');
+
+body {
+	font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif !important;
+	font-weight:500 !important;
+}
+
+$display1-weight: 500 !default;
+$display2-weight: 100 !default;
+
+$primary: #1f2a43 !default;
+$primary-light: lighten($primary, 90%) !default;
+$secondary: #2d70de !default;
+$light: rgb(255, 255, 255) !default;
+$grey: #888 !default;
+$orange: $secondary;
+
+ul, ol {
+  padding-left: 2em;
+}
+
+.navbar-logo {
+  height: 2em;
+}
+
+.nav-shadow {
+  box-shadow: 0 2px 2px -2px rgba(0,0,0,.2);
+}
+
+.navbar-brand {
+  color: #008489 !important
+}
+
+.navbar-bg-onscroll {
+  box-shadow: 0 2px 2px -2px rgba(0,0,0,.2);
+  #docsy-top {
+      display: block !important;
+  }
+}
+
+.control-bar {
+  display: none;
+}
+
+.td-content pre {
+  word-wrap: normal;
+  background-color: #f8f9fa;
+  padding: 1rem;
+  min-width: 0;
+  word-wrap: break-word;
+  background-color: #fff;
+  background-clip: border-box;
+  border: 1px solid rgba(0, 0, 0, 0.125);
+  border-radius: 0.25rem;
+}
+
+.highlight > pre {
+  border: 0px;
+}
+
+.td-content blockquote {
+  border-radius: .15rem;
+}
+
+.notice.info {
+  border-left-color: #6bf;
+  background-color: rgba(102,187,255,.1);
+}
+
+.notice.warning {
+  border-left-color: #fd6;
+  background-color: rgba(255,221,102,.1);
+}
+
+.notice.danger {
+  border-left-color: #f66;
+  background-color: rgba(255,102,102,.1);
+}
+
+.notice > ul {
+  margin-bottom: 0em;
+}
+
+#docsy-search {
+  background: rgba(190, 185, 185, 0.3);
+}
+input[type="search"]::placeholder {
+  color:  #9B9595 !important;
+}
+
+.td-box--secondary p > a:hover {
+  color: #121314 !important;
+}
+
+#community a {
+  color: #121314 !important;
+}
+
+.showcase img {
+  margin: 0 30px;
+}
+
+.td-content > h1 { font-weight: 700; }
+.td-content > h2 { font-weight: 700; }
+.td-content > h3 { font-weight: 700; }
+.td-content > h4 { font-weight: 700; }
+.td-content > h5 { font-weight: 700; }
+.td-content > h6 { font-weight: 700; }
+.td-content > h7 { font-weight: 700; }
+
+// Custom CSS for homepage
+
+.hero {
+  padding: 20px 0px 25px 0px;
+  color: white;
+  background: rgb(65, 127, 143);
+  background: linear-gradient(130deg, #4487a1 50%, #0188a3 70%);
+  margin-left: -15px;
+  margin-right: -15px;
+  position: relative;
+  overflow: hidden;
+
+	.container {
+		position: relative;
+		z-index: 2;
+	}
+}
+
+@media (min-width: 992px) {
+  .hero {
+    padding: 130px 0 100px;
+  }
+
+  .hero-banner {
+    transform: scale(1.4) translateY(10%);
+  }
+
+}
+
+@media (min-width: 1170px) {
+	.hero {
+		&:before {
+			content: '';
+			width: 60vw;
+			height: 60vw;
+			display: block;
+			background: linear-gradient(90deg, rgb(0, 129, 155) 59%, rgba(0,145,193,1) 70%);
+			position: absolute;
+			left: -20vw;
+			top: -20vw;
+			transform: rotate(45deg);
+			border-radius: 10%;
+		}
+
+		&:after {
+			content: '';
+			width: 20vw;
+			height: 100vw;
+			display: block;
+			background: linear-gradient(-74deg, #007e97 50%, #0091c1 70%);
+			position: absolute;
+			left: 55vw;
+			bottom: -40vw;
+			z-index: 1;
+			transform: rotate(45deg);
+		}
+
+		.container {
+			position: relative;
+			z-index: 2;
+		}
+	}
+}
+
+.hero-title {
+  font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif !important;
+  font-weight: 700 !important;
+  // margin-top: 80px;
+  font-size: 56px;
+}
+
+// .hero-banner {
+//   margin-top: 80px;
+// }
+
+.hero-big {
+  background: rgb(0,145,193);
+  background: linear-gradient(
+    140deg,
+    rgba(0,145,193, 1) 0%,
+    rgba(0,94,113, 1) 100%
+  );
+  padding: 12px 38px;
+  border: none;
+  border-radius: 4px;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+
+  font-size: 22px;
+  font-weight: 600;
+  color: white;
+  margin: 10px 0px 40px 0px;
+}
+
+.hero-mid {
+  background: rgb(0,145,193);
+  background: linear-gradient(140deg,rgba(0,145,193, 1) 0%, rgba(0,94,113, 1) 100%);
+  padding: 16px 30px;
+  border-radius: 4px;
+  border: none;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  font-size: 18px;
+  font-weight: 600;
+  color: white;
+  margin: 30px 0px 10px 0px;
+	&:hover {
+		box-shadow: 0 3px 7px #b7b7b7;
+	}
+}
+
+.body-container {
+  margin-left: -15px;
+  margin-right: -15px;
+}
+
+.body-container .row {
+  padding: 30px 0px;
+  margin: 20px auto;
+}
+
+.td-navbar {
+	.nav-link {
+		font-weight: normal !important;
+		color: #f4f4f4 !important;
+		border-bottom: 1px solid transparent;
+		&:hover {
+			color: #fff !important;
+			border-bottom: 1px solid #00b1f7;
+		}
+	}
+}
+
+.td-search-input::placeholder {
+	color: #fff !important;
+}
+
+.section-title {
+  color: #3b3c4c;
+  font-weight: 700;
+  font-size: 46px;
+  margin: 12px 0px;
+}
+
+.section-text-bold {
+  color: #3b3c4c;
+  font-weight: 700;
+  margin: 12px 0px;
+  font-size: 18px;
+	line-height: 1.2;
+}
+
+.section-text {
+  color: #5a5b75;
+  font-weight: 600;
+  margin: 12px 0px;
+  font-size: 18px;
+}
+
+.wide-image {
+  // width: 100%;
+  margin-left: -15px;
+  margin-right: -15px;
+}
+.big-waves {
+  width: 100% !important;
+  position: relative;
+  top: -40px;
+}
+
+.push-up {
+  margin-top: -50px;
+}
+
+.center-text {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.push-up .col-lg-4, .whats-new .col-lg-4,
+.community-cards .card-shadow, .community-cards.show-desktop  .col-lg-6{
+	margin-bottom: 20px;
+}
+
+.card-shadow {
+  padding: 35px 30px 30px 30px;
+  text-align: center;
+  box-shadow: 0 5px 10px 0 rgba(41,26,204,0.12);
+  border: none;
+  border-radius: 6px;
+	height: 100%;
+}
+
+.card-shadow .section-text-bold {
+  font-size: 22px;
+}
+
+.card-shadow img {
+  margin: 2px auto;
+}
+
+.card-shadow .section-text {
+  color: #5a5b75;
+  font-size: 16px;
+	line-height: 1.5;
+}
+
+.feature-card {
+  padding: 20px;
+  border-radius: 0;
+	height: 100%;
+	border: 1px solid #E8E8E8;
+  background-color: #FFFFFF;
+}
+
+.feature-card .card-header-custom .section-text-bold {
+	font-size: 20px;
+	margin: 4px 0 0;
+}
+
+.feature-card p.section-text {
+	font-size: 15px;
+}
+
+.feature-card p:last-child {
+	margin-bottom: 0;
+}
+
+.card-header-custom {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+	min-height: 58px;
+}
+
+.card-header-custom img {
+  margin-right: 16px;
+}
+
+.card-header-custom .section-text-bold {
+  font-size: 18px;
+  color: #3b3c4c;
+}
+
+.card .section-text {
+  font-size: 14px;
+  color: #5a5b75;
+}
+
+.info-card {
+  text-align: center;
+  margin: 0px auto 30px auto;
+}
+
+.info-card .section-text-bold {
+  font-size: 22px;
+}
+
+.info-card .section-text {
+  font-size: 17px;
+}
+
+.info-card img {
+  margin: 10px auto;
+}
+
+.whats-new {
+  background: url("/images/whats-new-bg.webp") no-repeat;
+  background-size: cover;
+	background-position: 0 -150px;
+}
+
+.whats-new .card-shadow {
+	height: 100%;
+}
+
+.whats-new .section-title {
+  color: white;
+  margin-bottom: 5px;
+	margin-top: 4rem
+}
+
+.whats-new .card-shadow {
+  background: white;
+  padding: 25px 15px 15px 15px;
+  min-height: unset;
+  box-shadow: 0 5px 10px 0 rgba(41,26,204,0.12);
+}
+
+.whats-new .card-shadow:hover {
+	box-shadow: 5px 10px 30px 0 rgba(41,26,204,0.12);
+}
+
+.whats-new .card-shadow-content {
+  padding: 0px 12px;
+}
+
+.whats-new .card-shadow  button {
+	padding: 12px 22px !important;
+}
+
+@media (min-width: 992px) {
+	.whats-new .card-shadow  .section-text-bold {
+		min-height: 80px;
+	}
+
+	.whats-new .card-shadow  .section-text {
+		min-height: 122px;
+	}
+}
+
+
+
+
+.card-badge {
+  background: #f2f0fb;
+  padding: 6px 15px;
+  text-transform: uppercase;
+  border-radius: 5px;
+  color: #5a5b75;
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.card-shadow .hero-mid {
+  width: 100%;
+  position: relative;
+  bottom: 0px;
+}
+
+.card-shadow .hero-mid-2 {
+  width: 100%;
+  position: relative;
+  bottom: 0px;
+}
+
+.hero-mid-2 {
+  background: white;
+  padding: 12px 22px;
+  border-radius: 4px;
+  border: 1px solid #00b1f7;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  font-size: 18px;
+  font-weight: 600;
+  color: #00b1f7;
+  margin: 30px 0px 10px 0px;
+  font-weight: 700;
+
+	&:hover {
+		background: #55d7ff;
+    background: linear-gradient(140deg, #55d7ff 0%, #3d98b4 100%);
+		color: #fff;
+		box-shadow: 0 3px 7px #b7b7b7;
+	}
+}
+
+.community-cards {
+  background: url("/images/color-bg.webp") no-repeat center;
+  background-size: contain;
+}
+
+.community-cards .card-shadow {
+  background: white;
+  min-height: 150px;
+  padding: 16px 22px;
+}
+
+.community-cards .card-header-custom {
+  margin-right: auto;
+	display: flex;
+	align-items: center;
+}
+
+.community-cards .card-header-custom p.section-text-bold {
+	margin: 0;
+}
+
+.community-cards .card-shadow img {
+  margin-left: unset;
+}
+
+.community-cards .card-shadow .section-text {
+  text-align: left;
+  font-size: 14px;
+  margin-top: 4px;
+}
+
+.community-cards a:hover .card-shadow {
+	box-shadow: 0 10px 11px rgba(41, 26, 204, .12);
+}
+
+.text-highlight {
+  color: #00b1f7;
+}
+
+.community-cards .row {
+  padding: 30px 0px;
+  margin: 20px 2px;
+}
+
+.twitter-card-desktop {
+  position: relative;
+  left: 150px;
+  top: 10px;
+}
+
+.show-mobile {
+  display: none;
+}
+
+@media (max-width: 1299px) {
+  .hero {
+    background: url("/images/hero-bg.webp") no-repeat;
+    background-size: cover;
+  }
+}
+
+@media (max-width: 575px) {
+  .row {
+    display: inherit;
+  }
+}
+
+@media (min-width: 320px) and (max-width: 990px) {
+  .show-desktop {
+    display: none;
+  }
+
+  .show-mobile {
+    display: block;
+  }
+
+  .hero {
+    background: url("/images/hero-bg.webp") no-repeat;
+    background-size: cover;
+  }
+
+  .hero-section-mobile .hero-title {
+    font-size: 39px;
+  }
+
+  .show-mobile-margin {
+    margin-top: 30px;
+  }
+
+  .card {
+    min-height: unset;
+    padding-bottom: 25px;
+  }
+
+  .card-shadow {
+    min-height: unset;
+    padding-bottom: 25px;
+  }
+
+  .whats-new {
+    background: url("/images/whats-new-bg.webp") no-repeat;
+    background-size: cover;
+  }
+
+  .community-cards {
+    background: unset;
+  }
+}
+
+.feature-section .card {
+  margin-bottom: 26px;
+}
+
+.feature-section .col-lg-4{
+	margin-bottom: 25px;
+}
+
+@media (max-width: 480px) {
+  .body-container .row {
+    padding: 30px 8px;
+  }
+
+  .community-cards {
+    background: unset;
+  }
+}
+
+.show-mobile-big {
+  display: none;
+}
+
+@media (max-width: 767px) {
+  .show-mobile-big {
+    display: block;
+  }
+
+  .show-desktop-big {
+    display: none;
+  }
+
+  .hero-section-mobile {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+  }
+}
+
+.hero-section-mobile .show-mobile-big {
+  margin-top: 10px;
+}
+
+// {{< tabs >}}
+// from https://github.com/alex-shpak/hugo-book
+.hidden {
+  display: none;
+}
+
+.book-tabs {
+margin-top: 1rem;
+margin-bottom: 1rem;
+
+border: 1px solid rgba(0, 0, 0, 0.125);
+border-radius:.15rem;
+
+overflow: hidden;
+
+display: flex;
+flex-wrap: wrap;
+
+label {
+  display: inline-block;
+  padding: 0.5rem 1rem;
+  border-bottom: 1px transparent;
+  cursor: pointer;
+}
+
+.book-tabs-content {
+  order: 999;
+  width: 100%;
+  border-top: 1px solid #f8f9fa;
+  padding: 1rem;
+  display: none;
+}
+
+input[type="radio"]:checked + label {
+  border-bottom: 2px solid #05b;
+}
+input[type="radio"]:checked + label + .book-tabs-content {
+  display: block;
+}
+
+.book-tabs-content > .highlight {
+  margin: 0;
+}
+
+.book-tabs-content > blockquote.notice {
+    padding: 1.2em 0em 1.2em 1em;
+    margin-bottom: 1rem;
+    color: #616161;
+    border-left: 6px solid #2D70DE;
+}
+
+.book-tabs-content > blockquote.notice.notice.info { border-left-color: #6bf; }
+.book-tabs-content > blockquote.notice.notice.warning { border-left-color: #fd6; }
+.book-tabs-content > blockquote.notice.notice.danger { border-left-color: #f66; }
+}
+
+a {
+  text-decoration: inherit;
+}
+
+.post-img {
+  display: block;
+
+   > p {
+      text-align: center;
+      font-style: italic;
+  }
+}
+
+
+.DocSearch-Hit-title mark {
+	padding: 0;
+}
+
+.DocSearch-Hit-icon svg {
+	vertical-align: top;
+}
+
+.DocSearch-Hits mark {
+	padding: 0;
+}
+
+.DocSearch-Hit-content-wrapper {
+	overflow-y: hidden;
+}

config.toml

@@ -1,36 +1,216 @@
 baseURL = 'https://alguidelines.dev/'
+enableRobotsTXT = true
 languageCode = 'en-us'
 title = 'AL Guidelines'
 
-# Change the default theme to be use when building the site with Hugo
-theme = "relearn"
+# Hugo allows theme composition (and inheritance). The precedence is from left to right.
+theme = ["docsy"]
 
-# For search functionality
-[outputs]
-home = [ "HTML", "RSS", "JSON"]
+# Will give values to .Lastmod etc.
+enableGitInfo = true
+
+# Comment out to disable taxonomies in Docsy
+# disableKinds = ["taxonomy", "taxonomyTerm"]
+
+# You can add your own taxonomies
+[taxonomies]
+author = "author"
+category = "categories"
+tag = "tags"
+
+[params.taxonomy]
+# set taxonomyCloud = [] to hide taxonomy clouds
+taxonomyCloud = ["tags", "categories"] 
+
+# If used, must have same lang as taxonomyCloud
+taxonomyCloudTitle = ["Tag Cloud", "Categories", "Authors"]
+
+# set taxonomyPageHeader = [] to hide taxonomies on the page headers
+taxonomyPageHeader = ["tags", "categories", "authors"]
+
+# Highlighting config
+pygmentsCodeFences = true
+pygmentsUseClasses = false
+# Use the new Chroma Go highlighter in Hugo.
+pygmentsUseClassic = false
+#pygmentsOptions = "linenos=table"
+# See https://help.farbox.com/pygments.html
+pygmentsStyle = "tango"
+
+# First one is picked as the Twitter card image if not set on page.
+#images = ["images/project-illustration.png"]
+
+# Configure how URLs look like per section.
+[permalinks]
+blog = "/blog/:slug/"
+
+[markup.goldmark.renderer]
+unsafe = true
+
+[markup.highlight]
+style = "tango"
+
+## Configuration for BlackFriday markdown parser: https://github.com/russross/blackfriday
+[blackfriday]
+angledQuotes = false
+hrefTargetBlank = false
+latexDashes = true
+plainIDAnchors = true
+
+# Image processing configuration.
+[imaging]
+anchor = "smart"
+quality = 75
+resampleFilter = "CatmullRom"
+
+[services]
+[services.googleAnalytics]
+# Comment out the next line to disable GA tracking. Also disables the feature described in [params.ui.feedback].
+id = ""
+
+# Language configuration
+
+[languages]
+[languages.en]
+description = "Guidelines for when Developing AL for Microsoft Dynamics 365 Business Central"
+languageName = "English"
+title = "alguidelines.dev - Business Central Design Patterns"
+# Weight used for sorting.
+weight = 1
+
+# Everything below this are Site Params
 
 [params]
-  # Change default color scheme with a variant one. Can be empty, "red", "blue", "green".
-  themeVariant = "blue"
-  # If set to false, a Home button will appear below the search bar on the menu.
-  # It is redirecting to the landing page of the current language if specified. (Default is "/")
-  disableLandingPageButton = true
-  # Enable GitHub editing
-  editURL = "https://github.com/microsoft/alguidelines/edit/main/content/"
-  # This controls whether submenus will be expanded (true), or collapsed (false) in the
-  # menu; if no setting is given, the first menu level is set to false, all others to true;
-  # this can be overridden in the pages frontmatter
-  alwaysopen = false
+copyright = "alguidelines.dev Project"
+github_repo = "https://github.com/microsoft/alguidelines"
+github_project_repo = "https://github.com/microsoft/alguidelines"
+privacy_policy = ""
 
-# Additional menu (left sidebar) area links
-[[menu.shortcuts]]
-name = "<i class='fab fa-github'></i> GitHub repo"
-identifier = "gh"
+# Google Custom Search Engine ID. Remove or comment out to disable search.
+# gcs_engine_id = "c632b781ffe71b197"
+#algolia_docsearch = true
+
+# current release branch - could be rc
+release_branch = "master"
+# the main version. Never is rc.
+release_version = "v1.15.1"
+
+slackurl = ""
+
+installurl = ''
+learnmoreurl = ''
+#twitterurl = ''
+
+notoc = true
+
+# First one is picked as the Twitter card image if not set on page.
+images = ["images/og-image-fission.png"]
+
+[params.social]
+#github = ''
+#slackurl = ""
+#twitter = ''
+
+[[params.whatsnew]]
+badge = 'FISSION DZONE REFCARD'
+body = 'Get started with Serverless on Kubernetes in 5 minutes! Learn how to set up Fission, its key concepts, how to create and invoke a function, monitor its performance, and more.'
+heading = 'New! Download the Fission.io Refcard'
+[params.whatsnew.button]
+hero_class = 'mid'
+text = 'Download Now!'
+url = 'https://platform9.com/wp-content/uploads/2019/03/dzone-refcard-fissionio.pdf'
+
+[[params.whatsnew]]
+badge = 'BLOG'
+body = 'Learn how to use Fission functions with PostgreSQL database.'
+heading = 'Fission Functions with PostgreSQL Sample'
+[params.whatsnew.button]
+hero_class = 'mid-2'
+text = 'Read More'
+url = '/blog/how-to-use-postgresql-database-with-fission-functions/'
+
+[[params.whatsnew]]
+badge = 'BLOG'
+body = 'Tutorial to deploy Next.js applications with Fission.'
+heading = 'Next.js Application with Fission'
+[params.whatsnew.button]
+hero_class = 'mid-2'
+text = 'REad More'
+url = '/blog/serverless-next.js-example-blog-with-fission/'
+
+# User interface configuration
+[params.ui]
+#  Set to true to disable breadcrumb navigation.
+breadcrumb_disable = false
+# Set to true to disable the About link in the site footer
+footer_about_disable = false
+# Set to false if you don't want to display a logo (/assets/icons/logo.svg) in the top navbar
+navbar_logo = true
+# Set to true if you don't want the top navbar to be translucent when over a `block/cover`, like on the homepage.
+navbar_translucent_over_cover_disable = false
+# Enable to show the side bar menu in its compact state.
+sidebar_menu_compact = true
+# Set to true to hide the sidebar search box (the top nav search box will still be displayed if search is enabled)
+sidebar_search_disable = true
+
+# Adds a H2 section titled "Feedback" to the bottom of each doc. The responses are sent to Google Analytics as events.
+# This feature depends on [services.googleAnalytics] and will be disabled if "services.googleAnalytics.id" is not set.
+# If you want this feature, but occasionally need to remove the "Feedback" section from a single page,
+# add "hide_feedback: true" to the page's front matter.
+[params.ui.feedback]
+enable = true
+# The responses that the user sees after clicking "yes" (the page was helpful) or "no" (the page was not helpful).
+no = 'Sorry to hear that. Please <a href="https://github.com/microsoft/alguidelines/issues/new">tell us how we can improve</a>.'
+yes = 'Glad to hear it! Please <a href="https://github.com/microsoft/alhuidelines/issues/new">tell us how we can improve</a>.'
+
+# Adds a reading time to the top of each doc.
+# If you want this feature, but occasionally need to remove the Reading time from a single page, 
+# add "hide_readingtime: true" to the page's front matter
+[params.ui.readingtime]
+enable = false
+
+[[params.links.user]]
+desc = "Development takes place here!"
+icon = "fab fa-github"
+name = "GitHub"
 url = "https://github.com/microsoft/alguidelines"
-weight = 10
-
-[[menu.shortcuts]]
-name = "<i class='fab fa-discord'></i> BC Discord"
-identifier = "ds"
+[params.links]
+[[params.links.user]]
+desc = "Follow us on Twitter to get the latest news!"
+icon = "fab fa-twitter"
+name = "Twitter"
+url = "https://twitter.com/search?q=%23bcalhelp"
+[[params.links.user]]
+desc = "Chat with other project users in #users"
+icon = "fab fa-discord"
+name = "Discord"
 url = "https://discord.gg/4wbfNv3"
+# End user relevant links. These will show up on left side of footer and in the community page if you have one.
+
+
+[sitemap]
+changefreq = "monthly"
+filename = "sitemap.xml"
+priority = 0.5
+
+[menu]
+[[menu.main]]
+name = "Docs"
+url = "/docs/"
+pre = "<i class='fas fa-book'></i>"
 weight = 10
+[[menu.main]]
+name = "Discussions"
+url = "https://github.com/microsoft/alguidelines/discussions/"
+pre = "<i class='fas fa-comments'></i>"
+weight = 11
+[[menu.main]]
+name = "GitHub"
+pre = "<i class='fab fa-github'></i>"
+url = "https://github.com/microsoft/alguidelines"
+weight = 13
+[[menu.main]]
+name = "Discord"
+pre = "<i class='fab fa-discord'></i>"
+url = "https://discord.gg/4wbfNv3"
+weight = 14

content/BCBestPractices/Performance/_index.md

@@ -1,9 +0,0 @@
-+++
-title = "Performance"
-weight = 980
-+++
-## AL Coding Guidelines
-
-## **Performance**
-
-Some guidelines are simply better for performance considerations rather than readability or anything else.  In this section, let's look into some..

content/BCBestPractices/Readability/_index.md

@@ -1,11 +0,0 @@
-+++
-title = "Readability"
-weight = 980
-+++
-## AL Coding Guidelines
-
-## **Readability**
-
-Generally, all readability rules are Microsoft style choices only. You can use them to keep consistency with the existing code.
-
-Find the AL guidelines by expanding the menu in the left.

content/BCBestPractices/_index.md

@@ -1,15 +0,0 @@
-+++
-chapter = true
-pre = "<b><i class='fas fa-medal'></i> </b>"
-title = "BC Dev. Best Practices"
-weight = 15
-+++
-
-# Business Central Best Practices
-
-## Coming soon!
-
-This section will be cover things that aren't as simple as Design Patterns, but will help make sure your development is:
-- high-performance
-- complies with good designs
-- has high maintainability

content/BCPatterns/_index.md

@@ -1,12 +0,0 @@
-+++
-chapter = true
-pre = "<b><i class='fas fa-clone'></i> </b>"
-title = "BC Patterns"
-weight = 10
-+++
-
-# Business Central Design Patterns
-
-## Coming soon!
-
-This section will be all about the Design Patterns for BC and AL.

content/NAVPatterns/1-patterns/_index.md

@@ -1,9 +0,0 @@
-+++
-chapter = true
-title = "1. Patterns"
-weight = 110
-+++
-## Browse design patterns by tags
-
-_Originally, this page was categorized set of links to subpages, but that is not necessary now with the menu system to the left._
-

content/_index.md

@@ -1,39 +1,278 @@
-+++
-title = "Home"
-+++
+---
+title: "ALGuidelines.dev"
+linkTitle: "ALGuidelines.dev"
+description: "Design Patterns and Guidelines for AL development for Microsoft Dynamics 365 Business Central"
+images: ["images/og-image-fission.png"]
+---
 
-## Business Central Design Patterns & Best Practices
+<div class="hero">
+  <div class="container">
+    <div class="row justify-content-center align-items-center">
+      <div class="col-xl-7 col-lg-6 col-md-6 hero-section-mobile">
+        <h1 class="hero-title">
+          Guidelines and Patterns<br />
+          for Development for<br />
+          Microsoft Dynamics 365 Business Central
+        </h1>
+        <img
+          class="img-fluid hero-banner show-mobile-big"
+          src="/images/brainstorming-team-meeting_38894532.png"
+          alt-text="Teamwork Graphic"
+        />
+        <br />
+        <a href="https://www.youtube.com/watch?v=CWpaD9RUa6U"
+          ><button class="hero-big">
+            <i class="fab fa-youtube"></i>&nbsp;&nbsp; Watch the Launch
+          </button></a
+        >
+      </div>
 
-This site is meant to house some of the community's knowledge about Microsoft Dynamics 365 Business Central AL Development best practices, particularly around hosting Design Patterns.
+  <div class="col-xl-5 col-lg-6 col-md-6 show-desktop-big">
+        <img
+          class="img-fluid hero-banner"
+          src="/images/brainstorming-team-meeting_38894532.png"
+          alt-text="Teamwork Graphic"
+        />
+      </div>
+    </div>
+  </div>
+</div>
 
-### What are Design Patterns?
+<div class="body-container">
+  <div class="container">
+    <br />
+    <div class="row">
+      <div class="col-lg-5">
+        <h2 class="section-title">Design Patterns?</h2>
+        <p class="section-text-bold">
+          A "Design Pattern" is a software design template to solve common development needs.
+        </p>
+        <p class="section-text">
+          This site is community run and Microsoft endorsed.
+        </p>
+        <a href="/docs"
+          ><button class="hero-mid">Learn More</button></a
+        >
+      </div>
 
-To quote the original NAV Team blog post about the NAV Design Patterns:
+  <div class="col-lg-7">
+        <img
+          class="img-fluid show-mobile-margin"
+          src="/images/body-img-1.png"
+          alt-text="Design Patterns Banner"
+        />
+      </div>
+    </div>
+  </div>
+</div>
 
-> A team of people interested in NAV application design has come together to work on naming and surfacing design solutions to common NAV business needs. When those solutions are generic enough to be applied in various places of the NAV application, with slight variations on implementation but mainly respecting the same base concepts, we can describe them as NAV design patterns.
+<div class="wide-image show-desktop">
+  <img src="/images/wave.webp" class="big-waves" />
+</div>
 
-A design pattern is a repeatable template of how to solve a common development challenge.
+<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">Benefits</h2>
+      </div>
 
-### What are Development Best Practices?
+  <div class="col-lg-4">
+        <div class="card-shadow">
+          <h2 class="section-text-bold"><i class="fas fa-retweet"></i></h2>
+          <h4 class="section-text-bold">Repeatability</h4>
+          <p class="section-text">
+            By using consistent patterns and best practices, code is far more reusable across diverse projects.
+          </p>
+        </div>
+      </div>
+      <div class="col-lg-4">
+        <div class="card-shadow">
+          <h2><i class="fas fa-people-carry"></i></h2>
+          <h4 class="section-text-bold">Teamwork</h4>
+          <p class="section-text">
+            If all code uses design patterns and best practices, it's simpler for new team members to ensure
+            that code is correct, as well as making it easier to jump into a project.
+          </p>
+        </div>
+      </div>
+      <div class="col-lg-4">
+        <div class="card-shadow">
+          <h2><i class="fas fa-rocket"></i></h2>
+          <h4 class="section-text-bold">Performance</h4>
+          <p class="section-text">
+            Many design patterns and best practices are also heavily focused on ensuring compliance with
+            the latest performance recommendations to get the most out of every system.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+ 
+</div>
 
-(more text coming soon)
+<div class="wide-image show-desktop">
+  <img src="/images/wave.webp" class="big-waves" />
+</div>
 
-### History of "NAV Design Patterns"
+<div class="body-container whats-new">
+  <div class="container">
+    <div class="row">
+      <div class="col-lg-12 center-text" style="margin-bottom: 40px">
+        <h2 class="section-title">What's New</h2>
+      </div>
+      <div class="col-lg-4">
+        <div class="card-shadow">
+          <span class="card-badge">PATTERN</span>
+          <h4 class="section-text-bold mt-4">
+            Event Bridge
+          </h4>
+          <div class="card-shadow-content">
+            <p class="section-text">
+              In the world of interfaces, it is important to preserve (certain) events over multiple implementation of the interface.
+            </p>
+            <a href="/docs/patterns/event-bridge-pattern/">
+              <button class="hero-mid align-self-end">Read Now</button>
+            </a>
+          </div>
+        </div>
+      </div>
 
-In 2013, Microsoft NAV Dev Team and prominent members of the community collaborated on a Community and Microsoft collection of commonly needed / used Design Patterns.
+  <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>
+      </div>
 
-For some history on this, waldo's posts [Code is Poetry](https://www.waldo.be/2013/06/14/code-is-poetry/) and [Design is Philosophy](https://www.waldo.be/2013/08/28/design-is-philosophy-2/) are a great read.
+  <div class="col-lg-4">
+        <div class="card-shadow">
+          <span class="card-badge">PATTERN</span>
+          <h4 class="section-text-bold mt-4">
+            Façade
+          </h4>
+          <div class="card-shadow-content">
+            <p class="section-text">
+             The intent of this pattern is to provide a unified API to a single or a collection of potentially complex subsystems.
+            </p>
+            <a
+              href="/docs/patterns/facade-pattern/"
+              ><button class="hero-mid-2 align-self-end">Read Now</button></a
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 
+<div class="body-container">
+  <div class="container">
+    <div class="row">
+      <div class="col-lg-4">
+        <br />
+        <br />
+        <h1 class="section-title">Join the Community</h1>
+        <br />
 
-#### Behind This Project
+  <div class="show-mobile">
+          <div class="community-cards">
+            <a href="https://discord.gg/4wbfNv3"
+              ><div class="card-shadow">
+                <div class="card-header-custom">
+                  <h2 style="padding-right: 0.8rem;"><i class="fab fa-discord"></i></h2>
+                  <h2 class="section-text-bold">Discord</h2>
+                </div>
+                <p class="section-text">
+                  Join the BC Community to engage with other BC Professionals.
+                </p>
+              </div></a
+            >
 
-This project is a Microsoft Business Central Community initiative with support from the Microsoft Business Central team.  The founding community members are
-* waldo ([Twitter](https://twitter.com/waldo1001), [Blog](https://www.waldo.be), [GitHub](https://github.com/waldo1001))
-* Arend-Jan Kauffmann ([Twitter](https://twitter.com/ajkauffmann), [Blog](https://www.kauffmann.nl/), [GitHub](https://github.com/ajkauffmann))
-* Henrik Helgesen ([Twitter](https://twitter.com/TheDoubleH), [Blog](https://thedoubleh.dev/), [GitHub](https://github.com/thedoubleh))
-* Jeremy Vyska ([Twitter](https://twitter.com/JeremyVyska),[Blog](https://jeremy.vyska.info/articles), [GitHub](https://github.com/JeremyVyska))
+  <a href="https://github.com/microsoft/alguidelines"
+              ><div class="card-shadow">
+                <div class="card-header-custom">
+                  <h2 style="padding-right: 0.8rem;"><i class="fab fa-github"></i></h2>
+                  <h2 class="section-text-bold">GitHub</h2>
+                </div>
+                <p class="section-text">
+                  Dive into the code. Submit PRs
+                  and collaborate with other like-minded contributors.
+                </p>
+              </div></a
+            >
+            <a href="https://twitter.com/search?q=%23bcalhelp"
+              ><div class="card-shadow twitter-card" style="margin-left: auto">
+                <div class="card-header-custom">
+                  <h2 style="padding-right: 0.8rem;"><i class="fab fa-twitter"></i></h2>
+                  <h2 class="section-text-bold">Twitter</h2>
+                </div>
+                <p class="section-text">
+                  Chat about this with the <b class="text-highlight">#bcalhelp</b> hashtag.
+                </p>
+              </div></a
+            >
+          </div>
+        </div>
+      </div>
 
-#### Contributing
-
-To find out more about contributing, read up here:
-[Contributing](/contributing/)
+  <div class="col-lg-8 community-cards show-desktop">
+        <div class="row">
+          <div class="col-lg-6">
+            <a href="https://discord.gg/4wbfNv3"
+              ><div class="card-shadow">
+                <div class="card-header-custom">
+                  <h2 style="padding-right: 0.8rem;"><i class="fab fa-discord"></i></h2>
+                  <h2 class="section-text-bold">Discord</h2>
+                </div>
+                <p class="section-text">
+                  Join the BC Community to engage with other BC Professionals.
+                </p>
+              </div></a
+            >
+          </div>
+          <div class="col-lg-6">
+            <a href="https://github.com/microsoft/alguidelines"
+              ><div class="card-shadow">
+                <div class="card-header-custom">
+                  <h2 style="padding-right: 0.8rem;"><i class="fab fa-github"></i></h2>
+                  <h2 class="section-text-bold">GitHub</h2>
+                </div>
+                <p class="section-text">
+                  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/search?q=%23bcalhelp"
+              ><div
+                class="card-shadow twitter-card-desktop"
+                style="margin-left: auto"
+              >
+                <div class="card-header-custom">
+                  <h2 style="padding-right: 0.8rem;"><i class="fab fa-twitter"></i></h2>
+                  <h2 class="section-text-bold">Twitter</h2>
+                </div>
+                <p class="section-text">
+                  Chat about this with the <b class="text-highlight">#bcalhelp</b> hashtag.
+                </p>
+              </div></a
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

content/blog/_index.md

@@ -0,0 +1,5 @@
+---
+title: "AL Guidelines Blog"
+linkTitle: "Blog"
+type: "blog"
+---

content/docs/BestPractices/DeleteAll/index.md

@@ -1,7 +1,8 @@
-+++
-title = "DeleteAll"
-weight = 1180
-+++
+---
+title: "DeleteAll"
+tags: ["Performance"]
+categories: ["Best Practice"]
+---
 
 <_Created by waldo, Described by waldo_\>
 

content/docs/BestPractices/SubscriberCodeunits/index.md

@@ -1,9 +1,10 @@
-+++
-title = "Subscriber Codeunits"
-weight = 1180
-+++
+---
+title: "Subscriber Codeunits"
+tags: ["Performance"]
+categories: ["Best Practice"]
+---
 
-<_Created by waldo, Described by waldo_\>
+_Created by waldo, Described by waldo_
 
 ## Description
 

content/docs/BestPractices/_index.md

@@ -0,0 +1,21 @@
+---
+title: "Best Practices"
+weight: 3
+description: >
+  AL Code Best Practices
+---
+
+# Business Central Best Practices
+
+This section will be cover things that aren't as simple as Design Patterns, but will help make sure your development is:
+- high-performance
+- complies with good designs
+- has high maintainability
+
+## Readability
+
+Generally, all readability rules are Microsoft style choices only. You can use them to keep consistency with the existing code.
+
+## Performance
+
+Some guidelines are simply better for performance considerations rather than readability or anything else.  In this section, let's look into some..

content/docs/BestPractices/begin-as-an-afterword/index.md

@@ -1,9 +1,10 @@
-+++
-title = "begin as an 'After Word'"
-weight = 230
-+++
+---
+title: "begin as an afterword"
+tags: ["Readability"]
+categories: ["Best Practice"]
+---
 
-<_Created by Microsoft, Described by waldo_\>
+_Created by Microsoft, Described by waldo_
 
 ## Description
 

content/docs/BestPractices/begin-end/index.md

@@ -1,9 +1,10 @@
-+++
-title = "Begin-End - Compound Only"
-weight = 240
-+++
+---
+title: "Begin-End - Compound Only"
+tags: ["Readability"]
+categories: ["Best Practice"]
+---
 
-<_Created by Microsoft, Described by waldo_\>
+_Created by Microsoft, Described by waldo_
 
 Only use begin..end to enclose [compound statements](https://docs.microsoft.com/en-us/cpp/c-language/compound-statement-c?view=msvc-170#:~:text=A%20compound%20statement%20%28also%20called%20a%20%22block%22%29%20typically,appear%20at%20the%20head%20of%20a%20compound%20statement.).
 

content/docs/BestPractices/binary-operator-line-start/index.md

@@ -1,9 +1,10 @@
-+++
-title = "Binary Operator to Start Line"
-weight = 250
-+++
+---
+title: "Binary Operator to Start Line"
+tags: ["Readability"]
+categories: ["Best Practice"]
+---
 
-<_Created by Microsoft, Described by waldo_\>
+_Created by Microsoft, Described by waldo_
 
 ## Description
 

content/docs/BestPractices/case-actions/index.md

@@ -1,9 +1,10 @@
-+++
-title = "CASE Action on next line"
-weight = 310
-+++
+---
+title: "CASE Action on next line"
+tags: ["Readability"]
+categories: ["Best Practice"]
+---
 
-<_Created by Microsoft, Described by waldo_\>
+_Created by Microsoft, Described by waldo_
 
 ## Description
 

content/docs/BestPractices/comments-spacing/index.md

@@ -1,9 +1,10 @@
-+++
-title = "Comment Spacing"
-weight = 360
-+++
+---
+title: "Comment Spacing"
+tags: ["Readability"]
+categories: ["Best Practice"]
+---
 
-<_Created by Microsoft, Described by waldo_\>
+_Created by Microsoft, Described by waldo_
 
 ## Description
 Always start comments with // followed by one space character.

content/docs/BestPractices/end-else-pair/index.md

@@ -1,9 +1,10 @@
-+++
-title = "end else pair"
-weight = 540
-+++
+---
+title: "end else pair"
+tags: ["Readability"]
+categories: ["Best Practice"]
+---
 
-<_Created by Microsoft, Described by waldo_\>
+_Created by Microsoft, Described by waldo_
 
 ## Description
 

content/docs/BestPractices/keyword-pairs-indentation/index.md

@@ -1,9 +1,10 @@
-+++
-title = "Keyword Pairs - Indentation"
-weight = 730
-+++
+---
+title: "Keyword Pairs - Indentation"
+tags: ["Readability"]
+categories: ["Best Practice"]
+---
 
-<_Created by Microsoft, Described by waldo_\>
+_Created by Microsoft, Described by waldo_
 
 ## Description
 The `if..then` pair, `while..do` pair, and `for..do` pair must appear on the same line or the same level of indentation.  If possible, you can align the lines it is even much more readable.

content/docs/BestPractices/line-start-keywords/index.md

@@ -1,8 +1,8 @@
-+++
-title = "Line Start Keywords"
-weight = 740
-+++
-
+---
+title: "Line Start Keywords"
+tags: ["Readability"]
+categories: ["Best Practice"]
+---
 <_Created by Microsoft, Described by waldo_\>
 
 ## Description

content/docs/BestPractices/lonely-repeat/index.md

@@ -1,9 +1,10 @@
-+++
-title = "Lonely Repeat"
-weight = 760
-+++
+---
+title: "Lonely Repeat"
+tags: ["Readability"]
+categories: ["Best Practice"]
+---
 
-<_Created by Microsoft, Described by waldo_\>
+_Created by Microsoft, Described by waldo_
 
 ## Description
 The `repeat` statement should always be alone on a line.

content/docs/BestPractices/named-invocations/index.md

@@ -1,9 +1,10 @@
-+++
-title = "Named Invocations"
-weight = 830
-+++
+---
+title: "Named Invocations"
+tags: ["Readability"]
+categories: ["Best Practice"]
+---
 
-<_Created by Microsoft, Described by waldo_\>
+_Created by Microsoft, Described by waldo_
 
 ## Description
 When calling an object statically use the Object Name, not the Object Id.

content/docs/BestPractices/one-statement-per-line/index.md

@@ -1,9 +1,10 @@
-+++
-title = "One Statement Per Line"
-weight = 910
-+++
+---
+title: "One Statement per Line"
+tags: ["Readability"]
+categories: ["Best Practice"]
+---
 
-<_Created by Microsoft, Described by waldo_\>
+_Created by Microsoft, Described by waldo_
 
 ## Description
 A line of code should not have more than one statement.

content/docs/BestPractices/separate-if-and-else/index.md

@@ -1,9 +1,10 @@
-+++
-title = "Separate if and else"
-weight = 1050
-+++
+---
+title: "Seperate if and else"
+tags: ["Readability"]
+categories: ["Best Practice"]
+---
 
-<_Created by Microsoft, Described by waldo_\>
+_Created by Microsoft, Described by waldo_
 
 ## Description
 `if` and `else` statements should be on separate lines. 

content/docs/BestPractices/spacing-binary-operators/index.md

@@ -1,9 +1,10 @@
-+++
-title = "Spacing Binary Operators"
-weight = 1120
-+++
+---
+title: "Spacing Binary Operators"
+tags: ["Readability"]
+categories: ["Best Practice"]
+---
 
-<_Created by Microsoft, Described by waldo_\>
+_Created by Microsoft, Described by waldo_
 
 ## Description
 There must be exactly one space character on each side of a binary operator such as = + - AND OR =. The parameter comma operator however, should have a space after the comma.

content/docs/BestPractices/suggested-abbreviations/index.md

@@ -1,9 +1,10 @@
-+++
-title = "Suggested Abbreviations"
-weight = 1170
-+++
+---
+title: "Suggested Abbreviations"
+tags: ["Readability"]
+categories: ["Best Practice"]
+---
 
-<_Created by Microsoft, Described by waldo_\>
+_Created by Microsoft, Described by waldo_
 
 ## Description
 

content/docs/BestPractices/unnecessary-else/index.md

@@ -1,9 +1,10 @@
-+++
-title = "Unnecessary 'else'"
-weight = 1270
-+++
+---
+title: "Unnecessary else"
+tags: ["Readability"]
+categories: ["Best Practice"]
+---
 
-<_Created by Microsoft, Described by waldo_\>
+_Created by Microsoft, Described by waldo_
 
 ## Description
 `else` should not be used when the last action in the `then` part is an `exit`, `break`, `skip`, `quit`, `error`. 

content/docs/BestPractices/unnecessary-truefalse/index.md

@@ -1,9 +1,10 @@
-+++
-title = "Unnecessary true/false"
-weight = 1300
-+++
+---
+title: "Unnecessary true/false"
+tags: ["Readability"]
+categories: ["Best Practice"]
+---
 
-<_Created by Microsoft, Described by waldo_\>
+_Created by Microsoft, Described by waldo_
 
 ## Description
 Do not use `true` or `false` keywords unnecessarily if the expression is already an logical expression.

content/docs/BestPractices/variable-naming/index.md

@@ -1,9 +1,10 @@
-+++
-title = "Variable Naming"
-weight = 1420
-+++
+---
+title: "Variable Naming"
+tags: ["Readability"]
+categories: ["Best Practice"]
+---
 
-<_Created by Microsoft, Described by waldo_\>
+_Created by Microsoft, Described by waldo_
 
 ## Description
 Variables that refer to a AL object must contain the objects name, abbreviated where necessary.

content/docs/BestPractices/variables-declarations-order/index.md

@@ -1,9 +1,10 @@
-+++
-title = "Variables Declarations Order"
-weight = 1430
-+++
+---
+title: "Variables Declarations Order"
+tags: ["Readability"]
+categories: ["Best Practice"]
+---
 
-<_Created by Microsoft, Described by waldo_\>
+_Created by Microsoft, Described by waldo_
 
 ## Description
 Variables declarations should be ordered by type. In general, object and complex variable types are listed first followed by simple variables. The order should be:

content/docs/Contributing/ForkAndPR/index.md

@@ -11,20 +11,22 @@ AL Guidelines is a community project, and as such YOU are encouraged to submit c
 
 If You are toying with an idea, but You aren't ready to create a document just yet, you are encouraged to create a project discussion thread here: https://github.com/microsoft/alguidelines/discussions
 
-{{% notice warning %}}
+{{% alert title="Warning" color="warning" %}}
+This is a warning.
 If You haven't worked in collaboration with "external" GitHub repositories before, please familiarize yourself with that process by visiting:
 
 https://docs.github.com/en/pull-requests/collaborating-with-pull-requests
 
-{{% /notice %}}
+{{% /alert %}}
 
 ## Steps
 Now that You have decided that You are ready to contribute, these are the steps to take.
-{{% notice info %}}
+{{% alert title="Note" color="info" %}}
 You can read more about this process here:
 
 https://docs.github.com/en/get-started/quickstart/contributing-to-projects
-{{% /notice %}}
+
+{{% /alert %}}
 
 ### Step 1: Fork
 In order to work on the repository, You must [Fork](https://docs.github.com/en/get-started/quickstart/fork-a-repo) the repository.
@@ -37,20 +39,20 @@ Once You have successfully forked the repository, go to your own GitHub reposito
 
 You are now able to clone your own repository to your local pc and start editing using your favorite editor. [Visual Studio Code](https://code.visualstudio.com/) is perfectly fine for this task.
 
-{{% notice info %}}
+{{% alert title="Note" color="info" %}}
 You can read more about forking here:
 
 https://docs.github.com/en/get-started/quickstart/fork-a-repo
-{{% /notice %}}
+{{% /alert %}}
 
 ### Step 2: Branch
 While not necessarily a must, it is always good practice to create a branch off of your forked repository. That will allow you to work on multiple contributions at the same time and won't have to wait for pull requests to be approved before you can continue on your next contribution.
 
-{{% notice info %}}
+{{% alert title="Note" color="info" %}}
 You can read more about Branches here:
 
 https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches
-{{% /notice %}}
+{{% /alert %}}
 ### Step 3: Pull Request
 Once you are happy with your contribution, it's time to create a pull request to propose changes into the main project! This is the final step in producing a fork of someone else's project, and arguably the most important. If you've made a change that you feel would benefit the community as a whole, you should definitely consider contributing back.
 

content/docs/Contributing/Templates/_index.md

@@ -1,14 +1,14 @@
-+++
-chapter = true
-pre = "<b><i class='fas fa-clone'></i> </b>"
-title = "Templates"
-weight = 100
-+++
-
-# Templates
-
-We have foreseen some template-files that you can simply copy and use.  Look at them as "Patterns for describing patterns" 😉.
-
-We have foreseen a Template:
-  - for [patterns](/contributing/templates/patterns/)
++++
+chapter = true
+pre = "<b><i class='fas fa-clone'></i> </b>"
+title = "Templates"
+weight = 100
++++
+
+# Templates
+
+We have foreseen some template-files that you can simply copy and use.  Look at them as "Patterns for describing patterns" 😉.
+
+We have foreseen a Template:
+  - for [patterns](/contributing/templates/patterns/)
   - for [guidelines](/contributing/templates/guidelines/)

content/docs/Contributing/TheApprovalProcess/index.md

@@ -1,9 +1,9 @@
-+++
-chapter = true
-pre = "<b><i class='fas fa-clone'></i> </b>"
-title = "Understanding the Approval Process"
-weight = 100
-+++
-
-(coming soon)
-
++++
+chapter = true
+pre = "<b><i class='fas fa-clone'></i> </b>"
+title = "Understanding the Approval Process"
+weight = 100
++++
+
+(coming soon)
+

content/docs/Contributing/_index.md

@@ -5,7 +5,7 @@ title = "Contributing"
 weight = 100
 +++
 
-# Contributing
+First off, we're glad you want to help!  The project team is kind and helpful, so if you're not sure if you have a good first contribution, make a [Discussion](https://github.com/microsoft/alguidelines/discussions/) about it or even just create your first try.  You'll get feedback and we will be happy to help refine it, if it even needs it.
 
 ## Code of Conduct
 
@@ -17,11 +17,11 @@ This project has adopted the Microsoft Open Source Code of Conduct. For more inf
 
 ## Steps to Contribute
 
-* [Guide to Fork & PR](/contributing/forkandpr/)
+* [Guide to Fork & PR](/docs/contributing/forkandpr/)
 * Templates:
-  - For [patterns](/contributing/templates/patterns/)
-  - For [guidelines](/contributing/templates/guidelines/)
-* [Understanding the Approval Process](/contributing/theapprovalprocess/)
+  - For [patterns](/docs/contributing/templates/patterns/)
+  - For [guidelines](/docs/contributing/templates/guidelines/)
+* [Understanding the Approval Process](/docs/contributing/theapprovalprocess/)
 
-Here are some [tips and tricks in terms of working with MarkDown and Hugo](/contributing/formattingtips/).
+Here are some [tips and tricks in terms of working with Markdown and Hugo](/docs/contributing/formattingtips/).