Add infoboxes
This commit is contained in:
parent
36298d1e85
commit
cff496ff3a
9 changed files with 221 additions and 44 deletions
|
|
@ -11,6 +11,14 @@ const branches = defineCollection({
|
|||
}),
|
||||
});
|
||||
|
||||
const variants = defineCollection({
|
||||
type: "content",
|
||||
schema: z.object({
|
||||
id: z.number(),
|
||||
title: z.string(),
|
||||
}),
|
||||
});
|
||||
|
||||
const intro = defineCollection({
|
||||
type: "content",
|
||||
schema: z.object({
|
||||
|
|
@ -34,6 +42,7 @@ const emailConfirmed = defineCollection({
|
|||
|
||||
export const collections = {
|
||||
branches,
|
||||
variants,
|
||||
intro,
|
||||
confirmEmail,
|
||||
emailConfirmed,
|
||||
|
|
|
|||
71
src/content/variants/coal-policy.md
Normal file
71
src/content/variants/coal-policy.md
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
---
|
||||
title: Weak coal policy
|
||||
id: 2
|
||||
---
|
||||
|
||||
We're interested here in VIG's insurance policies regarding fossil fuels, i.e. the rules they commit to follow, as a group, about giving insurance to the fossil fuel industry. This document is [publicly available on their website](https://group.vig/media/vxdbtzjp/vig_responsible-insurance_august-2023.pdf) (by the way, it hasn't been updated in almost 3 years!).
|
||||
|
||||
### What does it say about coal?
|
||||
|
||||
Concerning coal, the policy does impose restrictions, but they are extremely limited and don't apply to everyone.
|
||||
|
||||
Indeed, it prohibits insurance for new coal projects, which is positive. However, regarding not renewing their existing clients, the policy makes a distinction between countries with and without "an existing coal energy exit strategy". Not sure what's meant by "exit strategy" and which country falls into which category? You're not alone! In fact, VIG doesn't define this anywhere.
|
||||
|
||||
Even in the countries where VIG regulates insuring coal projects somewhat (the ones with an “exit strategy”), the policy leaves a lot to be desired: It says VIG won't renew insurance for coal mines and plants, which is of course good news. However, it would still insure other types of coal projects, as long as the companies behind them fall below certain thresholds. Those thresholds are shown in the table below; they are much higher than those set by VIG’s main competitors Uniqa and Allianz, and than Insure our Future’s demands.
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
</th>
|
||||
<th>
|
||||
Share of sales from thermal coal mining (in %)
|
||||
</th>
|
||||
<th>
|
||||
Quantity of coal produced per year (in million tonnes mT)
|
||||
</th>
|
||||
<th>
|
||||
Share of power generated from coal (in %)
|
||||
</th>
|
||||
<th>
|
||||
Quantity of energy produced out of thermal coal per year (in gigawatt hours GWh)
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th> VIG </th>
|
||||
<td> 30 % </td>
|
||||
<td> 20 mT </td>
|
||||
<td> 30 % </td>
|
||||
<td> 10 GWh </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th> Uniqa </th>
|
||||
<td> 5 % </td>
|
||||
<td> 10 mT </td>
|
||||
<td> – </td>
|
||||
<td> – </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th> Allianz </th>
|
||||
<td> 25 % </td>
|
||||
<td> 10 Mt </td>
|
||||
<td> – </td>
|
||||
<td> 5 GWh </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th> Insure our Future demands </th>
|
||||
<td> 20 % </td>
|
||||
<td> 10 Mt </td>
|
||||
<td> – </td>
|
||||
<td> 5 GWh </td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
In the other countries, VIG may insure coal projects with impunity.
|
||||
|
||||
---
|
||||
|
||||
**Note**: Often, insurance companies are also investors, i.e. they can also invest money in fossil fuel companies/projects. Usually, their policy for investment is different from the one for insurance. You can see [VIG's investment policy](https://group.vig/media/noblcmxl/vig_responsible-investment_august-2023.pdf). However, our focus here is only on their insurance business.
|
||||
8
src/content/variants/neptun-deep.md
Normal file
8
src/content/variants/neptun-deep.md
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
title: Neptun Deep
|
||||
id: 3
|
||||
---
|
||||
|
||||
Neptun Deep is the name of the largest planned fossil gas project within the EU. It is an offshore gas extraction field in the Romanian Black Sea, off the coast of Tuzla, led by the Austrian company OMV and the Romanian company Romgaz. It is set to start drilling this year and to start exporting gas towards Austria in 2027. This project would have dreadful consequences, in terms of climate (burning this gas will cause about 270 million tons of carbon emissions), marine and coastal biodiversity (it intersects two Natura 2000 protected areas), landscape degradation and impacts to local population (which has barely been consulted) and economy.
|
||||
|
||||
We do not know for now who is insuring this project. VIG might be, and we are asking them to publicly commit not to insure it.
|
||||
14
src/content/variants/oil-gas-policy.md
Normal file
14
src/content/variants/oil-gas-policy.md
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
---
|
||||
title: Lack of oil and gas policy
|
||||
id: 1
|
||||
---
|
||||
|
||||
We're interested here in VIG's insurance policies regarding fossil fuels, i.e. the rules they commit to follow, as a group, about giving insurance to the fossil fuel industry. This document is [publicly available on their website](https://group.vig/media/vxdbtzjp/vig_responsible-insurance_august-2023.pdf) (by the way, it hasn't been updated in almost 3 years!).
|
||||
|
||||
### What does it say about oil and gas?
|
||||
|
||||
The problem is that it doesn't say anything about oil and gas. That means that VIG remains totally open to insuring the oil and gas sector (whether new clients or their existing ones). And it doesn't mention anywhere an intention to transition away from it.
|
||||
|
||||
---
|
||||
|
||||
**Note**: Often, insurance companies are also investors, i.e. they can also invest money in fossil fuel companies/projects. Usually, their policy for investment is different from the one for insurance. You can see [VIG's investment policy](https://group.vig/media/noblcmxl/vig_responsible-investment_august-2023.pdf). However, our focus here is only on their insurance business.
|
||||
|
|
@ -55,7 +55,7 @@ const reference = {
|
|||
"form_response.already_sent.body": "You can only send one message per branch",
|
||||
};
|
||||
|
||||
type TranslationKey = keyof typeof reference;
|
||||
export type TranslationKey = keyof typeof reference;
|
||||
|
||||
const translations: Record<Lang, typeof reference> = {
|
||||
en: reference,
|
||||
|
|
|
|||
|
|
@ -254,4 +254,53 @@ const description = t("website_description");
|
|||
.prose > p {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.prose > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.prose :where(h1, h2, h3, h4, h5, h6) {
|
||||
margin-bottom: 1em;
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.prose h3 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.prose hr {
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 1.5em;
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
.prose table {
|
||||
margin-top: 2em;
|
||||
margin-bottom: 2em;
|
||||
font-size: 1rem;
|
||||
line-height: 1.4rem;
|
||||
}
|
||||
|
||||
.prose tr {
|
||||
border-top: 1px solid white;
|
||||
}
|
||||
|
||||
.prose tr:last-of-type {
|
||||
border-bottom: 1px solid white;
|
||||
}
|
||||
|
||||
.prose td,
|
||||
.prose th {
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.prose th {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.prose :where(th, td):not(:last-of-type) {
|
||||
padding-right: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
52
src/letter/LetterVariantButton.astro
Normal file
52
src/letter/LetterVariantButton.astro
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
---
|
||||
import { type CollectionEntry } from "astro:content";
|
||||
import { makeT, type TranslationKey } from "../i18n";
|
||||
import type { Lang } from "../lang";
|
||||
import Dialog from "../ui/Dialog.astro";
|
||||
|
||||
interface Props {
|
||||
lang: Lang;
|
||||
variant: CollectionEntry<"variants">;
|
||||
}
|
||||
|
||||
const { lang, variant } = Astro.props;
|
||||
const { t } = makeT(lang);
|
||||
const { id } = variant.data;
|
||||
const { Content } = await variant.render();
|
||||
---
|
||||
|
||||
<label
|
||||
class="flex items-center gap-4 px-4 py-4 rounded border border-white/10 hover:bg-white/10 has-[:checked]:bg-white/10 transition-colors"
|
||||
>
|
||||
<input type="radio" name="variant" value={id} checked={id === 1} class="radio flex-none" />
|
||||
<div class="flex-1">
|
||||
<p class="font-bold text-xl">
|
||||
{t(`form.variant.${id}` as TranslationKey)}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onclick={`document.querySelector('#${variant.slug}')?.showModal()`}
|
||||
class="flex-none opacity-75 hover:opacity-25 transition-opacity"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
class="inline-block w-6 ml-1 relative"
|
||||
style="top: -1px"
|
||||
>
|
||||
<path
|
||||
d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</label>
|
||||
<Dialog id={variant.slug} class="max-w-screen-lg">
|
||||
<article class="max-w-screen-md mx-auto py-6">
|
||||
<h2 class="font-display font-bold text-5xl text-balance mb-6">{variant.data.title}</h2>
|
||||
<div class="prose text-xl">
|
||||
<Content />
|
||||
</div>
|
||||
</article>
|
||||
</Dialog>
|
||||
|
|
@ -1,6 +1,8 @@
|
|||
---
|
||||
import { getCollection } from "astro:content";
|
||||
import { makeT } from "../i18n";
|
||||
import type { Lang } from "../lang";
|
||||
import LetterVariantButton from "./LetterVariantButton.astro";
|
||||
|
||||
interface Props {
|
||||
lang: Lang;
|
||||
|
|
@ -9,7 +11,7 @@ interface Props {
|
|||
const { lang } = Astro.props;
|
||||
const { t } = makeT(lang);
|
||||
|
||||
const options = ["1", "2", "3"] as const;
|
||||
const variants = (await getCollection("variants")).toSorted((a, b) => a.data.id - b.data.id);
|
||||
---
|
||||
|
||||
<form id="letter-variant-input" class="md:col-span-3">
|
||||
|
|
@ -18,33 +20,7 @@ const options = ["1", "2", "3"] as const;
|
|||
{t("form.variant")}
|
||||
</legend>
|
||||
<div class="grid md:grid-cols-3 gap-2">
|
||||
{
|
||||
options.map((option, index) => (
|
||||
<label class="flex items-center px-4 py-4 rounded border border-white/10 hover:bg-white/10 has-[:checked]:bg-white/10 transition-colors">
|
||||
<div class="flex items-center gap-4 font-bold text-xl">
|
||||
<input
|
||||
type="radio"
|
||||
name="variant"
|
||||
value={option}
|
||||
checked={index === 0}
|
||||
class="radio flex-none"
|
||||
/>
|
||||
<p>
|
||||
{t(`form.variant.${option}`)}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
class="inline-block w-6 opacity-50 ml-1 relative"
|
||||
style="top: -1px"
|
||||
>
|
||||
<path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" />
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
))
|
||||
}
|
||||
{variants.map((variant) => <LetterVariantButton lang={lang} variant={variant} />)}
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -15,21 +15,19 @@ const { class: c, heading, ...props } = Astro.props;
|
|||
{...props}
|
||||
>
|
||||
<slot name="top" />
|
||||
<header class="flex items-center flex-wrap px-6 py-6">
|
||||
{heading && <p class="font-bold text-base">{heading}</p>}
|
||||
<button
|
||||
formmethod="dialog"
|
||||
onclick="this.closest('dialog').close()"
|
||||
class="button button--ghost button--icon ml-auto -mt-2 -mr-2"
|
||||
>
|
||||
<svg class="w-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path
|
||||
d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
<div class="px-6 pb-6" data-dialog-content>
|
||||
<button
|
||||
formmethod="dialog"
|
||||
onclick="this.closest('dialog').close()"
|
||||
class="absolute top-4 right-4 button button--ghost button--icon"
|
||||
>
|
||||
<svg class="w-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path
|
||||
d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
{heading && <header class="font-bold text-base px-6 pt-6">{heading}</header>}
|
||||
<div class="px-6 py-6" data-dialog-content>
|
||||
<slot />
|
||||
</div>
|
||||
</dialog>
|
||||
|
|
|
|||
Reference in a new issue