{"version":3,"sources":["webpack:///./src/pages/tags.tsx"],"names":["pageQuery","Tags","props","group","data","allMarkdownRemark","useState","largeCount","setLargeCount","targetTag","setTargetTag","sort","a","b","x","fieldValue","toLocaleLowerCase","y","tagList","map","g","fontSize","key","className","style","Math","round","totalCount","toString","length","opacity","fontWeight","onClick","href","useEffect","large","location","hash","split","title","id","posts","filter","edges"],"mappings":"kRAwGaA,EAAY,aAyBVC,UApHF,SAACC,GAAyB,IAE7BC,EADSD,EAATE,KACeC,kBAAfF,MAF6B,EAIDG,mBAAS,GAAtCC,EAJ8B,KAIlBC,EAJkB,OAKHF,mBAAS,aAApCG,EAL8B,KAKnBC,EALmB,KAYrCP,EAAMQ,MAAK,SAACC,EAAcC,GACxB,IAAMC,EAAIF,EAAEG,WAAWC,oBACjBC,EAAIJ,EAAEE,WAAWC,oBAEvB,OAAIF,EAAIG,GAAW,EACfA,EAAIH,EAAU,EACX,KAGT,IAAMI,EAAiBf,EAAMgB,KAAI,SAACC,GAChC,IACMC,EAKN,OACE,sBAAIC,IAAKF,EAAEL,YACT,wBACEQ,UAAU,WACVC,MAAO,CACLH,SAA2B,cAAjBD,EAAEL,YAVdM,EAAWI,KAAKC,MAAM,IAAMnB,EAAaa,EAAEO,aAAaC,WACxDP,EAASQ,QAAU,IAAGR,EAAW,IAAIA,GACzC,KAAYA,EAAZ,OAQ+D,OACzDS,QAASV,EAAEL,aAAeN,EAAY,MAAQ,MAC9CsB,WAAYX,EAAEL,aAAeN,EAAY,OAAS,UAEpDuB,QAAS,WACPtB,EAAaU,EAAEL,cAGjB,qBAAGkB,KAAI,IAAMb,EAAEL,YAAeK,EAAEL,iBAMxCG,EAAQP,MAAK,SAACC,GACZ,MAAc,cAAVA,EAAEU,KAA6B,EAC5B,KA4BT,OAfAY,qBAAU,WACR,IAAIC,EAAQ,EACZ,EAAgBhC,EAAhB,wDAAuB,yFAAZiB,EAAY,EACA,cAAjBA,EAAEL,YAA8BK,EAAEO,WAAaQ,IAAOA,EAAQf,EAAEO,YAItE,OAFAnB,EAAc2B,GAEP,eACN,CAAChC,IAEJ+B,qBAAU,WAER,OADIE,SAASC,MAAM3B,EAAa0B,SAASC,KAAKC,MAAM,KAAK,IAClD,eACN,IAGD,gBAAC,IAAD,KACE,gBAAC,IAAD,CAAKC,MAAM,SACX,uBAAKC,GAAG,QACN,uBAAKjB,UAAU,iBACb,0BAAKL,IAGP,gBAAC,IAAD,CAAUuB,MAhCVtC,EAAMuC,QAAO,SAACtB,GAAD,OAAkBA,EAAEL,aAAeN,KAAWoB,OACtD1B,EAAMuC,QAAO,SAACtB,GAAD,OAAkBA,EAAEL,aAAeN,KAAW,GAAGkC,MAEnExC,EAAMuC,QAAO,SAACtB,GAAD,MAAmC,cAAjBA,EAAEL,cAA4Bc,OACxD1B,EAAMuC,QAAO,SAACtB,GAAD,MAAmC,cAAjBA,EAAEL,cAA4B,GAAG4B,MAElE","file":"component---src-pages-tags-tsx-16cd05a58e26e17256ff.js","sourcesContent":["import * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport { graphql } from 'gatsby';\n\nimport Layout from '../components/Layout';\nimport SEO from '../components/seo';\nimport './styles/tags.scss';\nimport PostList from '../components/PostList';\n\nexport interface TagsPageProps {\n  data: any;\n}\n\nconst Tags = (props: TagsPageProps) => {\n  const { data } = props;\n  const { group } = data.allMarkdownRemark;\n\n  const [largeCount, setLargeCount] = useState(0);\n  const [targetTag, setTargetTag] = useState('undefined');\n\n  interface groupItem {\n    fieldValue: string;\n    totalCount: number;\n  }\n\n  group.sort((a: groupItem, b: groupItem) => {\n    const x = a.fieldValue.toLocaleLowerCase();\n    const y = b.fieldValue.toLocaleLowerCase();\n\n    if (x < y) return -1;\n    if (y < x) return 1;\n    return 0;\n  });\n\n  const tagList: any[] = group.map((g: groupItem) => {\n    const getFontSize = () => {\n      let fontSize = Math.round(50 / (largeCount / g.totalCount)).toString();\n      if (fontSize.length <= 1) fontSize = `0${fontSize}`;\n      return `1.${fontSize}rem`;\n    };\n\n    return (\n      <li key={g.fieldValue}>\n        <span\n          className=\"tag-text\"\n          style={{\n            fontSize: g.fieldValue !== 'undefined' ? getFontSize() : '1rem',\n            opacity: g.fieldValue === targetTag ? '0.9' : '0.5',\n            fontWeight: g.fieldValue === targetTag ? 'bold' : 'normal',\n          }}\n          onClick={() => {\n            setTargetTag(g.fieldValue);\n          }}\n        >\n          <a href={`#${g.fieldValue}`}>{g.fieldValue}</a>\n        </span>\n      </li>\n    );\n  });\n\n  tagList.sort((a: React.ReactElement) => {\n    if (a.key === 'undefined') return -1;\n    return 0;\n  });\n\n  const getPostList: () => any[] = () => {\n    if (group.filter((g: groupItem) => g.fieldValue === targetTag).length) {\n      return group.filter((g: groupItem) => g.fieldValue === targetTag)[0].edges;\n    }\n    if (group.filter((g: groupItem) => g.fieldValue === 'undefined').length) {\n      return group.filter((g: groupItem) => g.fieldValue === 'undefined')[0].edges;\n    }\n    return [];\n  };\n\n  useEffect(() => {\n    let large = 0;\n    for (const g of group) {\n      if (g.fieldValue !== 'undefined' && g.totalCount > large) large = g.totalCount;\n    }\n    setLargeCount(large);\n\n    return () => {};\n  }, [group]);\n\n  useEffect(() => {\n    if (location.hash) setTargetTag(location.hash.split('#')[1]);\n    return () => {};\n  }, []);\n\n  return (\n    <Layout>\n      <SEO title=\"Tags\" />\n      <div id=\"tags\">\n        <div className=\"tag-list-wrap\">\n          <ul>{tagList}</ul>\n        </div>\n\n        <PostList posts={getPostList()} />\n      </div>\n    </Layout>\n  );\n};\n\nexport const pageQuery = graphql`\n  query {\n    allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {\n      group(field: frontmatter___tags) {\n        fieldValue\n        totalCount\n        edges {\n          node {\n            excerpt(format: PLAIN)\n            fields {\n              slug\n            }\n            frontmatter {\n              date(formatString: \"YYYY-MM-DD\")\n              update(formatString: \"YYYY-MM-DD\")\n              title\n              tags\n            }\n          }\n        }\n      }\n    }\n  }\n`;\n\nexport default Tags;\n"],"sourceRoot":""}