Custom Components

This project includes several custom components to enhance your documentation. This guide explains how to use them.

3D Model Viewer

The ModelViewer component allows you to embed interactive 3D models directly in your documentation. It supports STL, OBJ, and GLTF/GLB formats.

Usage

Import the component and use it with the client:load directive (required for interactivity).

import ModelViewer from '../../../components/ModelViewer';

<ModelViewer client:load src="/models/example.stl" alt="Description of the model" />

Props

Prop	Type	Default	Description
src	string	Required	Path to the 3D model file (relative to public/).
alt	string	Optional	A label displayed in the top-left corner of the viewer.
height	string	'400px'	Height of the viewer container.
type	string	Auto-detected	Explicitly set file type (‘stl’, ‘obj’, ‘gltf’, ‘glb’).

Example

Example STL Model

---

File Download

The FileDownload component provides a styled button for users to download files, such as source code, 3D models, or PDFs.

Usage

import FileDownload from '../../../components/FileDownload';

<FileDownload
  src="/models/example.stl"
  title="Download Model"
  description="STL format for 3D printing"
/>

Props

Prop	Type	Default	Description
src	string	Required	Path to the file to download.
title	string	Filename	Main text displayed on the button.
description	string	Optional	Smaller text displayed below the title.

Example

Download Example ModelClick to download the STL file.

---

Tools Used

The ToolsSection and Tool components allow you to display a list of tools used in a project or guide, complete with logos and links.

Usage

import { ToolsSection, Tool } from '../../../components/ToolsUsed';

<ToolsSection>
  <Tool
    name="FreeCAD"
    image="https://cdn.simpleicons.org/freecad/CB333B"
    href="https://www.freecad.org/"
  />
  <Tool
    name="Bambu Studio"
    image="https://cdn.simpleicons.org/bambulab/00AE42"
    href="https://bambulab.com/en/software/bambu-studio"
  />
</ToolsSection>

Props (Tool)

Prop	Type	Default	Description
name	string	Required	The name of the tool.
image	string	Required	URL or path to the tool’s logo image.
href	string	Optional	URL to the tool’s website.

Example

FreeCAD

Bambu Studio

Fritzing