opdavies/oliverdavies.uk
1
0
Fork 0
Code Issues 1 Pull requests Projects 1 Releases Packages Wiki Activity Actions

style: prettier

Browse source
This commit is contained in:
Oliver Davies 2023-10-23 00:51:19 +01:00
parent fe032622fa
commit b217907768
2 changed files with 72 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/components/Button.astro
View file

@ -7,7 +7,10 @@ interface Props {
const { href, text } = Astro.props as Props; const { href, text } = Astro.props as Props;
--- ---
<div class="mt-6 not-prose"> <div
class="mt-6 not-prose"
class:list={[position === "centre" ? "flex justify-center" : null]}
>
<a <a
class="inline-flex justify-center items-center py-3 px-6 w-full text-base font-medium text-white no-underline rounded-md duration-200 ease-in-out md:w-auto hover:bg-white focus:bg-white bg-blue-primary transition-color hover:text-blue-primary focus:text-blue-primary" class="inline-flex justify-center items-center py-3 px-6 w-full text-base font-medium text-white no-underline rounded-md duration-200 ease-in-out md:w-auto hover:bg-white focus:bg-white bg-blue-primary transition-color hover:text-blue-primary focus:text-blue-primary"
href={href} href={href}

111
src/components/Testimonials.astro
View file

@ -1,5 +1,5 @@
--- ---
import { getCollection } from 'astro:content'; import { getCollection } from "astro:content";
import _ from "lodash"; import _ from "lodash";
interface Props { interface Props {
@ -9,58 +9,83 @@ interface Props {
} }
const defaultNames = [ const defaultNames = [
'mike-karthauser', "mike-karthauser",
'tawny-bartlett', "tawny-bartlett",
'joe-howell', "joe-howell",
'michael-itkoff', "michael-itkoff",
'mick-felton', "mick-felton",
'duncan-davidson', "duncan-davidson",
'adam-cuddihy', "adam-cuddihy",
'huw-davies', "huw-davies",
'scott-euser', "scott-euser",
'brian-hartwell', "brian-hartwell",
'alan-hatch', "alan-hatch",
'holly-ross', "holly-ross",
'josh-mitchell', "josh-mitchell",
'brian-healy', "brian-healy",
'chris-jarvis', "chris-jarvis",
'daniel-easterbrook', "daniel-easterbrook",
'anonymous', "anonymous",
]; ];
const { title, titleClasses } = Astro.props as Props; const { title, titleClasses } = Astro.props as Props;
const names = _(Astro.props.names || defaultNames); const names = _(Astro.props.names || defaultNames);
const testimonials = await getCollection('testimonial', ({ id }) => names.includes(id)); const testimonials = await getCollection("testimonial", ({ id }) =>
names.includes(id)
);
const sortedTestimonials = _(names) const sortedTestimonials = _(names)
.flatMap(name => testimonials.filter(testimonial => testimonial.id === name)) .flatMap((name) =>
testimonials.filter((testimonial) => testimonial.id === name)
)
.value(); .value();
--- ---
{testimonials && ( {
<h2 class={titleClasses ? titleClasses.join(' ') : null}>{title ?? 'What others have said'}</h2> testimonials && (
<section>
<h2 class={titleClasses ? titleClasses.join(" ") : null}>
{title ?? "What others have said"}
</h2>
<div class="mt-6 space-y-14"> <div class="mt-8 space-y-10">
{_(sortedTestimonials).map(({ data: { image, name, tagline, text, url } }) => ( {_(sortedTestimonials).map(
<article> ({ data: { image, name, tagline, text, url } }) => (
<blockquote class="mt-4" set:html={text} /> <article>
<blockquote class="mt-4" set:html={text} />
<footer class="flex items-center space-x-4 space-x-reverse"> <footer class="flex items-center space-x-4 space-x-reverse">
<span class="text-base"> <span class="text-base">
{url {url ? (
? <a href={url}>{name}{tagline && (<> - {tagline}</>)}</a> <a href={url}>
: <>{name}{tagline && (<> - {tagline}</>)}</> {name}
} {tagline && <> - {tagline}</>}
</span> </a>
) : (
<>
{name}
{tagline && <> - {tagline}</>}
</>
)}
</span>
{image && ( {image && (
<span class="order-first not-prose"> <span class="order-first not-prose">
<img width="50" height="50" class="rounded-full border w-15 h-15" alt={`Photo of ${name}`} src={`/images/recommendations/${image}`} /> <img
</span> alt={`Photo of ${name}`}
)} class="rounded-full border"
</footer> height="50px"
</article> src={`/images/recommendations/${image}`}
))} width="50px"
</div> />
)} </span>
)}
</footer>
</article>
)
)}
</div>
</section>
)
}