🚀 Creating a blog post

Step1

To create a new blog entry, a new mdx file must be created in the path src/content/blog. The name of this file automatically becomes the url of the new blog entry. If you create a file with new-entry-2024.mdx, the url becomes digitalcampus360.de/blog/new-entry-2024.mdx.

Step2

At first create the frontmatter at the beginning of the file.

Step3

All components are automatically imported. Yout dont need to import them manually. Just use the components as described in the Component Descriptions section.

Import all images that are needed for the blog entry.

If new Images are needed, they must be placed in the src/assets/blog folder. Inside the blog folder, a new folder with the name of the blog entry must be created. The images must be placed in this folder. Also a preview image must be placed in the blog/preview folder. The preview image is shown on the blog overview page.

Info: Insert images in webp format

⚡ Frontmatter 🔗

The frontmatter must be specified at the beginning of an mdx file.
All informations are mandatory.

• Parameters
  • title:
    • Title of the blog post
  • description:
    • Description of the blog post that is displayed on the blog overview page
  • author:
    • Name of the author
  • upload:
    • Month ans year of the upload -> MM | YYYY
  • readingDuration:
    • Duration of reading time in minutes -> ‘5’
  • image:
    • image path for the preview image
  • pubDate:
    • full publication date -> YYYY-MM-DD
  • tags:
    • tags to categorize the blog post -> [‘Cloud’, ‘AWS’, ‘App’]

Example:

---
title: Eine neue Innovation aus dem OEV digital campus!
description: Mit unserem MVP einer dezentralisierten Anwendung (dApp), können Unternehmen ihrem Team die Möglichkeit
author: Nico Schönnagel
upload: 04 | 2024
readingDuration: '2'
image: ../../assets/blog/preview/dApp-preview.webp
pubDate: 2024-04-04
tags: ['Cloud', 'AWS', 'App']
---

📥 Import Images 🔗

If you want to display a image or multiple images, add the imports for images that are needed for the blog entry right after the frontmatter.

import customImageName from '../../assets/blog/folder/fileName.webp'

Usage

Emphasized text

Italic: *italic* or _italic_
Bold: **bold** or __bold__
Italic and Bold: ***italic and bold*** or ___italic and bold___

Info: If you want to breake the text in paragraphs inside a Section Tag, use <br />.

📖 Component Descriptions 🔗

Section

Wrap a Headline and Content always in a Section Component. It has an animation where the section slides in slightly upwards. Also it have a padding top and bottom to make a clear separation between the sections.

For an example look at the following files:

• dapp-by-oev-2023.mdx
• oev-meeetup-2023.mdx

<Section>
  ## Headline

  Plain text and/or other CustomComponents
</Section>

ImgTextSection

To show a img with a Text next to it, use the ImgTextSection Component. You dont need to Wrap this component in a Section, because the component itself is a separate section. It has an animation where the text and image slide in from left and right.

• Parameters
  • imgSrc:
    • import img
  • alt:
    • alt text
  • imgPosition:
    • opportunities: left, right

import importedImage from '../../assets/blog/folder/fileName.webp'

<ImgTextSection imgSrc={importedImage} alt="some image alt text" imgPosition="right">
	'Content with or without Heading'
</ImgTextSection>

List

To show a List use the List Component. It has an animation where the list entries slide in one after the other.

• Parameters
  • listType:
    • select which symbol is to be displayed in front of the list element
      • opportunities: dot, check or any short (1-2 chars) custom symbol as string

<List>
	<ListItem listType="dot">Some text</ListItem>
	<ListItem listType="check">Some text</ListItem>
	<ListItem listType="1.">Some text</ListItem>
	<ListItem listType="2.">Some text</ListItem>
</List>

Accordion

The following structure is required to set up the accordion. Depending on how many tabs are needed, a further AccordionGroup must be added. The content of an AccordionContent can be customized.

<Accordion>
	<AccordionGroup>
		<AccordionTitle>Title</AccordionTitle>
		<AccordionContent>Text</AccordionContent>
	</AccordionGroup>
	<AccordionGroup>
		<AccordionTitle>Title</AccordionTitle>
		<AccordionContent>Text</AccordionContent>
	</AccordionGroup>
	...
</Accordion>

ImageWrapper

If you want to display multiple images that must be wrapped, use the ImageWrapper component.

Displayed dimension: width=“400” height=“200”

import importedImage1 from '../../assets/blog/folder/fileName1.webp'
import importedImage2 from '../../assets/blog/folder/fileName2.webp'

<ImageWrapper>
	<Img src={importedImage1} alt="alt text" />
	<Img src={importedImage2} alt="alt text" />
	...
</ImageWrapper>

Img

If you want to display a single image.

Displayed dimension: width=“400” height=“200”

import importedImage from '../../assets/blog/folder/fileName.webp'

<Img src={importedImage} alt="alt text" />

LargeImg

If you want to display a large single image.

Displayed dimension: width=“80%” height=“auto”

import importedImage from '../../assets/blog/folder/fileName.webp'

<LargeImg src={importedImage} alt="alt text" />

Source

If you want to add a Souce under an image.

<Source>
  Quelle: https://google.de
</Source>