article-card/card.js

Creating a card using JSONAPIFactory

// This file lives in an npm module with the name of 'article-card' in a cards.js file. 
// (I think just using index.js might be a good idea too--i can go either way here)

const JSONAPIFactory = require('@cardstack/test-support/jsonapi-factory');

module.exports = function() {
  let factory = new JSONAPIFactory();

  // the card ID specified only needs to speify the last part of the multi-part ID.
  // the rest of the card ID parts are derived from the package name.
  // (This assumes that a package only ever contains one card--not sure if that is a valid assumption)
  return factory.getDocumentFor(factory.addResource('card', 'millenial-puppies')
    .withAttributes({
      'isolated-template': `
        <h1>{{this.title}}</h1>
        <h3>By {{this.author}}</h3>
        <ul>
          {{#each this.tags as |tag|}}
            <li>{{tag.id}}</li>
          {{/each}}
        </ul>
        <div>{{this.body}}</div>
      `,
      'edit-template': `
        <h1>{{this.title}}</h1>
        <h3>By {{this.author}}</h3>
        <ul>
          {{#each this.tags as |tag|}}
            <li>{{tag.id}}</li>
          {{/each}}
        </ul>
        <div>{{this.body}}</div>
      `,
      'embedded-template':`
        <h3>{{this.title}}</h3>
        <p>By {{this.author}}</p>
      `
      // This card will inherit the genesis card's js and css
    })
    .withRelated('fields', [
      factory.addResource('fields', 'title').withAttributes({
        'is-metadata': true,
        'needed-when-embedded': true,
        'field-type': '@cardstack/core-types::string' //TODO rework for fields-as-cards
      }).withRelated('constraints', [
        factory.addResource('constraints')
          .withAttributes({
            'constraint-type': '@cardstack/core-types::not-null',
            'error-message': 'The title must not be empty.'
          })
      ]),
      factory.addResource('fields', 'body').withAttributes({
        'is-metadata': true,
        'field-type': '@cardstack/core-types::string'
      }),
      factory.addResource('fields', 'tags').withAttributes({
        'is-metadata': true,
        'needed-when-embedded': true,
        'field-type': '@cardstack/core-types::has-many'
      }).withRelated('related-types', [
        // this is modeling an enumeration using a private model.
        // this content type name will be prefixed with the card's
        // package and card name, such that other cards can also
        // have their own 'tags' internal content types.
        factory.addResource('content-types', 'tags')
      ]),
    ])
  )

  // The content type is actually derived from the card's multipart ID,
  // and the hub derives the content type as result of processing the
  // card's schema with the field definitions above. The developer
  // should not have to worry about card model content type schema,
  // as the hub will take care of constructing that with is why `withCardModel()`
  // has no params as its content type name and its ID are fully derived from
  // the card id.
  .withCardModel()
    .withAttributes({
      title: 'The Millenial Puppy',
      author: 'Hassan Abdel-Rahman',
      body: `
        It can be difficult these days to deal with the
        discerning tastes of the millenial puppy. In this
        article we probe the needs and desires of millenial
        puppies and why they love belly rubs so much.
      `
    })
    .withRelated('tags', [
      // Note that the tags models will be prefixed with this card's ID
      // such that you will never run into model collisions for tags
      // of different article cards
      factory.addResource('tags', 'millenials'),
      factory.addResource('tags', 'puppies'),
      factory.addResource('tags', 'belly rubs'),
    ])
};