Merge pull request #27 from DREDGE-Mods/dev

Dev
DREDGE-Mods · Dec 6, 2023 · 2a7bc05 · 2a7bc05
2 parents 00f00f7 + 5a8d34b
commit 2a7bc05
Show file tree

Hide file tree

Showing 9 changed files with 124 additions and 48 deletions.
diff --git a/scripts/src/main.ts b/scripts/src/main.ts
@@ -13,31 +13,30 @@ async function run() {
     core.info("Started fetching mod database. Running from " + process.cwd());
 
     await fetch_json("https://raw.githubusercontent.com/xen-42/DredgeModDatabase/database/database.json").then((results) => {
-        let json = JSON.stringify(results, null, 2);
-        core.info(json);
-
-        fs.writeFile(srcDir() + "/database.json", json, 'utf8', (err : Error) => {
-            if (err) {
-                throw new Error(err.message);
-            }
-            else {
-                core.info("Saved updated database");
-            }
-        });
-        core.info("Saved database.json");
-
         let dir = `${srcDir()}/pages/mods`;
         if (!fs.existsSync(dir)){
             fs.mkdirSync(dir, { recursive: true });
         }
 
         // Now we fetch the readmes
-        results.forEach(load_mod_readme);
+        Promise.all(results.map(load_mod_readme)).then((modified_results) => {
+            let json = JSON.stringify(modified_results, null, 2);
+
+            fs.writeFile(srcDir() + "/database.json", json, 'utf8', (err : Error) => {
+                if (err) {
+                    throw new Error(err.message);
+                }
+                else {
+                    core.info("Saved updated database");
+                }
+            });
+            core.info("Saved database.json");
+        });
     });
 }
 
-async function load_mod_readme(mod : {readme_raw : string, name : string}) {
-    await fetch_text(mod.readme_raw).then((results) => {
+async function load_mod_readme(mod : any) {
+    return await fetch_text(mod.readme_raw).then((results) => {
         let page_name = mod.name.toLowerCase().trim().split(" ").join("_");
 
         let mod_page = 
@@ -56,6 +55,20 @@ ${results}`
         let regex2 = /(!\[.*\]\()\.\/(.*\))/g
         mod_page = mod_page.replace(regex2, "$1" + repo_root + "$2");
 
+        // Also cover direct paths to images (doesn't start with https://, http://, or www.)
+        let regex3 = /(!\[.*\]\()(.*\))/g
+        var imageMatches = mod_page.match(regex3)
+        // Do this programatically because regex is such a pain for checking if something doesn't contain something
+        if (imageMatches != null) {
+            for (let i = 0; i < imageMatches.length; i++) {
+                var imageMatch = imageMatches[i];
+                if (!imageMatch.includes("https://") && !imageMatch.includes("http://") && !imageMatch.includes("www.")) {
+                    let correctedImageUrl = imageMatch.replace(regex3, "$1" + repo_root + "$2");
+                    mod_page = mod_page.replace(imageMatch, correctedImageUrl);
+                }
+            }
+        }
+
         fs.writeFile(`${srcDir()}/pages/mods/${page_name}.md`, mod_page, 'utf8', (err : Error) => {
             if (err) {
                 throw new Error(err.message);
@@ -64,6 +77,27 @@ ${results}`
                 core.info("Saved mod page for " + mod.name);
             }
         });
+
+        // Get the first image in the readme, if there is one, but make sure it isn't from img.shields.io
+        let imageRegex = /(!\[.*\]\(.*)\)/g
+        var imageResults = mod_page.match(imageRegex);
+        if (imageResults != null) {
+            for (let i = 0; i < imageResults.length; i++) {
+                var image = imageResults[i]
+                console.log(mod.name + " " + i + " " + image)
+                if (!image.includes("img.shields.io")) {
+                    // Extract just the url from it
+                    var first_image_match = image.match(/(!\[.*\]\()(.*)\)/);
+                    if (first_image_match != null) {
+                        mod.first_image = first_image_match[2]
+                    }
+                    console.log(image)
+                    break;
+                }
+            }
+        }
+
+        return mod
     });
 }
 

