feat: add basic sveltekit landing page

.vscode/settings.json

@@ -6,5 +6,8 @@
   "editor.codeActionsOnSave": {
     "source.organizeImports.biome": "explicit",
     "quickfix.biome": "explicit"
+  },
+  "[markdown]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }

README.md

@@ -9,54 +9,52 @@
 
 ## About
 
-Hibiki is a Discord bot focused on accessible and informational utilities.
+Hibiki is a Discord app focused on accessible and informational utilities.
 
-You can invite the official Hibiki instance using [this Discord invite][invite].
+## Invite
+
+You can invite the official Hibiki app using [this Discord invite][invite].
 
 **_NO support is given for self-hosted instances._**
 
 ## Terms of Service
 
 The information below applies to the official instance of Hibiki. Self-hosted instances or forks may not respect our official Terms of Service or privacy guidelines.
 
-> "Application" or "official instance" refers to the Hibiki bot application with the Discord user ID of `493904957523623936`.
+> "Application"/"official instance" refers to the Hibiki Discord application with the user ID of `493904957523623936` and/or the website with the URL `www.hibiki.app`.
 
-**Updated on April 16th, 2024**
+**Updated on May 10th, 2024**
 
 - Do not try to intentionally crash, break, or exploit the application
-- If you find a critical bug or security vulnerability, you must report it
+- If you find a critical bug or security vulnerability, please report it
 - Usage must follow Discord's **[Terms of Service][discord_tos]** and **[Community Guidelines][discord_cg]**
 - Usage must obey all laws in the **United States** (host location)
 
 ## Data Privacy
 
-**Updated on April 16th, 2024**
-
-The following types of user data can be stored when needed:
+**Updated on May 10th, 2024**
 
-- **User ID(s)**: A Discord ID pointing to a unique user
-- **Server ID(s)**: A Discord ID pointing to a unique server
-- **Message ID(s)**: A message ID pointing to a specific message
-- **Command Response(s)**: Responses in commands and other input forms
+_No identifiable information is stored in Hibiki's database._
 
-When added or removed from a server, the following information will be logged to a private Discord channel that only maintainers can access:
+When added or removed from a server, the following information will be logged to a private Discord channel that only project maintainers can access:
 
 - The server's creation date
 - The server name, icon, and guild ID
 - The server owner's username and user ID
 - The total number of unique members in the server
 
-To request user or server data deletion, please contact the primary maintainer:
+When an interaction is ran, the following information will be logged to the console output and stored into log files that are kept for 30 days:
+
+- The username and user ID of the interaction runner
+- The guild name and guild ID that the interaction was ran in
 
-- Discord - [@espimarisa][espi-discord] - please state why you added me after a friend request
-- Telegram - [@espimarisa][espi-telegram] - please include why you messaged me in your message
-- Email - [[email protected]][espi-email] - please include "Hibiki Data Deletion" in the contact line
+When Hibiki's website is accessed, the website will check what locale your browser is configured to use by using a default browser function. This information is not stored, and is only used to localize the homepage.
 
 ## License
 
 [zlib/libpng][license]
 
-[badge-stable-version]: https://img.shields.io/github/package-json/v/espimarisa/hibiki/main?color=blue "Shields.io badge showing the latest development version."
+[badge-stable-version]: https://img.shields.io/github/package-json/v/espimarisa/hibiki/main?color=blue "Shields.io badge showing the latest production version."
 [badge-develop-version]: https://img.shields.io/github/package-json/v/espimarisa/hibiki/develop?color=red "Shields.io badge showing the latest development version."
 [badge-license]: https://img.shields.io/badge/license-zlib-orange.svg "Shields.io badge displaying the zlib license."
 [badge-workflow]: https://img.shields.io/github/actions/workflow/status/espimarisa/hibiki/push.yml?branch=develop "Shields.io badge showing the latest workflow status."

biome.json

