diff --git a/package-lock.json b/package-lock.json index ba69199..cabd099 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@iconify-json/ph": "^1.1.13", "astro": "^4.12.2", "astro-icon": "^1.1.0", + "nanostores": "^0.10.3", "tailwindcss": "^3.4.6", "typescript": "^5.5.3" } @@ -5226,6 +5227,20 @@ "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" } }, + "node_modules/nanostores": { + "version": "0.10.3", + "resolved": "https://registry.npmjs.org/nanostores/-/nanostores-0.10.3.tgz", + "integrity": "sha512-Nii8O1XqmawqSCf9o2aWqVxhKRN01+iue9/VEd1TiJCr9VT5XxgPFbF1Edl1XN6pwJcZRsl8Ki+z01yb/T/C2g==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "engines": { + "node": "^18.0.0 || >=20.0.0" + } + }, "node_modules/nlcst-to-string": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/nlcst-to-string/-/nlcst-to-string-4.0.0.tgz", diff --git a/package.json b/package.json index 59e1102..9478ad3 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "@iconify-json/ph": "^1.1.13", "astro": "^4.12.2", "astro-icon": "^1.1.0", + "nanostores": "^0.10.3", "tailwindcss": "^3.4.6", "typescript": "^5.5.3" } diff --git a/src/components/Header.astro b/src/components/Header.astro index 3437265..45fd58d 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -1,5 +1,6 @@ --- import { getLangFromUrl, useTranslations } from "../i18n/utils"; +import { isMobileNavOpen } from "../store.js"; import Logo from "./Logo.astro"; import HeaderButton from "./HeaderButton.astro"; import { Icon } from "astro-icon/components"; @@ -11,9 +12,10 @@ const t = useTranslations(lang); id="navbar" class="flex h-16 flex-row items-center justify-end border-b-2 border-border-color bg-navbar-color px-4" > - -
- +
+ {/* Typical desktop menu */} + - + {/* Mobile hamburger menu */} +
+ +
+
+ diff --git a/src/components/HeaderButton.astro b/src/components/HeaderButton.astro index 3216007..b72ecfc 100644 --- a/src/components/HeaderButton.astro +++ b/src/components/HeaderButton.astro @@ -3,7 +3,7 @@ const { text, icon } = Astro.props; ---
+ + + + + + + + + +
diff --git a/src/i18n/en.json b/src/i18n/en.json deleted file mode 100644 index 6bbbb7c..0000000 --- a/src/i18n/en.json +++ /dev/null @@ -1,65 +0,0 @@ -{ - "ultraviolet": "Ultraviolet", - - "pages.home": "Home | Alu", - "pages.games": "Games | Alu", - "pages.settings": "Settings | Alu", - - "nav.brand": "Alu", - "nav.games": "Games", - "nav.settings": "Settings", - - "menu.welcome": "Welcome to Alu", - "menu.search": "Search the web...", - - "faq.title": "Frequently Asked Questions", - - "faq.whatIsAProxy": "What is a proxy?", - "faq.whatIsAProxy.answer": "A proxy is a method of making your internet traffic anonymous by sending your request to a server (proxy), having that make the request, and then send it back to you! This allows for a much larger level of security, as well as bypassing website restrictions in public spaces and censorship.", - - "faq.noBareClients": "What does \"there are no bare clients\" mean?", - "faq.noBareClients.answer": "There are a couple reasons this particular error happens, but it's most commonly an issue with the proxy failing to load. Please reload the page, and if the problem persists, make a GitHub issue!", - - "faq.contributeToAlu": "How can I contribute to Alu?", - "faq.contributeToAlu.answer.segment1": "Spreading the word of Alu is a great start, but if you really enjoy Alu, and want private links, consider supporting me through Patreon!", - "faq.contributeToAlu.answer.patreonLinkText": "You can support me here!", - "faq.contributeToAlu.answer.segment2": "Thank you for helping to make Alu great!", - - "footer.brand": "Alu", - "footer.madeWithLove": "Made with ❤️ by wearr", - "footer.poweredBy": "Titanium Network", - "footer.services": "Services", - "footer.socials": "Socials", - "footer.aluProject": "Alu Project", - - "games.title": "Games", - "games.search": "Search...", - - "settings.title": "Settings", - "settings.proxy": "Proxy", - "settings.proxy.auto": "Auto", - "settings.proxy.selectedProxy": "Selected Proxy", - "settings.proxy.searchEngine": "Search Engine", - "settings.proxy.openPageWith": "Open With", - "settings.proxy.openPageWith.embed": "Embed", - "settings.proxy.openPageWith.newTab": "New Tab", - "settings.proxy.searxngURL": "Searx URL", - "settings.proxy.transport": "Transport", - "settings.proxy.wispURL": "Wisp URL", - "settings.proxy.bareURL": "Bare URL", - - "settings.customization": "Customization", - "settings.customization.theme": "Theme", - "settings.customization.theme.Alu": "Alu", - "settings.customization.theme.Macchiato": "Macchiato", - "settings.customization.theme.Mocha": "Mocha", - "settings.customization.language": "Language", - - "settings.cloaking": "Cloaking", - "settings.cloaking.subtext": "Change how your tab looks...", - "settings.cloaking.updateCloak": "Update Cloak", - - "settings.credits": "Credits", - "settings.credits.mochaandmacchiatothemes": "Mocha & Macchiato Themes", - "settings.credits.japaneseTranslations": "Japanese Translations" - } \ No newline at end of file diff --git a/src/i18n/en_US.json b/src/i18n/en_US.json new file mode 100644 index 0000000..96247d0 --- /dev/null +++ b/src/i18n/en_US.json @@ -0,0 +1,5 @@ +{ + "header.games": "Games", + "header.settings": "Settings", + "header.morelinks": "Want more links?" +} \ No newline at end of file diff --git a/src/i18n/jp.json b/src/i18n/jp.json index e8785f1..2a35725 100644 --- a/src/i18n/jp.json +++ b/src/i18n/jp.json @@ -1,65 +1,5 @@ -{ - "ultraviolet": "Ultraviolet", - - "pages.home": "ホーム | Alu", - "pages.games": "ゲーム | Alu", - "pages.settings": "設定 | Alu", - - "nav.brand": "Alu", - "nav.games": "ゲーム", - "nav.settings": "設定", - - "menu.welcome": "Aluへようこそ", - "menu.search": "検索", - - "faq.title": "よくある質問", - - "faq.whatIsAProxy": "プロキシとは", - "faq.whatIsAProxy.answer": "プロキシは、インターネットを接続する際に、ネットワークの内部から外部へのアクセスを代理で行うシステムのことです。ウェブサイトにアクセスする際に自分のIPアドレスを隠すことができます。", - - "faq.noBareClients": "エラー「there are no bare clients.」とは", - "faq.noBareClients.answer": "このエラーは、通常はプロキシのロードに失敗したことを意味します。ページをリロードするか、GitHubで問題を作成してください。", - - "faq.contributeToAlu": "貢献をするには", - "faq.contributeToAlu.answer.segment1": "Alu を広めることは素晴らしいことです。プライベートリンクが必要な場合は、Patreon を通じて私をサポートすることを検討してください。", - "faq.contributeToAlu.answer.patreonLinkText": "ここで私に貢献できます", - "faq.contributeToAlu.answer.segment2": "Aluに貢献していただきありがとうございます。", - - "footer.brand": "Alu", - "footer.madeWithLove": "wearrによる❤️で作られました", - "footer.poweredBy": "Titanium Network", - "footer.services": "サービス", - "footer.socials": "ソーシャル", - "footer.aluProject": "Alu Project", - - "games.title": "ゲーム", - "games.search": "検索...", - - "settings.title": "設定", - "settings.proxy": "プロキシ", - "settings.proxy.auto": "自動", - "settings.proxy.selectedProxy": "選択したプロキシ", - "settings.proxy.searchEngine": "検索エンジン", - "settings.proxy.openPageWith": "開く", - "settings.proxy.openPageWith.embed": "埋め込み", - "settings.proxy.openPageWith.newTab": "新しいタブ", - "settings.proxy.searxngURL": "Searx URL", - "settings.proxy.transport": "Transport", - "settings.proxy.wispURL": "Wisp URL", - "settings.proxy.bareURL": "Bare URL", - - "settings.customization": "カスタマイズ", - "settings.customization.theme": "テーマ", - "settings.customization.theme.Alu": "Alu", - "settings.customization.theme.Macchiato": "マキアート", - "settings.customization.theme.Mocha": "モカ", - "settings.customization.language": "言語", - - "settings.cloaking": "クローキング", - "settings.cloaking.subtext": "タブの見た目を変更します...", - "settings.cloaking.updateCloak": "クロークを更新", - - "settings.credits": "クレジット", - "settings.credits.mochaandmacchiatothemes": "モカとマキアートテーマ", - "settings.credits.japaneseTranslations": "日本語翻訳" - } \ No newline at end of file +{ + "header.games": "ゲーム", + "header.settings": "設定", + "header.morelinks": "リンク一覧" +} \ No newline at end of file diff --git a/src/i18n/ui.ts b/src/i18n/ui.ts index 7038920..63d6c67 100644 --- a/src/i18n/ui.ts +++ b/src/i18n/ui.ts @@ -1,9 +1,9 @@ -import en from "./en.json"; +import en_US from "./en_US.json"; import jp from "./jp.json"; -export const defaultLang = "en"; +export const defaultLang = "en_US"; export const ui = { - en, + en_US, jp, }; diff --git a/src/i18n/utils.ts b/src/i18n/utils.ts index cb283d6..40fdf1d 100644 --- a/src/i18n/utils.ts +++ b/src/i18n/utils.ts @@ -1,7 +1,7 @@ import { ui, defaultLang } from "./ui"; export const STATIC_PATHS = [ - { params: { lang: "en" } }, + { params: { lang: "en_US" } }, { params: { lang: "jp" } }, ]; diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 51e43cc..dd5eebb 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -19,7 +19,7 @@ const { title } = Astro.props; {title} - +
diff --git a/src/pages/[lang]/index.astro b/src/pages/[lang]/index.astro new file mode 100644 index 0000000..0472164 --- /dev/null +++ b/src/pages/[lang]/index.astro @@ -0,0 +1,49 @@ +--- +import { STATIC_PATHS } from "../../i18n/utils"; +import Layout from "../../layouts/Layout.astro"; +import Card from "../../components/Card.astro"; +import MobileNavigation from "../../components/MobileNavigation.astro"; + +export function getStaticPaths() { + return STATIC_PATHS; +} +--- + + +

The services

+

Mobile Navvy

+ + + + diff --git a/src/pages/index.astro b/src/pages/index.astro index b2c3451..2f8fe3b 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -3,126 +3,39 @@ import Layout from "../layouts/Layout.astro"; import Card from "../components/Card.astro"; --- - - -
- -

Welcome to Astro

-

- To get started, open the directory src/pages in your project.
- Code Challenge: Tweak the "Welcome to Astro" message above. -

-
    - - - - -
-
- - - + +You need to enable JavaScript to run this app. diff --git a/src/store.js b/src/store.js new file mode 100644 index 0000000..c704662 --- /dev/null +++ b/src/store.js @@ -0,0 +1,3 @@ +import { atom } from "nanostores"; + +export const isMobileNavOpen = atom(false);