chappe/src/templates/changes/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 = "changes";

  //- Special: generate page title
  - var page_title = ($_.CHANGES.PAGE + " | " + ($_.CHANGES.NAVIGATE[("" + changes.current).toUpperCase()] || changes.current));

block title
  | #{page_title}

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

block head_metas
  - var page_url = ("/changes/" + ((changes.current !== "latest") ? (changes.current + "/") : ""));

  //- Special: generate page description
  - var page_description = ((changes.current === "latest") ? (SITE.texts.changes.titles.latest || $_.CHANGES.TITLE_LATEST) : ((SITE.texts.changes.titles.year || $_.CHANGES.TITLE_YEAR) + " " + changes.year));

  +head-metas-page(page_title, page_description, page_url)

block append alternates
  link(
    rel="alternate",
    type="application/rss+xml",
    title="#{(SITE.texts.changes.titles.feed || $_.CHANGES.TITLE_FEED)}",
    href="/changes.rss"
  )

block body_content
  .wrapper
    #changes
      ul.navigate
        - var navigate_years = [].concat(["latest"], years);

        each navigate_year in navigate_years
          li.navigate-item(
            class=((navigate_year === changes.current) ? "navigate-item--active" : null)
          )
            a.navigate-link(
              href=("/changes/" + ((navigate_year === "latest") ? "" : (navigate_year + "/"))),
              class=((typeof navigate_year === "string" || navigate_year === changes.current) ? "font-sans-semibold" : null)
            )
              if typeof navigate_year === "string"
                | #{($_.CHANGES.NAVIGATE[navigate_year.toUpperCase()] || navigate_year)}

              else
                | #{navigate_year}

      .content
        .content-aside
          h4.title.font-sans-bold
            if changes.current === "latest"
              | #{(SITE.texts.changes.titles.latest || $_.CHANGES.TITLE_LATEST)}

            else
              | #{(SITE.texts.changes.titles.year || $_.CHANGES.TITLE_YEAR)} #{changes.year}

          if changes.current === "latest"
            .notice.markdown
              - var notice_text = (SITE.texts.changes.notice || $_.CHANGES.NOTICE);

              != METHODS.marked(notice_text)

          .timeline
            each month_entry in changes.timeline
              .month
                h6.month-name.font-sans-semibold
                  | #{($_.CHANGES.MONTHS[month_entry[0]] || month_entry[0])} #{changes.year}

                ul.month-events
                  each month_change in month_entry[1]
                    li.month-event(
                      class=((month_change.type === "deprecation") ? "month-event--deprecated" : null),
                      data-group="#{month_change.group}"
                    )
                      - var group_color = (((month_change.type !== "deprecation") ? SITE.colors.changes.groups[month_change.group] : null) || null);

                      .month-event-group
                        | #{(SITE.texts.changes.groups[month_change.group] || month_change.group)}

                      .month-event-text.markdown(
                        style=((group_color !== null) ? ("border-color: " + group_color + ";") : null)
                      )
                        != METHODS.marked(month_change.text)