Add Quick Search plugin to website navbar

bridgetown-website/Gemfile

@@ -8,3 +8,4 @@ gem 'bridgetown', path: '../bridgetown'
 gem "bridgetown-seo-tag", "~> 3.0", :group => :bridgetown_plugins
 
 gem "bridgetown-feed", "~> 1.0", :group => :bridgetown_plugins
+gem "bridgetown-quick-search", group: :bridgetown_plugins

bridgetown-website/bridgetown.config.yml

@@ -12,6 +12,7 @@ collections:
     permalink: /:collection/:path
     sort_by: order
     name: Documentation
+    foo: bar
 
 defaults:
   - scope:

bridgetown-website/frontend/javascript/index.js

@@ -4,6 +4,7 @@ import SwupSlideTheme from "@swup/slide-theme"
 import SwupBodyClassPlugin from "@swup/body-class-plugin"
 import SwupScrollPlugin from "@swup/scroll-plugin"
 import animateScrollTo from "animated-scroll-to"
+import "bridgetown-quick-search"
 
 const toggleMenuIcon = button => {
   button.querySelectorAll(".icon").forEach(item => {

bridgetown-website/frontend/styles/controls.scss

@@ -34,7 +34,8 @@
   transition: opacity 0.2s ease-in-out;
 }
 
-a, .button {
+a,
+.button {
   transition: 0.2s ease-in-out;
   transition-property: background, background-color, color;
 }
@@ -58,7 +59,7 @@ a, .button {
   position: fixed;
   bottom: 60px;
   right: 12px;
-  box-shadow: 0px 3px 9px rgba(0,0,0,0.3);
+  box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.3);
   animation-name: fade-in-button;
   animation-duration: 0.75s;
 
@@ -70,3 +71,31 @@ a, .button {
     animation-duration: 0.45s;
   }
 }
+
+nav .search-item input {
+  font-size: 1em;
+  height: 1.85em;
+  padding: 0.2em 0.1em;
+  background: white;
+  opacity: 0.8;
+  width: 100%;
+  max-width: 400px;
+
+  border: none;
+  &:focus {
+    opacity: 1;
+  }
+
+  @include desktop {
+    width: calc(9vw * 2);
+  }
+}
+bridgetown-search-results {
+  /*  --text-color: green;
+  --link-color: orange;
+  --divider-color: purple; */
+
+  &::part(inner) {
+    //    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
+  }
+}

bridgetown-website/frontend/styles/layout.scss

@@ -15,6 +15,12 @@
   }
 }
 
