formatter: Use semicolons (#4686)

I prefer semicolors, they also help avoiding certain pitfalls in JavaScript/TypeScript, such as the following code sample: ```js const xyz = "test" (something.else as string) = "another" ``` This results in a TypeError: "test" is not a function, this is because js thinks we are trying to call the string "test" as a function. To fix this it requires a `;` somewhere before the `(`, such as `;(something ... ` which in my opinion is ugly and less clean overall.
2026-09-17 08:47:22 +00:00 · 2026-01-17 21:54:15 +01:00
parent f713b4ab7b
commit 27c261fee2
403 changed files with 11250 additions and 11217 deletions
@@ -1,26 +1,26 @@
-import { useColorMode } from '@docusaurus/theme-common'
-import { Background, Controls, type Edge, Handle, type Node, Position, ReactFlow, useEdgesState, useNodesState } from '@xyflow/react'
-import '@xyflow/react/dist/style.css'
+import { useColorMode } from '@docusaurus/theme-common';
+import { Background, Controls, type Edge, Handle, type Node, Position, ReactFlow, useEdgesState, useNodesState } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';

-export const multiplier = 225
-export const height = 40
+export const multiplier = 225;
+export const height = 40;

 export const defaultNodeOptions = {
  targetPosition: Position.Left,
  sourcePosition: Position.Right,
  draggable: false,
  style: { width: `${multiplier * 0.75}px`, height: `${height}px` },
-}
+};

 export const defaultGroupOptions = {
  draggable: false,
-}
+};

 export default function BaseFlowChart({ initialNodes = [], initialEdges = [] }: { initialNodes: Node[]; initialEdges: Edge[] }) {
-  const [nodes] = useNodesState(initialNodes)
-  const [edges] = useEdgesState(initialEdges)
+  const [nodes] = useNodesState(initialNodes);
+  const [edges] = useEdgesState(initialEdges);

-  const color = useColorMode()
+  const color = useColorMode();

  return (
    <>
@@ -73,5 +73,5 @@ export default function BaseFlowChart({ initialNodes = [], initialEdges = [] }:
        </ReactFlow>
      </div>
    </>
-  )
+  );
 }
@@ -1,6 +1,6 @@
-import type { Edge, Node } from '@xyflow/react'
-import '@xyflow/react/dist/style.css'
-import BaseFlowChart, { defaultNodeOptions, multiplier } from './BaseFlowChart'
+import type { Edge, Node } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import BaseFlowChart, { defaultNodeOptions, multiplier } from './BaseFlowChart';

 const initialNodes: Node[] = [
  {
@@ -119,7 +119,7 @@ const initialNodes: Node[] = [
    data: { label: 'Discord Api' },
    ...defaultNodeOptions,
  },
-]
+];

 const initialEdges: Edge[] = [
  { id: 'd-g', source: 'discordGateway', target: 'gateway' },
@@ -155,8 +155,8 @@ const initialEdges: Edge[] = [
    style: { stroke: 'blue', strokeDasharray: 20 },
    animated: false,
  },
-]
+];

 export default function FlowChart() {
-  return <BaseFlowChart initialNodes={initialNodes} initialEdges={initialEdges} />
+  return <BaseFlowChart initialNodes={initialNodes} initialEdges={initialEdges} />;
 }
@@ -1,6 +1,6 @@
-import { type Edge, type Node, Position } from '@xyflow/react'
-import '@xyflow/react/dist/style.css'
-import BaseFlowChart, { defaultGroupOptions, defaultNodeOptions, multiplier } from './BaseFlowChart'
+import { type Edge, type Node, Position } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import BaseFlowChart, { defaultGroupOptions, defaultNodeOptions, multiplier } from './BaseFlowChart';

 const initialNodes: Node[] = [
  {
@@ -164,7 +164,7 @@ const initialNodes: Node[] = [
    data: { label: 'Bot' },
    ...defaultNodeOptions,
  },
-]
+];

 const initialEdges: Edge[] = [
  { id: 'd-g', source: 'discordGateway', target: 'gateway' },
@@ -296,8 +296,8 @@ const initialEdges: Edge[] = [
    target: 'shard-n',
    zIndex: 100,
  },
-]
+];

 export default function FlowChart2() {
-  return <BaseFlowChart initialNodes={initialNodes} initialEdges={initialEdges} />
+  return <BaseFlowChart initialNodes={initialNodes} initialEdges={initialEdges} />;
 }
