DEV Community: Ramón Chancay 👨🏻‍💻

Creating a custom widget for Notion

Ramón Chancay 👨🏻‍💻 — Sun, 12 Sep 2021 22:11:12 +0000

Hello, I'm back.

Today we are going to build a widget for Notion, using the dev.to API, to show the latest articles from our favorite authors.

✨ You can see the live demo at:
https://notion-widget-dev-to.vercel.app/?users=devrchancay,alexandprivate,dabit3

Disclaimer:

this project uses next, tailwind, typescript, NPM to generate a simple widget (This is overkill for this demo, I know) 😬

You know that you can achieve the same result with HTML + CSS + JavaScript. Maybe in the future I will add more widgets to justify the use of all those technologies.

To do it, we are going to use NextJS and TailwindCSS.

Start project [Nextjs]

To start the project, we execute the following command:

$ npx create-next-app dev-to-widget --use-npm -e with-typescript

With that we already have the dev-to-widget directory, with a nextjs project, which uses npm and Typescript.

Add Tailwind to the project

We install the following dependencies:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Then we generate the configuration files:

$ npx tailwindcss init -p

Now, we have the files tailwind.config.js and postcss.config.js in the root of the project.

Now, we modify "purge" in the tailwind settings, to include the page andcomponents directory, for when the build is generated to remove CSS that we are not using.

