Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Version support page #600

Merged
merged 16 commits into from
Jul 30, 2024
Merged
Show file tree
Hide file tree
Changes from 13 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/_data/sites/de.yml
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ locals:
docs_next: false
docs_v8: false
blog: false
version_support: false

#------------------------------------------------------------------------------
# Analytics
Expand Down Expand Up @@ -225,6 +226,7 @@ homepage:
upcoming: Nächste Version
development: Entwicklung
dateline: VERSION am DATE
version_support: Version Support

explainer:
image:
Expand Down
2 changes: 2 additions & 0 deletions src/_data/sites/en.yml
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ locals:
docs_next: next--docs-eslint.netlify.app
docs_v8: v8-x--docs-eslint.netlify.app
blog: true
version_support: true
redirects:
- from: https://cn.eslint.org/*
to: https://zh-hans.eslint.org
Expand Down Expand Up @@ -220,6 +221,7 @@ homepage:
upcoming: Upcoming Version
development: Development
dateline: VERSION on DATE
version_support: Version Support

explainer:
image:
Expand Down
2 changes: 2 additions & 0 deletions src/_data/sites/es.yml
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ locals:
docs_next: false
docs_v8: false
blog: false
version_support: false

#------------------------------------------------------------------------------
# Analytics
Expand Down Expand Up @@ -208,6 +209,7 @@ homepage:
upcoming: Próxima versión
development: Desarrollo
dateline: VERSION en DATE
version_support: Version Support

explainer:
image:
Expand Down
2 changes: 2 additions & 0 deletions src/_data/sites/fr.yml
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ locals:
docs_next: false
docs_v8: false
blog: false
version_support: false

#------------------------------------------------------------------------------
# Analytics
Expand Down Expand Up @@ -214,6 +215,7 @@ homepage:
upcoming: Prochaine Version
development: Développement
dateline: VERSION du DATE
version_support: Version Support

explainer:
image:
Expand Down
2 changes: 2 additions & 0 deletions src/_data/sites/hi.yml
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ locals:
docs_next: false
docs_v8: false
blog: false
version_support: false

#------------------------------------------------------------------------------
# Analytics
Expand Down Expand Up @@ -199,6 +200,7 @@ homepage:
upcoming: आगामी संस्करण
development: विकास संस्करण के तहत
dateline: VERSION on DATE
version_support: Version Support
amareshsm marked this conversation as resolved.
Show resolved Hide resolved

explainer:
image:
Expand Down
2 changes: 2 additions & 0 deletions src/_data/sites/ja.yml
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ locals:
docs_next: false
docs_v8: false
blog: false
version_support: false

#------------------------------------------------------------------------------
# Analytics
Expand Down Expand Up @@ -206,6 +207,7 @@ homepage:
upcoming: 次バージョン
development: 開発中バージョン
dateline: VERSION(DATE)
version_support: Version Support

explainer:
image:
Expand Down
2 changes: 2 additions & 0 deletions src/_data/sites/pt-br.yml
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ locals:
docs_next: false
docs_v8: false
blog: false
version_support: false

#------------------------------------------------------------------------------
# Analytics
Expand Down Expand Up @@ -209,6 +210,7 @@ homepage:
upcoming: Próxima Versão
development: Desenvolvimento
dateline: VERSION em DATE
version_support: Version Support

explainer:
image:
Expand Down
2 changes: 2 additions & 0 deletions src/_data/sites/zh-hans.yml
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ locals:
docs_next: false
docs_v8: false
blog: false
version_support: false

#------------------------------------------------------------------------------
# Analytics
Expand Down Expand Up @@ -202,6 +203,7 @@ homepage:
upcoming: 即将到来的版本
development: 开发中
dateline: 于 DATE 发布 VERSION
version_support: Version Support

explainer:
image:
Expand Down
24 changes: 24 additions & 0 deletions src/_includes/layouts/page.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
---
layout: base.html
hook: "page"
---

{% include "partials/header.html" %}

<main id="main" class="post-main" tabindex="-1">
{%- from 'components/hero.macro.html' import hero with context %}
{% set hero_title = title %}
{% set hero_supporting_text = description %}

{{ hero({
title: hero_title,
supporting_text: hero_supporting_text
}) }}

<div class="content-container content-container__no-sidebar">
{{ content | safe }}
</div>
</main>


{% include "partials/footer.html" %}
1 change: 0 additions & 1 deletion src/assets/scss/components/hero.scss
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@
margin: 0 auto;
padding: 0 calc(1rem + 1vw);
padding-bottom: 0;
align-items: center;
}
}

