removed remark

next.config.js

@@ -57,17 +57,34 @@ const withBundleAnalyzer = require("@next/bundle-analyzer")({
 const nextConfig = {
   output: "standalone",
   images: {
-    loader: "custom",
-    loaderFile: "./src/utils/loader.js",
-    domains: [
-      "mxd.codes",
-      "cms.mxd.codes",
-      "static-maps-cms.mxd.codes",
-      "api.mapbox.com",
-      "source.unsplash.com",
-      "webmention.io",
-      "openweathermap.org",
-      "aujtzahimq.cloudimg.io",
+    //loader: "custom",
+    //loaderFile: "./src/utils/loader.js",
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '**mxd.codes',
+        port: '',
+      },
+      {
+        protocol: 'https',
+        hostname: '**unsplash.com',
+        port: '',
+      },
+      {
+        protocol: 'https',
+        hostname: '**webmention.io',
+        port: '',
+      },
+      {
+        protocol: 'https',
+        hostname: '**openweathermap.org',
+        port: '',
+      },
+      {
+        protocol: 'https',
+        hostname: '**cloudimg.io',
+        port: '',
+      },
     ],
     deviceSizes: [350, 450, 500, 670, 800, 900, 1000, 1300],
     imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],

package.json

@@ -14,7 +14,6 @@
     "start": "next start",
     "build": "next build",
     "analyze": "cross-env ANALYZE=true next build",
-    "img-optimize": "py ./utils/resize_images.py",
     "format": "prettier --write .",
     "count": "cloc --exclude-ext=svg --exclude-dir=node_modules,.next --json src/ pages/ styles/ public/ . > src/data/count_total.json",
     "webmention": "webmention https://mxd.codes/feed.xml --limit 0 --send"
@@ -43,9 +42,7 @@
     "react-markdown": "^9.0.1",
     "react-router-dom": "^6.21.3",
     "react-syntax-highlighter": "^15.5.0",
-    "remark": "^15.0.1",
     "remark-html": "^16.0.1",
-    "remark-slug": "^7.0.1",
     "showdown": "^2.1.0",
     "styled-components": "^6.1.8",
     "styled-media-query": "^2.1.2"

pages/feed.xml.js

@@ -2,7 +2,7 @@ import React from "react"
 import config from "@/src/data/internal/SiteConfig"
 import { getAllPosts, getAllLinks } from "@/src/data/external/cms"
 const showdown = require("showdown"),
-  converter = new showdown.Converter()
+converter = new showdown.Converter()
 
 const createRssFeed = (allContent) =>
   `<?xml version="1.0" encoding="UTF-8"?>

pages/index.js

@@ -343,7 +343,7 @@ export default function Index({ posts, cv }) {
               </HeroArticle>
               <HeroImgContainer>
                 <HeroImg
-                  src="/uploads/IMG_20231229_WA_0005_1925a8f37e_ed04442bf5.webp"
+                  src="/images/IMG_20231229_WA_0005_1925a8f37e.webp"
                   width={308}
                   height={308}
                   title="Photo of Max."

pages/now/index.js

@@ -122,7 +122,7 @@ export default function Now({ weather, address, content, now }) {
             In {town(address.address)} it has {weather.main.temp}°C with{" "}
             {weather.weather[0].description}.
             <WeatherImg
-              src={`http://openweathermap.org/img/wn/${weather.weather[0].icon}.png`}
+              src={`https://openweathermap.org/img/wn/${weather.weather[0].icon}.png`}
               title={weather.weather[0].description}
               alt="Icon displaying weather"
               width="30"

src/components/article/article-author/article-author.js

@@ -8,8 +8,7 @@ import { FaLinkedin } from "@react-icons/all-files/fa/FaLinkedin";
 import { FaInstagram } from "@react-icons/all-files/fa/FaInstagram";
 import { FaXing } from "@react-icons/all-files/fa/FaXing";
 import { FaTwitter } from "@react-icons/all-files/fa/FaTwitter";
-//import { FaGift } from "@react-icons/all-files/fa/FaGift";
-
+import { FaGift } from "@react-icons/all-files/fa/FaGift";
 import { Button } from "@/styles/templates/button"
 
 const AuthorWrapper = styled.div`
@@ -144,7 +143,7 @@ export default function Author(author) {
         {picture ? (
           <AuthorImgWrapper>
             <Image
-              src={picture.url}
+              src="/images/IMG_20231229_WA_0005_1925a8f37e50x50.webp"
               alt={username}
               title={username}
               width={50}
@@ -166,18 +165,13 @@ export default function Author(author) {
                 {submitted ? "🎉Thank you!🎉" : "Send Virtual Thanks"}
               </Button>
               <ButtonText>{count} Virtual Thanks Sent.</ButtonText>
+            <Link href="/support" passHref>
+            <Button>
+              <FaGift />{" "}Support
+              </Button>
+            </Link>
             </SupportButtonContainer>
-            {/*<AuthorLink href="/support">
-              <FaGift /> More Support
-            </AuthorLink>*/}
-          </AuthorSocialsContainer>
-          {/*(socials.map((social) => 
-          <AuthorSocialsContainer>
-            <a href={social.link} rel="nofollow noopener" title={social.plattform}>
-              {renderSocials(social)}
-            </a>
           </AuthorSocialsContainer>
-      )*/}
         </AuthorSocials>
       </AuthorDescription>
     </>

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

@@ -66,7 +66,7 @@ export default function PostImage({ preview, postData }) {
       {preview ? (
         coverImage ? (
           <CardItemImg
-            src={coverImage.url}
+            src={`${process.env.NEXT_PUBLIC_STRAPI_API_URL}${coverImage.url}`}
             alt={title}
             title={title}
             width={350}
@@ -77,7 +77,7 @@ export default function PostImage({ preview, postData }) {
         ) : null
       ) : coverImage ? (
         <PostImg
-          src={coverImage.url}
+        src={`${process.env.NEXT_PUBLIC_STRAPI_API_URL}${coverImage.url}`}
           alt={title}
           title={title}
           className="u-photo"

src/components/photo/photo-preview.js

@@ -86,7 +86,7 @@ export default function PhotoPreview({ photo }) {
         <Link href={slug} className="u-url" passHref>
           <PhotoWrapper>
             <Photo
-              src={`${
+              src={`${process.env.NEXT_PUBLIC_STRAPI_API_URL}${
                 photo.photo[0].formats.content
                   ? photo.photo[0].formats.content.url
                   : photo.photo[0].url

src/components/social/newsletter/subscribe.js

@@ -51,7 +51,14 @@ const ButtonWrapper = styled.div`
 `
 
 const FeedLink = styled.span`
-  border-bottom: 1px solid var(--primary-color);
+  text-decoration: none;
+  box-shadow: 0px -3px 0px 0px var(--secondary-color) inset;
+  transition: box-shadow 150ms ease-in-out;
+  color: var(--text-color);
+  cursor: pointer;
+  &:hover {
+    box-shadow: 0px -18px 0px 0px var(--secondary-color) inset;
+  }
 `
 
 const NewsletterTitle = styled.p`

src/data/count_total.json

@@ -0,0 +1,58 @@
+{"header" : {
+  "cloc_url"           : "github.com/AlDanial/cloc",
+  "cloc_version"       : "1.98",
+  "elapsed_seconds"    : 1.20379781723022,
+  "n_files"            : 142,
+  "n_lines"            : 32553,
+  "files_per_second"   : 117.96000787468,
+  "lines_per_second"   : 27041.91645313},
+"JavaScript" :{
+  "nFiles": 112,
+  "blank": 930,
+  "comment": 3794,
+  "code": 13814},
+"JSON" :{
+  "nFiles": 9,
+  "blank": 0,
+  "comment": 0,
+  "code": 11865},
+"CSS" :{
+  "nFiles": 9,
+  "blank": 39,
+  "comment": 26,
+  "code": 1073},
+"Markdown" :{
+  "nFiles": 5,
+  "blank": 161,
+  "comment": 0,
+  "code": 563},
+"Text" :{
+  "nFiles": 3,
+  "blank": 18,
+  "comment": 0,
+  "code": 78},
+"Dockerfile" :{
+  "nFiles": 1,
+  "blank": 16,
+  "comment": 14,
+  "code": 63},
+"YAML" :{
+  "nFiles": 1,
+  "blank": 6,
+  "comment": 0,
+  "code": 45},
+"HTML" :{
+  "nFiles": 1,
+  "blank": 2,
+  "comment": 1,
+  "code": 36},
+"XML" :{
+  "nFiles": 1,
+  "blank": 0,
+  "comment": 0,
+  "code": 9},
+"SUM": {
+  "blank": 1172,
+  "comment": 3835,
+  "code": 27546,
+  "nFiles": 142} }

src/utils/markdownToHtml.js

@@ -1,9 +1,7 @@
-import { remark } from "remark"
-import html from "remark-html"
-import slug from "remark-slug"
+const showdown = require("showdown")
 
 export default async function markdownToHtml(markdown) {
-  const result = await remark().use(slug).use(html).process(markdown)
+  const converter = new showdown.Converter()
 
-  return result.toString()
+  return converter.makeHtml(markdown);
 }

src/utils/renderers.js

@@ -68,8 +68,6 @@ const MarkdownImage = ({ src }) => {
       )
       const json = await resp.json()
       const obj = json[0]
-      const ratio = obj.height / obj.width
-      const contentWidth = 670
       const title = obj.name.replace(".png", "")
       const alt = obj.alternativeText.length > 0 ? obj.alternativeText : title
       const img = {
@@ -78,9 +76,6 @@ const MarkdownImage = ({ src }) => {
         alt: alt,
         height: obj.height,
         width: obj.width,
-        ratio: ratio,
-        contentWidth: contentWidth,
-        contentHeight: parseInt(ratio * contentWidth),
       }
       updateData(img)
     }
@@ -93,8 +88,8 @@ const MarkdownImage = ({ src }) => {
         src={data.src}
         title={data.title}
         alt={data.alt}
-        width={data.contentWidth}
-        height={data.contentHeight}
+        width={data.width}
+        height={data.height}
       />
     )
   } else {

styles/mdx-styles.js

@@ -41,7 +41,8 @@ export const OL = styled.ol`
     font-weight: 600;
     border-radius: 50%;
     margin-right: var(--space-sm);
-  `
+  }
+`
 
 export const UL = styled.ul`
   margin-bottom: var(--space);