Kentico/gatsby-source-kontent

View on GitHub
examples/resolution/src/pages/index.js

Summary

Maintainability
C
1 day
Test Coverage
import React from "react"
import { graphql, Link } from "gatsby"
import { resolveUrl } from "../utils/resolvers"

const Index = ({ data }) => (
  <div style={{ display: 'flex', flexDirection: 'column', justifyContent: "center", maxWidth: "960px", margin: "auto" }}>
    <header>
      <h1>Pages</h1>
    </header>

    <section style={{ display: 'flex', justifyContent: "space-between", flexWrap: 'wrap' }}>
      <article>
        <header>
          <h2>People</h2>
        </header>
        <ul>
          {data.allKontentItemPerson.nodes.map(person => (
            <li key={person.elements.slug.value}>
              <Link to={resolveUrl(person.__typename, person.elements.slug.value)}>{person.elements.name.value}{person.elements.name.value === 'Ondřej Chrastina' ? <strong>&nbsp;👈 This is rich text resolution showcase</strong> : null}</Link>
            </li>
          ))}
        </ul>
      </article>

      <article>
        <header>
          <h2>Websites</h2>
        </header>
        <ul>
          {data.allKontentItemWebsite.nodes.map(website => (
            <li key={website.elements.slug.value}>
              <Link to={resolveUrl(website.__typename, website.elements.slug.value)}>{website.elements.name.value}</Link>
            </li>
          ))}
        </ul>
      </article>

      <article>
        <header>
          <h2>Repositories</h2>
        </header>
        <ul>
          {data.allKontentItemRepository.nodes.map(repository => (
            <li key={repository.elements.slug.value}>
              <Link to={resolveUrl(repository.__typename, repository.elements.slug.value)}>{repository.elements.name.value}</Link>
            </li>
          ))}
        </ul>
      </article>
    </section>
  </div>
);

export const query = graphql`
query AllUrlQuery {
  allKontentItemPerson(sort: {elements: {name: {value: ASC}}}) {
    nodes {
      __typename
      elements {
        name {
          value
        }
        slug {
          value
        }
      }
    }
  }
  allKontentItemWebsite(sort: {elements: {name: {value: ASC}}}) {
    nodes {
      __typename
      elements {
        name {
          value
        }
        slug {
          value
        }
      }
    }
  }
  allKontentItemRepository(sort: {elements: {name: {value: ASC}}}) {
    nodes {
      __typename
      elements {
        name {
          value
        }
        slug {
          value
        }
      }
    }
  }
}
`

export default Index