Skip to content

Commit

Permalink
Feature: Fancier board docs (betaflight#446)
Browse files Browse the repository at this point in the history
* Package: Add Lucide icon pack

* Feature: Add spec highlight grid

* Content: Update board docs with spec grid

* Content: Update Airbot SuperF4 diagram
  • Loading branch information
VitroidFPV committed Jul 28, 2024
1 parent a8084bd commit 86ebee4
Show file tree
Hide file tree
Showing 10 changed files with 220 additions and 58 deletions.
32 changes: 19 additions & 13 deletions docs/development/manufacturer/fc_documentation/fc-doc-example.mdx
Original file line number Diff line number Diff line change
@@ -1,33 +1,42 @@
---
title: Flight Controller Documentation Example
sidebar_custom_props:
specs:
target: AIRBOTSUPERF4
mcu: AT32F435
imu: ICM42688P
osd: MAX7456
barometer: DPS310
flash: W25Q128JVPQ (16MB)
dimensions: 36x39mm
mounting: 30.5x30.5mm
weight: 7.8g
---

import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'
import SpecGrid from '@site/src/components/SpecGrid'

# Airbot Fenix Super F4

<Tabs>

<TabItem value="specifications" label="Specifications" default>

## Main Features
<SpecGrid>

![AIRBOTSUPERF4 Top Angle Photo](./AIRBOTSUPERF4-images/AIRBOTSUPERF4-top-angle.webp)

</SpecGrid>

## Other Features

- Target: `AIRBOTSUPERF4`
- MCU: AT32F435
- IMU: ICM42688P
- Analog OSD: MAX7456
- Barometer: DPS310 (I2C)
- Flash Storage: W25Q128JVPQ (16MB)
- SD Card Slot: None
- Onboard Receiver: No
- Hardware Inverter: Yes
- Bluetooth: No
- WiFi: No
- Onboard RGB LED: 28x
- Mounting Holes: M4 30.5x30.5mm
- Dimensions: 36x39mm (W x L)
- Weight: 7.8g

## Input/Output

Expand Down Expand Up @@ -182,7 +191,6 @@ import TabItem from '@theme/TabItem'
<TabItem value="wiring" label="Wiring Diagrams">

![AIRBOTSUPERF4 Wiring Diagram](./AIRBOTSUPERF4-images/AIRBOTSUPERF4-diagram.png)
{/* user-made. Use manufacturer-provided media when available */}

</TabItem>

Expand All @@ -191,10 +199,8 @@ import TabItem from '@theme/TabItem'
![AIRBOTSUPERF4 Top Angle Photo](./AIRBOTSUPERF4-images/AIRBOTSUPERF4-top-angle.webp)

![AIRBOTSUPERF4 Top Photo](./AIRBOTSUPERF4-images/AIRBOTSUPERF4-top.png)
{/* user-made. Use manufacturer-provided media when available */}

![AIRBOTSUPERF4 Bottom Photo](./AIRBOTSUPERF4-images/AIRBOTSUPERF4-bottom.png)
{/* user-made. Use manufacturer-provided media when available */}

</TabItem>

Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,27 @@
---
sidebar_custom_props:
specs:
target: TARGETNAME
mcu: STM32F405
imu: ICM42688P
osd: MAX7456
barometer: DPS310
flash: W25Q128JVPQ (16MB)
dimensions: 36x39mm
mounting: 30.5x30.5mm
weight: 7.8g
---

import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'
import SpecGrid from '@site/src/components/SpecGrid'

{/* IMPORTS NECESSARY FOR TAB FUNCTIONALITY, DO NOT REMOVE */}

{/* fill the specs list above with the relevant information, don't change any of the keys unless you know what you're doing.
If a feature isn't present, just type "None". The target name should be the exact same as in the config repo,
the MCU, IMU, OSD and Baro should be the part name if applicable */}

{/* Fill out documentation content below. Document everything that applies to the board */}
{/* Instructions, examples and mandatory values are commented out */}

Expand All @@ -12,23 +31,17 @@ import TabItem from '@theme/TabItem'

<TabItem value="specifications" label="Specifications" default>

## Main Features
<SpecGrid>

{/* Add a photo that will be used as the cover for the page in markdown format */}

</SpecGrid>

## Other Features

{/* List the available features, if a specific feature is not present, write "No" */}
{/* List the remaining available features, if a specific feature is not present, write "No" */}
{/* The format and order of the list should stay the same */}

- Target: `TARGETNAME`
{/* as listed in the configurator */}
- MCU:
{/* part number */}
- IMU:
{/* part number */}
- Analog OSD:
{/* part name and used interface - MAX7456 (SPI 1) */}
- Barometer:
{/* part name and used interface - DPS310 (I2C) */}
- Flash Storage:
{/* part name and available space - W25Q128JVPQ (16MB) */}
- SD Card Slot:
{/* Yes/No */}
- Onboard Receiver:
Expand All @@ -41,12 +54,6 @@ import TabItem from '@theme/TabItem'
{/* Yes/No, if Yes, what interface - Yes (UART 2) */}
- Onboard RGB LED:
{/* Betaflight controlled LEDs, list total amount - 28x */}
- Mounting Holes:
{/* metric hole size and mounting pattern - M4 30.5x30.5mm */}
- Dimensions:
{/* length x width x height - 39x36x6mm */}
- Weight:
{/* to 1 decimal place - 7.8g */}

## Input/Output

Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
32 changes: 22 additions & 10 deletions docs/wiki/boards/current/AIRBOTSUPERF4/AIRBOTSUPERF4.mdx
Original file line number Diff line number Diff line change
@@ -1,29 +1,41 @@
---
sidebar_custom_props:
specs:
target: AIRBOTSUPERF4
mcu: AT32F435
imu: ICM42688P
osd: MAX7456
barometer: DPS310
flash: W25Q128JVPQ (16MB)
dimensions: 36x39mm
mounting: 30.5x30.5mm
weight: 7.8g
---

import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'
import SpecGrid from '@site/src/components/SpecGrid'

# Airbot Fenix Super F4

<Tabs>

<TabItem value="specifications" label="Specifications" default>

## Main Features
<SpecGrid>

![AIRBOTSUPERF4 Top Angle Photo](./AIRBOTSUPERF4-images/AIRBOTSUPERF4-top-angle.webp)

</SpecGrid>

## Other Features

- Target: `AIRBOTSUPERF4`
- MCU: AT32F435
- IMU: ICM42688P
- Analog OSD: MAX7456
- Barometer: DPS310 (I2C)
- Flash Storage: W25Q128JVPQ (16MB)
- SD Card Slot: None
- Onboard Receiver: No
- Hardware Inverter: Yes
- Bluetooth: No
- WiFi: No
- Onboard RGB LED: 28x
- Mounting Holes: M4 30.5x30.5mm
- Dimensions: 36x39mm (W x L)
- Weight: 7.8g

## Input/Output

Expand Down
32 changes: 21 additions & 11 deletions docs/wiki/boards/current/BRAHMA_F405/BRAHMA_F405.mdx
Original file line number Diff line number Diff line change
@@ -1,31 +1,41 @@
---
sidebar_custom_props:
specs:
target: BRAHMA_F405
mcu: STM32F405
imu: BMI270
osd: AT7456E (SPI 1)
barometer: DPS310 (I2C)
flash: W25Q256JVEIQ (32MB)
dimensions: 37.5x37.5x5mm
mounting: M4 30.5x30.5mm
weight: 9g
---

import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'
import SpecGrid from '@site/src/components/SpecGrid'

# Darkmatter Brahma F4 MK II

<Tabs>

<TabItem value="specifications" label="Specifications" default>

![Darkmatter Brahma F4 MK II](./BRAHMA_F405-images/BRAHMA_F405.jpg)
<SpecGrid>

![Top](./BRAHMA_F405-images/BRAHMA_F405-top.jpg)

</SpecGrid>

## Main Features
## Other Features

- Target: `BRAHMA_F405`
- MCU: STM32F405
- IMU: BMI270
- Analog OSD: AT7456E (SPI 1)
- Barometer: DPS310 (I2C)
- Flash Storage: W25Q256JVEIQ (32MB)
- SD Card Slot: No
- Onboard Receiver: No
- Hardware Inverter: Yes
- Bluetooth: No
- WiFi: No
- Onboard RGB LED: No
- Mounting Holes: M4 30.5x30.5mm
- Dimensions: 37.5x37.5x5mm
- Weight: 9g

## Input/Output

Expand Down
9 changes: 9 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
"docusaurus-lunr-search": "^3.3.1",
"docusaurus-plugin-sass": "^0.2.2",
"hast-util-is-element": "^1.1.0",
"lucide-react": "^0.414.0",
"prism-react-renderer": "^2.3.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
Expand Down
63 changes: 63 additions & 0 deletions src/components/SpecGrid/SpecBox.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import React from 'react';

export default function SpecBox({ icon, title, color, children, colSpan = 1 }) {
let bgColor = '';
let primaryTextColor = '';
let secondaryTextColor = '';
let childFontSize = '';

switch (color) {
case 'primary':
bgColor = 'bg-primary-500';
primaryTextColor = 'text-black';
secondaryTextColor = 'text-black';
childFontSize = '2xl:text-3xl lg:text-xl text-3xl';
break;
case 'secondary':
bgColor = 'bg-primary-500/10';
primaryTextColor = 'text-primary-500';
secondaryTextColor = '';
childFontSize = '2xl:text-2xl lg:text-xl text-2xl';
break;
case 'neutral':
bgColor = 'bg-neutral-500/20';
primaryTextColor = '';
secondaryTextColor = '';
childFontSize = '2xl:text-2xl lg:text-xl text-2xl';
break;
case 'neutral-light':
bgColor = 'bg-neutral-500/10';
primaryTextColor = '';
secondaryTextColor = '';
childFontSize = '2xl:text-xl lg:text-xl text-xl';
break;
default:
bgColor = 'bg-neutral-500/10';
primaryTextColor = '';
secondaryTextColor = '';
childFontSize = '2xl:text-2xl lg:text-xl text-2xl';
}

let colSpanClass = 'col-span-1';

switch (colSpan) {
case 2:
colSpanClass = 'col-span-2';
break;
case 3:
colSpanClass = 'col-span-3';
break;
default:
colSpanClass = 'col-span-1';
}

return (
<div className={`${bgColor} ${colSpanClass} rounded-lg flex flex-col gap-2 p-4`}>
<div className={`flex items-center gap-1 ${primaryTextColor}`}>
{icon}
<div className="font-bold">{title}</div>
</div>
<div className={`${secondaryTextColor} ${childFontSize} font-semibold`}>{children}</div>
</div>
);
}
Loading

0 comments on commit 86ebee4

Please sign in to comment.