feat: add shared section HighlightedTweets

.env.example

@@ -1,2 +1,4 @@
 GATSBY_DEFAULT_SITE_URL=http://localhost:8000
 GATSBY_DEV_SSR=false
+
+TWITTER_BEARER_TOKEN=

gatsby-node.js

@@ -2,10 +2,12 @@
 const path = require('path');
 
 const get = require('lodash.get');
+const md5 = require('md5');
 const fetch = require('node-fetch');
 
 const { BLOG_CATEGORIES, BLOG_POSTS_PER_PAGE } = require('./src/constants/blog');
 const { CASE_STUDIES_BASE_PATH } = require('./src/constants/case-studies');
+const highlightedTweets = require('./src/constants/highlighted-tweets');
 const getBlogPath = require('./src/utils/get-blog-path');
 const getBlogPostPath = require('./src/utils/get-blog-post-path');
 
@@ -337,6 +339,70 @@ exports.createSchemaCustomization = ({ actions }) => {
   `);
 };
 
+exports.sourceNodes = async ({ actions, createContentDigest }) => {
+  function generateNode(tweet, contentDigest, type) {
+    return {
+      ...tweet,
+      id: md5(tweet.id),
+      tweet_id: tweet.id,
+      children: [],
+      parent: `__SOURCE__`,
+      internal: {
+        type,
+        contentDigest,
+      },
+    };
+  }
+
+  const { createNode } = actions;
+
+  function createNodes(tweets, nodeType) {
+    tweets.forEach((tweet) => {
+      createNode(generateNode(tweet, createContentDigest(tweet), nodeType));
+    });
+  }
+
+  try {
+    const { data, includes } = await fetch(
+      `https://api.twitter.com/2/tweets?ids=${Object.keys(highlightedTweets).join(
+        ','
+      )}&tweet.fields=entities,public_metrics&expansions=attachments.media_keys,entities.mentions.username&media.fields=height,media_key,preview_image_url,type,url,width,variants`,
+      {
+        headers: {
+          Authorization: `Bearer ${process.env.TWITTER_BEARER_TOKEN}`,
+        },
+      }
+    ).then((response) => response.json());
+
+    const nodeType = 'highlightedTweet';
+
+    const dataWithMedia = data.map((tweet) => {
+      const newTweet = { ...tweet };
+
+      if (tweet.attachments?.media_keys) {
+        const media = [];
+        tweet.attachments.media_keys.forEach((mediaKey) => {
+          media.push(includes.media.find((media) => media.media_key === mediaKey));
+        });
+        newTweet.media = media;
+      }
+
+      return newTweet;
+    });
+
+    if (dataWithMedia.length > 0) {
+      createNodes(dataWithMedia, nodeType);
+    } else {
+      throw new Error('Failed to fetch highlighted tweets');
+    }
+
+    return Promise.resolve();
+  } catch (error) {
+    console.log(error);
+    throw new Error('Failed to fetch highlighted tweets');
+  }
+};
+
 exports.createPages = async (options) => {
   await createBlogPages(options);
   await createBlogPosts(options);

package.json

@@ -88,6 +88,7 @@
     "husky": "^8.0.1",
     "lint-staged": "^13.0.0",
     "markdownlint-cli": "^0.31.1",
+    "md5": "^2.3.0",
     "postcss": "^8.4.14",
     "postcss-import": "^14.1.0",
     "prettier": "^2.6.2",

src/components/pages/blog/categories/categories.jsx

@@ -0,0 +1,43 @@
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import Link from 'components/shared/link';
+import { BLOG_CATEGORIES } from 'constants/blog';
+import getBlogPath from 'utils/get-blog-path';
+
+const Categories = ({ activeCategory }) => (
+  <div className="safe-paddings mt-16 lg:mt-14 md:mt-12 sm:mt-11">
+    <div className="container-md">
+      <ul className="scrollbar-hidden relative mt-16 flex space-x-6 overflow-auto pb-px after:absolute after:bottom-0 after:left-0 after:h-px after:w-full after:bg-gray-4 dark:after:bg-gray-8 lg:mt-14 md:mt-12 sm:mt-11">
+        {['All', ...BLOG_CATEGORIES].map((category, index) => (
+          <li key={index}>
+            <Link
+              className={clsx(
+                'relative mb-3 block text-sm font-normal transition-colors duration-200 hover:text-red',
+                ((!activeCategory && category === 'All') || activeCategory === category) &&
+                  '!font-semibold text-red after:absolute after:-bottom-[13px] after:left-0 after:z-10 after:h-0.5 after:w-full after:bg-red'
+              )}
+              to={getBlogPath({ category: category === 'All' ? undefined : category })}
+            >
+              <span className="invisible font-semibold opacity-0">{category}</span>
+              <span className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+                {category}
+              </span>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  </div>
+);
+
+Categories.propTypes = {
+  activeCategory: PropTypes.oneOf(BLOG_CATEGORIES),
+};
+
+Categories.defaultProps = {
+  activeCategory: null,
+};
+
+export default Categories;

src/components/pages/blog/categories/index.js

@@ -0,0 +1,3 @@
+import Categories from './categories';
+
+export default Categories;

src/components/pages/blog/hero/hero.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const Hero = () => (
+  <section className="safe-paddings pt-32 sm:pt-24">
+    <div className="container-md">
+      <h1 className="text-4xl font-semibold leading-snug lg:text-[32px] sm:text-2xl">
+        Sharing Pixel Point <span className="text-red">Collective experience:</span>
+      </h1>
+    </div>
+  </section>
+);
+
+export default Hero;

src/components/pages/blog/hero/index.js

@@ -0,0 +1,3 @@
+import Hero from './hero';
+
+export default Hero;

src/components/pages/blog/posts-list/posts-list.jsx

@@ -1,40 +1,16 @@
-import clsx from 'clsx';
 import { GatsbyImage, getImage } from 'gatsby-plugin-image';
 import PropTypes from 'prop-types';
 import React from 'react';
 
 import Link from 'components/shared/link';
 import { BLOG_CATEGORIES } from 'constants/blog';
-import getBlogPath from 'utils/get-blog-path';
 import getBlogPostDateFromSlug from 'utils/get-blog-post-date-from-slug';
 import getBlogPostPath from 'utils/get-blog-post-path';
 
-const PostsList = ({ activeCategory, items }) => (
-  <section className="safe-paddings pt-32 sm:pt-24">
+const PostsList = ({ items }) => (
+  <section className="safe-paddings mt-20 lg:mt-16 md:mt-14">
     <div className="container-md">
-      <h1 className="text-4xl font-semibold leading-snug lg:text-[32px] sm:text-2xl">
-        Sharing Pixel Point <span className="text-red">Collective experience:</span>
-      </h1>
-      <ul className="scrollbar-hidden relative mt-16 flex space-x-6 overflow-auto pb-px after:absolute after:bottom-0 after:left-0 after:h-px after:w-full after:bg-gray-4 dark:after:bg-gray-8 lg:mt-14 md:mt-12 sm:mt-11">
-        {['All', ...BLOG_CATEGORIES].map((category, index) => (
-          <li key={index}>
-            <Link
-              className={clsx(
-                'relative mb-3 block text-sm font-normal transition-colors duration-200 hover:text-red',
-                ((!activeCategory && category === 'All') || activeCategory === category) &&
-                  '!font-semibold text-red after:absolute after:-bottom-[13px] after:left-0 after:z-10 after:h-0.5 after:w-full after:bg-red'
-              )}
-              to={getBlogPath({ category: category === 'All' ? undefined : category })}
-            >
-              <span className="invisible font-semibold opacity-0">{category}</span>
-              <span className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-                {category}
-              </span>
-            </Link>
-          </li>
-        ))}
-      </ul>
-      <div className="grid-gap-x mt-20 space-y-20 lg:mt-16 lg:space-y-16 md:mt-14 md:space-y-14">
+      <div className="grid-gap-x space-y-20 lg:space-y-16 md:space-y-14">
         {items.map(({ slug, author, frontmatter: { title, summary, category, cover } }, index) => (
           <article key={index}>
             <Link className="with-nested-link-red-hover block" to={getBlogPostPath(slug)}>
@@ -75,6 +51,7 @@ const PostsList = ({ activeCategory, items }) => (
                   imgClassName="rounded-xl"
                   image={getImage(cover)}
                   alt=""
+                  aria-hidden
                 />
               </div>
             </Link>
@@ -86,7 +63,6 @@ const PostsList = ({ activeCategory, items }) => (
 );
 
 PostsList.propTypes = {
-  activeCategory: PropTypes.oneOf(BLOG_CATEGORIES),
   items: PropTypes.arrayOf(
     PropTypes.exact({
       slug: PropTypes.string.isRequired,
@@ -112,8 +88,4 @@ PostsList.propTypes = {
   ).isRequired,
 };
 
-PostsList.defaultProps = {
-  activeCategory: null,
-};
-
 export default PostsList;

src/components/pages/case-study/content/content.jsx

@@ -36,7 +36,7 @@ const Content = ({
           size="base"
           theme="arrow-red"
           target="_blank"
-          rel="noopener noreferrer"
+          rel="noopener"
         >
           Visit {title}
         </Link>