fix(toc): fix issue with emojis not rendered in ToC

filipowm · Jul 3, 2020 · d7840e5 · d7840e5
1 parent c045ed5
commit d7840e5
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 10 deletions.
diff --git a/config/default.js b/config/default.js
@@ -8,8 +8,6 @@ module.exports = {
     pathPrefix: '/',
     gaTrackingId: null,
     siteImage: null,
-    docsLocation: 'https://github.com/filipowm/boogi',
-    docsLocationType: 'github',
     favicon: '/assets/favicon.png',
     themeColor: '#',
   },
@@ -49,6 +47,11 @@ module.exports = {
     },
   },
   features: {
+    editOnRepo: {
+      editable: true,
+      location: 'https://github.com/filipowm/boogi',
+      type: 'github',
+    },
     search: {
       enabled: true,
       indexName: 'docs',

diff --git a/gatsby-config.js b/gatsby-config.js
@@ -266,9 +266,9 @@ module.exports = {
   siteMetadata: {
     title: config.metadata.name,
     description: config.metadata.description,
-    docsLocation: config.metadata.docsLocation,
-    docsLocationType: config.metadata.docsLocationType,
-    editable: config.metadata.editable,
+    docsLocation: config.features.editOnRepo.location,
+    docsLocationType: config.features.editOnRepo.type,
+    editable: config.features.editOnRepo.editable,
     siteImage: config.metadata.siteImage,
     favicon: config.metadata.favicon,
     logo: {

diff --git a/src/components/TableOfContents/TableOfContents.js b/src/components/TableOfContents/TableOfContents.js
@@ -6,6 +6,7 @@ import config from 'config';
 import Scrollspy from 'react-scrollspy';
 import { sleep } from '../../utils/utils';
 import { scrollbar } from '../../styles'
+import emoji from 'node-emoji';
 
 const Sidebar = styled.aside`
   background-color: ${(props) => props.theme.tableOfContents.background};
@@ -102,9 +103,10 @@ const buildToC = (item, items, maxDepth, depth) => {
         return;
       }
       const itemId = innerItem.title ? innerItem.title.replace(/\s+/g, '').toLowerCase() : '#';
+      const title = emoji.emojify(innerItem.title, name => name);
       let listItem = (
         <ListItem key={items.length} to={`#${itemId}`} level={depth}>
-          {innerItem.title}
+          {title}
         </ListItem>
       );
       items.push(listItem);

diff --git a/src/templates/docs.js b/src/templates/docs.js
@@ -99,14 +99,13 @@ export default class MDXRuntimeTest extends React.Component {
     const {
       mdx,
       site: {
-        siteMetadata: { docsLocation, docsLocationType, title },
+        siteMetadata: { docsLocation, docsLocationType, editable },
       },
       gitBranch,
     } = data;
 
     // meta tags
     const metaTitle = mdx.frontmatter.metaTitle;
-    const description = mdx.frontmatter.description;
     const docTitle = emoji.emojify(mdx.fields.title, (name) => name);
     const headTitle = metaTitle ? metaTitle : emoji.strip(docTitle);
     return (
@@ -117,7 +116,7 @@ export default class MDXRuntimeTest extends React.Component {
         <PageTitle>
           <TitleWrapper>
             <Title>{docTitle}</Title>
-            {(config.metadata.editable && mdx.frontmatter.editable != false) ||
+            {(editable && mdx.frontmatter.editable != false) ||
             mdx.frontmatter.editable ? (
               <EditOnRepo
                 location={docsLocation}
@@ -171,6 +170,7 @@ export const pageQuery = graphql`
         title
         docsLocation
         docsLocationType
+        editable
       }
     }
     mdx(fields: { id: { eq: $id } }) {
@@ -194,7 +194,6 @@ export const pageQuery = graphql`
       }
       frontmatter {
         metaTitle
-        description
         showMetadata
         editable
         showPreviousNext