Provide documentations on dealing with support center.

2024-01-31 09:32:18 -05:00 · 2024-01-31 09:32:18 -05:00 · 00f9593c3e
commit 00f9593c3e
parent ded7fcbb75
1 changed files with 151 additions and 1 deletions
--- a/README.md
+++ b/README.md
@ -8,7 +8,7 @@ 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/`.

-### Writing an Article
+### 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:
@ -19,6 +19,156 @@ 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.