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

30
index.html
View file

@ -1,17 +1,17 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/logo.png" /> <link rel="icon" type="image/svg+xml" href="/logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="light dark" /> <meta name="color-scheme" content="light dark" />
<title>Nebula</title> <title>Nebula</title>
<script src="/ultra/ultra.config.js"></script> <script src="/ultra/ultra.config.js"></script>
<script src="/ultra/ultra.bundle.js"></script> <script src="/ultra/ultra.bundle.js"></script>
<script src="/sw.js"></script> <script src="/sw.js"></script>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/index.tsx"></script> <script type="module" src="/src/index.tsx"></script>
</body> </body>
</html> </html>

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)));

50
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,20 +10,40 @@ 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
<a href="/" class="w-1/2"> id="navbar"
<div className="flex flex-row items-center"> className="flex h-16 flex-row items-center justify-between bg-navbar-color px-4"
<img src="/logo.png" className="h-16 w-16 hover:rotate-[360deg] transition-all duration-1000"></img> >
<h1 className="font-roboto text-navbar-text-color text-4xl font-bold">{t('header.title')}</h1> <a href="/" class="w-1/2">
</div> <div className="flex flex-row items-center">
</a> <img
<div className="w-1/2"> src="/logo.png"
<div className="flex flex-row justify-end items-center"> className="h-16 w-16 transition-all duration-1000 hover:rotate-[360deg]"
<HeaderButton href="/games" Icon={HiOutlineCube} translationKey="header.games" /> ></img>
<HeaderButton href="/settings" Icon={RxMixerVertical} translationKey="header.settings" /> <h1 className="font-roboto text-4xl font-bold text-navbar-text-color">
<HeaderButton href="/discord" Icon={RiLinksFill} translationKey="header.discord" /> {t("header.title")}
</div> </h1>
</div> </div>
</a>
<div className="w-1/2">
<div className="flex flex-row items-center justify-end">
<HeaderButton
href="/games"
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>
); );
} }

30
src/components/HeaderButton.tsx
View file

@ -2,23 +2,23 @@ import { useTranslation } from "react-i18next";
import { Link } from "preact-router"; import { Link } from "preact-router";
interface HeaderButtonProps { interface HeaderButtonProps {
href: string; href: string;
Icon: any; Icon: any;
translationKey: string; translationKey: string;
} }
export function HeaderButton(props: HeaderButtonProps) { export function HeaderButton(props: HeaderButtonProps) {
const { href, Icon, translationKey } = props; const { href, Icon, translationKey } = props;
const { t } = useTranslation(); const { t } = useTranslation();
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>
</Link> </Link>
); );
} }

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;

52
src/index.tsx
View file

@ -1,31 +1,31 @@
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">
<Router> <Router>
<Route path="/" component={Home} /> <Route path="/" component={Home} />
<Route path="/discord" component={discordPag} /> <Route path="/discord" component={discordPag} />
<Route default component={NotFound} /> <Route default component={NotFound} />
</Router> </Router>
</main> </main>
</div> </div>
</div> </div>
</LocationProvider> </LocationProvider>
); );
} }
render(<App />, document.getElementById('app')); render(<App />, document.getElementById("app"));

38
src/locales/en.json
View file

@ -1,21 +1,21 @@
{ {
"header": { "header": {
"title": "nebula.", "title": "nebula.",
"games": "Games", "games": "Games",
"settings": "Settings", "settings": "Settings",
"discord": "Want more links?" "discord": "Want more links?"
}, },
"404": { "404": {
"text": "This Nebula Service has been disabled.", "text": "This Nebula Service has been disabled.",
"return": "Back to home" "return": "Back to home"
}, },
"home": { "home": {
"placeholder": "Search the web freely" "placeholder": "Search the web freely"
}, },
"discord": { "discord": {
"title": "Nebula's Discord Server", "title": "Nebula's Discord Server",
"sub": "Would you like to open this via proxy?", "sub": "Would you like to open this via proxy?",
"button1": "Open Normally", "button1": "Open Normally",
"button2": "Use Proxy" "button2": "Use Proxy"
} }
} }

38
src/locales/ja.json
View file

@ -1,21 +1,21 @@
{ {
"header": { "header": {
"title": "ネブラ。", "title": "ネブラ。",
"games": "ゲーム", "games": "ゲーム",
"settings": "セッティング", "settings": "セッティング",
"discord": "もっとリンクが欲しいですか？" "discord": "もっとリンクが欲しいですか？"
}, },
"404": { "404": {
"text": "このネビュラサービスは無効になっています", "text": "このネビュラサービスは無効になっています",
"return": "帰宅" "return": "帰宅"
}, },
"home": { "home": {
"placeholder": "由にウェブを検索" "placeholder": "由にウェブを検索"
}, },
"discord": { "discord": {
"title": "ネブラDiscordサーバー", "title": "ネブラDiscordサーバー",
"sub": "プロキシ経由で開きますか？", "sub": "プロキシ経由で開きますか？",
"button1": "通常通り開く", "button1": "通常通り開く",
"button2": "プロキシを使用する" "button2": "プロキシを使用する"
} }
} }

37
src/pages/Home.tsx
View file

@ -1,24 +1,23 @@
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);
}} }}
onBlur={(e) => { onBlur={(e) => {
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> );
);
} }

36
src/pages/_404.tsx
View file

@ -1,20 +1,22 @@
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">
</Link> {t("404.return")}
</div> </button>
</section> </Link>
); </div>
</section>
);
} }

40
src/pages/discord.tsx
View file

@ -1,21 +1,25 @@
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">
</a> {t("discord.button1")}
<a href="/" class="p-6"> </button>
<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> </a>
</a> <a href="/" class="p-6">
</div> <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">
</section> {t("discord.button2")}
); </button>
</a>
</div>
</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;

34
src/themes/main.css
View file

@ -1,26 +1,26 @@
@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap");
:root { :root {
--background-primary: #191724; --background-primary: #191724;
--navbar-color: #26233a; --navbar-color: #26233a;
--navbar-height: 60px; --navbar-height: 60px;
--navbar-text-color: #7967dd; --navbar-text-color: #7967dd;
--navbar-link-color: #e0def4; --navbar-link-color: #e0def4;
--navbar-link-hover-color: gray; --navbar-link-hover-color: gray;
--navbar-font: "Roboto"; --navbar-font: "Roboto";
--input-text-color: #e0def4; --input-text-color: #e0def4;
--input-placeholder-color: white; --input-placeholder-color: white;
--input-background-color: #1f1d2e; --input-background-color: #1f1d2e;
--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: []
} };

34
tsconfig.json
View file

@ -1,20 +1,20 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "ES2020", "target": "ES2020",
"module": "ESNext", "module": "ESNext",
"moduleResolution": "bundler", "moduleResolution": "bundler",
"noEmit": true, "noEmit": true,
"allowJs": true, "allowJs": true,
"checkJs": true, "checkJs": true,
/* Preact Config */ /* Preact Config */
"jsx": "react-jsx", "jsx": "react-jsx",
"jsxImportSource": "preact", "jsxImportSource": "preact",
"skipLibCheck": true, "skipLibCheck": true,
"paths": { "paths": {
"react": ["./node_modules/preact/compat/"], "react": ["./node_modules/preact/compat/"],
"react-dom": ["./node_modules/preact/compat/"] "react-dom": ["./node_modules/preact/compat/"]
} }
}, },
"include": ["node_modules/vite/client.d.ts", "**/*"] "include": ["node_modules/vite/client.d.ts", "**/*"]
} }

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()]
}); });