From cfa78dccc30aa70f91cd975ae3ce633e95645ff4 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Mon, 11 Mar 2024 07:21:39 -0700 Subject: [PATCH] Add year selector to updates page (#410) The Updates page was getting really long which meant a humongous request. This splits it up by year. --- .../about/UpdatesPage/index.module.scss | 138 +-- components/about/UpdatesPage/index.tsx | 893 +----------------- .../ContentUpdate2022/index.module.scss | 133 +++ .../about/updates/ContentUpdate2022/index.tsx | 54 ++ .../ContentUpdate2023/index.module.scss | 133 +++ .../about/updates/ContentUpdate2023/index.tsx | 683 ++++++++++++++ .../about/updates/ContentUpdate2024/index.tsx | 163 ++++ 7 files changed, 1228 insertions(+), 969 deletions(-) create mode 100644 components/about/updates/ContentUpdate2022/index.module.scss create mode 100644 components/about/updates/ContentUpdate2022/index.tsx create mode 100644 components/about/updates/ContentUpdate2023/index.module.scss create mode 100644 components/about/updates/ContentUpdate2023/index.tsx create mode 100644 components/about/updates/ContentUpdate2024/index.tsx diff --git a/components/about/UpdatesPage/index.module.scss b/components/about/UpdatesPage/index.module.scss index 853daba3..2bf0152e 100644 --- a/components/about/UpdatesPage/index.module.scss +++ b/components/about/UpdatesPage/index.module.scss @@ -1,132 +1,30 @@ .updates { - padding-bottom: $unit-12x; - - .version { + .top { display: flex; flex-direction: column; + gap: $unit; + } - &.content { - .header h3 { - color: var(--accent-yellow); - } - } + .yearSelector { + display: flex; + flex-direction: row; + gap: $unit-2x; - .bugs { - display: flex; - flex-direction: column; - list-style-type: disc; - gap: $unit-half; - padding-left: $unit-2x; - } + .yearButton { + background: none; + border: none; + font-size: $font-medium; + font-weight: $bold; + font-variant-numeric: oldstyle-nums; + padding: 0; - .contents { - display: flex; - flex-direction: column; - gap: $unit-4x; - - .foreword { - margin-top: $unit-4x; - - p { - font-size: $font-regular; - line-height: 1.32; - margin-bottom: $unit-2x; - } - } - - .features { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); - gap: $unit-2x; - - li { - display: flex; - flex-direction: column; - gap: $unit; - - h3 { - font-weight: $bold; - margin-top: $unit-half; - } - - img { - aspect-ratio: 4 / 3; - background: var(--dialog-bg); - border-radius: $input-corner; - display: block; - width: 100%; - } - - code { - background: var(--button-bg); - border-radius: 2px; - font-family: monospace; - font-weight: $bold; - letter-spacing: 0.02rem; - padding: 1px; - } - } - } - } - - .header { - align-items: baseline; - display: flex; - gap: $unit-half; - margin-bottom: $unit-2x; - - h3 { + &.active { color: var(--accent-blue); - font-weight: $medium; - font-size: $font-large; } - time { - color: var(--text-secondary); - font-size: $font-small; - font-weight: $medium; - } - } - - .list { - display: flex; - flex-direction: column; - color: var(--text-primary); - list-style-type: disc; - list-style-position: inside; - gap: $unit-half; - - li { - font-size: 14px; - } - } - - .Contents { - display: flex; - flex-direction: column; - gap: $unit-4x; - - &.Bare { - display: flex; - flex-direction: column; - color: var(--text-primary); - list-style-type: disc; - list-style-position: inside; - gap: $unit-half; - - li { - font-size: 14px; - } - } - - section { - display: flex; - flex-direction: column; - gap: $unit-2x; - - h2 { - margin: 0; - } + &:hover { + color: var(--accent-blue); + cursor: pointer; } } } diff --git a/components/about/UpdatesPage/index.tsx b/components/about/UpdatesPage/index.tsx index e2d65222..e501dc7f 100644 --- a/components/about/UpdatesPage/index.tsx +++ b/components/about/UpdatesPage/index.tsx @@ -1,10 +1,10 @@ -import React from 'react' +import React, { useState } from 'react' import { useTranslation } from 'next-i18next' import classNames from 'classnames' -import ContentUpdate from '~components/about/ContentUpdate' -import LinkItem from '../LinkItem' -import DiscordIcon from '~public/icons/discord.svg' +import ContentUpdate2022 from '../updates/ContentUpdate2022' +import ContentUpdate2023 from '../updates/ContentUpdate2023' +import ContentUpdate2024 from '../updates/ContentUpdate2024' import styles from './index.module.scss' @@ -14,858 +14,53 @@ const UpdatesPage = () => { const classes = classNames(styles.updates, 'PageContent') - const versionUpdates = { - '1.0.0': 5, - '1.0.1': 4, - '1.1.0': { - updates: 10, - bugs: 4, - images: [ - 'remix', - 'unauth', - 'transcendence', - 'accessories', - 'mastery', - 'mechanics', - 'rare', - 'urls', - 'nav', - 'toasts', - ], - }, - '1.2.0': { - updates: 10, - bugs: 0, - images: [ - 'party-peek', - 'party-redesign', - 'visibility', - 'rich-text', - 'mentions', - 'include-exclude', - 'raid-search', - 'search-views', - 'quick-summon', - 'grand-awakening', - ], - }, - '202302U2': { - updates: 1, - }, - '1.2.1': { - bugs: 5, - }, - } + const [activeYear, setActiveYear] = useState(new Date().getFullYear()) + const getYearButtonClass = (year: number) => + classNames({ + [styles.yearButton]: true, + [styles.active]: activeYear === year, + }) - function image( - alt: string, - url: string, - filename: string, - extension: string - ) { - const fallback = `${url}/${filename}.${extension}` - - let set = [] - for (let i = 1; i < 3; i++) { - if (i === 1) set.push(fallback) - else set.push(`${url}/${filename}@${i}x.${extension} ${i}x`) + // Render the component based on the active year + const renderContentUpdate = () => { + switch (activeYear) { + case 2022: + return + case 2023: + return + case 2024: + return + default: + return
{updates('noUpdates')}
} - const sizes = set.join(', ') - - return {alt} } return (
-

{common('about.segmented_control.updates')}

- - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-

1.2.1

- +
+

{common('about.segmented_control.updates')}

+
+ + +
-

Bug fixes

-
    - {[...Array(versionUpdates['1.2.1'].bugs)].map((e, i) => ( -
  • - {updates(`versions.1.2.1.bugs.${i}`)} -
    • - ))} -
-
- -
-
-

1.2.0

- -
-
-
-

{updates('labels.features')}

-
    - {[...Array(versionUpdates['1.2.0'].updates)].map((e, i) => ( -
  • - {image( - updates(`versions.1.2.0.features.${i}.title`), - `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`, - versionUpdates['1.2.0'].images[i], - 'jpg' - )} -

    {updates(`versions.1.2.0.features.${i}.title`)}

    -

    {updates(`versions.1.2.0.features.${i}.blurb`)}

    -
    • - ))} -
-
-

Developer notes

- {updates('versions.1.2.0.notes') - .split('\n') - .map((item, i) => ( -

{item}

- ))} - } - /> -
-
- {/*
-

Bug fixes

-
    - {[...Array(versionUpdates['1.2.0'].bugs)].map((e, i) => ( -
  • - {updates(`versions.1.2.0.bugs.${i}`)} -
    • - ))} -
-
*/} -
-
- - - - - - - - - - - - - - - - - - - - - - -
-
-

