From 73ecad8b067a04ed53c54961cdee6de9cc488e4c Mon Sep 17 00:00:00 2001 From: Shusui MOYATANI Date: Mon, 22 Jan 2024 02:07:36 +0900 Subject: [PATCH] feat: remove /hello page --- src/App.tsx | 21 +++- src/components/SignerExtensions.tsx | 180 ++++++++++++++++++++++++++++ src/hooks/useColorTheme.ts | 2 +- src/pages/Hello.tsx | 180 +--------------------------- src/pages/Home.tsx | 14 +-- 5 files changed, 201 insertions(+), 196 deletions(-) create mode 100644 src/components/SignerExtensions.tsx diff --git a/src/App.tsx b/src/App.tsx index eb4b58b..63e7dd4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,6 @@ -import { createEffect, onCleanup, lazy, type Component } from 'solid-js'; +import { createEffect, onCleanup, Show, lazy, type Component } from 'solid-js'; -import { HashRouter, Route } from '@solidjs/router'; +import { HashRouter, Route, Navigate } from '@solidjs/router'; import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister'; import { persistQueryClient } from '@tanstack/query-persist-client-core'; import { QueryClient, QueryClientProvider } from '@tanstack/solid-query'; @@ -8,12 +8,13 @@ import { get as getItem, set as setItem, del as removeItem } from 'idb-keyval'; import DomainTransferInfo from '@/components/DomainTransferInfo'; import useColorTheme from '@/hooks/useColorTheme'; +import usePersistStatus from '@/hooks/usePersistStatus'; import i18nextInstance from '@/i18n/i18n'; import { I18NextProvider } from '@/i18n/useTranslation'; +const Hello = lazy(() => import('@/pages/Hello')); const Home = lazy(() => import('@/pages/Home')); const Permalink = lazy(() => import('@/pages/Permalink')); -const Hello = lazy(() => import('@/pages/Hello')); const NotFound = lazy(() => import('@/pages/NotFound')); const queryClient = new QueryClient({}); @@ -34,6 +35,16 @@ const indexedDBPersister = createAsyncStoragePersister({ }, }); +const EntryPoint: Component = () => { + const { persistStatus } = usePersistStatus(); + + return ( + }> + + + ); +}; + const App: Component = () => { createEffect(() => { const [unsubscribe] = persistQueryClient({ @@ -51,8 +62,8 @@ const App: Component = () => { - } /> - } /> + } /> + } /> } /> } /> diff --git a/src/components/SignerExtensions.tsx b/src/components/SignerExtensions.tsx new file mode 100644 index 0000000..ce7f958 --- /dev/null +++ b/src/components/SignerExtensions.tsx @@ -0,0 +1,180 @@ +import { createSignal, For } from 'solid-js'; + +import ArrowTopRightOnSquare from 'heroicons/24/outline/arrow-top-right-on-square.svg'; +import { UAParser } from 'ua-parser-js'; + +import SafeLink from '@/components/utils/SafeLink'; + +const Browsers = ['pc-chrome', 'pc-firefox', 'ios', 'android'] as const; + +type Browser = (typeof Browsers)[number]; + +type ExtensionDefinition = { + name: string; + url: string; + browsers: Browser[]; + guides: { + title: string; + url: string; + lang: 'ja' | 'en'; + }[]; +}; + +const BrowserToString: Record = { + 'pc-chrome': 'Chrome', + 'pc-firefox': 'Firefox', + ios: 'iOS', + android: 'Android', +}; + +const browserAsString = (browser: Browser) => BrowserToString[browser]; + +const Extensions: ExtensionDefinition[] = [ + { + name: 'nos2x', + url: 'https://chrome.google.com/webstore/detail/nos2x/kpgefcfmnafjgpblomihpgmejjdanjjp', + browsers: ['pc-chrome', 'android'], + guides: [ + { + title: 'nos2xのセットアップと使い方', + url: 'https://scrapbox.io/nostr/nos2x%E3%81%AE%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97%E3%81%A8%E4%BD%BF%E3%81%84%E6%96%B9', + lang: 'ja', + }, + ], + }, + { + name: 'nos2x-fox', + browsers: ['pc-firefox', 'android'], + url: 'https://addons.mozilla.org/firefox/addon/nos2x-fox/', + guides: [ + { + title: 'nos2x-foxのセットアップと使い方', + url: 'https://scrapbox.io/nostr/nos2x-fox%E3%81%AE%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97%E3%81%A8%E4%BD%BF%E3%81%84%E6%96%B9', + lang: 'ja', + }, + ], + }, + { + name: 'nostore', + browsers: ['ios'], + url: 'https://apps.apple.com/jp/app/nostore/id1666553677', + guides: [ + { + title: 'nostore(iOS Safari用NIP-07拡張機能)のセットアップ', + url: 'https://scrapbox.io/nostr/nostore(iOS_Safari%E7%94%A8NIP-07%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD)%E3%81%AE%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97', + lang: 'ja', + }, + ], + }, +]; + +const getBrowsers = () => { + const parsed = UAParser(window.navigator.userAgent); + const result = new Set(); + if (parsed.os.name === 'Android') result.add('android'); + if (parsed.os.name === 'iOS') result.add('ios'); + if ( + (parsed.device.type === undefined || parsed.device.type === 'console') && + (parsed.browser.name === 'Chromium' || + parsed.browser.name === 'Chrome' || + parsed.browser.name === 'Vivaldi' || + parsed.browser.name === 'Brave') + ) + result.add('pc-chrome'); + if (parsed.browser.name === 'Firefox') result.add('pc-firefox'); + return result; +}; + +const SignerExtensions = () => { + const [selectedBrowsers, setSelectedBrowsers] = createSignal(getBrowsers()); + const toggleBrowser = (browser: Browser) => + setSelectedBrowsers((current) => { + const newSet = new Set(current); + if (!newSet.has(browser)) newSet.add(browser); + else newSet.delete(browser); + return newSet; + }); + + const extensions = (): ExtensionDefinition[] => { + const browsers = selectedBrowsers(); + if (browsers.size === 0) return Extensions; + return Extensions.filter((extension) => + extension.browsers.some((browser) => browsers.has(browser)), + ); + }; + + return ( +
+
+
    + + {(browser) => ( +
  • + +
    • + )} +     +