@@ -2,18 +2,18 @@
   "$schema": "https://biomejs.dev/schemas/1.6.3/schema.json",
 
   "files": {
-    "ignore": ["**/node_modules/*", "**/dist/*"],
+    "ignore": ["**/node_modules/*", "**/dist/*", "**/.svelte-kit/*", "**/packages/web/build/*"],
     "ignoreUnknown": true
   },
   "formatter": {
-    "ignore": ["**/node_modules/*", "**/dist/*"],
+    "ignore": ["**/node_modules/*", "**/dist/*", "**/.svelte-kit/*", "**/build/*"],
     "enabled": true,
     "formatWithErrors": true,
     "lineWidth": 120,
     "indentStyle": "space"
   },
   "linter": {
-    "ignore": ["**/node_modules/*", "**/dist/*"],
+    "ignore": ["**/node_modules/*", "**/dist/*", "**/.svelte-kit/*", "**/build/*"],
     "enabled": true,
     "rules": {
       "complexity": {
@@ -29,7 +29,7 @@
     }
   },
   "organizeImports": {
-    "ignore": ["**/node_modules/*", "**/dist/*"],
+    "ignore": ["**/node_modules/*", "**/dist/*", "**/.svelte-kit/*", "**/build/*"],
     "enabled": true
   },
   "javascript": {

locales/en-US/web.json

@@ -0,0 +1,13 @@
+{
+  "ADD_TO_DISCORD": "Add to Discord",
+  "DONATE": "Donate",
+  "FOOTER_LICENSE": "zlib/libpng license",
+  "FOOTER_OPEN_SOURCE": "Open source under the",
+  "GITHUB": "GitHub",
+  "HIBIKI": "Hibiki",
+  "HIBIKI_DESCRIPTION": "A Discord app focused on accessible and informational utilities.",
+  "PRIVACY_POLICY": "Privacy Policy",
+  "SUPPORT": "Support",
+  "TERMS_OF_SERVICE": "Terms of Service",
+  "TRANSLATE": "Translate"
+}

package.json

@@ -23,13 +23,23 @@
     "start:web": "bun run --env-file .env -- turbo run start --filter=@espimarisa/hibiki-web --filter=@espimarisa/hibiki-db",
     "test": "bun run --env-file .env -- turbo run test"
   },
-  "trustedDependencies": ["@biomejs/biome", "es5-ext", "esbuild"],
+  "trustedDependencies": [
+    "@biomejs/biome",
+    "@fortawesome/fontawesome-common-types",
+    "@fortawesome/fontawesome-svg-core",
+    "@fortawesome/free-brands-svg-icons",
+    "@fortawesome/free-solid-svg-icons",
+    "@sveltejs/kit",
+    "es5-ext",
+    "esbuild",
+    "svelte-preprocess"
+  ],
   "dependencies": {
     "tslib": "^2.6.2"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.7.3",
-    "@types/bun": "^1.1.1",
+    "bun-types": "^1.1.7",
     "turbo": "^1.13.3",
     "typescript": "^5.4.5"
   }

packages/db/package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "check": "tsc --noEmit",
     "db:generate": "bun drizzle-kit generate",
-    "db:prepare": "bun run db:generate && bun run db",
+    "db:prepare": "bun run db:generate",
     "db:push": "bun drizzle-kit push",
     "db:studio": "bun run db:push && bun run db:generate && drizzle-kit studio",
     "format": "biome format --write .",

packages/shared/src/constants.ts

@@ -14,3 +14,28 @@ export const HibikiColors = {
   // Orange #FE6100
   ERROR: 0xfe_61_00,
 };
+
+// Donate URL
+export const HibikiDonateURL = "https://github.com/sponsors/espimarisa";
+
+// Translate URL
+// TODO: Add a URL
+export const HibikiTranslateURL = "https://github.com/espimarisa/hibiki";
+
+// License URL
+export const HibikiLicenseURL = "https://github.com/espimarisa/hibiki/LICENSE.md";
+
+// Support invite
+export const HibikiSupportInvite = "https://discord.gg/VpRscV3mdn";
+
+// Invite permissions
+export const HibikiInvitePermissions = 28_307_378_007_798;
+
+// Invite scope
+export const HibikiInviteScope = ["bot", "applications.commands"];
+
+// Homepage URL
+export const HibikiWebURL = "https://hibiki.app";
+
+export const HibikiPrivacyURL = "https://github.com/espimarisa/hibiki#data-privacy";
+export const HibikiTermsURL = "https://github.com/espimarisa/hibiki#terms-of-service";

packages/shared/src/i18n.ts

@@ -61,4 +61,3 @@ export async function getLocalizationsForKey(string: keyof typeof commands, lowe
 
 // Shortcut for translate
 export const t = i18n.t;
-export { i18n };

packages/web/biome.json

@@ -0,0 +1,43 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.6.3/schema.json",
+
+  "files": {
+    "ignore": ["**/node_modules/*", "**/dist/*", "**/.svelte-kit/*", "**/build/*"],
+    "ignoreUnknown": true
+  },
+  "formatter": {
+    "ignore": ["**/node_modules/*", "**/dist/*", "**/.svelte-kit/*", "**/build/*"],
+    "enabled": true,
+    "formatWithErrors": true,
+    "lineWidth": 120,
+    "indentStyle": "space"
+  },
+  "linter": {
+    "ignore": ["**/node_modules/*", "**/dist/*", "**/.svelte-kit/*", "**/build/*"],
+    "enabled": true,
+    "rules": {
+      "complexity": {
+        "noExcessiveCognitiveComplexity": "off"
+      },
+      "all": true,
+      "style": {
+        "noNonNullAssertion": "off",
+        "useFilenamingConvention": "off",
+        "useNamingConvention": "off",
+        "noParameterProperties": "off"
+      }
+    }
+  },
+  "organizeImports": {
+    "ignore": ["**/node_modules/*", "**/dist/*", "**/.svelte-kit/*", "**/build/*"],
+    "enabled": true
+  },
+  "javascript": {
+    "globals": ["Bun", "JSX"]
+  },
+  "json": {
+    "parser": {
+      "allowComments": true
+    }
+  }
+}

packages/web/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@espimarisa/hibiki-web",
+  "type": "module",
+  "author": "Espi Marisa <[email protected]> (https://espi.me)",
+  "license": "zlib",
+  "private": true,
+  "scripts": {
+    "build": "svelte-kit sync && bunx --bun vite build",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "dev": "svelte-kit sync && bunx --bun vite dev",
+    "format": "biome format --write .",
+    "lint": "biome check .",
+    "lint:fix": "biome check --apply .",
+    "preview": "vite preview",
+    "start": "NODE_ENV=production bun run ./build/index.js",
+    "test": "bun run check && bun run lint"
+  },
+  "dependencies": {
+    "@fontsource/atkinson-hyperlegible": "^5.0.20",
+    "@fortawesome/free-brands-svg-icons": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/svelte-fontawesome": "^0.2.2",
+    "modern-normalize": "^2.0.0",
+    "svelte-adapter-bun": "^0.5.2",
+    "svelte-i18n": "^4.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/kit": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^3.1.0",
+    "svelte": "^4.2.16",
+    "svelte-check": "^3.7.1",
+    "vite": "^5.2.11"
+  }
+}