@@ -1,15 +1,15 @@
-import { useColorMode } from '@docusaurus/theme-common'
-import { Background, Controls, type Edge, Handle, type Node, Position, ReactFlow, useEdgesState, useNodesState } from '@xyflow/react'
-import type React from 'react'
-import { useEffect, useState } from 'react'
-import '@xyflow/react/dist/style.css'
-import { defaultNodeOptions, height, multiplier } from './BaseFlowChart'
+import { useColorMode } from '@docusaurus/theme-common';
+import { Background, Controls, type Edge, Handle, type Node, Position, ReactFlow, useEdgesState, useNodesState } from '@xyflow/react';
+import type React from 'react';
+import { useEffect, useState } from 'react';
+import '@xyflow/react/dist/style.css';
+import { defaultNodeOptions, height, multiplier } from './BaseFlowChart';

 const handlers: Record<
  string,
  {
-    transformers: string[]
-    event: string
+    transformers: string[];
+    event: string;
  }
 > = {
  handleChannelCreate: {
@@ -28,11 +28,11 @@ const handlers: Record<
    transformers: ['transformers.channel'],
    event: 'events.channelUpdate',
  },
-}
+};

 export default function FlowChart() {
-  const transformers = []
-  const events = []
+  const transformers = [];
+  const events = [];
  const initialNodes: Node[] = [
    {
      id: 'baseNode-gateway',
@@ -96,7 +96,7 @@ export default function FlowChart() {
      data: { label: 'Handle discord payload' },
      ...defaultNodeOptions,
    },
-  ]
+  ];

  const initialEdges: Edge[] = [
    {
@@ -122,9 +122,9 @@ export default function FlowChart() {
      target: 'baseLineNode-4',
      style: { stroke: 'blue', strokeDasharray: 20 },
    },
-  ]
+  ];

-  const handlerKeys = Object.keys(handlers)
+  const handlerKeys = Object.keys(handlers);

  for (const [index, handler] of handlerKeys.entries()) {
    initialNodes.push({
@@ -135,35 +135,35 @@ export default function FlowChart() {
      },
      data: { label: handler },
      ...defaultNodeOptions,
-    })
+    });
    initialEdges.push({
      id: `handleDiscordPayload-${handler}`,
      source: 'baseNode-handleDiscordPayload',
      target: handler,
-    })
+    });
    if (!events.find((e) => e === handlers[handler].event) && handlers[handler].event) {
-      events.push(handlers[handler].event)
+      events.push(handlers[handler].event);
      initialEdges.push({
        id: `${handlers[handler].event}-yourCode`,
        source: handlers[handler].event,
        target: 'baseNode-yourCode',
-      })
+      });
    }
    for (const transformer of handlers[handler].transformers) {
-      if (!transformers.find((t) => t === transformer) && transformer) transformers.push(transformer)
+      if (!transformers.find((t) => t === transformer) && transformer) transformers.push(transformer);
      if (!initialEdges.find((edge) => edge.id === `${handler}-${transformer}`) && transformer) {
        initialEdges.push({
          id: `${handler}-${transformer}`,
          source: handler,
          target: transformer,
-        })
+        });
      }
      if (!initialEdges.find((edge) => edge.id === `${transformer}-${handlers[handler].event}`) && handlers[handler].event) {
        initialEdges.push({
          id: `${transformer}-${handlers[handler].event}`,
          source: transformer,
          target: handlers[handler].event,
-        })
+        });
      }
    }
  }
@@ -177,7 +177,7 @@ export default function FlowChart() {
      },
      data: { label: transformer.slice(13) },
      ...defaultNodeOptions,
