Merge pull request #622 from rishichawda/rss-feed

add rss feed

Author: rishichawda

gatsby-browser.ts

@@ -1,9 +1,15 @@
-import 'normalize.css';
 import "@fontsource/open-sans";
+import 'normalize.css';
 import './src/stylesheets/global.scss';
-import './src/stylesheets/scales/space.scss';
-import './src/stylesheets/scales/type.scss';
+import ReactDOM from "react-dom/client"
 
 // Reload the page when updates are found so that new changes are
 // visible without manual page refresh.
 export const onServiceWorkerUpdateReady = () => window.location.reload();
+
+export const replaceHydrateFunction = () => {
+  return (element, container) => {
+    const root = ReactDOM.createRoot(container)
+    root.render(element)
+  }
+}

gatsby-config.ts

@@ -199,6 +199,63 @@ const config: GatsbyConfig = {
           })),
       },
     },
+    {
+      resolve: "gatsby-plugin-feed",
+      options: {
+        query: `
+          {
+            site {
+              siteMetadata {
+                title
+                description
+                siteUrl
+                site_url: siteUrl
+              }
+            }
+          }
+        `,
+        feeds: [
+          {
+            serialize: ({ query: { site, allMdx } }) => {
+              return allMdx.edges.map(edge => {
+
+                const siteUrl = site.siteMetadata.siteUrl
+                const slug = siteUrl + edge.node.fields.slug
+
+                return Object.assign({}, edge.node.frontmatter, {
+                  url: slug,
+                  guid: slug,
+                  custom_elements: [
+                    { "content:encoded": edge.node.excerpt }
+                  ],
+                })
+              })
+            },
+            query: `
+              {
+                allMdx(sort: {frontmatter: {date: DESC}}) {
+                  edges {
+                    node {
+                      excerpt(pruneLength: 340)
+                      fields {
+                        slug
+                      }
+                      frontmatter {
+                        title
+                        description
+                        date
+                      }
+                    }
+                  }
+                }
+              }
+            `,
+            output: "/rss.xml",
+            title: "Rishi's Blog - rishikc.com",
+          },
+        ]
+      }
+    },
     "gatsby-plugin-image",
     "gatsby-plugin-sharp",
     "gatsby-transformer-sharp",

package.json

@@ -37,6 +37,7 @@
     "gatsby-plugin-canonical-urls": "^5.10.0",
     "gatsby-plugin-dark-mode": "^1.1.2",
     "gatsby-plugin-disqus": "^1.2.6",
+    "gatsby-plugin-feed": "^5.11.0",
     "gatsby-plugin-image": "^3.10.0",
     "gatsby-plugin-local-search": "^2.0.1",
     "gatsby-plugin-manifest": "^5.10.0",
@@ -80,4 +81,4 @@
     "tailwindcss": "^3.3.2",
     "typescript": "^5.0.4"
   }
-}
+}

src/components/gallery/card.tsx

@@ -8,7 +8,7 @@ type Props = {
 };
 
 const Card = ({ data }: Props) => {
-  const image = getImage(data.node.localFile);
+  const image = getImage(data.node.localImage);
 
   return (
     <div className="inline-flex w-full items-stretch cursor-pointer aspect-square instagram-gallery-image-wrapper">

src/hooks/use-insta-nodes.tsx

@@ -17,10 +17,16 @@ const useInstagramNodes = () => {
         edges {
           node {
             id
-            caption
-            localFile {
+            localImage {
+              id
               childImageSharp {
-                gatsbyImageData(placeholder: BLURRED, width: 250)
+                gatsbyImageData(
+                  aspectRatio: 1
+                  transformOptions: { cropFocus: CENTER }
+                  width: 200
+                  formats: [WEBP]
+                  placeholder: DOMINANT_COLOR
+                )
               }
             }
           }

src/pages/404.tsx

@@ -15,6 +15,8 @@ const NotFoundPage: React.FC<PageProps> = () => (
         imgStyle={{ objectFit: "contain" }}
         src="../../static/assets/404.png"
         alt="404image"
+        formats={["webp"]}
+        placeholder="tracedSVG"
       />
       <main className="dark:text-gray-200 grid place-items-center px-6 lg:px-8">
         <div className="text-center">

src/pages/index.tsx

@@ -43,6 +43,8 @@ const IndexPage: React.FC<PageProps> = () => {
               <StaticImage
                 src="../../static/assets/handsome-guy.webp"
                 alt="handsome"
+                formats={["webp"]}
+                placeholder="tracedSVG"
               />
             </div>
           </div>

src/stylesheets/global.scss

@@ -2,10 +2,8 @@
 @tailwind components;
 @tailwind utilities;
 @import "colors.scss";
-
-:root {
-  --fontsource-display: swap;
-}
+@import "./scales/space.scss";
+@import "./scales/type.scss";
 
 body {
   font-family: "Open Sans", sans-serif;