Add pages and styles

README.md

@@ -2,6 +2,9 @@
 
 ![Banner](https://md.sudovanilla.org/images/Zarro%20-%20Banner.png)
 
+> [!WARNING]  
+> Zarro is currently in alpha stage, there are a lot of missing features and certain function may not work as expected. Expect errors and bugs.
+
 ## About
 Zarro is a search engine built by the developer, SudoVanilla. Named after "[Francisco Pi**zarro**](https://en.wikipedia.org/wiki/Francisco_Pizarro)", a Spanish conquistador known for being an explorer and a conqueror.
 

TODO.md

@@ -1,72 +1,73 @@
- - Components
+ - [] Components
-    - Menus
+    - [x] Menus
-    - Searchbox
+    - [x] Searchbox
-    - Results
+    - [x] Results
-    - Video
+    - [] Video
-    - Music
+    - [] Music
-    - Rich Result
+    - [] Rich Result
-    - Header
+    - [x] Header
-    - Footer
+    - [] Footer
- - Scrapers
+ - [] Scrapers
-    - Web
+    - [] Web
-        - Google
+        - [] Google
-        - DuckDuckGo
+        - [x] DuckDuckGo
-        - Yandex
+        - [] Yandex
-        - Brave
+        - [] Brave
-        - Startpage
+        - [] Startpage
-        - Qwant
+        - [] Qwant
-        - Mojeek
+        - [] Mojeek
-    - Images
+    - [] Images
-        - Google
+        - [] Google
-        - DuckDuckGo
+        - [] DuckDuckGo
-        - Yandex
+        - [] Yandex
-        - Brave
+        - [] Brave
-        - Startpage
+        - [] Startpage
-        - Qwant
+        - [] Qwant
-        - Imgur
+        - [] Imgur
-        - Pexels
+        - [] Pexels
-        - Unsplash
+        - [] Unsplash
-        - Openverse
+        - [] Openverse
-    - Videos
+    - [] Videos
-        - Google
+        - [] Google
-        - DuckDuckGo
+        - [] DuckDuckGo
-        - Yandex
+        - [] Yandex
-        - Brave
+        - [] Brave
-        - Startpage
+        - [] Startpage
-        - Qwant
+        - [] Qwant
-        - YouTube
+        - [] YouTube
-        - Invidious
+        - [] Invidious
-    - Music
+    - [] Music
-        - Bandcamp
+        - [] Bandcamp
-        - Soundcloud
+        - [] Soundcloud
-        - Spotify
+        - [] Spotify
-        - YouTube Music
+        - [] YouTube Music
-        - Apple Music
+        - [] Apple Music
-        - Beatbump
+        - [] Beatbump
-    - News
+    - [] News
-        - Google
+        - [] Google
-        - DuckDuckGo
+        - [] DuckDuckGo
-        - Yandex
+        - [] Yandex
-        - Brave
+        - [] Brave
-        - Startpage
+        - [] Startpage
-        - Qwant
+        - [] Qwant
-        - Mojeek
+        - [] Mojeek
- - Settings
+ - [] Settings
-    - General
+    - [] General
-        - Safe Search (Off, Moderate, Strict)
+        - [] Safe Search (Off, Moderate, Strict)
-    - Scrapers
+    - [] Scrapers
-        - Web
+        - [] Web
-        - Images
+        - [] Images
-        - Videos
+        - [] Videos
-        - News
+        - [] News
-        - Music
+        - [] Music
-    - Appearance
+    - [] Appearance
-        - Theme (Light, Dark)
+        - [] Theme (Light, Dark)
-        - Center Alignement
+        - [] Center Alignement
-        - Dynamic Header
+        - [] Dynamic Header
-        - Favicons
+        - [] Favicons
-        - Page Width
+        - [] Page Width
-        - URL Placement
+        - [] URL Placement
-    - Privacy
+    - [] Privacy
-        - Frontend Alternatives (For YouTube, etc)
+        - [] Frontend Alternatives (For YouTube, etc)
-        - Proxy Images
+        - [] Proxy Images
+        - [] Proxy Server for Images

package.json

@@ -22,7 +22,7 @@
   "scripts": {
     "start": "astro dev --config ./source/astro.mjs --host",
     "translate": "astro-i18next --config ./source/astro-i18next.config.mjs generate",
-    "build": "astro build --config ./source/astro.js"
+    "build": "astro build --config ./source/astro.mjs"
   },
   "dependencies": {
     "@astrojs/mdx": "^3.1.8",

source/astro.mjs

@@ -19,7 +19,7 @@ export default defineConfig({
   },
   // Server Options
   server: {
-    port: 1930,
+    port: 1550,
     host: true
   },
   // Use Server-Side Rendering

source/public/favicon.svg

@@ -1,9 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+<svg width="1177" height="1850" viewBox="0 0 1177 1850" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M378.783 64.7156C292.495 -21.5719 152.596 -21.5719 66.3082 64.7156C-19.9793 151.003 -19.9794 290.903 66.3081 377.19L953.061 1263.94L1109.3 1107.71C1195.59 1021.42 1195.59 881.518 1109.3 795.231L378.783 64.7156ZM1111.93 1472.17L220.953 581.197L64.7156 737.434C-21.5719 823.722 -21.5718 963.622 64.7157 1049.91L799.453 1784.65C885.741 1870.93 1025.64 1870.93 1111.93 1784.65C1198.22 1698.36 1198.22 1558.46 1111.93 1472.17Z" fill="url(#paint0_angular_6_14)"/>
-    <style>
+<defs>
-        path { fill: #000; }
+<radialGradient id="paint0_angular_6_14" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(945.777 1275.07) rotate(-134.909) scale(1703.39 1081.55)">
-        @media (prefers-color-scheme: dark) {
+<stop stop-color="#47FFC5"/>
-            path { fill: #FFF; }
+<stop offset="1" stop-color="#498672"/>
-        }
+</radialGradient>
-    </style>
+</defs>
 </svg>

source/public/zarro.svg

@@ -0,0 +1,9 @@
+<svg width="1177" height="1850" viewBox="0 0 1177 1850" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M378.783 64.7156C292.495 -21.5719 152.596 -21.5719 66.3082 64.7156C-19.9793 151.003 -19.9794 290.903 66.3081 377.19L953.061 1263.94L1109.3 1107.71C1195.59 1021.42 1195.59 881.518 1109.3 795.231L378.783 64.7156ZM1111.93 1472.17L220.953 581.197L64.7156 737.434C-21.5719 823.722 -21.5718 963.622 64.7157 1049.91L799.453 1784.65C885.741 1870.93 1025.64 1870.93 1111.93 1784.65C1198.22 1698.36 1198.22 1558.46 1111.93 1472.17Z" fill="url(#paint0_angular_6_14)"/>
+<defs>
+<radialGradient id="paint0_angular_6_14" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(945.777 1275.07) rotate(-134.909) scale(1703.39 1081.55)">
+<stop stop-color="#47FFC5"/>
+<stop offset="1" stop-color="#498672"/>
+</radialGradient>
+</defs>
+</svg>

source/src/components/global/Head.astro

@@ -0,0 +1,20 @@
+---
+// Components
+import { Tooltips } from 'astro-tooltips'
+---
+
+<head>
+    <title>Zarro Search</title>
+    <!-- Metadata -->
+    <title></title>
+    <meta name="description" />
+    <!-- Options -->
+    <meta charset="UTF-8" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover" />
+    <!-- Favicon -->
+    <link rel="apple-touch-icon" href="https://md.sudovanilla.org/images/Union.png" />
+    <link rel="icon" href="https://md.sudovanilla.org/images/Union.png" />
+    <!-- Tooltip -->
+    <Tooltips interactive={false} delay={[15, 1000]} />
+</head>

source/src/components/global/Header.astro

@@ -0,0 +1,79 @@
+---
+// Properties
+const {Query} = Astro.props
+
+// Icons
+import { HalfMoon, Menu } from "@iconoir/vue";
+---
+
+<header>
+    <div class="header-start">
+        <img width="18px" src="https://md.sudovanilla.org/images/Union.png" />
+        <div class="search-box">
+            <input value={Query} placeholder="Search" />
+        </div>
+    </div>
+    <div class="header-end">
+        <button>English</button>
+        <button title="Toggle Theme" class="button-icon"><HalfMoon /></button>
+        <button title="Options" class="button-icon" data-tooltip-placement="right"><Menu /></button>
+    </div>
+</header>
+
+<style lang="scss">
+header {
+    padding: 16px 0px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .header-start,
+    .header-end {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 6px;
+    }
+    .header-end {
+        button {
+            min-height: 32px;
+            border-radius: 3rem;
+            border: 1px white solid;
+            padding: 0px 12px;
+            background: white;
+            border: 1px rgb(192, 192, 192) solid;
+            cursor: pointer;
+        }
+        .button-icon {
+            aspect-ratio: 1;
+            padding: 0px 6px;
+            svg {
+                width: 16px;
+                transform: translate(0px, 2px);
+            }
+        }
+    }
+    .search-box {
+        background: white;
+        border: 1px rgb(192, 192, 192) solid;
+        border-radius: 3rem;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 16px 8px;
+        position: relative;
+        max-width: 500px;
+        width: 300px;
+        input {
+            position: absolute;
+            top: 0px;
+            left: 0px;
+            width: 100%;
+            height: 100%;
+            border-radius: 3rem;
+            border: none;
+            background: transparent;
+            padding: 0px 12px;
+        }
+    }
+}
+</style>

source/src/components/global/SearchMenu.astro

@@ -0,0 +1,51 @@
+---
+// Properties
+const {Type} = Astro.props
+
+// Highlight Type
+---
+
+<div class="search-menu">
+    <a id="search-type-item-web" href="#">Web</a>
+    <a class="disabled-items" id="search-type-item-images" href="#">Images</a>
+    <a class="disabled-items" id="search-type-item-videos" href="#">Videos</a>
+    <a class="disabled-items" id="search-type-item-news" href="#">News</a>
+    <a class="disabled-items" id="search-type-item-map" href="#">Map</a>
+</div>
+
+<style lang="scss">
+.search-menu {
+    a {
+        color: black;
+        text-decoration: none;
+        background: rgba(255, 255, 255, 0.25);
+        border-width: 2px;
+        border-style: solid;
+        border-color: transparent;
+        border-radius: 6px;
+        padding: 6px 12px;
+        transition: 0.3s background, 0.2s border-color;
+        &:hover {
+            background: rgba(255, 255, 255, 0.75);
+            border-color: #ddd;
+            transition: 0.3s background, 0.2s border-color;
+        }
+    }
+}
+</style>
+
+{ 
+    ()=> {
+      if (Type === "Web") {
+        return <style>#search-type-item-web {background: white; border-color: #ddd;} </style>
+      } else if (Type === "Images") {
+        return <style>#search-type-item-images {background: white; border-color: #ddd;} </style>
+      } else if (Type === "Videos") {
+        return <style>#search-type-item-videos {background: white; border-color: #ddd;} </style>
+      } else if (Type === "News") {
+        return <style>#search-type-item-news {background: white; border-color: #ddd;} </style>
+      } else if (Type === "Map") {
+        return <style>#search-type-item-map {background: white; border-color: #ddd;} </style>
+      }
+    }
+  }

source/src/components/search/Correction.astro

@@ -0,0 +1,24 @@
+---
+// Properties
+const {
+    DidYouMean,
+    ActualQuery
+} = Astro.props
+---
+
+<div class="search-correction">
+    <p>Did you mean "<a href="#">{DidYouMean}</a>"?</p>
+    <p>Search for "<a href="#">{ActualQuery}</a>" instead.</p>
+</div>
+
+<style lang="scss">
+.search-correction {
+    border: 2px #ddd solid;
+    padding: 6px 24px;
+    font-size: 14px;
+    margin-bottom: 6px;
+    p {
+        margin: 0px;
+    }
+}
+</style>

source/src/components/search/RelatedSearches.astro

@@ -0,0 +1,23 @@
+<p>Related searches</p>
+<div class="related-search-tags">
+    <slot/>
+</div>
+
+<style lang="scss" is:global>
+.related-search-tags {
+    line-height: 32px;
+    display: flex;
+    flex-wrap: wrap;
+    a {
+        background: white;
+        border-radius: 3rem;
+        text-decoration: none;
+        font-size: 14px;
+        padding: 6px 12px;
+        color: black;
+        text-wrap: nowrap;
+        margin-bottom: 6px;
+        margin-right: 4px;
+    }
+}
+</style>

source/src/components/search/WebLink.astro

@@ -0,0 +1,43 @@
+---
+// Properties
+const {
+    Title,
+    Description,
+    Link
+} = Astro.props
+---
+
+<div class="search-result-web">
+    <a href={Link}>
+        <h2>{Title}</h2>
+        <p><u>{Link}</u></p>
+    </a>
+    <p>{Description}</p>
+</div>
+
+<style lang="scss">
+.search-result-web {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    background: white;
+    margin-bottom: 12px;
+    border-radius: 6px;
+    padding: 6px 12px;
+    box-shadow: 0px 4px 10px 0px #0000000a;
+    * {
+        margin: 0px;
+    }
+    p {
+        font-size: 14px;
+    }
+    a {
+        h2 {
+            font-size: 20px;
+        }
+        p {
+            font-size: 14px;
+        }
+    }
+}
+</style>

source/src/layouts/Base.astro

@@ -0,0 +1,18 @@
+---
+// Properties
+const {Title, Query} = Astro.props
+
+// Components
+import Head from "@components/global/Head.astro";
+import Header from "@components/global/Header.astro";
+import Footer from "@components/global/Footer.astro";
+
+// Styles
+import '@styles/index.scss'
+import '@styles/mobile.scss'
+---
+
+<Head/>
+<Header Query={Query}/>
+<slot/>
+<Footer/>

source/src/layouts/Search.astro

@@ -0,0 +1,31 @@
+---
+// Layout
+import Base from "./Base.astro"
+
+// Properties
+const {Type, Title, Query} = Astro.props
+
+// Components
+import SearchMenu from "@components/global/SearchMenu.astro"
+---
+
+<Base Title={Title} Query={Query}>
+    <SearchMenu Type={Type}/>
+    <div class="search-results">
+        <div class="search-results-start">
+            <slot name="search"/>
+        </div>
+        <div class="search-results-end">
+            <slot name="rich-panel"/>
+        </div>
+    </div>
+</Base>
+
+<style>
+.search-results {
+    margin-top: 16px;
+    display: grid;
+    grid-template-columns: 70% 30%;
+    gap: 24px;
+}
+</style>

source/src/pages/index.astro

@@ -1,16 +0,0 @@
----
-
----
-
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta name="viewport" content="width=device-width" />
-		<meta name="generator" content={Astro.generator} />
-		<title>Astro</title>
-	</head>
-	<body>
-		<h1>Astro</h1>
-	</body>
-</html>

source/src/pages/web.astro

@@ -0,0 +1,31 @@
+---
+// Layout
+import Search from "@layouts/Search.astro";
+
+// Components
+import WebLink from "@components/search/WebLink.astro";
+import RelatedSearches from "@components/search/RelatedSearches.astro";
+
+// Fetch
+const QueryText = Astro.url.href.split("web?=").pop()
+const Query = await fetch("https://4get.sudovanilla.org" + "/api/v1/web?s=" + QueryText).then((response) => response.json());
+---
+
+<Search Query={QueryText} Type="Web">
+    <slot slot="search">
+        {Query.web.map((query) => (
+            <WebLink
+                Title={query.title}
+                Description={query.description}
+                Link={query.url}
+            />
+        ))}
+    </slot>
+    <slot slot="rich-panel">
+        <RelatedSearches>
+            {Query.related.map((related) => (
+                <a href={'/web?=' + related}>{related}</a>
+            ))}
+        </RelatedSearches>
+    </slot>
+</Search>

source/src/styles/index.scss

@@ -0,0 +1,15 @@
+body {
+    margin: auto;
+    max-width: 1200px;
+    font-family: arial;
+    background: #e5e5e5;
+    padding: 0px 12px;
+    .disabled-items {
+        opacity: 0.3;
+        pointer-events: none;
+    }
+    ::selection {
+        background: gray;
+        color: white;
+    }
+}

source/src/styles/mobile.scss

@@ -0,0 +1,5 @@
+@media screen and (max-width: 860px){
+    .search-results {
+        grid-template-columns: auto !important;
+    }
+}