// tailwind.config.js
  module.exports = {
   purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
    darkMode: false,
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

And finally, we add tailwind in our pages/_app.tsx file.

import { AppProps } from "next/app";
import "tailwindcss/tailwind.css";

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default MyApp;

Next SSR

The widget works from a parameter in the URL called users that contains the usernames separated by a ,

For example:
?users=devrchancay,alexandprivate

With this parameter the widget will be rendered with "devrchancay" and "alexandprivate" in that order.

export const getServerSideProps = async ({ query }) => {
  const users = query?.users?.split(",") ?? [];

  const usersPromise = users.map((user) =>
    fetch(`https://dev.to/api/articles?username=${user}`).then((user) =>
      user.json()
    )
  );

  const blogPosts = await Promise.all(usersPromise);

  return {
    props: {
      blogPosts,
    },
  };
};

Let me explain:

I convert the string separated by ',' into an array.

 const users = query?.users?.split(",") ?? [];
// ['devrchancay', 'alexandprivate']

Generated an array with the requests to the API with each user.

const usersPromise = users.map((user) =>
    fetch(`https://dev.to/api/articles?username=${user}`).then((user) =>
      user.json()
    )
  );

// [Promise<pending>(devrchancay), Promise<pending>(alexandprivate)]

I resolve the promises and save them in an array that contains the articles of each author in the order that they were entered in the URL.

 const blogPosts = await Promise.all(usersPromise);
// [devrchancay-articles, alexandprivate-articles]

I send the component to render the widget.

return {
    props: {
      blogPosts,
    },
  };

And finally, we render the component.

const IndexPage = ({ blogPosts }) => {
  const router = useRouter();
  const usersQuery = router?.query?.users as string;
  const users = usersQuery?.split(",") ?? [];

  const [currentIndex, setCurrentIndex] = useState(0);

  const usersString = users.join(", ");

  return (
    <div>
      <Head>
        <title>Posts: {usersString}</title>
        <meta name="description" content={`dev.to posts ${usersString}}`} />
      </Head>

      <div className="max-w-xl mx-auto sm:overflow-x-hidden">
        {blogPosts[currentIndex]?.map((post) => (
          <div key={post.id} className="mb-4">
            {post.cover_image && (
              <div className="relative max-w-xl h-52">
                <Image src={post.cover_image} alt={post.title} layout="fill" />
              </div>
            )}
            <div className="py-2 px-2">
              <div>
                {post.tag_list.map((tag) => (
                  <a
                    key={tag}
                    target="_blank"
                    rel="noopener"
                    href={`https://dev.to/t/${tag}`}
                    className="mr-2"
                  >
                    #<span className="text-gray-900">{tag}</span>
                  </a>
                ))}
              </div>
              <h1 className="text-3xl tracking-tight font-extrabold text-gray-900 sm:text-4xl">
                {post.title}
              </h1>

              <p className="mt-3 text-xl text-gray-500 sm:mt-4">
                {post.description}
              </p>
              <a
                target="_blank"
                rel="noopener"
                className="text-base font-semibold text-indigo-600 hover:text-indigo-500"
                href={post.url}
              >
                Read full story
              </a>
            </div>
          </div>
        ))}
        <ul className="w-full overflow-x-scroll flex space-x-6 px-2 sticky bottom-0 bg-white z-50">
          {users.map((user, index) => (
            <li
              key={user}
              className={`py-2 ${
                currentIndex === index
                  ? "border-t-4 border-indigo-600"
                  : "border-t-4 border-transparent"
              } `}
            >
              <a
                href="/"
                className="text-center"
                onClick={(evt) => {
                  evt.preventDefault();
                  setCurrentIndex(index);
                }}
              >
                {user}
              </a>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

The widget working!

I use this widget in my personal workspace.

They should add it as an embed and resize it to their liking.

you can see the complete code in the repository: https://github.com/devrchancay/notion-widget-dev-to/blob/main/pages/index.tsx

Image Gallery with Gatsby, Netlify and Airtable.

Ramón Chancay 👨🏻‍💻 — Mon, 21 Jun 2021 17:43:20 +0000

Hello everyone!

Let's do a project similar to: https://momazos.netlify.app/

It's basically a list of images stored on Airtable and consumed by Gatsby through a source plugin called gatsby-source-airtable.

For the "UI design" we will use chakra-ui, which has several default components.

as of the date I published this post Gatsby is in version 3

Start the project

We're going to start the project with the following command:

$ npx gatsby new momazos

this creates a folder structure based on the Gatsby Starter Default, At this point you should have a folder structure similar to this:

- .gitignore
- .prettierignore
- .prettierrc
- LICENSE
- README.md
- gatsby-browser.js
- gatsby-config.js
- gatsby-node.js
- gatsby-ssr.js
- node_modules
- package-lock.json
- package.json
- src
  - pages
    - index.js

✨ now run in the terminal the following command:

 $ npm start

and you should see the development server at https://localhost:8000

Airtable table structure

for this case we have the following structure:

Name (name of image)
Attachments (field with image )
Tags - (image related tags)
Status - (Active / Inactive)
Created - (creation date)
Last Modified Time (edition date)

👀 You can see it here

Install Gatsby Airtable Source plugin

now we're going to install the Airtable plugin by running the following command:

$ npm install gatsby-source-airtable

to configure it in Gatsby we need modify the gatsby-config.js

plugins: [
  {
    resolve: `gatsby-source-airtable`,
    options: {
      apiKey: `I-C-WIENER-405-XXX-XXX-XXX`, 
      tables: [
        {
          baseId: `YOUR_AIRTABLE_BASE_ID`,
          tableName: `Memes`,
          mapping: { Attachments: `fileNode` },
         },
      ]
    }
  }
];

you can get an apiKey at https://airtable.com/api

In my case "Memes" is the name of the database and the mapping is the way a file type is related in Gatsby.

Interacting with the data

at this point, you have access to the airtable data and you can run queries to the graphql schema.

Now when I start the development server, Gatsby will store the data to be able to make graphql queries at the URL https://localhost:8000/__graphql

📋 We're going to copy the following query:

{
  allAirtable(
    filter: {table: {eq: "Memes"}, data: {Status: {eq: "Active"}}}
    sort: {fields: data___Created, order: DESC}
  ) {
    edges {
      node {
        id
        data {
          Name
          Attachments {
            localFiles {
              childImageSharp {
                gatsbyImageData(layout: FULL_WIDTH, formats: [AUTO, AVIF, WEBP])
              }
            }
          }
        }
      }
    }
  }
}

As you can see, we have access to all the data available in our Gatsby project.

Install chakra-ui 💅🏼

To use Chakra UI in your Gatsby site, you need to install the plugin and its peer dependencies

npm i @chakra-ui/gatsby-plugin @chakra-ui/react @emotion/react @emotion/styled framer-motion

1 Add @chakra-ui/gatsby-plugin to gatsby-config.js

plugins: [
  {
    resolve: `gatsby-source-airtable`,
    options: {
      apiKey: `I-C-WIENER-405-XXX-XXX-XXX`, 
      tables: [
        {
          baseId: `YOUR_AIRTABLE_BASE_ID`,
          tableName: `Memes`,
          mapping: { Attachments: `fileNode` },
         },
      ]
    }
  },
`@chakra-ui/gatsby-plugin`
];

2 configure the chakra provider in the file gatsby-browser.js


const React = require("react");
const ChakraProvider = require("@chakra-ui/react").ChakraProvider;
const extendTheme = require("@chakra-ui/react").extendTheme;

const config = {
  useSystemColorMode: true,
};

const theme = extendTheme({ config });


exports.wrapRootElement = ({ element }) => {
  return (
    <ChakraProvider resetCss theme={theme}>
      {element}
    </ChakraProvider>
  );
};

you can check the chakra-UI documentation, it is very clear and intuitive, similar to that of tailwindcss.

📚 Docs

now create a file in src/components/List.jsx this component is responsible for rendering the name and image.

import React from "react";
import { GatsbyImage } from "gatsby-plugin-image";
import { Box, AspectRatio, Badge, useColorModeValue } from "@chakra-ui/react";

function Item({ node, loading }) {
  const bg = useColorModeValue("white", "gray.900");
  const [file] = node.data.Attachments.localFiles;
  return (
    <Box
      borderWidth="1px"
      borderRadius="lg"
      overflow="hidden"
      key={node.id}
      position="relative"
      bg={bg}
    >
      <AspectRatio maxW="620px" ratio={4 / 3}>
        <GatsbyImage
          loading={loading}
          image={
            file.childImageSharp.gatsbyImageData
          }
          alt={node.data.Name}
        />
      </AspectRatio>

      <Box py={2} px={2}>
        <Box d="flex" alignItems="baseline">
          {node?.data?.tags?.map((tag) => {
            return (
              <Badge id={tag} borderRadius="full" px="2" colorScheme="facebook">
                {tag}
              </Badge>
            );
          })}
        </Box>
        <Box
          mt="1"
          fontWeight="semibold"
          as="h3"
          lineHeight="tight"
          isTruncated
          px={1}
        >
          {node.data.Name}
        </Box>
      </Box>
    </Box>
  );
}

export default React.memo(Item);

With all this, now you just have to join everything on the Home page.

src/pages/index.jsx

import React from "react"
import List from "../components/List";
import { Container, Grid } from "@chakra-ui/react";
import { graphql } from "gatsby"

const IndexPage = ({ data }) => {
   return (
       <Container maxW="container.xl"> 
         <Box px={4} mt={4}>
          <Grid
            templateColumns={{
              base: `repeat(1, 1fr)`,
              sm: `repeat(3, 1fr)`,
              xl: `repeat(4, 1fr)`,
            }}
            gap={{
              base: 4,
              xl: 6,
            }}
          >
          {data.allAirtable.edges.map(({ node }, index) => {
              const loading = index <= 4 ? "eager" : "lazy";
              return <List node={node} loading={loading} />;
            })}
          </Grid>
       </Container>
)
}

export const query = graphql`
  {
    allAirtable(
      filter: {table: {eq: "Memes"}, data: {Status: {eq: "Active"}}}
      sort: {fields: data___Created, order: DESC}
    ) {
      edges {
        node {
          id
          data {
            Name
            Attachments {
              localFiles {
                childImageSharp {
                  gatsbyImageData(layout: FULL_WIDTH, formats: [AUTO, AVIF, WEBP])
                }
              }
            }
          }
        }
      }
    }
  }
`

export default Index

✨ Thanks for reading, if you have any questions feel free to DM me on Twitter.