Merge pull request #11 from hyesungoh/refactor/#8

refactor: #8

apps/blog/src/components/AuthorSection/AuthorSection.tsx

@@ -0,0 +1,64 @@
+import styled from '@emotion/styled';
+import { Avatar, Link } from '@nextui-org/react';
+import { KBarToggleButton } from 'core';
+
+import { authorImage, authorName, defaultUrl } from 'core/constants';
+import { blogDescription } from '../../../_config';
+
+interface Props {
+  marginBottom?: string;
+  hasKbarButton?: boolean;
+}
+
+function AuthorSection({ marginBottom = '3.5rem', hasKbarButton = false }: Props) {
+  return (
+    <Section style={{ marginBottom }}>
+      <Div>
+        <Avatar src={authorImage.default.src} alt={authorName} text={authorName} size="xl" />
+        <TextWrapper>
+          <H2>
+            Personal blog by{' '}
+            <Link href={defaultUrl} target="_blank" rel="noreferrer" color="primary">
+              {authorName}
+            </Link>
+            .
+          </H2>
+          <p>{blogDescription}</p>
+        </TextWrapper>
+      </Div>
+
+      {hasKbarButton && <KBarToggleButton />}
+    </Section>
+  );
+}
+
+export default AuthorSection;
+
+const Section = styled.section`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const Div = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const TextWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-left: 0.875rem;
+
+  & > * {
+    margin: 0;
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+`;
+
+const H2 = styled.h2`
+  font-weight: normal;
+`;

apps/blog/src/components/AuthorSection/index.tsx

