Namespace Pollution Mechanism
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    ng2-contentful-blogpublic

    ng2-contentful-blog

    Module for creating a blog using Contentful

    Components & services

    1. HeaderMenuComponent
    2. FooterMenuComponent
    3. BreadcrumbsService
    4. BreadcrumbsComponent
    5. RoutesManagerService
    6. RoutesGatewayComponent
    7. RoutesGatewayGuard
    8. ContenfulContent
    9. ContentfulImageDirective
    10. EmbeddedEntryComponent
    11. VizabiEntryComponent
    12. HtmlEntryComponent
    13. EntriesViewComponent
    14. VideoEntryComponent
    15. TagsComponent
    16. TagComponent
    17. MarkdownPipe
    18. ToDatePipe
    19. ContentfulService
    20. ContributorsComponent
    21. ProfileComponent

    ng2-contentful-blog components diagram

    ng2-contentful-blog

    Content model that should exist on Contentful

    contentful-diagram

    Menu - includes fields:

    • title (Short text)

      Settings:

      • Check: This field represents the Entry title
      • Validations: This field is required
      • Appearance: Single line
    • submenus (References, many)

      Settings:

      • Validations => Specify allowed entry type: Submenu
      • Appearance: Entry links list
    • entryPoint (Reference)

      Settings:

      • Validations => Specify allowed entry type: Article
      • Appearance: Entry link

    Submenu - includes fields:

    • title (Short text)

      Settings:

      • Check: This field represents the Entry title
      • Validations: This field is required
      • Appearance: Single line
    • entryPoint (Reference)

      Settings:

      • Validations => Specify allowed entry type: Article
      • Appearance: Entry link
    • thumbnail (Media)

    Header - includes fields:

    • title (Short text)

      Settings:

      • Check: This field represents the Entry title
      • Validations: This field is required
      • Appearance: Single line
    • entries (References, many)

      Settings:

      • Validations => Specify allowed entry type: Menu
      • Appearance: Entry links list

    Footer - includes fields:

    • title (Short text)

      Settings:

      • Check: This field represents the Entry title
      • Validations: This field is required
      • Appearance: Single line
    • entries (References, many)

      Settings:

      • Validations => Specify allowed entry type: Menu
      • Appearance: Entry links list

    Tag - for creating and attaching tags in Article, includes fields:

    • title (Short text)

      Settings:

      • Check: This field represents the Entry title
      • Validations: This field is required
      • Appearance: Slug
    • slug (Short text)

      Settings:

      • Appearance: Slug

    Html - model that it used to create the html blocks for Article, includes fields:

    • title (Short text)

      Settings:

      • Check: This field represents the Entry title
      • Appearance: Single line
    • content (Long text)

      Settings:

      • Appearance: Markdown

    Video - model that it used to create the video blocks (via iframe) for Article, includes fields:

    • title (Short text)

      Settings:

      • Check: This field represents the Entry title
      • Appearance: Single line
    • description (Long text)

      Settings:

      • Appearance: Markdown
    • youtube (Short text)

    • vimeo (Short text)

    Embedded - to create a block of any embedded content (via iframe) for Article, includes fields:

    • title (Short text)

      Settings:

      • Check: This field represents the Entry title
      • Appearance: Single line
    • link (Long text)

      Settings:

      • Validations: This field is required
      • Appearance: Single line

    Vizabi - to create a vizabi composition block uses vizabi's state, includes fields:

    • title (Short text)

      Settings:

      • Check: This field represents the Entry title
      • Appearance: Single line
    • state (Long text)

      Settings:

      • Validations: This field is required
      • Appearance: Single line

    Article - blueprint of the page for posts/list of posts, includes fields:

    • title (Short text)

      Settings:

      • Check: This field represents the Entry title
      • Validations: This field is required
      • Appearance: single line
    • slug (Short text)

      Settings:

      • Appearance: slug
    • thumbnail (Media)

    • description (Long text)

      Settings:

      • Appearance: Markdown
    • entries (References, many)

      Settings:

      • Validations => Specify allowed entry type: Html, Video, Embedded, Vizabi
      • Appearance: Entry links list
    • related (References, many)

      Settings:

      • Validations => Specify allowed entry type: Article
      • Appearance: Entry links list
    • created at (Date & time)

      Settings:

      • Validations: This field is required
    • show in main page slider (Boolean)

    • parent (Reference)

      Settings:

      • Validations => Specify allowed entry type: Article
      • Appearance: Entry link
    • tags (References, many)

      Settings:

      • Validations => Specify allowed entry type: Tag
      • Appearance: Entry links list

    Contribution - includes fields:

    • description (Long text)

      Settings:

      • Appearance: Markdown
    • article (Reference)

      Settings:

      • Validations => Specify allowed entry type: Article
      • Appearance: Entry card

    Profile - includes fields:

    • user name (Short text)

      Settings:

      • Check: This field represents the Entry title
      • Validations: This field is required
      • Appearance: single line
    • first name (Short text)

      Settings:

      • Validations: This field is required
      • Appearance: Single line
    • last name (Short text)

      Settings:

      • Validations: This field is required
      • Appearance: Single line
    • avatar (Media)

    • title (Short text)

      Settings:

      • Appearance: Single line
    • location (Short text)

      Settings:

      • Appearance: Single line
    • email (Short text)

      Settings:

      • Validations: Match a specific pattern -> E-Mail
      • Appearance: Single line
    • facebook (Short text)

      Settings:

      • Appearance: Single line
    • google+ (Short text)

      Settings:

      • Appearance: Single line
    • linkedin (Short text)

      Settings:

      • Appearance: Single line
    • twitter (Short text)

      Settings:

      • Appearance: Single line
    • aboute me (Long text)

      Settings:

      • Appearance: Markdown
    • contributions (References, many)

      Settings:

      • Validations => Specify allowed entry type: Contribution
      • Appearance: Entry links list
    • my links (References, many)

      Settings:

      • Validations => Specify allowed entry type: Embedded, Html, Video, Vizabi
      • Appearance: Entry links list

    Basic usage Article

    Go to contentful choose content then choose Add entry and fill in Article, for example:

    content

    Create first page - Page test

    • title: Page test
    • slug: page-test
    • description: first page
    • entries - create new html

    Create second page - Sub page

    • title: Sub page
    • slug: sub-page
    • description: Sub page test
    • entries - create new html
    • related: Page test
    • parent: Page test
    • tags: blog

    Basic usage Menu

    Go to contentful choose content then choose Add entry and fill in Menu, for example:

    content

    Create first menu item

    • title: Menu item
    • submenus: select or create SubMenu

    OR

    • entryPoint: select or create Article

    Note: priority will be submenus

    Create HeaderMenu

    • title: HeaderMenu
    • entries: Menu item (your menu item)

    Demo

    1. git clone git@github.com:VS-work/ng2-contentful-blog.git
    2. in folder ng2-contentful-blog/demo - open and edit next files:
    • contentful.cfg.json - add your accessToken and space

      Ng2ContentfulConfig.config = {
        accessToken: CONTENTFUL_ACCESS_TOKEN,
        space: CONTENTFUL_SPACE_ID,
        host: CONTENTFUL_HOST
      };
    • contentTypeIds.json update all id (keys) according to your content model => JSON preview, for example jsonPreview

      Get value from sys.id which is ***YOUR ID*** and put into contentTypeIds.json:

      {
        "NODE_PAGE_TYPE_ID": "***YOUR ID***",
        "TAG_TYPE_ID": "***YOUR ID***",
        "VIDEO_TYPE_ID": "***YOUR ID***",
        "HTML_TYPE_ID": "***YOUR ID***",
        "EMBEDDED_TYPE_ID": "***YOUR ID***",
        "PROFILE_TYPE_ID": "***YOUR ID***",
        "CONTRIBUTION_TYPE_ID": "***YOUR ID***",
        "HEADER_TYPE_ID": "***YOUR ID***",
        "FOOTER_TYPE_ID": "***YOUR ID***",
        "VIZABI_TYPE_ID": "***YOUR ID***"
      }
       
    1. npm i && npm run dev
    2. localhost:8080/#/*your menu item* for example localhost:8080/#/page-test

    Keywords

    none

    install

    npm i ng2-contentful-blog

    Downloadslast 7 days

    23

    version

    2.0.6

    license

    none

    repository

    github.com

    last publish

    collaborators

    • avatar
    • avatar
    • avatar
    • avatar