-
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 pull request #35 from SilasBerger/feature/more-components
Add tabs and MDX syntax for tiles.
- Loading branch information
Showing
31 changed files
with
353 additions
and
110 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,37 +1,77 @@ | ||
| --- | ||
| sidebar_label: Tiles | ||
| title: Tiles | ||
| --- | ||
|
|
||
| import TileGrid, {Layout} from "@site/src/app/components/tiles/TileGrid"; | ||
| import Tile from "@site/src/app/components/tiles/Tile"; | ||
|
|
||
| # Tiles :seeCode[https://github.com/SilasBerger/teaching-website/blob/main/content/material/Components-Gallery/02-Tiles.mdx] | ||
| ## Tile types | ||
| <TileGrid> | ||
| <Tile title="Title"></Tile> | ||
| <Tile title="Title and body">This tile has a title and a body</Tile> | ||
| <Tile title="Title, body, link" href="#">This tile has a title, a body, and a link</Tile> | ||
| <Tile title="Title and link" href="#"></Tile> | ||
| ::::Tiles | ||
| :::Tile[Title] | ||
| ::: | ||
|
|
||
| :::Tile[Title and body] | ||
| This tile has a title and a body | ||
| ::: | ||
|
|
||
| </TileGrid> | ||
| :::Tile[Title, body, link]{href="#"} | ||
| This tile has a title, a body, and a link | ||
| ::: | ||
|
|
||
| :::Tile[Title and link]{href="#"} | ||
| ::: | ||
| :::: | ||
|
|
||
| ## Larger tiles | ||
| <TileGrid layout={Layout.LARGE_TILES}> | ||
| <Tile title="Alpha">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt</Tile> | ||
| <Tile title="Bravo">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt</Tile> | ||
| <Tile title="Charlie">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt</Tile> | ||
| <Tile title="Delta">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt</Tile> | ||
| </TileGrid> | ||
| ::::Tiles{layout="large"} | ||
| :::Tile[Alpha] | ||
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt | ||
| ::: | ||
|
|
||
| :::Tile[Bravo] | ||
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt | ||
| ::: | ||
|
|
||
| :::Tile[Charlie] | ||
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt | ||
| ::: | ||
|
|
||
| :::Tile[Delta] | ||
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt | ||
| ::: | ||
| :::: | ||
|
|
||
| ## Smaller tiles (and without grow-on-hover) | ||
| <TileGrid layout={Layout.SMALL_TILES} preventGrowOnHover={true}> | ||
| <Tile title="Alpha">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt</Tile> | ||
| <Tile title="Bravo">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt</Tile> | ||
| <Tile title="Charlie">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt</Tile> | ||
| <Tile title="Delta">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt</Tile> | ||
| <Tile title="Echo">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt</Tile> | ||
| <Tile title="Foxtrot">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt</Tile> | ||
| <Tile title="Golf">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt</Tile> | ||
| <Tile title="Hotel">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt</Tile> | ||
| </TileGrid> | ||
| ::::Tiles{layout="small" preventGrowOnHover="true"} | ||
| :::Tile[Alpha] | ||
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt | ||
| ::: | ||
|
|
||
| :::Tile[Bravo] | ||
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor inviduntv | ||
| ::: | ||
|
|
||
| :::Tile[Charlie] | ||
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt | ||
| ::: | ||
|
|
||
| :::Tile[Delta] | ||
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt | ||
| ::: | ||
|
|
||
| :::Tile[Echo] | ||
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt | ||
| ::: | ||
|
|
||
| :::Tile[Foxtrot] | ||
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt | ||
| ::: | ||
|
|
||
| :::Tile[Golf] | ||
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt | ||
| ::: | ||
|
|
||
| :::Tile[Hotel] | ||
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt | ||
| ::: | ||
| :::: | ||
|
|
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
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
1 change: 1 addition & 0 deletions
1
content/material/Components-Gallery/08-Material-Design-Icons.mdx
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,73 @@ | ||
| --- | ||
| sidebar_label: Tabs | ||
| title: Tabs | ||
| --- | ||
|
|
||
| # Tabs :seeCode[https://github.com/SilasBerger/teaching-website/blob/main/content/material/Components-Gallery/09-Tabs.mdx] | ||
| Tabs are a builtin component provided by the Docusaurus default theme. | ||
|
|
||
| ::::Tabs | ||
| :::Tab[Windows]{value="win"} | ||
| :::insight[Paths on Windows :mdi[linux]] | ||
| On Windows :mdi[microsoft-windows], paths take the form `C:\foo\bar`. | ||
| ::: | ||
|
|
||
| :::Tab[macOS]{value="macos"} | ||
| :::insight[Paths on macOS] | ||
| On macOS :mdi[apple], paths are specified in the Unix-like style `/foo/bar` | ||
| ::: | ||
|
|
||
| :::Tab[Linux]{value="linux"} | ||
| :::insight[Paths on Linux] | ||
| On Linux :mdi[linux], just like on macOS, we use Unix-like paths, such as `/foo/bar`. | ||
| ::: | ||
| :::: | ||
|
|
||
| ## Synchronized tab groups | ||
| The above tab group is set to have a `groupId` of `operating-systems`. If we now add a second group with the same `groupId`, you will notice that both groups change their selected tab whenever we change it in either one of them. The exception here being the `FreeBSD` tab: Since it only exists within the second group, selecting that tab won't affect the state of the first one. | ||
|
|
||
| ::::Tabs | ||
| :::Tab[Windows]{value="win"} | ||
| Microsoft Windows is a group of several proprietary graphical operating system families developed and marketed by Microsoft. Each family caters to a certain sector of the computing industry. For instance, Windows NT for consumer and corporate desktops, Windows Server for servers, and Windows IoT for embedded systems. Defunct Windows families include Windows 9x, Windows Mobile, Windows Phone, and Windows Embedded Compact. _Source: [Wikipedia](https://en.wikipedia.org/wiki/Microsoft_Windows)._ | ||
| ::: | ||
|
|
||
| :::Tab[macOS]{value="macos"} | ||
| macOS, originally Mac OS X, previously shortened as OS X, is an operating system developed and marketed by Apple Inc. since 2001. It is the primary operating system for Apple's Mac computers. Within the market of desktop and laptop computers, it is the second most widely used desktop OS, after Microsoft Windows and ahead of all Linux distributions, including ChromeOS. _Source: [Wikipedia](https://en.wikipedia.org/wiki/MacOS)._ | ||
| ::: | ||
|
|
||
| :::Tab[Linux]{value="linux"} | ||
| Linux is a family of open-source Unix-like operating systems based on the Linux kernel, an operating system kernel first released on September 17, 1991, by Linus Torvalds. Linux is typically packaged as a Linux distribution (distro), which includes the kernel and supporting system software and libraries, many of which are provided by the GNU Project. Many Linux distributions use the word "Linux" in their name, but the Free Software Foundation uses and recommends the name "GNU/Linux" to emphasize the use and importance of GNU software in many distributions, causing some controversy. _Source: [Wikipedia](https://en.wikipedia.org/wiki/Linux)._ | ||
| ::: | ||
|
|
||
| :::Tab[FreeBSD]{value="freebsd"} | ||
| FreeBSD is a free and open-source Unix-like operating system descended from the Berkeley Software Distribution (BSD). The first version of FreeBSD was released in 1993 developed from 386BSD[3] and the current version runs on x86, ARM, PowerPC and RISC-V processors. The project is supported and promoted by the FreeBSD Foundation. _Source: [Wikipedia](https://en.wikipedia.org/wiki/FreeBSD)._ | ||
| ::: | ||
| :::: | ||
|
|
||
| ## Syntactical particularities | ||
| Consider the code used to create the first tab group on this page: | ||
|
|
||
| ```mdx | ||
| ::::Tabs | ||
| :::Tab[Windows]{value="win"} | ||
| :::insight[Paths on Windows :mdi[linux]] | ||
| On Windows :mdi[microsoft-windows], paths take the form `C:\foo\bar`. | ||
| ::: | ||
|
|
||
| :::Tab[macOS]{value="macos"} | ||
| :::insight[Paths on macOS] | ||
| On macOS :mdi[apple], paths are specified in the Unix-like style `/foo/bar` | ||
| ::: | ||
|
|
||
| :::Tab[Linux]{value="linux"} | ||
| :::insight[Paths on Linux] | ||
| On Linux :mdi[linux], just like on macOS, we use Unix-like paths, such as `/foo/bar`. | ||
| ::: | ||
| :::: | ||
| ``` | ||
|
|
||
| For this code to render as expected, we need to follow two particular rules, which may not be obvious at first glance: | ||
| 1. The `Tab` parent must use a strictly higher count of leading colons than its `Tab` or Admonitions children (e.g. `::::Tabs` vs. `:::Tab`). This parent container must also have its own closing directive (i.e. `::::` for `::::Tabs`). _Source: [Discussion on GitHub](https://github.com/micromark/micromark-extension-directive/issues/8#issuecomment-965878986)._ | ||
| 2. Each `Tab` element must specify a `value` property, such as `{value="macos"}`. The semantics of this property are explained in the [previous section](#synchronized-tab-groups). | ||
|
|
||
| Note that the indentation is only used to improve legibility and does not affect the semantics of this code. |
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 |
|---|---|---|
| @@ -1,5 +1,2 @@ | ||
| import TileGrid, {Layout} from "@site/src/app/components/tiles/TileGrid"; | ||
| import Tile from "@site/src/app/components/tiles/Tile"; | ||
|
|
||
| # Components | ||
| A gallery and development sandbox for React components. |
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
1 change: 1 addition & 0 deletions
1
content/material/Microbit/Projektideen-Python/01-Health-Points.mdx
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
1 change: 1 addition & 0 deletions
1
content/material/Microbit/Projektideen-Python/03-Maqueen-RC-Car.mdx
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
Oops, something went wrong.