Building Uncertainty Primer

[mmaelicke]

@cojacoo, The Uncertainty topic story for the main homepage is built here:

ruins-website/src/topics/Uncertainty.tsx

Line 13 in 9fa4d85

const steps_de: TopicStep[] = [

Each step has is a Javascript object (json, similar to Python's dict) with at least a 'content' key and optionally an 'imgSrc' key if a preview image should be used. To create these images see #1

Here, you can change the text, and images add steps, and so on.

The content is composed of React components. Basically, it's almost like HTML, but a lot more is happening under the hood. Make sure to wrap the whole content into an empty tag: <> ... </>, that's a React requirement. For the text, I stick to the <Typography /> tag provided by Material UI to provide consistent looks.
The different variations of Typography can be found here: https://mui.com/material-ui/react-typography/#component

---

This is an example of the very first topical step:

{
        imgSrc: '/steps/uncertainty_step1.png', 
        content: <>
            <Typography variant="h1">Unsicherheit und Risiko</Typography>
            <Typography variant="caption" component="p">
                Unsicherheit und Risiko sind wichtige Bregriffe zum Verständnis von Klimadaten und Modellen.
            </Typography>
            <Typography variant="h4" sx={{marginTop: '5rem'}}>Wie lange brauchst du morgens zur Arbeit?</Typography>
            <Typography variant="caption" component="p">
                Für dieses Beispiel gehen wir einmal von <span style={{fontSize: '120%'}}>12 Minuten</span> aus.
                Haben wir nicht mehr Informationen, können wir dies z.B. wie auf der Grafik darstellen: Der Weg zur Arbeit 
                dauert 12 Minuten, also gibt es nur einen Datenpunkt bei 12, der zu 100% eintreten wird
            </Typography>
            </>
    },