@master/internal-site 0.1.0 → 0.1.1

package/README.md

@@ -23,6 +23,8 @@ export default defineConfig({ integrations: [masterSite(site)] })
 
 `site.config.ts` exports `defineSite(...)` from `@master/internal-site/config`. It declares the site's origin, content directory, app module, locale policy and section module URLs. Optional document layouts, category sources, styles and a server-only highlighter are also URLs. Keep route content lazy: do not import a complete page or specimen catalog into the configuration.
 
+Optional `header.communityNavs` selects the links shown beside search without removing community links from the compact menu or footer. Set `header.searchOnHome` to show search in the desktop homepage header. When available, the language switch follows the community links and a divider.
+
 The app module exports its logo component, navigation, version links and source/feedback URLs using the `SiteApp` contract. Consumers retain their own content and homepage composition. Ordinary documents use `content/<section>/<slug>/content.mdx` and `metadata.ts`; a local `page.astro` can override the generated entry. Dynamic routes enumerate params from lightweight `params.ts` files. The integration owns generated routes, page asset collection and the Astro/Svelte renderer setup.
 
 ```css

package/dist/config.d.mts

@@ -13,6 +13,11 @@ export interface SiteApp {
   Logotype: Component<any>;
   navs: AppNavItem[];
   communityNavs?: AppNavItem[];
+  /** Header controls can be quieter than the full community menu and footer. */
+  header?: {
+    communityNavs?: AppNavItem[];
+    searchOnHome?: boolean;
+  };
   sourceBaseURL?: string;
   feedbackURL?: string;
   versions: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@master/internal-site",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "description": "First-party Astro and Svelte website framework for Master sites.",
   "engines": {

package/src/config.ts

@@ -15,6 +15,8 @@ export interface SiteApp {
   Logotype: Component<any>
   navs: AppNavItem[]
   communityNavs?: AppNavItem[]
+  /** Header controls can be quieter than the full community menu and footer. */
+  header?: { communityNavs?: AppNavItem[], searchOnHome?: boolean }
   sourceBaseURL?: string
   feedbackURL?: string
   versions: { name: string, href: string }[]

package/src/docs-shell/components/DocHeader.svelte

@@ -21,6 +21,7 @@
   import HeaderNav from './HeaderNav.svelte'
   import LanguageButton from './LanguageButton.svelte'
   import IconChevronDown from '@tabler/icons-svelte-runes/icons/chevron-down'
+  import IconArrowUpRight from '@tabler/icons-svelte-runes/icons/arrow-up-right'
   import IconSearch from '@tabler/icons-svelte-runes/icons/search'
   import DocVersionSelect from './DocVersionSelect.svelte'
   import Link from './Link.svelte'
@@ -31,9 +32,11 @@
   import { getSite } from '../site'
 
   let { class: className, stickable, transitionAtTop, documentNavigation, documentNavigationTitle }: DocHeaderProps = $props()
-  const { t, locale, pathname } = getSite()
+  const { t, locale, pathname, i18n } = getSite()
   const tw = locale === 'tw'
   const home = pathname === (tw ? '/tw' : '/')
+  const headerCommunityNavs = app.header?.communityNavs ?? app.communityNavs ?? []
+  const showLanguage = i18n.locales.length > 1
   const version = import.meta.env.PUBLIC_VERSION ? `v${import.meta.env.PUBLIC_VERSION}` : ''
 </script>
 
@@ -60,13 +63,13 @@
       {#if eachLink.date && isDateWithinSevenDays(eachLink.date)}<small>{t('New')}</small>{/if}
     </HeaderNav>{/each}
   </nav>
-  <div class="ui-header-end">
-    <!-- Search leads the end group as a quiet pill: the glass and its shortcut. The homepage leaves it to the compact header. -->
-    <SearchButton class="ui-header-search" data-compact={home ? '' : undefined}>
+  <div class="ui-header-end" data-home-controls={app.header?.searchOnHome ? 'full' : undefined}>
+    <!-- Search leads the end group as a quiet pill: the glass and its shortcut. Homepages may opt into the same desktop search control. -->
+    <SearchButton class="ui-header-search" data-compact={home && !app.header?.searchOnHome ? '' : undefined}>
       <IconSearch size={16} stroke={1.5} aria-hidden="true" />
       <kbd class="ui-kbd" aria-hidden="true">⌘K</kbd>
     </SearchButton>
-    {#each app.communityNavs ?? [] as { Icon, disabled, fullName, ...eachLink } (eachLink.name)}
+    {#each headerCommunityNavs as { Icon, disabled, fullName, ...eachLink } (eachLink.name)}
       <Link
         {...eachLink}
         aria-label={fullName || eachLink.name}
@@ -78,10 +81,13 @@
         {disabled}
       >
         {#if Icon}<Icon size={18} stroke={1.5} aria-hidden="true" />{/if}
+        {#if eachLink.href?.startsWith('http')}<IconArrowUpRight class="ui-header-external" size={10} stroke={1.5} aria-hidden="true" />{/if}
         <span class="ui-tooltip" data-side="bottom" aria-hidden="true">{fullName || eachLink.name}</span>
       </Link>
     {/each}
-    {#if app.communityNavs?.length}<span class="ui-header-divider" aria-hidden="true"></span>{/if}
-    <LanguageButton />
+    {#if showLanguage}
+      {#if headerCommunityNavs.length}<span class="ui-header-divider" aria-hidden="true"></span>{/if}
+      <LanguageButton />
+    {/if}
   </div>
 </Header>

package/src/docs-shell/components/DocMenuButton.svelte

@@ -72,6 +72,7 @@
       <nav class="ui-nav-group" aria-label={tw ? '主要導覽' : 'Main navigation'}>
         {#each app.navs as { Icon, disabled, fullName, ...link } (link.name)}<Link class="ui-nav-link" current="true" ambiguous {...link} {disabled} onclick={close}>
           {#if Icon}<Icon size={18} stroke={1.5} aria-hidden="true" />{/if}{t(fullName || link.name)}
+          {#if link.href?.startsWith('http')}<IconArrowUpRight size={14} stroke={1.5} aria-hidden="true" />{/if}
         </Link>{/each}
       </nav>
       {#if documentNavigation?.length}<details class="ui-disclosure" data-variant="rule" open>

package/src/docs-shell/components/HeaderNav.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte'
+  import IconArrowUpRight from '@tabler/icons-svelte-runes/icons/arrow-up-right'
   import Link from './Link.svelte'
 
   interface Props {
@@ -15,4 +16,5 @@
 
 <Link {...props} current="true" ambiguous>
   {@render children?.()}
+  {#if props.href?.startsWith('http')}<IconArrowUpRight class="ui-header-external" size={10} stroke={1.5} aria-hidden="true" />{/if}
 </Link>

package/src/home/home.css

@@ -81,10 +81,14 @@
     max-width: 95rem;
   }
 
-  .home-header[data-background="transparent"] :is(.ui-header-nav, .ui-header-end > :not(a[aria-label="GitHub"])) {
+  .home-header[data-background="transparent"] :is(.ui-header-nav, .ui-header-end:not([data-home-controls="full"]) > :not(a[aria-label="GitHub"])) {
     display: none;
   }
 
+  @media (width < 64rem) {
+    .home-header[data-background="transparent"] .ui-header-end > :not(a[aria-label="GitHub"]) { display: none; }
+  }
+
   /* The compact header keeps the brand centred: GitHub takes the search button's end, as wide as the menu button. */
   .home-header[data-background="transparent"] .ui-header-end {
     justify-content: flex-end;

package/src/styles/docs-shell/docs.css

@@ -62,12 +62,12 @@
   .ui-pager > a { min-width: 0; overflow-wrap: anywhere; }
 
   /* The contents rail stands still beside the article; a long list scrolls inside it. */
-  :is(.ui-docs-body > .ui-toc, .ui-docs-body > site-island > .ui-toc) {
+  :is(.ui-docs-body > .ui-toc, .ui-docs-body > astro-island > .ui-toc) {
     position: sticky; top: var(--docs-header); display: flex; flex: none; flex-direction: column; align-self: start; width: var(--docs-rail); max-height: calc(100dvh - var(--docs-header));
     padding: 3.5rem var(--ui-space-lg) var(--ui-space-xl) 0;
   }
-  :is(.ui-docs-body > .ui-toc, .ui-docs-body > site-island > .ui-toc) > ol { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
-  @media (width < 80rem) { :is(.ui-docs-body > .ui-toc, .ui-docs-body > site-island > .ui-toc) { display: none; } }
+  :is(.ui-docs-body > .ui-toc, .ui-docs-body > astro-island > .ui-toc) > ol { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
+  @media (width < 80rem) { :is(.ui-docs-body > .ui-toc, .ui-docs-body > astro-island > .ui-toc) { display: none; } }
   @container docs-main (width < 48rem) { .ui-toc[data-rail] { display: none; } }
 
   @media print {

package/src/styles/docs-shell/header.css

@@ -22,6 +22,10 @@
   .ui-header .ui-version > svg { width: 12px; height: 12px; color: var(--ui-text-muted); }
   .ui-header .ui-version:hover { color: var(--ui-text-strong); }
   .ui-header-nav > a > .ui-badge { margin-left: var(--ui-space-2xs); }
+  /* External destinations carry a small raised arrow beside the label or icon. */
+  .ui-header-nav > a:has(.ui-header-external) { position: relative; padding-right: 1.125rem; }
+  .ui-header-nav > a > .ui-header-external, .ui-header-end > .ui-button > .ui-header-external { position: absolute; top: .375rem; right: .125rem; width: .625rem; height: .625rem; pointer-events: none; }
+  .ui-header-end > .ui-button > .ui-header-external { top: .125rem; right: 0; }
   .ui-header-end > .ui-button[data-disabled] { color: var(--ui-text-disabled); pointer-events: none; }
   /* The community and preference icons are words in the bar, not buttons: ink under the pointer, no material. */
   .ui-header-end > .ui-button[data-shape="icon"] { width: 2.25rem; min-height: 2.25rem; }