FAQ

How to test the website on local computers

• Installation instructions: Installation-on-Ubuntu-22.04
• Go to the scripts directory
• To run Gatsby locally run gatsby develop (see Gatsby docs)
• On messages like "Couldn't find the plugin" update the used packages run npm update (see NPM CLI docs)
• On messages like "New minor version of npm available!" update NPM run npm install -g npm
• There are multiple scripts which can be executed using npm run-script <script>. The scripts can be found in file scripts/package.json. Additionally, there are several gatsby <commands>, see Gatsby CLI docs.

I've added new document, but it's not on the website, what did I miss?

Just adding or editing content is not enough to change it on the website.
Make sure you actually execute deploy procedure as documented to see changes live.

How do I link to a specific heading on a page?

When needed, you can use #heading-name (replace spaces with - and lowercase it) to reference headers anywhere in markdown, e.g.:

# My header

...

## Other part

See [my header above](#my-header)

How do I embed Youtube, Twitter, etc?

We use @pauliescanlon/gatsby-mdx-embed extension to embed content into MDX pages.
It allows embedding just about any existing content into a page.
Here's a few examples to get you started:

# My new awesome article

Here's a youtube video:

<YouTube youTubeId="WUgvvPRH7Oc" />

And here's a tweet:

<Tweet tweetLink="PaulieScanlon/status/1201514996838141952" />

And here's a github gist:

<Gist gistLink="PaulieScanlon/ca0cc9239176066492cb2aba435edbf7" />

For more examples and detailed explanation of available embed in the extension docs.

How can I reference

What additional tags can I use in mdx documents?

In addition to HTML tags, DICE website provides a set of helper tags and components.

Link

Link to one of the internal resources. When used - Gatsby will handle transitions between pages seamlessly.
While you can use simple <a href=""> equivalent - it's recommended to use <Link to=""> instead.

Example usage:

<Link to="/privacy">Datenschutzerklärung</Link>

ExternalLink

Extension of <a href=""> tag that visually denotes current link as external.
If kind="pdf" property is passed - will denote current link as external PDF.

Examples:

<ExternalLink to="https://cs.uni-paderborn.de/studium/beratung-und-unterstuetzung/mentorenprogramm/">
  Mentorenprogramm Informatik
</ExternalLink>

<ExternalLink
     kind="pdf"
     to="https://www.uni-paderborn.de/fileadmin/zv/4-4/stellenangebote/Kennziffer4023_Verlaengerung.pdf"
   >
  Early Stage Researcher on the veracity of knowledge graphs
</ExternalLink>

Image

A component that allows embedding pre-processed images into the document.
If you are using image from images/ folder - this component is required!
Gatsby pre-processes images on build and generates image paths dynamically, so using simple <img> tag won't work.
Using <Image> allows to easily reference image by its filename.

Example:

<Image filename='apache-spark.png' style="height: 50%; width: 50%;"/>

Table

Basic 2 column table component.
Primarily used on Contacts page.

Example:

<Table
  data={[
    { key: 'Position', value: 'Head of DICE' },
    { key: 'Phone', value: <a href="tel:+49 5251 603342">+49 5251 603342</a> },
    { key: 'Fax', value: <a href="tel:+49-5251-603436">+49 5251 603436</a> },
  ]}
/>