This was initialized using the blog-starter example from Next.js which showcases Next.js's Static Generation feature using Markdown files as the data source.
The quotes are stored in /_quotes
as Markdown files with front matter support. Adding a new Markdown file in there will create a new quote.
To create the quotes it uses remark
and remark-html
to convert the Markdown files into an HTML string, and then send it down as a prop to the page. The metadata of every quote is handled by gray-matter
and also sent in props to the page.
npm install
npm run dev
The blog should be up and running on http://localhost:3000!
brew install librsvg
- Create a .CSV file with the shape (excerpt, speaker_name, speaker_picture, ogImage_url, releaseDate, content) and NO HEADER ROW
npm run generate-quotes "PATH/TO/step-2.csv"
# This will generate the .md files in "_quotes" and the .svg images in "public/quotes"
This will generate a .md file in "_quotes" for each row in the .CSV file, as well as a .svg image and .png image for each quote in the "public/quotes" folder.
dqotd
uses Tailwind CSS (v3.0).