m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-06-26 03:06:25 +02:00
Code

new search results presentation

Browse Source
This commit is contained in:
Matthias Kretschmann 2018-11-18 19:34:55 +01:00
parent 2a95ffebb9
commit 1fea655105
Signed by: m
GPG Key ID: 606EEEF3C479A91F
13 changed files with 287 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
gatsby-config.js
View File

@ -99,10 +99,10 @@ module.exports = {
// Fields to index. If store === true value will be stored in index file. // Fields to index. If store === true value will be stored in index file.
// Attributes for custom indexing logic. See https://lunrjs.com/docs/lunr.Builder.html for details // Attributes for custom indexing logic. See https://lunrjs.com/docs/lunr.Builder.html for details
fields: [ fields: [
{ name: 'title', store: true, attributes: { boost: 20 } }, { name: 'title', attributes: { boost: 20 } },
{ name: 'tags', attributes: { boost: 15 } }, { name: 'tags', attributes: { boost: 15 } },
{ name: 'slug', store: true },
{ name: 'excerpt', attributes: { boost: 10 } }, { name: 'excerpt', attributes: { boost: 10 } },
{ name: 'slug', store: true },
{ name: 'content' } { name: 'content' }
], ],
// How to resolve each field's value for a supported node type // How to resolve each field's value for a supported node type

36
src/components/Post/PostTeaser.jsx Normal file
View File

@ -0,0 +1,36 @@
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { Link } from 'gatsby'
import Image from '../atoms/Image'
import styles from './PostTeaser.module.scss'
export default class PostTeaser extends PureComponent {
static propTypes = {
post: PropTypes.object.isRequired,
toggleSearch: PropTypes.func
}
render() {
const { post, toggleSearch } = this.props
return (
<li>
<Link to={post.fields.slug} onClick={toggleSearch && toggleSearch}>
{post.frontmatter.image ? (
<>
<Image
fluid={post.frontmatter.image.childImageSharp.fluid}
alt={post.frontmatter.title}
/>
<h4 className={styles.postTitle}>{post.frontmatter.title}</h4>
</>
) : (
<div className={styles.empty}>
<h4 className={styles.postTitle}>{post.frontmatter.title}</h4>
</div>
)}
</Link>
</li>
)
}
}

29
src/components/Post/PostTeaser.module.scss Normal file
View File

@ -0,0 +1,29 @@
@import 'variables';
.postTitle {
display: inline-block;
margin-top: $spacer / 4;
margin-bottom: 0;
font-size: $font-size-small;
line-height: $line-height-small;
color: $brand-grey-light;
padding-left: .2rem;
padding-right: .2rem;
transition: color .2s ease-out;
@media (min-width: $screen-md) {
font-size: $font-size-base;
}
}
.empty {
height: 100%;
min-height: 80px;
display: flex;
align-items: center;
padding: $spacer / 4;
.postTitle {
margin-top: 0;
}
}

12
src/components/Search/Search.jsx
View File

@ -34,7 +34,9 @@ export default class Search extends PureComponent {
search = event => { search = event => {
const query = event.target.value const query = event.target.value
const results = this.getSearchResults(query) // wildcard search https://lunrjs.com/guides/searching.html#wildcards
const results = query.length > 1 ? this.getSearchResults(`${query}*`) : []
this.setState({ this.setState({
results, results,
query query
@ -53,6 +55,7 @@ export default class Search extends PureComponent {
<Helmet> <Helmet>
<body className="hasSearchOpen" /> <body className="hasSearchOpen" />
</Helmet> </Helmet>
<CSSTransition <CSSTransition
appear={searchOpen} appear={searchOpen}
in={searchOpen} in={searchOpen}
@ -67,7 +70,12 @@ export default class Search extends PureComponent {
/> />
</section> </section>
</CSSTransition> </CSSTransition>
<SearchResults results={results} onClose={this.toggleSearch} />
<SearchResults
searchQuery={query}
results={results}
toggleSearch={this.toggleSearch}
/>
</> </>
)} )}
</> </>

6
src/components/Search/Search.module.scss
View File

@ -43,10 +43,4 @@
:global(.hasSearchOpen) { :global(.hasSearchOpen) {
overflow: hidden; overflow: hidden;
// more cross-browser backdrop-filter
main > div:first-child {
transition: filter .85s ease-out;
filter: blur(5px);
}
} }

44
src/components/Search/SearchInput.jsx
View File

@ -1,24 +1,26 @@
import React from 'react' import React, { PureComponent } from 'react'
import Input from '../atoms/Input' import Input from '../atoms/Input'
import styles from './SearchInput.module.scss' import styles from './SearchInput.module.scss'
const SearchInput = ({ onToggle, ...props }) => ( export default class SearchInput extends PureComponent {
<> render() {
<Input return (
className={styles.searchInput} <>
type="search" <Input
placeholder="Search everything" className={styles.searchInput}
autoFocus // eslint-disable-line type="search"
{...props} placeholder="Search everything"
/> autoFocus // eslint-disable-line
<button {...this.props}
className={styles.searchInputClose} />
onClick={onToggle} <button
title="Close search" className={styles.searchInputClose}
> onClick={this.props.onToggle}
&times; title="Close search"
</button> >
</> &times;
) </button>
</>
export default SearchInput )
}
}

2
src/components/Search/SearchInput.module.scss
View File

@ -16,7 +16,7 @@
.searchInputClose { .searchInputClose {
position: absolute; position: absolute;
right: $spacer / 2; right: $spacer / 2;
top: $spacer / 4; top: $spacer / 5;
font-size: $font-size-h3; font-size: $font-size-h3;
color: $brand-grey-light; color: $brand-grey-light;

112
src/components/Search/SearchResults.jsx
View File

@ -1,31 +1,97 @@
import React from 'react' import React, { PureComponent } from 'react'
import ReactDOM from 'react-dom' import ReactDOM from 'react-dom'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { Link } from 'gatsby' import { graphql, StaticQuery } from 'gatsby'
import Container from '../atoms/Container' import Container from '../atoms/Container'
import PostTeaser from '../Post/PostTeaser'
import styles from './SearchResults.module.scss' import styles from './SearchResults.module.scss'
const SearchResults = ({ results, onClose }) => const SearchEmpty = ({ searchQuery, results }) => (
ReactDOM.createPortal( <div className={styles.empty}>
<div className={styles.searchResults}> <header className={styles.emptyMessage}>
<Container> <p className={styles.emptyMessageText}>
<ul> {searchQuery.length > 1 && results.length === 0
{results.length > 0 && ? 'No results found'
results.map(page => ( : searchQuery.length === 1
<li key={page.slug}> ? 'Just one more character'
<Link to={page.slug} onClick={onClose}> : 'Awaiting your input'}
{page.title} </p>
</Link> </header>
</li> </div>
))} )
</ul>
</Container>
</div>,
document.getElementById('document')
)
SearchResults.propTypes = { SearchEmpty.propTypes = {
results: PropTypes.array.isRequired results: PropTypes.array.isRequired,
searchQuery: PropTypes.string.isRequired
} }
export default SearchResults const query = graphql`
query {
allMarkdownRemark {
edges {
node {
id
frontmatter {
title
image {
childImageSharp {
...ImageFluidThumb
}
}
}
fields {
slug
}
}
}
}
}
`
export default class SearchResults extends PureComponent {
static propTypes = {
results: PropTypes.array.isRequired,
searchQuery: PropTypes.string.isRequired,
toggleSearch: PropTypes.func.isRequired
}
render() {
const { searchQuery, results, toggleSearch } = this.props
return (
<StaticQuery
query={query}
render={data => {
const posts = data.allMarkdownRemark.edges
// creating portal to break out of DOM node we're in
// and render the results in content container
return ReactDOM.createPortal(
<div className={styles.searchResults}>
<Container>
{results.length > 0 ? (
<ul>
{results.map(page =>
posts
.filter(post => post.node.fields.slug === page.slug)
.map(({ node }) => (
<PostTeaser
key={page.slug}
post={node}
toggleSearch={toggleSearch}
/>
))
)}
</ul>
) : (
<SearchEmpty searchQuery={searchQuery} results={results} />
)}
</Container>
</div>,
document.getElementById('document')
)
}}
/>
)
}
}

79
src/components/Search/SearchResults.module.scss
View File

@ -9,33 +9,80 @@
top: 0; top: 0;
bottom: 0; bottom: 0;
background: rgba($body-background-color, .95); background: rgba($body-background-color, .95);
// backdrop-filter: blur(5px); backdrop-filter: blur(5px);
animation: fadein .3s; animation: fadein .3s;
overflow: scroll;
-webkit-overflow-scrolling: touch;
height: 91vh;
ul { ul {
@include breakoutviewport; @include breakoutviewport;
padding-top: $spacer; padding: $spacer $spacer / 2;
padding-bottom: $spacer;
margin-bottom: 0; margin-bottom: 0;
overflow: scroll; display: flex;
-webkit-overflow-scrolling: touch; flex-wrap: wrap;
max-height: 81vh; justify-content: space-between;
li { li {
margin-left: $spacer; display: block;
margin-right: $spacer; flex: 0 0 48%;
} margin-bottom: $spacer;
li::before { @media (min-width: $screen-sm) {
top: $spacer / 7; flex-basis: 31%;
}
&::before {
display: none;
}
} }
} }
img {
margin-bottom: 0;
}
a { a {
padding-top: $spacer / 6; display: block;
padding-bottom: $spacer / 6;
> div {
margin-bottom: 0;
}
&:hover,
&:focus {
h4 {
color: $link-color;
}
}
}
}
.empty {
padding-top: 15vh;
display: flex;
justify-content: center;
}
.emptyMessage {
color: $brand-grey-light;
}
.emptyMessageText {
margin-bottom: 0;
position: relative;
&::after {
overflow: hidden;
display: inline-block; display: inline-block;
vertical-align: bottom;
animation: ellipsis steps(4, end) 1s infinite;
content: '\2026'; // ascii code for the ellipsis character
width: 0;
position: absolute;
left: 101%;
bottom: 0;
} }
} }
@ -48,3 +95,9 @@
opacity: 1; opacity: 1;
} }
} }
@keyframes ellipsis {
to {
width: 1rem;
}
}

36
src/components/atoms/Image.jsx
View File

@ -1,23 +1,29 @@
import React from 'react' import React, { PureComponent } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { graphql } from 'gatsby' import { graphql } from 'gatsby'
import Img from 'gatsby-image' import Img from 'gatsby-image'
import styles from './Image.module.scss' import styles from './Image.module.scss'
const Image = ({ fluid, fixed, alt }) => ( export default class Image extends PureComponent {
<Img static propTypes = {
className={styles.imageWrap} fluid: PropTypes.object,
backgroundColor="#dfe8ef" fixed: PropTypes.object,
fluid={fluid ? fluid : null} alt: PropTypes.string.isRequired
fixed={fixed ? fixed : null} }
alt={alt}
/>
)
Image.propTypes = { render() {
fluid: PropTypes.object, const { fluid, fixed, alt } = this.props
fixed: PropTypes.object,
alt: PropTypes.string.isRequired return (
<Img
className={styles.imageWrap}
backgroundColor="#dfe8ef"
fluid={fluid ? fluid : null}
fixed={fixed ? fixed : null}
alt={alt}
/>
)
}
} }
export const imageSizeDefault = graphql` export const imageSizeDefault = graphql`
@ -35,5 +41,3 @@ export const imageSizeThumb = graphql`
} }
} }
` `
export default Image

12
src/components/atoms/Modal.module.scss
View File

@ -9,8 +9,8 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
z-index: 9; z-index: 9;
background: rgba($body-background-color, .9); background: rgba($body-background-color, .95);
// backdrop-filter: blur(5px); backdrop-filter: blur(5px);
animation: fadein .3s; animation: fadein .3s;
padding: $spacer; padding: $spacer;
@ -65,10 +65,10 @@
overflow: hidden; overflow: hidden;
// more cross-browser backdrop-filter // more cross-browser backdrop-filter
body > div:first-child { // body > div:first-child {
transition: filter .85s ease-out; // transition: filter .85s ease-out;
filter: blur(5px); // filter: blur(5px);
} // }
} }
.modal__title { .modal__title {

36
src/components/molecules/RelatedPosts.jsx
View File

@ -1,7 +1,7 @@
import React, { Fragment, PureComponent } from 'react' import React, { PureComponent } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { Link, graphql, StaticQuery } from 'gatsby' import { graphql, StaticQuery } from 'gatsby'
import Image from '../atoms/Image' import PostTeaser from '../Post/PostTeaser'
import styles from './RelatedPosts.module.scss' import styles from './RelatedPosts.module.scss'
const query = graphql` const query = graphql`
@ -45,32 +45,6 @@ const postsWithDataFilter = (postsArray, key, valuesToFind) => {
return newArray return newArray
} }
const PostItem = ({ post }) => {
return (
<li>
<Link to={post.node.fields.slug}>
{post.node.frontmatter.image ? (
<Fragment>
<Image
fluid={post.node.frontmatter.image.childImageSharp.fluid}
alt={post.node.frontmatter.title}
/>
<h4 className={styles.postTitle}>{post.node.frontmatter.title}</h4>
</Fragment>
) : (
<div className={styles.empty}>
<h4 className={styles.postTitle}>{post.node.frontmatter.title}</h4>
</div>
)}
</Link>
</li>
)
}
PostItem.propTypes = {
post: PropTypes.object.isRequired
}
class RelatedPosts extends PureComponent { class RelatedPosts extends PureComponent {
shufflePosts = () => { shufflePosts = () => {
this.forceUpdate() this.forceUpdate()
@ -95,8 +69,8 @@ class RelatedPosts extends PureComponent {
{filteredPosts {filteredPosts
.sort(() => 0.5 - Math.random()) .sort(() => 0.5 - Math.random())
.slice(0, 6) .slice(0, 6)
.map(post => ( .map(({ node }) => (
<PostItem key={post.node.id} post={post} /> <PostTeaser key={node.id} post={node} />
))} ))}
</ul> </ul>
<button <button

28
src/components/molecules/RelatedPosts.module.scss
View File

@ -1,18 +1,6 @@
@import 'variables'; @import 'variables';
@import 'mixins'; @import 'mixins';
.empty {
height: 100%;
min-height: 80px;
display: flex;
align-items: center;
padding: $spacer / 4;
h4 {
margin-top: 0;
}
}
.relatedPosts { .relatedPosts {
margin-top: -($spacer * 2); margin-top: -($spacer * 2);
margin-bottom: $spacer; margin-bottom: $spacer;
@ -65,22 +53,6 @@
font-size: $font-size-h3; font-size: $font-size-h3;
} }
.postTitle {
display: inline-block;
margin-top: $spacer / 4;
margin-bottom: 0;
font-size: $font-size-small;
line-height: $line-height-small;
color: $brand-grey-light;
padding-left: .2rem;
padding-right: .2rem;
transition: color .2s ease-out;
@media (min-width: $screen-md) {
font-size: $font-size-base;
}
}
.button { .button {
margin: auto; margin: auto;
display: block; display: block;