newest dev changes

docusaurus.config.ts

@@ -97,7 +97,7 @@ const config: Config = {
 
   themeConfig: {
     colorMode: {
-      respectPrefersColorScheme: true,
+      respectPrefersColorScheme: false,
     },
     navbar: {
       title: 'Homepage',

src/components/EntityAttributes.tsx

@@ -0,0 +1,48 @@
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import React from "react";
+
+function calculateHearts(count: number) {
+    const full = Math.floor(count / 2);
+    const half = count % 2;
+    return { full, half };
+}
+
+export default function EntityAttributes(props: any) {
+    const fullImage = useBaseUrl("/img/full_heart.png");
+    const halfImage = useBaseUrl("/img/half_heart.png");
+    let heartAmount = calculateHearts(props.health);
+
+    return (
+        <div className="item-card">
+            <div className="item-card__header">
+                <h3 className="item-card__title">{"Attributes"}</h3>
+            </div>
+            {props.health && (
+                <div className="item-card__content">
+                    <div>
+                        <b>Health:</b> {props.health} (
+                    </div>
+                    {Array.from({ length: heartAmount.full }).map((_, index) => (
+                        <img
+                            key={index}
+                            src={fullImage}
+                            alt={"Full Heart icon"}
+                            width={11.25}
+                            height={11.25}
+                        />
+                    ))}
+                    {Array.from({ length: heartAmount.half }).map((_, index) => (
+                        <img
+                            key={index}
+                            src={halfImage}
+                            alt={"Half Heart icon"}
+                            width={11.25}
+                            height={11.25}
+                        />
+                    ))}
+                    )
+                </div>
+            )}
+        </div>
+    );
+}

src/components/ShowcaseBlock.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+
+export default function ShowcaseBlock(props: any) {
+    return (
+        <div style={{ display: 'flex', gap: '1rem', alignItems: 'flex-start' }}>
+            <div className="item-card">
+                <div className="item-card__header">
+                    <h3 className="item-card__title">{props.title}</h3>
+                </div>
+                <div className="item-card__content">
+                    <img
+                        src={useBaseUrl('/' + props.image)}
+                        alt={props.title}
+                        className="item-card__image"
+                    />
+                </div>
+            </div>
+            <div>
+                {props.children && (
+                    <div>
+                        {props.children}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

src/css/custom.css

@@ -28,7 +28,15 @@
   --ifm-color-primary-lightest: #4fddbf;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 
-  --content-divier: #2e2e32;
+  --box-outline: #5c626b;
+  --box-highlight: #2b2b2d;
+}
+
+[data-theme='light'] {
+
+
+    --box-outline: #dadde1;
+    --box-highlight: #f7f7f7;
 }
 
 .hash-link:link {
@@ -57,3 +65,47 @@ a.no-underline {
 .footer__copyright > p {
     margin: 0px;
 }
+
+.item-card {
+    display: inline-block;
+    border: 2px solid var(--box-outline);
+    font-family: Arial, sans-serif;
+    max-width: fit-content;
+    margin-bottom: 10px;
+}
+
+.item-card__header {
+    background-color: var(--box-highlight);
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--box-outline);
+}
+
+.item-card__title {
+    font-size: 14px;
+    font-weight: bold;
+    margin: 0;
+    text-align: center;
+}
+
+.item-card__content {
+    padding: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1px;
+    max-width: 100%;
+    justify-content: center;
+    align-items: center;
+}
+
+.item-card__image {
+    max-width: 100%;
+    height: auto;
+    display: block;
+}
+
+.item-textpart {
+    display: inline-flex;
+    gap: 1rem;
+    align-items: flex-start;
+    margin-bottom: 10px;
+}

sullysmod/about.mdx

@@ -2,4 +2,10 @@
 title: Sully's Mod - About
 ---
 
-Sully's Mod has a variety of different feature categories, which can all be toggled on and off. This wiki tries to explain the content of each of these categories in detail
+Sully’s Mod started out a few years ago when I decided to try and make a minecraft mod. I couldn’t think of a name and called it the first name that came to my head as a placeholder “Sully”, the name stuck and now people think my name is actually Sully.
+Back then it was made with MCreator and combined with the fact that I back then didn't have a good understanding of vanilla feel, it became more limited each version.
+I decided to completely revamp the mod, completely dumping the MCreator version and getting a coding team (Uraneptus, Stelle and KeKeCreations).
+With each feature I try to think it out as well as I can, making sure the feature is well-balanced, feels fun to play with and overall just feels like something new. It tries it’s best to feel like a Minecraft update full of random features.
+The mod is planned to have features for every player, explorers, builders and redstone engineers.
+
+All the features are put into different categories that can be toggled on or off. The wiki uses these categories as an orientation.

sullysmod/amber.mdx

@@ -0,0 +1,25 @@
+---
+title: Amber
+---
+import ShowcaseBlock from "../src/components/ShowcaseBlock";
+
+<ShowcaseBlock title="Amber Blocks" image="img/amber_blocks.gif">
+    There are multiple different types of Amber Blocks.
+    1. There is **Amber**, which is the transparent block you can find in caves.
+    2. Then there is **Rough Amber** which drops when mining **Amber** (even when using Silk Touch).
+    3. And then there are multiple decoration blocks, which are crafted from **Rough Amber**.
+</ShowcaseBlock>
+
+## Melting Amber
+When close to a light source like a torch or lava, any amber block (that has no frozen entity inside) will be set in a melting state.
+In melting state any entity slowly sinks into the block. The rest of the block's melting behavior varies depending on type of Amber block though.
+
+**Rough Amber** and its decoration blocks slow down any entity walking through it and will suffocate them if they are completely covered by amber.
+
+Regular **Amber** also slows down entities, but when the entity is fully covered, it will freeze the entity inside it and will stop melting.
+Breaking any of amber blocks that are responsible for keeping the entity frozen, will cause the other responsible blocks to break as well and will free the entity.
+
+## Producing Amber
+Since breaking Amber blocks drops **Rough Amber**, there has to be a different way to get more of the regular transparent **Amber**.
+To do that you can place an amber block above a cauldron and set it in melting state. Then it will start sweating amber drops, that slowly fill the cauldron.
+When the cauldron is full, you can pick up the content with a bucket and place it where ever you want your **Amber** Block to be.

sullysmod/amber/_category_.json

@@ -0,0 +1,3 @@
+{
+  "label": "Amber"
+}

sullysmod/artifacts/_category_.json

@@ -0,0 +1,3 @@
+{
+  "label": "Artifacts"
+}

sullysmod/bouldering_zombie/_category_.json

@@ -0,0 +1,3 @@
+{
+  "label": "Bouldering Zombie"
+}

sullysmod/bug_meat/_category_.json

@@ -0,0 +1,3 @@
+{
+  "label": "Bug Meat"
+}

sullysmod/copper_buttons.mdx

@@ -0,0 +1,20 @@
+---
+title: Copper Buttons
+---
+import ShowcaseBlock from "../src/components/ShowcaseBlock";
+
+<ShowcaseBlock title="Copper Buttons" image="img/copper_buttons.gif">
+    These buttons are made of copper and oxidize over time. Similar to regular copper blocks, you can wax, unwax and scrape them.
+</ShowcaseBlock>
+
+## Pulse Lengths
+The further Copper Buttons are oxidized, the longer their redstone pulse lasts. <br/>
+
+| Oxidization State | Pulse Length |
+|-------------------|--------------|
+| Unaffected        | 10 ticks     |
+| Exposed           | 20 ticks     |
+| Weathered         | 30 ticks     |
+| Oxidized          | 40 ticks     |
+
+Here a showcase of this feature: [Pulse Lengths](https://www.youtube.com/watch?v=WWvugTd5Hnw)

sullysmod/gem_lanterns.mdx

@@ -0,0 +1,10 @@
+---
+title: Gem Lanterns
+---
+import ShowcaseBlock from "../src/components/ShowcaseBlock";
+
+<ShowcaseBlock title="Gem Lanterns" image="img/gem_lanterns.gif">
+    These lantern blocks are made from gems like diamonds or emeralds but there are also lanterns for other materials like amber or quartz.
+
+    They are purely for decoration and emit a light level of 15.
+</ShowcaseBlock>

sullysmod/grindstone_polishing/_category_.json

@@ -0,0 +1,3 @@
+{
+  "label": "Grindstone Polishing"
+}

sullysmod/item_stand/_category_.json

@@ -0,0 +1,3 @@
+{
+  "label": "Item Stand"
+}

sullysmod/jade/_category_.json

@@ -0,0 +1,3 @@
+{
+  "label": "Jade"
+}

sullysmod/jungle_spider/_category_.json

@@ -0,0 +1,3 @@
+{
+  "label": "Jungle Spider"
+}

sullysmod/lanternfish/_category_.json

@@ -0,0 +1,3 @@
+{
+  "label": "Lanternfish"
+}

sullysmod/mauled.mdx

@@ -0,0 +1,9 @@
+---
+title: The Mauled
+---
+import ShowcaseBlock from "../src/components/ShowcaseBlock";
+import EntityAttributes from "../src/components/EntityAttributes";
+
+<ShowcaseBlock title="The Mauled" image="img/mauled.png">
+    <EntityAttributes health={26}/>
+</ShowcaseBlock>

sullysmod/petrified_wood/_category_.json

@@ -0,0 +1,3 @@
+{
+  "label": "Petrified Wood"
+}

sullysmod/piranha/_category_.json

@@ -0,0 +1,3 @@
+{
+  "label": "Piranha"
+}

sullysmod/potions/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Potions",
+  "description": "Some vanilla effects have no potion. We use some sully's mod materials to add them."
+}

sullysmod/tortoise/_category_.json

@@ -0,0 +1,3 @@
+{
+  "label": "Tortoise"
+}