1"use strict";(self.webpackChunkmy_website=self.webpackChunkmy_website||[]).push([[3355],{78615:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>i,default:()=>h,frontMatter:()=>a,metadata:()=>r,toc:()=>c});var o=t(74848),s=t(28453);const a={authors:["nick"],categories:["Web Development"],date:new Date("2020-07-22T15:12:03.284Z"),description:"Showing or hiding the Table Of Contents, depending on whether it exists or not.",image:"../../static/img/gatsby-logo.jpg",slug:"gatsby-conditional-table-of-contents-display",tags:["Gatsby","React"],title:"Gatsby: Conditional Table of Contents Display"},i=void 0,r={permalink:"/posts/gatsby-conditional-table-of-contents-display",source:"@site/blog/gatsby-conditional-table-of-contents-display/index.md",title:"Gatsby: Conditional Table of Contents Display",description:"Showing or hiding the Table Of Contents, depending on whether it exists or not.",date:"2020-07-22T15:12:03.284Z",tags:[{label:"Gatsby",permalink:"/posts/tags/gatsby"},{label:"React",permalink:"/posts/tags/react"}],readingTime:1.905,hasTruncateMarker:!1,authors:[{name:"Nick Coughlin",title:"[email protected]",url:"https://github.com/ncoughlin",imageURL:"https://github.com/ncoughlin.png",key:"nick"}],frontMatter:{authors:["nick"],categories:["Web Development"],date:"2020-07-22T15:12:03.284Z",description:"Showing or hiding the Table Of Contents, depending on whether it exists or not.",image:"../../static/img/gatsby-logo.jpg",slug:"gatsby-conditional-table-of-contents-display",tags:["Gatsby","React"],title:"Gatsby: Conditional Table of Contents Display"},unlisted:!1,prevItem:{title:"React Hooks: Introduction",permalink:"/posts/react-hooks-introduction"},nextItem:{title:"Logo Roundup",permalink:"/posts/logo-roundup"}},l={authorsImageUrls:[void 0]},c=[{value:"Intro",id:"intro",level:2},{value:"Template Query",id:"template-query",level:2},{value:"TOC Checker Function",id:"toc-checker-function",level:2},{value:"Conditional Class",id:"conditional-class",level:2},{value:"Display None for Conditional Class",id:"display-none-for-conditional-class",level:2},{value:"Examples",id:"examples",level:2}];function d(e){const n={a:"a",code:"code",h2:"h2",p:"p",pre:"pre",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.h2,{id:"intro",children:"Intro"}),"\n",(0,o.jsxs)(n.p,{children:["Having a Table Of Contents is great for longer articles, but if you include it in your template and you create a short post without a TOC, now you have a blank hole in your template. Here is how you can show or hide the Table of Contents depending on whether it exists or not! The principal is the same as we covered in this article ",(0,o.jsx)(n.a,{href:"/posts/react-conditional-styling/",children:"Ncoughlin: React Conditional Styling"})," except we are going to use the class toggle to change the display property of the element."]}),"\n",(0,o.jsx)(n.h2,{id:"template-query",children:"Template Query"}),"\n",(0,o.jsx)(n.p,{children:"The first step is that we need to include the table of contents into the template query."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'export const pageQuery = graphql`\r\n query BlogPostBySlug($slug: String!) {\r\n site {\r\n siteMetadata {\r\n title\r\n }\r\n }\r\n markdownRemark(fields: { slug: { eq: $slug } }) {\r\n id\r\n tableOfContents(absolute: false)\r\n excerpt(pruneLength: 160)\r\n html\r\n fields {\r\n slug\r\n }\r\n frontmatter {\r\n title\r\n date(formatString: "MMMM DD, YYYY")\r\n description\r\n categories\r\n tags\r\n featuredImage {\r\n id\r\n childImageSharp {\r\n sizes {\r\n src\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n`\n'})}),"\n",(0,o.jsx)(n.h2,{id:"toc-checker-function",children:"TOC Checker Function"}),"\n",(0,o.jsx)(n.p,{children:"Then inside of our component we extract our TOC from props and set our TOC to a constant. Then we create a checker function that let's us know whether there is anything in the Table Of Contents at all!"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const BlogPostTemplate = ({ data }) => {\r\n\r\n const toc = data.markdownRemark.tableOfContents\r\n\r\n\r\n // check for TOC and if blank insert noToc class into template\r\n // noToc class is set to display none\r\n const checkTOC = () => {\r\n if (toc.length === 0) {\r\n return "noToc"\r\n } else {\r\n return\r\n }\r\n }\r\n const tocDisplay = checkTOC()\n'})}),"\n",(0,o.jsx)(n.h2,{id:"conditional-class",children:"Conditional Class"}),"\n",(0,o.jsxs)(n.p,{children:["and then the result of our ",(0,o.jsx)(n.code,{children:"checkTOC"})," function gets placed into our JSX. If there is no Table Of Content the class noToc will be added to the wrapping div."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'<div className={`toc ${tocDisplay}`}>\r\n <div className="toc-wrapper">\r\n <h3>Contents</h3>\r\n <section\r\n dangerouslySetInnerHTML={{ __html: post.tableOfContents }}\r\n />\r\n </div>\r\n</div>\n'})}),"\n",(0,o.jsx)(n.h2,{id:"display-none-for-conditional-class",children:"Display None for Conditional Class"}),"\n",(0,o.jsxs)(n.p,{children:["You can probably guess what is happening next. Heading over to our stylesheet for the TOC we simply set display to none for the ",(0,o.jsx)(n.code,{children:"noToc"})," class."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-css",children:".noToc {\r\n display: none;\r\n}\n"})}),"\n",(0,o.jsx)(n.h2,{id:"examples",children:"Examples"}),"\n",(0,o.jsx)(n.p,{children:"And just to show you that this is working here are some sample."}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.a,{href:"/posts/logo-roundup/",children:"Post with NO TOC"})}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.a,{href:"/posts/intro-to-gatsby/",children:"Post with TOC"})})]})}function h(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},28453:(e,n,t)=>{t.d(n,{R:()=>i,x:()=>r});var o=t(96540);const s={},a=o.createContext(s);function i(e){const n=o.useContext(a);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:i(e.components),o.createElement(a.Provider,{value:n},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.