packages/web/src/app.d.ts

@@ -0,0 +1,10 @@
+export interface SvelteMetadata {
+  title?: string;
+  description?: string;
+  image?: string;
+  imageAltText?: string;
+  url?: string;
+  type?: string;
+  twitterCard?: string;
+  themeColor?: string;
+}

packages/web/src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

packages/web/src/components/Footer.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+// biome-ignore lint/correctness/noUnusedImports: This is used. BiomeJS bug.
+import { faHeart } from "@fortawesome/free-solid-svg-icons";
+// biome-ignore lint/correctness/noUnusedImports: This is used. BiomeJS bug.
+import { FontAwesomeIcon } from "@fortawesome/svelte-fontawesome";
+import { onMount } from "svelte";
+// biome-ignore lint/correctness/noUnusedImports: This is used. BiomeJS bug.
+import { _ as t } from "svelte-i18n";
+// biome-ignore lint/correctness/noUnusedImports: This is used. BiomeJS bug.
+import Link from "./Link.svelte";
+
+// biome-ignore lint/correctness/noUnusedVariables: This is used. BiomeJS bug.
+const date = new Date().getFullYear();
+
+onMount(() => {
+  // Silly little easter egg
+  const cuteElement = document.querySelector("#readIfCute");
+  if (cuteElement) {
+    cuteElement.addEventListener("click", () => {
+      cuteElement.textContent = "read if cute :3";
+    });
+  }
+});
+</script>
+
+<footer>
+  <p id="readIfCute"><FontAwesomeIcon icon={faHeart} /></p>
+  <p>&copy {date} Espi Marisa.</p>
+  <p>
+    {$t("FOOTER_OPEN_SOURCE")} <Link href="/license" outbound>{$t("FOOTER_LICENSE")}</Link>.
+  </p>
+</footer>

packages/web/src/components/Link.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+// Customizable href
+// biome-ignore lint/style/useConst: Svelte let export
+export let href = "javascript:void(0);";
+
+// Set to 'false' to disable target=_blank and rel=noopener noreferrer
+export let outbound = false;
+
+export let target = "";
+export let rel = "";
+// biome-ignore lint/style/useConst: Svelte let export
+export let active = false;
+
+// biome-ignore lint/style/useConst: Svelte let export
+export let className = "";
+// biome-ignore lint/style/useConst: Svelte let export
+export let idName = "";
+
+if (typeof window !== "undefined") {
+  const isExternal = new URL(href, `${location.protocol}//${location.host}`).host !== location.host;
+  if (isExternal && outbound === undefined) {
+    outbound = true;
+  }
+}
+
+if (outbound) {
+  target = "_blank";
+  if (!rel) {
+    rel = "noopener noreferrer";
+  }
+}
+</script>
+
+<a aria-current={active ? "page" : undefined} {href} {target} {rel} class={className} id={idName}>
+  <slot />
+</a>