Merge pull request #465 from GovTechSG/layouts-page

Create layouts page

.nvmrc

@@ -0,0 +1 @@
+v20.8.0

package.json

@@ -3,8 +3,8 @@
     "version": "1.0.0",
     "description": "",
     "repository": {
-      "type": "git",
-      "url": "https://github.com/govtechsg/sgds.git"
+        "type": "git",
+        "url": "https://github.com/govtechsg/sgds.git"
     },
     "license": "MIT",
     "author": "Tey Liang Tai",
@@ -23,16 +23,15 @@
       "react-select:dev": "cd lib/sgds-x-family && npm run react-select:dev"
     },
     "devDependencies": {
-      "@commitlint/cli": "^17.0.3",
-      "@commitlint/config-conventional": "^17.0.3",
-      "concurrently": "^7.0.0",
-      "cz-conventional-changelog": "^3.3.0",
-      "husky": "^8.0.1"
+        "@commitlint/cli": "^17.0.3",
+        "@commitlint/config-conventional": "^17.0.3",
+        "concurrently": "^7.0.0",
+        "cz-conventional-changelog": "^3.3.0",
+        "husky": "^8.0.1"
     },
     "config": {
-      "commitizen": {
-        "path": "./node_modules/cz-conventional-changelog"
-      }
+        "commitizen": {
+            "path": "./node_modules/cz-conventional-changelog"
+        }
     }
-  }
-
+}

portal/README.md

@@ -0,0 +1,13 @@
+# SGDS Portal powered with Jekyll 
+
+This is a static site build with jekyll 
+
+## Image compression
+
+Image compression helps to reduce the bundle size of the images with lossless in quality. 
+Imagemin library plugins are used to generate this. This process will take some time, so it is only recommended to run in production builds. 
+
+When you are adding new images to the portal
+- Add new images to `assets/uncompressed-image` folder 
+- Run `npm run build`. Webpack in production mode will run imagemin plugins to generate compressed images into `img` folder 
+- `npm run dev` to start your development work 

portal/_config.yml

@@ -42,6 +42,15 @@ plugins:
 
 collections_dir: collections
 collections:
+  layouts:
+    permalink: /:collection/:name
+    output: true
+    category: layouts
+    order:
+      - template-grid.html
+      - side-navigation-area.html
+      - content-area.html
+      - table-of-content-area.html
   components:
     permalink: /:collection/:name
     output: true
@@ -78,6 +87,14 @@ collections:
 
 # set all patterns collection to use certain layouts
 defaults:
+  -
+    scope:
+      type: "layouts" 
+    values:
+      layout: "layout-sidenav"
+      pageCategory: "layouts"
+      source-grid: false
+      toc: true
   -
     scope:
       type: "patterns" 

portal/_data/navigation.yml

@@ -11,6 +11,9 @@
 - title: patterns
   url: /patterns/
   has-collection: true
+- title: layouts
+  url: /layouts/
+  has-collection: true
 - title: templates
   url: /templates/
   has-collection: true

portal/_includes/layouts/layout-code-snippet.html

@@ -0,0 +1,20 @@
+<div class="sgds-example">
+    {{include.display}}
+</div>
+<div class="sgds accordion code-snippet no-toc-section" id="example-{{include.name}}">
+    <div class="accordion-item">
+        <h2 class="accordion-header" id="heading-{{include.name}}">
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                data-bs-target="#collapse-{{include.name}}" aria-expanded="false"
+                aria-controls="collapse-{{include.name}}">
+                See Code
+            </button>
+        </h2>
+        <div id="collapse-{{include.name}}" class="accordion-collapse collapse"
+            aria-labelledby="heading-{{include.name}}" data-bs-parent="#example-{{include.name}}">
+            <div class="accordion-body accordion-body-codesnippet">
+                {%- highlight html -%}{{include.code}}{%- endhighlight -%}
+            </div>
+        </div>
+    </div>
+</div>

portal/_includes/page-overview.html

@@ -3,6 +3,7 @@
         {% include breadcrumb.html %}
         <h1 class="title">{{page.title}}</h1>
         <p>{{page.description}}</p>
+        {{include.description}}
 
         <div class="sgds form-control-group mt-4">
             <input

portal/assets/custom-css/utilities/_all.scss

@@ -1,3 +1,4 @@
 @import "sticky";
 @import "sgds-example";
-@import "highlight";
+@import "highlight";
+@import "code-font";

portal/assets/custom-css/utilities/_code-font.scss

@@ -0,0 +1,8 @@
+.sgds-code-font {
+    font-family: 'Courier New', Courier, monospace;
+    font-weight: 400;
+    border: 1px solid var(--sgds-gray-300);
+    background-color: var(--sgds-gray-100);
+    border-radius: 8px;
+    padding: 6px 8px 6px 8px;
+}

portal/assets/custom-css/utilities/_sgds-example.scss

@@ -1,4 +1,5 @@
 .sgds-example {
+    overflow-x: auto;
     border: 1px solid var(--sgds-gray-400);
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
@@ -73,12 +74,12 @@
         border-radius: $border-radius;
     }
     &-grid {
-        display: grid;
+        // display: grid;
         // grid-template-columns: repeat(2, 1fr);
-        grid-auto-flow: column;
-        grid-auto-columns: max-content;
-        gap: 1rem;
-        place-items: center;
+        // grid-auto-flow: column;
+        // grid-auto-columns: max-content;
+        // gap: 1rem;
+        // place-items: center; 
         img,
         svg {
             max-width: 100%;