titaniumnet-mirror/Nebula
1
0
Fork 0
mirror of https://github.com/NebulaServices/Nebula.git synced 2025-05-17 05:20:01 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

run npm run format

Browse source
This commit is contained in:
cohenerickson 2023-12-14 08:45:54 -06:00
parent 99b08aff08
commit 2fe742f3f0
17 changed files with 259 additions and 238 deletions
Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />

6
postcss.config.js
View file

@ -1,6 +1,6 @@
export default { export default {
plugins: { plugins: {
tailwindcss: {}, tailwindcss: {},
autoprefixer: {}, autoprefixer: {}
}, }
} };

8
public/sw.js
View file

@ -1,8 +1,8 @@
// @ts-nocheck // @ts-nocheck
importScripts('/ultra/ultra.bundle.js'); importScripts("/ultra/ultra.bundle.js");
importScripts('/ultra/ultra.config.js'); importScripts("/ultra/ultra.config.js");
importScripts(__uv$config.sw || '/ultra/ultra.sw.js'); importScripts(__uv$config.sw || "/ultra/ultra.sw.js");
const sw = new UVServiceWorker(); const sw = new UVServiceWorker();
self.addEventListener('fetch', (event) => event.respondWith(sw.fetch(event))); self.addEventListener("fetch", (event) => event.respondWith(sw.fetch(event)));

36
src/components/Header.tsx
View file

