mirror of
https://github.com/kremalicious/blog.git
synced 2024-12-22 17:23:50 +01:00
docs updates
This commit is contained in:
parent
1fea655105
commit
c35e9f7c1f
GPG Key ID:
606EEEF3C479A91F
22
README.md
22
README.md
@ -19,8 +19,8 @@
|
||||
- [🎉 Features](#-features)
|
||||
- [🎆 EXIF extraction](#-exif-extraction)
|
||||
- [💰 Cryptocurrency donation via Web3/MetaMask](#-cryptocurrency-donation-via-web3metamask)
|
||||
- [🕸 Related Posts](#-related-posts)
|
||||
- [🔍 Search](#-search)
|
||||
- [🕸 Related Posts](#-related-posts)
|
||||
- [🐝 Coinhive](#-coinhive)
|
||||
- [🏆 SEO component](#-seo-component)
|
||||
- [📈 Matomo (formerly Piwik) analytics tracking](#-matomo-formerly-piwik-analytics-tracking)
|
||||
@ -62,7 +62,7 @@ Lets visitors say thanks with Bitcoin or Ether. Uses [web3.js](https://github.co
|
||||
|
||||
As a fallback, QR codes are generated with [react-qr-svg](https://github.com/no23reason/react-qr-svg) from the addresses defined in [`config.js`](config.js).
|
||||
|
||||
<img width="1082" alt="screen shot 2018-10-14 at 22 03 57" src="https://user-images.githubusercontent.com/90316/46921544-1a512080-cffd-11e8-919f-d3e86dbd5cc5.png" />
|
||||
<img width="700" alt="screen shot 2018-10-14 at 22 03 57" src="https://user-images.githubusercontent.com/90316/46921544-1a512080-cffd-11e8-919f-d3e86dbd5cc5.png" />
|
||||
|
||||
If you want to know how this works, have a look at the respective components under
|
||||
|
||||
@ -74,20 +74,28 @@ If you want to know how this works, have a look at the respective components und
|
||||
- [`src/components/Web3Donation/utils.jsx`](src/components/Web3Donation/utils.jsx)
|
||||
- [`src/components/atoms/Qr.jsx`](src/components/atoms/Qr.jsx)
|
||||
|
||||
### 🔍 Search
|
||||
|
||||
A global search is provided with [gatsby-plugin-lunr](https://github.com/humanseelabs/gatsby-plugin-lunr). That plugin creates a [Lunr](https://lunrjs.com) search index file of all posts on build time which is then queried against when the search field is used.
|
||||
|
||||
<img width="700" alt="screen shot 2018-11-18 at 19 44 30" src="https://user-images.githubusercontent.com/90316/48676679-634f4400-eb6a-11e8-936d-293505d5c5d9.png">
|
||||
|
||||
If you want to know how this works, have a look at the respective components under
|
||||
|
||||
- [`src/components/Search/Search.jsx`](src/components/Search/Search.jsx)
|
||||
- [`src/components/Search/SearchResults.jsx`](src/components/Search/SearchResults.jsx)
|
||||
- more in [`src/components/Search/`](src/components/Search/)
|
||||
|
||||
### 🕸 Related Posts
|
||||
|
||||
Under each post a list of related posts is displayed which are based on the tags of the currently viewed post. Also allows loading more related posts in place.
|
||||
|
||||
<img width="691" alt="screen shot 2018-10-11 at 21 03 03" src="https://user-images.githubusercontent.com/90316/46827531-14f39c00-cd99-11e8-84aa-0e851c32c89c.png" />
|
||||
<img width="700" alt="screen shot 2018-10-11 at 21 03 03" src="https://user-images.githubusercontent.com/90316/46827531-14f39c00-cd99-11e8-84aa-0e851c32c89c.png" />
|
||||
|
||||
If you want to know how this works, have a look at the respective component under
|
||||
|
||||
- [`src/components/molecules/RelatedPosts.jsx`](src/components/molecules/RelatedPosts.jsx)
|
||||
|
||||
### 🔍 Search
|
||||
|
||||
[gatsby-plugin-lunr](https://github.com/humanseelabs/gatsby-plugin-lunr)
|
||||
|
||||
### 🐝 Coinhive
|
||||
|
||||
Includes a component for mining Monero with JavaScript via [Coinhive](https://coinhive.com).
|
||||
|
||||
@ -4,27 +4,9 @@ import PropTypes from 'prop-types'
|
||||
import { graphql, StaticQuery } from 'gatsby'
|
||||
import Container from '../atoms/Container'
|
||||
import PostTeaser from '../Post/PostTeaser'
|
||||
import SearchResultsEmpty from './SearchResultsEmpty'
|
||||
import styles from './SearchResults.module.scss'
|
||||
|
||||
const SearchEmpty = ({ searchQuery, results }) => (
|
||||
<div className={styles.empty}>
|
||||
<header className={styles.emptyMessage}>
|
||||
<p className={styles.emptyMessageText}>
|
||||
{searchQuery.length > 1 && results.length === 0
|
||||
? 'No results found'
|
||||
: searchQuery.length === 1
|
||||
? 'Just one more character'
|
||||
: 'Awaiting your input'}
|
||||
</p>
|
||||
</header>
|
||||
</div>
|
||||
)
|
||||
|
||||
SearchEmpty.propTypes = {
|
||||
results: PropTypes.array.isRequired,
|
||||
searchQuery: PropTypes.string.isRequired
|
||||
}
|
||||
|
||||
const query = graphql`
|
||||
query {
|
||||
allMarkdownRemark {
|
||||
@ -84,7 +66,10 @@ export default class SearchResults extends PureComponent {
|
||||
)}
|
||||
</ul>
|
||||
) : (
|
||||
<SearchEmpty searchQuery={searchQuery} results={results} />
|
||||
<SearchResultsEmpty
|
||||
searchQuery={searchQuery}
|
||||
results={results}
|
||||
/>
|
||||
)}
|
||||
</Container>
|
||||
</div>,
|
||||
|
||||
@ -24,6 +24,11 @@
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (min-width: $screen-md) {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: block;
|
||||
flex: 0 0 48%;
|
||||
@ -59,33 +64,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadein {
|
||||
0% {
|
||||
opacity: 0;
|
||||
@ -95,9 +73,3 @@
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ellipsis {
|
||||
to {
|
||||
width: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
24
src/components/Search/SearchResultsEmpty.jsx
Normal file
24
src/components/Search/SearchResultsEmpty.jsx
Normal file
@ -0,0 +1,24 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import styles from './SearchResultsEmpty.module.scss'
|
||||
|
||||
const SearchResultsEmpty = ({ searchQuery, results }) => (
|
||||
<div className={styles.empty}>
|
||||
<header className={styles.emptyMessage}>
|
||||
<p className={styles.emptyMessageText}>
|
||||
{searchQuery.length > 1 && results.length === 0
|
||||
? 'No results found'
|
||||
: searchQuery.length === 1
|
||||
? 'Just one more character'
|
||||
: 'Awaiting your input'}
|
||||
</p>
|
||||
</header>
|
||||
</div>
|
||||
)
|
||||
|
||||
SearchResultsEmpty.propTypes = {
|
||||
results: PropTypes.array.isRequired,
|
||||
searchQuery: PropTypes.string.isRequired
|
||||
}
|
||||
|
||||
export default SearchResultsEmpty
|
||||
34
src/components/Search/SearchResultsEmpty.module.scss
Normal file
34
src/components/Search/SearchResultsEmpty.module.scss
Normal file
@ -0,0 +1,34 @@
|
||||
@import 'variables';
|
||||
|
||||
.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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ellipsis {
|
||||
to {
|
||||
width: 1rem;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user