diff --git a/src/components/ProxyRegistrar.astro b/src/components/ProxyRegistrar.astro index 0f0da1b..2789690 100644 --- a/src/components/ProxyRegistrar.astro +++ b/src/components/ProxyRegistrar.astro @@ -51,7 +51,9 @@ return window.__uv$config.decodeUrl(frame.contentWindow!.location.href.split("/service/")[1]); } - async function loadContent(): Promise { + async function loadProxyContent(): Promise { + const loadingContent = document.getElementById("loading-content") as HTMLElement; + if (loadingContent) loadingContent.style.opacity = "1"; await initTransport(); // The setTimeout is because service workers are a little silly and can take a while longer to register despite .then being called, which causes a bug on the first load. setTimeout(async () => { @@ -80,8 +82,7 @@ return; } } - const loadingContent = document.getElementById("loading-content") as HTMLElement; - if (loadingContent) loadingContent.style.opacity = "1"; + const iframe = document.getElementById("proxy-frame") as HTMLIFrameElement; const topbar = document.getElementById("top-bar") as HTMLDivElement; @@ -173,11 +174,9 @@ event.preventDefault(); event.stopImmediatePropagation(); await TransportMgr.updateTransport(); - setTimeout(() => { - loadContent(); - }, 200); + loadProxyContent(); } - window.loadFormContent = loadContent; + window.loadFormContent = loadProxyContent; function isUrl(val = "") { if (/^http(s?):\/\//.test(val) || (val.includes(".") && val.substr(0, 1) !== " ")) return true; diff --git a/src/components/ThemeLoader.astro b/src/components/ThemeLoader.astro index 071aa3c..4fc9920 100644 --- a/src/components/ThemeLoader.astro +++ b/src/components/ThemeLoader.astro @@ -17,7 +17,7 @@ store.getAll().onsuccess = (event) => { const result = (event.target as IDBRequest).result; if (result) { - result.forEach((extension: IExtensionMetadata) => { + result.forEach((extension: ExtensionMetadata) => { if (extension.type === "theme" && extension.themeName) { // Load theme CSS loadStyleFromAtob(atob(extension.scriptCopy!)); diff --git a/src/components/ts/marketplace.ts b/src/components/ts/marketplace.ts index 439e5a2..f435029 100644 --- a/src/components/ts/marketplace.ts +++ b/src/components/ts/marketplace.ts @@ -77,7 +77,7 @@ Array.from(installButtons).forEach((btn) => { }); }); -async function getMarketplaceObj(slug: string): Promise { +async function getMarketplaceObj(slug: string): Promise { const manifest = extManifest[slug]; if (manifest.type === "page") { return manifest; @@ -87,7 +87,7 @@ async function getMarketplaceObj(slug: string): Promise { return manifest; } -async function installExtension(ext: IExtensionMetadata, slug: string): Promise { +async function installExtension(ext: ExtensionMetadata, slug: string): Promise { return new Promise((resolve, reject) => { const request = IDBManager.GetIDB(); const transaction = request.transaction("InstalledExtensions", "readwrite"); diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 144ff91..e1b729c 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -182,6 +182,7 @@ const { title, optionalPreloads } = Astro.props; text-align: center; font-weight: 400; font-size: 2.5rem; + margin-bottom: 0; } .title-desc { color: var(--text-color); diff --git a/src/pages/[lang]/index.astro b/src/pages/[lang]/index.astro index 3fd88e5..ede5f47 100644 --- a/src/pages/[lang]/index.astro +++ b/src/pages/[lang]/index.astro @@ -18,9 +18,9 @@ export function getStaticPaths() {
+
Loading Content...
-
Loading...
@@ -78,9 +78,7 @@ export function getStaticPaths() { searchSuggestions.innerHTML = ""; data.map((suggestion: Suggestion) => { const suggestionElement = document.createElement("div"); - // For some reason css classes weren't working T^T. - suggestionElement.style.cursor = "pointer"; - suggestionElement.style.marginTop = "5px"; + suggestionElement.classList.add("search-suggestion"); suggestionElement.innerText = suggestion.phrase; suggestionElement.addEventListener("click", async () => { urlInput.value = suggestion.phrase; @@ -160,21 +158,28 @@ export function getStaticPaths() { border-bottom-right-radius: 15px; transition: 250ms ease-in-out; opacity: 0; - height: 240px; overflow: hidden; border: 3px solid var(--text-color); box-shadow: 10px 10px 20px var(--dropdown-background-color); } + .search-suggestion { + cursor: pointer; + margin-top: 5px; + } + + .search-suggestion:last-child { + margin-bottom: 10px; + } + #loading-content { color: var(--text-color); padding: 8px; position: relative; - /* hack */ - top: -325px; opacity: 0; - transition: 250ms ease-in-out; + transition: .25s ease-in-out; text-align: center; + font-size: 20px; } .faq-title { diff --git a/src/pages/[lang]/marketplace.astro b/src/pages/[lang]/marketplace.astro index 44264db..0ad0828 100644 --- a/src/pages/[lang]/marketplace.astro +++ b/src/pages/[lang]/marketplace.astro @@ -16,7 +16,7 @@ export const getStaticPaths = () => {
{ Object.keys(marketplace).map((mp_item) => { - const item = (marketplace as { [key: string]: IExtensionMetadata })[mp_item]; + const item = (marketplace as ExtensionMetadataJSON)[mp_item]; const slug = mp_item; return (
diff --git a/src/types.d.ts b/src/types.d.ts index 23c8b53..4e9fa18 100644 --- a/src/types.d.ts +++ b/src/types.d.ts @@ -32,7 +32,7 @@ type Extension = { - type: The type of extension, see ExtType. - themeName: The name of the theme that goes in the data attribute */ -interface IExtensionMetadata { +interface ExtensionMetadata { title: string; description: string; version: string; @@ -46,7 +46,7 @@ interface IExtensionMetadata { themeName?: string; } -type ExtensionMetadataJSON = Record; +type ExtensionMetadataJSON = Record; type InstallReturn = { code: EXT_RETURN;