Add search box

This commit is contained in:
samaradel
2020-11-15 16:59:37 +02:00
parent 303e940a41
commit 9fa5716b3d
2 changed files with 131 additions and 103 deletions

View File

@@ -5,109 +5,107 @@
// To restart press CTRL + C in terminal and run `gridsome develop` // To restart press CTRL + C in terminal and run `gridsome develop`
module.exports = { module.exports = {
siteName: 'Alliance for a Conscious Internet', siteName: 'ACI',
siteDescription: 'ThreeFold Partners', siteDescription: 'ThreeFold Partners',
siteUrl: 'http://localhost:8080', siteUrl: 'http://localhost:8080',
plugins: [ plugins: [{
{ use: 'gridsome-plugin-tailwindcss',
use: 'gridsome-plugin-tailwindcss', options: {
options: { tailwindConfig: './tailwind.config.js',
tailwindConfig: './tailwind.config.js', purgeConfig: {
purgeConfig: { whitelist: ['svg-inline--fa', 'table', 'table-striped', 'table-bordered', 'table-hover', 'table-sm'],
whitelist: ['svg-inline--fa', 'table', 'table-striped', 'table-bordered', 'table-hover', 'table-sm'], whitelistPatterns: [/fa-$/, /blockquote$/, /code$/, /pre$/, /table$/, /table-$/]
whitelistPatterns: [/fa-$/, /blockquote$/, /code$/, /pre$/, /table$/, /table-$/] },
presetEnvConfig: {},
shouldPurge: false,
shouldImport: true,
shouldTimeTravel: true,
shouldPurgeUnusedKeyframes: true,
}
}, },
presetEnvConfig: {}, {
shouldPurge: false, use: 'gridsome-source-static-meta',
shouldImport: true, options: {
shouldTimeTravel: true, path: 'content/site/*.json'
shouldPurgeUnusedKeyframes: true, }
} },
}, {
{ use: '@gridsome/source-filesystem',
use: 'gridsome-source-static-meta', options: {
options: { typeName: 'Person',
path: 'content/site/*.json' path: './content/person/**/*.md',
} refs: {
}, tags: {
{ typeName: 'Tag',
use: '@gridsome/source-filesystem', create: true
options: { }
typeName: 'Person', }
path: './content/person/**/*.md', }
refs: { },
tags: { {
typeName: 'Tag', use: '@gridsome/source-filesystem',
create: true options: {
} typeName: 'Blog',
} path: './content/blog/**/*.md',
} templates: {
}, BlogPost: '/blog/:id'
{ },
use: '@gridsome/source-filesystem', refs: {
options: { author: 'Person',
typeName: 'Blog', tags: {
path: './content/blog/**/*.md', typeName: 'Tag',
templates: { create: true
BlogPost: '/blog/:id' }
}
}
}, },
refs: {
author: 'Person',
tags: {
typeName: 'Tag',
create: true
}
}
}
},
{ {
use: '@gridsome/source-filesystem', use: '@gridsome/source-filesystem',
options: { options: {
typeName: 'Project', typeName: 'Project',
path: './content/project/**/*.md', path: './content/project/**/*.md',
templates: { templates: {
Project: '/project/:id' Project: '/project/:id'
}, },
refs: { refs: {
author: 'Person', author: 'Person',
members: 'Person', members: 'Person',
tags: { tags: {
typeName: 'Tag', typeName: 'Tag',
create: true 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'
}],
}
} }

View File

@@ -75,7 +75,7 @@
<li <li
:key="element.name" :key="element.name"
v-for="(element, index) in $static.metadata.navigation" v-for="(element, index) in $static.metadata.navigation"
class="hover:text-white" class="hover:text-white py-1"
v-bind:class="{ v-bind:class="{
'mr-4': 'mr-4':
index != Object.keys($static.metadata.navigation).length - 1, index != Object.keys($static.metadata.navigation).length - 1,
@@ -94,11 +94,35 @@
}}</g-link> }}</g-link>
</li> </li>
</ul> </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> </nav>
<div <div
class="hidden text-gray-400 md:ml-auto md:inline-block md:order-last" 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"> <li class="mr-0 sm:mr-6">
<theme-switcher v-on="$listeners" :theme="theme" /> <theme-switcher v-on="$listeners" :theme="theme" />
</li> </li>
@@ -190,3 +214,9 @@ query {
} }
} }
</static-query> </static-query>
<style scoped>
input:focus {
outline: 0;
}
</style>