Expand Down
12 changes: 12 additions & 0 deletions src/assets/scss/foundations.scss
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,10 @@ main {
}
}

.content-container__no-sidebar {
max-width: 800px;
}

.section-head {
.section-supporting-text {
text-align: center;
Expand Down Expand Up @@ -208,6 +212,14 @@ table {
background-color: var(--lightest-background-color);
padding: 0.25rem 0.5rem;
}

@media screen and (max-width: 768px) {
display: block;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
display: block;
display: block;

I came across this approach as well. Using display: block for a <table> tag will change its display behaviour. When we set display: block, the <table> element will behave like a block-level element instead of a table. I'm not sure if this is the best approach, so I'll check for any potential side effects.

Copy link
Member

@amareshsm amareshsm Jul 28, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Setting display: block for the table works fine if the table occupies the full width on mobile. However, if the table doesn't occupy the full width, it causes the table's border to break.

image

image

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks. I think we can fix that pretty easily using CSS.

width: fit-content;
max-width: 100%;
margin-inline: auto;
overflow-x: scroll;
}
nzakas marked this conversation as resolved.
Show resolved Hide resolved
}

.c-btn,
Expand Down
19 changes: 19 additions & 0 deletions src/assets/scss/homepage.scss
Original file line number Diff line number Diff line change
Expand Up @@ -99,11 +99,25 @@
@media all and (min-width: 1023px) {
align-items: flex-end;
}

@media all and (min-width: 800px) {
padding-block-start: var(--space-xl-2xl);
padding-top: var(--space-xl-2xl);
}
}

.eslint-versions-container {
display: flex;
flex-direction: column;
padding-block-end: 2rem;
padding-bottom: 2rem;
}

.eslint-versions {
margin-top: 3rem;
margin-block-start: 3rem;
margin-bottom: 1rem;
margin-block-end: 1rem;
display: inline-flex;
flex-direction: column;

Expand All @@ -128,6 +142,11 @@
align-items: center;
}

dd:last-of-type {
margin-bottom: 0;
margin-block-end: 0;
}

