Contour/README.md

# FluxNodes
![Landing](https://img.sudovanilla.com/4aZdSVi.png)

> The image shown is a concept

## Support Center and Documents
All articles for Flux's support center is located at `/src/content/docs/support/`

All documents such as Terms of Service or when polices need to be added, they should be located at `/src/content/docs/`.

### Articles
All articles are written in Markdown, do make sure you're adding the markdown file to the appropriate category folder.

Articles, at the least, should have a title and last updated:
```md
---
title: Title of Article
lastUpdated: 2024-03-15
---
```

### Feedback
<img width="200px" src="https://img.sudovanilla.com/EFORLiW.png">

[Feelback]() has been integrated into each article, this will help us know if an article is doing well or doing not well.

FluxNodes LLC has a Feelback account, email <u>korbs@sudovanilla.com</u> to get access so you can see how articles are performing.

### Components
In articles, you can add built-in components like asides, tabs, code, link cards, and cards.

> In order to add components to Markdown files, the file extension has to be <u>.mdx</u>

#### Asides
Aside Types: `note` | `tip` | `caution` | `danger`

Asides can be used to let users know of something like tips, warning, and alert of any kind if it needs to be hinted.

As an exmaple, let's say we provide a tutorial of turning a Java Minecraft server into a crack server. We can use a `danger` aside to alert customers that running a crack server can be risky as they are easier for hackers to get into.

We can do that like so:
```md
:::danger
Running your server with `online-mode` turned off can be risky. Doing this means hackers can log in as an operator and raid and/or destroy your server.
```

If you need to add more the message like lists or something, here's an example:
```md
:::danger
Your users may be more productive and find your product easier to use thanks to helpful Starlight features.

- Clear navigation
- User-configurable colour theme
- [i18n support](/guides/i18n)

:::
```

You can add a custom title as well:
```md
:::tip[Did you know?]
Korbs is epic!
:::
```

#### Tabs
Using tabs can be useful in some areas. 

First, add the `Tabs` and `TabItem` component from Starlight:
```jsx
import { Tabs, TabItem } from '@astrojs/starlight/components'
```

Then, you can add Tabs:
```jsx
<Tabs>
  <TabItem label="Stars">
    Sirius, Vega, Betelgeuse
  </TabItem>
  <TabItem label="Moons">
    Io, Europa, Ganymede
  </TabItem>
</Tabs>
```

This can also be used if you need to provide a different version of the same article. Like providing a version for both Minecraft Java and Bedrock:

```jsx
<Tabs>
  <TabItem label="Java">
    ## Creating a Minecraft World
    So, here's how we do that in Minecraft Java.
  </TabItem>
  <TabItem label="Bedrock">
    ## Creating a Minecraft World
    So, here's how we do that in Minecraft Bedrock.
  </TabItem>
</Tabs>
```

### Link Cards
![Preview](https://img.sudovanilla.com/pTy286H.png)

We can use link cards to direct users to another location when it's needed. 

First, add the `LinkCard` and `CardGrid` component from Starlight:
```jsx
import { LinkCard, CardGrid } from '@astrojs/starlight/components'
```

Then, we can add a link card:
```jsx
<LinkCard
  title="Customizing Starlight"
  description="Learn how to make your Starlight site your own with custom styles, fonts, and more."
  href="/guides/customization/"
/>
```

The `description` is not required.

If you add two, have them side by side with `CardGrid`:
```jsx
<CardGrid>
  <LinkCard title="Authoring Markdown" href="/guides/authoring-content/" />
  <LinkCard title="Components" href="/guides/components/" />
</CardGrid>
```

#### Code
When it comes to provides configuration and other code we can provide to customers, we can do so with the Code component.

First, add the `Code` component from Starlight:
```jsx
import { Code } from '@astrojs/starlight/components'
```

Then, write the code you'll be supplying. As an example, let's do __server.properties__ from Minecraft Java.
```jsx
export const CustomNameForCode = 
`
gamemode=survival
motd=A Minecraft Server
max-players=20
online-mode=true
server-port=25565
`
```

Optionally, you can provide the file name, this will help customers know which file we are referring to.

You'll use `title` to apply the file name. Which in this example will be `title={CustomFileName}`.
```jsx
export const CustomFileName = `server.properties`
```

You can also highlight text in the code using the `mark` variable in the code. Which in this example will be `mark={CustomHighlightText}`.
```jsx
export const CustomHighlightText = ['=20', '25565']
```

Now, to add the actual code into the article. Make sure to set the language to colors are set correctly.
```jsx
<Code code={CustomNameForCode} lang="json" title={CustomFileName} mark={CustomHighlightText} />
```

Preview:

<img width="300px" src="https://img.sudovanilla.com/mGw3AaH.png">


### Frontmatter
In each article, there are plenty of options to add to the frontmatter which can be used to add stuff such as banners, table of contents, and other variables.

#### Banners
![Banner Example](https://img.sudovanilla.com/4My6Qw0.png)

To add a banner, add the following:
```md
---
banner:
  content: |
    This is an example of a banner.
    <a href="https://fluxnodes.net/">Important Link</a>
---
```

#### Table of Contents
![Table of Contents Preview](https://img.sudovanilla.com/6Ovnadk.png)

If for whatever reason you want to enable the table of contents for an article, you can enable by adding:
```md
---
tableOfContents: true
---
```

#### Badge
<img width="300px" src="https://img.sudovanilla.com/BcyNUdH.png">

Badges can be used to add a little text next to the article name like "New" or "Outdated".

Varients: `note` | `tip` | `caution` | `danger` | `success` | `default`

```md
---
sidebar:
  badge:
    text: Outdated
    variant: caution
---
```

#### Slug
If you need to override the URL, you can use `slug`.

```md
---
slug: /support/minecraft/world-management
---
```

#### Layouts
This should only be set for documents such as Terms of Service and polices.

Starlight provides two options: `doc` | `splash`

The `doc` layouts includes both the sidebar and content, useful for articles. The `splash` layout removes the sidebar.

```md
---
template: splash
---
```

## Development
### Requirements
 - [Bun](https://bun.sh/)
 - NodeJS 20 or later

### Install Packages
Installing packages is required to start run and to build the website, run:
```
bun install
```

### Run
To start running the website on a port, run:
```
bun dev
```

## Production
### Build Static
To build the website in static mode, run:
```
bun build
```

### Server Side Rendering
To run the website in server side rendering mode, run:
```
bun start
```

### Docker
This website is Docker ready!

Build the Docker image, run:
```
docker build -t fluxnodes.net .
```

Then, to run:
```
docker run -d -p 2000:2000 fluxnodes.net
```

or use the already provided Docker Compose file:

```
docker compose up -d
```

> `sudo` might be required on some systems to run Docker commands.