-    })
+    });
  }

  for (const [index, event] of events.entries()) {
@@ -189,7 +189,7 @@ export default function FlowChart() {
      },
      data: { label: event.slice(7) },
      ...defaultNodeOptions,
-    })
+    });
  }

  initialNodes.unshift(
@@ -268,137 +268,137 @@ export default function FlowChart() {
      data: { label: 'Event' },
      draggable: false,
    },
-  )
+  );

-  const [nodes] = useNodesState(initialNodes)
-  const [edges, setEdges] = useEdgesState(initialEdges)
-  const [userClick, setUserClick] = useState(false)
+  const [nodes] = useNodesState(initialNodes);
+  const [edges, setEdges] = useEdgesState(initialEdges);
+  const [userClick, setUserClick] = useState(false);

  const nodeMouseHandler = (_: React.MouseEvent, node: Node, userTrigger = true) => {
-    if (userTrigger) setUserClick(true)
+    if (userTrigger) setUserClick(true);
    if (node.id.split('-')[0] === 'baseNode') {
      edges.forEach((e) => {
-        if (e.id.startsWith('baseLine')) return
-        e.animated = true
-        e.style = { stroke: 'blue' }
-      })
-      setEdges([...edges])
-      return
+        if (e.id.startsWith('baseLine')) return;
+        e.animated = true;
+        e.style = { stroke: 'blue' };
+      });
+      setEdges([...edges]);
+      return;
    }
    if (handlerKeys.find((h) => handlers[h].event === node.id)) {
-      const handlerName = handlerKeys.find((h) => handlers[h].event === node.id)
-      const handler = handlers[handlerName]
+      const handlerName = handlerKeys.find((h) => handlers[h].event === node.id);
+      const handler = handlers[handlerName];
      edges.forEach((e) => {
-        if (e.id.startsWith('baseLine')) return
+        if (e.id.startsWith('baseLine')) return;
        if (e.id.split('-')[0] === 'baseEdge') {
-          e.animated = true
-          e.style = { stroke: 'blue' }
-          return
+          e.animated = true;
+          e.style = { stroke: 'blue' };
+          return;
        }
        if (e.id.split('-')[0] === 'handleDiscordPayload' && e.id.split('-')[1] === handlerName) {
-          e.animated = true
-          e.style = { stroke: 'blue' }
-          return
+          e.animated = true;
+          e.style = { stroke: 'blue' };
+          return;
        }
        if (e.id.split('-')[0] === handlerName && handler.transformers.includes(e.id.split('-')[1])) {
-          e.animated = true
-          e.style = { stroke: 'blue' }
-          return
+          e.animated = true;
+          e.style = { stroke: 'blue' };
+          return;
        }
        if (handler.transformers.includes(e.id.split('-')[0]) && e.id.split('-')[1] === handler.event) {
-          e.animated = true
-          e.style = { stroke: 'blue' }
-          return
+          e.animated = true;
+          e.style = { stroke: 'blue' };
+          return;
        }
        if (e.id.split('-')[0] === handler.event && e.id.split('-')[1] === 'yourCode') {
-          e.animated = true
-          e.style = { stroke: 'blue' }
-          return
+          e.animated = true;
+          e.style = { stroke: 'blue' };
+          return;
        }
-        e.animated = false
-        e.style = { opacity: 0.3 }
-      })
-      setEdges([...edges])
-      return
+        e.animated = false;
+        e.style = { opacity: 0.3 };
+      });
+      setEdges([...edges]);
+      return;
    }
    if (handlerKeys.find((h) => handlers[h].transformers.includes(node.id))) {
      edges.forEach((e) => {
-        if (e.id.startsWith('baseLine')) return
+        if (e.id.startsWith('baseLine')) return;
        if (e.id.split('-')[0] === 'baseEdge') {
-          e.animated = true
-          e.style = { stroke: 'blue' }
-          return
+          e.animated = true;
+          e.style = { stroke: 'blue' };
+          return;
        }
        if (
          e.id.split('-')[0] === 'handleDiscordPayload' &&
          handlerKeys.filter((h) => handlers[h].transformers.includes(node.id)).includes(e.id.split('-')[1])
        ) {
-          e.animated = true
-          e.style = { stroke: 'blue' }
-          return
+          e.animated = true;
+          e.style = { stroke: 'blue' };
+          return;
        }
        if (handlerKeys.filter((h) => handlers[h].transformers.includes(node.id)).includes(e.id.split('-')[0]) && e.id.split('-')[1] === node.id) {
-          e.animated = true
-          e.style = { stroke: 'blue' }
-          return
+          e.animated = true;
+          e.style = { stroke: 'blue' };
+          return;
        }
        if (e.id.split('-')[0] === node.id) {
-          e.animated = true
-          e.style = { stroke: 'blue' }
-          return
+          e.animated = true;
+          e.style = { stroke: 'blue' };
+          return;
        }
-        e.animated = false
-        e.style = { opacity: 0.3 }
-      })
-      setEdges([...edges])
-      return
+        e.animated = false;
+        e.style = { opacity: 0.3 };
+      });
+      setEdges([...edges]);
+      return;
    }
    if (handlers[node.id]) {
-      const handler = handlers[node.id]
+      const handler = handlers[node.id];
      edges.forEach((e) => {
-        if (e.id.startsWith('baseLine')) return
+        if (e.id.startsWith('baseLine')) return;
        if (e.id.split('-')[0] === 'baseEdge') {
-          e.animated = true
-          e.style = { stroke: 'blue' }
-          return
+          e.animated = true;
+          e.style = { stroke: 'blue' };
+          return;
        }
        if (e.id.split('-')[0] === 'handleDiscordPayload' && e.id.split('-')[1] === node.id) {
-          e.animated = true
-          e.style = { stroke: 'blue' }
-          return
+          e.animated = true;
+          e.style = { stroke: 'blue' };
+          return;
        }
        if (e.id.split('-')[0] === node.id && handler.transformers.includes(e.id.split('-')[1])) {
-          e.animated = true
-          e.style = { stroke: 'blue' }
-          return
+          e.animated = true;
+          e.style = { stroke: 'blue' };
+          return;
        }
        if (handler.transformers.includes(e.id.split('-')[0]) && e.id.split('-')[1] === handler.event) {
-          e.animated = true
-          e.style = { stroke: 'blue' }
-          return
+          e.animated = true;
+          e.style = { stroke: 'blue' };
+          return;
        }
        if (e.id.split('-')[0] === handler.event) {
-          e.animated = true
-          e.style = { stroke: 'blue' }
-          return
+          e.animated = true;
+          e.style = { stroke: 'blue' };
+          return;
        }
-        e.animated = false
-        e.style = { opacity: 0.3 }
-      })
-      setEdges([...edges])
-      return
+        e.animated = false;
+        e.style = { opacity: 0.3 };
+      });
+      setEdges([...edges]);
+      return;
    }
    edges.forEach((e) => {
-      if (e.id.startsWith('baseLine')) return
-      e.animated = false
-      e.style = {}
-    })
-    setEdges([...edges])
-  }
+      if (e.id.startsWith('baseLine')) return;
+      e.animated = false;
+      e.style = {};
+    });
+    setEdges([...edges]);
+  };

  useEffect(() => {
    const interval = setInterval(() => {
-      const randomIndex = Math.round((handlerKeys.length - 1) * Math.random())
+      const randomIndex = Math.round((handlerKeys.length - 1) * Math.random());
      if (!userClick) {
        nodeMouseHandler(
          undefined,
@@ -408,26 +408,26 @@ export default function FlowChart() {
            position: undefined,
          },
          false,
-        )
+        );
      }
-    }, 1000)
+    }, 1000);
    return () => {
-      clearInterval(interval)
-    }
-  }, [userClick])
+      clearInterval(interval);
+    };
+  }, [userClick]);

  useEffect(() => {
    if (userClick) {
      const timeout = setTimeout(() => {
-        setUserClick(false)
-      }, 10000)
+        setUserClick(false);
+      }, 10000);
      return () => {
-        clearTimeout(timeout)
-      }
+        clearTimeout(timeout);
+      };
    }
