www/src/components/ReleaseNoteItem.astro
mr. M a594d343b4
Some checks are pending
Upload to bunny / upload (1.22.3) (push) Waiting to run
feat: update styles and components for theme support; add FontAwesome icons
2024-12-09 00:30:05 +01:00

106 lines
3.4 KiB
Text

---
import { Accordion, AccordionItem } from 'free-astro-components'
import type { ReleaseNote } from '../release-notes'
export type Props = ReleaseNote;
const props = Astro.props;
const [day, month, year] = props.date.split('/');
const date = new Date(Date.parse(`${year}-${month}-${day}`));
---
<section
class="relative mt-24 flex flex-col border-t border-dark/30 pt-24 lg:flex-row"
id={props.version}
>
<div class="mb-0 hidden lg:block ml-5 md:ml-10 mr-24 mt-1 h-fit min-w-52 text-xs text-muted-foreground">
{date.toLocaleDateString('en-US', { dateStyle: 'long'})}
<div class="mt-2 flex items-center">
<a rel="noopener noreferrer" class="whitespace-nowrap text-sm text-blue-500 opacity-60" target="_blank" href={`https://github.com/zen-browser/desktop/releases/tag/${props.version}`}>Github Release<a/>
<span class="text-muted-foreground mx-auto">•</span>
<a rel="noopener noreferrer" class="whitespace-nowrap text-sm text-blue-500 opacity-60" target="_blank" href={`https://github.com/zen-browser/desktop/actions/runs/${props.workflowId}`}>Workflow run<a/>
</div>
</div>
<div class="px-5 md:px-10 md:pr-32">
<h1 class="text-3xl font-bold">Release notes for {props.version} 🎉</h1>
<p class="mt-8 text-lg text-muted-forground">
If you encounter any issues, please report them on <a rel="noopener noreferrer" target="_blank" href="https://github.com/zen-browser/desktop/issues/" class="text-underline text-blue-500">the issues page</a>. Thanks everyone for your feedback! ❤️
</p>
{props.extra ? (
<p class="text-md mt-8 text-muted-foreground">
{props.extra}
</p>
) : null
}
<div class="mt-8" data-orientation="vertical"></div>
<Accordion>
{props.fixes ? (
<AccordionItem title="Fixes" name="fixes">
<ul class="list-disc list-inside">
{props.fixes.map((fix: any) => (
<li class="text-md text-muted-foreground">
{fix.description}
{fix.issue ? (
<a
class="text-blue-500"
href={`https://github.com/zen-browser/desktop/issues/${fix.issue}`}
rel="noopener noreferrer"
target="_blank"
>
#{fix.issue}
</a>
) : null}
</li>
))}
</ul>
</AccordionItem>
) : null}
{props.features ? (
<AccordionItem title="Features" name="features">
<ul class="list-disc list-inside">
{props.features.map((feature: string) => (
<li class="text-md text-muted-foreground">{feature}</li>
))}
</ul>
</AccordionItem>
) : null}
{props.themeChanges ? (
<AccordionItem title="Theme Changes" name="themeChanges">
<ul class="list-disc list-inside">
{props.themeChanges.map((themeChange: string) => (
<li class="text-md text-muted-foreground">{themeChange}</li>
))}
</ul>
</AccordionItem>
) : null}
{props.breakingChanges ? (
<AccordionItem title="Breaking Changes" name="breakingChanges">
<ul class="list-disc list-inside">
{props.breakingChanges.map((breakingChange: string) => (
<li class="text-md text-muted-foreground">{breakingChange}</li>
))}
</ul>
</AccordionItem>
) : null}
</div>
</section>
<style is:global>
.ac-accordion-item-title {
@apply !text-dark;
&:hover {
opactiy: 0.8 !important;
}
}
.ac-accordion-item {
transition: height 0.2s ease-in-out !important;
& li {
opacity: .5;
}
}
</style>