Merge pull request #26 from qlemaire22:tools-page

[#15] Tools page

Author: robertvanhoesel

src/assets/content/luminite.png

@@ -5,13 +5,14 @@ import NewsMeta from "./sources/NewsMeta.astro"
 import RedditMeta from "./sources/RedditMeta.astro"
 import TwitterMeta from "./sources/TwitterMeta.astro"
 import YoutubeMeta from "./sources/YoutubeMeta.astro"
+import ToolMeta from "./sources/ToolMeta.astro"
 export interface Props {
   data: Content
 }
 
 const { data } = Astro.props
 
-const isStormgatenexus = data.source == "news" && data.author_url.includes("stormgatenexus.com")
+const isStormgatenexus = data.source == "news" && data.author_url?.includes("stormgatenexus.com")
 ---
 
 <div
@@ -43,7 +44,7 @@ const isStormgatenexus = data.source == "news" && data.author_url.includes("stor
   }
   <div class="flex flex-auto flex-col p-6">
     {
-      ["twitter"].includes(data.source) ? (
+      data.source && ["twitter"].includes(data.source) ? (
         <a
           class:list={[
             "text-gray-100 whitespace-pre-wrap text-md line-clamp-5",
@@ -91,6 +92,8 @@ const isStormgatenexus = data.source == "news" && data.author_url.includes("stor
           <YoutubeMeta data={data} />
         ) : data.source === "news" ? (
           <NewsMeta data={data} />
+        ) : data.source === "tool" ? (
+          <ToolMeta data={data} />
         ) : (
           <slot>
           </slot>

src/assets/content/replay-renamer.png

@@ -0,0 +1,12 @@
+---
+import type { ToolContent } from "../../lib/content"
+import { styles } from "../../lib/theme"
+
+export interface Props {
+  data: ToolContent
+}
+
+const { data } = Astro.props
+---
+
+{data.metadata?.tags.map((tag) => <div class={styles.tag.base}>{tag}</div>)}

src/components/Card.astro

@@ -15,6 +15,7 @@ const navLinks = [
   { href: "/stats", text: "Stats" },
   { href: "/social", text: "Content" },
   { href: "/api", text: "API" },
+  { href: "/tools", text: "Tools" },
   // { href: "/creators", text: "Creators" },
 ]
 ---
@@ -48,7 +49,7 @@ const navLinks = [
             <a
               href={href}
               class:list={[
-                "font-bold rounded px-2 md:px-3 py-1 md:py-1.5",
+                "font-bold rounded px-2 text-sm xs:text-base md:px-3 py-1 md:py-1.5",
                 currentRoute === href ? "bg-white/5 text-gray-50" : "hover:bg-white/5 text-gray-200 ",
               ]}
             >

src/components/sources/ToolMeta.astro

@@ -2,7 +2,7 @@ import { debugLog } from "./utils"
 
 export const validContentOrders = ["score_relevant", "score_popular", "published_at"] as const
 export const validCreatorsOrders = ["popular", "active"] as const
-export const validSources = ["youtube", "twitter", "reddit", "news"] as const
+export const validSources = ["youtube", "twitter", "reddit", "news", "tool"] as const
 export const validLanguages = ["any", "en", "es", "fr", "de", "it", "pt", "ru", "zh"] as const
 
 export type FetchContentOrder = (typeof validContentOrders)[number]
@@ -53,7 +53,7 @@ export async function fetchContent<S extends Content["source"][] = []>(sources:
   })
 
   if (sources.length > 0) {
-    sources.forEach((s) => urlParams.append("sources[]", s))
+    sources.forEach((s) => urlParams.append("sources[]", s || ""))
   }
 
   const url = `https://api.stormgateworld.com/v0/content?${urlParams.toString()}`
@@ -66,21 +66,21 @@ export async function fetchContent<S extends Content["source"][] = []>(sources:
 }
 
 export type SourceData<Source extends string, T = undefined> = {
-  id: number
+  id?: number
   source: Source
-  source_id: string
-  metadata: T
-  score: number
+  source_id?: string
+  metadata?: T
+  score?: number
   title: string
   description: string
   url: string
   image_url: string
-  author: string
-  author_url: string
-  author_image_url: string
-  published_at: string
-  updated_at: string
-  created_at: string
+  author?: string
+  author_url?: string
+  author_image_url?: string
+  published_at?: string
+  updated_at?: string
+  created_at?: string
 }
 
 export type TwitterData = {
@@ -103,11 +103,15 @@ export type RedditData = {
   upvotes_count: number
 }
 
+export type ToolData = {
+  tags: string[]
+}
 
 export type YoutubeContent = SourceData<"youtube", YoutubeData>
 export type TwitterContent = SourceData<"twitter", TwitterData>
 export type RedditContent = SourceData<"reddit", RedditData>
 export type NewsContent = SourceData<"news">
-export type Content = YoutubeContent | TwitterContent | RedditContent | NewsContent
+export type ToolContent = SourceData<"tool", ToolData>
+export type Content = YoutubeContent | TwitterContent | RedditContent | NewsContent | ToolContent
 
 type FilteredContentType<T extends Content["source"]> = Extract<Content, { source: T }>

src/layouts/Layout.astro

@@ -30,6 +30,13 @@ export const styles = {
             hover:bg-gray-500/50 ui-highlighted:bg-gray-600/20 ui-highlighted:!ring-0
             outline-none focus-visible:ring-2 focus-visible:ring-gray-300 focus-visible:ring-opacity-50
             `,
+    },
+    tag: {
+        base: `inline-flex items-center justify-center rounded-sm
+        bg-gray-700/50 border border-gray-500 backdrop-blur-sm rounded-xl
+        text-gray-100 font-semibold whitespace-nowrap
+        outline-none
+        transition duration-200 px-3 py-1.5 text-sm`,
     }
 }
 

src/lib/content.ts

@@ -0,0 +1,50 @@
+---
+import Layout from "../layouts/Layout.astro"
+import Card from "../components/Card.astro"
+import type { ToolContent } from "../lib/content"
+import luminiteImage from "../assets/content/luminite.png"
+import replayRenamerImage from "../assets/content/replay-renamer.png"
+
+const toolsContent: ToolContent[] = [
+  {
+    title: "Streamer Overlay",
+    source: "tool",
+    description: "A tool for streamers to display information about ongoing games in their broadcasts.",
+    url: "https://overlay.stormgateworld.com/",
+    image_url: "https://raw.githubusercontent.com/stormgateworld/overlay/main/Preview.png",
+    metadata: { tags: ["Overlay", "By SGW"] },
+  },
+  {
+    title: "Luminite.gg",
+    source: "tool",
+    description: "Discover and share build orders. View unit information and ladder stats.",
+    url: "https://luminite.gg/",
+    image_url: luminiteImage.src,
+    metadata: { tags: ["Build orders", "Stats", "External"] },
+  },
+  {
+    title: "Replay Renamer",
+    source: "tool",
+    description: "Python script to rename replays.",
+    url: "https://gist.github.com/acarapetis/b5e9cf199ea2a468ace2f756ac287268",
+    image_url: replayRenamerImage.src,
+    metadata: { tags: ["Replays", "External"] },
+  },
+]
+---
+
+<Layout title="Tools">
+  <div class="w-full bg-gray-800/50 backdrop-blur-lg border-b border-gray-700/50">
+    <div class="mx-auto max-w-screen-lg px-4 lg:px-0 py-8 gap-4 flex items-center flex-wrap justify-between">
+      <div>
+        <p class="font-bold text-gray-500">Community</p>
+        <h1 class="text-2xl text-white font-bold flex-auto">Tools and Projects</h1>
+      </div>
+    </div>
+  </div>
+  <div class="mx-auto max-w-screen-lg w-full py-4 md:py-8 px-8 lg:px-0">
+    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+      {toolsContent.map((c) => <Card data={c} />)}
+    </div>
+  </div>
+</Layout>