#105 Update all image paths linked to /wp-content/* (#107)

* enable mdx plugin in the config file / make sure .mdx file works

* turn some .md files into .mdx and use resolvePath() in them

* add an inline comment for the footnote logic

Author: SebinSong

astro.config.mjs

@@ -3,6 +3,8 @@ import mdx from '@astrojs/mdx';
 import sitemap from '@astrojs/sitemap';
 import remarkBreaks from 'remark-breaks'; // improves support for newlines in markdown files
 import remarkGfm from 'remark-gfm'; // support rendering tables in markdown files
+import remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';
 // twitter & youtube auto-embed via remark
 import remarkEmbedder from '@remark-embedder/core';
 import oembedTransformer from '@remark-embedder/transformer-oembed';
@@ -37,13 +39,12 @@ export default defineConfig({
   base: IS_PROD_BUILD === 'true' ? "/" : '/groupincome.org',
   // integrations: [mdx(), sitemap(), vue()],
   integrations: [
+    mdx(),
     sitemap(),
     vue({ appEntrypoint: '/src/_app' })
   ],
   markdown: {
-    remarkPlugins: [remarkEmbedPlugin, remarkGfm, remarkBreaks, 'remark-math'],
-    rehypePlugins: [['rehype-katex', {
-      // Katex plugin options
-    }]]
+    remarkPlugins: [remarkEmbedPlugin, remarkGfm, remarkBreaks, remarkMath],
+    rehypePlugins: [[rehypeKatex, {}]]
   }
 });

src/pages/[...blog].astro

@@ -19,59 +19,68 @@ const { Content } = Astro.props
 <Content />
 
 <script>
-const footnoteEl = document.querySelector('section.footnotes')
+window.addEventListener('DOMContentLoaded', () => {
+  // When this script is executed for any blog posts that are written as .mdx format, the logic inside prepFootnotes() does not work for some reason.
+  // But giving it a reasonable amount of delay ensures it consistently works for both .md and .mdx blog posts.
+  // (reference: https://github.com/okTurtles/groupincome.org/pull/107#discussion_r1547356061)
+  setTimeout(prepFootnotes, 100)
+})
 
