From 79fd506d30eef3d113f4a8e3ab9ebd9004f1e8cc Mon Sep 17 00:00:00 2001
From: João Augusto Costa Branco Marado Torres <torres.dev@disroot.org>
Date: Sat, 28 Jun 2025 18:14:22 -0300
Subject: feat: index page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: João Augusto Costa Branco Marado Torres <torres.dev@disroot.org>
---
 src/components/templates/Search.astro | 67 +++++++++++++++++++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 src/components/templates/Search.astro

(limited to 'src/components/templates/Search.astro')

diff --git a/src/components/templates/Search.astro b/src/components/templates/Search.astro
new file mode 100644
index 0000000..5245643
--- /dev/null
+++ b/src/components/templates/Search.astro
@@ -0,0 +1,67 @@
+---
+const { site } = Astro;
+---
+
+<search>
+  <link rel="dns-prefetch" href="https://www.google.com/search">
+  <form
+    action="https://www.google.com/search"
+    target="_blank"
+    rel="external noreferrer search"
+    role="search"
+    autocomplete="on"
+    name="search"
+  >
+    <details>
+      <summary>Pesquisar no website</summary>
+      <div class="details">
+        <p>
+          <label>Barra de pesquisa <input
+              name="q"
+              type="search"
+              placeholder={`site:${site} consulta de pesquisa`}
+              value={`site:${site} `}
+              required
+              title={`"site:${site} " é usado para que os resultados da pesquisa fiquem restritos a este website`}
+              pattern={`site:${site} .+`}
+              size={`site:${site} .+`.length}
+            /></label>
+        </p>
+        <p class="mute">
+          <small>Esta pesquisa é efectuada pelo Google e <strong>utiliza
+              software proprietário.</strong></small>
+        </p>
+        <p><button type="submit">🔍 Pesquisar</button></p>
+      </div>
+    </details>
+  </form>
+</search>
+
+<style>
+  search {
+    padding-block-end: calc(var(--size-4) * 1em);
+  }
+
+  summary {
+    font-size: calc(var(--size-3) * 1rem);
+    font-weight: bolder;
+  }
+
+  .details {
+    border-radius: calc(var(--size-1) * 1em);
+    border: 1px solid var(--color-light);
+    margin-block-start: calc(var(--size-1) * 1em);
+    font-size: calc(var(--size-3) * 1rem);
+    padding-inline: calc(var(--size-4) * 1em);
+    padding-block: calc(var(--size-2) * 1em);
+
+    & > p {
+      margin-block: calc(var(--size-2) * 1em);
+      line-height: calc(var(--size-8) * 1rem);
+    }
+
+    & input[type="search"] {
+      width: 100%;
+    }
+  }
+</style>
-- 
cgit v1.2.3