UI ✨

Author: zsol

www/components/Header.tsx

@@ -49,15 +49,21 @@ type HeaderProps = {
 };
 
 const Header = ({ project, showSearch = true }: HeaderProps) => {
+  const placeholder = project
+    ? `👉Search for a name in ${project.name}👈`
+    : "👉Search👈";
   return (
     <HeaderContainer>
       <HeaderContent>
         <HeaderItem width={showSearch ? "60%" : "100%"}>
-          <HeaderText>Python. Wabbajack Theatrical Fantasy</HeaderText>
+          <HeaderText>py.wtf: Docs for Python projects on PyPI</HeaderText>
         </HeaderItem>
         {showSearch && project && (
           <HeaderItem width="40%">
-            <Search descriptors={generateProjectIndex(project)} />
+            <Search
+              descriptors={generateProjectIndex(project)}
+              placeholder={placeholder}
+            />
           </HeaderItem>
         )}
       </HeaderContent>

www/components/core/Search.tsx

@@ -10,6 +10,7 @@ import { Link } from "./navigation/Link";
 
 type SearchParams = {
   descriptors: Index;
+  placeholder: string;
 };
 
 const SearchContainer = styled.div`
@@ -49,6 +50,12 @@ const ItemLink = styled(Link)`
   width: 100%;
 `;
 
+const SearchInput = styled.input`
+  ::placeholder {
+    text-align: center;
+  }
+`;
+
 interface MatchProps {
   result: Result;
 }
@@ -84,7 +91,7 @@ function Match({ result }: MatchProps): ReactElement {
   );
 }
 
-export const Search = ({ descriptors }: SearchParams) => {
+export const Search = ({ descriptors, placeholder }: SearchParams) => {
   const [searchTerm, setSearchTerm] = useState("");
   const [results, setResults] = useState<Results | null>(null);
   useHotkeys("/", (event) => {
@@ -116,12 +123,13 @@ export const Search = ({ descriptors }: SearchParams) => {
 
   return (
     <SearchContainer>
-      <input
+      <SearchInput
         id="Search_Input"
         onChange={(event) => {
           setSearchTerm(event.target.value);
         }}
         value={searchTerm}
+        placeholder={`${placeholder} (press / to focus)`}
         onKeyDown={(event) => keyPressHandler(event, -1)}
       />
       {searchTerm && results && (

www/pages/index.tsx

@@ -133,7 +133,7 @@ function useHomeData() {
 
 function humanizeTime(timestamp: number) {
   const dt = new Intl.DateTimeFormat(undefined, {
-    timeStyle: "long",
+    timeStyle: "short",
     dateStyle: "long",
   });
   return dt.format(timestamp * 1000);
@@ -162,7 +162,10 @@ export default function Home({
     <PageLayout title="py.wtf" header={<Header showSearch={false} />}>
       <ProjectContainer>
         <SearchContainer>
-          <Search descriptors={makeIndex(descriptors)} />
+          <Search
+            descriptors={makeIndex(descriptors)}
+            placeholder="👉Search for a Python package👈"
+          />
         </SearchContainer>
         <ProjectTables>
           <ProjectTable
@@ -177,7 +180,8 @@ export default function Home({
           />
         </ProjectTables>
         <TimestampFooter>
-          Generated on {humanizeTime(generatedAt)}
+          Generated on {humanizeTime(generatedAt)} for {descriptors.length}{" "}
+          projects
         </TimestampFooter>
       </ProjectContainer>
     </PageLayout>