ブログ始めました。

2021.6.18

h2タイトルです

本文がここに入ります。本文がここに入ります。本文がここに入ります。本文がここに入ります。本文がここに入ります。本文がここに入ります。本文がここに入ります。
本文がここに入ります。本文がここに入ります。本文がここに入ります。本文がここに入ります。本文がここに入ります。本文がここに入ります。本文がここに入ります。
hogehoge.css

h3タイトルです

本文がここに入ります。本文がここに入ります。本文がここに入ります。本文がここに入ります。本文がここに入ります。本文がここに入ります。本文がここに入ります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

本文がここに入ります。本文がここに入ります。本文がここに入ります。本文がここに入ります。本文がここに入ります。本文がここに入ります。本文がここに入ります。
webhookテスト

.articleListItem {
  @apply border-alto border-b-2 mt-4 first:mt-0;
}


.articleListLink {
  @apply pb-8 block hover:text-primary delay-75 transition-colors;
}


.articleListTitle {
  @apply text-2xl;
}


.wrapArticleListContents {
  @apply mt-4;
}


.articleListContent {
  @apply mt-4 line-clamp-2;
}

module.exports = {
  ci: {
    collect: {
      startServerCommand: 'npm start'
    },
    upload: {
      target: 'temporary-public-storage',
    },
    assert: {
      preset: 'lighthouse:no-pwa',
      assertions: {
        'csp-xss': 'off',
      }
    }
  }
};

import { GetStaticPropsContext } from 'next';
import Head from 'next/head';
import { ParsedUrlQuery } from 'querystring';
import cheerio from 'cheerio';
import hljs from 'highlight.js';
import { Article } from '@/types/Article';
import { MicroCMSResponse } from '@/types/MicroCMSResponse';
import { getFormatedDate } from '@/utils/getFormatedDate';
import { replaceHtmltagToPlainStr } from '@/utils/replaceHtmltagToPlainStr';


import styles from '@/styles/ArticleDetail.module.css';
import 'highlight.js/styles/vs2015.css';


type ArticleIdProps = {
  metaDesc: string,
  htmlElm: string,
  article: Article
}


interface PageParams extends ParsedUrlQuery {
  id: string
}


export default function ArticleId({ metaDesc, htmlElm, article }: ArticleIdProps) {
  return (
    <main>
      <Head>
        <title>{ article.title } | smallpine8 blog</title>
        <meta name="description" content={ metaDesc }></meta>
      </Head>
      <h1 className={ styles.articleDetailTitle }>{article.title}</h1>
      <p className={ styles.articleDetailDate }>{article.createdAt}</p>
      <div className={ styles.articleDetailBody } dangerouslySetInnerHTML={{ __html: htmlElm }} />
    </main>
  );
}


export const getStaticPaths = async() => {
  const key = {
    headers: {
      'X-API-KEY': process.env.API_KEY,
    }
  }
  
  const reqUrl = process.env.REQUEST_URL + 'article';
  const article = await fetch(reqUrl, key)
    .catch(e => {
      console.error(e)
    })
    .then(res => {
      if(!res) {
        throw new Error();
      }


      if(!res.ok) {
        throw new Error();
      }


      return res.json() as Promise<MicroCMSResponse<Article>>;
    });


  const paths = article.contents.map((article) => `/article/${article.id}`);


  return { paths, fallback: false };
}


export const getStaticProps = async (context: GetStaticPropsContext<PageParams>) => {
  const id = context.params?.id
  const key = {
    headers: {
      'X-API-KEY': process.env.API_KEY
    }
  }


  const reqUrl = process.env.REQUEST_URL + 'article/' + id;
  const article = await fetch(reqUrl, key)
    .catch(e => {
      console.error(e)
    })
    .then(res => {
      if(!res) {
        throw new Error();
      }


      if(!res.ok) {
        throw new Error(res.statusText);
      }


      return res.json() as Promise<Article>;
    });


  const { createdAt } = article;
  const date = new Date(createdAt);
  const formatedDate = getFormatedDate(date);
  article.createdAt = formatedDate;


  const plainStr = replaceHtmltagToPlainStr(article.contents);
  const metaDesc = plainStr.substr(0, 117) + '...';


  const $ = cheerio.load(article.contents);
  $('pre').each((_, elm) => {
    const hlElem = hljs.highlightAuto($(elm).text());
    $(elm).html(hlElem.value);
  });
  const htmlElm = $.html();
  return {
    props: {
      metaDesc,
      htmlElm,
      article
    }
  }
}