diff --git a/src/common.js b/src/common.js new file mode 100644 index 0000000..1f6bb0d --- /dev/null +++ b/src/common.js @@ -0,0 +1,13 @@ + +export function stringToColor(str) { + let hash = 0; + for (let i = 0; i < str.length; i++) { + hash = str.charCodeAt(i) + ((hash << 5) - hash); + } + let color = '#'; + for (let i = 0; i < 3; i++) { + let value = (hash >> (i * 8)) & 0xFF; + color += ('00' + value.toString(16)).substr(-2); + } + return color; +} diff --git a/src/pages/index.js b/src/pages/index.js index 9a7185a..a41c79b 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -4,6 +4,7 @@ import { Link, graphql } from "gatsby" import Bio from "../components/bio" import Layout from "../components/layout" import SEO from "../components/seo" +import { stringToColor } from "../common" const BlogIndex = ({ data, location }) => { const siteTitle = data.site.siteMetadata?.title || `Title` @@ -67,7 +68,7 @@ const BlogIndex = ({ data, location }) => { {` | `} {post.frontmatter.tags.map((tag, index) => { return ( - <small className="chip" key={"tag" + index}> + <small style={{ backgroundColor: stringToColor(tag) }} className="chip" key={"tag" + index}> {tag} </small> ) diff --git a/src/style.css b/src/style.css index 21ec37d..757f584 100644 --- a/src/style.css +++ b/src/style.css @@ -322,7 +322,6 @@ a:focus { height: 1.5rem; line-height: 1.5rem; border-radius: 25px; - background-color: #fff017; } .gatsby-highlight { diff --git a/src/templates/blog-post.js b/src/templates/blog-post.js index 447afed..6c26dfb 100644 --- a/src/templates/blog-post.js +++ b/src/templates/blog-post.js @@ -4,6 +4,7 @@ import { Link, graphql } from "gatsby" import Bio from "../components/bio" import Layout from "../components/layout" import SEO from "../components/seo" +import { stringToColor } from "../common" const BlogPostTemplate = ({ data, location }) => { const post = data.markdownRemark @@ -47,7 +48,7 @@ const BlogPostTemplate = ({ data, location }) => { {` | `} {post.frontmatter.tags.map((tag, index) => { return ( - <span className="chip" key={"tag" + index}> + <span style={{ backgroundColor: stringToColor(tag) }} className="chip" key={"tag" + index}> {tag} </span> )