things

gatsby-browser.tsx

@@ -1,26 +1,13 @@
 import React from "react";
 import { ThemeProvider } from "@emotion/react";
-import { Box, CssBaseline, createTheme } from "@mui/material";
-import { Navigation } from "./src/components/layout/navigation";
+import {theme } from "./src/theme";
+import "./src/app.css";
 
-const theme = createTheme({
-	spacing: (factor: number) => `${0.25 * factor}rem`, // (Bootstrap strategy)
-});
 
 export const wrapRootElement = ({ element }) => {
 	return (
 		<ThemeProvider theme={theme}>
-			<CssBaseline />
-			<Navigation />
-			<Box sx={{
-				minHeight: theme => `calc(100vh - ${theme.mixins.toolbar.minHeight}px)`,
-				marginTop: theme => ({
-					xs: `calc(1rem + ${theme.mixins.toolbar.minHeight}px)`,
-					md: 0,
-				})
-			}}>
-				{element}
-			</Box>
+			{element}
 		</ThemeProvider>
 	);
 }

gatsby-config.ts

@@ -1,10 +1,17 @@
-import type { GatsbyConfig } from "gatsby";
+import { GatsbyConfig } from "gatsby";
 
-const config: GatsbyConfig = {
-	siteMetadata: {
+const metadata = {
 		title: `Yoseph.tech`,
-		siteUrl: `https://www.yourdomain.tld`
-	},
+		siteUrl: `https://yoseph.tech`
+
+}
+
+// const getLastModified = (data: Queries.MyQuery) => {
+
+// }
+
+const config: GatsbyConfig = {
+	siteMetadata: metadata,
 	// 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
@@ -13,16 +20,13 @@ const config: GatsbyConfig = {
 		resolve: 'gatsby-source-wordpress',
 		options: {
 			"url": "https://content-shuttl.herokuapp.com/yoseph-tech/index.php?graphql",
-			hostingWPCOM: false,
-			useACF: true
-
 		}
 	}, "gatsby-plugin-image", "gatsby-plugin-sharp", "gatsby-transformer-sharp", {
 		resolve: 'gatsby-plugin-google-analytics',
 		options: {
 			"trackingId": "G-RB0PVDWB5R"
 		}
-	}, "gatsby-plugin-sitemap", {
+	},  {
 		resolve: 'gatsby-plugin-manifest',
 		options: {
 			"icon": "src/images/icon.png"
@@ -41,7 +45,56 @@ const config: GatsbyConfig = {
 			"path": "./src/pages/"
 		},
 		__key: "pages"
-	}]
+	},
+ {
+	resolve: "gatsby-plugin-sitemap",
+	options: {
+		resolveSiteUrl: () => metadata.siteUrl,
+		query: `
+query MyQuery {
+  allSitePage {
+    nodes {
+      path
+      pageContext
+    }
+  }
+
+  allWpPage {
+	nodes {
+		databaseId
+		modifiedGmt
+	}
+  }
+}`,
+
+	resolvePages: ({
+		allSitePage:{nodes: sitePages},
+		allWpPage: {nodes: wpPages},
+	}: any) => {
+		return sitePages.map((page: any) => {
+			let modifiedTime = page.pageContext.modifiedTime;
+			if (modifiedTime === undefined) {
+				const wpPage = wpPages.find((wpPage: any) => wpPage.databaseId === page.pageContext.wpID);
+				console.log("WP PAGE", wpPages, page.pageContext.wpID);
+				modifiedTime = wpPage?.modifiedGmt;
+			}
+			return {
+				...page,
+				modifiedTime,
+			}
+		})
+		// 	acc[url] = post;
+		// 	return acc;
+		// }, {});
+	},
+	serialize: (post) => {
+		return {
+			url: post.path,
+			lastmod: post.modifiedTime,
+		}
+	}
+	},
+ } as any]
 };
 
 export default config;

gatsby-node.js