-// NOTE:
-//  below is a logic to resolve a foonotes related bug(https://github.com/okTurtles/groupincome.org/issues/92)
-//  which is when links are clicked, the page is not scrolled to the correct positions.
-if (footnoteEl) {
-  const footnoteAnchorSel = 'a[data-footnote-ref]' // selector for an anchor tag linked to a footnote.
-  const footnoteBackSel = 'a[data-footnote-backref]' // selector for the 'back' anchor tag within a footnote.
-  const footnoteAnchors = Array.from(document.querySelectorAll(footnoteAnchorSel)) as HTMLAnchorElement[]
-  const footnoteBackEls = Array.from(document.querySelectorAll(footnoteBackSel)) as HTMLAnchorElement[]
-  const calcFloatingContents = (): number => {
-    // calculate the total height of the 'position: fixed' contents of the page.
-    // currently there is two UI components like that:  'fundraiser-banner', 'header-toolbar'
-    const floatingEls = ['.fundraiser', '.c-header-wrapper']
-    let totalHeight = 0
+function prepFootnotes () {
+  const footnoteEl = document.querySelector('section.footnotes')
 
-    floatingEls.forEach(sel => {
-      const el = document.querySelector(sel)
+  // NOTE:
+  //  below is a logic to resolve a foonotes related bug(https://github.com/okTurtles/groupincome.org/issues/92)
+  //  which is when links are clicked, the page is not scrolled to the correct positions.
+  if (footnoteEl) {
+    const footnoteAnchorSel = 'a[data-footnote-ref]' // selector for an anchor tag linked to a footnote.
+    const footnoteBackSel = 'a[data-footnote-backref]' // selector for the 'back' anchor tag within a footnote.
+    const footnoteAnchors = Array.from(document.querySelectorAll(footnoteAnchorSel)) as HTMLAnchorElement[]
+    const footnoteBackEls = Array.from(document.querySelectorAll(footnoteBackSel)) as HTMLAnchorElement[]
+    const calcFloatingContents = (): number => {
+      // calculate the total height of the 'position: fixed' contents of the page.
+      // currently there is two UI components like that:  'fundraiser-banner', 'header-toolbar'
+      const floatingEls = ['.fundraiser', '.c-header-wrapper']
+      let totalHeight = 0
 
-      if (el) {
-        const bbox = el.getBoundingClientRect()
-        totalHeight += bbox.height
+      floatingEls.forEach(sel => {
+        const el = document.querySelector(sel)
+
+        if (el) {
+          const bbox = el.getBoundingClientRect()
+          totalHeight += bbox.height
+        }
+      })
+
+      return totalHeight
+    }
+    const getAdjustedTargetScrollPosition = (targetId: string): number => {
+      // get adjusted scroll-Y value of the target element of an anchor tag.
+      // 'adjusted' here means subtracting the total heights of the floating contents of the page.
+      const targetEl = document.querySelector(`#${targetId}`)
+      if (targetEl) {
+        const bbox = targetEl.getBoundingClientRect()
+        return bbox.top + document.documentElement.scrollTop - calcFloatingContents()
       }
-    })
+      return 0
+    }
+    const addClickHandlerWithAdjustment = (aTag: HTMLAnchorElement) => {
+      const href = aTag.href as string
+      const targetId = href ? href.split('#')[1] : ''
 
-    return totalHeight
-  }
-  const getAdjustedTargetScrollPosition = (targetId: string): number => {
-    // get adjusted scroll-Y value of the target element of an anchor tag.
-    // 'adjusted' here means subtracting the total heights of the floating contents of the page.
-    const targetEl = document.querySelector(`#${targetId}`)
-    if (targetEl) {
-      const bbox = targetEl.getBoundingClientRect()
-      return bbox.top + document.documentElement.scrollTop - calcFloatingContents()
-    }
-    return 0
-  }
-  const addClickHandlerWithAdjustment = (aTag: HTMLAnchorElement) => {
-    const href = aTag.href as string
-    const targetId = href ? href.split('#')[1] : ''
+      aTag.addEventListener('click', e => {
+        e.preventDefault()
 
-    aTag.addEventListener('click', e => {
-      e.preventDefault()
+        const targetPositionY = getAdjustedTargetScrollPosition(targetId)
+        if (targetPositionY > 0) {
+          window.scrollTo({ top: targetPositionY, behavior: 'instant' })
+        }
+      })
+    }
 
-      const targetPositionY = getAdjustedTargetScrollPosition(targetId)
-      if (targetPositionY > 0) {
-        window.scrollTo({ top: targetPositionY, behavior: 'instant' })
-      }
-    })
+    footnoteAnchors.forEach(addClickHandlerWithAdjustment)
+    footnoteBackEls.forEach(addClickHandlerWithAdjustment)
   }
-
-  footnoteAnchors.forEach(addClickHandlerWithAdjustment)
-  footnoteBackEls.forEach(addClickHandlerWithAdjustment)
 }
 </script>
 

src/posts/a-reliable-safety-net-for-small-communities.md renamed to src/posts/a-reliable-safety-net-for-small-communities.mdx

@@ -13,6 +13,7 @@ permalink: /2020/07/a-reliable-safety-net-for-small-communities/
 categories:
     - Uncategorized
 ---
+import { resolvePath } from '@/utils/helpers.js'
 
 As misfortunes don't seem to come singly in 2020, the [COVID-19 pandemic](https://www.who.int/emergencies/diseases/novel-coronavirus-2019) is magnifying [social and economic inequality](https://graduateinstitute.ch/coronavirus-information-our-community-and-visitors/covid-19-magnifier-social-inequality) and accelerating an [economic collapse](https://www.cnbc.com/2020/06/29/nearly-half-the-us-population-is-without-a-job-showing-how-far-the-labor-recovery-has-to-go.html). As an answer, some people are [demanding disruptive change](https://www.chicagoreader.com/chicago/police-abolitionist-movement-alternatives-cops-chicago/Content?oid=23289710), because governments have been slow and [unsatisfactory in their response](https://www.ohchr.org/en/NewsEvents/Pages/DisplayNews.aspx?NewsID=25793&LangID=E). There are several viewpoints on how to address these issues, but we came down to a dilemma: Should we rely on malfunctioning governments to be the answer? Or should we be resourceful and find tools, like Group Income, to build safety nets for ourselves and our communities?
 
@@ -28,7 +29,7 @@ Group Income solely relies on our sense of community, our ability to care for ea
 
 - **Why we consider communities so vital**
 
-<img src="https://groupincome.org/wp-content/uploads/2020/07/society-three-pillars.jpg" alt="" width="700" height="560" class="aligncenter size-full wp-image-1429" />
+<img src={resolvePath('wp-content/uploads/2020/07/society-three-pillars.jpg')} alt="" width="700" height="560" class="aligncenter size-full wp-image-1429" />
 
 Communities keep society balanced. Let's have a look at it from the standpoint of [Raghuram Rajan](https://www.chicagobooth.edu/faculty/directory/r/raghuram-g-rajan). The Chicago Booth professor explains that society is upheld by three fundamental pillars: governments (political pillar), markets (economic pillar), and communities (sociological pillar). 
 
@@ -42,7 +43,7 @@ According to Rajan, what happened across the industrial world was a continued vi
 
 **The consequence? The sociological pillar is now too fragile and there's an imbalance in society.**
 
-<img src="https://groupincome.org/wp-content/uploads/2020/07/society-broken-communities.jpg" alt="" width="700" height="560" class="aligncenter size-full wp-image-1430" />
+<img src={resolvePath('/wp-content/uploads/2020/07/society-broken-communities.jpg')} alt="" width="700" height="560" class="aligncenter size-full wp-image-1430" />
 
 **We no longer can deny [this imbalance](https://www.weforum.org/agenda/2018/11/unmanaged-globalisation-damaging-local-communities-heres-how). But how do we rectify it?** 
 

src/posts/aniko-fejes-and-sandrina-pereira-join-group-income.md renamed to src/posts/aniko-fejes-and-sandrina-pereira-join-group-income.mdx

@@ -13,10 +13,11 @@ permalink: /2018/08/aniko-fejes-and-sandrina-pereira-join-group-income/
 categories:
     - Uncategorized
 ---
+import { resolvePath } from '@/utils/helpers.js'
 
 Recently we bid farewell to [Victor Morrow](/articles/victor-morrow-joins-group-income/) who's moved on to exciting new [DARPA](https://www.darpa.mil) related work. Victor is still with us, now in a volunteer capacity. Thanks to his help, we've made great progress on Group Income. However, with his departure as full-time contractor, we needed to find someone to fill his shoes.
 
-<img src="https://groupincome.org/wp-content/uploads/2018/08/aniko-214x300.jpg" alt="" width="214" height="300" class="alignright size-medium wp-image-1133" />
+<img src={resolvePath('/wp-content/uploads/2018/08/aniko-214x300.jpg')} alt="" width="214" height="300" class="alignright size-medium wp-image-1133" />
 
 It was fortunate, therefore, that [Tamas Kalman](https://twitter.com/dH2K), another volunteer, introduced us to **Anikó Fejes**, a very talented developer and community organizer from Hungary.
 
@@ -26,7 +27,7 @@ Follow [@hubudibu](https://twitter.com/hubudibu) for the occasional tweet from h
 
 With Anikó on board, we were able to bring Group Income to the point where our focus had to shift away from internals and to the UI and UX of the app. In other words, we needed an expert frontend designer, and we found exactly what we were looking for in **Sandrina Pereira**.
 
-<img src="https://groupincome.org/wp-content/uploads/2018/08/sandrina-300x300.jpg" alt="" width="300" height="300" class="alignright size-medium wp-image-1132" />
+<img src={resolvePath('/wp-content/uploads/2018/08/sandrina-300x300.jpg')} alt="" width="300" height="300" class="alignright size-medium wp-image-1132" />
 
 Sandrina is a frontend developer with a great passion for interaction design. She loves to create unique experiences for <strike>users</strike> humans like you through the web.
 

src/posts/basic-security-our-real-goal.md renamed to src/posts/basic-security-our-real-goal.mdx

@@ -13,6 +13,7 @@ permalink: /2017/03/basic-security-our-real-goal/
 categories:
     - Uncategorized
 ---
+import { resolvePath } from '@/utils/helpers.js'
 
 Money is simply a tool that exists in circumstances when there is scarcity within an economy. It is a way of measuring the scarcity-demand for something. It is therefore a way of restricting access to that something. But when a lot of people choose to charge for scarce items using money, it gives money itself value -- value it otherwise would not have.
 
@@ -22,7 +23,7 @@ Confused, you'd ask, _"Kindness? What's that, and where do I get some?"_
 
 _"Well,"_ the shopkeep would say, _"You have to have a homeless person vouch for you. Their word is the currency that we take."_
 
-<img src="https://groupincome.org/wp-content/uploads/2017/03/kindness.jpg" alt="visual depiction of surrounding text" width="1420" height="569" class="alignnone size-full wp-image-943" />
+<img src={resolvePath('/wp-content/uploads/2017/03/kindness.jpg')} alt="visual depiction of surrounding text" width="1420" height="569" class="alignnone size-full wp-image-943" />
 
 You can imagine that would create an interesting situation. Suddenly, the value of simply being a homeless person would go up. These people would also have more power over society. The same thing happens with any currency, even dollars. If the creation of dollars is controlled by a small group (as it is), and those dollars are what shopkeeps around the country ask for, then that group suddenly becomes very powerful over society.
 

src/posts/bulgaria-hackathon-2019.md renamed to src/posts/bulgaria-hackathon-2019.mdx

@@ -14,12 +14,13 @@ permalink: /2021/06/bulgaria-hackathon-2019-roadmap-updates-hiring/
 categories:
     - Uncategorized
 ---
+import { resolvePath } from '@/utils/helpers.js'
 
 Some say it's not the destination that matters so much, but the journey and friends you meet along the way.
 
 I couldn't agree more. But also, destinations aren't to be underestimated either! Back in 2019, during the Before Times, our team — a mixture of independent contractors and volunteers — got together in the beautiful land of Bulgaria for **Hackathon #8**!
 
-<img src="https://groupincome.org/wp-content/uploads/2020/10/IMG_3732-768x1024.jpeg" alt="" width="768" height="1024" class="aligncenter size-large wp-image-1480" />
+<img src={resolvePath('/wp-content/uploads/2020/10/IMG_3732-768x1024.jpeg')} alt="" width="768" height="1024" class="aligncenter size-large wp-image-1480" />
 
 **In This Post**
 
@@ -36,13 +37,13 @@ Remember when people traveled? And did stuff? Together? In the same place? Wasn'
 Teammates from various parts of the world joined under a single roof, and this roof had two kinds of pools.
 
 <div class="gallery">
-<img src="https://groupincome.org/wp-content/uploads/2020/10/IMG_4028-300x225.jpeg"/>
-<img src="https://groupincome.org/wp-content/uploads/2020/10/IMG_4022-300x225.jpeg"/>
+	<img src={resolvePath('/wp-content/uploads/2020/10/IMG_4028-300x225.jpeg')} />
+	<img src={resolvePath('/wp-content/uploads/2020/10/IMG_4022-300x225.jpeg')} />
 </div>
 
 In attendance were familiar characters as well as new ones, including a brilliant young engineer and Group Income volunteer from South Korea by the name of [Sebin Song](https://sebinsong.github.io/).
 
-<img src="https://groupincome.org/wp-content/uploads/2020/10/IMG_20191018_172603.jpg"/>
+<img src={resolvePath('/wp-content/uploads/2020/10/IMG_20191018_172603.jpg')} />
 
 Sebin is one of the coolest people I've had to good fortune of meeting. He's an extremely intelligent, humble, and kind person whose talents in frontend development are exemplary.
 
@@ -58,36 +59,36 @@ I asked Sebin what he found exciting about Group Income, and what drew him to vo
 
 Most days we spent the morning, afternoon, and evenings working on Group Income.
 
-<img src="https://groupincome.org/wp-content/uploads/2020/10/IMG_3996.jpeg"/>
+<img src={resolvePath('/wp-content/uploads/2020/10/IMG_3996.jpeg')} />
 
 The team worked hard on implementing [Margarida's new dashboard designs](/2020/01/margarida-botelho-and-pierre-schweiger-join-group-income/):
 
-<img src="https://groupincome.org/wp-content/uploads/2020/01/gi-design-2-1024x682.jpg"/>
+<img src={resolvePath('/wp-content/uploads/2020/01/gi-design-2-1024x682.jpg')} />
 
 ### Food and exploration
 
 Andrea was our master vegan chef for the hackathon, and prepared a variety of delicious food for the team.
 
-<img src="https://groupincome.org/wp-content/uploads/2020/10/IMG_4025.jpeg"/>
+<img src={resolvePath('/wp-content/uploads/2020/10/IMG_4025.jpeg')} />
 
 Of course, we took time to explore Bulgaria too.
 
 The Black Sea is beautiful and was close to where we were staying.
 
-<img src="https://groupincome.org/wp-content/uploads/2020/10/IMG_3890.jpg"/>
+<img src={resolvePath('/wp-content/uploads/2020/10/IMG_3890.jpg')} />
 
-<img src="https://groupincome.org/wp-content/uploads/2020/10/IMG_20191021_174556.jpg"/>
+<img src={resolvePath('/wp-content/uploads/2020/10/IMG_20191021_174556.jpg')} />
 
-<img src="https://groupincome.org/wp-content/uploads/2020/10/IMG_20191021_175003.jpg"/>
+<img src={resolvePath('/wp-content/uploads/2020/10/IMG_20191021_175003.jpg')} />
 
 
 Pierre, always a fan of high-end restaurants, insisted that we visit one on the trip. This turned out to be a rather good idea, as the team loved the care with which one of Bulgaria's Master Chefs prepared each and every dish:
 
-<img src="https://groupincome.org/wp-content/uploads/2020/10/IMG_3899-1024x768.jpg"/>
+<img src={resolvePath('/wp-content/uploads/2020/10/IMG_3899-1024x768.jpg')} />
 
 I asked Pierre about his thoughts on Group Income. What was it that drew him to working on Group Income?
 
-<img src="https://groupincome.org/wp-content/uploads/2020/10/IMG_20191021_174559-300x300.jpg"/>
+<img src={resolvePath('/wp-content/uploads/2020/10/IMG_20191021_174559-300x300.jpg')} />
 
 > **"Our project is dedicated to people that care about each other and you can feel it from the inside: I've never been in a company that considers its people as human beings before being a workforce… and it just feels right."**
 >
@@ -97,9 +98,9 @@ I asked Pierre about his thoughts on Group Income. What was it that drew him to
 
 ### Show & Tell
 <div class="gallery">
-<img width="300" height="225" src="https://groupincome.org/wp-content/uploads/2020/10/IMG_4035-300x225.jpeg"/>
-<img width="300" height="225" src="https://groupincome.org/wp-content/uploads/2020/10/IMG_4039-300x225.jpeg"/>
-<img width="300" height="225" src="https://groupincome.org/wp-content/uploads/2020/10/IMG_4046-300x225.jpeg"/>
+	<img width="300" height="225" src={resolvePath('/wp-content/uploads/2020/10/IMG_4035-300x225.jpeg')} />
+	<img width="300" height="225" src={resolvePath('/wp-content/uploads/2020/10/IMG_4039-300x225.jpeg')} />
+	<img width="300" height="225" src={resolvePath('/wp-content/uploads/2020/10/IMG_4046-300x225.jpeg')} />
 </div>
 
 Our hard work had paid off! We now have a mostly-functioning demo that anyone with a little bit of Git knowledge can [download and try out for themselves](https://github.com/okTurtles/group-income-simple)!
@@ -116,7 +117,7 @@ Many features came together during this hackathon:
 - Early implementation of the Pay Group page.
 - And my many more features and squashed bugs!
 
-<img src="https://groupincome.org/wp-content/uploads/2020/10/margarida-278x300.jpg"/>
+<img src={resolvePath('/wp-content/uploads/2020/10/margarida-278x300.jpg')} />
 
 > **"Working on this project has been one of the highlights of my professional life. I will be forever grateful for the opportunity to use my expertise, knowledge and time to contribute to this amazing project.**
 > 
@@ -155,7 +156,7 @@ Join our team!
 We're looking for:
 
 <ul>
-<li><h4 style="font-family: sans-serif"><a href="/pos-infosec/">JavaScript + InfoSec + Protocol Developer</a> ($1000 referral reward!)</a></h4></li>
+<li><h4 style="font-family: sans-serif"><a href="/pos-infosec/">JavaScript + InfoSec + Protocol Developer</a> ($1000 referral reward!)</h4></li>
 <li><h4 style="font-family: sans-serif"><a href="/pos-crypto-integration/">Cryptocurrency Integration with Node.js</a></h4></li>
 <li><h4 style="font-family: sans-serif"><a href="/pos-technical-writer/">Technical Writer</a></h4></li>
 <li><h4 style="font-family: sans-serif"><a href="/pos-fundraiser-marketer/">Fundraiser - OR - Marketer with Fundraising Experience</a></h4></li>
@@ -167,7 +168,7 @@ We're looking for:
 - **478 [issues closed](https://github.com/okTurtles/group-income-simple/issues?q=is%3Aissue+is%3Aclosed)**
 - **398 [pull requests reviewed](https://github.com/okTurtles/group-income-simple/pulls?q=is%3Apr+is%3Aclosed)**
 
-<img src="https://groupincome.org/wp-content/uploads/2020/10/IMG_3855.jpg"/>
+<img src={resolvePath('/wp-content/uploads/2020/10/IMG_3855.jpg')} />
 
 ## Participate In Group Income