Merge pull request #11 from mateonunez/blog/consuming-spotify-apis

Blog - Consuming Spotify APIs

Author: mateonunez

articles/consuming-spotify-apis.mdx

@@ -3,9 +3,9 @@ title: 'How I made my Blog with Next.js and MDX'
 date: 2022-04-19T10:54:18.459Z
 description: 'Hello stranger! In this article I will show you how I made my blog serverless with Next.js and MDX.'
 tags:
-  - Next.JS
-  - MDX
-  - JavaScript
+  - next.js
+  - mdx
+  - javascript
 image: '/images/articles/hello-blog/cover.png'
 author:
   name: Mateo

articles/hello-blog.mdx

@@ -12,6 +12,7 @@ export default function MDXImage({
   quality,
   priority,
   href,
+  target = '_self',
   ...rest
 }) {
   const ImageWrapper = (
@@ -34,7 +35,7 @@ export default function MDXImage({
     <div className={s.root}>
       {href ? (
         <Link href={href} fancy={false} passHref>
-          <a href={href} alt={alt} aria-label={alt} title={alt}>
+          <a href={href} alt={alt} aria-label={alt} title={alt} target={target}>
             {ImageWrapper}
           </a>
         </Link>

components/articles/mdx/image/index.js

@@ -4,6 +4,7 @@ import Link from 'next/link';
 
 import { dateWithoutYearForHumans } from 'lib/helpers/date';
 import { Clock, Tag, User } from 'components/icons';
+import { kebapCase } from 'lib/helpers/string';
 
 export default function ArticleMeta({ date, author, readingTime, tags = [] }) {
   return (
@@ -23,7 +24,7 @@ export default function ArticleMeta({ date, author, readingTime, tags = [] }) {
           <div className={s.tagList}>
             {tags.map((tag, index) => (
               <span className={index !== tags.length - 1 ? 'mr-2' : ''} key={tag}>
-                <Link href="/blog/tags/[tag]" as={`/blog/tags/${tag}`}>
+                <Link href={`/blog/tags/${kebapCase(tag)}`} as={`/blog/tags/${kebapCase(tag)}`}>
                   <a className={s.tag} title={tag}>
                     #{tag}
                   </a>

components/articles/meta/index.js

@@ -17,7 +17,9 @@ export default function RecentlyPlayed({ items }) {
           left:
             direction === 'left'
               ? current.scrollLeft - current.clientWidth - config.munber
-              : current.scrollLeft + current.clientWidth - config.munber,
+              : direction === 'right'
+              ? current.scrollLeft + current.clientWidth - config.munber
+              : 0,
           behavior: 'smooth'
         });
       }

components/spotify/recently-played/recently-played.jsx

@@ -0,0 +1,25 @@
+/**
+ * Convert a string into kebap-case
+ *
+ * @param {String} str
+ * @returns {String}
+ */
+const kebapCase = str =>
+  str
+    .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
+    .map(x => x.toLowerCase())
+    .join('-');
+
+/**
+ * Get thi initials from string
+ *
+ * @param {String} str
+ * @returns {String}
+ */
+const initials = str =>
+  str
+    .match(/(?<=\s|^)\p{L}\p{Mn}*/gu)
+    ?.filter((_, i, array) => i === 0 || i === array.length - 1)
+    .join('') || '';
+
+export { kebapCase, initials };

lib/helpers/string.js

@@ -1,10 +1,12 @@
+import 'styles/global.css';
+import 'styles/nprogress.css';
+import 'components/articles/mdx/code/dark.css';
+
+import React from 'react';
+
 import { GTMProvider } from '@elgorditosalsero/react-gtm-hook';
 import { Head, MainLayout } from 'components';
-import 'components/articles/mdx/code/dark.css';
 import { UIProvider } from 'components/ui/ui-context';
-import React from 'react';
-import 'styles/global.css';
-import 'styles/nprogress.css';
 
 export default function App({ Component, pageProps }) {
   // Retrieves the layout