AcadeTech Gridsome Site

You can use this repo as a gridsome-contentful-starter

Install

npm install

Basic usage

Edit .env.sample and rename it .env

CTF_SPACE_ID = YOUR SPACE ID
CTF_CDA_ACCESS_TOKEN = YOUR ACCESS TOKEN

Then:

Or npm run develop

Configure with Contentful content named Blog Post with fields:

• title
• slug
• description
• body
• heroImage
• publishDate

In src/pages/Blogs.vue

<page-query>
  query IndexQuery {
    posts: allContentfulBlogPost {
      totalCount
      edges {
        node {
          id
          slug
          title
          createdAt(format: "D. MMMM YYYY")
         }
      }

    }
  }
</page-query>

In src/templates/ContefulBlogPost.vue

<page-query>
query postQuery($path: String!) {
    post: contentfulBlogPost(path: $path){
    title
    publishDate(format: "D. MMMM YYYY")
  heroImage{file{url}}
    body
    }
}
</page-query>

Features

• Gridsome
• Vuetify
• markdown-it
• markdown-it ... emoji, katex, prism, anchor, table-of-content, container, emoji

Config markdown-it in src/components/GridsomeMarkdownIt.vue

Scripts

npm run develop
npm run build
npm run explore
npm run lint
npm run upgrade-interactive
npm run snyk-protect