タグコンポーネントの分離・フォント変更・その他スタイルの変更

nedew · Dec 28, 2020 · 4f9a659 · 4f9a659 · vercel · Dec 28, 2020
1 parent 72e59cf
commit 4f9a659
Show file tree

Hide file tree

Showing 18 changed files with 153 additions and 20 deletions.
diff --git a/articles/202012290656_75234_markdown-style-test.mdx b/articles/202012290656_75234_markdown-style-test.mdx
@@ -0,0 +1,31 @@
+---
+title: "Mdxで書けるMarkdownのスタイル確認"
+date: "2020-12-29-06-56"
+tags: [mdx, markdown, blog]
+---
+
+これはテスト記事です
+- これはテストのテキストです。
+- これはThis is a pen;
+- React compornent;
+- Next.js
+
+# これはテストです React Components - Next.js
+
+`content`
+
+# Code block
+```js
+console.log('test desu')
+const test = getPostData()
+```
+
+```ts
+import { parse, format } from 'date-fns'
+
+export function formatDate(date: string) {
+  const fmt = parse(date, 'yyyy-MM-dd-HH-mm', new Date())
+  // return format(fmt, 'yyyy/MM/dd HH:mm')
+  return format(fmt, 'yyyy/MM/dd')
+}
+```
diff --git a/components/ArticleList.tsx b/components/ArticleList.tsx
@@ -1,8 +1,7 @@
 import Link from 'next/link'
-import Tags from './Tags'
+import TagsInArticleList from './TagsInArticleList'
 import styles from './styles/articleList.module.scss'
 import { formatDate } from '../lib/format'
