Non-official site for The Life Series Minecraft hardcore survival multiplayer series housing every video www.life-series.online

Attribution page, update video item icon (#64)

authored by ghustvn.com and committed by

GitHub 10ef7cdc b9b3765f

+89 -9
+3
src/components/rewrite/SiteFooter.astro
··· 5 5 <footer> 6 6 <div class="footer-inner"> 7 7 <div class="cluster"> 8 + <a href="/rewrite/attribution"> 9 + <span>Attribution</span> 10 + </a> 8 11 <a href="/sitemap-0.xml"> 9 12 <span>Sitemap</span> 10 13 </a>
+2 -2
src/components/rewrite/SiteHeader.astro
··· 5 5 import { getSeasonIconImage } from '@/utils/rewrite/images'; 6 6 7 7 interface Props { 8 - season: CollectionEntry<'seasonsRewrite'>; 8 + season?: CollectionEntry<'seasonsRewrite'>; 9 9 } 10 10 11 11 const { season } = Astro.props; ··· 17 17 <a href="/rewrite"> 18 18 <span class="cluster gap-text-icon"> 19 19 <Image 20 - src={getSeasonIconImage(season.id)} 20 + src={getSeasonIconImage(season?.id)} 21 21 alt="" 22 22 loading="eager" 23 23 width="64"
+1 -6
src/components/rewrite/VideoItem.astro
··· 11 11 12 12 <a href={`https://www.youtube.com/watch?v=${ytId}`}> 13 13 <span class="cluster gap-text-icon"> 14 - <Icon 15 - name="lucide:circle-play" 16 - title="Watch on YouTube" 17 - role="img" 18 - size="2em" 19 - /> 14 + <Icon name="lucide:arrow-up-right" role="img" title="Watch on YouTube" /> 20 15 <span>{title}</span> 21 16 </span> 22 17 </a>
+75
src/pages/rewrite/attribution.astro
··· 1 + --- 2 + import { Icon } from 'astro-icon/components'; 3 + import SiteFooter from '@/components/rewrite/SiteFooter.astro'; 4 + import SiteHeader from '@/components/rewrite/SiteHeader.astro'; 5 + import BaseLayout from '@/layouts/rewrite/BaseLayout.astro'; 6 + --- 7 + 8 + <BaseLayout title="Attribution"> 9 + <div class="wrapper"> 10 + <div class="site-header-wrapper"> 11 + <SiteHeader /> 12 + </div> 13 + <main> 14 + <div class="main-inner"> 15 + <h1>Attribution</h1> 16 + <p>Thanks to <a href="https://the-life-series.fandom.com/wiki/The_Life_Series_Wiki" rel="external" class="external-link">The Life Series Wiki <Icon name="lucide:arrow-up-right" aria-hidden="true" /></a> for providing assets for the season images and icons.</p> 17 + </div> 18 + </main> 19 + <div class="site-footer-wrapper"> 20 + <SiteFooter /> 21 + </div> 22 + </div> 23 + </BaseLayout> 24 + 25 + <style> 26 + .wrapper { 27 + max-inline-size: 1586px; 28 + margin-inline: auto; 29 + display: grid; 30 + grid-template-rows: auto 1fr auto; 31 + grid-template-columns: 1fr; 32 + min-height: 100svh; 33 + 34 + @media (width >= 48rem) { 35 + grid-template-columns: 250px 1fr; 36 + } 37 + } 38 + 39 + .site-header-wrapper, 40 + .site-footer-wrapper { 41 + @media (width >= 48rem) { 42 + grid-column: 2; 43 + } 44 + } 45 + 46 + main { 47 + container-type: inline-size; 48 + 49 + @media (width >= 48rem) { 50 + grid-column: 2; 51 + } 52 + } 53 + 54 + .main-inner { 55 + margin-inline: clamp(16px, 10.2857px + 1.7857vw, 24px); 56 + padding-top: clamp(16px, 10.2857px + 1.7857vw, 24px); 57 + padding-bottom: 10vh; 58 + max-width: 1080px; 59 + 60 + @media (width >= 48rem) { 61 + margin-inline: clamp(24px, -44.7367px + 8.9501vw, 128px); 62 + padding-top: clamp(24px, 12.8696px + 3.4783cqi, 80px); 63 + } 64 + } 65 + 66 + p { 67 + text-wrap: pretty; 68 + } 69 + 70 + .external-link { 71 + display: inline-flex; 72 + align-items: start; 73 + gap: 4px; 74 + } 75 + </style>
+8 -1
src/utils/rewrite/images.ts
··· 1 1 import type { ImageMetadata } from 'astro'; 2 2 3 - export async function getSeasonIconImage(season: string) { 3 + export async function getSeasonIconImage(season?: string) { 4 4 const seasonImages = import.meta.glob<{ default: ImageMetadata }>( 5 5 '/src/assets/rewrite/images/seasons/icons/*', 6 6 ); 7 + 8 + if (!season) { 9 + return seasonImages[ 10 + `/src/assets/rewrite/images/seasons/icons/3rd-life.webp` 11 + ](); 12 + } 13 + 7 14 return ( 8 15 seasonImages[ 9 16 `/src/assets/rewrite/images/seasons/icons/${season}.webp`