1.1.0

- -
-
-
-

{updates('labels.features')}

-
    - {[...Array(versionUpdates['1.1.0'].updates)].map((e, i) => ( -
  • - {image( - updates(`versions.1.1.0.features.${i}.title`), - `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`, - versionUpdates['1.1.0'].images[i], - 'jpg' - )} -

    {updates(`versions.1.1.0.features.${i}.title`)}

    -

    {updates(`versions.1.1.0.features.${i}.blurb`)}

    -
    • - ))} -
-
-
-

Bug fixes

-
    - {[...Array(versionUpdates['1.1.0'].bugs)].map((e, i) => ( -
  • - {updates(`versions.1.1.0.bugs.${i}`)} -
    • - ))} -
-
-
-
- - - - -
-
-

1.0.1

- -
-
    - {[...Array(versionUpdates['1.0.1'])].map((e, i) => ( -
  • - {updates(`versions.1.0.1.features.${i}`)} -
    • - ))} -
-
- - -
-
-

1.0.0

- -
-
    - {[...Array(versionUpdates['1.0.0'])].map((e, i) => ( -
  • - {updates(`versions.1.0.0.features.${i}`)} -
    • - ))} -
-
+
+ {renderContentUpdate()} ) } diff --git a/components/about/updates/ContentUpdate2022/index.module.scss b/components/about/updates/ContentUpdate2022/index.module.scss new file mode 100644 index 00000000..853daba3 --- /dev/null +++ b/components/about/updates/ContentUpdate2022/index.module.scss @@ -0,0 +1,133 @@ +.updates { + padding-bottom: $unit-12x; + + .version { + display: flex; + flex-direction: column; + + &.content { + .header h3 { + color: var(--accent-yellow); + } + } + + .bugs { + display: flex; + flex-direction: column; + list-style-type: disc; + gap: $unit-half; + padding-left: $unit-2x; + } + + .contents { + display: flex; + flex-direction: column; + gap: $unit-4x; + + .foreword { + margin-top: $unit-4x; + + p { + font-size: $font-regular; + line-height: 1.32; + margin-bottom: $unit-2x; + } + } + + .features { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: $unit-2x; + + li { + display: flex; + flex-direction: column; + gap: $unit; + + h3 { + font-weight: $bold; + margin-top: $unit-half; + } + + img { + aspect-ratio: 4 / 3; + background: var(--dialog-bg); + border-radius: $input-corner; + display: block; + width: 100%; + } + + code { + background: var(--button-bg); + border-radius: 2px; + font-family: monospace; + font-weight: $bold; + letter-spacing: 0.02rem; + padding: 1px; + } + } + } + } + + .header { + align-items: baseline; + display: flex; + gap: $unit-half; + margin-bottom: $unit-2x; + + h3 { + color: var(--accent-blue); + font-weight: $medium; + font-size: $font-large; + } + + time { + color: var(--text-secondary); + font-size: $font-small; + font-weight: $medium; + } + } + + .list { + display: flex; + flex-direction: column; + color: var(--text-primary); + list-style-type: disc; + list-style-position: inside; + gap: $unit-half; + + li { + font-size: 14px; + } + } + + .Contents { + display: flex; + flex-direction: column; + gap: $unit-4x; + + &.Bare { + display: flex; + flex-direction: column; + color: var(--text-primary); + list-style-type: disc; + list-style-position: inside; + gap: $unit-half; + + li { + font-size: 14px; + } + } + + section { + display: flex; + flex-direction: column; + gap: $unit-2x; + + h2 { + margin: 0; + } + } + } + } +} diff --git a/components/about/updates/ContentUpdate2022/index.tsx b/components/about/updates/ContentUpdate2022/index.tsx new file mode 100644 index 00000000..187f1c36 --- /dev/null +++ b/components/about/updates/ContentUpdate2022/index.tsx @@ -0,0 +1,54 @@ +import React from 'react' +import { useTranslation } from 'next-i18next' +import ContentUpdate from '~components/about/ContentUpdate' + +import styles from './index.module.scss' + +const ContentUpdate2022 = () => { + const { t: updates } = useTranslation('updates') + + const versionUpdates = { + '1.0.0': 5, + } + + return ( + <> + + +
+
+

1.0.0

+ +
+
    + {[...Array(versionUpdates['1.0.0'])].map((e, i) => ( +
  • + {updates(`versions.1.0.0.features.${i}`)} +
    • + ))} +
+
+ + ) +} + +export default ContentUpdate2022 diff --git a/components/about/updates/ContentUpdate2023/index.module.scss b/components/about/updates/ContentUpdate2023/index.module.scss new file mode 100644 index 00000000..853daba3 --- /dev/null +++ b/components/about/updates/ContentUpdate2023/index.module.scss @@ -0,0 +1,133 @@ +.updates { + padding-bottom: $unit-12x; + + .version { + display: flex; + flex-direction: column; + + &.content { + .header h3 { + color: var(--accent-yellow); + } + } + + .bugs { + display: flex; + flex-direction: column; + list-style-type: disc; + gap: $unit-half; + padding-left: $unit-2x; + } + + .contents { + display: flex; + flex-direction: column; + gap: $unit-4x; + + .foreword { + margin-top: $unit-4x; + + p { + font-size: $font-regular; + line-height: 1.32; + margin-bottom: $unit-2x; + } + } + + .features { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: $unit-2x; + + li { + display: flex; + flex-direction: column; + gap: $unit; + + h3 { + font-weight: $bold; + margin-top: $unit-half; + } + + img { + aspect-ratio: 4 / 3; + background: var(--dialog-bg); + border-radius: $input-corner; + display: block; + width: 100%; + } + + code { + background: var(--button-bg); + border-radius: 2px; + font-family: monospace; + font-weight: $bold; + letter-spacing: 0.02rem; + padding: 1px; + } + } + } + } + + .header { + align-items: baseline; + display: flex; + gap: $unit-half; + margin-bottom: $unit-2x; + + h3 { + color: var(--accent-blue); + font-weight: $medium; + font-size: $font-large; + } + + time { + color: var(--text-secondary); + font-size: $font-small; + font-weight: $medium; + } + } + + .list { + display: flex; + flex-direction: column; + color: var(--text-primary); + list-style-type: disc; + list-style-position: inside; + gap: $unit-half; + + li { + font-size: 14px; + } + } + + .Contents { + display: flex; + flex-direction: column; + gap: $unit-4x; + + &.Bare { + display: flex; + flex-direction: column; + color: var(--text-primary); + list-style-type: disc; + list-style-position: inside; + gap: $unit-half; + + li { + font-size: 14px; + } + } + + section { + display: flex; + flex-direction: column; + gap: $unit-2x; + + h2 { + margin: 0; + } + } + } + } +} diff --git a/components/about/updates/ContentUpdate2023/index.tsx b/components/about/updates/ContentUpdate2023/index.tsx new file mode 100644 index 00000000..9ecf81ba --- /dev/null +++ b/components/about/updates/ContentUpdate2023/index.tsx @@ -0,0 +1,683 @@ +import React from 'react' +import { useTranslation } from 'next-i18next' +import ContentUpdate from '~components/about/ContentUpdate' +import LinkItem from '../../LinkItem' +import DiscordIcon from '~public/icons/discord.svg' + +import styles from './index.module.scss' + +const ContentUpdate2023 = () => { + const { t: updates } = useTranslation('updates') + + const versionUpdates = { + '1.0.1': 4, + '1.1.0': { + updates: 10, + bugs: 4, + images: [ + 'remix', + 'unauth', + 'transcendence', + 'accessories', + 'mastery', + 'mechanics', + 'rare', + 'urls', + 'nav', + 'toasts', + ], + }, + '1.2.0': { + updates: 10, + bugs: 0, + images: [ + 'party-peek', + 'party-redesign', + 'visibility', + 'rich-text', + 'mentions', + 'include-exclude', + 'raid-search', + 'search-views', + 'quick-summon', + 'grand-awakening', + ], + }, + '202302U2': { + updates: 1, + }, + '1.2.1': { + bugs: 5, + }, + } + + function image( + alt: string, + url: string, + filename: string, + extension: string + ) { + const fallback = `${url}/${filename}.${extension}` + + let set = [] + for (let i = 1; i < 3; i++) { + if (i === 1) set.push(fallback) + else set.push(`${url}/${filename}@${i}x.${extension} ${i}x`) + } + const sizes = set.join(', ') + + return {alt} + } + + return ( + <> + + + + + + + + + + + + + + + + +
+
+

1.2.1

+ +
+

Bug fixes

+
    + {[...Array(versionUpdates['1.2.1'].bugs)].map((e, i) => ( +
  • + {updates(`versions.1.2.1.bugs.${i}`)} +
    • + ))} +
+
+ +
+
+

1.2.0

+ +
+
+
+

{updates('labels.features')}

+
    + {[...Array(versionUpdates['1.2.0'].updates)].map((e, i) => ( +
  • + {image( + updates(`versions.1.2.0.features.${i}.title`), + `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`, + versionUpdates['1.2.0'].images[i], + 'jpg' + )} +

    {updates(`versions.1.2.0.features.${i}.title`)}

    +

    {updates(`versions.1.2.0.features.${i}.blurb`)}

    +
    • + ))} +
+
+

Developer notes

+ {updates('versions.1.2.0.notes') + .split('\n') + .map((item, i) => ( +

{item}

+ ))} + } + /> +
+
+ {/*
+

Bug fixes

+
    + {[...Array(versionUpdates['1.2.0'].bugs)].map((e, i) => ( +
  • + {updates(`versions.1.2.0.bugs.${i}`)} +
    • + ))} +
+
*/} +
+
+ + + + + + + + + + + + + + + + + + + + + + +
+
+

1.1.0

+ +
+
+
+

{updates('labels.features')}

+
    + {[...Array(versionUpdates['1.1.0'].updates)].map((e, i) => ( +
  • + {image( + updates(`versions.1.1.0.features.${i}.title`), + `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`, + versionUpdates['1.1.0'].images[i], + 'jpg' + )} +

    {updates(`versions.1.1.0.features.${i}.title`)}

    +

    {updates(`versions.1.1.0.features.${i}.blurb`)}

    +
    • + ))} +
+
+
+

Bug fixes

+
    + {[...Array(versionUpdates['1.1.0'].bugs)].map((e, i) => ( +
  • + {updates(`versions.1.1.0.bugs.${i}`)} +
    • + ))} +
+
+
+
+ + + + +
+
+

1.0.1

+ +
+
    + {[...Array(versionUpdates['1.0.1'])].map((e, i) => ( +
  • + {updates(`versions.1.0.1.features.${i}`)} +
    • + ))} +
+
+ + ) +} + +export default ContentUpdate2023 diff --git a/components/about/updates/ContentUpdate2024/index.tsx b/components/about/updates/ContentUpdate2024/index.tsx new file mode 100644 index 00000000..7765b055 --- /dev/null +++ b/components/about/updates/ContentUpdate2024/index.tsx @@ -0,0 +1,163 @@ +import React from 'react' +import { useTranslation } from 'next-i18next' +import ContentUpdate from '~components/about/ContentUpdate' + +const ContentUpdate2024 = () => { + const { t: updates } = useTranslation('updates') + + return ( + <> + + + + + + + + + + + + ) +} + +export default ContentUpdate2024