feat: support image block

fix #4

Author: alvis

README.md

@@ -266,21 +266,25 @@ As this plugin relies on the the official Notion API which is still in beta, we
 
 - Sub Page
 - Call out
-- Image
 - Video
 - Code Block
 - Coloured Text
 - Underlined Text
 
 ## Image
 
-As of `2021-07-01`, the official Notion API doesn't export any image block from a page.
-However, there is a workaround that you can use to inject images into an article.
-You just need to embed them using the normal markdown syntax as part of your paragraph like this:
+Since v3.3, `gatsby-source-notion` provided a limited support for images on a Notion page.
+Now, all images on a Notion page will be translated into the `![caption](url)` syntax and subsequently converted to a `img` element if you use `gatsby-plugin-mdx`.
 
-```md
-![alt text](path-to-image)
-```
+However, it has a caveat. Embedding images would probably be missing in your final web site.
+It is because the embedded image URL returned from Notion is valid only for 1 hour.
+[This is a restriction from Notion.](https://developers.notion.com/reference/file-object#files-uploaded-to-notion-objects)
+As gatsby would not download the image for further processing,
+you simply cannot use Notion as your image host.
+
+Plugins like [gatsby-remark-images-anywhere](https://github.com/d4rekanguok/gatsby-remark-images-anywhere) would solve the issue.
+However, as of `2022-07-01` there is no similar plugin that supports Gatsby V4.
+Let us know if you find any.
 
 # Cover & Icon
 

e2e/gatsby-config.ts

@@ -25,10 +25,17 @@ export const graphqlTypegen: GatsbyConfig['graphqlTypegen'] = true;
 export const jsxRuntime: GatsbyConfig['jsxRuntime'] = 'automatic';
 
 export const plugins: GatsbyConfig['plugins'] = [
+  'gatsby-plugin-sharp',
   {
     resolve: 'gatsby-source-notion',
     options: {
       previewCallRate: 0.5,
     },
   },
+  {
+    resolve: 'gatsby-transformer-remark',
+    options: {
+      plugins: ['gatsby-remark-images'],
+    },
+  },
 ];

e2e/gatsby-node.ts

@@ -0,0 +1,73 @@
+/**
+ *                            MIT LICENSE ***
+ * -------------------------------------------------------------------------
+ * This code may be modified and distributed under the MIT license.
+ * See the LICENSE file for details.
+ * -------------------------------------------------------------------------
+ * @summary   Create pages via Gatsby Node API
+ * @author    Alvis HT Tang <alvis@hilbert.space>
+ * @license   MIT
+ * @copyright Copyright (c) 2022 - All Rights Reserved.
+ * -------------------------------------------------------------------------
+ */
+
+import { resolve } from 'node:path';
+
+import type { Actions, CreatePagesArgs, GatsbyNode } from 'gatsby';
+
+export const createPages: GatsbyNode['createPages'] = async ({
+  actions: { createPage },
+  graphql,
+}) => {
+  createProjectPages(await queryProjects(graphql), createPage);
+};
+
+/**
+ * create project pages
+ * @param projects projects metadata
+ * @param createPage the createPage function
+ */
+function createProjectPages(
+  projects: Queries.ProjectsQuery | undefined,
+  createPage: Actions['createPage'],
+): void {
+  projects?.notionDatabase?.childrenNotionPage?.forEach((page) => {
+    const mdx = page?.childMarkdownRemark;
+    const path = page?.properties?.path;
+
+    if (mdx && path) {
+      createPage({
+        path,
+        // NOTE: must resolve to the absolute path of the component
+        component: resolve(__dirname, 'src', 'templates', 'project.tsx'),
+        context: { id: mdx.id },
+      });
+    }
+  });
+}
+
+/**
+ * get projects metadata
+ * @param graphql the graphql query function
+ * @returns projects metadata
+ */
+async function queryProjects(
+  graphql: CreatePagesArgs['graphql'],
+): Promise<Queries.ProjectsQuery | undefined> {
+  const { data } = await graphql<Queries.ProjectsQuery>(`
+    query Projects {
+      notionDatabase(title: { eq: "Projects" }) {
+        childrenNotionPage {
+          childMarkdownRemark {
+            id
+          }
+          properties {
+            path
+          }
+        }
+      }
+    }
+  `);
+
+  return data;
+}

e2e/package.json

@@ -12,6 +12,9 @@
   },
   "devDependencies": {
     "cypress": "^8.7.0",
+    "gatsby-plugin-sharp": "^4.0.0",
+    "gatsby-remark-images": "^6.0.0",
+    "gatsby-transformer-remark": "^5.0.0",
     "presetter": "^3.0.0",
     "presetter-preset-react": "^3.0.0",
     "presetter-preset-strict": "^3.0.0",

e2e/src/pages/index.tsx

@@ -13,7 +13,7 @@
  * -------------------------------------------------------------------------
  */
 
-import { graphql } from 'gatsby';
+import { graphql, Link } from 'gatsby';
 
 import type { PageProps } from 'gatsby';
 import type { FC } from 'react';
@@ -31,6 +31,9 @@ export const query = graphql`
       nodes {
         ref
         title
+        properties {
+          path
+        }
       }
     }
   }
@@ -54,8 +57,14 @@ const Test: FC<PageProps<Queries.IndexPageQuery>> = ({ data }) => (
     <section id="pages">
       <h1>Pages</h1>
       <ul>
-        {data.allNotionPage.nodes.map(({ ref, title }) => (
-          <li key={ref}>{title}</li>
+        {data.allNotionPage.nodes.map(({ ref, title, properties }) => (
+          <li key={ref}>
+            {properties?.path ? (
+              <Link to={properties.path}>{title}</Link>
+            ) : (
+              title
+            )}
+          </li>
         ))}
       </ul>
     </section>

e2e/src/templates/project.tsx

@@ -0,0 +1,50 @@
+/**
+ *                            MIT LICENSE ***
+ * -------------------------------------------------------------------------
+ * This code may be modified and distributed under the MIT license.
+ * See the LICENSE file for details.
+ * -------------------------------------------------------------------------
+ * @summary   Collection of layouts
+ * @author    Alvis HT Tang <alvis@hilbert.space>
+ * @license   MIT
+ * @copyright Copyright (c) 2021 - All Rights Reserved.
+ * -------------------------------------------------------------------------
+ */
+
+import { graphql } from 'gatsby';
+
+import type { PageProps } from 'gatsby';
+
+export const query = graphql`
+  query Project($id: String!) {
+    markdownRemark(id: { eq: $id }) {
+      frontmatter {
+        title
+      }
+      html
+    }
+  }
+`;
+
+const Project: React.FC<PageProps<Queries.ProjectQuery>> = ({ data }) => {
+  // since this page is referred from the createPages API, it's safe to assume the mdx node is there
+  const mdx = data.markdownRemark!;
+
+  const title = mdx.frontmatter?.title;
+  const html = mdx.html || '';
+
+  return (
+    <section className="py-12 px-4">
+      <div className="mx-auto w-full max-w-2xl font-sans main">
+        <h1 className="mt-2 mb-6 font-sans text-5xl font-semibold leading-tight text-center font-heading">
+          {title}
+        </h1>
+        <div
+          className="prose-sm"
+          dangerouslySetInnerHTML={{ __html: html }}></div>
+      </div>
+    </section>
+  );
+};
+
+export default Project;