-  }, [userClick])
+  }, [userClick]);

-  const color = useColorMode()
+  const color = useColorMode();

  return (
    <>
@@ -444,14 +444,14 @@ export default function FlowChart() {
          onNodeDoubleClick={nodeMouseHandler}
          onNodeClick={nodeMouseHandler}
          onClick={(e) => {
-            const target = e.target as HTMLDivElement
+            const target = e.target as HTMLDivElement;

            if (target.className === 'react-flow__pane') {
              nodeMouseHandler(e, {
                id: ' - ',
                data: { label: ' - ' },
                position: undefined,
-              })
+              });
            }
          }}
          nodeTypes={{
@@ -493,5 +493,5 @@ export default function FlowChart() {
        </ReactFlow>
      </div>
    </>
-  )
+  );
 }
@@ -1,6 +1,6 @@
-import type { Edge, Node } from '@xyflow/react'
-import '@xyflow/react/dist/style.css'
-import BaseFlowChart, { defaultNodeOptions, multiplier } from './BaseFlowChart'
+import type { Edge, Node } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import BaseFlowChart, { defaultNodeOptions, multiplier } from './BaseFlowChart';

 const initialNodes: Node[] = [
  {
@@ -72,7 +72,7 @@ const initialNodes: Node[] = [
    position: { x: 2.75 * multiplier, y: -200 },
    data: { label: 'Discord' },
  },
-]
+];

 const initialEdges: Edge[] = [
  { id: 'bp-rp', source: 'bot', target: 'rest' },
@@ -100,8 +100,8 @@ const initialEdges: Edge[] = [
    style: { stroke: 'blue', strokeDasharray: 20 },
    animated: false,
  },
-]
+];

 export default function FlowChart4() {
-  return <BaseFlowChart initialNodes={initialNodes} initialEdges={initialEdges} />
+  return <BaseFlowChart initialNodes={initialNodes} initialEdges={initialEdges} />;
 }
