allAuthorsTemplate.js (1427B)
1 import React from 'react'; 2 import { Link } from 'gatsby'; 3 import Layout from '../components/layout'; 4 import SEO from '../components/seo'; 5 import { siteMetadata } from '../../gatsby-config'; 6 7 const { repo } = siteMetadata; 8 9 function AllAuthorsTemplate({ pageContext }) { 10 const { authors, postsByAuthor } = pageContext; 11 const count = Object.values(postsByAuthor).map(el => el.length); 12 const [max, min] = [Math.max(...count), Math.min(...count)]; 13 authors.sort(function(str1, str2) { 14 return str1.toLowerCase().localeCompare(str2.toLowerCase()); 15 }); 16 return ( 17 <Layout heading="Authors" slug="authors"> 18 <SEO title="Authors" /> 19 <div className="term-cloud-container"> 20 <ul className="term-cloud"> 21 {authors.map(author => { 22 const numerator = postsByAuthor[author].length - min; 23 const denominator = max - min; 24 const num = denominator ? numerator / denominator : 1; 25 const weight = 100 * Math.round((2 * numerator) / denominator + 3); 26 return ( 27 <li key={author}> 28 <Link 29 to={`/${repo}/authors/${author}`} 30 style={{ fontSize: `${1 + num}em`, fontWeight: `${weight}` }} 31 > 32 {author} 33 </Link> 34 </li> 35 ); 36 })} 37 </ul> 38 </div> 39 </Layout> 40 ); 41 } 42 43 export default AllAuthorsTemplate;