+nav > .container {
+  @include touch {
+    overflow: visible;
+  }
+}
+
 .hero {
   // Colors
   .navbar {

bridgetown-website/package.json

@@ -14,6 +14,7 @@
   "devDependencies": {
     "@babel/core": "^7.9.0",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-proposal-decorators": "^7.10.1",
     "@babel/plugin-transform-runtime": "^7.9.0",
     "@babel/preset-env": "^7.9.0",
     "babel-loader": "^8.1.0",

bridgetown-website/plugins/builders/liquid_book.rb

@@ -21,9 +21,10 @@ def build
     liquid_tag "component_previews", :preview_tag
   end
 
-  def load_liquid_components(dir)
+  def load_liquid_components(dir, root: true)
     @components ||= {}
     @entry_filter ||= Bridgetown::EntryFilter.new(site)
+    @current_root = dir if root
 
     return unless File.directory?(dir) && !@entry_filter.symlink?(dir)
 
@@ -32,18 +33,18 @@ def load_liquid_components(dir)
     end
 
     entries.each do |entry|
-      path = site.in_source_dir(dir, entry)
+      path = File.join(dir, entry)
       next if @entry_filter.symlink?(path)
 
       if File.directory?(path)
-        load_liquid_components(path)
+        load_liquid_components(path, root: false)
       else
         template = ::File.read(path)
         component = LiquidComponent.parse(template)
 
         unless component.name.nil?
           key = sanitize_filename(File.basename(path, ".*"))
-          key = File.join(File.dirname(path.sub(site.in_source_dir("_components") + "/", "")), key)
+          key = File.join(Pathname.new(File.dirname(path)).relative_path_from(@current_root), key)
           @components[key] = component.to_h.deep_stringify_keys.merge({
             "relative_path" => key,
           })
@@ -68,7 +69,7 @@ def preview_tag(_attributes, tag)
     }
 
     template = site.liquid_renderer.file(preview_path).parse(
-      File.read(preview_path)
+      File.exist?(preview_path) ? File.read(preview_path) : ""
     )
     template.warnings.each do |e|
       Bridgetown.logger.warn "Liquid Warning:",

bridgetown-website/src/_includes/docs_variables_table.html → bridgetown-website/src/_components/docs/variables_table.liquid

@@ -6,7 +6,7 @@
     </tr>
   </thead>
   <tbody>
-  {% for var in include.scope -%}
+  {% for var in scope -%}
     <tr>
       <td><p><code>{{ var.name }}</code></p></td>
       <td><p>{{- var.description -}}</p></td>

bridgetown-website/src/_data/bridgetown_variables.yml

@@ -80,7 +80,7 @@ site:
       they'll be easy to access and will regenerate pages when changed. This is a
       good place to put <code>&lt;head&gt;</code> content like site title,
       description, icon, social media handles, etc. Then you can reference
-      {{ site.metadata.title }}, etc. in your Liquid templates. 
+      {{ site.metadata.title }}, etc. in your Liquid templates.
   - name: "site.[CONFIGURATION_DATA]"
     description: >-
       All the variables set via the command line and your <code>bridgetown.config.yml</code> are available
@@ -123,9 +123,8 @@ page:
       <a href="/docs/front-matter/">front matter</a>.
   - name: page.collection
     description: >-
-      The label of the collection to which this document belongs. e.g. <code>posts</code> for a post, or
-      <code>puppies</code> for a document at path <code>_puppies/rover.md</code>. If not part of a
-      collection, an empty string is returned.
+      The collection to which this document belongs. <a href="/docs/collections#liquid-attributes" data-no-swup>Information on collection variables here.</a> If not part of a
+      collection, nothing is returned.
   - name: page.tags
     description: >-
       The list of tags to which this post belongs. These can be specified in the

bridgetown-website/src/_docs/content/pagination.md

@@ -73,4 +73,4 @@ To display pagination links, simply use the `paginator` Liquid object as follows
 
 The `paginator` Liquid object provides the following attributes:
 
-{% include docs_variables_table.html scope=site.data.bridgetown_variables.paginator %}
+{% render "docs/variables_table", scope: site.data.bridgetown_variables.paginator %}

bridgetown-website/src/_docs/variables.md

@@ -12,15 +12,15 @@ The following is a reference of the available data.
 
 ## Global Variables
 
-{% include docs_variables_table.html scope=site.data.bridgetown_variables.global %}
+{% render "docs/variables_table", scope: site.data.bridgetown_variables.global %}
 
 ## Site Variables
 
-{% include docs_variables_table.html scope=site.data.bridgetown_variables.site %}
+{% render "docs/variables_table", scope: site.data.bridgetown_variables.site %}
 
 ## Page Variables
 
-{% include docs_variables_table.html scope=site.data.bridgetown_variables.page %}
+{% render "docs/variables_table", scope: site.data.bridgetown_variables.page %}
 
 <div class="note">
   <h5>Top Tip: Use Custom Front Matter</h5>

bridgetown-website/src/_includes/navbar.html

@@ -32,16 +32,19 @@ <h1 class="title is-5">Bridgetown</h1>
       </div>
 
       <div class="navbar-end">
+        <div class="navbar-item search-item">
+          {% render "bridgetown_quick_search/search", placeholder: "Search", input_class: "input" %}
+        </div>
         <a class="navbar-item" href="https://github.com/{{ site.metadata.github }}" target="_blank">
           <button class="button is-info is-small">
             <span class="icon"> <i class="fa fa-github is-size-6"></i> </span>
             <span class="has-text-weight-bold">Star</span>
           </button>
         </a>
 
-        <a class="navbar-item" href="https://github.com/bridgetownrb/bridgetown/issues/new?assignees=&labels=bug&template=bug_report.md&title=" target="_blank">
-          <span class="icon"><i class="fa fa-bug is-size-6"></i></span>
-          <span>Report Issue</span>
+        <a class="navbar-item is-hidden-desktop-only" href="https://github.com/bridgetownrb/bridgetown/issues/new?assignees=&labels=bug&template=bug_report.md&title=" target="_blank">
+          <span class="icon"><i class="fa fa-exclamation-circle is-size-6"></i></span>
+          <span class="is-hidden-tablet">Report Issue</span>
         </a>
         <a class="navbar-item" href="https://twitter.com/{{ site.metadata.twitter }}" target="_blank">
           <span class="icon"><i class="fa fa-twitter is-size-6"></i></span>

bridgetown-website/src/_includes/navbar.scss

@@ -1,4 +1,12 @@
 .navbar {
+  .container {
+    .navbar-brand {
+      @include desktop {
+        margin-left: -1.55rem;
+      }
+    }
+  }
+
   .bridgetown-logo {
     width: 152px;
     margin-left: -6px;

bridgetown-website/webpack.config.js

@@ -36,7 +36,8 @@ module.exports = {
           options: {
             presets: ["@babel/preset-env"],
             plugins: [
-              "@babel/plugin-proposal-class-properties",
+              ["@babel/plugin-proposal-decorators", { "legacy": true }],
+              ["@babel/plugin-proposal-class-properties", { "loose" : true }],
               [
                 "@babel/plugin-transform-runtime",
                 {