@@ -1,64 +1 @@
-import styled from '@emotion/styled';
-import { Avatar, Link } from '@nextui-org/react';
-import { KBarToggleButton } from 'core';
-
-import { authorImage, authorName, defaultUrl } from 'core/constants';
-import { blogDescription } from '../../../_config';
-
-interface Props {
-  marginBottom?: string;
-  hasKbarButton?: boolean;
-}
-
-function AuthorSection({ marginBottom = '3.5rem', hasKbarButton = false }: Props) {
-  return (
-    <Section style={{ marginBottom }}>
-      <Div>
-        <Avatar src={authorImage.default.src} alt={authorName} text={authorName} size="xl" />
-        <TextWrapper>
-          <H2>
-            Personal blog by{' '}
-            <Link href={defaultUrl} target="_blank" rel="noreferrer" color="primary">
-              {authorName}
-            </Link>
-            .
-          </H2>
-          <p>{blogDescription}</p>
-        </TextWrapper>
-      </Div>
-
-      {hasKbarButton && <KBarToggleButton />}
-    </Section>
-  );
-}
-
-export default AuthorSection;
-
-const Section = styled.section`
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`;
-
-const Div = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-const TextWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  margin-left: 0.875rem;
-
-  & > * {
-    margin: 0;
-    font-size: 1rem;
-    line-height: 1.5rem;
-  }
-`;
-
-const H2 = styled.h2`
-  font-weight: normal;
-`;
+export { default } from './AuthorSection';

apps/blog/src/components/Comments/Comments.tsx

@@ -0,0 +1,64 @@
+import { useEffect, useRef } from 'react';
+import { useTheme } from '@nextui-org/react';
+import { blogRepo } from '../../../_config';
+
+const src = 'https://utteranc.es/client.js';
+const LIGHT_THEME = 'github-light';
+const DARK_THEME = 'github-dark';
+const SYSTEM_THEME = 'preferred-color-scheme';
+const UTTERANCE_QUERY = '.utterances-frame';
+
+function Comments() {
+  const rootElm = useRef<HTMLElement>();
+  const { isDark } = useTheme();
+
+  // for initial
+  useEffect(() => {
+    function getCurrentTheme() {
+      const initialTheme = document.querySelector('html').classList[0];
+      if (initialTheme) {
+        return initialTheme.includes('dark') ? DARK_THEME : LIGHT_THEME;
+      }
+      return SYSTEM_THEME;
+    }
+
+    if (!rootElm.current) return;
+    if (document.querySelector(UTTERANCE_QUERY)) return; // prevant duplicate
+
+    const utterances = document.createElement('script');
+    const utterancesConfig = {
+      src,
+      repo: blogRepo,
+      theme: getCurrentTheme(),
+      label: 'comment',
+      async: true,
+      'issue-term': 'pathname',
+      crossorigin: 'anonymous',
+    };
+
+    Object.keys(utterancesConfig).forEach(key => {
+      utterances.setAttribute(key, utterancesConfig[key]);
+    });
+    rootElm.current.appendChild(utterances);
+  }, []);
+
+  // for theme changed
+  useEffect(() => {
+    if (document.querySelector(UTTERANCE_QUERY)) {
+      const iframe = document.querySelector<HTMLIFrameElement>(UTTERANCE_QUERY);
+
+      if (!iframe) {
+        return;
+      }
+
+      iframe?.contentWindow?.postMessage(
+        { type: 'set-theme', theme: isDark ? DARK_THEME : LIGHT_THEME },
+        'https://utteranc.es'
+      );
+    }
+  }, [isDark]);
+
+  return <section ref={rootElm} />;
+}
+
+export default Comments;

apps/blog/src/components/Comments/index.tsx

@@ -1,64 +1 @@
-import { useEffect, useRef } from 'react';
-import { useTheme } from '@nextui-org/react';
-import { blogRepo } from '../../../_config';
-
-const src = 'https://utteranc.es/client.js';
-const LIGHT_THEME = 'github-light';
-const DARK_THEME = 'github-dark';
-const SYSTEM_THEME = 'preferred-color-scheme';
-const UTTERANCE_QUERY = '.utterances-frame';
-
-function Comments() {
-  const rootElm = useRef<HTMLElement>();
-  const { isDark } = useTheme();
-
-  // for initial
-  useEffect(() => {
-    function getCurrentTheme() {
-      const initialTheme = document.querySelector('html').classList[0];
-      if (initialTheme) {
-        return initialTheme.includes('dark') ? DARK_THEME : LIGHT_THEME;
-      }
-      return SYSTEM_THEME;
-    }
-
-    if (!rootElm.current) return;
-    if (document.querySelector(UTTERANCE_QUERY)) return; // prevant duplicate
-
-    const utterances = document.createElement('script');
-    const utterancesConfig = {
-      src,
-      repo: blogRepo,
-      theme: getCurrentTheme(),
-      label: 'comment',
-      async: true,
-      'issue-term': 'pathname',
-      crossorigin: 'anonymous',
-    };
-
-    Object.keys(utterancesConfig).forEach(key => {
-      utterances.setAttribute(key, utterancesConfig[key]);
-    });
-    rootElm.current.appendChild(utterances);
-  }, []);
-
-  // for theme changed
-  useEffect(() => {
-    if (document.querySelector(UTTERANCE_QUERY)) {
-      const iframe = document.querySelector<HTMLIFrameElement>(UTTERANCE_QUERY);
-
-      if (!iframe) {
-        return;
-      }
-
-      iframe?.contentWindow?.postMessage(
-        { type: 'set-theme', theme: isDark ? DARK_THEME : LIGHT_THEME },
-        'https://utteranc.es'
-      );
-    }
-  }, [isDark]);
-
-  return <section ref={rootElm} />;
-}
-
-export default Comments;
+export { default } from './Comments';

apps/blog/src/components/DateAndCategoryLink/DateAndCategoryLink.tsx

@@ -0,0 +1,26 @@
+import NextLink from 'next/link';
+import { Link } from '@nextui-org/react';
+
+interface Props {
+  date: string;
+  category?: string;
+}
+
+function DateAndCategoryLink({ date, category }: Props) {
+  return (
+    <>
+      {date}
+      {category && (
+        <>
+          {' '}
+          at{' '}
+          <NextLink href={`/category/${category}`} passHref>
+            <Link color="primary">{category}</Link>
+          </NextLink>{' '}
+          category
+        </>
+      )}
+    </>
+  );
+}
+export default DateAndCategoryLink;

apps/blog/src/components/DateAndCategoryLink/index.tsx

@@ -1,26 +1 @@
-import NextLink from 'next/link';
-import { Link } from '@nextui-org/react';
-
-interface Props {
-  date: string;
-  category?: string;
-}
-
-function DateAndCategoryLink({ date, category }: Props) {
-  return (
-    <>
-      {date}
-      {category && (
-        <>
-          {' '}
-          at{' '}
-          <NextLink href={`/category/${category}`} passHref>
-            <Link color="primary">{category}</Link>
-          </NextLink>{' '}
-          category
-        </>
-      )}
-    </>
-  );
-}
-export default DateAndCategoryLink;
+export { default } from './DateAndCategoryLink';

apps/blog/src/components/PostCard/PostCard.tsx

@@ -0,0 +1,47 @@
+import styled from '@emotion/styled';
+import NextLink from 'next/link';
+import { Link, NextUITheme, theme } from '@nextui-org/react';
+import DateAndCategoryLink from '../DateAndCategoryLink';
+
+interface Props {
+  slug: string;
+  title: string;
+  subtitle?: string;
+  date: string;
+  category?: string;
+  theme: typeof theme;
+}
+
+function PostCard({ slug, title, subtitle, date, category, theme }: Props) {
+  return (
+    <Article>
+      <h3>
+        <NextLink href={`/${slug}`} passHref>
+          <Link underline css={{ color: theme.colors.text.value }}>
+            {title}
+          </Link>
+        </NextLink>
+      </h3>
+      <Small theme={theme}>
+        <DateAndCategoryLink date={date} category={category} />
+      </Small>
+      {subtitle && <P>{subtitle}</P>}
+    </Article>
+  );
+}
+
+export default PostCard;
+
+const Article = styled.article`
+  width: 100%;
+  margin-bottom: 2.5rem;
+`;
+
+const Small = styled.small<{ theme: NextUITheme | undefined }>`
+  color: ${({ theme }) => theme.colors.accents6.value};
+`;
+
+const P = styled.p`
+  width: 100%;
+  margin: 0;
+`;