Modules:
- nuxt content
- nuxt image
- nuxtjs/fontawesome
Steps:
- initiate app
- add content module
- create content directory
- create content markdown files
- use vscode snippet for frontmatter in md files
- create index for each content type
- create _slug page for each content type
- create index page
- add icons
- add navigation
- nuxt routing
- add images: need to research image providers, right now just the one image on homepage
- add style
- layouts for global style
- layouts for dark mode toggle
- MAYBE - Node script to read files in content directory and generate cypress fixture data for testing (???)
- MAYBE - dynamic test that loops through all content files, visits the page based on slug, and asserts the title (???)
const fs = require('fs')
const contentPath = path.join(__dirname, '/../content');
const content = []
fs.readdir(contentPath, (err, files) => {
if (err) {
console.log(err)
}
else {
files.forEach( file => {
// capture the file name as slug
// read the file and parse the title
// push the file name and title as an object to content array
// { slug: 'trimmed filename', title: 'parsed title' }
})
}
} )
// write the content array to a fixture file to use with Cypress
Potential Sessions:
Getting Started
- what is Nuxt
- what is Content Module
- what is Digital Garden
- initiate app
- add content module
- create content directory
- decide on content types
- scaffold content folders
- nuxt md features -- headings, code snippets, components
- what is frontmatter
- create snippet for frontmatter
- create a few content files
Displaying Content
- creating index page for content type
- fetching content with asyncData()
- parsing frontmatter
- v-for
- adding links
- nuxt routing
- nuxt-link with slug
- creating a slug page to dynamically display content
- fetching a single content file based on slug
- nuxt-content component
- in-browser content editor feature
- repeat process for other content types
Style and Ship
- content for index page
- adding icons
- adding navigation
- adding style
- layouts for global style
- scoped for local style
- adding cypress tests
- adding data-cy attributes
- dynamic testing for all pages (???)
- what is ssg
- nuxt build process
- connecting to netlify
- merging to main in github automatically deploys to netlify