Feat: Resource page update (#1886)

* init new resource page Signed-off-by: thisisobate <obasiuche62@gmail.com> * chore: fix layout in desktop view Signed-off-by: thisisobate <obasiuche62@gmail.com> * chore: make filter work Signed-off-by: thisisobate <obasiuche62@gmail.com> * chore: nit fix Signed-off-by: thisisobate <obasiuche62@gmail.com> * chore: remove title in learning resource Signed-off-by: thisisobate <obasiuche62@gmail.com> * chore: rename resource partial Signed-off-by: thisisobate <obasiuche62@gmail.com> * chore: nit fixes Signed-off-by: thisisobate <obasiuche62@gmail.com> * chore: increase size of filter buttons Signed-off-by: thisisobate <obasiuche62@gmail.com> * chore: nit fixes Signed-off-by: thisisobate <obasiuche62@gmail.com> * Update README.md Signed-off-by: Florent Poinsard <35779988+frouioui@users.noreply.github.com> --------- Signed-off-by: thisisobate <obasiuche62@gmail.com> Signed-off-by: Florent Poinsard <35779988+frouioui@users.noreply.github.com> Co-authored-by: Florent Poinsard <35779988+frouioui@users.noreply.github.com>
vitessio · Nov 15, 2024 · 32b46bb · 32b46bb
1 parent 6983934
commit 32b46bb
Show file tree

Hide file tree

Showing 12 changed files with 866 additions and 376 deletions.
diff --git a/README.md b/README.md
@@ -41,6 +41,67 @@ You can check the site's internal links by running `make check-internal-links` a
 
 The Vitess website uses [Bulma](https://bulma.io/), a CSS (and SASS) framework that provides all kinds of variables, utilities, and components.
 
+### Adding a new learning resources filter option
+
+To add a new filter option, simply follow these steps:
+
+1. Navigate to `resources.yaml` file to annotate: `cd data/resources.yaml`.
+2. add your new filter option to all the data in the folder.
+
+```
+  - youtube: uRB-Qni_bCM
+    title: "Vitess: Introduction, New Features and the Vinted User Story - Florent Poinsard, Deepthi Sigireddi, PlanetScale & Kazimieras Aliulis, Vinted"
+    date: 2024
+    type: video
+    FILTER_NAME = "filter_value"
+```
+
+Replace FILTER_NAME with any desired name of your choice. Same applies to the value.
+
+3. Navigate to the `index.searchindex.json` file to edit: `cd layouts/_default/index.searchindex.json`.
+4. Open the file and go down to line 3. You will notice the format of the data represented in a key/value pair. Just before the closing parenthesis, append your new option like this: `"FILTER_NAME" $resources.FILTER_NAME`.
+
+Replace FILTER_NAME with the same name represented in the frontmatter (see step 2 above for reference).
+
+5. Head over to `config.toml` file. In the `params.lunr` section, you will see two arrays named `vars` and `params`. Add your new filter option's name to each of the arrays:
+
+```toml
+vars = ["title", "summary", "date", "publishdate", "expirydate", "permalink", "FILTER_NAME"]
+```
+
+6. Navigate to `javascript.html` and scroll down to where the logic for resource filter is declared. Within that scope, find where the `lunr()` function is being called. You will notice a callback function is being passed to the `lunr()` function. Within the callback function, you will also notice `this.field` being called with some values passed in. Append this block of code right after the last `this.field` function call:
+
+```javascript
+this.field("FILTER_NAME");
+```
+
+Replace FILTER_NAME with the same name represented in the frontmatter (see step 2 above for reference).
+
+1. Navigate to `layouts/partials/learning-resources/filter-panel.html`. Locate the div with a class name of `filter`. Within the div, add this new block:
+
+```html
+<div class="mt-5">
+      <h5>FILTER_NAME</h5>
+      {{ $resources := $.Site.Data.resources.resources }}
+      {{ $FILTER_NAMe := slice }}
+      {{ range $resources }}
+          {{ $FILTER_NAME = $years | append .FILTER_NAME }}
+          {{ $FILTER_NAME = uniq $FILTER_NAME }}
+      {{ end }}
+      {{ range $FILTER_NAME }}
+      {{ $filter := . }}
+       <div>
+          <input id="{{ . }}" type="checkbox" name="resource_filter" value="{{ . }}">
+          <label for="{{ . }}">{{ . }}</label>
+      </div>
+      {{ end }}
+  </div>
+```
+
+Replace FILTER_NAME with the same name represented in the frontmatter (see step 2 above for reference).
+
+8. Save your changes and rebuild your frontend.
+
 # Releasing a new version of the documentation
 
 To release a new version of the documentation you can use one of the following two scripts:

diff --git a/assets/sass/style.sass b/assets/sass/style.sass
@@ -228,3 +228,152 @@ details summary
 
 .mermaid
   margin: 2rem 0 4rem 0
+
+section.row
+  justify-content: unset !important
+  & > .col 
+    max-width: 1140px
+    & > .row
+      padding-left: 0
+      padding-right: 0
+    &.td-box
+      padding-top: 2rem
+      padding-bottom: 1.5rem
+
+  .td-box--primary p > a
+    color: white
+    text-decoration: underline
+
+main.td-main
+  &section.template-row
+    justify-content: unset !important
+
+.filter
+  top: 16%
+  left: -15px
+  z-index: 100
+  +tablet
+    top: 0
+    left: 0
+    margin-top: 4px
+    width: 100px
+
+
+
+.filter-container
+  display: none
+  width: 100px
+  +tablet
+    display: block
+
+.mt-100
+  margin-top: 100px
+
+.flex-gap-md
+  gap: 110px
+
+.tag-heading
+  font-size: 1rem !important
+  padding: 4px !important
+  padding-left: 8px !important
+  margin-right: 8px
+
+.tag-break
+  font-weight: 600
+
+.tag
+  color: #222
+  text-align: left
+  font-size: 0.8rem
+  font-weight: 600
+  padding: 2px 6px 2px 6px
+  background-color: #3D6DDD
+  color: white
+  border-radius: 5px
+  margin-bottom: 2px
+
+.tag1
+  position: absolute
+  left: 12px
+  bottom: 6px
+
+label.date
+  font-size: 0.8rem
+  font-weight: 400
+  color: #999
+  margin-left: 6px
+  text-align: right
+  position: absolute
+  right: 0
+  bottom: 0
+  padding-right: 6px
+  margin-bottom: 9px
+
+.td-content .col-lg-4
+  border: 1px solid #dee2e6
+  border-radius: 0.25rem
+  margin: 22px 16px
+  padding: 1px 1px 12px 1px
+  max-width: 300px
+
+.td-content h4
+  color: #222
+  text-align: left
+  font-size: 1rem
+  font-weight: 600
+  padding-left: 12px
+  padding-right: 12px
+  padding-top: 12px
+  padding-bottom: 8px
+
+.filter-mobile-modal
+  border: 1px solid black
+  background-color: white
+  position: absolute
+  padding-left: 15px
+  height: fit-content
+  z-index: 90
+  top: 37%
+  bottom: 5%
+  display: none
+
+.filter-mobile-btn
+  display: inline-block
+  margin-bottom: 40px
+  +tablet
+    display: none
+
+.filter-mobile-btn button
+  font-size: 1.2rem
+
+.filter-mobile-modal button
+  font-size: 1rem
+
+.template-resource
+  display: none
+
+.flex
+  display: flex
+
+
+.justify-content-space
+  justify-content: space-between
+
+.width-90
+  width: 90%
+
+.mt-40
+  margin-top: 40px
+
+.mb-50
+  margin-bottom: 50px
+
+.relative
+  position: relative
+
+.col-lg-4
+  flex: none
+
+.img-thumbnail
+  height: 222px
+  object-fit: contain
diff --git a/config.toml b/config.toml
@@ -139,13 +139,19 @@ baseName = "_redirects"
 notAlternative = true
 
 [outputs]
-home = [ "HTML", "REDIRECTS", "RSS", "Lunr" ]
+home = [ "HTML", "REDIRECTS", "RSS", "Lunr", "SearchIndex" ]
 
 [outputFormats.Lunr]
 baseName = "index"
 isPlainText = true
 mediaType = "application/json"
 notAlternative = true
 
+[outputFormats.SearchIndex]
+baseName = "searchindex"
+isPlainText = true
+mediaType = "application/json"
+notAlternative = true
+
 [params.lunr]
 vars = ["title", "summary", "date", "publishdate", "expirydate", "permalink"]