From 8b3827f6033705826aac63423a5b7e6430d84ca5 Mon Sep 17 00:00:00 2001
From: Antony Kurniawan <smankusors@icloud.com>
Date: Mon, 26 Oct 2020 10:53:49 +0700
Subject: [PATCH 1/4] [doc] fix feature discovery title

---
 jade/feature-discovery.jade | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/jade/feature-discovery.jade b/jade/feature-discovery.jade
index a6c646e84c..ce4567f6b4 100644
--- a/jade/feature-discovery.jade
+++ b/jade/feature-discovery.jade
@@ -1,5 +1,5 @@
 - var no_nav = false
-- var page = "FeatureDiscovery"
+- var page = "Feature Discovery"
 
 doctype html
 html(lang="en")

From 60297e1f281f3c8a645eb044881f942df076911a Mon Sep 17 00:00:00 2001
From: Antony Kurniawan <smankusors@icloud.com>
Date: Mon, 26 Oct 2020 11:06:43 +0700
Subject: [PATCH 2/4] [doc] improve search results

---
 docs/js/search.js | 528 +++++++++++++++++++++-------------------------
 1 file changed, 245 insertions(+), 283 deletions(-)

diff --git a/docs/js/search.js b/docs/js/search.js
index 10994d183f..e67cc4b2ad 100644
--- a/docs/js/search.js
+++ b/docs/js/search.js
@@ -1,292 +1,254 @@
 (function ($) {
   $(document).ready(function() {
     window.index = lunr(function () {
-      this.field('title', {boost: 10});
+      this.field('tags', {boost: 10});
       this.field('body');
-      this.ref('href');
+      this.ref('id');
     });
     window.index.pipeline.reset();
 
-    window.index.add({
-      href: 'http://materializecss.com/about.html',
-      title: 'About',
-      body: 'Created and designed by Google, Material Design is a design language that combines the classic principles of successful design along with innovation and technology. Google"s goal is to develop a system of design that allows for a unified user experience across all their products on any platform.'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/autocomplete.html',
-      title: 'Autocomplete',
-      body: 'Add an autocomplete dropdown below your input to suggest possible values in your form. You can populate the list of autocomplete options dynamically as well.'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/badges.html',
-      title: 'Badges',
-      body: 'Badges can notify you that there are new or unread messages or notifications.'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/buttons.html',
-      title: 'Buttons',
-      body: 'There are 3 main button types described in material design. The raised button is a standard button that signify actions and seek to give depth to a mostly flat page. The floating circular action button is meant for very important functions. Flat buttons are usually used within elements that already have depth like cards or modals.'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/breadcrumbs.html',
-      title: 'Breadcrumbs',
-      body: 'There are 3 main button types described in material design. The raised button is a standard button that signify actions and seek to give depth to a mostly flat page. The floating circular action button is meant for very important functions. Flat buttons are usually used within elements that already have depth like cards or modals.'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/cards.html',
-      title: 'Cards',
-      body: 'Breadcrumbs are a good way to display your current location. This is usually used when you have multiple layers of content.'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/carousel.html',
-      title: 'Carousel',
-      body: 'Our Carousel is a robust and versatile component that can be an image slider, to an item carousel, to an onboarding experience.'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/checkboxes.html',
-      title: 'Checkboxes',
-      body: 'Use checkboxes when looking for yes or no answers. The for attribute is necessary to bind our custom checkbox with the input. Add the input\'s id as the value of the for attribute of the label.'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/chips.html',
-      title: 'Chips',
-      body: 'Chips can be used to represent small blocks of information. They are most commonly used either for contacts or for tags.'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/collapsible.html',
-      title: 'Collapsible',
-      body: 'Collapsibles are accordion elements that expand when clicked on. They allow you to hide content that is not immediately relevant to the user.'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/collections.html',
-      title: 'Collections',
-      body: 'Collections allow you to group list objects together.'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/color.html',
-      title: 'Color',
-      body: 'Here is a color palette based on the material design base colors. Each of these colors is defined with a base color class and an optional lighten or darken class.'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/dropdown.html',
-      title: 'dropdown',
-      body: 'Add a dropdown list to any button.'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/feature-discovery.html',
-      title: 'feature discovery',
-      body: 'Provide value and encourage return visits by introducing users to new features and functionality at contextually relevant moments.'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/footer.html',
-      title: 'footer',
-      body: 'Footers are a great way to organize a lot of site navigation and information at the end of a page. This is where the user will look once hes finished scrolling through the current page or is looking for additional information about your website.'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/fullscreen-slider-demo.html',
-      title: 'Fullscreen slider demo',
-      body: 'Fullscreen slider demo'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/getting-started.html',
-      title: 'Getting Started',
-      body: 'Learn how to easily start using Materialize in your website.'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/grid.html',
-      title: 'Grid',
-      body: 'We are using a standard 12 column fluid responsive grid system. The grid helps you layout your page in an ordered, easy fashion.'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/helpers.html',
-      title: 'Helpers',
-      body: 'helper classes'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/icons.html',
-      title: 'icons',
-      body: 'We have included 740 Material Design Icons courtesy of Google'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/media-css.html',
-      title: 'Media CSS',
-      body: 'Media CSS classes'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/media.html',
-      title: 'Media JavaScript slider materialbox',
-      body: 'Media components include things that have to do with large media objects like Images, Video, Audio, etc.'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/mobile.html',
-      title: 'Mobile',
-      body: 'Mobile only interactive components.'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/modals.html',
-      title: 'modals',
-      body: 'Use a modal for dialog boxes, confirmation messages, or other content that can be called up.'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/navbar.html',
-      title: 'navbar',
-      body: 'The navbar is fully contained by an HTML5 Nav tag. Inside a recommended container div, there are 2 main parts of the navbar. A logo or brand link, and the navigations links. You can align these links to the left or right.'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/pagination.html',
-      title: 'pagination',
-      body: 'Add pagination links to help split up your long content into shorter, easier to understand blocks.'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/parallax.html',
-      title: 'parallax',
-      body: 'Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/pickers.html',
-      title: 'date time picker',
-      body: 'Pickers provide a simple way to select a date or time.'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/preloader.html',
-      title: 'preloader',
-      body: 'If you have content that will take a long time to load, you should give the user feedback. For this reason we provide a number activity + progress indicators.'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/pulse.html',
-      title: 'pulse',
-      body: 'Draw attention to your buttons with this subtle but captivating effect.'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/pushpin.html',
-      title: 'Pushpin',
-      body: 'Pushpin is our fixed positioning plugin. You can check out our live examples: the fixed Table of Contents on the right.'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/radio-buttons.html',
-      title: 'radio buttons',
-      body: 'Radio Buttons are used when the user must make only one selection out of a group of items.'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/range.html',
-      title: 'range slider',
-      body: 'Add a range slider for values with a wide range.'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/sass.html',
-      title: 'Sass',
-      body: 'When using Sass, you can change the color scheme of your site extremely quickly.'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/scrollspy.html',
-      title: 'scrollspy',
-      body: 'Scrollspy is a jQuery plugin that tracks certain elements and which element the users screen is currently centered on.'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/select.html',
-      title: 'Select',
-      body: 'Select allows user input through specified options.'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/shadow.html',
-      title: 'shadow',
-      body: 'In material design, everything should have a certain z-depth that determines how far raised or close to the page the element is.'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/showcase.html',
-      title: 'showcase',
-      body: 'Here is our showcase of websites that use materialize.'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/sidenav.html',
-      title: 'sidenav side nav',
-      body: 'This is a slide out menu. You can add a dropdown to your sidebar by using our collapsible component.'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/switches.html',
-      title: 'Switches',
-      body: 'Switches are special checkboxes used for binary states such as on / off'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/table.html',
-      title: 'table',
-      body: 'Tables are a nice way to organize a lot of data. We provide a few utility classes to help you style your table as easily as possible.'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/tabs.html',
-      title: 'tabs',
-      body: 'The tabs structure consists of an unordered list of tabs that have hashes corresponding to tab ids. Then when you click on each tab, only the container with the corresponding tab id will become visible.'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/text-inputs.html',
-      title: 'Text Input Fields',
-      body: 'Text fields allow user input. The border should light up simply and clearly indicating which field the user is currently editing.'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/toasts.html',
-      title: 'Toasts',
-      body: 'Materialize provides an easy way for you to send unobtrusive alerts to your users through toasts. These toasts are also placed and sized responsively, try it out by clicking the button below on different device sizes.'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/tooltips.html',
-      title: 'Tooltips',
-      body: 'Tooltips are small, interactive, textual hints for mainly graphical elements. When using icons for actions you can use a tooltip to give people clarification on its function.'
-    });
-
-    window.index.add({
-      href: 'http://materializecss.com/typography.html',
-      title: 'Typography',
-      body: 'font, headers, blockquotes, flow text.'
-    });
+    window.indexStore = [
+      {
+        href: 'about.html',
+        title: 'About',
+        tags: 'about',
+        body: 'Created and designed by Google, Material Design is a design language that combines the classic principles of successful design along with innovation and technology. Google"s goal is to develop a system of design that allows for a unified user experience across all their products on any platform.'
+      }, {
+        href: 'autocomplete.html',
+        title: 'Forms > Autocomplete',
+        tags: 'autocomplete forms',
+        body: 'Add an autocomplete dropdown below your input to suggest possible values in your form. You can populate the list of autocomplete options dynamically as well.'
+      }, {
+        href: 'badges.html',
+        title: 'Components > Badges',
+        tags: 'badge components',
+        body: 'Badges can notify you that there are new or unread messages or notifications.'
+      }, {
+        href: 'buttons.html',
+        title: 'Components > Buttons',
+        tags: 'button components',
+        body: 'There are 3 main button types described in material design. The raised button is a standard button that signify actions and seek to give depth to a mostly flat page. The floating circular action button is meant for very important functions. Flat buttons are usually used within elements that already have depth like cards or modals.'
+      }, {
+        href: 'breadcrumbs.html',
+        title: 'Components > Breadcrumbs',
+        tags: 'breadcrumb components',
+        body: 'Breadcrumbs are a good way to display your current location. This is usually used when you have multiple layers of content.'
+      }, {
+        href: 'cards.html',
+        title: 'Components > Cards',
+        tags: 'card components',
+        body: 'Cards are a convenient means of displaying content composed of different types of objects. They’re also well-suited for presenting similar objects whose size or supported actions can vary considerably, like photos with captions of variable length.'
+      }, {
+        href: 'carousel.html',
+        title: 'JavaScript > Carousel',
+        tags: 'carousel javascript js',
+        body: 'Our Carousel is a robust and versatile component that can be an image slider, to an item carousel, to an onboarding experience.'
+      }, {
+        href: 'checkboxes.html',
+        title: 'Forms > Checkboxes',
+        tags: 'checkbox forms',
+        body: 'Use checkboxes when looking for yes or no answers. The for attribute is necessary to bind our custom checkbox with the input. Add the input\'s id as the value of the for attribute of the label.'
+      }, {
+        href: 'chips.html',
+        title: 'Forms > Chips',
+        tags: 'chip forms',
+        body: 'Chips can be used to represent small blocks of information. They are most commonly used either for contacts or for tags.'
+      }, {
+        href: 'collapsible.html',
+        title: 'JavaScript > Collapsible',
+        tags: 'collapsible javascript js',
+        body: 'Collapsibles are accordion elements that expand when clicked on. They allow you to hide content that is not immediately relevant to the user.'
+      }, {
+        href: 'collections.html',
+        title: 'Components > Collections',
+        tags: 'collection components',
+        body: 'Collections allow you to group list objects together.'
+      }, {
+        href: 'color.html',
+        title: 'CSS > Color',
+        tags: 'color css',
+        body: 'Here is a color palette based on the material design base colors. Each of these colors is defined with a base color class and an optional lighten or darken class.'
+      }, {
+        href: 'dropdown.html',
+        title: 'JavaScript > Dropdown',
+        tags: 'dropdown javascript js',
+        body: 'Add a dropdown list to any button.'
+      }, {
+        href: 'feature-discovery.html',
+        title: 'JavaScript > Feature Discovery',
+        tags: 'feature discovery javascript js',
+        body: 'Provide value and encourage return visits by introducing users to new features and functionality at contextually relevant moments.'
+      }, {
+        href: 'footer.html',
+        title: 'Components > Footer',
+        tags: 'footer components',
+        body: 'Footers are a great way to organize a lot of site navigation and information at the end of a page. This is where the user will look once hes finished scrolling through the current page or is looking for additional information about your website.'
+      }, {
+        href: 'fullscreen-slider-demo.html',
+        title: 'Fullscreen Slider Demo',
+        tags: 'fullscreen slider demo',
+        body: 'Fullscreen slider demo'
+      }, {
+        href: 'getting-started.html',
+        title: 'Getting Started',
+        tags: 'getting started install installation cdn download setup',
+        body: 'Learn how to easily start using Materialize in your website.'
+      }, {
+        href: 'grid.html',
+        title: 'CSS > Grid',
+        tags: 'grid css',
+        body: 'We are using a standard 12 column fluid responsive grid system. The grid helps you layout your page in an ordered, easy fashion.'
+      }, {
+        href: 'helpers.html',
+        title: 'CSS > Helpers',
+        tags: 'helper css align float hide show format formatting',
+        body: 'helper classes'
+      }, {
+        href: 'icons.html',
+        title: 'Components > Icons',
+        tags: 'icon components',
+        body: 'We have included 740 Material Design Icons courtesy of Google'
+      }, {
+        href: 'media-css.html',
+        title: 'CSS > Media',
+        tags: 'media css responsive',
+        body: 'Media CSS classes'
+      }, {
+        href: 'media.html',
+        title: 'JavaScript > Media',
+        tags: 'media javascript js slider materialbox',
+        body: 'Media components include things that have to do with large media objects like Images, Video, Audio, etc.'
+      }, {
+        href: 'mobile.html',
+        title: 'Mobile',
+        tags: 'mobile',
+        body: 'Mobile only interactive components.'
+      }, {
+        href: 'modals.html',
+        title: 'JavaScript > Modals',
+        tags: 'modal javascript js',
+        body: 'Use a modal for dialog boxes, confirmation messages, or other content that can be called up.'
+      }, {
+        href: 'navbar.html',
+        title: 'Components > Navbar',
+        tags: 'navbar components',
+        body: 'The navbar is fully contained by an HTML5 Nav tag. Inside a recommended container div, there are 2 main parts of the navbar. A logo or brand link, and the navigations links. You can align these links to the left or right.'
+      }, {
+        href: 'pagination.html',
+        title: 'Components > Pagination',
+        tags: 'pagination components',
+        body: 'Add pagination links to help split up your long content into shorter, easier to understand blocks.'
+      }, {
+        href: 'parallax.html',
+        title: 'JavaScript > Parallax',
+        tags: 'parallax javascript js',
+        body: 'Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.'
+      }, {
+        href: 'pickers.html',
+        title: 'Forms > Pickers',
+        tags: 'date time picker forms',
+        body: 'Pickers provide a simple way to select a date or time.'
+      }, {
+        href: 'preloader.html',
+        title: 'Components > Preloader',
+        tags: 'preloader components progress bar circle',
+        body: 'If you have content that will take a long time to load, you should give the user feedback. For this reason we provide a number activity + progress indicators.'
+      }, {
+        href: 'pulse.html',
+        title: 'CSS > Pulse',
+        tags: 'pulse css',
+        body: 'Draw attention to your buttons with this subtle but captivating effect.'
+      }, {
+        href: 'pushpin.html',
+        title: 'JavaScript > Pushpin',
+        tags: 'pushpin javascript js',
+        body: 'Pushpin is our fixed positioning plugin. You can check out our live examples: the fixed Table of Contents on the right.'
+      }, {
+        href: 'radio-buttons.html',
+        title: 'Forms > Radio Buttons',
+        tags: 'radio button forms',
+        body: 'Radio Buttons are used when the user must make only one selection out of a group of items.'
+      }, {
+        href: 'range.html',
+        title: 'Forms > Range',
+        tags: 'range forms slider',
+        body: 'Add a range slider for values with a wide range.'
+      }, {
+        href: 'sass.html',
+        title: 'CSS > Sass',
+        tags: 'sass css',
+        body: 'When using Sass, you can change the color scheme of your site extremely quickly.'
+      }, {
+        href: 'scrollspy.html',
+        title: 'JavaScript > Scrollspy',
+        tags: 'scrollspy javascript js',
+        body: 'Scrollspy is a jQuery plugin that tracks certain elements and which element the users screen is currently centered on.'
+      }, {
+        href: 'select.html',
+        title: 'Forms > Select',
+        tags: 'select forms',
+        body: 'Select allows user input through specified options.'
+      }, {
+        href: 'shadow.html',
+        title: 'CSS > Shadow',
+        tags: 'shadow css',
+        body: 'In material design, everything should have a certain z-depth that determines how far raised or close to the page the element is.'
+      }, {
+        href: 'showcase.html',
+        title: 'Showcase',
+        tags: 'showcase',
+        body: 'Here is our showcase of websites that use materialize.'
+      }, {
+        href: 'sidenav.html',
+        title: 'JavaScript > Sidenav',
+        tags: 'sidenav javascript js side nav',
+        body: 'This is a slide out menu. You can add a dropdown to your sidebar by using our collapsible component.'
+      }, {
+        href: 'switches.html',
+        title: 'Forms > Switches',
+        tags: 'switch forms',
+        body: 'Switches are special checkboxes used for binary states such as on / off'
+      }, {
+        href: 'table.html',
+        title: 'CSS > Table',
+        tags: 'table css',
+        body: 'Tables are a nice way to organize a lot of data. We provide a few utility classes to help you style your table as easily as possible.'
+      }, {
+        href: 'tabs.html',
+        title: 'JavaScript > Tabs',
+        tags: 'tab javascript js',
+        body: 'The tabs structure consists of an unordered list of tabs that have hashes corresponding to tab ids. Then when you click on each tab, only the container with the corresponding tab id will become visible.'
+      }, {
+        href: 'text-inputs.html',
+        title: 'Forms > Text Inputs',
+        tags: 'text input forms field',
+        body: 'Text fields allow user input. The border should light up simply and clearly indicating which field the user is currently editing.'
+      }, {
+        href: 'toasts.html',
+        title: 'JavaScript > Toasts',
+        tags: 'toast javascript js',
+        body: 'Materialize provides an easy way for you to send unobtrusive alerts to your users through toasts. These toasts are also placed and sized responsively, try it out by clicking the button below on different device sizes.'
+      }, {
+        href: 'tooltips.html',
+        title: 'Javascript > Tooltips',
+        tags: 'tooltip javascript js',
+        body: 'Tooltips are small, interactive, textual hints for mainly graphical elements. When using icons for actions you can use a tooltip to give people clarification on its function.'
+      }, {
+        href: 'typography.html',
+        title: 'CSS > Typography',
+        tags: 'typography css',
+        body: 'font, headers, blockquotes, flow text.'
+      }, {
+        href: 'waves.html',
+        title: 'JavaScript > Waves',
+        tags: 'wave javascript js',
+        body: 'Waves is an external library that weve included in Materialize to allow us to create the ink effect outlined in Material Design'
+      }
+    ];
 
-    window.index.add({
-      href: 'http://materializecss.com/waves.html',
-      title: 'waves',
-      body: 'Waves is an external library that weve included in Materialize to allow us to create the ink effect outlined in Material Design'
+    window.indexStore.forEach(function(index, id) {
+      index.id = id;
+      window.index.add(index);
     });
 
     // icon click
@@ -337,8 +299,8 @@
 
       var query = $(this).val();
       var results = window.index.search(query).slice(0, 6).map(function (result) {
-        var href = result.ref.split('http://materializecss.com/')[1];
-        return [href.charAt(0).toUpperCase() + href.slice(1), href];
+        result = window.indexStore[result.ref];
+        return [result.title, "/" + result.href];
       });
       renderResults(results);
     }));

From b9dfeceb4d7f74da7ad2ca5b1b700ea886b26915 Mon Sep 17 00:00:00 2001
From: Antony Kurniawan <smankusors@icloud.com>
Date: Mon, 26 Oct 2020 17:44:23 +0700
Subject: [PATCH 3/4] [doc] missing search results

---
 docs/js/search.js | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/docs/js/search.js b/docs/js/search.js
index e67cc4b2ad..615a98b719 100644
--- a/docs/js/search.js
+++ b/docs/js/search.js
@@ -243,6 +243,21 @@
         title: 'JavaScript > Waves',
         tags: 'wave javascript js',
         body: 'Waves is an external library that weve included in Materialize to allow us to create the ink effect outlined in Material Design'
+      }, {
+        href: 'css-transitions.html',
+        title: 'CSS > Transitions',
+        tags: 'transition css',
+        body: 'We\'ve made some custom animation classes that will transition your content with only CSS. Each CSS transition consists of a base class that applies the necessary styles and additional classes that control the state of the transition.'
+      }, {
+        href: 'floating-action-button.html',
+        title: 'Components > Floating Action Button',
+        tags: 'floating action button fab component',
+        body: 'If you want a fixed floating action button, you can add multiple actions that will appear on hover.'
+      }, {
+        href: 'auto-init.html',
+        title: 'JavaScript > Auto Init',
+        tags: 'auto init javascript js',
+        body: 'Auto Init allows you to initialize all of the Materialize Components with a single function call. It is important to note that you cannot pass in options using this method.'
       }
     ];
 

From 2543a1ae203066654300fb2a6ecf4b83e90d708c Mon Sep 17 00:00:00 2001
From: Antony Kurniawan <smankusors@icloud.com>
Date: Sat, 2 Jan 2021 20:17:50 +0700
Subject: [PATCH 4/4] sort indexStore by title

---
 docs/js/search.js | 294 +++++++++++++++++++++++-----------------------
 1 file changed, 147 insertions(+), 147 deletions(-)

diff --git a/docs/js/search.js b/docs/js/search.js
index 615a98b719..ae253441ea 100644
--- a/docs/js/search.js
+++ b/docs/js/search.js
@@ -13,86 +13,66 @@
         title: 'About',
         tags: 'about',
         body: 'Created and designed by Google, Material Design is a design language that combines the classic principles of successful design along with innovation and technology. Google"s goal is to develop a system of design that allows for a unified user experience across all their products on any platform.'
-      }, {
-        href: 'autocomplete.html',
-        title: 'Forms > Autocomplete',
-        tags: 'autocomplete forms',
-        body: 'Add an autocomplete dropdown below your input to suggest possible values in your form. You can populate the list of autocomplete options dynamically as well.'
       }, {
         href: 'badges.html',
         title: 'Components > Badges',
         tags: 'badge components',
         body: 'Badges can notify you that there are new or unread messages or notifications.'
-      }, {
-        href: 'buttons.html',
-        title: 'Components > Buttons',
-        tags: 'button components',
-        body: 'There are 3 main button types described in material design. The raised button is a standard button that signify actions and seek to give depth to a mostly flat page. The floating circular action button is meant for very important functions. Flat buttons are usually used within elements that already have depth like cards or modals.'
       }, {
         href: 'breadcrumbs.html',
         title: 'Components > Breadcrumbs',
         tags: 'breadcrumb components',
         body: 'Breadcrumbs are a good way to display your current location. This is usually used when you have multiple layers of content.'
+      }, {
+        href: 'buttons.html',
+        title: 'Components > Buttons',
+        tags: 'button components',
+        body: 'There are 3 main button types described in material design. The raised button is a standard button that signify actions and seek to give depth to a mostly flat page. The floating circular action button is meant for very important functions. Flat buttons are usually used within elements that already have depth like cards or modals.'
       }, {
         href: 'cards.html',
         title: 'Components > Cards',
         tags: 'card components',
         body: 'Cards are a convenient means of displaying content composed of different types of objects. They’re also well-suited for presenting similar objects whose size or supported actions can vary considerably, like photos with captions of variable length.'
-      }, {
-        href: 'carousel.html',
-        title: 'JavaScript > Carousel',
-        tags: 'carousel javascript js',
-        body: 'Our Carousel is a robust and versatile component that can be an image slider, to an item carousel, to an onboarding experience.'
-      }, {
-        href: 'checkboxes.html',
-        title: 'Forms > Checkboxes',
-        tags: 'checkbox forms',
-        body: 'Use checkboxes when looking for yes or no answers. The for attribute is necessary to bind our custom checkbox with the input. Add the input\'s id as the value of the for attribute of the label.'
-      }, {
-        href: 'chips.html',
-        title: 'Forms > Chips',
-        tags: 'chip forms',
-        body: 'Chips can be used to represent small blocks of information. They are most commonly used either for contacts or for tags.'
-      }, {
-        href: 'collapsible.html',
-        title: 'JavaScript > Collapsible',
-        tags: 'collapsible javascript js',
-        body: 'Collapsibles are accordion elements that expand when clicked on. They allow you to hide content that is not immediately relevant to the user.'
       }, {
         href: 'collections.html',
         title: 'Components > Collections',
         tags: 'collection components',
         body: 'Collections allow you to group list objects together.'
       }, {
-        href: 'color.html',
-        title: 'CSS > Color',
-        tags: 'color css',
-        body: 'Here is a color palette based on the material design base colors. Each of these colors is defined with a base color class and an optional lighten or darken class.'
-      }, {
-        href: 'dropdown.html',
-        title: 'JavaScript > Dropdown',
-        tags: 'dropdown javascript js',
-        body: 'Add a dropdown list to any button.'
-      }, {
-        href: 'feature-discovery.html',
-        title: 'JavaScript > Feature Discovery',
-        tags: 'feature discovery javascript js',
-        body: 'Provide value and encourage return visits by introducing users to new features and functionality at contextually relevant moments.'
+        href: 'floating-action-button.html',
+        title: 'Components > Floating Action Button',
+        tags: 'floating action button fab component',
+        body: 'If you want a fixed floating action button, you can add multiple actions that will appear on hover.'
       }, {
         href: 'footer.html',
         title: 'Components > Footer',
         tags: 'footer components',
         body: 'Footers are a great way to organize a lot of site navigation and information at the end of a page. This is where the user will look once hes finished scrolling through the current page or is looking for additional information about your website.'
       }, {
-        href: 'fullscreen-slider-demo.html',
-        title: 'Fullscreen Slider Demo',
-        tags: 'fullscreen slider demo',
-        body: 'Fullscreen slider demo'
+        href: 'icons.html',
+        title: 'Components > Icons',
+        tags: 'icon components',
+        body: 'We have included 740 Material Design Icons courtesy of Google'
       }, {
-        href: 'getting-started.html',
-        title: 'Getting Started',
-        tags: 'getting started install installation cdn download setup',
-        body: 'Learn how to easily start using Materialize in your website.'
+        href: 'navbar.html',
+        title: 'Components > Navbar',
+        tags: 'navbar components',
+        body: 'The navbar is fully contained by an HTML5 Nav tag. Inside a recommended container div, there are 2 main parts of the navbar. A logo or brand link, and the navigations links. You can align these links to the left or right.'
+      }, {
+        href: 'pagination.html',
+        title: 'Components > Pagination',
+        tags: 'pagination components',
+        body: 'Add pagination links to help split up your long content into shorter, easier to understand blocks.'
+      }, {
+        href: 'preloader.html',
+        title: 'Components > Preloader',
+        tags: 'preloader components progress bar circle',
+        body: 'If you have content that will take a long time to load, you should give the user feedback. For this reason we provide a number activity + progress indicators.'
+      }, {
+        href: 'color.html',
+        title: 'CSS > Color',
+        tags: 'color css',
+        body: 'Here is a color palette based on the material design base colors. Each of these colors is defined with a base color class and an optional lighten or darken class.'
       }, {
         href: 'grid.html',
         title: 'CSS > Grid',
@@ -103,66 +83,61 @@
         title: 'CSS > Helpers',
         tags: 'helper css align float hide show format formatting',
         body: 'helper classes'
-      }, {
-        href: 'icons.html',
-        title: 'Components > Icons',
-        tags: 'icon components',
-        body: 'We have included 740 Material Design Icons courtesy of Google'
       }, {
         href: 'media-css.html',
         title: 'CSS > Media',
         tags: 'media css responsive',
         body: 'Media CSS classes'
       }, {
-        href: 'media.html',
-        title: 'JavaScript > Media',
-        tags: 'media javascript js slider materialbox',
-        body: 'Media components include things that have to do with large media objects like Images, Video, Audio, etc.'
+        href: 'pulse.html',
+        title: 'CSS > Pulse',
+        tags: 'pulse css',
+        body: 'Draw attention to your buttons with this subtle but captivating effect.'
       }, {
-        href: 'mobile.html',
-        title: 'Mobile',
-        tags: 'mobile',
-        body: 'Mobile only interactive components.'
+        href: 'sass.html',
+        title: 'CSS > Sass',
+        tags: 'sass css',
+        body: 'When using Sass, you can change the color scheme of your site extremely quickly.'
       }, {
-        href: 'modals.html',
-        title: 'JavaScript > Modals',
-        tags: 'modal javascript js',
-        body: 'Use a modal for dialog boxes, confirmation messages, or other content that can be called up.'
+        href: 'shadow.html',
+        title: 'CSS > Shadow',
+        tags: 'shadow css',
+        body: 'In material design, everything should have a certain z-depth that determines how far raised or close to the page the element is.'
       }, {
-        href: 'navbar.html',
-        title: 'Components > Navbar',
-        tags: 'navbar components',
-        body: 'The navbar is fully contained by an HTML5 Nav tag. Inside a recommended container div, there are 2 main parts of the navbar. A logo or brand link, and the navigations links. You can align these links to the left or right.'
+        href: 'table.html',
+        title: 'CSS > Table',
+        tags: 'table css',
+        body: 'Tables are a nice way to organize a lot of data. We provide a few utility classes to help you style your table as easily as possible.'
       }, {
-        href: 'pagination.html',
-        title: 'Components > Pagination',
-        tags: 'pagination components',
-        body: 'Add pagination links to help split up your long content into shorter, easier to understand blocks.'
+        href: 'css-transitions.html',
+        title: 'CSS > Transitions',
+        tags: 'transition css',
+        body: 'We\'ve made some custom animation classes that will transition your content with only CSS. Each CSS transition consists of a base class that applies the necessary styles and additional classes that control the state of the transition.'
       }, {
-        href: 'parallax.html',
-        title: 'JavaScript > Parallax',
-        tags: 'parallax javascript js',
-        body: 'Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.'
+        href: 'typography.html',
+        title: 'CSS > Typography',
+        tags: 'typography css',
+        body: 'font, headers, blockquotes, flow text.'
+      }, {
+        href: 'autocomplete.html',
+        title: 'Forms > Autocomplete',
+        tags: 'autocomplete forms',
+        body: 'Add an autocomplete dropdown below your input to suggest possible values in your form. You can populate the list of autocomplete options dynamically as well.'
+      }, {
+        href: 'checkboxes.html',
+        title: 'Forms > Checkboxes',
+        tags: 'checkbox forms',
+        body: 'Use checkboxes when looking for yes or no answers. The for attribute is necessary to bind our custom checkbox with the input. Add the input\'s id as the value of the for attribute of the label.'
+      }, {
+        href: 'chips.html',
+        title: 'Forms > Chips',
+        tags: 'chip forms',
+        body: 'Chips can be used to represent small blocks of information. They are most commonly used either for contacts or for tags.'
       }, {
         href: 'pickers.html',
         title: 'Forms > Pickers',
         tags: 'date time picker forms',
         body: 'Pickers provide a simple way to select a date or time.'
-      }, {
-        href: 'preloader.html',
-        title: 'Components > Preloader',
-        tags: 'preloader components progress bar circle',
-        body: 'If you have content that will take a long time to load, you should give the user feedback. For this reason we provide a number activity + progress indicators.'
-      }, {
-        href: 'pulse.html',
-        title: 'CSS > Pulse',
-        tags: 'pulse css',
-        body: 'Draw attention to your buttons with this subtle but captivating effect.'
-      }, {
-        href: 'pushpin.html',
-        title: 'JavaScript > Pushpin',
-        tags: 'pushpin javascript js',
-        body: 'Pushpin is our fixed positioning plugin. You can check out our live examples: the fixed Table of Contents on the right.'
       }, {
         href: 'radio-buttons.html',
         title: 'Forms > Radio Buttons',
@@ -173,56 +148,91 @@
         title: 'Forms > Range',
         tags: 'range forms slider',
         body: 'Add a range slider for values with a wide range.'
-      }, {
-        href: 'sass.html',
-        title: 'CSS > Sass',
-        tags: 'sass css',
-        body: 'When using Sass, you can change the color scheme of your site extremely quickly.'
-      }, {
-        href: 'scrollspy.html',
-        title: 'JavaScript > Scrollspy',
-        tags: 'scrollspy javascript js',
-        body: 'Scrollspy is a jQuery plugin that tracks certain elements and which element the users screen is currently centered on.'
       }, {
         href: 'select.html',
         title: 'Forms > Select',
         tags: 'select forms',
         body: 'Select allows user input through specified options.'
       }, {
-        href: 'shadow.html',
-        title: 'CSS > Shadow',
-        tags: 'shadow css',
-        body: 'In material design, everything should have a certain z-depth that determines how far raised or close to the page the element is.'
+        href: 'switches.html',
+        title: 'Forms > Switches',
+        tags: 'switch forms',
+        body: 'Switches are special checkboxes used for binary states such as on / off'
       }, {
-        href: 'showcase.html',
-        title: 'Showcase',
-        tags: 'showcase',
-        body: 'Here is our showcase of websites that use materialize.'
+        href: 'text-inputs.html',
+        title: 'Forms > Text Inputs',
+        tags: 'text input forms field',
+        body: 'Text fields allow user input. The border should light up simply and clearly indicating which field the user is currently editing.'
+      }, {
+        href: 'fullscreen-slider-demo.html',
+        title: 'Fullscreen Slider Demo',
+        tags: 'fullscreen slider demo',
+        body: 'Fullscreen slider demo'
+      }, {
+        href: 'getting-started.html',
+        title: 'Getting Started',
+        tags: 'getting started install installation cdn download setup',
+        body: 'Learn how to easily start using Materialize in your website.'
+      }, {
+        href: 'auto-init.html',
+        title: 'JavaScript > Auto Init',
+        tags: 'auto init javascript js',
+        body: 'Auto Init allows you to initialize all of the Materialize Components with a single function call. It is important to note that you cannot pass in options using this method.'
+      }{
+        href: 'carousel.html',
+        title: 'JavaScript > Carousel',
+        tags: 'carousel javascript js',
+        body: 'Our Carousel is a robust and versatile component that can be an image slider, to an item carousel, to an onboarding experience.'
+      }, {
+        href: 'collapsible.html',
+        title: 'JavaScript > Collapsible',
+        tags: 'collapsible javascript js',
+        body: 'Collapsibles are accordion elements that expand when clicked on. They allow you to hide content that is not immediately relevant to the user.'
+      }, {
+        href: 'dropdown.html',
+        title: 'JavaScript > Dropdown',
+        tags: 'dropdown javascript js',
+        body: 'Add a dropdown list to any button.'
+      }, {
+        href: 'feature-discovery.html',
+        title: 'JavaScript > Feature Discovery',
+        tags: 'feature discovery javascript js',
+        body: 'Provide value and encourage return visits by introducing users to new features and functionality at contextually relevant moments.'
+      }, {
+        href: 'media.html',
+        title: 'JavaScript > Media',
+        tags: 'media javascript js slider materialbox',
+        body: 'Media components include things that have to do with large media objects like Images, Video, Audio, etc.'
+      }, {
+        href: 'modals.html',
+        title: 'JavaScript > Modals',
+        tags: 'modal javascript js',
+        body: 'Use a modal for dialog boxes, confirmation messages, or other content that can be called up.'
+      }, {
+        href: 'parallax.html',
+        title: 'JavaScript > Parallax',
+        tags: 'parallax javascript js',
+        body: 'Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.'
+      }, {
+        href: 'pushpin.html',
+        title: 'JavaScript > Pushpin',
+        tags: 'pushpin javascript js',
+        body: 'Pushpin is our fixed positioning plugin. You can check out our live examples: the fixed Table of Contents on the right.'
+      }, {
+        href: 'scrollspy.html',
+        title: 'JavaScript > Scrollspy',
+        tags: 'scrollspy javascript js',
+        body: 'Scrollspy is a jQuery plugin that tracks certain elements and which element the users screen is currently centered on.'
       }, {
         href: 'sidenav.html',
         title: 'JavaScript > Sidenav',
         tags: 'sidenav javascript js side nav',
         body: 'This is a slide out menu. You can add a dropdown to your sidebar by using our collapsible component.'
-      }, {
-        href: 'switches.html',
-        title: 'Forms > Switches',
-        tags: 'switch forms',
-        body: 'Switches are special checkboxes used for binary states such as on / off'
-      }, {
-        href: 'table.html',
-        title: 'CSS > Table',
-        tags: 'table css',
-        body: 'Tables are a nice way to organize a lot of data. We provide a few utility classes to help you style your table as easily as possible.'
       }, {
         href: 'tabs.html',
         title: 'JavaScript > Tabs',
         tags: 'tab javascript js',
         body: 'The tabs structure consists of an unordered list of tabs that have hashes corresponding to tab ids. Then when you click on each tab, only the container with the corresponding tab id will become visible.'
-      }, {
-        href: 'text-inputs.html',
-        title: 'Forms > Text Inputs',
-        tags: 'text input forms field',
-        body: 'Text fields allow user input. The border should light up simply and clearly indicating which field the user is currently editing.'
       }, {
         href: 'toasts.html',
         title: 'JavaScript > Toasts',
@@ -233,31 +243,21 @@
         title: 'Javascript > Tooltips',
         tags: 'tooltip javascript js',
         body: 'Tooltips are small, interactive, textual hints for mainly graphical elements. When using icons for actions you can use a tooltip to give people clarification on its function.'
-      }, {
-        href: 'typography.html',
-        title: 'CSS > Typography',
-        tags: 'typography css',
-        body: 'font, headers, blockquotes, flow text.'
       }, {
         href: 'waves.html',
         title: 'JavaScript > Waves',
         tags: 'wave javascript js',
         body: 'Waves is an external library that weve included in Materialize to allow us to create the ink effect outlined in Material Design'
       }, {
-        href: 'css-transitions.html',
-        title: 'CSS > Transitions',
-        tags: 'transition css',
-        body: 'We\'ve made some custom animation classes that will transition your content with only CSS. Each CSS transition consists of a base class that applies the necessary styles and additional classes that control the state of the transition.'
-      }, {
-        href: 'floating-action-button.html',
-        title: 'Components > Floating Action Button',
-        tags: 'floating action button fab component',
-        body: 'If you want a fixed floating action button, you can add multiple actions that will appear on hover.'
+        href: 'mobile.html',
+        title: 'Mobile',
+        tags: 'mobile',
+        body: 'Mobile only interactive components.'
       }, {
-        href: 'auto-init.html',
-        title: 'JavaScript > Auto Init',
-        tags: 'auto init javascript js',
-        body: 'Auto Init allows you to initialize all of the Materialize Components with a single function call. It is important to note that you cannot pass in options using this method.'
+        href: 'showcase.html',
+        title: 'Showcase',
+        tags: 'showcase',
+        body: 'Here is our showcase of websites that use materialize.'
       }
     ];