Update sponsors, remove ads (#704)

Related to #461

README.md

@@ -1,14 +1,12 @@
-<img src="https://packagephobia.com/logo.svg" width=40 height=40 align="left" />
+<img src="https://packagephobia.com/logo.svg" width="40" height="40" align="left" />
 
 # Package Phobia
-
-[![sponsor](https://badgen.net/badge/sponsor/styfle/black?icon=github)](https://github.com/sponsors/styfle)
 [![tests](https://github.com/styfle/packagephobia/workflows/Tests/badge.svg)](https://github.com/styfle/packagephobia/actions?workflow=Tests)
 ![uptime](https://badgen.net/uptime-robot/week/m783908968-e68af1e88fe9d03309911b73)
 [![lgtm](https://badgen.net/lgtm/grade/javascript/g/styfle/packagephobia?label=quality)](https://lgtm.com/projects/g/styfle/packagephobia/)
 [![style: prettier](https://badgen.net/badge/style/prettier/ff69b4)](https://github.com/prettier/prettier)
 
-<a href="https://turnoff.us/geek/npm-install/"><img src="https://turnoff.us/image/en/npm-install.png" width=300 height=400 align="right" /></a>
+<a href="https://turnoff.us/geek/npm-install/"><img src="https://turnoff.us/image/en/npm-install.png" width="300" height="400" align="right" /></a>
 
 - ⚖️ Find the cost of adding a new dependency to your project
 - 🕗 Save yourself time and disk space with this web app
@@ -138,9 +136,10 @@ Below are some other users who comically point out this JS bloat.
 
 See [CONTRIBUTING.md](https://github.com/styfle/packagephobia/blob/main/CONTRIBUTING.md) and [CODE_OF_CONDUCT.md](https://github.com/styfle/packagephobia/blob/main/CODE_OF_CONDUCT.md) before you start writing any code
 
-## Sponsoring
+## Sponsors
 
-Get your name in this readme by [sponsoring this project](https://github.com/sponsors/styfle).
+- Web hosting sponsored by [vercel.com](https://vercel.com/?utm_source=packagephobia)
+- Database sponsored by [upstash.com](https://upstash.com/?ref=packagephobia)
 
 ## Author
 

src/components/SearchBar.tsx

@@ -44,7 +44,7 @@ export default (props: { autoFocus: boolean; defaultValue?: string }) => (
             aria-label="Package Name"
             id="p"
             name="p"
-            placeholder="express"
+            placeholder="next"
             autoCorrect="off"
             autoCapitalize="off"
             autoComplete="off"

src/pages/_document.tsx

@@ -82,10 +82,17 @@ body {
     }
 }
 
-#ethicalad { margin-top: 1em; }
+#sponsors { margin-top: 1em; }
+
+#sponsors:before {
+    content: 'Sponsors';
+    color: #777;
+    font-weight: 300;
+    padding-left: 25%;
+}
 
 @media screen and (min-width: 75em) {
-    #ethicalad {
+    #sponsors {
         position: absolute;
         top: 5vh;
         left: 1vw;

src/pages/compare.tsx

@@ -6,7 +6,7 @@ import Footer from '../components/Footer';
 import { getBadgeUrl } from '../util/badge';
 import { Stat } from '../components/Stats';
 import SearchBar from '../components/SearchBar';
-import EthicalAd from '../components/EthicalAd';
+import Sponsors from '../components/Sponsors';
 
 export default ({ inputStr, results }: CompareProps) => {
     const resultsToPrint = results.map(({ pkgSize, isLatest }) => {
@@ -76,7 +76,7 @@ export default ({ inputStr, results }: CompareProps) => {
                         </tbody>
                     </table>
                 </div>
-                <EthicalAd />
+                <Sponsors />
             </PageContainer>
             <Footer />
         </>

src/pages/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import EthicalAd from '../components/EthicalAd';
+import Sponsors from '../components/Sponsors';
 import PageContainer from '../components/PageContainer';
 import SearchBar from '../components/SearchBar';
 import Footer from '../components/Footer';
@@ -48,7 +48,7 @@ export default () => (
                 </noscript>
             </form>
 
-            <EthicalAd />
+            <Sponsors />
         </PageContainer>
         <Footer />
     </>

src/pages/result.tsx

@@ -7,7 +7,7 @@ import SearchBar from '../components/SearchBar';
 import Footer from '../components/Footer';
 import Image from '../components/Image';
 import LinkedLogos from '../components/LinkedLogos';
-import EthicalAd from '../components/EthicalAd';
+import Sponsors from '../components/Sponsors';
 
 import { pages, versionUnknown } from '../util/constants';
 import { getReadableFileSize } from '../util/npm-parser';
@@ -65,7 +65,7 @@ export default ({ pkgSize, readings, isLatest, inputStr }: ResultProps) => {
                 ) : (
                     <Image width={350} height={350} file="tumblebeasts/tbstand2.png" />
                 )}
-                <EthicalAd />
+                <Sponsors />
             </PageContainer>
 
             <Footer />