@@ -1,12 +1,12 @@
-import { Background, Controls, type Edge, type Node, Position, ReactFlow } from '@xyflow/react'
-import '@xyflow/react/dist/style.css'
+import { Background, Controls, type Edge, type Node, Position, ReactFlow } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';

 export const defaultNodeOptions = {
  targetPosition: Position.Top,
  sourcePosition: Position.Bottom,
  draggable: false,
  style: { width: '70px', height: '50px', padding: '10px 0' },
-}
+};

 const genServer = (x: number, id: number) => {
  const server: Node<any, string>[] = [
@@ -15,7 +15,7 @@ const genServer = (x: number, id: number) => {
      data: { label: `Server ${id + 1}` },
      position: { x: x - 42.5, y: 100 },
    },
-  ]
+  ];

  for (let i = 0; i < 4; i++) {
    if (i === 2) {
@@ -36,8 +36,8 @@ const genServer = (x: number, id: number) => {
            label: '.....',
          },
        },
-      )
-      continue
+      );
+      continue;
    }
    server.push(
      ...[
@@ -65,11 +65,11 @@ const genServer = (x: number, id: number) => {
          },
        },
      ],
-    )
+    );
  }

-  return server
-}
+  return server;
+};

 const nodes = [
  {
@@ -89,7 +89,7 @@ const nodes = [
      label: '...............',
    },
  },
-]
+];

 const edges: Edge<any>[] = [
  { id: 'gwm-s1', source: 'gwm', target: 's1', type: 'step' },
@@ -113,10 +113,10 @@ const edges: Edge<any>[] = [
  { id: 'w451-w451s', source: 'w451', target: 'w451s', type: 'step' },
  { id: 'w452-w452s', source: 'w452', target: 'w452s', type: 'step' },
  { id: 'w500-w500s', source: 'w500', target: 'w500s', type: 'step' },
-]
+];

 function Flow() {
-  const colorMode = document.documentElement.dataset['theme'] || 'light'
+  const colorMode = document.documentElement.dataset['theme'] || 'light';

  return (
    <div style={{ height: '40vh' }}>
@@ -142,7 +142,7 @@ function Flow() {
        <Controls />
      </ReactFlow>
    </div>
-  )
+  );
 }

