ted-too · ted-too · Nov 16, 2022 · Nov 17, 2022 · Nov 17, 2022 · Nov 17, 2022
diff --git a/apps/jameela/astro.config.mjs b/apps/jameela/astro.config.mjs
@@ -1,15 +1,18 @@
+import node from "@astrojs/node";
 import solidJs from "@astrojs/solid-js";
 import tailwind from "@astrojs/tailwind";
-import vercel from "@astrojs/vercel/serverless";
 import { defineConfig } from "astro/config";
 
 // https://astro.build/config
 export default defineConfig({
   output: "server",
-  adapter: vercel(),
+  adapter: node({ mode: "standalone" }),
+  server: { port: 3001 },
   integrations: [
     tailwind({
-      config: { applyBaseStyles: false },
+      config: {
+        applyBaseStyles: false,
+      },
     }),
     solidJs(),
   ],

diff --git a/apps/jameela/package.json b/apps/jameela/package.json
@@ -1,39 +1,32 @@
 {
   "name": "jameela",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "license": "GPL-3.0-only",
   "private": true,
   "scripts": {
     "dev": "astro dev",
-    "start": "astro dev",
+    "start": "node ./dist/server/entry.mjs",
     "build": "astro build",
     "preview": "astro preview",
     "astro": "astro",
     "lint": "eslint --ext .tsx,.ts,.astro src"
   },
   "dependencies": {
+    "@astrojs/node": "^3.0.0",
     "@astrojs/solid-js": "^1.2.1",
     "@astrojs/tailwind": "^2.1.1",
-    "@astrojs/vercel": "^2.3.2",
-    "@fastify/middie": "^8.0.0",
-    "@fastify/static": "^6.5.0",
-    "astro": "^1.6.0",
+    "astro": "^1.6.4",
     "clsx": "^1.2.1",
-    "fastify": "^4.9.2",
     "solid-js": "^1.4.3",
     "tailwindcss": "^3.0.24",
     "tiny-invariant": "^1.3.1",
+    "ui": "workspace:*",
     "universal-cookie": "^4.0.4",
     "youtube-sr": "^4.3.4",
-    "ytdl-core": "^4.11.2",
-    "ui": "workspace:*"
+    "ytdl-core": "^4.11.2"
   },
   "devDependencies": {
-    "eslint-config-custom": "workspace:*",
-    "@types/node": "^18.7.16",
-    "chokidar-cli": "^3.0.0",
-    "concurrently": "^7.3.0",
-    "kill-port": "^2.0.1"
+    "eslint-config-custom": "workspace:*"
   }
 }
diff --git a/apps/jameela/public/android-chrome-192x192.png b/apps/jameela/public/android-chrome-192x192.png
diff --git a/apps/jameela/public/android-chrome-256x256.png b/apps/jameela/public/android-chrome-256x256.png
diff --git a/apps/jameela/public/android-chrome-512x512.png b/apps/jameela/public/android-chrome-512x512.png
diff --git a/apps/jameela/public/apple-touch-icon.png b/apps/jameela/public/apple-touch-icon.png
diff --git a/apps/jameela/public/browserconfig.xml b/apps/jameela/public/browserconfig.xml
@@ -3,7 +3,7 @@
     <msapplication>
         <tile>
             <square150x150logo src="/mstile-150x150.png"/>
-            <TileColor>#ffffff</TileColor>
+            <TileColor>#111111</TileColor>
         </tile>
     </msapplication>
 </browserconfig>
diff --git a/apps/jameela/public/favicon-16x16.png b/apps/jameela/public/favicon-16x16.png
diff --git a/apps/jameela/public/favicon-32x32.png b/apps/jameela/public/favicon-32x32.png
diff --git a/apps/jameela/public/favicon.ico b/apps/jameela/public/favicon.ico
diff --git a/apps/jameela/public/fonts/nunito-v25-latin-200.woff b/apps/jameela/public/fonts/nunito-v25-latin-200.woff
diff --git a/apps/jameela/public/fonts/nunito-v25-latin-200.woff2 b/apps/jameela/public/fonts/nunito-v25-latin-200.woff2
diff --git a/apps/jameela/public/fonts/nunito-v25-latin-300.eot b/apps/jameela/public/fonts/nunito-v25-latin-300.eot
diff --git a/apps/jameela/public/fonts/nunito-v25-latin-300.svg b/apps/jameela/public/fonts/nunito-v25-latin-300.svg
diff --git a/apps/jameela/public/fonts/nunito-v25-latin-300.ttf b/apps/jameela/public/fonts/nunito-v25-latin-300.ttf
diff --git a/apps/jameela/public/fonts/nunito-v25-latin-500.eot b/apps/jameela/public/fonts/nunito-v25-latin-500.eot
diff --git a/apps/jameela/public/fonts/nunito-v25-latin-500.svg b/apps/jameela/public/fonts/nunito-v25-latin-500.svg
diff --git a/apps/jameela/public/fonts/nunito-v25-latin-500.ttf b/apps/jameela/public/fonts/nunito-v25-latin-500.ttf
diff --git a/apps/jameela/public/fonts/nunito-v25-latin-600.woff b/apps/jameela/public/fonts/nunito-v25-latin-600.woff
diff --git a/apps/jameela/public/fonts/nunito-v25-latin-600.woff2 b/apps/jameela/public/fonts/nunito-v25-latin-600.woff2
diff --git a/apps/jameela/public/fonts/nunito-v25-latin-700.woff b/apps/jameela/public/fonts/nunito-v25-latin-700.woff
diff --git a/apps/jameela/public/fonts/nunito-v25-latin-700.woff2 b/apps/jameela/public/fonts/nunito-v25-latin-700.woff2
diff --git a/apps/jameela/public/fonts/nunito-v25-latin-regular.eot b/apps/jameela/public/fonts/nunito-v25-latin-regular.eot
diff --git a/apps/jameela/public/fonts/nunito-v25-latin-regular.svg b/apps/jameela/public/fonts/nunito-v25-latin-regular.svg
diff --git a/apps/jameela/public/fonts/nunito-v25-latin-regular.ttf b/apps/jameela/public/fonts/nunito-v25-latin-regular.ttf
diff --git a/apps/jameela/public/mstile-150x150.png b/apps/jameela/public/mstile-150x150.png
diff --git a/apps/jameela/public/safari-pinned-tab.svg b/apps/jameela/public/safari-pinned-tab.svg
diff --git a/apps/jameela/public/share-image.png b/apps/jameela/public/share-image.png
diff --git a/apps/jameela/public/site.webmanifest b/apps/jameela/public/site.webmanifest
@@ -1,19 +1,19 @@
 {
-    "name": "",
-    "short_name": "",
+    "name": "Jameela",
+    "short_name": "Jameela",
     "icons": [
         {
             "src": "/android-chrome-192x192.png",
             "sizes": "192x192",
             "type": "image/png"
         },
         {
-            "src": "/android-chrome-256x256.png",
-            "sizes": "256x256",
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
             "type": "image/png"
         }
     ],
-    "theme_color": "#ffffff",
-    "background_color": "#ffffff",
+    "theme_color": "#111111",
+    "background_color": "#111111",
     "display": "standalone"
 }
diff --git a/apps/jameela/src/Layout.astro b/apps/jameela/src/Layout.astro
@@ -0,0 +1,69 @@
+---
+import clsx from "clsx";
+import { JameelaLogo } from "ui/logos";
+import ThemeSwitcher from "ui/kit/theme-switcher";
+import Footer from "ui/layout/footer.astro";
+import "ui/base.css";
+import type { Theme } from "ui/utils/getTheme";
+import Link from "ui/kit/link";
+
+export interface Props {
+  theme: Theme;
+  class?: string;
+}
+
+const { theme, class: clazz } = Astro.props;
+---
+
+<!DOCTYPE html>
+<html lang="en" class={theme}>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="generator" content={Astro.generator} />
+    <!--  -->
+    <!-- Primary Meta Tags -->
+    <title>Jameela - A Safe Youtube Video Downloader</title>
+    <meta name="title" content="Jameela - A Safe Youtube Video Downloader" />
+    <meta name="description" content="A safe and simple to use youtube video downloader with no ads" />
+    <meta name="robots" content="index, follow" />
+    <meta name="keywords" content="privacy,safe,jameela,youtube downloader,youtube mp3,youtube to mp4,no ads,ad free" />
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="language" content="English" />
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://jameela.letsbesafe.dev/" />
+    <meta property="og:title" content="Jameela - A Safe Youtube Video Downloader" />
+    <meta property="og:description" content="A safe and simple to use youtube video downloader with no ads" />
+    <meta property="og:image" content="https://jameela.letsbesafe.dev/share-image.png" />
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:url" content="https://jameela.letsbesafe.dev/" />
+    <meta property="twitter:title" content="Jameela - A Safe Youtube Video Downloader" />
+    <meta property="twitter:description" content="A safe and simple to use youtube video downloader with no ads" />
+    <meta property="twitter:image" content="https://jameela.letsbesafe.dev/share-image.png" />
+    <!-- favicon - (realfavicongenerator.net) -->
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="manifest" href="/site.webmanifest" />
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#111111" />
+    <meta name="msapplication-TileColor" content="#111111" />
+    <meta name="theme-color" content="#111111" />
+  </head>
+  <body>
+    <header class="flex flex-col items-center w-full pt-12 pb-4">
+      <Link to="/" class="h-10" aria-label="Jameela Logo">
+        <JameelaLogo class="w-auto h-full pb-1" />
+      </Link>
+      <p class="mt-2 font-light text-center sm:text-base text-secondary">
+        [jah-mee-laa] – ‘beautiful’ <br /> swahili
+      </p>
+      <ThemeSwitcher class="mt-3" theme={theme} client:visible />
+    </header>
+    <main class={clsx("min-h-screen w-full max-w-[1366px] mx-auto px-5 sm:px-0 flex flex-col items-center", clazz)}>
+      <slot />
+    </main>
+    <Footer />
+  </body>
+</html>
diff --git a/apps/jameela/src/components/search-form.tsx b/apps/jameela/src/components/search-form.tsx
@@ -1,43 +1,49 @@
-import type { SearchResult } from "../types";
-import SearchResultCard from "./search-result";
+import { Component, JSX, Show, createSignal, mergeProps } from "solid-js";
 import { Button } from "ui/kit/buttons";
 import { TextInput } from "ui/kit/inputs";
-import { JSXElement, createSignal } from "solid-js";
 
-type Props = { children?: JSXElement; firstSearch?: null } | { firstSearch?: boolean; children?: null };
+interface Props {
+  children?: JSX.Element;
+  firstSearch?: boolean;
+}
 
-export default function SearchForm({ children, firstSearch = false }: Props) {
+const SearchForm: Component<Props> = (_props) => {
+  const props = mergeProps({ firstSearch: false, children: null }, _props);
   const [searchTerm, setSearchTerm] = createSignal("");
   const handleSubmit = (e: any) => {
     e.preventDefault();
     window.location.href = `/search/${searchTerm()}`;
   };
   return (
     <>
-      {firstSearch ? (
-        <p class="text-center sm:text-lg mb-6 mt-[15vh] text-light">
+      <Show
+        when={props.firstSearch}
+        fallback={<span class="text-center sm:text-lg mb-6 mt-[5vh] text-secondary">Search for another video</span>}
+      >
+        <p class="text-center sm:text-lg mb-6 mt-[15vh] text-secondary">
           Download and save your youtube videos in a <br /> format of your choice
         </p>
-      ) : (
-        <span class="text-center sm:text-lg mb-6 mt-[5vh] text-light">Search for another video</span>
-      )}
+      </Show>
       <form onSubmit={handleSubmit} class="relative w-full max-w-sm sm:max-w-none">
-        <fieldset class="flex flex-col items-center justify-center w-full space-y-4 sm:flex-row sm:space-y-0 sm:space-x-4">
+        <div class="flex flex-col items-center justify-center w-full space-y-4 sm:flex-row sm:space-y-0 sm:space-x-4">
           <TextInput
-            value={searchTerm()}
-            onChange={(e: any) => setSearchTerm(e.target.value)}
-            class="w-full sm:w-[50%] lg:w-[40%]"
-            placeholder="Search or paste link"
-            aria-label="search"
             name="search"
+            placeholder="Search or paste link"
+            class="w-full sm:w-[50%] lg:w-[40%] rounded"
+            value={searchTerm()}
+            onInput={(e) => setSearchTerm(e.currentTarget.value)}
             required
           />
-          <Button type="submit" class="text-sm rounded-lg sm:text-base">
+          <Button type="submit" class="text-sm rounded sm:text-base" size="lg">
             Search
           </Button>
-        </fieldset>
+        </div>
       </form>
-      <div class="relative w-full transition-opacity max-w-7xl">{children}</div>
+      <Show when={!props.firstSearch}>
+        <div class="relative w-full transition-opacity max-w-7xl">{props.children}</div>
+      </Show>
     </>
   );
-}
+};
+
+export default SearchForm;