TOP | smallpine8 blog

2021.6.18

h2タイトルです本文がここに入ります。本文がここに入ります。本文がここに入ります。本文がここに入ります。本文がここに入ります。本文がここに入ります。本文がここに入ります。本文がここに入ります。本文がここに入ります。本文がここに入ります。本文がここに入ります。本文がここに入ります。本文がここに入ります。本文がここに入ります。hogehoge.cssh3タイトルです本文がここに入ります。本文がここに入ります。本文がここに入ります。本文がここに入ります。本文がここに入ります。本文がここに入ります。本文がここに入ります。<!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テスト!! css .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; }!! javascript module.exports = { ci: { collect: { startServerCommand: 'npm start' }, upload: { target: 'temporary-public-storage', }, assert: { preset: 'lighthouse:no-pwa', assertions: { 'csp-xss': 'off', } } } };!! tsx 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 } } }

Macの環境構築をした(2021年版)

ブログ始めました。