feat(components): support emojis in left navigation sidebar

config.json

@@ -60,7 +60,7 @@
       {
         "order": 3,
         "path": "/developing",
-        "title": "Developing"
+        "title": ":computer: Developing"
       }
     ],
     "links": [

content/syntax/custom_components.md

@@ -1,5 +1,5 @@
 ---
-title: ""
+title: ":package: Custom Components"
 order: 2
 ---
 

src/components/sidebar/contentTreeGroup.js

@@ -2,6 +2,7 @@ import React from "react";
 import ContentTreeNode from "./contentTreeNode";
 import config from "../../../config";
 import styled from "@emotion/styled";
+import emoji from "node-emoji"
 
 const ContentTreeGroup = styled(({className, treeState, title, icon, location, children}) => {
   children.forEach(item => {
@@ -19,11 +20,12 @@ const ContentTreeGroup = styled(({className, treeState, title, icon, location, c
       [url]: !treeState.collapsed[url],
     });
   };
+  const emojified = emoji.emojify(title, (name) => name)
   return (
     <div className={className}>
       {title ?
         <>
-          <span>{icon ? <img src={icon}/> : null} {title}</span></>
+          <span>{icon ? <img src={icon}/> : null} {emojified}</span></>
         : null}
       <ul>
         {children.map((child) => (

src/components/sidebar/contentTreeNode.js

@@ -8,6 +8,7 @@ import {css} from "@emotion/core";
 import styled from "@emotion/styled";
 import Slide from "react-reveal/Slide";
 import {useTheme} from "emotion-theming";
+import emoji from "node-emoji"
 
 
 // If you want to have a css call based on props, create a function that returns a css call like this
@@ -131,9 +132,10 @@ const ContentTreeNode = ({className, toggle, collapsed, url, title, location, ch
   };
   const theme = useTheme();
   let isCollapsed = collapsed[url];
+  const text = emoji.emojify(title, (name) => name)
   return (
     <>
-      <NodeContent text={title} link={url} className={className} css={active ? activeNode(theme) : '' }>
+      <NodeContent text={text} link={url} className={className} css={active ? activeNode(theme) : '' }>
         { title && hasChildren ? (
           <>
             <NodeCollapseButton isCollapsed={isCollapsed} collapse={collapse} />

src/templates/docs.js

@@ -7,6 +7,7 @@ import {Layout} from "$components";
 import NextPrevious from '$components/nextPrevious';
 import config from 'config';
 import EditOnRepo from '$components/gitlab'
+import emoji from 'node-emoji'
 
 const forcedNavOrder = config.sidebar.forcedNavOrder;
 
@@ -103,24 +104,25 @@ export default class MDXRuntimeTest extends React.Component {
     let canonicalUrl = config.metadata.url;
     canonicalUrl = config.metadata.pathPrefix !== '/' ? canonicalUrl + config.metadata.pathPrefix : canonicalUrl;
     canonicalUrl = canonicalUrl + mdx.fields.slug;
-
+    const docTitle = emoji.emojify(mdx.fields.title, (name) => name);
+    const headTitle = metaTitle ? metaTitle : emoji.strip(docTitle);
     return (
       <Layout {...this.props}>
         <Helmet>
-          {metaTitle ? <title>{metaTitle}</title> : null}
-          {metaTitle ? <meta name="title" content={metaTitle} /> : null}
+          <title>{headTitle}</title>
+          <meta name="title" content={headTitle} /> 
+          <meta property="og:title" content={headTitle} />
+          <meta property="twitter:title" content={headTitle} />
           {metaDescription ? <meta name="description" content={metaDescription} /> : null}
-          {metaTitle ? <meta property="og:title" content={metaTitle} /> : null}
           {metaDescription ? <meta property="og:description" content={metaDescription} /> : null}
-          {metaTitle ? <meta property="twitter:title" content={metaTitle} /> : null}
           {metaDescription ? (
             <meta property="twitter:description" content={metaDescription} />
           ) : null}
           <link rel="canonical" href={canonicalUrl} />
         </Helmet>
         <PageTitle>
           <TitleWrapper>
-            <Title>{mdx.fields.title}</Title>
+            <Title>{docTitle}</Title>
             {(config.metadata.editable && mdx.frontmatter.editable != false) 
             || (mdx.frontmatter.editable)  ?
               <EditOnRepo location={docsLocation}