# Source Code:
Folder Structure (src) ``` . ├── Combined_____-_____Doc.md ├── components │   ├── ActionLink.js │   ├── CtaButtons.js │   ├── DarkToggle │   │   ├── index.js │   │   └── styles.js │   ├── DocsMenu.js │   ├── DocsSubmenu.js │   ├── Footer.js │   ├── Header.js │   ├── Icon.js │   ├── Layout.js │   ├── SectionContent.js │   ├── SectionCta.js │   ├── SectionDocs.js │   ├── SectionGrid.js │   ├── SectionHero.js │   ├── Submenu.js │   ├── global.css │   └── index.js ├── data │   └── doc_sections.yml ├── hooks │   ├── addScript.js │   ├── index.js │   ├── useDarkMode.js │   ├── useEventListener.js │   ├── useMediaQuery.js │   ├── useOnClickOutside.js │   ├── useQueryParam.js │   ├── useSize.js │   └── useStorage.js ├── html.js ├── pages │   ├── blog │   │   ├── 300-react-questions.md │   │   ├── awesome-graphql.md │   │   ├── big-o-complexity.md │   │   ├── blog-archive.md │   │   ├── blogwcomments.md │   │   ├── data-structures.md │   │   ├── flow-control-in-python.md │   │   ├── functions-in-python.md │   │   ├── git-gateway.md │   │   ├── index.md │   │   ├── interview-questions-js.md │   │   ├── netlify-cms.md │   │   ├── platform-docs.md │   │   ├── python-for-js-dev.md │   │   ├── python-resources.md │   │   ├── web-dev-trends.md │   │   └── web-scraping.md │   ├── docs │   │   ├── about │   │   │   ├── eng-portfolio.md │   │   │   ├── ideas-for-this-website.md │   │   │   ├── index.md │   │   │   ├── intrests.md │   │   │   ├── job-search.md │   │   │   └── resume.md │   │   ├── articles │   │   │   ├── basic-web-dev.md │   │   │   ├── buffers.md │   │   │   ├── dev-dep.md │   │   │   ├── event-loop.md │   │   │   ├── fs-module.md │   │   │   ├── how-the-web-works.md │   │   │   ├── http.md │   │   │   ├── index.md │   │   │   ├── install.md │   │   │   ├── intro.md │   │   │   ├── modules.md │   │   │   ├── nextjs.md │   │   │   ├── node-api-express.md │   │   │   ├── node-cli-args.md │   │   │   ├── node-common-modules.md │   │   │   ├── node-env-variables.md │   │   │   ├── node-js-language.md │   │   │   ├── node-package-manager.md │   │   │   ├── node-repl.md │   │   │   ├── node-run-cli.md │   │   │   ├── nodejs.md │   │   │   ├── nodevsbrowser.md │   │   │   ├── npm.md │   │   │   ├── npx.md │   │   │   ├── os-module.md │   │   │   ├── reading-files.md │   │   │   ├── semantic-html.md │   │   │   ├── semantic.md │   │   │   ├── the-uniform-resource-locator-(url).md │   │   │   ├── understanding-firebase.md │   │   │   ├── v8.md │   │   │   ├── web-standards-checklist.md │   │   │   ├── webdev-tools.md │   │   │   └── writing-files.md │   │   ├── audio │   │   │   ├── audio-feature-extraction.md │   │   │   ├── audio.md │   │   │   ├── dfft.md │   │   │   ├── discrete-fft.md │   │   │   ├── dtw-python-explained.md │   │   │   ├── dynamic-time-warping.md │   │   │   ├── index.md │   │   │   └── web-audio-api.md │   │   ├── career │   │   │   ├── dev-interview.md │   │   │   ├── index.md │   │   │   ├── interview-dos-n-donts.md │   │   │   └── job-boards.md │   │   ├── community │   │   │   ├── an-open-letter-2-future-developers.md │   │   │   ├── index.md │   │   │   └── video-chat.md │   │   ├── content │   │   │   ├── algo.md │   │   │   ├── archive.md │   │   │   ├── gatsby-Queries-Mutations.md │   │   │   ├── history-api.md │   │   │   ├── index.md │   │   │   ├── main-projects.md │   │   │   └── trouble-shooting.md │   │   ├── data-structures │   │   │   └── index.md │   │   ├── docs │   │   │   ├── appendix.md │   │   │   ├── art-of-command-line.md │   │   │   ├── bash.md │   │   │   ├── content.md │   │   │   ├── css.md │   │   │   ├── data-structures-docs.md │   │   │   ├── es-6-features.md │   │   │   ├── git-reference.md │   │   │   ├── git-repos.md │   │   │   ├── html-spec.md │   │   │   ├── index.md │   │   │   ├── markdown.md │   │   │   ├── no-whiteboarding.md │   │   │   ├── node-docs-complete.md │   │   │   ├── node-docs-full.md │   │   │   ├── regex-in-js.md │   │   │   └── sitemap.md │   │   ├── faq │   │   │   ├── contact.md │   │   │   ├── index.md │   │   │   └── plug-ins.md │   │   ├── gists.md │   │   ├── index.md │   │   ├── interact │   │   │   ├── callstack-visual.md │   │   │   ├── clock.md │   │   │   ├── index.md │   │   │   ├── jupyter-notebooks.md │   │   │   ├── other-sites.md │   │   │   └── video-chat.md │   │   ├── interview │   │   │   ├── index.md │   │   │   ├── job-search-nav.md │   │   │   └── review-concepts.md │   │   ├── javascript │   │   │   ├── arrow-functions.md │   │   │   ├── asyncjs.md │   │   │   ├── await-keyword.md │   │   │   ├── bigo.md │   │   │   ├── clean-code.md │   │   │   ├── constructor-functions.md │   │   │   ├── index.md │   │   │   ├── promises.md │   │   │   ├── review.md │   │   │   └── this-is-about-this.md │   │   ├── leetcode │   │   │   └── index.md │   │   ├── privacy-policy.md │   │   ├── projects │   │   │   ├── embeded-websites.md │   │   │   ├── index.md │   │   │   ├── list-of-projects.md │   │   │   ├── mini-projects.md │   │   │   └── my-websites.md │   │   ├── python │   │   │   ├── at-length.md │   │   │   ├── cheat-sheet.md │   │   │   ├── comprehensive-guide.md │   │   │   ├── examples.md │   │   │   ├── flow-control.md │   │   │   ├── functions.md │   │   │   ├── google-sheets-api.md │   │   │   ├── index.md │   │   │   ├── intro-for-js-devs.md │   │   │   ├── python-ds.md │   │   │   └── snippets.md │   │   ├── quick-reference │   │   │   ├── Emmet.md │   │   │   ├── all-emojis.md │   │   │   ├── create-react-app.md │   │   │   ├── git-bash.md │   │   │   ├── git-tricks.md │   │   │   ├── google-firebase.md │   │   │   ├── heroku-error-codes.md │   │   │   ├── index.md │   │   │   ├── installation.md │   │   │   ├── markdown-dropdowns.md │   │   │   ├── minifiction.md │   │   │   ├── new-repo-instructions.md │   │   │   ├── psql-setup.md │   │   │   ├── pull-request-rubric.md │   │   │   ├── quick-links.md │   │   │   ├── topRepos.md │   │   │   ├── understanding-path.md │   │   │   └── vscode-themes.md │   │   ├── react │   │   │   ├── ajax-n-apis.md │   │   │   ├── cheatsheet.md │   │   │   ├── createReactApp.md │   │   │   ├── demo.md │   │   │   ├── dont-use-index-as-keys.md │   │   │   ├── index.md │   │   │   ├── jsx.md │   │   │   ├── react-docs.md │   │   │   ├── react-in-depth.md │   │   │   ├── react2.md │   │   │   └── render-elements.md │   │   ├── reference │   │   │   ├── awesome-lists.md │   │   │   ├── awesome-static.md │   │   │   ├── bash-commands.md │   │   │   ├── bookmarks.md │   │   │   ├── embed-the-web.md │   │   │   ├── github-search.md │   │   │   ├── google-cloud.md │   │   │   ├── how-2-reinstall-npm.md │   │   │   ├── how-to-kill-a-process.md │   │   │   ├── index.md │   │   │   ├── installing-node.md │   │   │   ├── intro-to-nodejs.md │   │   │   ├── notes-template.md │   │   │   ├── psql.md │   │   │   ├── resources.md │   │   │   ├── vscode.md │   │   │   └── web-api's.md │   │   ├── search.md │   │   ├── sitemap.md │   │   ├── tips │   │   │   ├── array-methods.md │   │   │   ├── index.md │   │   │   └── insert-into-array.md │   │   ├── tools │   │   │   ├── Archive.md │   │   │   ├── data-structures.md │   │   │   ├── dev-utilities.md │   │   │   ├── index.md │   │   │   └── markdown-html.md │   │   └── tutorials │   │   ├── enviorment-setup.md │   │   └── index.md │   ├── index.md │   ├── privacy-policy.md │   ├── readme.md │   └── showcase.md ├── sass │   ├── imports │   │   ├── _animations.scss │   │   ├── _buttons.scss │   │   ├── _docs.scss │   │   ├── _footer.scss │   │   ├── _forms.scss │   │   ├── _functions.scss │   │   ├── _general.scss │   │   ├── _header.scss │   │   ├── _helpers.scss │   │   ├── _icons.scss │   │   ├── _palettes.scss │   │   ├── _posts.scss │   │   ├── _prism.scss │   │   ├── _reset.scss │   │   ├── _sections.scss │   │   ├── _structure.scss │   │   ├── _tables.scss │   │   └── _variables.scss │   └── main.scss ├── templates │   ├── advanced.js │   ├── blog.js │   ├── docs.js │   ├── page.js │   ├── post.js │   └── templates.md └── utils ├── attribute.js ├── blm-badge.js ├── classNames.js ├── cycler.js ├── getData.js ├── getPage.js ├── getPageByFilePath.js ├── getPages.js ├── htmlToReact.js ├── index.js ├── link.js ├── markdownify.js ├── pathJoin.js ├── toStyleObj.js ├── toUrl.js └── withPrefix.js 32 directories, 272 files ```
Click To See Component Sourcecode # Component Structure: ``` . ├── ActionLink.js ├── CtaButtons.js ├── DarkToggle │   ├── index.js │   └── styles.js ├── DocsMenu.js ├── DocsSubmenu.js ├── Footer.js ├── Header.js ├── Icon.js ├── Layout.js ├── SectionContent.js ├── SectionCta.js ├── SectionDocs.js ├── SectionGrid.js ├── SectionHero.js ├── Submenu.js ├── global.css └── index.js ``` --- ```js import React from 'react'; import _ from 'lodash'; import { Link, withPrefix, classNames } from '../utils'; import Icon from './Icon'; export default class ActionLink extends React.Component { render() { let action = _.get(this.props, 'action', null); return ( {_.get(action, 'style', null) === 'icon' && _.get(action, 'icon_class', null) ? ( {_.get(action, 'label', null)} ) : ( _.get(action, 'label', null) )} ); } } ``` --- ```js import React from 'react'; import _ from 'lodash'; import { Link, withPrefix, classNames } from '../utils'; export default class CtaButtons extends React.Component { render() { let actions = _.get(this.props, 'actions', null); return _.map(actions, (action, action_idx) => ( {_.get(action, 'label', null)} )); } } ``` --- ```js import React from 'react'; import _ from 'lodash'; import { getPage, classNames, Link, withPrefix, pathJoin, getPages } from '../utils'; import DocsSubmenu from './DocsSubmenu'; export default class DocsMenu extends React.Component { render() { let site = _.get(this.props, 'site', null); let page = _.get(this.props, 'page', null); let root_docs_path = _.get(site, 'data.doc_sections.root_docs_path', null); let root_page = getPage(this.props.pageContext.pages, root_docs_path); return ( ); } } ``` --- ```js import React from 'react'; import _ from 'lodash'; import { classNames, Link, withPrefix } from '../utils'; export default class DocsSubmenu extends React.Component { render() { let child_pages = _.get(this.props, 'child_pages', null); let page = _.get(this.props, 'page', null); return ( ); } } ``` --- ```js import _ from 'lodash'; import React from 'react'; import { htmlToReact } from '../utils'; import ActionLink from './ActionLink'; import addScript from './../hooks/addScript'; const Script = (props) => { importScript('./../hooks/addScript.js'); }; export default class Footer extends React.Component { render() { return ( ); } } ``` --- ```js import React from 'react'; import _ from 'lodash'; import { Link, withPrefix, classNames } from '../utils'; import ActionLink from './ActionLink'; import Submenu from './Submenu'; export default class Header extends React.Component { render() { return (
{/* */}
{_.get(this.props, 'pageContext.site.siteMetadata.header.logo_img', null) ? (

{_.get(this.props,

) : (

{' '} WebDevHub {_.get(this.props, 'pageContext.site.siteMetadata.header.title', null)}

)}
{_.get(this.props, 'pageContext.site.siteMetadata.header.has_nav', null) && ( )}
); } } ``` --- ```js import React from 'react'; import _ from 'lodash'; export default class Icon extends React.Component { render() { let icon = _.get(this.props, 'icon', null); return ( {icon === 'dev' ? ( ) : icon === 'facebook' ? ( ) : icon === 'github' ? ( ) : icon === 'instagram' ? ( ) : icon === 'linkedin' ? ( ) : icon === 'pinterest' ? ( ) : icon === 'reddit' ? ( ) : icon === 'twitter' ? ( ) : icon === 'youtube' ? ( ) : ( icon === 'vimeo' && ( ) )} ); } } ``` --- ```js import React from 'react'; import { Helmet } from 'react-helmet'; import _ from 'lodash'; import { withPrefix, attribute } from '../utils'; import '../sass/main.scss'; import Header from './Header'; import Footer from './Footer'; import addScript from './../hooks/addScript'; const Script = (props) => { importScript('./../hooks/addScript.js'); }; export default class Body extends React.Component { render() { return ( {_.get(this.props, 'pageContext.frontmatter.seo.title', null) ? _.get(this.props, 'pageContext.frontmatter.seo.title', null) : _.get(this.props, 'pageContext.frontmatter.title', null) + ' | ' + _.get(this.props, 'pageContext.site.siteMetadata.title', null)} {_.get(this.props, 'pageContext.frontmatter.seo.robots', null) && ( )} {_.map(_.get(this.props, 'pageContext.frontmatter.seo.extra', null), (meta, meta_idx) => { let key_name = _.get(meta, 'keyName', null) || 'name'; return _.get(meta, 'relativeUrl', null) ? ( _.get(this.props, 'pageContext.site.siteMetadata.domain', null) && (() => { let domain = _.trim(_.get(this.props, 'pageContext.site.siteMetadata.domain', null), '/'); let rel_url = withPrefix(_.get(meta, 'value', null)); let full_url = domain + rel_url; return ; })() ) : ( ); })} {_.get(this.props, 'pageContext.site.siteMetadata.favicon', null) && ( )}
{/* INSERT SEARCH BAR HERE */} {/*
*/}
{this.props.children}
); } } ``` --- ```js import React from 'react'; import _ from 'lodash'; import { classNames, withPrefix, markdownify } from '../utils'; import CtaButtons from './CtaButtons'; export default class SectionContent extends React.Component { render() { let section = _.get(this.props, 'section', null); return (
{_.get(section, 'image', null) && (
{_.get(section,
)}
{_.get(section, 'title', null) && (

{_.get(section, 'title', null)}

)} {_.get(section, 'content', null) &&
{markdownify(_.get(section, 'content', null))}
} {_.get(section, 'actions', null) && (
)}
); } } ``` --- ```js import React from 'react'; import _ from 'lodash'; import { htmlToReact } from '../utils'; import CtaButtons from './CtaButtons'; export default class SectionCta extends React.Component { render() { let section = _.get(this.props, 'section', null); return (
{(_.get(section, 'title', null) || _.get(section, 'subtitle', null)) && (
{_.get(section, 'title', null) &&

{_.get(section, 'title', null)}

} {_.get(section, 'subtitle', null) &&

{htmlToReact(_.get(section, 'subtitle', null))}

}
)} {_.get(section, 'actions', null) && (
)}
); } } ``` --- ```js import React from 'react'; import _ from 'lodash'; import { classNames, htmlToReact, pathJoin, getPage, Link, withPrefix } from '../utils'; export default class SectionDocs extends React.Component { render() { let section = _.get(this.props, 'section', null); return (
{(_.get(section, 'title', null) || _.get(section, 'subtitle', null)) && (
{_.get(section, 'title', null) &&

{_.get(section, 'title', null)}

} {_.get(section, 'subtitle', null) &&

{htmlToReact(_.get(section, 'subtitle', null))}

}
)}
{_.map(_.get(this.props, 'pageContext.site.data.doc_sections.sections', null), (doc_section, doc_section_idx) => { let doc_section_path = pathJoin(_.get(this.props, 'pageContext.site.data.doc_sections.root_docs_path', null), doc_section); let doc_section_page = getPage(this.props.pageContext.pages, doc_section_path); return (

{_.get(doc_section_page, 'frontmatter.title', null)}

{_.get(doc_section_page, 'frontmatter.excerpt', null) && (

{htmlToReact(_.get(doc_section_page, 'frontmatter.excerpt', null))}

)}
Learn More
); })}
); } } ``` --- ```js import React from 'react'; import _ from 'lodash'; import { classNames, htmlToReact, withPrefix, Link, markdownify } from '../utils'; import CtaButtons from './CtaButtons'; export default class SectionGrid extends React.Component { render() { let section = _.get(this.props, 'section', null); return (
{(_.get(section, 'title', null) || _.get(section, 'subtitle', null)) && (
{_.get(section, 'title', null) &&

{_.get(section, 'title', null)}

} {_.get(section, 'subtitle', null) &&

{htmlToReact(_.get(section, 'subtitle', null))}

}
)} {_.get(section, 'grid_items', null) && (
{_.map(_.get(section, 'grid_items', null), (item, item_idx) => (
{_.get(item, 'image', null) && (
{_.get(item,
)} {_.get(item, 'title', null) && (

{_.get(item, 'title_url', null) ? ( {_.get(item, 'title', null)} ) : ( _.get(item, 'title', null) )}

)} {_.get(item, 'content', null) && (
{markdownify(_.get(item, 'content', null))}
)} {_.get(item, 'actions', null) && (
)}
))}
)}
); } } ``` --- ```js import React from 'react'; import _ from 'lodash'; import { toStyleObj, withPrefix, markdownify } from '../utils'; import CtaButtons from './CtaButtons'; export default class SectionHero extends React.Component { render() { let section = _.get(this.props, 'section', null); return (
{_.get(section, 'image', null) && (
)}
{_.get(section, 'title', null) && (

{_.get(section, 'title', null)}

)} {_.get(section, 'content', null) &&
{markdownify(_.get(section, 'content', null))}
} {_.get(section, 'actions', null) && (
)}
); } } ``` --- ```js import React from 'react'; import _ from 'lodash'; import { classNames } from '../utils'; import ActionLink from './ActionLink'; export default class Submenu extends React.Component { render() { let page = _.get(this.props, 'page', null); return (
    {_.map(_.get(this.props, 'submenu', null), (action, action_idx) => { let page_url = _.trim(_.get(page, 'url', null), '/'); let action_url = _.trim(_.get(action, 'url', null), '/'); return (
    • ); })}
); } } ``` ``` js import ActionLink from './ActionLink'; import CtaButtons from './CtaButtons'; import DocsMenu from './DocsMenu'; import DocsSubmenu from './DocsSubmenu'; import Footer from './Footer'; import Header from './Header'; import Icon from './Icon'; import SectionContent from './SectionContent'; import SectionCta from './SectionCta'; import SectionDocs from './SectionDocs'; import SectionGrid from './SectionGrid'; import SectionHero from './SectionHero'; import Submenu from './Submenu'; import Layout from './Layout'; import addScript from './../hooks/addScript'; export { ActionLink, CtaButtons, DocsMenu, DocsSubmenu, Footer, Header, Icon, SectionContent, SectionCta, SectionDocs, SectionGrid, SectionHero, Submenu, addScript, Layout }; export default { ActionLink, CtaButtons, DocsMenu, DocsSubmenu, Footer, Header, Icon, SectionContent, SectionCta, SectionDocs, SectionGrid, SectionHero, Submenu, Layout, addScript }; ```
Click To See Template Sourcecode # Templates ``` ├── advanced.js ├── blog.js ├── docs.js ├── page.js └── post.js ``` ```js import React from 'react'; import _ from 'lodash'; import { graphql } from 'gatsby'; import components, { Layout } from '../components/index'; // this minimal GraphQL query ensures that when 'gatsby develop' is running, // any changes to content files are reflected in browser export const query = graphql` query ($url: String) { sitePage(path: { eq: $url }) { id } } `; export default class Advanced extends React.Component { render() { return ( {_.map(_.get(this.props, 'pageContext.frontmatter.sections', null), (section, section_idx) => { let component = _.upperFirst(_.camelCase(_.get(section, 'type', null))); let Component = components[component]; return ; })} ); } } ``` --- ```js import React from 'react'; import _ from 'lodash'; import moment from 'moment-strftime'; import { graphql } from 'gatsby'; import { Layout } from '../components/index'; import { toStyleObj, withPrefix, getPages, Link } from '../utils'; // this minimal GraphQL query ensures that when 'gatsby develop' is running, // any changes to content files are reflected in browser export const query = graphql` query ($url: String) { sitePage(path: { eq: $url }) { id } } `; export default class Blog extends React.Component { render() { let display_posts = _.orderBy(getPages(this.props.pageContext.pages, '/blog'), 'frontmatter.date', 'desc'); return (
{_.get(this.props, 'pageContext.frontmatter.image', null) && (
)}

{_.get(this.props, 'pageContext.frontmatter.title', null)}

{_.get(this.props, 'pageContext.frontmatter.subtitle', null) && (

{_.get(this.props, 'pageContext.frontmatter.subtitle', null)}

)}
{_.map(display_posts, (post, post_idx) => (
{_.get(post, 'frontmatter.thumb_image', null) && ( {_.get(this.props, )}

{_.get(post, 'frontmatter.title', null)}

{_.get(post, 'frontmatter.excerpt', null) && (

{_.get(post, 'frontmatter.excerpt', null)}

{_.get(this.props, 'pageContext.frontmatter.has_more_link', null) === true && _.get(this.props, 'pageContext.frontmatter.more_link_text', null) && (

{_.get(this.props, 'pageContext.frontmatter.more_link_text', null)}

)} )}
))}
); } } ``` --- ```js import React from 'react'; import _ from 'lodash'; import { graphql } from 'gatsby'; import { Layout } from '../components/index'; import DocsMenu from '../components/DocsMenu'; import { htmlToReact, getPages, Link, withPrefix } from '../utils'; // this minimal GraphQL query ensures that when 'gatsby develop' is running, // any changes to content files are reflected in browser export const query = graphql` query ($url: String) { sitePage(path: { eq: $url }) { id } } `; export default class Docs extends React.Component { render() { let root_docs_path = _.trim(_.get(this.props, 'pageContext.site.data.doc_sections.root_docs_path', null), '/'); let current_page_url = _.trim(_.get(this.props, 'pageContext.url', null), '/'); return (

{_.get(this.props, 'pageContext.frontmatter.title', null)}

{htmlToReact(_.get(this.props, 'pageContext.html', null))} {root_docs_path !== current_page_url && (() => { let child_pages = _.orderBy(getPages(this.props.pageContext.pages, current_page_url), 'frontmatter.weight'); let child_count = _.size(child_pages); let has_children = child_count > 0 ? true : false; return ( {has_children && (
    {_.map(child_pages, (child_page, child_page_idx) => (
  • {_.get(child_page, 'frontmatter.title', null)}
    • ))}
)} ); })()}
); } } ``` --- ```js import React from 'react'; import _ from 'lodash'; import { graphql } from 'gatsby'; import { Layout } from '../components/index'; import { toStyleObj, withPrefix, htmlToReact } from '../utils'; // this minimal GraphQL query ensures that when 'gatsby develop' is running, // any changes to content files are reflected in browser export const query = graphql` query ($url: String) { sitePage(path: { eq: $url }) { id } } `; export default class Page extends React.Component { render() { return (
{_.get(this.props, 'pageContext.frontmatter.image', null) && (
)}

{_.get(this.props, 'pageContext.frontmatter.title', null)}

{_.get(this.props, 'pageContext.frontmatter.subtitle', null) && (
{htmlToReact(_.get(this.props, 'pageContext.frontmatter.subtitle', null))}
)}
{htmlToReact(_.get(this.props, 'pageContext.html', null))}
 ); } } ``` --- ```js import React from 'react'; import _ from 'lodash'; import moment from 'moment-strftime'; import {graphql} from 'gatsby'; import {Layout} from '../components/index'; import {toStyleObj, withPrefix, htmlToReact} from '../utils'; // this minimal GraphQL query ensures that when 'gatsby develop' is running, // any changes to content files are reflected in browser export const query = graphql` query($url: String) { sitePage(path: {eq: $url}) { id } } `; export default class Post extends React.Component { render() { return (
{_.get(this.props, 'pageContext.frontmatter.image', null) && (
)}

{_.get(this.props, 'pageContext.frontmatter.title', null)}

{_.get(this.props, 'pageContext.frontmatter.subtitle', null) && (
{htmlToReact(_.get(this.props, 'pageContext.frontmatter.subtitle', null))}
)}
{htmlToReact(_.get(this.props, 'pageContext.html', null))}
); } } ```