-import Articles from '../pages/articles'
 
 export default function ArticleList(props: {
   articles: {
@@ -25,8 +24,8 @@ export default function ArticleList(props: {
             </Link>
             <div className={styles.articleInfo}>
               <div className={styles.date}>{formatDate(a.date)}</div>
-              <div className={styles.separation}> / </div>
-              <Tags tags={a.tags} />
+              <div className={styles.separation}>/</div>
+              <TagsInArticleList tags={a.tags} />
             </div>
           </div>
         )

diff --git a/components/TagsInArticleList.tsx b/components/TagsInArticleList.tsx
@@ -0,0 +1,18 @@
+import Link from 'next/link'
+import styles from './styles/tagsInArticleList.module.scss'
+
+export default function Tag(props: {
+  tags: string[]
+}) {
+  return (
+    <div className={styles.articleTags}>
+      {props.tags.map((tag, index) => {
+        return (
+          <Link href={`/tags/${tag}`} key={index}>
+            <a className={styles.tag}>{tag}</a>
+          </Link>
+        )
+      })}
+    </div>
+  )
+}
diff --git a/components/styles/article.module.scss b/components/styles/article.module.scss
@@ -20,11 +20,12 @@
   display: flex;
   font-size: 19px;
   font-weight: 500;
+  // font-weight: bold;
   color: var(--color-light-text);
   letter-spacing: 0.05rem;
   align-items: center;
   margin-bottom: 0.8rem;
-  font-family: -apple-system, "Segoe UI", sans-serif;
+  font-family: 'Roboto', -apple-system, "Segoe UI", sans-serif;
   @media screen and (max-width: $breakPoint) {
     font-size: 17px;
     // font-weight: 400;
@@ -47,7 +48,6 @@
 }
 
 .date {
-  font-family: -apple-system, "Segoe UI", sans-serif;
 }
 
 .article {

diff --git a/components/styles/articleList.module.scss b/components/styles/articleList.module.scss
@@ -55,8 +55,10 @@
 .date {
   display: inline-block;
   font-size: 16px;
+  font-weight: 500;
+  letter-spacing: 0.05rem;
   color: var(--color-light-text);
-  font-family: -apple-system, BlinkMacSystemFont, sans-serif, "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", Arial, メイリオ, Meiryo;
+  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif, "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", Arial, メイリオ, Meiryo;
   // font-weight: 600;
   // margin-bottom: 0.2rem;
   @media screen and (max-width: $breakPoint) {

diff --git a/components/styles/footer.module.scss b/components/styles/footer.module.scss
@@ -4,6 +4,8 @@
   width: 100%;
   // background-color: #fafafa;
   // color: #bbbbbb;
+  font-family: 'Roboto', 'Segoe UI', 'Helvetica Neue', Arial, 'BIZ UDPGothic', 'Yu Gothic UI', 'Meiryo UI', Helvetica, sans-serif;
+  font-weight: 400;
   padding: 1.8rem 0;
   border-top: 1px solid var(--color-line);
   margin-top: auto;
@@ -46,7 +48,7 @@
   }
 
   @media screen and (max-width: $breakPoint) {
-    font-size: 16px;
+    font-size: 15px;
     margin-bottom: .9rem;
     order: inherit;
   }
@@ -57,7 +59,7 @@
   margin-right: 1rem;
   order: 1;
   @media screen and (max-width: $breakPoint) {
-    font-size: 16px;
+    font-size: 15px;
     order: inherit;
   }
 }
diff --git a/components/styles/header.module.scss b/components/styles/header.module.scss
@@ -52,7 +52,7 @@
   text-decoration: none;
   font-size: 30px;
   font-size: 35px;
-  font-weight: 700;
+  font-weight: 900;
   user-select: none;
   @media screen and (max-width: $breakPoint) {
     font-size: 25px;

diff --git a/components/styles/tag.module.scss b/components/styles/tag.module.scss
@@ -16,9 +16,9 @@
   margin-bottom: .5rem;
   border-radius: 4px;
   text-decoration: none;
-  // font-weight: 600;
   font-size: 19px;
-  font-family: 'Segoe UI', 'Helvetica Neue', Arial, 'BIZ UDPGothic', 'Yu Gothic UI', 'Meiryo UI', Helvetica, sans-serif;
+  font-family: 'Roboto', 'Segoe UI', 'Helvetica Neue', Arial, 'BIZ UDPGothic', 'Yu Gothic UI', 'Meiryo UI', Helvetica, sans-serif;
+  font-weight: 400;
   @media screen and (max-width: $breakPoint) {
     margin-right: 1.2rem;
     margin-bottom: .2rem;

diff --git a/components/styles/taglist.module.scss b/components/styles/taglist.module.scss
@@ -9,7 +9,8 @@
   // color: #0c53c8;
   font-size: 18px;
   // letter-spacing: 0.08rem;
-  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", Arial, メイリオ, Meiryo, sans-serif;
+  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", Arial, メイリオ, Meiryo, sans-serif;
+  font-weight: 500;
 }
 .tag::marker {
   color: var(--color-text);

diff --git a/components/styles/tagsInArticleList.module.scss b/components/styles/tagsInArticleList.module.scss
@@ -0,0 +1,37 @@
+@import '../../styles/config';
+
+.articleTags {
+  margin: 0 0 1rem 0;
+  // margin-top: 1rem;
+  // margin-bottom: 3rem;
+}
+
+.tag {
+  display: inline-block;
+  // background-color: #f1f1f1;
+  color: var(--color-link);
+  // padding: 0.3rem 0.8rem;
+  // margin: 0 0.7rem;
+  margin-right: 1.3rem;
+  margin-bottom: .3rem;
+  border-radius: 4px;
+  text-decoration: none;
+  font-weight: 300;
+  font-size: 17px;
+  font-family: 'Roboto', 'Segoe UI', 'Helvetica Neue', Arial, 'BIZ UDPGothic', 'Yu Gothic UI', 'Meiryo UI', Helvetica, sans-serif;
+  letter-spacing: .07rem;
+  line-height: 1rem;
+  @media screen and (max-width: $breakPoint) {
+    margin-right: .8rem;
+    margin-bottom: .2rem;
+    font-size: 15px;
+  }
+}
+.tag:last-child {
+  margin-right: 0;
+}
+.tag:hover {
+  // background-color: #f6f6f6;
+  // background-color: #e9e9e9;
+  // text-decoration: none;
+}
diff --git a/gen/articleIds.json b/gen/articleIds.json
@@ -1,5 +1,6 @@
 {
   "13990": "202009120358_13990_develop-test-3.mdx",
   "64403": "202008271034_64403_develop-test-1.mdx",
+  "75234": "202012290656_75234_markdown-style-test.mdx",
   "80520": "202008301100_80520_develop-test-2.mdx"
 }
diff --git a/gen/articles.json b/gen/articles.json
@@ -41,5 +41,18 @@
         "programming"
       ]
     }
+  },
+  {
+    "slug": "75234",
+    "fileName": "202012290656_75234_markdown-style-test.mdx",
+    "fm": {
+      "title": "Mdxで書けるMarkdownのスタイル確認",
+      "date": "2020-12-29-06-56",
+      "tags": [
+        "mdx",
+        "markdown",
+        "blog"
+      ]
+    }
   }
 ]
diff --git a/gen/tagMap.json b/gen/tagMap.json
@@ -75,5 +75,26 @@
       "title": "本文無しのテスト記事だよ - 3",
       "date": "2020-10-04-22-19"
     }
+  ],
+  "mdx": [
+    {
+      "slug": "75234",
+      "title": "Mdxで書けるMarkdownのスタイル確認",
+      "date": "2020-12-29-06-56"
+    }
+  ],
+  "markdown": [
+    {
+      "slug": "75234",
+      "title": "Mdxで書けるMarkdownのスタイル確認",
+      "date": "2020-12-29-06-56"
+    }
+  ],
+  "blog": [
+    {
+      "slug": "75234",
+      "title": "Mdxで書けるMarkdownのスタイル確認",
+      "date": "2020-12-29-06-56"
+    }
   ]
 }
