diff --git a/scripts/bak/build-data/release-notes.ts b/scripts/bak/build-data/release-notes.ts deleted file mode 100644 index fdbdc2de10c..00000000000 --- a/scripts/bak/build-data/release-notes.ts +++ /dev/null @@ -1,285 +0,0 @@ -import dotenv from 'dotenv'; -import { outputJson } from 'fs-extra'; -import fetch from 'node-fetch'; -import { resolve } from 'path'; -import semver from 'semver'; -import url from 'url'; - -import { convertHtmlToHypertextData } from '../build-pages/html-to-hypertext-data'; -import renderMarkdown from '../build-pages/markdown-renderer'; - -dotenv.config(); - -const OUTPUT_PATH = resolve( - __dirname, - '../../src/components/page/data/release-notes.json' -); - -export default { - title: 'Build Release Notes data', - task: async () => outputJson(OUTPUT_PATH, await getReleases(), { spaces: 2 }) -}; - -// Get the GitHub Releases from Ionic -// This requires an environment GITHUB_TOKEN -// otherwise it may fail silently -export const getReleases = async () => { - try { - const request = await fetch( - url.format({ - protocol: 'https', - hostname: 'api.github.com', - pathname: 'repos/ionic-team/ionic/releases' - }), { - headers: { - 'Authorization': process.env.GITHUB_TOKEN !== undefined ? `token ${process.env.GITHUB_TOKEN}` : '' - } - } - ); - - const releases = await request.json(); - - // Check that the response is an array in case it was - // successful but returned an object - if (Array.isArray(releases)) { - return releases.filter(release => { - const releasePattern = /^v(\d+)\.(\d+)\.(\d+)$/; - - // All non-prerelease, non-alpha, non-beta, non-rc release - return releasePattern.test(release.tag_name); - }).map(release => { - const body = parseMarkdown(release.body); - const published_at = parseDate(release.published_at); - const version = release.tag_name.replace('v', ''); - const type = getVersionType(version); - const symbol = getVersionSymbol(version); - const element = getVersionElement(version); - const { name, tag_name } = release; - - return { - body, - element, - name, - published_at, - symbol, - tag_name, - type, - version - }; - }).sort((a, b) => { - return -semver.compare(a.tag_name, b.tag_name); - }); - } else { - return []; - } - } catch (error) { - return []; - } -}; - -// Takes the date in format 2019-04-26T18:24:09Z -// and returns it as April 26 2019 -const parseDate = (datetime: string) => { - const date = new Date(datetime); - return date.toLocaleString('en-us', { month: 'long' }) + ' ' + date.getDate() + ' ' + date.getFullYear(); -}; - -const parseMarkdown = (content: any) => { - let html = renderMarkdown(content); - html = html.replace('Bug Fixes', 'Bug Fixes') - .replace('Features', 'Features'); - return convertHtmlToHypertextData(html); -}; - -// Given a version, return if it is a -// major, minor, or patch release -const getVersionType = (version: string) => { - const releasePattern = /^(\d+)\.(\d+)\.(\d+)$/; - - let type = 'patch'; - - if (!releasePattern.test(version)) { - type = 'prerelease'; - } else if (version.endsWith('.0.0')) { - type = 'major'; - } else if (version.endsWith('.0')) { - type = 'minor'; - } - - return type; -}; - -// Given a version, return its element symbol -const getVersionSymbol = (version: string) => { - const filteredVersions = versions.filter( - v => version.startsWith(`${v.minor}.`) - ); - filteredVersions.unshift(fallbackVersion); - - return filteredVersions[filteredVersions.length - 1].symbol; -}; - -// Given a version, return its element name -const getVersionElement = (version: string) => { - const filteredVersions = versions.filter( - v => version.startsWith(`${v.minor}.`) - ); - filteredVersions.unshift(fallbackVersion); - - return filteredVersions[filteredVersions.length - 1].element; -}; - -const versions = [ - { - 'minor': '4.0', - 'symbol': 'N', - 'element': 'Neutronium' - }, - { - 'minor': '4.1', - 'symbol': 'H', - 'element': 'Hydrogen' - }, - { - 'minor': '4.2', - 'symbol': 'He', - 'element': 'Helium' - }, - { - 'minor': '4.3', - 'symbol': 'Li', - 'element': 'Lithium' - }, - { - 'minor': '4.4', - 'symbol': 'Be', - 'element': 'Beryllium' - }, - { - 'minor': '4.5', - 'symbol': 'B', - 'element': 'Boron' - }, - { - 'minor': '4.6', - 'symbol': 'C', - 'element': 'Carbon' - }, - { - 'minor': '4.7', - 'symbol': 'N', - 'element': 'Nitrogen' - }, - { - 'minor': '4.8', - 'symbol': 'O', - 'element': 'Oxygen' - }, - { - 'minor': '4.9', - 'symbol': 'F', - 'element': 'Fluorine' - }, - { - 'minor': '4.10', - 'symbol': 'Ne', - 'element': 'Neon' - }, - { - 'minor': '4.11', - 'symbol': 'Na', - 'element': 'Sodium' - }, - { - 'minor': '5.0', - 'symbol': 'Mg', - 'element': 'Magnesium' - }, - { - 'minor': '5.1', - 'symbol': 'Al', - 'element': 'Aluminium' - }, - { - 'minor': '5.2', - 'symbol': 'Si', - 'element': 'Silicon' - }, - { - 'minor': '5.3', - 'symbol': 'P', - 'element': 'Phosphorus' - }, - { - 'minor': '5.4', - 'symbol': 'S', - 'element': 'Sulfur' - }, - { - 'minor': '5.5', - 'symbol': 'Cl', - 'element': 'Chlorine' - }, - { - 'minor': '5.6', - 'symbol': 'Ar', - 'element': 'Argon' - }, - { - 'minor': '5.7', - 'symbol': 'K', - 'element': 'Potassium' - }, - { - 'minor': '5.8', - 'symbol': 'Ca', - 'element': 'Calcium' - }, - { - 'minor': '5.9', - 'symbol': 'Sc', - 'element': 'Scandium' - }, - { - 'minor': '5.10', - 'symbol': 'Ti', - 'element': 'Titanium' - }, - { - 'minor': '5.11', - 'symbol': 'V', - 'element': 'Vanadium' - }, - { - 'minor': '5.12', - 'symbol': 'Cr', - 'element': 'Chromium' - }, - { - 'minor': '5.13', - 'symbol': 'Mn', - 'element': 'Manganese' - }, - { - 'minor': '5.14', - 'symbol': 'Fe', - 'element': 'Iron' - }, - { - 'minor': '5.15', - 'symbol': 'Co', - 'element': 'Cobalt' - }, - { - 'minor': '5.16', - 'symbol': 'Ni', - 'element': 'Nickel' - }, - { - 'minor': '5.17', - 'symbol': 'Cu', - 'element': 'Copper' - } -]; - -const fallbackVersion = { 'minor': '9201', 'symbol': 'Uo', 'element': 'Unobtainium' }; diff --git a/scripts/release-notes.js b/scripts/release-notes.js index 8680e864a07..22e5ca7335c 100644 --- a/scripts/release-notes.js +++ b/scripts/release-notes.js @@ -2,7 +2,7 @@ const { outputJson } = require('fs-extra'); const fetch = require('node-fetch'); const { resolve } = require('path'); const semver = require('semver'); -const url = require('url'); +const { URL } = require('url'); const { renderMarkdown } = require('./utils.js'); @@ -14,16 +14,17 @@ const OUTPUT_PATH = resolve(__dirname, '../src/components/page/reference/Release // }; // Get the GitHub Releases from Ionic -// This requires an environment GITHUB_TOKEN -// otherwise it may fail silently +// ------------------------------------------------------------------------------- +// This requires an environment GITHUB_TOKEN otherwise it may fail +// +// To add a GITHUB_TOKEN, follow the steps to create a personal access token: +// https://docs.github.com/en/enterprise-cloud@latest/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token +// and then authorize it to work with SSO: +// https://docs.github.com/en/enterprise-cloud@latest/authentication/authenticating-with-saml-single-sign-on/authorizing-a-personal-access-token-for-use-with-saml-single-sign-on const getReleases = async () => { try { const request = await fetch( - url.format({ - protocol: 'https', - hostname: 'api.github.com', - pathname: 'repos/ionic-team/ionic/releases', - }), + new URL('repos/ionic-team/ionic/releases', 'https://api.github.com'), { headers: { Authorization: process.env.GITHUB_TOKEN !== undefined ? `token ${process.env.GITHUB_TOKEN}` : '', @@ -44,20 +45,16 @@ const getReleases = async () => { return releasePattern.test(release.tag_name); }) .map((release) => { - const body = renderMarkdown(release.body).contents; + const body = renderMarkdown(release.body.replace(/^#.*/, '')).contents; const published_at = parseDate(release.published_at); const version = release.tag_name.replace('v', ''); const type = getVersionType(version); - const symbol = getVersionSymbol(version); - const element = getVersionElement(version); const { name, tag_name } = release; return { body, - element, name, published_at, - symbol, tag_name, type, version, @@ -67,6 +64,7 @@ const getReleases = async () => { return -semver.compare(a.tag_name, b.tag_name); }); } else { + console.error("There was an issue getting releases:", releases); return []; } } catch (error) { @@ -99,172 +97,6 @@ function getVersionType(version) { return type; } -// Given a version, return its element symbol -function getVersionSymbol(version) { - const filteredVersions = versions.filter((v) => version.startsWith(`${v.minor}.`)); - filteredVersions.unshift(fallbackVersion); - - return filteredVersions[filteredVersions.length - 1].symbol; -} - -// Given a version, return its element name -function getVersionElement(version) { - const filteredVersions = versions.filter((v) => version.startsWith(`${v.minor}.`)); - filteredVersions.unshift(fallbackVersion); - - return filteredVersions[filteredVersions.length - 1].element; -} - -var versions = [ - { - minor: '4.0', - symbol: 'N', - element: 'Neutronium', - }, - { - minor: '4.1', - symbol: 'H', - element: 'Hydrogen', - }, - { - minor: '4.2', - symbol: 'He', - element: 'Helium', - }, - { - minor: '4.3', - symbol: 'Li', - element: 'Lithium', - }, - { - minor: '4.4', - symbol: 'Be', - element: 'Beryllium', - }, - { - minor: '4.5', - symbol: 'B', - element: 'Boron', - }, - { - minor: '4.6', - symbol: 'C', - element: 'Carbon', - }, - { - minor: '4.7', - symbol: 'N', - element: 'Nitrogen', - }, - { - minor: '4.8', - symbol: 'O', - element: 'Oxygen', - }, - { - minor: '4.9', - symbol: 'F', - element: 'Fluorine', - }, - { - minor: '4.10', - symbol: 'Ne', - element: 'Neon', - }, - { - minor: '4.11', - symbol: 'Na', - element: 'Sodium', - }, - { - minor: '5.0', - symbol: 'Mg', - element: 'Magnesium', - }, - { - minor: '5.1', - symbol: 'Al', - element: 'Aluminium', - }, - { - minor: '5.2', - symbol: 'Si', - element: 'Silicon', - }, - { - minor: '5.3', - symbol: 'P', - element: 'Phosphorus', - }, - { - minor: '5.4', - symbol: 'S', - element: 'Sulfur', - }, - { - minor: '5.5', - symbol: 'Cl', - element: 'Chlorine', - }, - { - minor: '5.6', - symbol: 'Ar', - element: 'Argon', - }, - { - minor: '5.7', - symbol: 'K', - element: 'Potassium', - }, - { - minor: '5.8', - symbol: 'Ca', - element: 'Calcium', - }, - { - minor: '5.9', - symbol: 'Sc', - element: 'Scandium', - }, - { - minor: '6.0', - symbol: 'Ti', - element: 'Titanium', - }, - { - minor: '6.1', - symbol: 'V', - element: 'Vanadium', - }, - { - minor: '6.2', - symbol: 'Cr', - element: 'Chromium' - }, - { - minor: '6.3', - symbol: 'Mn', - element: 'Manganese' - }, - { - minor: '6.4', - symbol: 'Fe', - element: 'Iron' - }, - { - minor: '6.5', - symbol: 'Co', - element: 'Cobalt' - }, - { - minor: '6.6', - symbol: 'Ni', - element: 'Nickel' - } -]; - -var fallbackVersion = { minor: '9201', symbol: 'Uo', element: 'Unobtainium' }; - async function run() { outputJson(OUTPUT_PATH, await getReleases(), { spaces: 2 }); } diff --git a/src/components/page/reference/ReleaseNotes/index.tsx b/src/components/page/reference/ReleaseNotes/index.tsx index dc89bdfc1e0..c1402d63d1c 100644 --- a/src/components/page/reference/ReleaseNotes/index.tsx +++ b/src/components/page/reference/ReleaseNotes/index.tsx @@ -6,10 +6,8 @@ import styles from './styles.module.css'; interface Release { body: string; - element: string; name: string; published_at: string; - symbol: string; tag_name: string; type: string; version: string; @@ -17,6 +15,14 @@ interface Release { export default function ReleaseNotes(props: { [key: string]: any }) { if (releases.length === 0) { + console.warn(`Could not load release notes data. Make sure that you have a valid GITHUB_TOKEN. + +Create a personal access token by following the below guide: +https://docs.github.com/en/enterprise-cloud@latest/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token + +and then authorize it to work with SSO: +https://docs.github.com/en/enterprise-cloud@latest/authentication/authenticating-with-saml-single-sign-on/authorizing-a-personal-access-token-for-use-with-saml-single-sign-on`); + return [