@ -1,5 +1,5 @@
import { HeaderButton } from "./HeaderButton"; import { HeaderButton } from "./HeaderButton";
import { useTranslation } from 'react-i18next'; import { useTranslation } from "react-i18next";
// Header icons // Header icons
import { HiOutlineCube } from "react-icons/hi"; import { HiOutlineCube } from "react-icons/hi";
@ -10,18 +10,38 @@ export function Header() {
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<div id="navbar" className="h-16 px-4 bg-navbar-color flex flex-row items-center justify-between"> <div
id="navbar"
className="flex h-16 flex-row items-center justify-between bg-navbar-color px-4"
>
<a href="/" class="w-1/2"> <a href="/" class="w-1/2">
<div className="flex flex-row items-center"> <div className="flex flex-row items-center">
<img src="/logo.png" className="h-16 w-16 hover:rotate-[360deg] transition-all duration-1000"></img> <img
<h1 className="font-roboto text-navbar-text-color text-4xl font-bold">{t('header.title')}</h1> src="/logo.png"
className="h-16 w-16 transition-all duration-1000 hover:rotate-[360deg]"
></img>
<h1 className="font-roboto text-4xl font-bold text-navbar-text-color">
{t("header.title")}
</h1>
</div> </div>
</a> </a>
<div className="w-1/2"> <div className="w-1/2">
<div className="flex flex-row justify-end items-center"> <div className="flex flex-row items-center justify-end">
<HeaderButton href="/games" Icon={HiOutlineCube} translationKey="header.games" /> <HeaderButton
<HeaderButton href="/settings" Icon={RxMixerVertical} translationKey="header.settings" /> href="/games"
<HeaderButton href="/discord" Icon={RiLinksFill} translationKey="header.discord" /> Icon={HiOutlineCube}
translationKey="header.games"
/>
<HeaderButton
href="/settings"
Icon={RxMixerVertical}
translationKey="header.settings"
/>
<HeaderButton
href="/discord"
Icon={RiLinksFill}
translationKey="header.discord"
/>
</div> </div>
</div> </div>
</div> </div>

6
src/components/HeaderButton.tsx
View file

@ -13,9 +13,9 @@ export function HeaderButton(props: HeaderButtonProps) {
return ( return (
<Link href={href}> <Link href={href}>
<div className="group p-4 flex flex-row items-center"> <div className="group flex flex-row items-center p-4">
<Icon className="group-hover:text-text-hover-color transition duration-500 w-6 h-6" /> <Icon className="h-6 w-6 transition duration-500 group-hover:text-text-hover-color" />
<span className="group-hover:text-text-hover-color transition duration-500 text-text-color text-lg pl-1 font-roboto font-bold"> <span className="font-roboto pl-1 text-lg font-bold text-text-color transition duration-500 group-hover:text-text-hover-color">
{t(translationKey)} {t(translationKey)}
</span> </span>
</div> </div>

22
src/i18n.ts
View file

@ -1,17 +1,17 @@
import i18n from 'i18next'; import i18n from "i18next";
import { initReactI18next } from 'react-i18next'; import { initReactI18next } from "react-i18next";
import LanguageDetector from 'i18next-browser-languagedetector'; import LanguageDetector from "i18next-browser-languagedetector";
import translationEN from './locales/en.json'; import translationEN from "./locales/en.json";
import translationJA from './locales/ja.json'; import translationJA from "./locales/ja.json";
const resources = { const resources = {
en: { en: {
translation: translationEN, translation: translationEN
}, },
ja: { ja: {
translation: translationJA, translation: translationJA
}, }
}; };
i18n i18n
@ -19,10 +19,10 @@ i18n
.use(LanguageDetector) .use(LanguageDetector)
.init({ .init({
resources, resources,
fallbackLng: 'en', fallbackLng: "en",
interpolation: { interpolation: {
escapeValue: false, escapeValue: false
}, }
}); });
export default i18n; export default i18n;

22
src/index.tsx
View file

@ -1,18 +1,18 @@
import { render } from 'preact'; import { render } from "preact";
import { LocationProvider, Router, Route } from 'preact-iso'; import { LocationProvider, Router, Route } from "preact-iso";
import { Header } from './components/Header.jsx'; import { Header } from "./components/Header.jsx";
import { Home } from './pages/Home'; import { Home } from "./pages/Home";
import { NotFound } from './pages/_404.jsx'; import { NotFound } from "./pages/_404.jsx";
import './style.css'; import "./style.css";
import './themes/main.css'; import "./themes/main.css";
import './i18n'; import "./i18n";
import { discordPag } from './pages/discord.js'; import { discordPag } from "./pages/discord.js";
export function App() { export function App() {
return ( return (
<LocationProvider> <LocationProvider>
<div class="flex flex-col h-screen"> <div class="flex h-screen flex-col">
<Header /> <Header />
<div class="flex-1 bg-primary"> <div class="flex-1 bg-primary">
<main class="h-full"> <main class="h-full">
@ -28,4 +28,4 @@ export function App() {
); );
} }
render(<App />, document.getElementById('app')); render(<App />, document.getElementById("app"));

13
src/pages/Home.tsx
View file

@ -1,12 +1,12 @@
import { useState } from "preact/hooks"; import { useState } from "preact/hooks";
import { useTranslation } from 'react-i18next'; import { useTranslation } from "react-i18next";
export function Home() { export function Home() {
const [isFocused, setIsFocused] = useState(false); const [isFocused, setIsFocused] = useState(false);
const { t } = useTranslation() const { t } = useTranslation();
return ( return (
<div class="flex justify-center items-center h-full"> <div class="flex h-full items-center justify-center">
<input <input
onFocus={(e) => { onFocus={(e) => {
setIsFocused(true); setIsFocused(true);
@ -15,10 +15,9 @@ export function Home() {
setIsFocused(false); setIsFocused(false);
}} }}
type="text" type="text"
class="p-2 border border-input-border-color rounded-2xl h-14 w-80 text-center bg-input text-xl placeholder:text-input-text focus:outline-none font-roboto" class="font-roboto h-14 w-80 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none"
placeholder={isFocused ? '' : t('home.placeholder')} placeholder={isFocused ? "" : t("home.placeholder")}
> ></input>
</input>
</div> </div>
); );
} }

18
src/pages/_404.tsx
View file

@ -1,18 +1,20 @@
import { useTranslation } from 'react-i18next'; import { useTranslation } from "react-i18next";
import { Link } from 'preact-router'; import { Link } from "preact-router";
export function NotFound() { export function NotFound() {
const { t } = useTranslation() const { t } = useTranslation();
return ( return (
<section class="h-full"> <section class="h-full">
<div class="flex justify-center items-center h-full flex-col"> <div class="flex h-full flex-col items-center justify-center">
<img src="/404.png" class="h-72"></img> <img src="/404.png" class="h-72"></img>
<div class="p-6 flex flex-col items-center"> <div class="flex flex-col items-center p-6">
<p class="text-4xl font-roboto font-bold">{t('404.text')}</p> <p class="font-roboto text-4xl font-bold">{t("404.text")}</p>
<span class="text-3xl font-roboto">404</span> <span class="font-roboto text-3xl">404</span>
</div> </div>
<Link href="/"> <Link href="/">
<button class="p-2 border border-input-border-color rounded-2xl h-14 w-44 text-center bg-input text-xl placeholder:text-input-text focus:outline-none font-roboto">{t('404.return')}</button> <button class="font-roboto h-14 w-44 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none">
{t("404.return")}
</button>
</Link> </Link>
</div> </div>
</section> </section>

20
src/pages/discord.tsx
View file

@ -1,19 +1,23 @@
import { useTranslation } from 'react-i18next'; import { useTranslation } from "react-i18next";
export function discordPag() { export function discordPag() {
const { t } = useTranslation() const { t } = useTranslation();
return ( return (
<section class="h-full"> <section class="h-full">
<div class="flex justify-center items-center h-full flex-col"> <div class="flex h-full flex-col items-center justify-center">
<div class="p-6 flex flex-col items-center"> <div class="flex flex-col items-center p-6">
<p class="text-4xl font-roboto font-bold">{t('discord.title')}</p> <p class="font-roboto text-4xl font-bold">{t("discord.title")}</p>
<span class="text-3xl font-roboto">{t('discord.sub')}</span> <span class="font-roboto text-3xl">{t("discord.sub")}</span>
</div> </div>
<a href="https://discord.gg/unblocker" class="p-6"> <a href="https://discord.gg/unblocker" class="p-6">
<button class="p-2 border border-input-border-color rounded-2xl h-14 w-56 text-center bg-input text-xl placeholder:text-input-text focus:outline-none font-roboto">{t('discord.button1')}</button> <button class="font-roboto h-14 w-56 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none">
{t("discord.button1")}
</button>
</a> </a>
<a href="/" class="p-6"> <a href="/" class="p-6">
<button class="p-2 border border-input-border-color rounded-2xl h-14 w-56 text-center bg-input text-xl placeholder:text-input-text focus:outline-none font-roboto">{t('discord.button2')}</button> <button class="font-roboto h-14 w-56 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none">
{t("discord.button2")}
</button>
</a> </a>
</div> </div>
</section> </section>

2
src/style.css
View file

@ -1,4 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;700;900&display=swap'); @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;700;900&display=swap");
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;

6
src/themes/main.css
View file

@ -14,13 +14,13 @@
--input-border-color: #eb6f92; --input-border-color: #eb6f92;
--input-border-size: 1.3px; --input-border-size: 1.3px;
--navbar-logo-filter: none; --navbar-logo-filter: none;
} }
.font-inter { .font-inter {
font-family: 'Inter', sans-serif; font-family: "Inter", sans-serif;
font-weight: 300; font-weight: 300;
} }
.font-roboto { .font-roboto {
font-family: 'Roboto'; font-family: "Roboto";
} }

16
tailwind.config.js
View file

@ -1,22 +1,18 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
export default { export default {
content: [ content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: { theme: {
colors: { colors: {
"primary": "var(--background-primary)", primary: "var(--background-primary)",
"navbar-text-color": "var(--navbar-text-color)", "navbar-text-color": "var(--navbar-text-color)",
"navbar-color": "var(--navbar-color)", "navbar-color": "var(--navbar-color)",
"text-color": "var(--navbar-link-color)", "text-color": "var(--navbar-link-color)",
"text-hover-color": "var(--navbar-link-hover-color)", "text-hover-color": "var(--navbar-link-hover-color)",
"input": "var(--input-background-color)", input: "var(--input-background-color)",
"input-text": "var(--input-text-color)", "input-text": "var(--input-text-color)",
"input-border-color": "var(--input-border-color)" "input-border-color": "var(--input-border-color)"
}, },
extend: {}, extend: {}
}, },
plugins: [], plugins: []
} };

8
vite.config.ts
View file

@ -1,8 +1,8 @@
import million from 'million/compiler'; import million from "million/compiler";
import { defineConfig } from 'vite'; import { defineConfig } from "vite";
import preact from '@preact/preset-vite'; import preact from "@preact/preset-vite";
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [million.vite({ auto: true }), preact()], plugins: [million.vite({ auto: true }), preact()]
}); });