diff --git a/scss/custom.scss b/scss/custom.scss
@@ -2,7 +2,7 @@ $theme-colors: (
     "light":      #ffffff,
     "dark":       #000000,
     "primary":    #b9f3ec,
-    "secondary":  #1f3049,
+    "secondary":  #172233,
     "info":       #9057a9,
     "success":    #25a474,
     "warning":    #ff7300,
@@ -50,4 +50,4 @@ main {
     .container {
         padding: 0rem ! important;
     }
-}
+}
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -1,7 +1,7 @@
 <div class="wrapper flex-grow-1"></div>
 <footer>
     <div class="d-flex justify-content-center text-light bg-dark mt-4">
-        <div class="row d-flex justify-content-center m-2 mt-4 p-2 pt-4">
+        <div class="row d-flex justify-content-center m-3 p-3 pb-4">
             <p>The DREDGE modding website is unofficial and is not affiliated with Black Salt Games</p>
         </div>
     </div>

diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -1,12 +1,10 @@
 <div class="d-flex justify-content-center text-white pb-2">
 
     <div class="d-flex flex-column justify-content-center pe-2 text-center">
+        </br>
         <a href="/" class="link-light d-flex justify-content-center text-decoration-none">
             <h2 class="chromatic-aberration">DREDGE Mods</h2>
         </a>
-        <p class="bg-warning text-dark p-1 ps-4 pe-4 m-2 rounded text-white">
-            The DREDGE modding infrastructure is quite new - if anything breaks let us know in the <u><a href="https://discord.gg/qFqPuTUAmD" class="link-light">Discord server</a></u>
-        </p>
     </div>
 
 </div>
diff --git a/src/components/ModPreview.astro b/src/components/ModPreview.astro
@@ -0,0 +1,28 @@
+---
+export interface Props {
+	mod: any;
+}
+
+const { mod: mod } = Astro.props;
+---
+
+<div class="p-2 pb-1 card bg-secondary h-100">
+    <div class="d-flex flex-column text-center h-100">
+        <a href={"/mods/" + mod.name.toLowerCase().trim().split(" ").join("_")}><h5 class="text-center">{mod.name}</h5></a>
+        {(mod.first_image != undefined) && 
+            <div class="pb-2">
+                <img class="w-75" src={mod.first_image}>
+            </div>
+         }
+        <div class="flex-grow-1"></div>
+        <div class="bg-black bg-opacity-25 rounded p-1">
+            <div style="height: 80px; max-height:80px; overflow: hidden; text-overflow:ellipsis; whitespace: nowrap" class="d-block align-text-top">
+            <p>{mod.description}</p> 
+            </div>
+            <div class="opacity-50 ">
+                <p class="mb-0"><i>By {mod.author} • {mod.downloads} downloads</i></p>  
+            </div>
+        </div>
+
+    </div>
+</div>
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
@@ -3,11 +3,21 @@ const pages = [
     ["/", "Home"],
     ["/mods/", "Mods"]
 ]
+const currentPath = Astro.url.pathname;
+
+function shouldFadeTab(path : string) {
+    if (path == "/") {
+        return currentPath != path
+    }
+    else {
+        return !currentPath.startsWith(path)
+    }
+}
 ---
 
 <nav class="d-flex justify-content-start">
     {pages.map(([path, title]) => (
-        <div class="bg-secondary text-light rounded me-2 ms-2 p-2">
+        <div class="rounded-top bg-grey text-light me-2 ms-2 p-2" class:list={[{"bg-opacity-75": shouldFadeTab(path)}]}>
             <a class="nav-link pe-2 ps-2" href={path}>{title}</a>
         </div>
     ))}

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -79,7 +79,7 @@ const { title } = Astro.props;
 		}
 		a {
 			text-decoration: none;
-			color:cornflowerblue
+			color: cornflowerblue
 		}
 		.dredge-bg {
 			background-image: url('/images/dredge.webp');
@@ -95,14 +95,14 @@ const { title } = Astro.props;
 				text-shadow: none ! important;
 			}
 	</style>
