diff --git a/packages/site/gatsby-browser.js b/packages/site/gatsby-browser.js deleted file mode 100644 index 1cd9590..0000000 --- a/packages/site/gatsby-browser.js +++ /dev/null @@ -1 +0,0 @@ -import './src/styles/global.css'; diff --git a/packages/site/gatsby-browser.tsx b/packages/site/gatsby-browser.tsx new file mode 100644 index 0000000..6ac1a27 --- /dev/null +++ b/packages/site/gatsby-browser.tsx @@ -0,0 +1 @@ +export { default as wrapPageElement } from './src/components/AppLayout'; diff --git a/packages/site/gatsby-config.ts b/packages/site/gatsby-config.ts index 7fa6a3d..38d5871 100644 --- a/packages/site/gatsby-config.ts +++ b/packages/site/gatsby-config.ts @@ -11,9 +11,6 @@ const config: GatsbyConfig = { title: `site`, siteUrl: `https://www.samsoniyanda.com`, }, - // More easily incorporate content into your pages through automatic TypeScript type generation and better GraphQL IntelliSense. - // If you use VSCode you can also use the GraphQL plugin - // Learn more at: https://gatsby.dev/graphql-typegen graphqlTypegen: true, plugins: [ 'gatsby-plugin-postcss', @@ -25,9 +22,11 @@ const config: GatsbyConfig = { icon: 'src/images/icon.png', }, }, - 'gatsby-plugin-mdx', 'gatsby-plugin-sharp', 'gatsby-transformer-sharp', + { + resolve: 'gatsby-plugin-mdx', + }, { resolve: 'gatsby-source-filesystem', options: { @@ -44,6 +43,14 @@ const config: GatsbyConfig = { }, __key: 'pages', }, + { + resolve: 'gatsby-source-filesystem', + options: { + name: 'mdx', + path: './src/docs/', + }, + __key: 'mdx', + }, { // using hubspot version 2. this is the default resolve: 'gatsby-source-hubspot-node', @@ -57,7 +64,7 @@ const config: GatsbyConfig = { searchParams: { state: 'PUBLISHED', }, - } satisfies IPluginOptions, + }, }, { // using hubspot version 3. @@ -162,6 +169,28 @@ const config: GatsbyConfig = { }, } satisfies IPluginOptions, }, + { + resolve: `gatsby-transformer-remark`, + options: { + footnotes: true, + gfm: true, + jsFrontmatterEngine: false, + plugins: [ + { + resolve: `gatsby-remark-images`, + options: { + maxWidth: 740, + }, + }, + { + resolve: `gatsby-remark-responsive-iframe`, + options: { + wrapperStyle: `margin-bottom: 1.0725rem`, + }, + }, + ], + }, + }, ], }; diff --git a/packages/site/gatsby-node.ts b/packages/site/gatsby-node.ts index 376f141..3c01c68 100644 --- a/packages/site/gatsby-node.ts +++ b/packages/site/gatsby-node.ts @@ -1,4 +1,4 @@ -import type { CreateWebpackConfigArgs } from 'gatsby'; +import type { CreateWebpackConfigArgs, CreatePagesArgs } from 'gatsby'; import path from 'path'; exports.onCreateWebpackConfig = ({ actions }: CreateWebpackConfigArgs) => { @@ -13,3 +13,44 @@ exports.onCreateWebpackConfig = ({ actions }: CreateWebpackConfigArgs) => { }, }); }; + +exports.createPages = async ({ graphql, actions, reporter }: CreatePagesArgs) => { + const { createPage } = actions; + const docPageTemplate = path.resolve(`src/templates/docs.tsx`); + + const result = await graphql(` + query GetAllDocuments { + allMdx(filter: { frontmatter: { isPublished: { eq: true } } }) { + nodes { + id + frontmatter { + slug + title + tail + summary + date(formatString: "MMMM D, YYYY") + } + tableOfContents + internal { + contentFilePath + } + } + } + } + `); + + if (result.errors) { + reporter.panicOnBuild('Error loading MDX result', result.errors); + } + + result.data.allMdx.nodes.forEach((record) => { + createPage({ + // Path for this page — required + path: `/docs/${record.frontmatter.slug}/`, + component: `${docPageTemplate}?__contentFilePath=${record.internal.contentFilePath}`, + context: { + ...record, + }, + }); + }); +}; diff --git a/packages/site/gatsby-ssr.tsx b/packages/site/gatsby-ssr.tsx new file mode 100644 index 0000000..6ac1a27 --- /dev/null +++ b/packages/site/gatsby-ssr.tsx @@ -0,0 +1 @@ +export { default as wrapPageElement } from './src/components/AppLayout'; diff --git a/packages/site/package.json b/packages/site/package.json index 89df4e7..0884f7b 100644 --- a/packages/site/package.json +++ b/packages/site/package.json @@ -25,7 +25,11 @@ "gatsby-plugin-postcss": "^6.13.1", "gatsby-plugin-sharp": "^5.13.1", "gatsby-plugin-sitemap": "^6.13.1", + "gatsby-remark-images": "^7.13.1", + "gatsby-remark-responsive-iframe": "^6.13.1", "gatsby-source-filesystem": "^5.13.1", + "gatsby-source-hubspot-node": "workspace:^", + "gatsby-transformer-remark": "^6.13.1", "gatsby-transformer-sharp": "^5.13.1", "postcss": "^8.4.38", "react": "^18.2.0", diff --git a/packages/site/src/components/AppAside/index.tsx b/packages/site/src/components/AppAside/index.tsx index 4277b7f..02e5465 100644 --- a/packages/site/src/components/AppAside/index.tsx +++ b/packages/site/src/components/AppAside/index.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; +import { Link, useStaticQuery, graphql } from 'gatsby'; + import AppInput from '@components/AppInput'; -import { Link } from 'gatsby'; import AppIcon, { Props as AppIconProps } from '@components/AppIcon'; type MenuItemProps = { @@ -10,23 +11,38 @@ type MenuItemProps = { type ListItemProps = { title: string; - menus: Array; + nodes: ReadonlyArray<{ + readonly frontmatter: { + readonly slug: string; + readonly title: string; + }; + }>; icon: AppIconProps['icon']; + root?: boolean; }; -const ListItem = ({ title, menus, icon }: ListItemProps) => ( -
  • - - - - {title} -
      - {menus.map((menu) => ( - - ))} -
    -
    • -); +const ListItem = ({ title, nodes, icon, root }: ListItemProps) => { + if (nodes.length === 0) { + return null; + } + return ( +
  • + + + + {title} +
      + {nodes.map((menu) => ( + + ))} +
    +
    • + ); +}; const MenuItem = ({ to, title }: MenuItemProps) => { return ( @@ -34,7 +50,7 @@ const MenuItem = ({ to, title }: MenuItemProps) => { {title} @@ -42,47 +58,68 @@ const MenuItem = ({ to, title }: MenuItemProps) => { ); }; -const AppAside = () => ( - -); +const AppAside = () => { + const data = useStaticQuery(graphql` + query AllDocuments { + allMdx(filter: { frontmatter: { isPublished: { eq: true } } }) { + nodes { + frontmatter { + slug + title + } + } + } + } + `); + return ( + + ); +}; export default AppAside; diff --git a/packages/site/src/components/AppCard/AppCardWithContact.tsx b/packages/site/src/components/AppCard/AppCardWithContact.tsx index 28306b5..4e16f87 100644 --- a/packages/site/src/components/AppCard/AppCardWithContact.tsx +++ b/packages/site/src/components/AppCard/AppCardWithContact.tsx @@ -14,16 +14,16 @@ type Props = { }; const AppCardWithContact = ({ properties: { firstname, lastname, email, hs_object_id } }: Props) => { return ( - +
    #{hs_object_id} -

    Hubspot CMS Contact

    -

    +

    Hubspot CMS Contact

    +

    {firstname || 'John'} {lastname || 'Doe'}

    -

    {email}

    +

    {email}

    ( - +const AppCardWithPhoto = ({ author_name, title, featured_image, blog_author }: Props) => ( +
    ( />
    -
    -

    +

    +

    {title}

    5 min
    -
    - +
    + {`${author_name}
    -
    -

    {author_name}

    +
    +

    {author_name}

    2h ago
    diff --git a/packages/site/src/components/AppFooter/index.tsx b/packages/site/src/components/AppFooter/index.tsx new file mode 100644 index 0000000..b4b2c7b --- /dev/null +++ b/packages/site/src/components/AppFooter/index.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import AppIcon from '@components/AppIcon'; + +const AppFooter = () => { + return ( +
    + Made with love by Samson Iyanda + +
    + ); +}; + +export default AppFooter; diff --git a/packages/site/src/components/AppHeader/index.tsx b/packages/site/src/components/AppHeader/index.tsx index 411e5c2..62936b7 100644 --- a/packages/site/src/components/AppHeader/index.tsx +++ b/packages/site/src/components/AppHeader/index.tsx @@ -1,17 +1,19 @@ import * as React from 'react'; + import AppThemeSwitcher from '@components/AppThemeSwitcher'; import AppIcon from '@components/AppIcon'; const AppHeader = ({ onOpen }: { onOpen: () => void }) => { return (
    -