-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'localisation' of https://github.com/sensebox/docs into …
…localisation
- Loading branch information
Showing
29 changed files
with
513 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| // BoardDropdown.jsx | ||
|
|
||
| import React, { useState } from "react"; | ||
| import { | ||
| Select, | ||
| SelectContent, | ||
| SelectItem, | ||
| SelectTrigger, | ||
| SelectValue, | ||
| } from "@site/src/components/ui/select"; | ||
| import { useBoardStore } from "@site/src/lib/stores/store"; | ||
| import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; | ||
| import { faMicrochip } from "@fortawesome/free-solid-svg-icons"; | ||
| const BoardDropdown = () => { | ||
| const board = useBoardStore((state) => state.board); | ||
| const handleBoardChange = (selectedBoard) => { | ||
| // Verwende die setBoard-Funktion direkt, um das Board im Store zu aktualisieren | ||
| useBoardStore.setState({ board: selectedBoard }); | ||
| // Hier kannst du weitere Aktionen ausführen, wenn sich das Board ändert | ||
| }; | ||
|
|
||
| return ( | ||
| <Select onValueChange={(value) => handleBoardChange(value)} default> | ||
| <SelectTrigger className="w-[180px]"> | ||
| <SelectValue placeholder={board ? board : "Board auswählen"} /> | ||
| </SelectTrigger> | ||
| <SelectContent> | ||
| <SelectItem value=":edu"> | ||
| <FontAwesomeIcon icon={faMicrochip} className="mr-2" /> | ||
| :edu | ||
| </SelectItem> | ||
| <SelectItem value=":edu S2"> | ||
| <FontAwesomeIcon icon={faMicrochip} className="mr-2" /> | ||
| :edu S2 | ||
| </SelectItem> | ||
| <SelectItem value=":home"> | ||
| <FontAwesomeIcon icon={faMicrochip} className="mr-2" /> | ||
| :home | ||
| </SelectItem> | ||
| <SelectItem value=":bike"> | ||
| <FontAwesomeIcon icon={faMicrochip} className="mr-2" /> | ||
| :bike | ||
| </SelectItem> | ||
| <SelectItem value=":CO2Traffic"> | ||
| <FontAwesomeIcon icon={faMicrochip} className="mr-2" /> | ||
| CO2 Traffic Light | ||
| </SelectItem> | ||
| </SelectContent> | ||
| </Select> | ||
| ); | ||
| }; | ||
|
|
||
| export default BoardDropdown; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import React from 'react'; | ||
| import {useColorMode, useThemeConfig} from '@docusaurus/theme-common'; | ||
| import ColorModeToggle from '@theme/ColorModeToggle'; | ||
| import styles from './styles.module.css'; | ||
| export default function NavbarColorModeToggle({className}) { | ||
| const navbarStyle = useThemeConfig().navbar.style; | ||
| const disabled = useThemeConfig().colorMode.disableSwitch; | ||
| const {colorMode, setColorMode} = useColorMode(); | ||
| if (disabled) { | ||
| return null; | ||
| } | ||
| return ( | ||
| <ColorModeToggle | ||
| className={className} | ||
| buttonClassName={ | ||
| navbarStyle === 'dark' ? styles.darkNavbarColorModeToggle : undefined | ||
| } | ||
| value={colorMode} | ||
| onChange={setColorMode} | ||
| /> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| .darkNavbarColorModeToggle:hover { | ||
| background: var(--ifm-color-gray-800); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| import React, { useEffect, useState } from 'react'; | ||
| import { useThemeConfig, ErrorCauseBoundary } from '@docusaurus/theme-common'; | ||
| import { | ||
| splitNavbarItems, | ||
| useNavbarMobileSidebar, | ||
| } from '@docusaurus/theme-common/internal'; | ||
| import NavbarItem from '@theme/NavbarItem'; | ||
| import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle'; | ||
| import SearchBar from '@theme/SearchBar'; | ||
| import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle'; | ||
| import NavbarLogo from '@theme/Navbar/Logo'; | ||
| import NavbarSearch from '@theme/Navbar/Search'; | ||
| import styles from './styles.module.css'; | ||
| import { | ||
| Select, | ||
| SelectContent, | ||
| SelectItem, | ||
| SelectTrigger, | ||
| SelectValue, | ||
| } from "@site/src/components/ui/select"; | ||
| import { useBoardStore } from "@site/src/lib/stores/store"; | ||
| import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; | ||
| import { faMicrochip } from "@fortawesome/free-solid-svg-icons"; | ||
| import { useNavigate, useLocation } from 'react-router-dom'; // Verwende useLocation | ||
|
|
||
| function useNavbarItems() { | ||
| return useThemeConfig().navbar.items; | ||
| } | ||
|
|
||
| function NavbarItems({ items }) { | ||
| return ( | ||
| <> | ||
| {items.map((item, i) => ( | ||
| <ErrorCauseBoundary | ||
| key={i} | ||
| onError={(error) => | ||
| new Error( | ||
| `A theme navbar item failed to render. | ||
| Please double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config: | ||
| ${JSON.stringify(item, null, 2)}`, | ||
| { cause: error }, | ||
| ) | ||
| } | ||
| > | ||
| <NavbarItem {...item} /> | ||
| </ErrorCauseBoundary> | ||
| ))} | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| function NavbarContentLayout({ left, right }) { | ||
| return ( | ||
| <div className="navbar__inner"> | ||
| <div className="navbar__items">{left}</div> | ||
| <div className="navbar__items navbar__items--right">{right}</div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| const BoardDropdown = () => { | ||
| const board = useBoardStore((state) => state.board); | ||
| const location = useLocation(); | ||
|
|
||
| const handleBoardChange = (selectedBoard) => { | ||
| // Verwende die setBoard-Funktion direkt, um das Board im Store zu aktualisieren | ||
| console.log(selectedBoard) | ||
| useBoardStore.setState({ board: selectedBoard }); | ||
| // Hier kannst du weitere Aktionen ausführen, wenn sich das Board ändert | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| const searchParams = new URLSearchParams(location.search); | ||
| const currentBoard = searchParams.get('board'); | ||
| // Map der Suchbegriffe zu den entsprechenden Board-Werten | ||
| const boardMap = { | ||
| home: ":home", | ||
| edus2: ":edu S2", | ||
| edu: ":edu", | ||
| bike: ":bike", | ||
| co2: ":CO2 Ampel", | ||
| mini: ":mini", | ||
| }; | ||
|
|
||
| // Überprüfen, ob der Suchbegriff gültig ist, und Board setzen | ||
| if (currentBoard && boardMap[currentBoard.toLowerCase()]) { | ||
| useBoardStore.setState({ board: boardMap[currentBoard.toLowerCase()] }); | ||
| } else { | ||
| console.warn("Ungültiger Board-Parameter:", currentBoard); | ||
| } | ||
| }, [location.search]); // Überwache Änderungen an den Query-Parametern | ||
|
|
||
| return (<></> | ||
| ); | ||
| }; | ||
|
|
||
| export default function NavbarContent() { | ||
| const mobileSidebar = useNavbarMobileSidebar(); | ||
| const items = useNavbarItems(); | ||
| const [leftItems, rightItems] = splitNavbarItems(items); | ||
| const searchBarItem = items.find((item) => item.type === 'search'); | ||
|
|
||
| return ( | ||
| <NavbarContentLayout | ||
| left={ | ||
| <> | ||
| {!mobileSidebar.disabled && <NavbarMobileSidebarToggle />} | ||
| <NavbarLogo /> | ||
| <NavbarItems items={leftItems} /> | ||
| </> | ||
| } | ||
| right={ | ||
| <> | ||
| <BoardDropdown /> | ||
| <NavbarItems items={rightItems} /> | ||
| <NavbarColorModeToggle className={styles.colorModeToggle} /> | ||
| {!searchBarItem && ( | ||
| <NavbarSearch> | ||
| <SearchBar /> | ||
| </NavbarSearch> | ||
| )} | ||
| </> | ||
| } | ||
| /> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| /* | ||
| Hide color mode toggle in small viewports | ||
| */ | ||
| @media (max-width: 996px) { | ||
| .colorModeToggle { | ||
| display: none; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import React from 'react'; | ||
| import clsx from 'clsx'; | ||
| import {useThemeConfig} from '@docusaurus/theme-common'; | ||
| import { | ||
| useHideableNavbar, | ||
| useNavbarMobileSidebar, | ||
| } from '@docusaurus/theme-common/internal'; | ||
| import {translate} from '@docusaurus/Translate'; | ||
| import NavbarMobileSidebar from '@theme/Navbar/MobileSidebar'; | ||
| import styles from './styles.module.css'; | ||
| function NavbarBackdrop(props) { | ||
| return ( | ||
| <div | ||
| role="presentation" | ||
| {...props} | ||
| className={clsx('navbar-sidebar__backdrop', props.className)} | ||
| /> | ||
| ); | ||
| } | ||
| export default function NavbarLayout({children}) { | ||
| const { | ||
| navbar: {hideOnScroll, style}, | ||
| } = useThemeConfig(); | ||
| const mobileSidebar = useNavbarMobileSidebar(); | ||
| const {navbarRef, isNavbarVisible} = useHideableNavbar(hideOnScroll); | ||
| return ( | ||
| <nav | ||
| ref={navbarRef} | ||
| aria-label={translate({ | ||
| id: 'theme.NavBar.navAriaLabel', | ||
| message: 'Main', | ||
| description: 'The ARIA label for the main navigation', | ||
| })} | ||
| className={clsx( | ||
| 'navbar', | ||
| 'navbar--fixed-top', | ||
| hideOnScroll && [ | ||
| styles.navbarHideable, | ||
| !isNavbarVisible && styles.navbarHidden, | ||
| ], | ||
| { | ||
| 'navbar--dark': style === 'dark', | ||
| 'navbar--primary': style === 'primary', | ||
| 'navbar-sidebar--show': mobileSidebar.shown, | ||
| }, | ||
| )}> | ||
| {children} | ||
| <NavbarBackdrop onClick={mobileSidebar.toggle} /> | ||
| <NavbarMobileSidebar /> | ||
| </nav> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| .navbarHideable { | ||
| transition: transform var(--ifm-transition-fast) ease; | ||
| } | ||
|
|
||
| .navbarHidden { | ||
| transform: translate3d(0, calc(-100% - 2px), 0); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import React from 'react'; | ||
| import Logo from '@theme/Logo'; | ||
| export default function NavbarLogo() { | ||
| return ( | ||
| <Logo | ||
| className="navbar__brand" | ||
| imageClassName="navbar__logo" | ||
| titleClassName="navbar__title text--truncate" | ||
| /> | ||
| ); | ||
| } |
Oops, something went wrong.