+
+
+ + {(extension) => ( +
+
+ +

{extension.name}

+ +
+
    + + {(guide) => ( +
  • + {guide.title} +
    • + )} +     +
+
+
    + + {(browser) => ( +
  • + {browserAsString(browser)} +
    • + )} +     +
+
+ +
+ )} + +
+
+ ); +}; + +export default SignerExtensions; diff --git a/src/hooks/useColorTheme.ts b/src/hooks/useColorTheme.ts index 7d6d113..400a4b9 100644 --- a/src/hooks/useColorTheme.ts +++ b/src/hooks/useColorTheme.ts @@ -2,7 +2,7 @@ import { createEffect, onCleanup } from 'solid-js'; import useConfig from '@/core/useConfig'; -export const useColorTheme = (el: HTMLElement) => { +const useColorTheme = (el: HTMLElement) => { const { getColorTheme } = useConfig(); createEffect(() => { diff --git a/src/pages/Hello.tsx b/src/pages/Hello.tsx index 1fb9413..9134229 100644 --- a/src/pages/Hello.tsx +++ b/src/pages/Hello.tsx @@ -1,79 +1,14 @@ -import { createSignal, onMount, For, Switch, Match, type Component } from 'solid-js'; +import { createSignal, onMount, Switch, Match, type Component } from 'solid-js'; import { useNavigate } from '@solidjs/router'; -import ArrowTopRightOnSquare from 'heroicons/24/outline/arrow-top-right-on-square.svg'; -import { UAParser } from 'ua-parser-js'; -import SafeLink from '@/components/utils/SafeLink'; +import SignerExtensions from '@/components/SignerExtensions'; import usePersistStatus from '@/hooks/usePersistStatus'; import { useTranslation } from '@/i18n/useTranslation'; import resolveAsset from '@/utils/resolveAsset'; type SignerStatus = 'checking' | 'available' | 'unavailable'; -const Browsers = ['pc-chrome', 'pc-firefox', 'ios', 'android'] as const; - -type Browser = (typeof Browsers)[number]; - -type ExtensionDefinition = { - name: string; - url: string; - browsers: Browser[]; - guides: { - title: string; - url: string; - lang: 'ja' | 'en'; - }[]; -}; - -const BrowserToString: Record = { - 'pc-chrome': 'Chrome', - 'pc-firefox': 'Firefox', - ios: 'iOS', - android: 'Android', -}; - -const browserAsString = (browser: Browser) => BrowserToString[browser]; - -const Extensions: ExtensionDefinition[] = [ - { - name: 'nos2x', - url: 'https://chrome.google.com/webstore/detail/nos2x/kpgefcfmnafjgpblomihpgmejjdanjjp', - browsers: ['pc-chrome', 'android'], - guides: [ - { - title: 'nos2xのセットアップと使い方', - url: 'https://scrapbox.io/nostr/nos2x%E3%81%AE%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97%E3%81%A8%E4%BD%BF%E3%81%84%E6%96%B9', - lang: 'ja', - }, - ], - }, - { - name: 'nos2x-fox', - browsers: ['pc-firefox', 'android'], - url: 'https://addons.mozilla.org/firefox/addon/nos2x-fox/', - guides: [ - { - title: 'nos2x-foxのセットアップと使い方', - url: 'https://scrapbox.io/nostr/nos2x-fox%E3%81%AE%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97%E3%81%A8%E4%BD%BF%E3%81%84%E6%96%B9', - lang: 'ja', - }, - ], - }, - { - name: 'nostore', - browsers: ['ios'], - url: 'https://apps.apple.com/jp/app/nostore/id1666553677', - guides: [ - { - title: 'nostore(iOS Safari用NIP-07拡張機能)のセットアップ', - url: 'https://scrapbox.io/nostr/nostore(iOS_Safari%E7%94%A8NIP-07%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD)%E3%81%AE%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97', - lang: 'ja', - }, - ], - }, -]; - const useSignerStatus = () => { const [signerStatus, setSignerStatus] = createSignal('checking'); @@ -97,115 +32,6 @@ const useSignerStatus = () => { return signerStatus; }; -const getBrowsers = () => { - const parsed = UAParser(window.navigator.userAgent); - const result = new Set(); - if (parsed.os.name === 'Android') result.add('android'); - if (parsed.os.name === 'iOS') result.add('ios'); - if ( - (parsed.device.type === undefined || parsed.device.type === 'console') && - (parsed.browser.name === 'Chromium' || - parsed.browser.name === 'Chrome' || - parsed.browser.name === 'Vivaldi' || - parsed.browser.name === 'Brave') - ) - result.add('pc-chrome'); - if (parsed.browser.name === 'Firefox') result.add('pc-firefox'); - return result; -}; - -const ExtensionList = () => { - const [selectedBrowsers, setSelectedBrowsers] = createSignal(getBrowsers()); - const toggleBrowser = (browser: Browser) => - setSelectedBrowsers((current) => { - const newSet = new Set(current); - if (!newSet.has(browser)) newSet.add(browser); - else newSet.delete(browser); - return newSet; - }); - - const extensions = (): ExtensionDefinition[] => { - const browsers = selectedBrowsers(); - if (browsers.size === 0) return Extensions; - return Extensions.filter((extension) => - extension.browsers.some((browser) => browsers.has(browser)), - ); - }; - - return ( -
-
-
    - - {(browser) => ( -
  • - -
    • - )} -     -
-
-
- - {(extension) => ( -
-
- -

{extension.name}

- -
-
    - - {(guide) => ( -
  • - {guide.title} -
    • - )} -     -
-
-
    - - {(browser) => ( -
  • - {browserAsString(browser)} -
    • - )} -     -
-
- -
- )} - -
-
- ); -}; - const Hello: Component = () => { const i18n = useTranslation(); const signerStatus = useSignerStatus(); @@ -238,7 +64,7 @@ const Hello: Component = () => {

{i18n()('hello.signerUnavailable')}

{i18n()('hello.signerUnavailableMessage')}

- +

{i18n()('hello.reloadAfterInstall')}