Merge branch 'develop'

Author: luistak

pages/api/hello.tsx

@@ -1,5 +1,4 @@
 import NextImage from 'next/image';
-import { NextPage } from 'next';
 import { Translate } from 'i18n';
 import { PageTemplate } from 'components/template';
 import styled from 'styled-components';
@@ -11,6 +10,11 @@ const Image = styled(NextImage)`
   box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.5);
 `;
 
+const PostSection = styled.section`
+  margin-top: 4rem;
+  margin-bottom: 2rem;
+`;
+
 const ImageContainer = styled.section`
   margin-top: 1rem;
 
@@ -60,36 +64,79 @@ const handleSocialMediaClick = (socialMedia: SocialMediaKey) => () => {
   });
 };
 
+const handlePostClock = (slug: string) => () => {
+  gtag.event({
+    action: 'post_click',
+    category: 'Post click',
+    label: slug,
+  });
+};
+
+type Post = {
+  url: string;
+  slug: string;
+  title: string;
+  description: string;
+};
 type HomeProps = {
   t: Translate;
+  posts: Post[];
 };
-const Home: NextPage<HomeProps> = ({ t }) => (
-  <PageTemplate t={t} title={t('author')}>
-    <h1>{t('welcome')}</h1>
-    <p>{t('bio')}</p>
-    <Image
-      src="/takah.jpg"
-      alt="Picture of the author"
-      width={100}
-      height={100}
-      style={{ margin: 'auto' }}
-    />
-    <ImageContainer>
-      {Object.entries(socialMedias).map(
-        ([socialMedia, { alt, src, link }]: [SocialMediaKey, SocialMedia]) => (
+function Home({ t, posts }: HomeProps) {
+  return (
+    <PageTemplate t={t} title={t('author')}>
+      <h1>{t('welcome')}</h1>
+      <p>{t('bio')}</p>
+      <Image
+        src="/takah.jpg"
+        alt="Picture of the author"
+        width={100}
+        height={100}
+        style={{ margin: 'auto' }}
+      />
+      <ImageContainer>
+        {Object.entries(socialMedias).map(
+          ([socialMedia, { alt, src, link }]: [
+            SocialMediaKey,
+            SocialMedia
+          ]) => (
+            <a
+              key={socialMedia}
+              href={link}
+              target="_blank"
+              rel="noreferrer noreferrer"
+              onClick={handleSocialMediaClick(socialMedia)}
+            >
+              <img src={src} alt={alt} width={20} height={20} />
+            </a>
+          )
+        )}
+      </ImageContainer>
+      <PostSection>
+        <h3>Blog posts</h3>
+        {posts.map(({ slug, title, description, url }) => (
           <a
-            key={socialMedia}
-            href={link}
+            key={slug}
+            href={url}
             target="_blank"
             rel="noreferrer noreferrer"
-            onClick={handleSocialMediaClick(socialMedia)}
+            onClick={handlePostClock(slug)}
           >
-            <img src={src} alt={alt} width={20} height={20} />
+            <p>{title}</p>
           </a>
-        )
-      )}
-    </ImageContainer>
-  </PageTemplate>
-);
+        ))}
+      </PostSection>
+    </PageTemplate>
+  );
+}
+
+Home.getInitialProps = async function getStaticPaths() {
+  const result = await fetch('https://dev.to/api/articles?username=luistak');
+  const posts = await result.json();
+
+  return {
+    posts,
+  };
+};
 
 export default Home;