blog/fullscreen

apps/web/src/content/about/index.mdx

@@ -3,6 +3,8 @@ title: About
 description: Read why Overlayed was created and why Discord is gatekeeping
 ---
 
+import { DISCORD_INVITE_LINK } from "../../constants";
+
 # About Overlayed
 
 ## 🤔 Why does Overlayed exist
@@ -21,18 +23,10 @@ Keep in mind the Discord overlay only works on Windows so if you are on Linux or
 
 ## 🦺 Is Overlayed safe to use
 
-It's probably not ["fully ToS compliant"](https://discord.com/terms) but you're unlikely to get banned for using it. I've tried to contact Discord several times to get an approved application but they refused to give me any help.
-
-Latest Discord Support thread 🍿
-![my ticket request](/img/discord/my-request.png)
-![discord support 1](/img/discord/support-1.png)
-![my response](/img/discord/my-response.png)
-![discord support 2](/img/discord/support-2.png)
-
-<div class="bg-blue-900 border border-blue-500 text-white px-4" role="alert">
-  <p class="font-bold">Do you know how to help? ❤️</p>
-  <p class="text-sm">
-    If you work for Discord or know someone who can help feel free to contact me at
-    [[email protected]](mailto:[email protected])
-  </p>
-</div>
+Yes and coming soon™ is the official app as well!
+
+![Official Overlayed Login](/img/discord/overlayed-auth.png)
+
+## How can I get support
+
+Please raise an issue on [Github](https://github.com/Hacksore/Overlayed) or visit the <a target="_blank" href={DISCORD_INVITE_LINK}>Discord Server</a>

apps/web/src/content/blog/borderless-fullscreen.mdx

@@ -0,0 +1,34 @@
+---
+title: Using Overlayed In Fullscreen Games
+customSlug: discord-overlay-in-any-game
+canonicalPath: /discord-overlay-in-any-game
+description: This guide will help you set your game to allow Overlayed to still work
+ogImage: "../../assets/blog/borderless-windowed.png"
+pubDate: "Jun 01 2024"
+draft: false
+---
+
+This guide will show you how to enable games to be played in <a href="https://www.pcgamingwiki.com/wiki/Glossary:Windowed#Borderless_fullscreen_windowed" target="_blank">borderless fullscreen windowed</a>. This will allow you to have Overlayed visible in almost any game that supports borderless fulllscreen windowed mode.
+
+**tl;dr** the game renders in "fullscreen" but behaves as if it was a window allowing things to render on top.
+
+### Check In-Game Settings
+
+Many modern games include a borderless fullscreen windowed mode option in their settings. Here’s how to check:
+
+- **Launch the Game**: Start the game and navigate to the main menu.
+- **Open Settings**: Look for the “Settings,” “Options,” or “Preferences” menu.
+- **Graphics/Display Settings**: Go to the graphics or display settings tab.
+- **Fullscreen Mode**: Look for options labeled “Fullscreen,” “Windowed,” or “Borderless Windowed.”
+- **Select Borderless Windowed**: Choose “Borderless Windowed” or similar option.
+- **Apply Changes**: Save or apply the changes and restart the game if necessary.
+
+<div
+  class="bg-yellow-900 border border-yellow-500 text-white px-4"
+  role="alert"
+>
+  <p class="font-bold h-3">NOTE: This might not work in all games!</p>
+  <p class="text-sm">
+    Since every game and operating system is different, these steps might not work 😞
+  </p>
+</div>

apps/web/src/env.d.ts

@@ -1,3 +1,4 @@
-import "../.astro/types.d.ts";
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="../.astro/types.d.ts" />
 /// <reference types="astro/client" />

apps/web/src/pages/blog/[...slug].astro

@@ -38,6 +38,23 @@ const { Content } = await post.render();
       {post.data.pubDate}
     </p>
     <Content />
+    <hr />
+    <script
+      is:inline
+      src="https://giscus.app/client.js"
+      data-repo="Hacksore/overlayed"
+      data-repo-id="R_kgDOKpEChw"
+      data-category="Announcements"
+      data-category-id="DIC_kwDOKpECh84CfynN"
+      data-mapping="title"
+      data-strict="0"
+      data-reactions-enabled="1"
+      data-emit-metadata="0"
+      data-input-position="bottom"
+      data-theme="dark"
+      data-lang="en"
+      crossorigin="anonymous"
+      async></script>
   </main>
   <Footer />
 </Layout>