-export default Flow
+export default Flow;
@@ -13,5 +13,5 @@ export default function Footer() {
        d="M0,96L34.3,85.3C68.6,75,137,53,206,64C274.3,75,343,117,411,138.7C480,160,549,160,617,170.7C685.7,181,754,203,823,186.7C891.4,171,960,117,1029,112C1097.1,107,1166,149,1234,144C1302.9,139,1371,85,1406,58.7L1440,32L1440,320L1405.7,320C1371.4,320,1303,320,1234,320C1165.7,320,1097,320,1029,320C960,320,891,320,823,320C754.3,320,686,320,617,320C548.6,320,480,320,411,320C342.9,320,274,320,206,320C137.1,320,69,320,34,320L0,320Z"
      ></path>
    </svg>
-  )
+  );
 }
@@ -1,5 +1,5 @@
-import Link from '@docusaurus/Link'
-import style from './index.module.css'
+import Link from '@docusaurus/Link';
+import style from './index.module.css';

 export default function DiscordenoHeader() {
  return (
@@ -16,5 +16,5 @@ export default function DiscordenoHeader() {
        </div>
      </div>
    </>
-  )
+  );
 }
@@ -1,12 +1,12 @@
-import { useState } from 'react'
-import style from './index.module.css'
+import { useState } from 'react';
+import style from './index.module.css';

 const Faq = ({ question, answer, defaultExpanded }: { question: string; answer: string; defaultExpanded?: boolean }) => {
-  const [visible, setVisible] = useState(defaultExpanded ?? false)
+  const [visible, setVisible] = useState(defaultExpanded ?? false);

  const toggleVisibility = () => {
-    setVisible(!visible)
-  }
+    setVisible(!visible);
+  };

  return (
    <div className={style.faqContainer}>
@@ -28,8 +28,8 @@ const Faq = ({ question, answer, defaultExpanded }: { question: string; answer:
        </div>
      </div>
    </div>
-  )
-}
+  );
+};

 const questions = [
  {
@@ -53,7 +53,7 @@ const questions = [
    answer:
      "Yes! While Discordeno itself does not use classes, you can still use classes in your own code by using one of the many libraries or frameworks that provide class-based abstractions on top of Discordeno. Some examples of such libraries include the Discordeno.js which provides a very similar framework and API to Discord.js, or the Sinf library that provides a similar API to Eris library. These libraries provide classes and other abstractions that can help simplify the development of your bot, while still leveraging the power and flexibility of Discordeno's underlying object-based API. Make sure to check the documentation of these libraries for more information on how to use them in your bot.",
  },
-]
+];

 export default function DiscordenoFAQ() {
  return (
@@ -67,5 +67,5 @@ export default function DiscordenoFAQ() {
        </div>
      </div>
    </>
-  )
+  );
 }
@@ -1,4 +1,4 @@
-import type { FeatureList } from '@site/src/types'
+import type { FeatureList } from '@site/src/types';

 export default function Feature({ data }: FeatureList) {
  return (
@@ -10,5 +10,5 @@ export default function Feature({ data }: FeatureList) {
        {data.feature.description}
      </div>
    </div>
-  )
+  );
 }
@@ -1,6 +1,6 @@
-import type { FeatureItem } from '@site/src/types'
-import Feature from './feature'
-import styles from './index.module.css'
+import type { FeatureItem } from '@site/src/types';
+import Feature from './feature';
+import styles from './index.module.css';

 const FeatureList: FeatureItem[] = [
  {
@@ -107,7 +107,7 @@ const FeatureList: FeatureItem[] = [
      </>
    ),
  },
-]
+];

 export default function DiscordenoFeatures() {
  return (
@@ -126,5 +126,5 @@ export default function DiscordenoFeatures() {
        </div>
      </div>
    </section>
-  )
+  );
 }
