docs: style algolia search, add powered by vercel

t3-oss · nexxeln · Sep 10, 2022 · Sep 9, 2022 · Sep 9, 2022 · Sep 9, 2022
commit b6e746473b9b5aeddb2c3d3e927dc552133a98d2
@@ -65,6 +65,13 @@ const { path, isBlog } = Astro.props;
  </li>
  </ul>
  </div>
+ <a
+ href="https://vercel.com/?utm_source=t3-oss&utm_campaign=oss"
+ rel="noopener noreferrer"
+ target="_blank"
+ >
+ <img src="/images/powered-by-vercel.svg" class="w-full h-10 mt-6" />
+ </a>
  </div>
  </div>
 </footer>
@@ -1,7 +1,7 @@
 /** @jsxImportSource react */
 import { useState, useCallback, useRef } from "react";
 import { ALGOLIA } from "../../config";
-import "@docsearch/css";
+import "../../styles/algolia/style.css";
 
 import { createPortal } from "react-dom";
 import * as docSearchReact from "@docsearch/react";
@@ -51,7 +51,7 @@ export default function Search() {
  type="button"
  ref={searchButtonRef}
  onClick={onOpen}
- className="w-full flex items-center justify-between px-4 py-2 text-sm font-medium text-white dark:text-gray-700 dark:bg-t3-purple-100 bg-white/10 rounded-lg"
+ className="w-full flex items-center justify-between px-4 py-2 text-sm font-medium text-white dark:text-gray-700 dark:bg-t3-purple-100 bg-white/70 rounded-lg"
  >
  <div className="flex items-center justify-center text-slate-900 dark:stroke-slate-900">
  <svg width="24" height="24" fill="none">

@@ -18,7 +18,7 @@ const sidebar = SIDEBAR[langCode];
  ? `pt-3 pb-28 h-full`
  : `md:overflow-hidden h-full pb-32`}
 >
- <div class="max-w-lg mx-auto p-3 pt-6 md:hidden">
+ <div class="max-w-lg mx-auto p-3 md:hidden">
  <Search client:idle />
  </div>
  <ul

@@ -40,13 +40,13 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
  </head>
 
  <body class="w-full">
- <Navbar />
+ <Navbar mode={"default"} />
  <main
  class="bg-t3-purple-50 dark:bg-slate-900 w-full justify-items-start place-content-start items-start grid grid-cols-1 sm:grid-cols-6 md:grid-cols-12 h-full relative overflow-y-auto"
  >
  <aside
  id="grid-left"
- class="hidden sticky h-[100vh] bottom-0 top-10 z-10 bg-t3-purple-50 bg-blend-lighten dark:bg-slate-900 pt-16 md:flex md:col-span-3 md:col-start-1 w-full"
+ class="hidden sticky h-[100vh] bottom-0 top-8 z-10 bg-t3-purple-50 bg-blend-lighten dark:bg-slate-900 md:flex md:col-span-3 md:col-start-1 w-full"
  title="Site Navigation"
  >
  <LeftSidebar currentPage={currentPage} />

@@ -10,12 +10,38 @@ Whether you're a new or seasoned developer, we think that TypeScript is a must h
 
 It provides live feedback as you write your code by defining expected data types, and either provides helpful autocomplete in your code editor, or yells at you with red squiggly lines if you're trying to access a property that doesn't exist, or you're trying to pass a value of the wrong type.
 
-<blockquote>
-"Build safety nets, not guard rails."
-</blockquote>
-
 # Type Inference
 
+<blockquote className="w-full max-w-sm relative p-4 text-xl italic border-l-4 bg-neutral-100 text-t3-purple-50 border-neutral-500 quote">
+<div className="relative w-fit flex items-center justify-center">
+ <span className="mr-2 hidden sm:block absolute -top-1 left-0 leading-none" aria-hidden="true">
+ &ldquo;
+ </span>
+ <span className="mr-2 hidden sm:block absolute right-0 top-5 leading-none" aria-hidden="true">
+ &ldquo;
+ </span>
+ <p className="mb-4">Build safety nets, not guard rails</p>
+ </div>
+ <cite className="flex items-center">
+ <img
+ alt="Avatar of @t3dotgg"
+ className="w-12 mr-4 rounded-full bg-neutral-500"
+ src="https://pbs.twimg.com/profile_images/1475643465069301763/FUR05HHs_400x400.jpg"
+ />
+ <div className="flex flex-col items-start">
+ <span className="mb-1 text-sm italic font-bold">Theo</span>
+ <a
+ href="https://twitter.com/t3dotgg"
+ target="_blank"
+ rel="noopener noreferrer"
+ className="text-sm"
+ >
+ @t3dotgg
+ </a>
+ </div>
+ </cite>
+ </blockquote>
+
 Despite most guides go into depth on _writing_ TypeScript, for the most part, developers benefit the most from the type inference it provides. There is a ton of work that library maintainers do when providing types for their library, but means we as developers can benefit from the type inference - and almost provide a documentation platform within your code editor.
 
 <a href="https://www.youtube.com/watch?v=RmGHnYUqQ4k" className="mx-auto" target="_blank">

@@ -0,0 +1,64 @@
+/*! @docsearch/css Button 3.2.1 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */
+.DocSearch-Button {
+ align-items: center;
+ background: var(--docsearch-searchbox-background);
+ border: 0;
+ border-radius: 40px;
+ color: var(--docsearch-muted-color);
+ cursor: pointer;
+ display: flex;
+ font-weight: 500;
+ height: 36px;
+ justify-content: space-between;
+ margin: 0 0 0 16px;
+ padding: 0 8px;
+ user-select: none;
+}
+.DocSearch-Button:active,
+.DocSearch-Button:focus,
+.DocSearch-Button:hover {
+ background: var(--docsearch-searchbox-focus-background);
+ box-shadow: var(--docsearch-searchbox-shadow);
+ color: var(--docsearch-text-color);
+ outline: none;
+}
+.DocSearch-Button-Container {
+ align-items: center;
+ display: flex;
+}
+.DocSearch-Search-Icon {
+ stroke-width: 1.6;
+}
+.DocSearch-Button .DocSearch-Search-Icon {
+ color: var(--docsearch-text-color);
+}
+.DocSearch-Button-Placeholder {
+ font-size: 1rem;
+ padding: 0 12px 0 6px;
+}
+.DocSearch-Button-Keys {
+ display: flex;
+ min-width: calc(40px + 0.8em);
+}
+.DocSearch-Button-Key {
+ align-items: center;
+ background: var(--docsearch-key-gradient);
+ border-radius: 3px;
+ box-shadow: var(--docsearch-key-shadow);
+ color: var(--docsearch-muted-color);
+ display: flex;
+ height: 18px;
+ justify-content: center;
+ margin-right: 0.4em;
+ position: relative;
+ padding: 0 0 2px;
+ border: 0;
+ top: -1px;
+ width: 20px;
+}
+@media (max-width: 768px) {
+ .DocSearch-Button-Keys,
+ .DocSearch-Button-Placeholder {
+ display: none;
+ }
+}