Add search box

2020-11-15 16:59:37 +02:00
parent 303e940a41
commit 9fa5716b3d
2 changed files with 131 additions and 103 deletions
--- a/gridsome.config.js
+++ b/gridsome.config.js
@@ -5,109 +5,107 @@
 // To restart press CTRL + C in terminal and run `gridsome develop`

 module.exports = {
-  siteName: 'Alliance for a Conscious Internet',
-  siteDescription: 'ThreeFold Partners',
-  siteUrl: 'http://localhost:8080',
-  plugins: [
-    {
-      use: 'gridsome-plugin-tailwindcss',
-      options: {
-        tailwindConfig: './tailwind.config.js',
-        purgeConfig: {
-          whitelist: ['svg-inline--fa', 'table', 'table-striped', 'table-bordered', 'table-hover', 'table-sm'],
-          whitelistPatterns: [/fa-$/, /blockquote$/, /code$/, /pre$/, /table$/, /table-$/]
+    siteName: 'ACI',
+    siteDescription: 'ThreeFold Partners',
+    siteUrl: 'http://localhost:8080',
+    plugins: [{
+            use: 'gridsome-plugin-tailwindcss',
+            options: {
+                tailwindConfig: './tailwind.config.js',
+                purgeConfig: {
+                    whitelist: ['svg-inline--fa', 'table', 'table-striped', 'table-bordered', 'table-hover', 'table-sm'],
+                    whitelistPatterns: [/fa-$/, /blockquote$/, /code$/, /pre$/, /table$/, /table-$/]
+                },
+                presetEnvConfig: {},
+                shouldPurge: false,
+                shouldImport: true,
+                shouldTimeTravel: true,
+                shouldPurgeUnusedKeyframes: true,
+            }
        },
-        presetEnvConfig: {},
-        shouldPurge: false,
-        shouldImport: true,
-        shouldTimeTravel: true,
-        shouldPurgeUnusedKeyframes: true,
-      }
-    }, 
-    {
-      use: 'gridsome-source-static-meta',
-      options: {
-        path: 'content/site/*.json'
-      }
-    }, 
-    {
-      use: '@gridsome/source-filesystem',
-      options: {
-        typeName: 'Person',
-        path: './content/person/**/*.md',
-        refs: {
-          tags: {
-            typeName: 'Tag',
-            create: true
-          }
-        }
-      }
-    }, 
-    {
-      use: '@gridsome/source-filesystem',
-      options: {
-        typeName: 'Blog',
-        path: './content/blog/**/*.md',
-        templates: {
-          BlogPost: '/blog/:id'
+        {
+            use: 'gridsome-source-static-meta',
+            options: {
+                path: 'content/site/*.json'
+            }
+        },
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'Person',
+                path: './content/person/**/*.md',
+                refs: {
+                    tags: {
+                        typeName: 'Tag',
+                        create: true
+                    }
+                }
+            }
+        },
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'Blog',
+                path: './content/blog/**/*.md',
+                templates: {
+                    BlogPost: '/blog/:id'
+                },
+                refs: {
+                    author: 'Person',
+                    tags: {
+                        typeName: 'Tag',
+                        create: true
+                    }
+                }
+            }
        },
-        refs: {
-          author: 'Person',
-          tags: {
-            typeName: 'Tag',
-            create: true
-          }
-        }
-      }
-    },

-    {
-      use: '@gridsome/source-filesystem',
-      options: {
-        typeName: 'Project',
-        path: './content/project/**/*.md',
-        templates: {
-          Project: '/project/:id'
-        },
-        refs: {
-          author: 'Person',
-          members: 'Person',
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'Project',
+                path: './content/project/**/*.md',
+                templates: {
+                    Project: '/project/:id'
+                },
+                refs: {
+                    author: 'Person',
+                    members: 'Person',

-          tags: {
-            typeName: 'Tag',
-            create: true
-          }
+                    tags: {
+                        typeName: 'Tag',
+                        create: true
+                    }
+                }
+            }
        }
-      }
+    ],
+    transformers: {
+        remark: {
+            plugins: [
+                '@noxify/gridsome-remark-table-align', ['@noxify/gridsome-remark-classes', {
+                    'table': 'table table-striped',
+                    'tableCell[align=center]': 'text-center',
+                    'tableCell[align=right]': 'text-right'
+                }]
+            ]
+        }
+    },
+    templates: {
+        Blog: [{
+            path: '/blog/:id'
+        }],
+        Person: [{
+            path: '/people/:id',
+            component: '~/templates/Person.vue'
+        }],
+        Tag: [{
+            path: '/tags/:id',
+            component: '~/templates/Tag.vue'
+        }],
+        Project: [{
+            path: '/project/:id',
+            component: '~/templates/Project.vue'
+        }],
    }
-  ],
-  transformers: {
-    remark: {
-      plugins: [
-        '@noxify/gridsome-remark-table-align',
-        ['@noxify/gridsome-remark-classes', {
-          'table': 'table table-striped',
-          'tableCell[align=center]': 'text-center',
-          'tableCell[align=right]': 'text-right'
-        }]
-      ]
-    }
-  },
-  templates: {
-    Blog: [{
-      path: '/blog/:id'
-    }],
-    Person: [{
-      path: '/people/:id',
-      component: '~/templates/Person.vue'
-    }],
-    Tag: [{
-      path: '/tags/:id',
-      component: '~/templates/Tag.vue'
-    }],
-    Project: [{
-      path: '/project/:id',
-      component: '~/templates/Project.vue'
-    }],
-  }
 }
--- a/src/layouts/partials/Navbar.vue
+++ b/src/layouts/partials/Navbar.vue
@@ -75,7 +75,7 @@
          <li
            :key="element.name"
            v-for="(element, index) in $static.metadata.navigation"
-            class="hover:text-white"
+            class="hover:text-white py-1"
            v-bind:class="{
              'mr-4':
                index != Object.keys($static.metadata.navigation).length - 1,
@@ -94,11 +94,35 @@
            }}</g-link>
          </li>
        </ul>
+        <div class="md:hidden inline-flex rounded-full border-grey-light border w-1/2">
+          <button>
+            <span class="w-auto flex justify-end items-center text-grey p-2">
+              <font-awesome :icon="['fas', 'search']" />
+            </span>
+          </button>
+          <input
+            class="w-full rounded mr-4 bg-black"
+            type="text"
+            placeholder="Search..."
+          />
+        </div>
      </nav>
      <div
        class="hidden text-gray-400 md:ml-auto md:inline-block md:order-last"
      >
-        <ul class="list-none flex justify-center md:justify-end">
+        <div class="inline-flex rounded-full border-grey-light border w-1/2">
+          <button>
+            <span class="w-auto flex justify-end items-center text-grey p-2">
+              <font-awesome :icon="['fas', 'search']" />
+            </span>
+          </button>
+          <input
+            class="w-full rounded mr-4 bg-black"
+            type="text"
+            placeholder="Search..."
+          />
+        </div>
+        <ul class="list-none inline-flex justify-center md:justify-end">
          <li class="mr-0 sm:mr-6">
            <theme-switcher v-on="$listeners" :theme="theme" />
          </li>
@@ -190,3 +214,9 @@ query {
  }
 }
 </static-query>
+
+<style scoped>
+input:focus {
+  outline: 0;
+}
+</style>