Reformat file

_includes/index.tsx

@@ -1,24 +1,25 @@
-import {compareDate} from "../_utils/date.ts"
+import { compareDate } from "../_utils/date.ts";
 import { GameData } from "../_utils/game.ts";
-import {GameTable} from "../_components/GameTable.tsx"
+import { GameTable } from "../_components/GameTable.tsx";
-import {compareGameProgress} from "../_utils/game.ts"
+import { compareGameProgress } from "../_utils/game.ts";
-import {GlobalData} from "../_utils/site.ts"
+import { GlobalData } from "../_utils/site.ts";
 
+export const layout = "base.tsx";
 
-export const layout = "base.tsx"
+export default function (data: GlobalData, helpers: Lume.Helpers) {
+    const intro_section = data.content
+        ? (
+            <section id={"index-section-intro"}>
+                {data.children}
+            </section>
+        )
+        : null;
 
-export default function(data: GlobalData, helpers: Lume.Helpers) {
+    const games: GameData[] = data.search.pages("game");
-    const intro_section = data.content ? (
-        <section id={"index-section-intro"}>
-            {data.children}
-        </section>
-    ) : null
-
-    const games: GameData[] = data.search.pages("game")
 
     const active_games = games
-        .filter(game => game.active)
+        .filter((game) => game.active)
-        .sort(compareDate as any)
+        .sort(compareDate as any);
 
     const active_games_section = (
         <section id={"index-section-games-active"} className={"flex flex-v"}>
@@ -26,14 +27,18 @@ export default function(data: GlobalData, helpers: Lume.Helpers) {
                 Now playing
             </h3>
             <div>
-                <GameTable games={active_games} columns={["progress", "name", "hoursplayed", "date"]} priority={"progress"}/>
+                <GameTable
+                    games={active_games}
+                    columns={["progress", "name", "hoursplayed", "date"]}
+                    priority={"progress"}
+                />
             </div>
         </section>
-    )
+    );
 
     const top_games = games
         .sort((a, b) => ((b.rating ?? 0) - (a.rating ?? 0)))
-        .slice(0, 10)
+        .slice(0, 10);
 
     const top_games_section = (
         <section id={"index-section-games-top"} className={"flex flex-v"}>
@@ -41,14 +46,18 @@ export default function(data: GlobalData, helpers: Lume.Helpers) {
                 Top games
             </h3>
             <div>
-                <GameTable games={top_games} columns={["rating", "name", "hascontent"]} priority={"rating"}/>
+                <GameTable
+                    games={top_games}
+                    columns={["rating", "name", "hascontent"]}
+                    priority={"rating"}
+                />
             </div>
         </section>
-    )
+    );
 
     const played_games = games
         .sort((a, b) => ((b.hours_played ?? 0) - (a.hours_played ?? 0)))
-        .slice(0, 10)
+        .slice(0, 10);
 
     const played_games_section = (
         <section id={"index-section-games-top"} className={"flex flex-v"}>
@@ -56,14 +65,17 @@ export default function(data: GlobalData, helpers: Lume.Helpers) {
                 Most played games
             </h3>
             <div>
-                <GameTable games={played_games} columns={["hoursplayed", "name"]}/>
+                <GameTable
+                    games={played_games}
+                    columns={["hoursplayed", "name"]}
+                />
             </div>
         </section>
-    )
+    );
 
     const progress_games = games
         .sort((a, b) => -compareGameProgress(a, b))
-        .slice(0, 10)
+        .slice(0, 10);
 
     const progress_games_section = (
         <section id={"index-section-games-top"} className={"flex flex-v"}>
@@ -71,14 +83,18 @@ export default function(data: GlobalData, helpers: Lume.Helpers) {
                 Most progressed games
             </h3>
             <div>
-                <GameTable games={progress_games} columns={["progress", "name", "hoursplayed"]} priority={"progress"}/>
+                <GameTable
+                    games={progress_games}
+                    columns={["progress", "name", "hoursplayed"]}
+                    priority={"progress"}
+                />
             </div>
         </section>
-    )
+    );
 
     const latest_games = games
         .sort((a, b) => -compareDate(a, b))
-        .slice(0, 10)
+        .slice(0, 10);
 
     const latest_games_section = (
         <section id={"index-section-games-latest"} className={"flex flex-v"}>
@@ -86,43 +102,51 @@ export default function(data: GlobalData, helpers: Lume.Helpers) {
                 Latest updates
             </h3>
             <div>
-                <GameTable games={latest_games} columns={["hascontent", "name", "date"]}/>
+                <GameTable
+                    games={latest_games}
+                    columns={["hascontent", "name", "date"]}
+                />
             </div>
         </section>
-    )
+    );
 
     const games_cols = (
-                           games.length > 0
+            games.length > 0
-                       ) ? (
+        )
-                           <section className={"flex flex-v"}>
+        ? (
-            <h2>
+            <section className={"flex flex-v"}>
-                Videogames
+                <h2>
-                <small>
+                    Videogames
-                    <a href={helpers.url("~/list-games.md")}>
+                    <small>
-                        <i className={"fa-sharp fa-solid fa-magnifying-glass"}/> View all
+                        <a href={helpers.url("~/list-games.md")}>
-                    </a>
+                            <i
-                </small>
+                                className={"fa-sharp fa-solid fa-magnifying-glass"}
-            </h2>
+                            />{" "}
-            {active_games.length > 0 && (
+                            View all
-                <div className={"flex flex-1"}>
+                        </a>
-                    {active_games_section}
+                    </small>
+                </h2>
+                {active_games.length > 0 && (
+                    <div className={"flex flex-1"}>
+                        {active_games_section}
+                    </div>
+                )}
+                <div className={"flex flex-2"}>
+                    {top_games_section}
+                    {progress_games_section}
                 </div>
-            )}
+                <div className={"flex flex-2"}>
-            <div className={"flex flex-2"}>
+                    {played_games_section}
-            {top_games_section}
+                    {latest_games_section}
-                {progress_games_section}
+                </div>
-            </div>
+            </section>
-            <div className={"flex flex-2"}>
+        )
-                {played_games_section}
+        : null;
-                {latest_games_section}
-            </div>
-        </section>
-    ) : null
 
     return (
         <main id={"index-main"} className={"flex flex-v"}>
             {intro_section}
             {games_cols}
         </main>
-    )
+    );
 }