Skip to content
Snippets Groups Projects
Commit f9869a7f authored by Moritz Stückler's avatar Moritz Stückler :cowboy:
Browse files

Fix/gitignore

parent 8630e038
No related branches found
No related tags found
1 merge request!57Fix/gitignore
.DS_Store
\ No newline at end of file
.DS_Store
node_modules
dist
---
layout: "@layouts/ArticleLayout.astro"
title: Kitchen Sink
subtitle: Examples for Content Editors
headerImage: images/home/nasa-Q1p7bh3SHj8-unsplash_fchh.jpg
headerImageAlt: Picture of two metal palm trees
hidden: true
---
# H1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
## H2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
### H3 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
#### H4 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
##### H5 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
###### H6 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
This page is a so-called "kitchen sink", meaning it shows all the possible UI elements that editors can use inside our website. This is still a work in progress. Come back to see what's new.
> Für uns war immer klar: So macht man ein Zitat!
# Markdown
All default Markdown elements are supported. Please check a Markdown documentation or [cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) if you want to know more about the features of Markdown:
- Headlines
- Lists (ordered, unordered)
- Blockquotes
- Bold, Italique text formatting
- Code blocks
- Images
## Internal links
To link to any other page inside of our site, please use a regular Markdown link, but in a **relative URL**, e.g. something like this: `[My Link](en/blog/my-blogpost)`
## Markdown images
You can use default markdown images like this: `![](/images/home/nasa-Q1p7bh3SHj8-unsplash_fchh.jpg)`
![](images/home/nasa-Q1p7bh3SHj8-unsplash_fchh.jpg)
## Images with subtitles/caption
<Image img="images/home/nasa-Q1p7bh3SHj8-unsplash_fchh.jpg" caption="This is a Caption. Write something here" subCaption="And this is a subcaption for the Author/Rights information" />
## Button
Technically it's a link, but it looks like a button:
<Button text="Click me!" href="http://www.google.de" type="primary" />
## Button Link in new tab
<Button
text="Click me! But in new tab"
newTab
href="http://www.google.de"
type="primary"
/>
## Button Link in new tab with icon
<Button
text="Click me! I have icon"
newTab
href="http://www.google.de"
type="primary"
icon="Email"
iconSize="24"
/>
## Icon
<Icon name="Email" size="24" />
## Pill
<Pill
title="Click me"
href="http://www.google.de"
newTab
type="default"
rounded
size="lg"
icon="DotMark"
iconPackage="Carbon"
iconSize="sm"
/>
## ActionBox
<ActionBox
title="Action Box Title"
description="Action Box Subtitle"
>
<Button
text="Primary Button"
icon="Launch"
newTab
iconSize={24}
type="primary"
href="https://www.google.de"
/>
<Button
text="Tertiary Button"
icon="Launch"
newTab
iconSize={24}
type="tertiary"
href="https://www.google.de"
/>
</ActionBox>
## Accordion
<Accordion title="Enabling a data-based circular economy">
The Fab City concept provides a promising pathway towards a more resilient and
ecological mode of production and consumption. Globally connected cities and
regions share data, information and know-how and collaborate on the
development of physical goods in the form of Open Source Hardware, whereas the
creation, repair and recycling of those physical goods and artifacts happens
in the local sphere close to the place of need and by means of digital
production technologies, e.g. freely accessible in Fab Labs.
</Accordion>
## Tabs
<Tabs
className="not-prose"
client:only="react"
entries={[
{ label: "Tab 1", content: "This is the content of tab 1" },
{ label: "Tab 2", content: "This is the content of tab 2" },
{ label: "Tab 3", content: "This is the content of tab 3" },
]}
/>
## Member (single Use)
<Member
image="https://picsum.photos/id/1005/500/500"
name="Max Mustermann"
position="CEO"
email="max@musterfirma.de"
linkedin="https://www.google.de"
twitter="https://www.google.de"
className="not-prose"
/>
<Member
image="https://picsum.photos/id/1005/500/500"
name="Max Mustermann"
position="CEO"
email="max@musterfirma.de"
linkedin="https://www.google.de"
twitter="https://www.google.de"
className="not-prose"
/>
# People (multi-use)
For people that are mentioned multiple times on the website, we can create a "profile" under `pages/de/people/{name}.mdx`. Then we can use them easily via the `<People>` component: `<People names={["jenny", "michael"]} />`
<People names={["jenny", "michael"]} />
## Image Gallery
<ImageGallery
fullBleed={true}
files={[
{
img: "images/slider/home-slider/1002-1000x600.jpeg",
caption: "Caption 1",
subCaption: "Sub Caption 1",
},
{
img: "images/slider/home-slider/1003-400x600.jpeg",
caption: "Caption 2",
subCaption: "Sub Caption 2",
},
{
img: "images/slider/home-slider/1005-1000x600.jpeg",
caption: "Caption 3",
subCaption: "Sub Caption 3",
},
"images/slider/home-slider/1025-1000x600.jpeg",
]}
/>
## Carousel
<Carousel
title="News"
paths={[
"de/fabcity/news/balifabfest",
"de/fabcity/news/fabricademy",
"de/fabcity/news/zerocarbonroadshow",
"de/fabcity/news/fabcitymanifesto",
]}
/>
## Video slider
{/* <VideoSlider
client:only="react"
fluid={true}
title="Visiting Hamburg"
entries={["sX7zWRswT-o", "2TAJCT6JnDM", "y42eDpvgBnk", "fwmA-2xIWT0"]}
itemWidth={800}
/> */}
## Youtube Embed */}
<YoutubeEmbed embedId="sX7zWRswT-o" width="full" client:only="react" />
## Vertical article card
<VerticalArticleCard path="de/network/events/buildworkshops" />
## Horizontal article cards
<HorizontalArticleCard path="de/network/events/buildworkshops" />
## Carousel
<Carousel
fluidToTheRight={true}
title="Events"
paths={[
"de/fabcity/news/balifabfest",
"de/fabcity/news/fabcityfullstack",
"de/fabcity/news/fabricademy",
"de/fabcity/news/zerocarbonroadshow",
]}
/>
## Logo grid
<LogoGrid
title="Unsere Gründungsmitglieder"
columns={6}
logos={[
{
src: "images/logos/logo-3dstrong_2by1.svg",
alt: "3D Strong",
},
{
src: "images/logos/logo-attraktor_2by1.svg",
alt: "Attraktor",
},
{
src: "images/logos/logo-buceriuslawschool_2by1.svg",
alt: "Bucerius Law School",
},
{
src: "images/logos/logo-code4hamburg_2by1.svg",
alt: "Code4Hamburg",
},
{
src: "images/logos/logo-curious_2by1.svg",
alt: "Curious",
},
{
src: "images/logos/logo-dyne_2by1.svg",
alt: "Dyne",
},
]}
/>
import { DEFAULT_LOCALE } from "@config";
import { partitionBy } from "@utils";
import type { IPage } from "@interfaces/IPage";
import { MDXInstance } from "astro";
const storageKey = "preferredLanguage";
/**
* This function will look for an existing language preference in
* localStorage. If there is none, it will guess prefered language
* from Browser settings. If this doesn't work it will use a default
* value.
*/
export const getOrGuessInitialLanguageFromBrowser = () => {
let preferredLanguage = localStorage.getItem(storageKey)?.toLowerCase();
if (!preferredLanguage) {
if (/^en\b/.test(navigator.language.toLowerCase())) {
preferredLanguage = "en";
} else {
// Use German as default for unknown language browser settings
preferredLanguage = DEFAULT_LOCALE;
}
localStorage.setItem(storageKey, preferredLanguage);
}
return preferredLanguage;
};
export const setLanguage = (newLanguage: string) => {
localStorage.setItem(storageKey, newLanguage);
};
export const getLanguage = () => {
return localStorage.getItem(storageKey);
};
export const buildTranslationRoutes = (
allPages: MDXInstance<IPage>[],
baseUrl,
allLocales
) => {
// Split pages in two, just by the existence of a `translated` frontmatter property
const [translatedPages, unTranslatedPages] = partitionBy(allPages, (page) =>
Boolean(page.frontmatter?.translated)
);
// The pages w/o the frontmatter property can still be the "translation targets"
// of another page that has the `translated` property
const unTranslatedAndNoTargetPages = unTranslatedPages.filter(
(untranslatedPage) =>
!translatedPages.some((translatedPage) =>
untranslatedPage.url.includes(translatedPage.frontmatter.translated)
)
);
const translatedRoutes = translatedPages
.flatMap((translatedPage) =>
buildTranslatedRoutesFromPage(translatedPage, baseUrl, allLocales)
)
.filter(Boolean);
const fallbackRoutes = unTranslatedAndNoTargetPages
.flatMap((untranslatedPage) =>
buildFallbackRouteForPage(untranslatedPage, baseUrl, allLocales)
)
.filter(Boolean);
return [...translatedRoutes, ...fallbackRoutes];
};
/**
* Build a fallback route for a given page (this is a route that redirects to the home page, e.g. if no translated content is available)
*/
const buildFallbackRouteForPage = (
page: MDXInstance<IPage>,
baseUrl: string,
allLocales: string[],
targetOverride?: string
) => {
const urlPartsWithoutBase = page?.url
?.replace(baseUrl, "")
.split("/")
.filter(Boolean);
if (urlPartsWithoutBase && urlPartsWithoutBase.length > 0) {
const localeFromUrl = urlPartsWithoutBase && urlPartsWithoutBase[0];
const otherLocale = allLocales.filter(
(locale) => locale !== localeFromUrl
)[0];
const middleParts = urlPartsWithoutBase?.slice(1, -1);
const slugFromUrl = urlPartsWithoutBase.at(-1);
const firstRedirect = {
from: `${otherLocale}${
Boolean(middleParts.length) ? `/${middleParts?.join("/")}` : ""
}/${slugFromUrl}`,
to: targetOverride || "/",
};
return [
{
params: {
slug: firstRedirect.from,
},
props: {
newTarget: firstRedirect.to,
},
},
];
}
};
/**
* Build translated routes for a given page. This results in two routes (back and forth)
*/
const buildTranslatedRoutesFromPage = (
page: MDXInstance<IPage>,
baseUrl: string,
allLocales: string[]
) => {
const urlPartsWithoutBase = page?.url
?.replace(baseUrl, "")
.split("/")
.filter(Boolean);
if (urlPartsWithoutBase && urlPartsWithoutBase.length > 0) {
const localeFromUrl = urlPartsWithoutBase && urlPartsWithoutBase[0];
const otherLocale = allLocales.filter(
(locale) => locale !== localeFromUrl
)[0];
const middleParts = urlPartsWithoutBase?.slice(1, -1);
const slugFromUrl = urlPartsWithoutBase.at(-1);
const otherSlugWithoutLocale = page.frontmatter?.translated
?.split("/")
.filter(Boolean)
.slice(1)
.join("/");
if (otherSlugWithoutLocale) {
const firstRedirect = {
from: `${localeFromUrl}/${otherSlugWithoutLocale}`,
to: page.url,
};
const secondRedirect = {
from: `${otherLocale}${
Boolean(middleParts.length) ? `/${middleParts?.join("/")}` : ""
}/${slugFromUrl}`,
to: `${baseUrl}/${otherLocale}/${otherSlugWithoutLocale}`,
};
return [
{
params: {
slug: firstRedirect.from,
},
props: {
newTarget: firstRedirect.to,
},
},
{
params: {
slug: secondRedirect.from,
},
props: { newTarget: secondRedirect.to },
},
];
}
}
};
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment