diff --git a/blog/2025-01-14-just-starting.md b/blog/2025-01-14-just-starting.md
deleted file mode 100644
index be8e592..0000000
--- a/blog/2025-01-14-just-starting.md
+++ /dev/null
@@ -1,14 +0,0 @@
----
-slug: Starting
-title: Starting
-tags: [make, build, sustainable, water]
----
-
-# Toddler Sink
-
-A filtering and water circulating sink for toddlers that they can start using from 12 months and up.
-
-Save water without limiting your child's play with water.
-
-Here's a list of materials needed to construct this sink:
-
diff --git a/blog/2025-01-14-just-starting.mdx b/blog/2025-01-14-just-starting.mdx
new file mode 100644
index 0000000..6be25f5
--- /dev/null
+++ b/blog/2025-01-14-just-starting.mdx
@@ -0,0 +1,26 @@
+---
+slug: Starting
+title: Starting
+tags: [make, build, sustainable, water]
+---
+
+# Toddler Sink
+
+A filtering and water circulating sink for toddlers that they can start using from 12 months and up.
+
+Save water without limiting your child's play with water.
+
+Here's a list of materials needed to construct this sink:
+
+import ImageCarousel from '@site/src/components/ImageCarousel';
+
+
+
+
diff --git a/docs/Build_Guide/bom.md b/docs/Build_Guide/bom.md
new file mode 100644
index 0000000..0a98dee
--- /dev/null
+++ b/docs/Build_Guide/bom.md
@@ -0,0 +1,43 @@
+---
+title: List of materials (BOM)
+description: Add description
+sidebar_position: 1
+---
+
+#### Here's the list of the materials needed to construct a Piqpoc sink.
+
+**For the base structure:**
+- [Ikea Nissafors](https://www.ikea.com/es/es/p/nissafors-carrito-verde-claro-10606782/#content): A similar tray would do. But we chose this one for the ease of adjusting its height, its size fitting nicely with the plastic washbasin tray.
+- 2 x [containers to store water](https://www.ikea.com/es/es/p/samla-caja-con-tapa-transparente-s09440839/): One for clean and one for dirty water: We used these from IKEA for convenience of getting all materials from the same store. Any bucket that fits would do the job. We'd suggest to use at least 5 liters for less frequent refilling.
+- 3/3.5/4 mm x 10/15mm screws with nuts: You'd need just 3 set of screws and nuts.
+- [Plastic tray from Ikea](https://www.ikea.com/es/es/p/trofast-caja-naranja-claro-20582083/): Feel free to use the colour combination you like.
+
+
+**For running water:**
+
+- [DC pump (5V)](https://www.amazon.es/dp/B0B24G8WP7)
+- 1m of hose in adequate size for the pump you purchase, can be found in local hardware or aquiarium stores
+
+**For the Switch Box**
+
+- [Illuminated Pushbutton](https://es.aliexpress.com/item/1005003112570775.html): We used a button like this one, but purchased it from the local electronics shop instead. Would suggest you to do the same.
+- [USB-C adapter](https://www.amazon.es/dp/B0CDBZZQBZ): One of these did the job for us. If you have any existing USB adapter, you can use it.
+- Small size [Tupperbox](https://lilihomepiera.com/products/fiambrera-rectangular-ubox-0-4l-%E7%9A%84%E5%89%AF%E6%9C%AC?variant=47440211804508) to use as a switchbox. (alternatively you can 3d print the switch box using the files we provide)
+
+:::info[materials]
+Alternatively you can 3d print your swtichbox using the files we provide. ADD FILE HERE!
+:::
+
+**For the Faucet**
+
+* A water toy that can be converted to a faucet: You can be creative to use any toy that can resemble or function as a faucet. The only criteria is that it needs to guide the hose from the pump into the washbasin. We used [one of these toys](https://www.amazon.es/dp/B0BN7B9G9R) that we had at home.
+
+:::info[materials]
+Alternatively you can 3d print your faucet using the files we provide. ADD FILE HERE!
+:::
+
+
+**Tools**
+- Drill and drill bits for metal and plastic (5.5mm, 3.5mm)
+- Solder iron
+- Hot glue gun with the accompanying size of glue
diff --git a/docs/Build_Guide/del.md b/docs/Build_Guide/del.md
new file mode 100644
index 0000000..68aaa21
--- /dev/null
+++ b/docs/Build_Guide/del.md
@@ -0,0 +1,59 @@
+---
+title: Delete later
+description: ...
+sidebar_position: 2
+---
+
+Here's a step by step guide to build the base structure of the sink yourself.
+
+## Step 1 - Assemble and Customise the Base
+
+**1** **Unpack**: Open the Ikea Nissafors box and follow the included manual to build the base structure. There will be some changes you need to make in order to customise the piece into a sink.
+
+**2** **Modify top tray (Turn it into a washbasin)**:
+ * Position top tray at your child's height. See if you can use some of the existing holes that are in place for the top tray. We were able to make use of the existing holes as my son was sufficiently high.
+ * Use the higher wall pieces from the bottom tray as the side and back walls for the washbasin (top tray). Keeping the front piece lower will allow easier access to the faucet.
+ * This new combination of the top tray requires at least 4 additional holes. If you’re doing all the holes yourself, you’ll need to drill 8 holes.
+ * Mark the locations for the holes, measuring the distances of the new holes to the existing ones.
+ * Drill the additional holes. Only drill on the inside of metal frame only (holes don’t need to go all the way through). Use a 5.5mm bit (or use 5mm and expand the hole slightly)
+ * Install the tray sides. Only install the sides of the tray, and not the central piece since we’ll insert the washbasin there. For the holes you drilled, you can use the included plastic caps—no need to use extra screws. For existing holes, Ikea provided some screws to use.
+- Install the other trays as in original instructions with the remaining pieces.
+
+⠀**Result**: A customized cart ready for washbasin installation.
+
+## Step 2
+
+- **Prepare the Washbasin**
+- **Converting Plastic Tray to Washbasin**
+
+Now we'll convert the plastic tray into a washbasin.
+
+
+⠀**Steps**:
+**1** **Drill drainage holes**: Create 7 holes on each side of the tray at the deepest edge points to ensure complete water drainage.
+**2** **Check fit**: The modified tray should now resemble a washbasin and sit properly on the top cart frame.
+**3** **Drill pivot holes**: Locate the center of the plastic tray and drill holes slightly offset from center (to avoid the plastic bumper). Ensure holes align on both sides (offset the bumper to the same side on both sides) and match your screw diameter.
+**4** **Secure nuts**:
+ * Screw nuts onto bolts in the washbasin holes
+ * Apply hot glue around each nut to lock in position
+ * Once glue dries, remove screws—nuts stay permanently fixed
+
+⠀**Result**: Washbasin ready for pivot installation with secure, glued-in-place nuts.
+
+
+
+import ImageCarousel from '@site/src/components/ImageCarousel';
+
+
+
+
+:::info[materials]
+Here's a list of materials needed to construct this sink:
+:::
diff --git a/docs/Build_Guide/first2.md b/docs/Build_Guide/first2.md
new file mode 100644
index 0000000..077d766
--- /dev/null
+++ b/docs/Build_Guide/first2.md
@@ -0,0 +1,80 @@
+---
+title: Building the base
+description: Step-by-step guide to creating a mouse from plastic waste
+---
+
+import StepWithCarousel from '@site/src/components/StepWithCarousel';
+
+[[INSERT VIDEO HERE]]
+
+## Step 1: Assemble and customise the base structure
+
+We'll start with assembling the base structure and making the required modifications to turn it into a sink.
+
+
+
+
+ * **1.1 Unpack**: Open the Ikea Nissafors box and follow the included manual to build the base structure. There are some changes you need to make in order to customise it into a sink that are explained in this page.
+ * **1.2 Adjust height**: Position top tray at your child's height. The washbasin should be below their elbow height. In this heaight, see if you can use the existing holes of the top tray. We were able to make use of the existing holes as my son was sufficiently high.
+ * **1.3 Modify top tray combination**: Use the higher wall pieces from the bottom tray as the side and back walls for the washbasin (top tray). Keeping a lower front piece will allow easier access to the faucet.
+ * **1.4 Mark location of additional holes to drill**: The new combination of the top tray walls requires at least 4 additional holes, if you make use of the existing holes. If not, you need to drill all 8 holes yourself. Mark the locations for the holes. If you're using existing holes, measure the distances of the new holes to the existing ones using a side piece of the tray.
+ * **1.5 Drill the additional holes**: Only drill on the inside of metal frame (no need to drill all the way through). Use a 5.5mm bit (or use 5mm and expand the hole slightly) to be able to use the provided plastic pieces.
+ * **1.6 Install the top tray**: Only install the sides, and not the central surface since we’ll insert the washbasin there. For existing holes, use the scres Ikea provided.
+ * **1.7 Install the middle and bottom trays**: Given the customisation on the top tray, we used the pieces originally for the top tray on the bottom tray.
+
+ ⠀**Result**: The trolley is customized and ready for washbasin installation.
+
+
+
+
+## Step 2: Prepare the washbasin
+
+Now we'll convert the plastic tray into a washbasin.
+
+
+
+
+ * **2.1 Drill drainage holes**: Create at least 5 holes on each side of the tray at the deepest edges to ensure complete water drainage. The modified tray should now resemble a washbasin and sit properly on the top tray of the frame.
+ * **2.2 Drill pivot holes**: Locate the center of the plastic tray and drill holes slightly offset from center (to avoid the plastic bumper in the exact center). Ensure the offset is on the same side on both sides. Drill matching your screw diameter.
+ * **2.4 Fix the nuts**:
+ * Screw nuts onto bolts inside the washbasin holes
+ * Apply hot glue around each nut to lock in position
+ * Once glue dries, remove screws—nuts stay permanently fixed
+
+ **Result**: Washbasin ready for installation with glued-in-place nuts.
+
+
+
+## Step 3: Enabling pivoting motion of the washbasin
+
+
+
+
+ Fit the electronic components like switches, scroll wheel, and PCB into the shell. Secure everything with screws or clips, then test the mouse.
+
+
diff --git a/docs/Build_Guide/switch.md b/docs/Build_Guide/switch.md
new file mode 100644
index 0000000..2d95261
--- /dev/null
+++ b/docs/Build_Guide/switch.md
@@ -0,0 +1,29 @@
+---
+id: Switch
+title: Switch
+description: Save water without limiting your child's play with water.
+---
+
+Here's a step by step guide to build the base structure of the sink yourself.
+
+### Body of materials
+
+
+
+
+
+import ImageCarousel from '@site/src/components/ImageCarousel';
+
+
+
+
+:::info[materials]
+Here's a list of materials needed to construct this sink:
+:::
diff --git a/docs/build/first.md b/docs/build/first.md
deleted file mode 100644
index b4d2d59..0000000
--- a/docs/build/first.md
+++ /dev/null
@@ -1,14 +0,0 @@
----
-title: Toddler sink
-description: Save water without limiting your child's play with water.
----
-
-## A filtering and water circulating sink for toddlers that they can start using from 12 months and up.
-
-Save water without limiting your child's play with water.
-
-
-
-:::info[materials]
-Here's a list of materials needed to construct this sink:
-:::
diff --git a/docs/start.md b/docs/start.md
index b4d2d59..1dc248d 100644
--- a/docs/start.md
+++ b/docs/start.md
@@ -1,14 +1,24 @@
---
-title: Toddler sink
+title: What is PiqPoc?
description: Save water without limiting your child's play with water.
+sidebar_position: 1
---
-## A filtering and water circulating sink for toddlers that they can start using from 12 months and up.
+## A filtering nomad sink for toddlers
+
+A filtering and water circulating sink for toddlers that they can start using from 12 months and up.
Save water without limiting your child's play with water.
+Key features:
+
+- No waste of water during playtime.
+- Children with 12 months and up can use it themselves independently.
+- You can place it anywhere in your home or outside. No need to connect it to the water system.
+
+Allow your child to enjoy water without wasting water.
+
+### [Insert intro video here]
+
-:::info[materials]
-Here's a list of materials needed to construct this sink:
-:::
diff --git a/docusaurus.config.js b/docusaurus.config.js
index b04050a..9237c19 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -42,7 +42,9 @@ const config = {
/** @type {import('@docusaurus/preset-classic').Options} */
({
docs: {
- sidebarPath: './sidebars.js',
+ sidebarPath: require.resolve('./sidebars.js'), // ✅ Must point to your sidebars.js
+ routeBasePath: 'docs', // or '/' if you moved docs to root
+ toc: false,
},
blog: {
showReadingTime: true,
diff --git a/package-lock.json b/package-lock.json
index d0846e2..a52422a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,9 +12,11 @@
"@docusaurus/preset-classic": "3.7.0",
"@mdx-js/react": "^3.0.0",
"clsx": "^2.0.0",
+ "lucide-react": "^0.523.0",
"prism-react-renderer": "^2.3.0",
"react": "^19.0.0",
- "react-dom": "^19.0.0"
+ "react-dom": "^19.0.0",
+ "react-swipeable": "^7.0.2"
},
"devDependencies": {
"@docusaurus/module-type-aliases": "3.7.0",
@@ -9951,6 +9953,15 @@
"yallist": "^3.0.2"
}
},
+ "node_modules/lucide-react": {
+ "version": "0.523.0",
+ "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.523.0.tgz",
+ "integrity": "sha512-rUjQoy7egZT9XYVXBK1je9ckBnNp7qzRZOhLQx5RcEp2dCGlXo+mv6vf7Am4LimEcFBJIIZzSGfgTqc9QCrPSw==",
+ "license": "ISC",
+ "peerDependencies": {
+ "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+ }
+ },
"node_modules/markdown-extensions": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/markdown-extensions/-/markdown-extensions-2.0.0.tgz",
@@ -15045,6 +15056,15 @@
"react": ">=15"
}
},
+ "node_modules/react-swipeable": {
+ "version": "7.0.2",
+ "resolved": "https://registry.npmjs.org/react-swipeable/-/react-swipeable-7.0.2.tgz",
+ "integrity": "sha512-v1Qx1l+aC2fdxKa9aKJiaU/ZxmJ5o98RMoFwUqAAzVWUcxgfHFXDDruCKXhw6zIYXm6V64JiHgP9f6mlME5l8w==",
+ "license": "MIT",
+ "peerDependencies": {
+ "react": "^16.8.3 || ^17 || ^18 || ^19.0.0 || ^19.0.0-rc"
+ }
+ },
"node_modules/readable-stream": {
"version": "3.6.2",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
diff --git a/package.json b/package.json
index 700b653..b0d2e06 100644
--- a/package.json
+++ b/package.json
@@ -18,9 +18,11 @@
"@docusaurus/preset-classic": "3.7.0",
"@mdx-js/react": "^3.0.0",
"clsx": "^2.0.0",
+ "lucide-react": "^0.523.0",
"prism-react-renderer": "^2.3.0",
"react": "^19.0.0",
- "react-dom": "^19.0.0"
+ "react-dom": "^19.0.0",
+ "react-swipeable": "^7.0.2"
},
"devDependencies": {
"@docusaurus/module-type-aliases": "3.7.0",
diff --git a/sidebars.js b/sidebars.js
index f9b3244..86cbc11 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -14,16 +14,11 @@
@type {import('@docusaurus/plugin-content-docs').SidebarsConfig}
*/
-const sidebars = {
- docs: [
- "start",
- {
- label: "Build your own",
- items: ["build/first"],
- type: "category",
- link: { type: "generated-index" },
- collapsed: false,
- },
- ],
+export default {
+ docs: [
+ {
+ type: 'autogenerated',
+ dirName: '.', // '.' means the current docs folder
+ },
+ ],
};
-export default sidebars;
diff --git a/src/components/ImageCarousel.js b/src/components/ImageCarousel.js
new file mode 100644
index 0000000..1c194aa
--- /dev/null
+++ b/src/components/ImageCarousel.js
@@ -0,0 +1,85 @@
+// src/components/ImageCarousel.js
+import clsx from 'clsx';
+import React, { useState, useEffect, useCallback } from 'react';
+import styles from './ImageCarousel.module.css';
+
+export default function ImageCarousel({ images }) {
+ const [currentIndex, setCurrentIndex] = useState(0);
+ const [isOpen, setIsOpen] = useState(false);
+
+ const currentImage = images[currentIndex];
+
+ const closeLightbox = () => setIsOpen(false);
+
+ const handleKeyDown = useCallback((e) => {
+ if (!isOpen) return;
+
+ switch (e.key) {
+ case 'Escape':
+ closeLightbox();
+ break;
+ case 'ArrowRight':
+ setCurrentIndex((prev) => (prev + 1) % images.length);
+ break;
+ case 'ArrowLeft':
+ setCurrentIndex((prev) => (prev - 1 + images.length) % images.length);
+ break;
+ }
+ }, [isOpen, images.length]);
+
+ useEffect(() => {
+ document.addEventListener('keydown', handleKeyDown);
+ return () => document.removeEventListener('keydown', handleKeyDown);
+ }, [handleKeyDown]);
+
+ return (
+ <>
+
setCurrentIndex(i)}
+ />
+ ))}
+ .default})
-
-:::info[materials]
-Here's a list of materials needed to construct this sink:
-:::
diff --git a/docs/start.md b/docs/start.md
index b4d2d59..1dc248d 100644
--- a/docs/start.md
+++ b/docs/start.md
@@ -1,14 +1,24 @@
---
-title: Toddler sink
+title: What is PiqPoc?
description: Save water without limiting your child's play with water.
+sidebar_position: 1
---
-## A filtering and water circulating sink for toddlers that they can start using from 12 months and up.
+## A filtering nomad sink for toddlers
+
+A filtering and water circulating sink for toddlers that they can start using from 12 months and up.
Save water without limiting your child's play with water.
+Key features:
+
+- No waste of water during playtime.
+- Children with 12 months and up can use it themselves independently.
+- You can place it anywhere in your home or outside. No need to connect it to the water system.
+
+Allow your child to enjoy water without wasting water.
+
+### [Insert intro video here]
+