SheetReferences.astro (4449B)
1 --- 2 /** 3 * "Sources & further reading" plate for a sheet with secondary provenance. 4 * 5 * SheetCredit carries the one upstream a sheet *is* derived from, and sits 6 * above the article as a header banner. This carries the sources a sheet 7 * merely draws on — one row each — and sits at the foot, where a reader who 8 * has finished the page is looking for where to go next. 9 * 10 * Licence wording is deliberately the same mapping SheetCredit uses. Two 11 * panels describing the same upstream in different words is how a site ends 12 * up implying a grant that does not exist, so `none` reads "no licence 13 * published" in both places or in neither. 14 */ 15 import Icon from './Icon.astro'; 16 import { url } from '../lib/url'; 17 18 interface Reference { 19 name: string; 20 url: string; 21 author?: string; 22 license?: string; 23 relation?: string; 24 note?: string; 25 } 26 interface Props { 27 references?: Reference[]; 28 } 29 const { references = [] } = Astro.props; 30 31 const BADGE: Record<string, string> = { 32 verbatim: 'mirror', 33 derived: 'derived', 34 inspired: 'inspired', 35 'link-only': 'link', 36 }; 37 38 function licenceLabel(license?: string): string | null { 39 if (!license) return null; 40 if (license === 'none') return 'no licence published'; 41 if (license === 'proprietary') return 'proprietary — all rights reserved'; 42 return license; 43 } 44 --- 45 {references.length > 0 && ( 46 <aside class="refs plate corners" aria-labelledby="refs-heading"> 47 <p class="micro refs__label" id="refs-heading">// sources & further reading</p> 48 <ul class="refs__list"> 49 {references.map((ref) => ( 50 <li class="refs__item"> 51 <span class="patt-badge refs__badge">{BADGE[ref.relation ?? ''] ?? 'credit'}</span> 52 <span class="refs__body"> 53 <a class="refs__name" href={ref.url} target="_blank" rel="noopener">{ref.name}</a> 54 {ref.author && <span class="refs__author"> by <strong>{ref.author}</strong></span>} 55 {ref.note && <span class="refs__note">{ref.note}</span>} 56 {licenceLabel(ref.license) && ( 57 <span class="refs__lic">{licenceLabel(ref.license)}</span> 58 )} 59 </span> 60 </li> 61 ))} 62 </ul> 63 <p class="refs__foot"> 64 <Icon name="github" style="width:13px;height:13px;" /> 65 Upstream repositories remain canonical — corrections belong there. 66 <a href={url('credits')}>Full credits & licences</a> 67 </p> 68 </aside> 69 )} 70 71 <style> 72 /* Same object as the credit banner above the article (SheetCredit) and the 73 provenance slabs on /credits: square plate, corner brackets, left accent 74 bar, provenance metadata set in the terminal font at micro-label size. 75 Unlike SheetCredit this one does NOT pin its palette — it reads as part 76 of the page it closes, not as a foreign notice pasted on top. */ 77 .refs { 78 margin: 2.5rem 0 0; 79 padding: 1rem 1.2rem 1.1rem; 80 border-left: 2px solid var(--iris); 81 --bracket: var(--iris); 82 } 83 .refs__label { color: var(--fg-faint); margin: 0 0 0.75rem; } 84 .refs__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; } 85 .refs__item { display: flex; align-items: flex-start; gap: 0.7rem; margin: 0; } 86 .refs__badge { flex: none; margin-top: 0.1rem; color: var(--iris); border-color: color-mix(in oklab, var(--iris) 50%, transparent); } 87 .refs__body { display: block; min-width: 0; } 88 .refs__name { font-weight: 600; } 89 .refs__author { color: var(--fg-dim); } 90 /* Note and licence each take their own line so a long `note` cannot shove 91 the licence off the end of a phone-width row, where it is the one part 92 that must not be missed. */ 93 .refs__note, 94 .refs__lic { 95 display: block; 96 color: var(--fg-dim); 97 font-size: var(--step--1, 0.9em); 98 } 99 .refs__lic { 100 color: var(--fg-faint); 101 font-family: var(--font-term, 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace); 102 font-size: var(--step-micro); 103 letter-spacing: var(--track-micro); 104 text-transform: uppercase; 105 margin-top: 0.2rem; 106 } 107 .refs__foot { 108 display: flex; 109 align-items: center; 110 gap: 0.45rem; 111 flex-wrap: wrap; 112 margin: 0.95rem 0 0; 113 padding-top: 0.7rem; 114 border-top: 1px solid var(--rule); 115 color: var(--fg-faint); 116 font-family: var(--font-term, 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace); 117 font-size: var(--step-micro); 118 letter-spacing: var(--track-micro); 119 text-transform: uppercase; 120 } 121 </style>