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

Configure Feed

Select the types of activity you want to include in your feed.

Add sessions page (#59)

authored by

Ghustvn and committed by
GitHub
6cba61ed e37adab1

+121 -1
+121 -1
src/pages/rewrite/seasons/[season_id]/sessions/[session_id].astro
··· 1 1 --- 2 2 import { type CollectionEntry, getCollection } from 'astro:content'; 3 + import MemberItem from '@/components/rewrite/MemberItem.astro'; 4 + import SeasonLayout from '@/components/rewrite/SeasonLayout.astro'; 5 + import VideoItem from '@/components/rewrite/VideoItem.astro'; 3 6 import BaseLayout from '@/layouts/rewrite/BaseLayout.astro'; 7 + import { isCurrentPage } from '@/utils/url'; 4 8 5 9 const { isRewrite } = Astro.locals; 6 10 if (!isRewrite) { ··· 49 53 const pageTitle = `Session ${sessionNumber} - ${season.data.title}`; 50 54 --- 51 55 52 - <BaseLayout title={pageTitle} /> 56 + <BaseLayout title={pageTitle}> 57 + <SeasonLayout season={season}> 58 + <Fragment slot="sidebar-title">Sessions</Fragment> 59 + <ol 60 + slot="sidebar-nav" 61 + role="list" 62 + aria-labelledby="sidebar-title" 63 + class="session-list" 64 + > 65 + { 66 + sessionNumbers.map((sessionNumber) => ( 67 + <li> 68 + <a 69 + class="session-item-link" href={`/rewrite/seasons/${season.id}/sessions/${sessionNumber}`} 70 + aria-current={isCurrentPage(Astro.url.pathname, `/rewrite/seasons/${season.id}/sessions/${sessionNumber}`)} 71 + > 72 + <span>Session {sessionNumber}</span> 73 + </a> 74 + </li> 75 + )) 76 + } 77 + </ol> 78 + <Fragment slot="main-title">Session {sessionNumber} - {season.data.title}</Fragment> 79 + <ul role="list" aria-labelledby="main-content" class="flow video-list"> 80 + {sessions.map((session) => Object.entries(session).map(([member, video]) => video && ( 81 + <li> 82 + <div class="cluster video-list-item-header"> 83 + <h2 id={member}> 84 + <MemberItem memberName={member} /> 85 + </h2> 86 + <a 87 + href={`/rewrite/seasons/${season.id}/${member}`} 88 + aria-describedby={member} 89 + > 90 + All sessions 91 + </a> 92 + </div> 93 + <VideoItem ytId={video.id} title={video.title} /> 94 + </li> 95 + )))} 96 + </ul> 97 + </SeasonLayout> 98 + </BaseLayout> 99 + 100 + <script> 101 + const currentPageLink = document.querySelector('[aria-current="page"]'); 102 + currentPageLink?.scrollIntoView({ block: 'center' }); 103 + </script> 104 + 105 + <style> 106 + .session-list { 107 + &:has(.session-item-link:focus-visible) .session-item-link:not(:focus-visible) { 108 + filter: grayscale(75%); 109 + opacity: 0.8; 110 + } 111 + 112 + @media (hover) { 113 + &:has(.session-item-link:hover) 114 + .session-item-link:not(:hover) { 115 + filter: grayscale(75%); 116 + opacity: 0.8; 117 + } 118 + } 119 + } 120 + 121 + .session-item-link { 122 + display: grid; 123 + justify-self: start; 124 + padding-block: 8px; 125 + text-decoration: none; 126 + transition-property: filter, opacity; 127 + transition-duration: 100ms; 128 + transition-timing-function: linear; 129 + 130 + &:focus-visible { 131 + outline: none; 132 + 133 + &:not([aria-current='page']) { 134 + translate: 8px; 135 + } 136 + 137 + > span { 138 + outline: 2px solid var(--color-canvas-text); 139 + outline-offset: 4px; 140 + } 141 + } 142 + 143 + @media (prefers-reduced-motion: no-preference) { 144 + transition: 145 + filter 100ms linear, 146 + opacity 100ms linear, 147 + translate var(--spring-transition-duration) var(--spring-transition-timing-function); 148 + } 149 + 150 + @media (hover) { 151 + &:hover:not([aria-current='page']) { 152 + translate: 8px; 153 + } 154 + } 155 + 156 + &[aria-current='page'] { 157 + translate: 12px; 158 + text-decoration-line: underline; 159 + text-decoration-style: wavy; 160 + font-weight: var(--font-weight-heading); 161 + } 162 + } 163 + 164 + .video-list { 165 + --flow-space: clamp(24px, -4.5714px + 8.9286cqi, 64px); 166 + margin-block-start: 16px; 167 + } 168 + 169 + .video-list-item-header { 170 + margin-block-end: 16px; 171 + } 172 + </style>