Giter Club home page Giter Club logo

saasapp's Introduction

Kentico Kontent Sample: VueJS Travel Blog

Stack Overflow

Netlify Status

template preview

Get started

  1. install dependencies

    npm install
  2. run the development environment

    npm run serve

    This set up will use sample project configured by the environment variable in .env file, follow next sections to be able to use your own project.

Create your Kontent project as data source

  1. Go to app.kontent.ai and create empty project

  2. Go to "Project Settings", select API keys and copy

    • Project ID
    • Management API key require Business tier or higher or Trial account
  3. Install Kontent Backup Manager and import data to newly created project from kontent-backup-vue-blog.zip file (place appropriate values for apiKey and projectId arguments):

    npm i -g @kentico/kontent-backup-manager
    
    kbm --action=restore --apiKey=<Management API key> --projectId=<Project ID> --zipFilename=kontent-backup-vue-blog

    Alternatively, you can use the Template Manager UI for importing the content and you could also skip next step, if you select to publish all items after import.

  4. Go to your Kontent project and publish all the imported items.

Join codebase and content data

Copy .env and name it .env.local then set the VUE_APP_KONTENT_PROJECT_ID environment variable to value from Kontent -> "Project Settings" -> API keys -> Project ID. Now your local environment will use this file as a source of environment variables.

Lints and fixes files

npm run lint

Compiles and minifies for production

compile

npm run build

Deploy with Netlify

Netlify CMS can run in any frontend web environment, but the quickest way to try it out is by running it on a pre-configured starter site with Netlify. Use the button below to build and deploy your own copy of the repository:

Deploy to Netlify

After clicking that button, you’ll authenticate with GitHub and choose a repository name. Netlify will then automatically create a repository in your GitHub account with a copy of the files from the template. Next, it will build and deploy the new site on Netlify, bringing you to the site dashboard when the build is complete. Next, you’ll need to set up Netlify’s Identity service to authorize users to log in to the CMS.

Netlify is using file-based configuration. That meant it presets your configuration based on the .netlify.toml. That includes environment variables. If you want to use your custom project, set the VUE_APP_KONTENT_PROJECT_ID to you projects (Join codebase and content data).

More information about Kontent project data structure

Content Types Snippets

There are two content type snippets. They are defined as follows:

  • Front Matter
    • Title - Generates URL slug, Required
    • Feature Image - Limited to at most 1 asset, Type limited to adjustable images
  • Metadata (currently used by several content types, but not in the application)
    • Page Title - No limitations
    • Page Description - No limitations

Content Types

There are eight content types defined for this project. The types.json in the sample-data folder contains the types and their elements. As the JSON does not include the specified element limitations, we've outlined the limitations of any elements that have them below along with a few other notes. If not specified below the element found in the JSON has no limitations.

  • Author
    • Name - Required
    • Avatar - Required, Limited to exactly 1 asset, Type limited to adjustable images
    • Required, Limited to 30 words
  • Configuration
    • Elements prefixed with front__matter__ come from the front matter content type snippet
    • About Blurb - Required, Limited to exactly 1 item, Limited to Rich Text Component type
  • HTML Embed (used only as a component, no element limitations)
  • Page
    • Elements prefixed with front__matter__ come from the front matter content type snippet
    • Slug - Required, Auto-generated based on Title
    • Elements prefixed with metadata__ come from the front matter content type snippet
  • Post
    • Elements prefixed with front__matter__ come from the front matter content type snippet
    • Published - Required (used for URLs and sorting)
    • Slug - Required, Auto-generated based on Title
    • Authors - Required, Limited to at least 1 item, Limited to Author type
    • Geography - Required, Not used in application currently
    • Activities - Required
  • Rich Text Component (used only as a component)
  • Taxonomy Details
    • Elements prefixed with front__matter__ come from the front matter content type snippet
  • Wikipedia Attribution (used only as a component)
    • Source Title - Required
    • Source URL - Required

Content Items

There is a couple of posts from three authors, categorized via taxonomy.

Analytics

saasapp's People

Contributors

christopherjennings avatar simply007 avatar petrsvihlik avatar

Watchers

Jesse Ouellette avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.