78 lines
1.9 KiB
Svelte
78 lines
1.9 KiB
Svelte
<!-- @component `SiteFooter` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SiteFooter--default) -->
|
|
<script lang="ts">
|
|
import QuickLinks from './QuickLinks.svelte';
|
|
import CompanyLinks from './CompanyLinks.svelte';
|
|
import LegalLinks from './LegalLinks.svelte';
|
|
import Referrals from './Referrals/index.svelte';
|
|
|
|
import starterData from './data.json';
|
|
import { onMount } from 'svelte';
|
|
|
|
interface Referral {
|
|
url: URL;
|
|
image: URL;
|
|
title: string;
|
|
description?: string;
|
|
}
|
|
|
|
/**
|
|
* Custom referrals to other Reuters Graphics projects
|
|
*/
|
|
export let referrals: Referral[] = [];
|
|
|
|
let data = starterData;
|
|
|
|
onMount(async () => {
|
|
try {
|
|
const response = await fetch(
|
|
'https://www.reuters.com/site-api/footer/?' +
|
|
new URLSearchParams({
|
|
website: 'reuters',
|
|
outputType: 'json',
|
|
})
|
|
);
|
|
const footerData = (await response.json())[2];
|
|
// Dumb verification...
|
|
if (!footerData[0].company_description) return;
|
|
data = footerData;
|
|
} catch {
|
|
console.warn('Unable to fetch site footer data');
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<footer
|
|
class="my-0"
|
|
style="{`
|
|
--nav-background: var(--theme-colour-background, #fff);
|
|
--nav-primary: var(--theme-colour-text-primary, #404040);
|
|
--nav-rules: var(--theme-colour-brand-rules, #d0d0d0);
|
|
`}"
|
|
>
|
|
<div>
|
|
<Referrals referrals="{referrals}" />
|
|
<QuickLinks links="{data[0]}" />
|
|
<CompanyLinks links="{data[0]}" />
|
|
<LegalLinks links="{data[0]}" />
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- svelte-ignore css-unused-selector -->
|
|
<style lang="scss">
|
|
footer {
|
|
margin-top: 0;
|
|
background-color: var(--nav-background, #fff);
|
|
div {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
:global {
|
|
a {
|
|
text-decoration: none;
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|