@@ -1,5 +1,5 @@
-import { DiscordLibraries, type IReview } from '@site/src/types'
-import style from './index.module.css'
+import { DiscordLibraries, type IReview } from '@site/src/types';
+import style from './index.module.css';

 const reviewList: IReview[] = [
  {
@@ -82,7 +82,7 @@ const reviewList: IReview[] = [
      guild_count: 211000,
    },
  },
-]
+];

 export default function DiscordenoReviews() {
  return (
@@ -94,7 +94,7 @@ export default function DiscordenoReviews() {
        <div className={style.reviewsElementWrapper}>
          {reviewList
            .sort((a, b) => {
-              return b.bot.guild_count - a.bot.guild_count
+              return b.bot.guild_count - a.bot.guild_count;
            })
            .map((review) => (
              <div className={style.reviewsElement} key={review.bot.username}>
@@ -202,5 +202,5 @@ export default function DiscordenoReviews() {
        </div>
      </div>
    </div>
-  )
+  );
 }
@@ -1,9 +1,9 @@
-import Layout from '@theme/Layout'
-import Footer from '../components/footer'
-import DiscordenoHeader from '../components/header'
-import DiscordenoFAQ from '../components/home/faq'
-import DiscordenoFeatures from '../components/home/features'
-import DiscordenoReviews from '../components/home/reviews'
+import Layout from '@theme/Layout';
+import Footer from '../components/footer';
+import DiscordenoHeader from '../components/header';
+import DiscordenoFAQ from '../components/home/faq';
+import DiscordenoFeatures from '../components/home/features';
+import DiscordenoReviews from '../components/home/reviews';

 export default function Home(): React.JSX.Element {
  return (
@@ -16,5 +16,5 @@ export default function Home(): React.JSX.Element {
      </div>
      <Footer />
    </Layout>
-  )
+  );
 }
@@ -1,14 +1,14 @@
 export interface FeatureList {
  data: {
-    feature: FeatureItem
-    featureList: FeatureItem[]
-  }
+    feature: FeatureItem;
+    featureList: FeatureItem[];
+  };
 }

 export interface FeatureItem {
-  title: string
-  Svg: React.JSX.Element
-  description: React.JSX.Element
+  title: string;
+  Svg: React.JSX.Element;
+  description: React.JSX.Element;
 }

 export enum DiscordLibraries {
@@ -36,22 +36,22 @@ export enum DiscordLibraries {
 }

 export interface IReview {
-  review: string // the review
+  review: string; // the review
  bot: {
-    username: string // Clyde
-    discriminator: string // 0000
-    avatar: string // https://cdn.discordapp.com/avatars/123456789012345678/abcdefg1234567890.png
-    invite_url: string // https://discord.com/api/oauth2/authorize?client_id=123456789012345678&permissions=8&scope=bot
-    guild_count: number // 123456 => frontend converts to 123,456...
-  }
+    username: string; // Clyde
+    discriminator: string; // 0000
+    avatar: string; // https://cdn.discordapp.com/avatars/123456789012345678/abcdefg1234567890.png
+    invite_url: string; // https://discord.com/api/oauth2/authorize?client_id=123456789012345678&permissions=8&scope=bot
+    guild_count: number; // 123456 => frontend converts to 123,456...
+  };
  developer: {
-    usernames: string[] // ["Peter_"]
-  }
-  stars: 4 | 5 // 4 or 5, discordeno can't have lower because it's the best :D
-  previous_library?: keyof typeof DiscordLibraries // previous library used by the bot (if any)
+    usernames: string[]; // ["Peter_"]
+  };
+  stars: 4 | 5; // 4 or 5, discordeno can't have lower because it's the best :D
+  previous_library?: keyof typeof DiscordLibraries; // previous library used by the bot (if any)
  memory_improvement?: {
-    from: number // 100 => frontend converts to 100MB
-    to: number // 50 => frontend converts to 50MB
-    guild_count: number // 123456 => frontend convers to 123K. this is the amount of guilds the bot is in at the time of the review
-  }
+    from: number; // 100 => frontend converts to 100MB
+    to: number; // 50 => frontend converts to 50MB
+    guild_count: number; // 123456 => frontend convers to 123K. this is the amount of guilds the bot is in at the time of the review
+  };
 }