performance optimizations

README.md

@@ -22,7 +22,7 @@ You can see the site live here:
 - **CMS**: [Strapi](https://strapi.io/)
 - **Database**: [Postgres](https://www.postgresql.org/)
 - **Deployment**: [Netcup VPS](https://www.netcup.de/)
-- **Styling**: [Styled](<[https://tailwindcss.com](https://styled-components.com/)>)
+- **Styling**: [Styled Components](https://styled-components.com/)
 - **Analytics**: [Matomo](https://matomo.org/)
 
 ## Licensed under the [MIT License](https://github.com/DaTurboD/mxd-codes-frontend/blob/v2/LICENSE "MIT License")

pages/articles/[slug].js

@@ -13,21 +13,30 @@ import { getToc } from "@/src/utils/getToc"
 import styled from "styled-components"
 import ReadingProgress from "@/src/components/reading-progress/reading-progress.js"
 import media from "styled-media-query"
-import Webmentions from "@/src/components/social/webmentions/webmentions"
 import getReadTime from "@/src/utils/read-time"
 import PostImage from "@/src/components/article/article-image/article-image"
 import PostTitle from "@/src/components/title/post-title"
 //import PostTags from 'src/components/tags/tags'
 import { parseISO, format } from "date-fns"
 import HCard from "@/src/components/microformats/h-card"
 import WebActions from "@/src/components/social/social-share/social-share"
-import Meta from "@/src/components/post/post-meta/post-meta"
-import Subscribe from "@/src/components/social/newsletter/subscribe"
 import { serialize } from "next-mdx-remote/serialize"
 import dynamic from "next/dynamic"
 import RecommendedPosts from "@/components/recommended-articles/recommendedArticles"
+const DynamicMeta = dynamic(
+  () => import("@/src/components/post/post-meta/post-meta"),
+  { ssr: false }
+)
+const DynamicSubscribe = dynamic(
+  () => import("@/src/components/social/newsletter/subscribe"),
+  { ssr: false }
+)
+const DynamicWebmentions = dynamic(
+  () => import("/src/components/social/webmentions/webmentions"),
+  { ssr: false }
+)
 
-const Author = dynamic(
+const DynamicAuthor = dynamic(
   () => import("@/components/article/article-author/article-author"),
   { ssr: false }
 )
@@ -193,7 +202,7 @@ export default function Post({ post, allPosts }) {
                 <PostBody content={post.content} toc={post.toc} />
                 <Content>
                   {/*<Feedback /> */}
-                  <Meta
+                  <DynamicMeta
                     post={post}
                     slug={`/articles/${post.slug}`}
                     syndicationLinks={post.syndicationLinks}
@@ -205,17 +214,14 @@ export default function Post({ post, allPosts }) {
                     />
                   </SocialShareContainer>
                   {/*<Likes />*/}
-                  <Webmentions slug={`/articles/${post.slug}`} />
-                  <Author post={post.user} />
-
-                  <div>
-                    <Subscribe />
-                  </div>
+                  <DynamicWebmentions slug={`/articles/${post.slug}`} />
+                  <DynamicAuthor post={post.user} />
+                  <DynamicSubscribe />
                 </Content>
               </PostWrapper>
             </ArticleBackgroundColor>
           </ArticleContainer>
-          <RecommendedPosts post={post} allPosts={allPosts} />
+          <RecommendedPosts post={post} />
         </ArticleBackground>
       </article>
     </Layout>
@@ -229,7 +235,6 @@ export async function getStaticProps({ params }) {
   const excerpt = await markdownToHtml(data?.posts[0]?.excerpt || "")
   const toc = getToc(markdownContent)
   const readingTime = getReadTime(markdownContent)
-  const allPosts = await getRelatedPosts()
 
   return {
     revalidate: 86400,
@@ -240,8 +245,7 @@ export async function getStaticProps({ params }) {
         content,
         excerpt,
         toc,
-      },
-      allPosts,
+      }
     },
   }
 }

src/components/article/article-image/article-image.js

@@ -65,7 +65,7 @@ export default function PostImage({ preview, postData }) {
       {" "}
       {preview ? (
         coverImage ? (
-          <CardItemImg
+          <Image
             src={`${process.env.NEXT_PUBLIC_STRAPI_API_URL}${coverImage.url}`}
             alt={title}
             title={title}
@@ -76,7 +76,7 @@ export default function PostImage({ preview, postData }) {
           />
         ) : null
       ) : coverImage ? (
-        <PostImg
+        <Image
           src={`${process.env.NEXT_PUBLIC_STRAPI_API_URL}${coverImage.url}`}
           alt={title}
           title={title}

src/components/navigation/footer/footer.js

@@ -142,20 +142,13 @@ export default function Footer() {
   const [about, setAbout] = useState([])
   const [search, setSearch] = useState("")
 
-  const requestOptions = {
-    method: "GET",
-    headers: { "Content-Type": "application/json" },
-  }
-
   useEffect(() => {
-    let isSubscribed = true
-    fetch("https://cms.mxd.codes/posts?_sort=published_at:DESC", requestOptions)
+    fetch("https://cms.mxd.codes/posts?_sort=published_at:DESC&_limit=4")
       .then((response) => response.json())
-      .then((data) => (isSubscribed ? setRecentPosts(data.slice(0, 4)) : null))
-    fetch("https://cms.mxd.codes/about", requestOptions)
+      .then((data) => setRecentPosts(data.slice(0, 4)))
+    fetch("https://cms.mxd.codes/about")
       .then((response) => response.json())
-      .then((data) => (isSubscribed ? setAbout(data) : null))
-    return () => (isSubscribed = false)
+      .then((data) => setAbout(data))
   }, [])
 
   const footerItems = [
@@ -222,12 +215,6 @@ export default function Footer() {
               Search
             </Button>
           </SearchWrapper>
-
-          {/*<FooterMainNav>
-            {headerItems.map((item, i) => (
-              <FooterMainNavLink key={i}href={item.link} passHref><a title={item.name}>{item.name}</a></FooterMainNavLink >
-            ))}
-            </FooterMainNav>*/}
         </FooterBar>
 
         <FooterColumnWrapper>
@@ -275,9 +262,6 @@ export default function Footer() {
                   <SiStrava /> Strava
                 </a>
               </FooterItem>
-              {/*<FooterItem>
-                <a href={config.socials.steam} title="Max Dietrich on Steam"><FaSteam/> Steam/</a>
-              </FooterItem>*/}
             </List>
           </FooterColumn>
 

src/components/recommended-articles/recommendedArticles.js

@@ -1,6 +1,8 @@
+import { useState, useEffect } from "react"
 import PostPreview from "@/src/components/article/article-preview/article-preview"
 import styled from "styled-components"
 import media from "styled-media-query"
+import { getRelatedPosts } from "@/src/data/external/cms"
 
 const RecommendedPostsContainer = styled.ol`
   margin-bottom: var(--space);
@@ -38,41 +40,58 @@ const RecommendedPostTitle = styled.h3`
   `}
 `
 
-export default function RecommendedPosts({ post, allPosts }) {
-  // filter out current post
-  let posts = allPosts.filter((aPost) => aPost.slug !== post.slug)
-
+export default function RecommendedPosts({ post }) {
+  const [sortedPosts, setSortedPosts] = useState()
+
   // define maxPosts to display
   const maxPosts = 3
+
+  function getRecommendedPosts(post, allPosts) {
+    // filter out current post
+    let posts = allPosts.filter((aPost) => aPost.slug !== post.slug)
+
+
 
-  // get tags of current posts
-  const currentTags = post.tags.map((tag) => {
-    return tag.name
-  })
+    // get tags of current posts
+    const currentTags = post.tags.map((tag) => {
+      return tag.name
+    })
+
+    // rate posts depending on tags
+    posts.forEach((post) => {
+      post.relevance = 0
+      post.tags.forEach((tag) => {
+        if (currentTags.includes(tag.name)) {
+          post.relevance++
+        }
+      })
+    })
 
-  // rate posts depending on tags
-  posts.forEach((post) => {
-    post.relevance = 0
-    post.tags.forEach((tag) => {
-      if (currentTags.includes(tag.name)) {
-        post.relevance++
-      }
+    // sort posts by relevance
+    const sortedPosts = posts.sort(function (a, b) {
+      return b.relevance - a.relevance
     })
-  })
+    return sortedPosts
+  }
 
-  // sort posts by relevance
-  const sortedPosts = posts.sort(function (a, b) {
-    return b.relevance - a.relevance
-  })
+  useEffect(() => {
+    getRelatedPosts()
+      .then((data) => setSortedPosts(getRecommendedPosts(post, data)))
+  }, [])
 
-  return (
+  if (sortedPosts) {
+    return (
+      <>
+        <RecommendedPostTitle>Continue Reading</RecommendedPostTitle>
+        <RecommendedPostsContainer>
+          {sortedPosts.slice(0, maxPosts).map((post, i) => (
+            <PostPreview key={i} postData={post} />
+          ))}
+        </RecommendedPostsContainer>
+      </>
+  )} else return (
     <>
-      <RecommendedPostTitle>Continue Reading</RecommendedPostTitle>
-      <RecommendedPostsContainer>
-        {sortedPosts.slice(0, maxPosts).map((post, i) => (
-          <PostPreview key={i} postData={post} />
-        ))}
-      </RecommendedPostsContainer>
-    </>
+    <RecommendedPostTitle>Loading Recommended Posts...</RecommendedPostTitle>
+      </>
   )
 }

styles/global.js

@@ -65,10 +65,6 @@ const GlobalStyle = createGlobalStyle`
     max-width: 100%;
     height: auto;
   }
-  img[src*=base64\\,] {
-    image-rendering: -moz-crisp-edges;
-    image-rendering: crisp-edges;
-  }
   body { 
     --primary-color: ${(props) => props.theme.primaryColor};
     --secondary-color: ${(props) => props.theme.secondaryColor};