⬅️ Back to notes

Nuxt Content

Last updated: Sat Jan 01 2022

First created: Fri Dec 24 2021

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