Merge pull request #82 from chrisweb/preview

small fixes and social icons

Author: chrisweb

app/global.css

@@ -926,6 +926,19 @@ make the text color a bit darker */
     margin-right: calc(var(--main-spacing) / 2);
 }
 
+.socialIcon {
+    margin-right: calc(var(--main-spacing) / 2);
+    color: var(--primary-light-color);
+}
+
+/* not on mobile */
+@media (hover: hover) {
+
+    .socialIcon:hover {
+        color: var(--secondary-light-color);
+    }
+}
+
 @keyframes rippleAnimation {
     0% {
         box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);

app/web_development/page.mdx

@@ -24,7 +24,7 @@ export const metadata = {
     <div className="asideCore">
         <ul className="linksList">
             <li>
-                <FontAwesomeIcon icon={faGithub} color='white' size="2x" className="social" /> <BaseLink href="https://github.com/chrisweb">My GitHub Projects</BaseLink>
+                <FontAwesomeIcon icon={faGithub} color="white" size="2x" className="social" /> <BaseLink href="https://github.com/chrisweb">My GitHub Projects</BaseLink>
             </li>
         </ul>
         <AsideContent />

app/web_development/posts/mdx/page.mdx

@@ -1,8 +1,8 @@
 ---
 title: MDX
-keywords: ['MDX', 'markdown', 'remark', 'rehype', 'MDAST', 'HAST']
+keywords: ['MDX', 'markdown', 'md', 'micromark', 'unifiedjs', 'commonmark', 'remark', 'rehype', 'MDAST', 'HAST']
 published: 2024-08-10T11:22:33.444Z
-modified: 2024-10-25T10:10:10.444Z
+modified: 2025-01-01T10:10:10.444Z
 permalink: https://chris.lu/web_development/posts/mdx
 section: Web development
 ---
@@ -146,9 +146,13 @@ All major frameworks support MDX either out of the box or via packages that you
 
 [markdoc](https://markdoc.dev/docs/nextjs) is a markdown only package (so no MDX), but they now have a Next.js plugin, which makes it easy to use markdoc with Next.js
 
-[contentlayer](https://github.com/contentlayerdev/contentlayer) is an MDX package that was popular in the past (having earned >3k stars) but does not seem to get any updates anymore
+~~[contentlayer](https://github.com/contentlayerdev/contentlayer)~~ is an MDX package that was popular in the past (having earned >3k stars) but does not seem to get any updates anymore
 
 > [!WARN]  
-> This is the post suggests that its [development is currently halted](https://github.com/contentlayerdev/contentlayer/issues/429). Also, as of now, the last update was almost a year ago, so be careful when considering that package
+> contentlayer update: as this post suggests: [development is currently halted](https://github.com/contentlayerdev/contentlayer/issues/429)
+>  
+> they now also added this warning in their readme:
+>  
+> > Unfortunately Contentlayer is no longer maintained due to lack of funding. [You can find a fork of the project here.](https://github.com/timlrx/contentlayer2)
 
 </article>

app/web_development/tutorials/next-js-static-first-mdx-starterkit/mdx-plugins/page.mdx

@@ -177,7 +177,7 @@ I digged in the code of the [@next/mdx/mdx-js-loader.js](https://github.com/verc
 
 meaning that the following example will lead to the TypeError above:
 
-```shell
+```js
 const withMDX = createMDX({
     options: {
         remarkPlugins: [],
@@ -188,7 +188,7 @@ const withMDX = createMDX({
 
 To fix the configuration you need to use:
 
-```shell
+```js
 const withMDX = createMDX({
     options: {
         remarkPlugins: [],

components/aside/Content.tsx

@@ -3,6 +3,7 @@ import BaseLink from '@/components/base/Link'
 import ShareButton from '@/components/base/button/Share'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faHeart, faBug, faComments } from '@fortawesome/free-solid-svg-icons'
+import { faGithub, faMastodon, faDiscord } from '@fortawesome/free-brands-svg-icons'
 import Image from 'next/image'
 import buyMeACoffeeImport from '@/public/assets/images/buy_me_a_coffee_button.png'
 
@@ -14,7 +15,6 @@ const AsideContent: React.FC = () => {
             <a href="https://www.buymeacoffee.com/chriswwweb" className={`${styles.coffeeButton} shake`} rel="noopener noreferrer" target="_blank">
                 <Image src={buyMeACoffeeImport} priority fill alt="buy me a coffee, please" />
             </a>
-            <br />
             <span className="fontDarker">* Please 😉</span>
             <p className="fontSmall fontDarker alignLeft">
                 <FontAwesomeIcon icon={faHeart} size="1x" className="startInlineIcon" />
@@ -32,9 +32,22 @@ const AsideContent: React.FC = () => {
             <p className="fontSmall fontDarker alignLeft">
                 <FontAwesomeIcon icon={faComments} className="startInlineIcon" />
                 Suggestions and Ideas are appreciated, please use the&nbsp;
+                <BaseLink href="https://discord.gg/4p59CCTUAJ">chris.lu Discord server</BaseLink>
+                or the&nbsp;
                 <BaseLink href="https://github.com/chrisweb/chris.lu/discussions">discussion board</BaseLink>
                 to leave feedback or ask a question.
             </p>
+            <p>
+                <BaseLink href="https://discord.gg/4p59CCTUAJ" noExternalIcon={true}>
+                    <FontAwesomeIcon icon={faDiscord} color="white" size="2x" className="socialIcon" />
+                </BaseLink>
+                <BaseLink href="https://mastodon.social/@chriswwweb" noExternalIcon={true}>
+                    <FontAwesomeIcon icon={faMastodon} color="white" size="2x" className="socialIcon" />
+                </BaseLink>
+                <BaseLink href="https://github.com/chrisweb" noExternalIcon={true}>
+                    <FontAwesomeIcon icon={faGithub} color="white" size="2x" className="socialIcon" />
+                </BaseLink>
+            </p>
         </div>
     )
 }

components/base/Link.tsx

@@ -9,6 +9,7 @@ export interface IBaseLinkProps extends PropsWithChildren {
     target?: string
     rel?: string
     className?: string
+    noExternalIcon?: boolean
 }
 
 const isExternalUrl = (url: string, domain: string): boolean => {
@@ -53,12 +54,12 @@ const isUrlMe = (url: string): boolean => {
 
 const BaseLink: React.FC<IBaseLinkProps> = (props) => {
 
-    const { href, children, ...linkProps } = props
+    const { href, children, noExternalIcon, ...linkProps } = props
+    const newLinkProps = { ...linkProps }
 
     const isExternal = isExternalUrl(href.toString(), 'chris.lu')
     const isMe = isUrlMe(href.toString())
-
-    const newLinkProps = { ...linkProps }
+    const withExternalIcon = isExternal && !noExternalIcon
 
     if (isExternal) {
         newLinkProps.rel = 'noopener noreferrer'
@@ -71,7 +72,7 @@ const BaseLink: React.FC<IBaseLinkProps> = (props) => {
 
     return (
         <>
-            {isExternal ?
+            {(withExternalIcon) ?
                 (
                     <>
                         <a href={href.toString()} {...newLinkProps}>