diff --git a/lib/format.ts b/lib/format.ts
@@ -3,5 +3,5 @@ import { parse, format } from 'date-fns'
 export function formatDate(date: string) {
   const fmt = parse(date, 'yyyy-MM-dd-HH-mm', new Date())
   // return format(fmt, 'yyyy/MM/dd HH:mm')
-  return format(fmt, 'yyyy-MM-dd')
+  return format(fmt, 'MMM d, yyyy')
 }
diff --git a/lib/getArticle.ts b/lib/getArticle.ts
@@ -1,8 +1,8 @@
 import articles from '../gen/articles.json'
 
-export function getSortedArticles(limit?: number) {
+export function getSortedArticles(limit?: number, tag?: string) {
 
-  const items = articles.map(article => {
+  let items = articles.map(article => {
     return {
       slug: article.slug,
       title: article.fm.title,
@@ -20,7 +20,13 @@ export function getSortedArticles(limit?: number) {
   })
 
   if (limit) {
-    return items.slice(0, limit)
+    items = items.slice(0, limit)
+  }
+
+  if (tag) {
+    items = items.filter(i => {
+      return i.tags.includes(tag)
+    })
   }
 
   return items

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -6,7 +6,8 @@ export default class MyDocument extends Document {
     return (
       <Html lang="ja">
         <Head>
-          <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@900&Montserrat:wght@700&display=swap" rel="stylesheet" />
+          <link rel="preconnect" href="https://fonts.gstatic.com" />
+          <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&Orbitron:wght@900&Montserrat:wght@700&display=swap" rel="stylesheet" />
         </Head>
         <body>
           <Main />

diff --git a/pages/tags/[tag].tsx b/pages/tags/[tag].tsx
@@ -45,7 +45,7 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
   return {
     props: {
       tag: tag,
-      articles: getSortedArticles(),
+      articles: getSortedArticles(0, tag),
     }
   }
 }

diff --git a/styles/global.scss b/styles/global.scss
@@ -3,7 +3,8 @@
 // Default
 :root {
   --color-text: #333333;
-  --color-light-text: #4c4c4c;
+  // --color-light-text: #4c4c4c;
+  --color-light-text: #838383;
   --color-bg: #fff;
   --color-link: #0774b5;
   --color-line: #ededed;