はじめてのぶろぐづくり
haru11/02頃
miketako3さんの以下シリーズに沿って基本形つくりはじめ：）
以下でコメントした件以外はほぼそのままで順調にできた感謝...。こんな素敵なブログがこんな簡単にデプロイできちゃうのすごすぎる
haruタグはこれでかわいくした。本当はタグ別に色変えたい。今は全部ピンク。そのうち。
haru権利まわり心配なく絵文字いっぱいつかえるように、twemojiをつかいやすくした。cssはindex.cssにぶちこんだ。
haru記事ごとのフォルダをつくって、その中に画像を置いて管理できるように修正した
このお二方の合わせ技
- /lib/api.tsを修正して、フォルダ内のindex.mdをみにいくようにする
export function getPostBySlug(slug: string, fields: string[] = []) {
- const realSlug = slug.replace(/\.md$/, '')
- const fullPath = join(postsDirectory, `${realSlug}.md`)
+ const fullPath = join(postsDirectory, `${slug}/index.md`)
const fileContents = fs.readFileSync(fullPath, 'utf8')
const { data, content } = matter(fileContents)
@@ -23,7 +22,7 @@ export function getPostBySlug(slug: string, fields: string[] = []) {
// Ensure only the minimal needed data is exposed
fields.forEach((field) => {
if (field === 'slug') {
- items[field] = realSlug
+ items[field] = slug
}
if (field === 'content') {
items[field] = content
- 画像コピー用プラグインをインストール ＆ next.config.jsを修正
npm install -S copy-webpack-plugin write-file-webpack-plugin
const { resolve } = require('path')
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
});
const CopyFilePlugin = require('copy-webpack-plugin')
const WriteFilePlugin = require('write-file-webpack-plugin')
module.exports = {
webpack(config) {
config.plugins.push(
new CopyFilePlugin({
patterns: [
{
context: '_posts',
from: '**/*.{jpg,png}',
to: resolve(__dirname, 'public/assets/images/posts'),
},
],
}),
new WriteFilePlugin()
)
return config
},
}
完成。記事内には以下のように書く。本当は参照先記事のように、パスを置換するようにしたかったけど、導入済みのzennmarkdowntohtmlのなかでどうすればいいかよくわかんなかったのでとりあえずこれにした。そのうち修正したいけど、これでもそんなめんどくはないのでまあよしにする。
これだと画像ない記事があるとエラー発生してしまっていたので、noErrorOnmissingを追記
new CopyFilePlugin({
patterns: [
{
context: '_posts',
from: '**/*.{jpg,png}',
to: resolve(__dirname, 'public/assets/images/posts'),
+ noErrorOnMissing: true,
},
],
}),
haruやった～サムネを絵文字にできた：）
- cover-image修正
import cn from 'classnames'
import Link from 'next/link'
import Image from 'next/image'
import twemoji from 'twemoji'
type Props = {
title: string
- もとを忘れた
+ emoji: string
slug?: string
}
- const CoverImage = ({ title, slug }: Props) => {
+ const CoverImage = ({ title, emoji, slug }: Props) => {
+ const codePoint = twemoji.convert.toCodePoint(emoji);
+ const url = `https://twemoji.maxcdn.com/v/latest/svg/${codePoint.split('-')[0]}.svg`;
const image = (
<Image
- 元を忘れた
+ src={url}
alt={`Cover Image for ${title}`}
className={cn('shadow-sm w-full', {
'hover:shadow-lg transition-shadow duration-200': slug,
})}
width={1300}
height={600}
/>
)
return (
<div className="sm:mx-0">
{slug ? (
<Link as={`/posts/${slug}`} href="/posts/[slug]" aria-label={title}>
{image}
</Link>
) : (
image
)}
</div>
)
}
export default CoverImage
- 以下をよしなに修正（ぜんぶemojiわたすようにする）
interface/posts.ts と pages/posts/[slug].tsx
３．マークダウンにemojiプロパティ追加
いまでかすぎなので、あしたちいさくする
参考：
haru- nvmをいれて、
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
source ~/.bashrc
- nodeをアップグレード
nvm install --lts
harugitignore更新してるのにずっとコミットし続ける（怒）と思っていたらこれでした
haru開発環境では全部ページ表示されるのに本番環境だと表示されないページがあったが、aタグを使っていたからでした。linkを使って解決。
haruNeobrutalism風のデザインにしてみている、まだいろいろ調整しなきゃいけないけど、かわいい！
haruFlowbite react componentはas=""でキャストできる。NavbarをLinkにキャストした
haru本番環境でURL直打ちの場合とリロードした場合に404になってしまう不具合、以下を加えて解消！！
参照元ではビルドコマンドにnext export追加するように記載がありますが、すでに廃止になっている（next buildに吸収されている？）ので、不要
module.exports = {
+ trailingSlash: true,
}
haruスペースを入力したいとき
accessible な colour paletteの参考
haruogp設定
かわいいカード
haruzenn markdownで写真をいい感じに並べたかった
- pc
- 2枚以上だったら2枚横並びで中央寄せ
- 1枚だったら単独で中央寄せ、大きすぎないサイズ
- mobile
- 1枚横幅フルサイズで表示
p:has(img) {
text-align: center;
}
img {
@apply inline w-full md:w-2/5 h-auto mb-2;
position: relative;
}
ぐっど！
