Card Adopts Example

gistfile1.txt

// Card Adoption example
{
  data: {
    type: 'cards',
    id: '@foobar/events-are-us::event-cards::emberconf-2020',
    attributes: {
       // no need to define templates and components if we have not changed it
       // when hub instantiates this card it will traverse the "adopts" graph to get the template and components for this card
       // when there is more than 1 adopted card, then you must define your card's templates and components here
       // Also use similar approach as ember in terms of not having a component js, where the component is just a glimmer comnponent of the outer HTML of the template,
       // in the case the card you are adopting does not have a component js
      'isolated-template': `
        {{yield}} {{!-- single adoption means that delegated rendered templates are just yields --}}
        Vegan Friendly: {{content.veganFriendly}}
        Nearby events: 
        {{#each content.nearbyEvents as |event|}}
          <div>{{event.name}}</div>
        {{/each}}
      `,
      'embedded-template': `
        {{!-- here we are overriding the embdded template and rendering the adopted "location" field in a google map --}}
        <GoogleMap @address=content.eventLocation></GoogleMap>
      `
      dependencies: [
        'ember-google-maps': '^1.23.0'
      ]
       // no need to define templates, components, and dependencies if we have not changed it
       // when hub instantiates this card it will traverse the "adopts" graph to get the template, components, and npm dependencies for this card
    },
    relationships: {
      fields: [
        // these fields (and the template above) are what makes this a custom event--which was the rationale for adopting the core event card
        { data: { type: 'computed-fields', id: '@foobar/events-are-us::event-cards::nearby-events'}},
        { data: { type: 'fields', id: '@foobar/events-are-us::event-cards:vegan-friendly'}},
      ],

      // When we adopt a card, its fields definitions become our fields, and it's data can become our "example" data for
      // the specific fields that we are adopting. Note that you can only adopt a single card. More sophisticated composition
      // should leverage card relationships.
      adopts: {
        // because this card adopts @cardstack/event::event-card::v1.0.0, it can be used for any relationship that that specifies
        // a `related-cards` of card @cardstack/event::event-card::v1.0.0. All cards that can trace their `adopts` graph back to the card
        // @cardstack/event::event-card::v1.0.0 can be used in relationships that specify this related card.
        data:  { type: 'cards', id: '@cardstack/event::event-card::v1.0.0' }
      },
      model: {
        data: { type: '@foobar/events-are-us::event-cards', id: '@foobar/events-are-us::event-cards::emberconf-2020' }
      }
    }
  }
}