From de0b2758c63bd62a09db2c95649ebe9feb930ec4 Mon Sep 17 00:00:00 2001 From: Brian Zelip Date: Mon, 27 Jan 2025 09:04:02 -0500 Subject: [PATCH 1/2] TD-31 Add Starlight Header and MobileMenuFooter components --- src/components/overrides/Header.astro | 101 ++++++++++++++++++ .../overrides/MobileMenuFooter.astro | 33 ++++++ 2 files changed, 134 insertions(+) create mode 100644 src/components/overrides/Header.astro create mode 100644 src/components/overrides/MobileMenuFooter.astro diff --git a/src/components/overrides/Header.astro b/src/components/overrides/Header.astro new file mode 100644 index 00000000..7a1fc8f2 --- /dev/null +++ b/src/components/overrides/Header.astro @@ -0,0 +1,101 @@ +--- +import config from 'virtual:starlight/user-config' +import type { Props } from '../props' + +import LanguageSelect from 'virtual:starlight/components/LanguageSelect' +import Search from 'virtual:starlight/components/Search' +import SiteTitle from 'virtual:starlight/components/SiteTitle' +import SocialIcons from 'virtual:starlight/components/SocialIcons' +import ThemeSelect from 'virtual:starlight/components/ThemeSelect' + +/** + * Render the `Search` component if Pagefind is enabled or the default search component has been overridden. + */ +const shouldRenderSearch = + config.pagefind || + config.components.Search !== '@astrojs/starlight/components/Search.astro' +--- + +
+
+ +
+
+ {shouldRenderSearch && } +
+
+ + + +
+
+ + diff --git a/src/components/overrides/MobileMenuFooter.astro b/src/components/overrides/MobileMenuFooter.astro new file mode 100644 index 00000000..a7f519f3 --- /dev/null +++ b/src/components/overrides/MobileMenuFooter.astro @@ -0,0 +1,33 @@ +--- +import LanguageSelect from 'virtual:starlight/components/LanguageSelect' +import SocialIcons from 'virtual:starlight/components/SocialIcons' +import ThemeSelect from 'virtual:starlight/components/ThemeSelect' +import type { Props } from '../props' +--- + +
+ + + +
+ + From c20627806bad46d9563cf738c9bee6826928c836 Mon Sep 17 00:00:00 2001 From: Brian Zelip Date: Mon, 27 Jan 2025 09:16:24 -0500 Subject: [PATCH 2/2] TD-31 Add dynamic latest release badge to header and mobile menu --- astro.config.mjs | 2 + cypress/e2e/release-badge.cy.js | 38 +++++++++++++++++++ src/components/ReleaseBadge.astro | 28 ++++++++++++++ src/components/overrides/Header.astro | 16 +++++--- .../overrides/MobileMenuFooter.astro | 12 ++++-- src/utils/gitMetadata.mjs | 4 +- 6 files changed, 88 insertions(+), 12 deletions(-) create mode 100644 cypress/e2e/release-badge.cy.js create mode 100644 src/components/ReleaseBadge.astro diff --git a/astro.config.mjs b/astro.config.mjs index 85bd53eb..6765e82b 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -27,6 +27,8 @@ export default defineConfig({ tableOfContents: { minHeadingLevel: 2, maxHeadingLevel: 4 }, components: { Footer: './src/components/overrides/Footer.astro', + Header: './src/components/overrides/Header.astro', + MobileMenuFooter: './src/components/overrides/MobileMenuFooter.astro', Sidebar: './src/components/overrides/Sidebar.astro', SocialIcons: './src/components/overrides/SocialIcons.astro' } diff --git a/cypress/e2e/release-badge.cy.js b/cypress/e2e/release-badge.cy.js new file mode 100644 index 00000000..e9cf6c2b --- /dev/null +++ b/cypress/e2e/release-badge.cy.js @@ -0,0 +1,38 @@ +const releaseUrl = + 'https://github.com/archivesspace/archivesspace/releases/latest' +const title = 'Go to the latest ArchivesSpace release' +const badgeSrc = `https://img.shields.io/github/v/release/archivesspace/archivesspace?label=ArchivesSpace&color=007595` +const altText = 'The latest ArchivesSpace release version' + +describe('Release Badge', () => { + it('displays the release badge with the correct data in the header on desktop', () => { + cy.visit('/') + cy.get( + '.page > header:first-child > div:first-child > div:nth-child(3) > a:first-child' + ) + .should('have.attr', 'href', releaseUrl) + .should('have.attr', 'title', title) + .within(() => { + cy.get('img') + .should('have.attr', 'src', badgeSrc) + .should('have.attr', 'alt', altText) + }) + }) + + it( + 'displays the release badge with the correct data in the mobile menu footer', + { viewportWidth: 400 }, + () => { + cy.visit('/') + cy.get('button[aria-label="Menu"]').click() + cy.get('#starlight__sidebar .mobile-preferences > a:first-child') + .should('have.attr', 'href', releaseUrl) + .should('have.attr', 'title', title) + .within(() => { + cy.get('img') + .should('have.attr', 'src', badgeSrc) + .should('have.attr', 'alt', altText) + }) + } + ) +}) diff --git a/src/components/ReleaseBadge.astro b/src/components/ReleaseBadge.astro new file mode 100644 index 00000000..c1f8ac95 --- /dev/null +++ b/src/components/ReleaseBadge.astro @@ -0,0 +1,28 @@ +--- +const releaseUrl = + 'https://github.com/archivesspace/archivesspace/releases/latest' +const label = 'ArchivesSpace' +const color = '007595' // dark `--sl-color-accent` via custom.css +const badgeSrc = `https://img.shields.io/github/v/release/archivesspace/archivesspace?label=${label}&color=${color}` +const altText = 'The latest ArchivesSpace release version' +const title = 'Go to the latest ArchivesSpace release' +--- + + + {altText} + + + diff --git a/src/components/overrides/Header.astro b/src/components/overrides/Header.astro index 7a1fc8f2..2235b117 100644 --- a/src/components/overrides/Header.astro +++ b/src/components/overrides/Header.astro @@ -1,12 +1,15 @@ --- +// Via https://github.com/withastro/starlight/blob/23bf960aed36445600b6ccecb2138a5b461e2929/packages/starlight/components/Header.astro + import config from 'virtual:starlight/user-config' -import type { Props } from '../props' +import type { Props } from '@astrojs/starlight/props' -import LanguageSelect from 'virtual:starlight/components/LanguageSelect' -import Search from 'virtual:starlight/components/Search' -import SiteTitle from 'virtual:starlight/components/SiteTitle' -import SocialIcons from 'virtual:starlight/components/SocialIcons' -import ThemeSelect from 'virtual:starlight/components/ThemeSelect' +import LanguageSelect from '@astrojs/starlight/components/LanguageSelect.astro' +import Search from '@astrojs/starlight/components/Search.astro' +import SiteTitle from '@astrojs/starlight/components/SiteTitle.astro' +import ReleaseBadge from '../ReleaseBadge.astro' +import SocialIcons from './SocialIcons.astro' +import ThemeSelect from '@astrojs/starlight/components/ThemeSelect.astro' /** * Render the `Search` component if Pagefind is enabled or the default search component has been overridden. @@ -24,6 +27,7 @@ const shouldRenderSearch = {shouldRenderSearch && }
+ diff --git a/src/components/overrides/MobileMenuFooter.astro b/src/components/overrides/MobileMenuFooter.astro index a7f519f3..47675b08 100644 --- a/src/components/overrides/MobileMenuFooter.astro +++ b/src/components/overrides/MobileMenuFooter.astro @@ -1,11 +1,15 @@ --- -import LanguageSelect from 'virtual:starlight/components/LanguageSelect' -import SocialIcons from 'virtual:starlight/components/SocialIcons' -import ThemeSelect from 'virtual:starlight/components/ThemeSelect' -import type { Props } from '../props' +// Via https://github.com/withastro/starlight/blob/490c6eff34ab408c4f55777b7b0caa16787dd3d4/packages/starlight/components/MobileMenuFooter.astro + +import type { Props } from '@astrojs/starlight/props' +import LanguageSelect from '@astrojs/starlight/components/LanguageSelect.astro' +import ReleaseBadge from '../ReleaseBadge.astro' +import SocialIcons from './SocialIcons.astro' +import ThemeSelect from '@astrojs/starlight/components/ThemeSelect.astro' ---
+ diff --git a/src/utils/gitMetadata.mjs b/src/utils/gitMetadata.mjs index 5662d348..41020958 100644 --- a/src/utils/gitMetadata.mjs +++ b/src/utils/gitMetadata.mjs @@ -1,5 +1,5 @@ -import { exec } from 'child_process' -import { promisify } from 'util' +import { exec } from 'node:child_process' +import { promisify } from 'node:util' const execPromise = promisify(exec)