Unable to load Releases. Please see all releases{' '} @@ -45,21 +51,13 @@ export default function ReleaseNotes(props: { [key: string]: any }) {

{releases.map((release: Release, index) => (
-
-

- - {release.symbol} - {release.version} - -

-
-
-

- {release.version} - {release.type !== 'patch' ? ' ' + release.element : null} -

+ +

+ {release.version} +

+ {release.type} {index === 0 ? ( @@ -89,10 +87,3 @@ export default function ReleaseNotes(props: { [key: string]: any }) { ); } - -const getReleaseClasses = (release: any) => { - return { - 'release-note': true, - [`release-note-${release.type}`]: true, - }; -}; diff --git a/src/components/page/reference/ReleaseNotes/styles.module.css b/src/components/page/reference/ReleaseNotes/styles.module.css index d7e41ee6a05..8da51d36c74 100644 --- a/src/components/page/reference/ReleaseNotes/styles.module.css +++ b/src/components/page/reference/ReleaseNotes/styles.module.css @@ -13,6 +13,7 @@ --accent-color-800: #e3edff; --accent-color-900: #f0f6ff; --background: var(--token-primary-bg-c); + --color: var(--ifm-font-color-base); --code-font-family: 'SFMono-Regular', 'Roboto Mono', Consolas, 'Liberation Mono', Menlo, Courier, monospace; } @@ -24,7 +25,6 @@ position: relative; display: flex; - align-items: top; padding-bottom: 80px; } @@ -83,7 +83,7 @@ } .release-header .release-version { - font-weight: 500; + font-weight: 700; } .release-published h3 { @@ -92,7 +92,8 @@ font-weight: 300; margin-top: 4px; - color: #4e5b6a; + margin-bottom: 32px; + color: var(--ifm-secondary-heading-color, #4e5b6a); } .release-badge { @@ -118,15 +119,15 @@ } .release-note-major .release-badge { - background: var(--text-color--dark); - border-color: var(--text-color--dark); - color: white; + background: var(--color, #04060b); + border-color: var(--color, #04060b); + color: var(--background, #fff); } .release-note-minor .release-badge { background: #b2becd; border-color: #b2becd; - color: white; + color: var(--background, #fff); } .release-badge.release-badge-latest { @@ -135,87 +136,6 @@ border-color: #43c465; } -/* - * Release Note Element Tag - * -------------------------------------------------------- - */ - -.release-tag-wrapper h2 { - font-size: 15px; - - margin-right: 30px; -} - -.release-note-patch .release-tag-wrapper:after { - content: ''; - background-image: linear-gradient(to bottom, #ebf0f6, #ebf0f6); - width: 2px; - position: absolute; - top: 0; - bottom: 0; - left: calc((65px / 2) - 1px); - z-index: -1; -} - -.release-tag { - line-height: 200%; - color: var(--accent-color-200); - - padding: 6px 12px; - display: inline-block; - text-align: center; - font-weight: 600; - border-radius: 16px; - width: 64px; - height: 64px; - - background: var(--background); - color: var(--accent-color-200); - - border: 2px solid var(--accent-color-200); - - line-height: normal; - - transition: background 0.2s ease-out; -} - -html[data-theme='light'] .release-tag:hover { - background: var(--accent-color-800); -} - -html[data-theme='dark'] .release-tag:hover { - background: var(--accent-color-100); -} - -.release-note-major .release-tag, -.release-note-minor .release-tag { - background: var(--accent-color-200); - color: #fff; -} - -.release-note-major:hover .release-tag, -.release-note-minor:hover .release-tag { - background: var(--accent-color-100); -} - -.release-tag .release-symbol { - font-family: var(--font-family); - font-weight: 300; - - display: block; - - font-size: 24px; - - margin-top: 3px; - margin-bottom: -7px; -} - -.release-tag .release-version { - font-family: var(--code-font-family); - font-size: 10px; - letter-spacing: -0.08em; -} - /* * Release Note Blockquote * -------------------------------------------------------- diff --git a/src/styles/custom.scss b/src/styles/custom.scss index 5c4bed43489..ff779adfd82 100644 --- a/src/styles/custom.scss +++ b/src/styles/custom.scss @@ -57,6 +57,8 @@ html[data-theme='light'] { --ifm-navbar-shadow: 0 1px 0 0 var(--c-gray-0); --ifm-heading-color: var(--c-carbon-100); + --ifm-secondary-heading-color: var(--c-carbon-300); + --ifm-code-background: var(--c-indigo-10); --ifm-font-color-base: var(--c-carbon-90); } @@ -75,6 +77,8 @@ html[data-theme='dark'] { --ifm-navbar-shadow: 0 1px 0 0 var(--c-gray-90); --ifm-heading-color: #fff; + --ifm-secondary-heading-color: #f6f6f6; + --ifm-font-color-base: var(--c-carbon-10); --ifm-background-color: var(--token-primary-bg-c); --ifm-dropdown-background-color: var(--token-secondary-bg-c);