<commit_before>extends layout

block append title
  | #{ " - Blog"}

block main
  div(id="Blog").Site-transform

    - var articles = env.helpers.getArticles(contents)
    - var a0 = articles[0]
    - var a0_img_src = (a0.metadata.featured_img ? a0.metadata.featured_img : "https://placehold.it/800x600")
    - var a0_inline_style = (a0.metadata.featured_img ? "background-color:#6f7679; background-image: url('"+a0.metadata.featured_img+"');" : "background: linear-gradient(to top right, #536DFE 0%, #75F0B4 100%);")

    div.Background-img-top--blog.Background-img-cover.u-padBottom--3
      div(style=a0_inline_style ).Background-img--full-wh
      div.Site-content-container.Background-img-caption-container.u-textCenter
        a(href=a0.url)
          h1.Top-post-header= a0.title
        p.Background-img-caption.u-padBottom--1= moment.utc(a0.date).format('YYYY MMM DD')
        if a0.metadata.subtitle
          h4(style="color:#fff;")= a0.metadata.subtitle
        a(href=a0.url)
          h4(style="color:white;").Background-caption-text-button Read More

    section.Site-gray-bkg
      div(style="margin-bottom:1em;").Site-content-container
        a(class='anchor' name="pupil")
        div.Feature-container-column
          div.Grid.Grid--justifyCenter.Grid--center.Grid--alignContentCenter
            div.Grid-cell.Grid-cell--full.u-textCenter
              div.Feature
                h1.u-padBottom--0 Blog
              div.Grid
                div.Grid-cell.Grid-cell--full
                  h3 Check out the latest news and updates


    div.Site-content-container

      include includes/webp-img

      div.Grid.Grid--1of2.Grid--gutters-lg
        each article, i in articles.slice(1)

          - var img_thumb = article.metadata.featured_img_thumb
          - var img_src = (img_thumb ? img_thumb : "https://placehold.it/800x600")


            div.Grid-cell

              if article.metadata.tag
                a(href=article.url)
                  div.Feature-image--blog-archive--wrapper.Grid--center.Grid--justifyCenter.Grid-cell--fillHeight
                    div.Grid-cell
                      div.Circle-tag.Tag-inner.Grid--center.Grid--justifyCenter.Grid-cell--fillHeight.Grid-column
                        i.material-icons.Icon-tag= article.metadata.tag.icon
                        div.Caption-tag= article.metadata.tag.caption

              else

                a(href=article.url)
                  +webp-img(img_thumb, article.title, article.title, "height:30vh;", "object-fit:contain;height:30vh;padding-bottom:3em;")

              a(href=article.url)
                h2.Blog-article-title= article.title
              p.small= moment.utc(article.date).format('YYYY MMM DD')
              if article.metadata.subtitle
                p= article.metadata.subtitle
              a(href=article.url) read more
<commit_msg>refactor blog page layout and logic<commit_after>extends layout

block append title
  | #{ " - Blog"}

block main
  div(id="Blog").Site-transform

    - var articles = env.helpers.getArticles(contents)
    - var newsArticles = []
    - var releaseArticles = []
    - var featuredArticle = ''
    - var latestRelease = ''

    each article, i in articles
      //- make new arrays for news and releases
      if article.metadata.featured_img
        - newsArticles.push(article)
      if article.metadata.tag
        - releaseArticles.push(article)

      if article.metadata.tag
        if i == 0
          div.new-release-bar
            div.Site-content-container.Blog-container
              div.Grid.Grid--center.Grid--justifySpaceBetween
                div Latest software release
                - var githubLink = 'https://github.com/pupil-labs/pupil/releases/tag/' + article.metadata.tag.caption
                  a.hero-button.mdc-button.mdc-button--raised.mdc-primary(href= githubLink)
                    - var downloadCaption = 'Download ' + article.metadata.tag.caption
                    span= downloadCaption

    each featured, i in newsArticles
      if i == 0
        - var featured_inline_style = (featured.metadata.featured_img ? "background-color:#6f7679; background-image: url('"+featured.metadata.featured_img+"');" : "background: linear-gradient(to top right, #536DFE 0%, #75F0B4 100%);")
        div.Site-content-container.Blog-container
          a(href=featured.url)
            div.Grid.card.Grid-featured-card.u-marginY--2
              div.Grid-cell.grid-7-5
                div.Background-img-top--blog.Background-img-featured-blog.Background-img-cover
                  div(style=featured_inline_style ).Background-img--full-wh
              div.Grid-cell.grid-3-5.u-padA--2
                div.Grid.Grid--justifySpaceBetween.Grid-column.Fill-height(style="color:#212121;")
                  div
                    h5.Blog-topic-text News
                    h4.Blog-header-featured.Header-bold= featured.metadata.title
                    p.Blog-small-text= featured.metadata.subtitle
                  div
                    p.Blog-small-text.grey= moment.utc(featured.date).format('YYYY MMM DD')

    //- get featured news article
    each article, i in newsArticles
      if i == 0
        - featuredArticle = article
    //- get latest pupil release
    each release, i in releaseArticles
      if i == 0
        - latestRelease = release

    div.Site-content-container.Blog-container
      include includes/webp-img
      div.Grid.Grid--1of2.Grid--justifySpaceBetween.u-marginY--2
        each article, i in articles
          if article !== featuredArticle
            if article !== latestRelease

              - var img_thumb = article.metadata.featured_img_thumb
              - var img_src = (img_thumb ? img_thumb : "https://placehold.it/800x600")

                div.Grid-cell.card
                  a(href=article.url)
                    div.Grid-column.Fill-height(style="display:flex;")
                      div
                        if article.metadata.tag
                          div.Grid--center.Grid--justifyCenter.Grid-cell--fillHeight.Grid-column.Release-tag
                            -var pupilRelease = 'Pupil ' + article.metadata.tag.caption
                            h3.Header-bold(style="color:#fff;")= pupilRelease
                        else
                          +webp-img(img_thumb, article.title, article.title, "height:28vh;", "object-fit:cover;border-radius:4px 4px 0 0;")
                      div.Fill-height.u-padA--2
                        div.Grid.Grid--justifySpaceBetween.Grid-column.Fill-height(style="color:#212121;")
                          div
                            if article.metadata.tag
                              h5.Blog-topic-text(style="padding-bottom:6px !important;") Software Release
                            else
                              h5.Blog-topic-text(style="padding-bottom:6px !important;") News
                            h4.Blog-header.Header-bold= article.title
                            p.Blog-small-text= article.metadata.subtitle
                          div
                            p.Blog-small-text.grey= moment.utc(article.date).format('YYYY MMM DD')
{'fraction_non_alphanumeric': 0.116194727298089, 'fraction_numerical': 0.017157204631050357, 'mean_word_length': 1.82172373081464, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 3, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3784910', 'n_tokens_mistral': 2199, 'n_tokens_neox': 2045, 'n_words': 327}