chappe/src/templates/home/index.jade

Developer Docs builder. Write guides in Markdown and references in API Blueprint. Comes with a built-in search engine.

//- chappe
//-
//- Copyright 2021, Crisp IM SAS
//- Author: Valerian Saliou <valerian@valeriansaliou.name>

extends ../__base

block vars
  - var page = "home";

  //- Special: define bulletpoints
  - var bulletpoints = [["quickstart", SITE.bulletpoints.home.quickstart.description, SITE.bulletpoints.home.quickstart.actions], ["guides", SITE.bulletpoints.home.guides.description, SITE.bulletpoints.home.guides.actions], ["references", SITE.bulletpoints.home.references.description, SITE.bulletpoints.home.references.actions]];

block title
  | #{(SITE.identity.title || $_.HOME.PAGE)}

block append stylesheets
  +head-stylesheet("/static/stylesheets/home/home")

block append javascripts
  script(
    type="application/ld+json"
  )
    | {
    |   "@context": "https://schema.org",
    |   "@type": "BreadcrumbList",

    |   "itemListElement": [

    - var last_position = 0;

    each bulletpoint, bulletpoint_index in bulletpoints
      if bulletpoint[2] && bulletpoint[2].length > 0
        each action, action_index in bulletpoint[2]
          - var is_last = ((bulletpoint_index === (bulletpoints.length - 1)) && (action_index === (bulletpoint[2].length - 1)));

          | {
          |       "@type": "ListItem",
          |       "position": #{(++last_position)},
          |       "name": "#{action.label}",
          |       "item": "#{SITE.urls.base}/#{action.route.join('/')}/"
          |     }#{((is_last === true) ? "" : ", ")}

    | ]
    | }

block head_metas
  +head-metas-page((SITE.identity.title || $_.HOME.PAGE), (SITE.texts.home.label || $_.HOME.LABEL), "/")

block body_content
  .wrapper
    #home
      .main
        h1.main-title.font-sans-bold
          | #{(SITE.texts.home.title || $_.HOME.TITLE)}

        p.main-label
          | #{(SITE.texts.home.label || $_.HOME.LABEL)}

      if SITE.actions.home.length > 0
        .actions
          each action in SITE.actions.home
            a.button.button--large.button--reverse.button--icon.font-sans-semibold(
              href="/#{action.route.join('/')}/"
            )
              span.button-text
                | #{action.label}

      if SITE.images.illustrations.home
        .illustration(
          style="background-image: url('/static/user/#{SITE.images.illustrations.home}');"
        )

      ul.bulletpoints
        each bulletpoint in bulletpoints
          li.bulletpoint(
            class="bulletpoint--#{bulletpoint[0]}"
          )
            h6.bulletpoint-title.font-sans-semibold
              | #{$_.HOME.BULLETPOINTS[bulletpoint[0].toUpperCase()]}

            if bulletpoint[1]
              p.bulletpoint-label
                | #{bulletpoint[1]}

            if bulletpoint[2] && bulletpoint[2].length > 0
              .bulletpoint-actions
                each action in bulletpoint[2]
                  a.bulletpoint-action.font-sans-semibold(
                    href="/#{action.route.join('/')}/",
                    class=((bulletpoint[2].length === 1) ? "bulletpoint-action--single" : null)
                  )
                    | #{action.label}

      if SITE.tokens.crisp_website_id
        .support
          .support-wrap
            .support-text
              h6.support-question.font-sans-regular
                | #{$_.HOME.SUPPORT.QUESTION}

              p.support-label
                | #{$_.HOME.SUPPORT.LABEL}

            .support-action
              a.button.button--icon(
                href="#crisp-chat-open"
              )
                span.button-text
                  | #{$_.HOME.SUPPORT.ACTION}