Skip to content

fix(static): restructure static assets and fix ordering #1083

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dineshpinto merged 1 commit into from
Dec 18, 2025
Merged

fix(static): restructure static assets and fix ordering #1083

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 38 additions & 1 deletion CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ Run these locally before submitting a PR.

## <a id="diagrams-style-guide"></a> Diagrams style guide

Use these defaults to keep diagrams consistent in light/dark mode.
Use these defaults to keep diagrams consistent across light and dark mode.

| Element | Light Mode | Dark Mode | Notes |
| :----------------------- | :--------- | :-------- | :----------------------------------------------- |
Expand All @@ -135,6 +135,43 @@ Use these defaults to keep diagrams consistent in light/dark mode.

See the [homepage architecture diagram](https://dev.flare.network/#understand-the-architecture) for an example.

### Diagram location

- Store all static assets under `static/img/`.
- **Documentation assets** that belong to a specific docs area (for example `network`, `ftso`, `fdc`) must live under `static/img/docs/<area>/`.
- **Shared site assets** (used across the UI such as menu icons, logos, and general UI graphics) must live under `static/img/ui/`.
- **Social icons** must live under `static/img/social-icons/`.

Directory layout:

```plaintext
static/img
├── docs
│   ├── fassets
│   ├── fdc
│   ├── ftso
│   ├── network
│   ├── run-node
│   ├── smart-accounts
│   └── support
├── social-icons
└── ui
```

### Diagram naming convention

- Use kebab-case for new files and folders.
- Theme variants must use dot suffixes:
- Light: `*.light.svg`
- Dark: `*.dark.svg`

Example:

```plaintext
ftso-architecture.light.svg
ftso-architecture.dark.svg
```

## Need Help?

If you get stuck or want feedback on an approach, open a [GitHub Issue](https://github.com/flare-foundation/developer-hub/issues).
4 changes: 2 additions & 2 deletions docs/1-intro.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,8 +183,8 @@ Its native data protocols - [Flare Time Series Oracle](/ftso/overview) and [Flar
<ThemedImage
alt="Flare Systems Protocol with enshrined FTSO and FDC."
sources={{
light: useBaseUrl("img/flare_architecture_light.svg"),
dark: useBaseUrl("img/flare_architecture_dark.svg"),
light: useBaseUrl("img/docs/flare-architecture.light.svg"),
dark: useBaseUrl("img/docs/flare-architecture.dark.svg"),
}}
/>

Expand Down
4 changes: 2 additions & 2 deletions docs/fassets/1-overview.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,8 @@ Agents and a community-provided collateral pool ensure trustlessness through ove
<ThemedImage
alt="FTSO Update Architecture"
sources={{
light: useBaseUrl("img/fassets/flare_fassets_architecture_light.svg"),
dark: useBaseUrl("img/fassets/flare_fassets_architecture_dark.svg"),
light: useBaseUrl("img/docs/fassets/flare_fassets_architecture_light.svg"),
dark: useBaseUrl("img/docs/fassets/flare_fassets_architecture_dark.svg"),
}}
/>

Expand Down
4 changes: 2 additions & 2 deletions docs/fassets/2-minting.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ Any user can mint FAssets.
<ThemedImage
alt="FAssets Minting Process"
sources={{
light: useBaseUrl("img/fassets/flare_fassets_minting_light.svg"),
dark: useBaseUrl("img/fassets/flare_fassets_minting_dark.svg"),
light: useBaseUrl("img/docs/fassets/flare_fassets_minting_light.svg"),
dark: useBaseUrl("img/docs/fassets/flare_fassets_minting_dark.svg"),
}}
/>

Expand Down
8 changes: 6 additions & 2 deletions docs/fassets/4-collateral.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,8 +164,12 @@ The following thresholds are set by each agent according to their own preference
<ThemedImage
alt="FAssets Collateral Ratio"
sources={{
light: useBaseUrl("img/fassets/flare_fassets_collateral_ratio_light.svg"),
dark: useBaseUrl("img/fassets/flare_fassets_collateral_ratio_dark.svg"),
light: useBaseUrl(
"img/docs/fassets/flare_fassets_collateral_ratio_light.svg",
),
dark: useBaseUrl(
"img/docs/fassets/flare_fassets_collateral_ratio_dark.svg",
),
}}
/>

Expand Down
4 changes: 2 additions & 2 deletions docs/fassets/5-core-vault.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,10 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
alt="FAssets Core Vault Architecture"
sources={{
light: useBaseUrl(
"img/fassets/flare_fassets_core_vault_architecture_light.svg",
"img/docs/fassets/flare_fassets_core_vault_architecture_light.svg",
),
dark: useBaseUrl(
"img/fassets/flare_fassets_core_vault_architecture_dark.svg",
"img/docs/fassets/flare_fassets_core_vault_architecture_dark.svg",
),
}}
/>
Expand Down
20 changes: 10 additions & 10 deletions docs/fassets/_minting_resources.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,16 @@ You can mint FAssets on either of the following dApps:

### Supported Wallets

| Wallet | <ThemedImage alt="Flare" style={{ width: "20px", height: "20px" }} sources={{ light: useBaseUrl("img/flare_icon.svg"), dark: useBaseUrl("img/flare_icon_dark.svg") }} /> | <ThemedImage alt="XRPL" style={{ width: "20px", height: "20px" }} sources={{ light: useBaseUrl("img/xrp_icon.svg"), dark: useBaseUrl("img/xrp_icon_dark.svg") }} /> | Notes |
| ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
| [Bifrost](https://bifrostwallet.com/) | ✅ | ✅ | Supports both networks. [Tutorial](https://www.youtube.com/watch?v=1lETSE9YlXQ) |
| [Ledger](https://www.ledger.com/) | ✅ | ✅ | Hardware wallet supporting both networks. [Tutorial](https://youtu.be/WkdWZJJBem0) |
| [Luminite](https://luminite.app/) | ✅ | ✅ | Integrated FAssets support with DeFi utilities |
| [OxenFlow](https://oxenflow.io/) | ✅ | ✅ | Available via iOS app |
| [MetaMask](https://metamask.io/) | ✅ | | EVM wallet for Flare transactions |
| [Rabby](https://rabby.io/) | ✅ | | EVM wallet for Flare transactions |
| EVM Wallets with [WalletConnect](https://walletconnect.com/) | ✅ | | Any EVM-compatible wallet supporting WalletConnect |
| [Xaman](https://xaman.app/) | | ✅ | XRPL wallet only. [Tutorial](https://youtu.be/-3TPLIszPUc) |
| Wallet | <ThemedImage alt="Flare" style={{ width: "20px", height: "20px" }} sources={{ light: useBaseUrl("img/ui/flare-icon.light.svg"), dark: useBaseUrl("img/ui/flare-icon.dark.svg") }} /> | <ThemedImage alt="XRPL" style={{ width: "20px", height: "20px" }} sources={{ light: useBaseUrl("img/ui/xrp-icon.light.svg"), dark: useBaseUrl("img/ui/xrp-icon.dark.svg") }} /> | Notes |
| ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
| [Bifrost](https://bifrostwallet.com/) | ✅ | ✅ | Supports both networks. [Tutorial](https://www.youtube.com/watch?v=1lETSE9YlXQ) |
| [Ledger](https://www.ledger.com/) | ✅ | ✅ | Hardware wallet supporting both networks. [Tutorial](https://youtu.be/WkdWZJJBem0) |
| [Luminite](https://luminite.app/) | ✅ | ✅ | Integrated FAssets support with DeFi utilities |
| [OxenFlow](https://oxenflow.io/) | ✅ | ✅ | Available via iOS app |
| [MetaMask](https://metamask.io/) | ✅ | | EVM wallet for Flare transactions |
| [Rabby](https://rabby.io/) | ✅ | | EVM wallet for Flare transactions |
| EVM Wallets with [WalletConnect](https://walletconnect.com/) | ✅ | | Any EVM-compatible wallet supporting WalletConnect |
| [Xaman](https://xaman.app/) | | ✅ | XRPL wallet only. [Tutorial](https://youtu.be/-3TPLIszPUc) |

:::info
To complete the full minting process, you may need:
Expand Down
8 changes: 4 additions & 4 deletions docs/fassets/guides/2-create-fasset-agent-ui.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@ authors: [fassko]
keywords: [fassets, xrp, btc, doge flare-network, flare-network]
---

import FAssetsAgentInterface from "/static/img/fassets/fassets-agent.png";
import FAssetsAgentInterfaceAddVault from "/static/img/fassets/fassets-agent-add-vault.png";
import FAssetsAgentInterfaceAddVaultForm from "/static/img/fassets/fassets-agent-add-vault-form.png";
import FAssetsAgentInterfaceVaultOperations from "/static/img/fassets/fassets-agent-vault-operations.png";
import FAssetsAgentInterface from "/static/img/docs/fassets/agent-ui/fassets-agent.png";
import FAssetsAgentInterfaceAddVault from "/static/img/docs/fassets/agent-ui/fassets-agent-add-vault.png";
import FAssetsAgentInterfaceAddVaultForm from "/static/img/docs/fassets/agent-ui/fassets-agent-add-vault-form.png";
import FAssetsAgentInterfaceVaultOperations from "/static/img/docs/fassets/agent-ui/fassets-agent-vault-operations.png";

The FAssets Agent user interface (UI) is designed to provide a seamless and intuitive experience for users managing the FAssets agent. It allows users to monitor the agent bot and create and manage FAssets agent vaults.

Expand Down
12 changes: 6 additions & 6 deletions docs/fdc/1-overview.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,8 @@ It allows users to submit attested data that smart contracts can trust, eliminat
<ThemedImage
alt="FDC Architecture Diagram"
sources={{
light: useBaseUrl("img/fdc-overview/fdc_architecture_light.svg"),
dark: useBaseUrl("img/fdc-overview/fdc_architecture_dark.svg"),
light: useBaseUrl("img/docs/fdc/overview/fdc-architecture.light.svg"),
dark: useBaseUrl("img/docs/fdc/overview/fdc-architecture.dark.svg"),
}}
/>

Expand All @@ -55,8 +55,8 @@ Operating a DA Layer is permissionless—anyone can run a DA Layer service by so
<ThemedImage
alt="DA Layer Diagram"
sources={{
light: useBaseUrl("img/fdc-overview/da_layer_light.svg"),
dark: useBaseUrl("img/fdc-overview/da_layer_dark.svg"),
light: useBaseUrl("img/docs/fdc/overview/da-layer.light.svg"),
dark: useBaseUrl("img/docs/fdc/overview/da-layer.dark.svg"),
}}
/>

Expand Down Expand Up @@ -93,8 +93,8 @@ Due to the waiting period between steps **2** and **3**, where the round is fina
<ThemedImage
alt="User Workflow Diagram"
sources={{
light: useBaseUrl("img/fdc-overview/user_workflow_light.svg"),
dark: useBaseUrl("img/fdc-overview/user_workflow_dark.svg"),
light: useBaseUrl("img/docs/fdc/overview/user-workflow.light.svg"),
dark: useBaseUrl("img/docs/fdc/overview/user-workflow.dark.svg"),
}}
/>

Expand Down
Loading