Merge pull request #16 from mateonunez/feat/projects

Author: mateonunez

.env.local.example

@@ -1,8 +1,11 @@
 # Next
 NEXT_PUBLIC_BASE_URL=
 
-# Spotify 
+# Spotify
 SPOTIFY_CLIENT_ID=
 SPOTIFY_CLIENT_SECRET=
 SPOTIFY_REFRESH_TOKEN=
-SPOTIFY_REDIRECT_URI=
+SPOTIFY_REDIRECT_URI=
+
+# Github
+GITHUB_TOKEN=

components/articles/mdx/heading/index.js

@@ -16,19 +16,28 @@ const copyToClipboard = ({ id, title, ...rest }) => {
   );
 };
 
-export const H1 = ({ id, children, ...rest }) => (
-  <>
-    <h1 title={children} aria-label={children} {...rest}>
-      {children}
+export const H1 = ({ id, children, ...rest }) => {
+  let title;
+  if (typeof children === 'object') {
+    title = children.props?.title;
+  } else {
+    title = children;
+  }
 
-      {id && copyToClipboard({ id, title: children })}
-    </h1>
-  </>
-);
+  return (
+    <>
+      <h1 title={title} aria-label={title} {...rest} className="flex text-2xl">
+        {children}
+
+        {id && copyToClipboard({ id, title: children })}
+      </h1>
+    </>
+  );
+};
 
 export const H2 = ({ id, children, ...rest }) => (
   <>
-    <h2 title={children} aria-label={children} {...rest}>
+    <h2 title={children} aria-label={children} {...rest} className="text-lg">
       {children}
 
       {id && copyToClipboard({ id, title: children })}

components/articles/mdx/link/index.js

@@ -3,10 +3,17 @@ import Link from 'next/link';
 export default function MDXLink({ children, ...rest }) {
   const { href } = rest;
 
+  let title;
+  if (typeof children === 'object') {
+    title = children.props?.alt;
+  } else {
+    title = children;
+  }
+
   return (
     <>
       <Link href={href}>
-        <a href={href} alt={children} title={children} target="_blank" rel="noreferrer">
+        <a href={href} alt={title} title={title} target="_blank" rel="noreferrer">
           {children}
         </a>
       </Link>

components/github/cards/profile/index.jsx

@@ -0,0 +1 @@
+export { default as GitHubProfile } from './profile';

components/github/cards/profile/profile.jsx

@@ -0,0 +1,45 @@
+import s from './profile.module.css';
+
+import { Container } from 'components';
+
+import Image from 'next/image';
+import Link from 'next/link';
+
+export default function Profile({ avatar, bio, company, email, username, url, location, ...rest }) {
+  console.log('Snooping...', {
+    company,
+    email,
+    location
+  });
+
+  return (
+    <>
+      <Container {...rest}>
+        <div className={s.root}>
+          {/* Avatar  */}
+          <div className={s.avatar}>
+            <Image
+              width={150}
+              height={150}
+              src={avatar}
+              alt="Mateo Nunez's face"
+              layout="responsive"
+            />
+          </div>
+          <div className={s.bioContainer}>
+            {/* Name  */}
+            <h1 className={s.name}>@{username}</h1>
+            {/* Bio  */}
+            <p className={s.bio}>{bio}</p>
+            {/* Url */}
+            <Link href={url}>
+              <a title="Github" aria-label="Github" rel="canonical" target="_blank">
+                {url}
+              </a>
+            </Link>
+          </div>
+        </div>
+      </Container>
+    </>
+  );
+}

components/github/cards/profile/profile.module.css

@@ -0,0 +1,37 @@
+.root {
+  margin: auto 4rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 600px;
+  min-height: auto;
+}
+
+.avatar {
+  width: 150px;
+  height: 150px;
+  border-radius: 50%;
+  overflow: hidden;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
+}
+
+.bioContainer {
+  margin-top: 1rem;
+  margin-left: 2rem;
+}
+
+.name {
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+
+.bio {
+  font-size: 1rem;
+  font-weight: lighter;
+}
+
+@media (max-width: 600px) {
+  .root {
+    margin: 1rem 0 4rem;
+  }
+}

components/github/index.jsx

@@ -0,0 +1,2 @@
+export * from './cards/profile';
+export * from './repositories/preview';

components/github/repositories/index.jsx

@@ -0,0 +1 @@
+export { default as RepositoryPreview } from './preview';

components/github/repositories/preview/index.jsx

@@ -0,0 +1 @@
+export { default as RepositoryPreview } from './preview';

components/github/repositories/preview/preview.jsx

@@ -0,0 +1,81 @@
+import { Fork, Star } from 'components';
+import Link from 'next/link';
+import s from './preview.module.css';
+
+export default function RepositoryPreview({
+  name,
+  description,
+  forks,
+  language,
+  languageColor,
+  stars,
+  url
+}) {
+  return (
+    <>
+      <div className={s.root}>
+        <div className={s.container}>
+          {/* Heading */}
+
+          {/* Name  */}
+          <Link href={url}>
+            <a
+              rel="canonical noreferrer"
+              target="_blank"
+              className={s.name}
+              title={name}
+              href={url}>
+              {name}
+            </a>
+          </Link>
+
+          {/* Description  */}
+          <div className={s.description}>{description}</div>
+
+          {/* Stats and Language */}
+          <div className={s.stats}>
+            {/* Language */}
+            {language && (
+              <div className={s.language}>
+                <div className={s.languageColor} style={{ backgroundColor: languageColor }} />
+                <div className={s.languageName}>{language}</div>
+              </div>
+            )}
+
+            {/* Stars */}
+            <div className={s.stars}>
+              <Link href={`${url}/stargazers`}>
+                <a
+                  href={`${url}/stargazers`}
+                  rel="canonical noreferrer"
+                  target="_blank"
+                  aria-label={`${name} stars`}
+                  title={`${name} stars`}
+                  className="flex">
+                  <Star className="w-5 h-5" />
+                  <span className={s.starsCount}>{stars}</span>
+                </a>
+              </Link>
+            </div>
+
+            {/* Forks  */}
+            <div className={s.forks}>
+              <Link href={`${url}/network/members`}>
+                <a
+                  href={`${url}/network/members`}
+                  rel="canonical noreferrer"
+                  target="_blank"
+                  aria-label={`${name} forks`}
+                  title={`${name} forks`}
+                  className="flex">
+                  <Fork className="w-5 h-5" />
+                  <div className={s.forksCount}>{forks}</div>
+                </a>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}