@@ -0,0 +1,166 @@
+const compareDesc = require("date-fns/compareDesc");
+const parseISO = require("date-fns/parseISO");
+const { graphql } = require("gatsby");
+
+const pagesToWordPressIDs = {
+    "/": 183,
+    "/about/": 39,
+}
+
+const paginateResponse = (pageSize) => (posts) => {
+    return posts.reduce((acc, post) => {
+        if (acc[acc.length - 1].length >= pageSize) {
+            acc.push([]);
+        }
+        acc[acc.length - 1].push(post.databaseId);
+        return acc;
+    }, [[]]).filter(page => page.length > 0);
+}
+
+const sortPosts = (posts) => {
+    return posts.sort((postA, postB) => {
+        const dateA = parseISO(postA.modifiedGmt, "yyyy-MM-ddTHH:mm:ss", new Date());
+        const dateB = parseISO(postB.modifiedGmt);
+        return compareDesc(dateA, dateB);
+    });
+}
+
+exports.onCreatePage = async ({ page, actions }) => {
+  const { createPage, deletePage } = actions;
+  const wpID = pagesToWordPressIDs[page.path];
+  if (!wpID) {
+    return;
+  }
+
+  deletePage(page)
+  createPage({
+    ...page,
+    context: {
+      ...page.context,
+      wpID,
+    },
+  })
+}
+
+exports.createPages = async function ({ actions, graphql }) {
+    const { data } = await graphql(`
+        query CreatePageQuery {
+            tags: allWpTag {
+    nodes {
+      slug
+      name
+      posts{
+        nodes {
+          databaseId
+          modifiedGmt
+        }
+      }
+    }
+  }
+  
+  categories: allWpCategory {
+    nodes {
+      slug
+      posts {
+        nodes {
+          databaseId
+          modifiedGmt
+        }
+      }
+    }
+  }
+        posts: allWpPost {
+            nodes {
+                databaseId
+                categories {
+                    nodes {
+                        slug
+                    }
+            
+                }
+                slug
+                modifiedGmt
+
+            }
+        }
+    }`);
+    const paginator = paginateResponse(25);
+    const tags = data.tags.nodes.reduce((acc, tag) => {
+        const sortedPosts = sortPosts(tag.posts.nodes);
+        acc[tag.slug] = {
+            pages: paginator(sortedPosts),
+            latestDate: sortedPosts[0],
+        }
+        return acc;
+    }, {});
+
+    const categories = data.categories.nodes.reduce((acc, tag) => {
+        const sortedPosts = sortPosts(tag.posts.nodes);
+        acc[tag.slug] = {
+            pages: paginator(sortedPosts),
+            latestDate: sortedPosts[0],
+        }
+        return acc;
+    }, {});
+
+    console.log(tags, categories);
+
+    data.posts.nodes.forEach((post) => {
+        const categorySlug = post.categories.nodes[0].slug;
+        const postSlug = post.slug;
+        actions.createPage({
+            path: `/${categorySlug}/${postSlug}`,
+            component: require.resolve(`./src/templates/post.tsx`),
+            context: { databaseID: post.databaseId, modifiedTime: post.modifiedGmt },
+        });
+    });
+
+    const allPosts = paginator(sortPosts(data.posts.nodes));
+
+    allPosts.forEach((page, ndx) => {
+        actions.createPage({
+            path: ndx === 0 ? `/posts/` : `/posts/${ndx + 1}`,
+            component: require.resolve(`./src/templates/collection.tsx`),
+            context: {
+                slug: "posts",
+                posts: page,
+                pageNumber: ndx + 1,
+                numberOfPages: allPosts.length,
+            }
+        })
+    })
+
+    Object.entries(tags).filter(([_, info]) => info.pages.length > 0).forEach(([tag, tagInfo]) => {
+        tagInfo.pages.forEach((page, ndx) => {
+            actions.createPage({
+                path:  ndx === 0 ? `/tags/${tag}` : `/tags/${tag}/${ndx + 1}`,
+                component: require.resolve(`./src/templates/collection.tsx`),
+                context: {
+                    slug: tag,
+                    pageType: "Tag",
+                    posts: page,
+                    pageNumber: ndx + 1,
+                    numberOfPages: tagInfo.pages.length,
+                    modifiedTime: tagInfo.latestDate.modifiedGmt
+                }
+            });
+        })
+    });
+
+    Object.entries(categories).filter(([_, info]) => info.pages.length > 0).forEach(([tag, categoryInfo]) => {
+        categoryInfo.pages.forEach((page, ndx) => {
+            actions.createPage({
+                path:  ndx === 0 ? `/${tag}` : `/${tag}/${ndx + 1}`,
+                component: require.resolve(`./src/templates/collection.tsx`),
+                context: {
+                    slug: tag,
+                    pageType: "Category",
+                    posts: page,
+                    pageNumber: ndx + 1,
+                    numberOfPages: categoryInfo.pages.length,
+                    modifiedTime: categoryInfo.latestDate.modifiedGmt
+                }
+            });
+        })
+    });
+}