theme-ui#BaseStyles JavaScript Examples

The following examples show how to use theme-ui#BaseStyles. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: MarkdownWrapper.js    From developer-portal with Apache License 2.0 6 votes vote down vote up 
MarkdownWrapper = ({ source }) => (
  <BaseStyles>
    <ReactMarkdown
      source={source}
      renderers={{
        code: CodeContainer,
        heading: Heading,
        image: ImageWrapper,
        list: List,
        listItem: ListItem,
        link: Link,
      }}
    />
  </BaseStyles>
)
Example #2
Source File: messes-catholiques-en-direct.js    From website with MIT License 5 votes vote down vote up 
IndexPage = ({ data }) => {
  const { allDataYaml } = data
  const messes = allDataYaml.nodes[0].messes

  return (
    <Layout>
      <BaseStyles>
        <SEO title="Messes et offices" />
        <h1>Messes et offices en ligne</h1>
        <ContributeMessage />
        <p>
          Pour bien suivre la messe (notamment avec des enfants), consultez la{" "}
          <a href="/">page d'accueil</a>.
        </p>
        <h3>
          Haute qualité <HD />
        </h3>
        <p>
          Nous avons créé un indicateur pour les messes filmées en « haute
          qualité », pour lesquelles nous avons créé trois critères :
          l'enregistrement en haute définition, le son continu et de très bonne
          qualité, le changement de prise de vue pendant la messe.
        </p>
        <h2>Liste des messes</h2>
        <table>
          <RowHeader />
          <tbody>
            {Object.entries(groupBy("groupe")(messes)).map(
              ([groupe, masses]) => {
                return (
                  <React.Fragment key={groupe}>
                    <tr>
                      {!!groupe && (
                        <td colSpan="4">
                          <h3>{groupe}</h3>
                        </td>
                      )}
                    </tr>
                    <Masses masses={masses} />
                  </React.Fragment>
                )
              }
            )}
          </tbody>
        </table>
        <h2>Autres listes</h2>
        <p>Vous trouverez d'autres listes ici :</p>
        <ul>
          <li>
            <a href="https://messes.info/">Messes Info</a> qui propose une
            recherche spéciale pour la{" "}
            <a href="https://messes.info/horaires/semaineste">Semaine Sainte</a>{" "}
            ainsi que les horaires d’offices de la liturgie des heures
            retransmis en direct.
          </li>
          <li>
            <a href="http://bougetoneglise.fr/recherche/live/">
              Bouge ton Église
            </a>
          </li>
        </ul>
        <p>
          Nous remercions tout particulièrement le groupe Messes en direct pour
          la mise à disposition initiale des horaires des messes.
        </p>
      </BaseStyles>
    </Layout>
  )
}