allTagsTemplate.js (1376B)
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 AllTagsTemplate({ pageContext }) { 10 const { postsByTag, tags } = pageContext; 11 const count = Object.values(postsByTag).map(el => el.length); 12 const [max, min] = [Math.max(...count), Math.min(...count)]; 13 tags.sort(function(str1, str2) { 14 return str1.toLowerCase().localeCompare(str2.toLowerCase()); 15 }); 16 return ( 17 <Layout heading="Tags" slug="tags"> 18 <SEO title="Tags" /> 19 <div className="term-cloud-container"> 20 <ul className="term-cloud"> 21 {tags.map(tag => { 22 const numerator = postsByTag[tag].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={tag}> 28 <Link 29 to={`/${repo}/tags/${tag}`} 30 style={{ fontSize: `${1 + num}em`, fontWeight: `${weight}` }} 31 > 32 {tag} 33 </Link> 34 </li> 35 ); 36 })} 37 </ul> 38 </div> 39 </Layout> 40 ); 41 } 42 43 export default AllTagsTemplate;