-	<body class="d-flex flex-column min-vh-100 bg-secondary dredge-bg">
+	<body class="d-flex flex-column min-vh-100 bg-black dredge-bg">
 
 		<div class="text-dark d-flex flex-column justify-content-center m-auto container">
 			<Header />
-
+			
 			<Navigation />
 
-			<div class="card bg-grey text-light mt-2">
+			<div class="bg-grey text-light">
 				<slot />
 			</div>
 

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -3,6 +3,12 @@ import Layout from '../layouts/Layout.astro';
 import Title from '../components/Title.astro';
 import BrandLink from '../components/BrandLink.astro';
 import json from '../database.json';
+import ModPreview from '../components/ModPreview.astro';
+
+const featured_mods = [
+	"Dredge VR",
+	"Cosmic Horror Fishing Buddies"
+]
 ---
 
 <Layout title="DREDGE Mods">
@@ -21,12 +27,24 @@ import json from '../database.json';
 
 		<div class="w-100 justify-content-center d-flex">
 			<div class="w-md-50">
-				<p>Here are some of the mods available. See the rest of them <a href="/mods/">here</a>.</p>
+
+				<p>Try out one of these featured mods!</p>
+				<div class="d-flex flex-column align-items-center w-100">
+					{json.filter(x => featured_mods.includes(x.name)).map((mod : any) => 
+						<div class="m-2">
+							<ModPreview mod={mod}/>
+						</div>
+
+					 )}
+				</div>
+
+				<p>Here are some of the other mods available:</p>
 				<p>
-					{json.slice().sort(() => 0.5 - Math.random()).slice(0, 3).map(x => 
+					{json.slice().filter(x => !featured_mods.includes(x.name)).sort(() => 0.5 - Math.random()).slice(0, 3).map(x => 
 						<li><a href={"/mods/" + x.name.toLowerCase().trim().split(" ").join("_")}><b>{x.name}</b></a> - {x.description}</li>
 					)}
 				</p>
+				<p>See the rest of them <a href="/mods/">here</a>.</p>
 			</div>
 		</div>
 

diff --git a/src/pages/mods.astro b/src/pages/mods.astro
@@ -1,33 +1,21 @@
 ---
 import Layout from '../layouts/Layout.astro';
 import Title from '../components/Title.astro';
-import BrandLink from '../components/BrandLink.astro';
 import json from '../database.json';
+import ModPreview from '../components/ModPreview.astro';
 ---
 
 <Layout title="DREDGE Mods">
 	<main>
         <Title title="Available Mods" />
         <p>There are {json.length} mods available.</p>
 
-		<div class="d-flex flex-column align-items-center w-100">
-			{json.sort().map(x => 
-                <div class="card bg-secondary mb-4 w-md-75">
-                    <a href={"/mods/" + x.name.toLowerCase().trim().split(" ").join("_")}><h2 class="text-center">{x.name}</h2></a>
-
-                    <div class="d-flex flex-column justify-content-center text-center">
-                        <div>
-                            <p>{x.description}</p> 
-                        </div>
-                        <div class="opacity-50">
-                            <p><i>By {x.author} • {x.downloads} downloads • Version {x.latest_version.replace(/^v/, "")}</i></p>  
-                            <BrandLink class="fa-github" name={x.name + " on GitHub"} url={"https://www.github.com/" + x.repo} linkClass="link-light" />
-                        </div>
-                    </div>
-
-                    <br/>
-                </div>
-			)}
+		<div class="d-flex justify-content-center mw-100 flex-wrap align-content-around">
+            {json.sort((a, b) => b.downloads - a.downloads).map((mod : any) => 
+            <div class="m-2" style="flex: 1 1 0; min-width: 300px; max-width: 500px;">
+                <ModPreview mod={mod}/>
+            </div>
+             )}
 		</div>
 
 	</main>