.c-icon {
margin-right: 0.5rem;
margin-inline-end: 0.5rem;
Expand Down
107 changes: 55 additions & 52 deletions src/content/pages/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -66,59 +66,62 @@ <h1 class="section-title">{{ site.homepage.title }}</h1>
<div class="carbon-wrapper">
{% include "partials/ad.html" %}
</div>
<dl class="eslint-versions" aria-labelledby="eslint-versions-title">
<span id="eslint-versions-title" hidden>{{ site.homepage.versions.title }}</span>
<dt>{{ site.homepage.versions.latest }}</dt>
<dd>
{% set version_date = stats.latestVersionDate | shortDateFromISO %}
{% set dateline = site.homepage.versions.dateline | safe
| replace("VERSION", "<a href=\"https://github.com/eslint/eslint/releases/tag/" + stats.latestVersion + "\" class=\"text-dark no-underline\">" + stats.latestVersion + "</a>")
| replace("DATE", version_date)
%}
<svg width="16" height="8" viewBox="0 0 16 8" class="c-icon" role="img" aria-label="npm">
<path d="M0 0.888885H16V6.22222H8V7.11111H4.44444V6.22222H0V0.888885ZM0.888889 5.33333H2.66667V2.66666H3.55556V5.33333H4.44444V1.77777H0.888889V5.33333ZM5.33333 1.77777V6.22222H7.11111V5.33333H8.88889V1.77777H5.33333ZM7.11111 2.66666H8V4.44444H7.11111V2.66666ZM9.77778 1.77777V5.33333H11.5556V2.66666H12.4444V5.33333H13.3333V2.66666H14.2222V5.33333H15.1111V1.77777H9.77778Z" fill="currentColor" />
</svg>
<span>{{ dateline }}</span>
</dd>
{% if stats.currentVersionIsPrerelease -%}
<dt>{{ site.homepage.versions.latest_prerelease }}</dt>
<dd>
{% set version_date = stats.currentVersionDate | shortDateFromISO %}
{% set dateline = site.homepage.versions.dateline | safe
| replace("VERSION", "<a href=\"https://github.com/eslint/eslint/releases/tag/" + stats.currentVersion + "\" class=\"text-dark no-underline\">" + stats.currentVersion + "</a>")
| replace("DATE", version_date)
%}
<svg width="16" height="8" viewBox="0 0 16 8" class="c-icon" role="img" aria-label="npm">
<path d="M0 0.888885H16V6.22222H8V7.11111H4.44444V6.22222H0V0.888885ZM0.888889 5.33333H2.66667V2.66666H3.55556V5.33333H4.44444V1.77777H0.888889V5.33333ZM5.33333 1.77777V6.22222H7.11111V5.33333H8.88889V1.77777H5.33333ZM7.11111 2.66666H8V4.44444H7.11111V2.66666ZM9.77778 1.77777V5.33333H11.5556V2.66666H12.4444V5.33333H13.3333V2.66666H14.2222V5.33333H15.1111V1.77777H9.77778Z" fill="currentColor" />
</svg>
<span>{{ dateline }}</span>
</dd>
{%- endif %}
<dt>{{ site.homepage.versions.upcoming }}</dt>
<dd>
{% set version_date = stats.nextVersionDate | shortDateFromISO %}
{% set dateline = site.homepage.versions.dateline | safe
| replace("VERSION", "<a class=\"text-dark\">" + stats.nextVersion + "</a>")
| replace("DATE", version_date)
%}
<svg width="16" height="16" viewBox="0 0 16 16" class="c-icon" role="img" aria-label="Github">
<path d="M8 0.200012C3.6 0.200012 0 3.80001 0 8.20001C0 11.7333 2.26667 14.7333 5.46667 15.8C5.86667 15.8667 6 15.6 6 15.4C6 15.2 6 14.7333 6 14.0667C3.8 14.5333 3.33333 13 3.33333 13C3 12.0667 2.46667 11.8 2.46667 11.8C1.66667 11.3333 2.46667 11.3333 2.46667 11.3333C3.26667 11.4 3.66667 12.1333 3.66667 12.1333C4.4 13.3333 5.53333 13 6 12.8C6.06667 12.2667 6.26667 11.9333 6.53333 11.7333C4.73333 11.5333 2.86667 10.8667 2.86667 7.80001C2.86667 6.93335 3.2 6.20001 3.66667 5.66668C3.66667 5.40001 3.33333 4.60001 3.8 3.53335C3.8 3.53335 4.46667 3.33335 6 4.33335C6.66667 4.13335 7.33333 4.06668 8 4.06668C8.66667 4.06668 9.33333 4.13335 10 4.33335C11.5333 3.26668 12.2 3.53335 12.2 3.53335C12.6667 4.66668 12.3333 5.46668 12.2667 5.66668C12.8 6.20001 13.0667 6.93335 13.0667 7.80001C13.0667 10.8667 11.2 11.5333 9.4 11.7333C9.66667 12 9.93333 12.4667 9.93333 13.2C9.93333 14.2667 9.93333 15.1333 9.93333 15.4C9.93333 15.6 10.0667 15.8667 10.4667 15.8C13.6667 14.7333 15.9333 11.7333 15.9333 8.20001C16 3.80001 12.4 0.200012 8 0.200012Z" fill="currentColor" />
</svg>
<span>{{ dateline }}</span>
</dd>
{% if not stats.currentVersionIsPrerelease -%}
<dt>{{ site.homepage.versions.development }}</dt>
<dd>
{% set version_date = stats.lastCommitDate | shortDateFromISO %}
{% set dateline = site.homepage.versions.dateline | safe | replace("VERSION", "<a class=\"text-dark\">HEAD</a>") | replace("DATE", version_date) %}
<div class="eslint-versions-container">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Two small notes about the layout after this change, I'm not sure how important they are and whether they're intentional:

  1. The ad and the versions are moved up a bit (when compared to the current eslint.org homepage).

image

  1. On a mobile screen, the Version Support link seems too close to the horizontal line below it.

image

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For 1, best I can tell, adding the "Version Support" link pushed everything up, but I have no idea why. Someone's who done web development more recently than I can probably figure it out pretty quickly. 😄

For 2, I've updated the styles.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. Everything moved up a little bit because of
    padding-block-end: 2rem; padding-bottom: 2rem;

This padding seems to force content to move upwards

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In 1, the ad and version shift slightly upward due to the align-items: center property applied to both the .hero>.content-container and .hero .grid elements. The align-items: center property attempts to center-align the child elements, so adding a new element to the right column causes it to shift up slightly.

Screenshot 2024-07-10 at 11 52 20 PM

To fix this, we can do the below steps:

step 1: align .hero>.content-container element normally
image

step 2: The left grid span-1-7 content-container element has some padding applied. Apply the same padding to the right grid as well.

image

image

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

<dl class="eslint-versions" aria-labelledby="eslint-versions-title">
<span id="eslint-versions-title" hidden>{{ site.homepage.versions.title }}</span>
<dt>{{ site.homepage.versions.latest }}</dt>
<dd>
{% set version_date = stats.latestVersionDate | shortDateFromISO %}
{% set dateline = site.homepage.versions.dateline | safe
| replace("VERSION", "<a href=\"https://github.com/eslint/eslint/releases/tag/" + stats.latestVersion + "\" class=\"text-dark no-underline\">" + stats.latestVersion + "</a>")
| replace("DATE", version_date)
%}
<svg width="16" height="8" viewBox="0 0 16 8" class="c-icon" role="img" aria-label="npm">
<path d="M0 0.888885H16V6.22222H8V7.11111H4.44444V6.22222H0V0.888885ZM0.888889 5.33333H2.66667V2.66666H3.55556V5.33333H4.44444V1.77777H0.888889V5.33333ZM5.33333 1.77777V6.22222H7.11111V5.33333H8.88889V1.77777H5.33333ZM7.11111 2.66666H8V4.44444H7.11111V2.66666ZM9.77778 1.77777V5.33333H11.5556V2.66666H12.4444V5.33333H13.3333V2.66666H14.2222V5.33333H15.1111V1.77777H9.77778Z" fill="currentColor" />
</svg>
<span>{{ dateline }}</span>
</dd>
{% if stats.currentVersionIsPrerelease -%}
<dt>{{ site.homepage.versions.latest_prerelease }}</dt>
<dd>
{% set version_date = stats.currentVersionDate | shortDateFromISO %}
{% set dateline = site.homepage.versions.dateline | safe
| replace("VERSION", "<a href=\"https://github.com/eslint/eslint/releases/tag/" + stats.currentVersion + "\" class=\"text-dark no-underline\">" + stats.currentVersion + "</a>")
| replace("DATE", version_date)
%}
<svg width="16" height="8" viewBox="0 0 16 8" class="c-icon" role="img" aria-label="npm">
<path d="M0 0.888885H16V6.22222H8V7.11111H4.44444V6.22222H0V0.888885ZM0.888889 5.33333H2.66667V2.66666H3.55556V5.33333H4.44444V1.77777H0.888889V5.33333ZM5.33333 1.77777V6.22222H7.11111V5.33333H8.88889V1.77777H5.33333ZM7.11111 2.66666H8V4.44444H7.11111V2.66666ZM9.77778 1.77777V5.33333H11.5556V2.66666H12.4444V5.33333H13.3333V2.66666H14.2222V5.33333H15.1111V1.77777H9.77778Z" fill="currentColor" />
</svg>
<span>{{ dateline }}</span>
</dd>
{%- endif %}
<dt>{{ site.homepage.versions.upcoming }}</dt>
<dd>
{% set version_date = stats.nextVersionDate | shortDateFromISO %}
{% set dateline = site.homepage.versions.dateline | safe
| replace("VERSION", "<a class=\"text-dark\">" + stats.nextVersion + "</a>")
| replace("DATE", version_date)
%}
<svg width="16" height="16" viewBox="0 0 16 16" class="c-icon" role="img" aria-label="Github">
<path d="M8 0.200012C3.6 0.200012 0 3.80001 0 8.20001C0 11.7333 2.26667 14.7333 5.46667 15.8C5.86667 15.8667 6 15.6 6 15.4C6 15.2 6 14.7333 6 14.0667C3.8 14.5333 3.33333 13 3.33333 13C3 12.0667 2.46667 11.8 2.46667 11.8C1.66667 11.3333 2.46667 11.3333 2.46667 11.3333C3.26667 11.4 3.66667 12.1333 3.66667 12.1333C4.4 13.3333 5.53333 13 6 12.8C6.06667 12.2667 6.26667 11.9333 6.53333 11.7333C4.73333 11.5333 2.86667 10.8667 2.86667 7.80001C2.86667 6.93335 3.2 6.20001 3.66667 5.66668C3.66667 5.40001 3.33333 4.60001 3.8 3.53335C3.8 3.53335 4.46667 3.33335 6 4.33335C6.66667 4.13335 7.33333 4.06668 8 4.06668C8.66667 4.06668 9.33333 4.13335 10 4.33335C11.5333 3.26668 12.2 3.53335 12.2 3.53335C12.6667 4.66668 12.3333 5.46668 12.2667 5.66668C12.8 6.20001 13.0667 6.93335 13.0667 7.80001C13.0667 10.8667 11.2 11.5333 9.4 11.7333C9.66667 12 9.93333 12.4667 9.93333 13.2C9.93333 14.2667 9.93333 15.1333 9.93333 15.4C9.93333 15.6 10.0667 15.8667 10.4667 15.8C13.6667 14.7333 15.9333 11.7333 15.9333 8.20001C16 3.80001 12.4 0.200012 8 0.200012Z" fill="currentColor" />
</svg>
<span>{{ dateline }}</span>
</dd>
{% if not stats.currentVersionIsPrerelease -%}
<dt>{{ site.homepage.versions.development }}</dt>
<dd>
{% set version_date = stats.lastCommitDate | shortDateFromISO %}
{% set dateline = site.homepage.versions.dateline | safe | replace("VERSION", "<a class=\"text-dark\">HEAD</a>") | replace("DATE", version_date) %}

<svg width="16" height="16" viewBox="0 0 16 16" class="c-icon" role="img" aria-label="Github">
<path d="M8 0.200012C3.6 0.200012 0 3.80001 0 8.20001C0 11.7333 2.26667 14.7333 5.46667 15.8C5.86667 15.8667 6 15.6 6 15.4C6 15.2 6 14.7333 6 14.0667C3.8 14.5333 3.33333 13 3.33333 13C3 12.0667 2.46667 11.8 2.46667 11.8C1.66667 11.3333 2.46667 11.3333 2.46667 11.3333C3.26667 11.4 3.66667 12.1333 3.66667 12.1333C4.4 13.3333 5.53333 13 6 12.8C6.06667 12.2667 6.26667 11.9333 6.53333 11.7333C4.73333 11.5333 2.86667 10.8667 2.86667 7.80001C2.86667 6.93335 3.2 6.20001 3.66667 5.66668C3.66667 5.40001 3.33333 4.60001 3.8 3.53335C3.8 3.53335 4.46667 3.33335 6 4.33335C6.66667 4.13335 7.33333 4.06668 8 4.06668C8.66667 4.06668 9.33333 4.13335 10 4.33335C11.5333 3.26668 12.2 3.53335 12.2 3.53335C12.6667 4.66668 12.3333 5.46668 12.2667 5.66668C12.8 6.20001 13.0667 6.93335 13.0667 7.80001C13.0667 10.8667 11.2 11.5333 9.4 11.7333C9.66667 12 9.93333 12.4667 9.93333 13.2C9.93333 14.2667 9.93333 15.1333 9.93333 15.4C9.93333 15.6 10.0667 15.8667 10.4667 15.8C13.6667 14.7333 15.9333 11.7333 15.9333 8.20001C16 3.80001 12.4 0.200012 8 0.200012Z" fill="currentColor" />
</svg>
<span>{{ dateline }}</span>
</dd>
{%- endif %}
</dl>
<svg width="16" height="16" viewBox="0 0 16 16" class="c-icon" role="img" aria-label="Github">
<path d="M8 0.200012C3.6 0.200012 0 3.80001 0 8.20001C0 11.7333 2.26667 14.7333 5.46667 15.8C5.86667 15.8667 6 15.6 6 15.4C6 15.2 6 14.7333 6 14.0667C3.8 14.5333 3.33333 13 3.33333 13C3 12.0667 2.46667 11.8 2.46667 11.8C1.66667 11.3333 2.46667 11.3333 2.46667 11.3333C3.26667 11.4 3.66667 12.1333 3.66667 12.1333C4.4 13.3333 5.53333 13 6 12.8C6.06667 12.2667 6.26667 11.9333 6.53333 11.7333C4.73333 11.5333 2.86667 10.8667 2.86667 7.80001C2.86667 6.93335 3.2 6.20001 3.66667 5.66668C3.66667 5.40001 3.33333 4.60001 3.8 3.53335C3.8 3.53335 4.46667 3.33335 6 4.33335C6.66667 4.13335 7.33333 4.06668 8 4.06668C8.66667 4.06668 9.33333 4.13335 10 4.33335C11.5333 3.26668 12.2 3.53335 12.2 3.53335C12.6667 4.66668 12.3333 5.46668 12.2667 5.66668C12.8 6.20001 13.0667 6.93335 13.0667 7.80001C13.0667 10.8667 11.2 11.5333 9.4 11.7333C9.66667 12 9.93333 12.4667 9.93333 13.2C9.93333 14.2667 9.93333 15.1333 9.93333 15.4C9.93333 15.6 10.0667 15.8667 10.4667 15.8C13.6667 14.7333 15.9333 11.7333 15.9333 8.20001C16 3.80001 12.4 0.200012 8 0.200012Z" fill="currentColor" />
</svg>
<span>{{ dateline }}</span>
</dd>
{%- endif %}
</dl>
<a href="/version-support/">{{ site.homepage.versions.version_support }}</a>
</div>
</div>
</div>
</section>
Expand Down
Loading
Loading