BradNut/awesome-uses
1
0
Fork 0
mirror of https://github.com/BradNut/awesome-uses synced 2025-09-08 17:40:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #475 from wesbos/back-to-top

Browse source 
feat: add HTML-only back to top link
This commit is contained in:
Wes Bos 2020-01-22 11:24:39 -05:00 committed by GitHub
commit 9dab2205f1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/header.js
View file

@ -21,7 +21,7 @@ function Header({ siteTitle, siteDescription, siteUrl }) {
<meta name="twitter:image" content={`${siteUrl}/twitter-card.png`} /> <meta name="twitter:image" content={`${siteUrl}/twitter-card.png`} />
</Helmet> </Helmet>
<div> <div>
<h1> <h1 id="top">
<Link to="/">/uses</Link> <Link to="/">/uses</Link>
</h1> </h1>
<p> <p>

12
src/pages/index.js
View file

@ -7,6 +7,17 @@ import Layout from '../components/layout';
import Person from '../components/Person'; import Person from '../components/Person';
import Topics from '../components/Topics'; import Topics from '../components/Topics';
const BackToTopLink = styled.a`
position: fixed;
bottom: 1%;
right: 1%;
background: var(--pink);
cursor: pointer;
border-radius: 3px;
padding: 1rem;
transition: background-color 0.2s ease 0s;
`;
function IndexPage() { function IndexPage() {
const { currentTag } = useContext(FilterContext); const { currentTag } = useContext(FilterContext);
const { allPerson } = useStaticQuery(graphql` const { allPerson } = useStaticQuery(graphql`
@ -43,6 +54,7 @@ function IndexPage() {
<Person key={person.name} person={person} currentTag={currentTag} /> <Person key={person.name} person={person} currentTag={currentTag} />
))} ))}
</People> </People>
<BackToTopLink href="#top">&uarr; Back to top</BackToTopLink>
</Layout> </Layout>
); );
} }