Merge branch 'master' of github.com:supabase/supabase

2026-10-11 20:35:07 +03:00 · 2020-11-14 11:03:34 +08:00
commit 4691063f81
@@ -17,4 +17,22 @@ Want to contribute? Why not jump into our github and:
 - [vote on a new connector](https://github.com/supabase/supabase/issues/4) for a tool that you use
 - [vote on a new database](https://github.com/supabase/supabase/issues/6)
 - spread the word if you like what we are doing
+- add your project or company to our showcase

+## How to add a your project to our showcase
+
+1. Add your project/company/service's logo in `supabase/web/static/img/showcase-logo/`.
+2. Add a new entry in `supabase/web/src/data/showcase.json` (you can replace and use the next one):
+```
+{
+    "project_or_company": {
+        "name": "Amazing project",
+        "description": "This is an amazing description for an amazing project 😄",
+        "web_site": "my-powerful.site",
+        "image": "img-name.extension"
+    },
+    "is_open_source": true/false,
+    "public_repo": "my-repo"
+}
+```
+3. Make a `pull request` to our [repository](https://github.com/supabase/supabase) labeled with... (@todo).
@@ -4,7 +4,6 @@
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
-
 module.exports = {
  title: 'Supabase',
  tagline: 'The open source Firebase alternative.',
@@ -135,6 +134,11 @@ module.exports = {
            },
          ],
        },
+        {
+          to: '/showcase',
+          label: 'Showcase',
+          position: 'right',
+        },
        // { to: '/docs/pricing', label: 'Pricing', position: 'right' },
        { href: 'https://app.supabase.io', label: 'Login', position: 'right' },
      ],
@@ -0,0 +1,68 @@
+import React, { useRef, useEffect } from 'react'
+import PropTypes from 'prop-types';
+
+
+export default function Section({ title, id, style, children }) {
+  const hash = String(id ? id : title).trim().replace(/\s/g, "-").toLowerCase();
+  const sectionRef = useRef(null);
+
+  useEffect(() => {
+    function scrollOnHash() {
+      const clearedLocationHash = window.location.hash.substring(1);
+
+      if (clearedLocationHash == hash) {
+        sectionRef.current.scrollIntoView({ behavior: 'smooth' });
+      }
+    }
+
+    function changeHash() {
+      const el = document.getElementById(hash);
+
+      if (el) {
+        const elementPos = el.getBoundingClientRect();
+
+        if (elementPos.top <= 80 && elementPos.top >= 0)
+          replaceHistoryHash();
+      }
+    }
+    scrollOnHash();
+    window.addEventListener("scroll", changeHash);
+
+    return () => {
+      window.removeEventListener("scroll", changeHash);
+    };
+  }, [])
+
+  function replaceHistoryHash() {
+    history.replaceState(history.state, '', `#${hash}`);
+  }
+
+  function handleHashClick() {
+    replaceHistoryHash();
+    sectionRef.current.scrollIntoView({ behavior: 'smooth' });
+  }
+
+  return (
+    <section className="section-lg">
+      <div className="container Section">
+        <h2 className={`${stylePropOptions[style]} Section-Title`}
+          ref={sectionRef}
+          onClick={handleHashClick}
+          id={hash}>
+          {title}
+          <span className="Section-Hash">#</span>
+        </h2>
+        <div>{children}</div>
+      </div>
+    </section>
+  );
+}
+
+const stylePropOptions = {
+  'underline': 'with-underline'
+};
+
+Section.propTypes = {
+  title: PropTypes.string.isRequired,
+  style: PropTypes.oneOf(['underline']),
+}
@@ -943,6 +943,193 @@ html[data-theme='dark'] .navbar-item-twitter:before {
  max-width: 100%;
 }

+/* Section */
+.Section {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+.Section-Hash {
+  margin-left: 8px;
+  color: var(--custom-content-color-light);
+  opacity: 0.4;
+}
+.Section-Title:hover .Section-Hash {
+  color: var(--custom-primary);
+  opacity: 1;
+}
+.Section-Title {
+  cursor: pointer;
+  scroll-margin: 74px; /* Navbar size (60) + a little margin */
+}
+
+/* Showcase */
+.ShowcaseCard {
+  position: relative;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-shadow: none;
+  border: 1px solid #333;
+  padding: var(--ifm-card-vertical-spacing) var(--ifm-card-horizontal-spacing);
+}
+
+.ShowcaseCard:hover {
+  transition: all 0.2s ease;
+  border: 1px solid var(--custom-primary);
+  box-shadow: var(--custom-shadow-xl), 0 0 0 1px var(--custom-primary) !important;
+}
+
+.ShowcaseCard-Img {
+  height: 100%;
+  width: auto;
+}
+
+.ShowcaseCard-ImgContainer {
+  height: 140px;
+  display: flex;
+  justify-content: center;
+}
+
+.ShowcaseCard-Text {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.ShowcaseCard-Text p {
+  width: 100%;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;  
+  overflow: hidden;
+  margin: 0;
+}
+
+.ShowcaseCard-Text h3 {
+  opacity: 0;
+  position: absolute;
+  width: 100%;
+  top: 0;
+  left: 0;
+  backdrop-filter: blur(3px) contrast(80%);
+  padding: var(--ifm-card-vertical-spacing) var(--ifm-card-horizontal-spacing);
+  transition: 0.2s ease;
+}
+
+.ShowcaseCard-Content {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: var(--ifm-card-vertical-spacing);
+  height: 100%;
+}
+
+.ShowcaseCard:hover h3 {
+  opacity: 1;
+}
+
+.ShowcaseCard-Tag {
+  color: var(--custom-primary);
+  font-weight: bold;
+  font-size: 12px;
+  margin: 8px 4px 12px 0px;
+}
+
+.ShowcaseCard-Footer {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+}
+
+.ShowcaseCard-Footer-Item {
+  width: 100%;
+}
+
+/* Spaces between children */
+.ShowcaseCard-Footer-Spaced .ShowcaseCard-Footer-Item:first-child {
+  margin-right: 4px;
+}
+
+.ShowcaseCard-Footer-Spaced .ShowcaseCard-Footer-Item:nth-child(even) {
+  margin-left:  4px;
+  margin-right: 4px;
+}
+
+.ShowcaseCard-Footer-Spaced .ShowcaseCard-Footer-Item:last-child {
+  margin-right: 0px;
+}
+
+@media screen and (max-width: 997px) {
+  .ShowcaseCard-ImgContainer {
+    height: 120px;
+    align-self: center;
+  }
+
+  .ShowcaseCard-Content {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .ShowcaseCard-Text {
+    width: 100%;
+    margin-left: var(--ifm-card-horizontal-spacing);
+  }
+
+  .ShowcaseCard-Tag {
+    margin-top: 0px;
+  }
+
+  .ShowcaseCard-Footer a {
+    margin: var(--ifm-card-vertical-spacing) var(--ifm-card-horizontal-spacing) 0 0;
+  }
+
+  .ShowcaseCard-Text h3 {
+    position: relative;
+    bottom: 0;
+    opacity: 1;
+    backdrop-filter: blur(0) contrast(100%);
+    padding: 0;
+  }
+}
+
+@media screen and (max-width: 650px) {
+  .ShowcaseCard-ImgContainer {
+    height: 80px;
+  }
+}
+
+@media screen and (max-width: 650px) {
+  .ShowcaseCard-Content {
+    flex-direction: column;
+    padding: 0px;
+  }
+
+  .ShowcaseCard-Text {
+    margin: 0px;
+    padding: 0px;
+  }
+
+  .ShowcaseCard-Text h3 {
+    margin-top: var(--ifm-card-vertical-spacing);
+  }
+}
+
+@media screen and (max-width: 380px) {
+  .ShowcaseCard-Footer {
+    flex-direction: column;
+  }
+
+  /* Spaces between children */
+  .ShowcaseCard-Footer-Spaced .ShowcaseCard-Footer-Item:first-child {
+    margin-right: 0px;
+  }
+
+  .ShowcaseCard-Footer-Spaced .ShowcaseCard-Footer-Item:nth-child(even) {
+    margin-left:  0px;
+    margin-right: 0px;
+  }
+}
+

 /* New CSS */

@@ -1033,4 +1220,4 @@ h4.method-list-item-label .method-list-item-validation {
  border-radius: 5px;
  overflow: hidden;
  border: 2px solid var(--custom-border-color);
-}
+}
@@ -0,0 +1 @@
+[]
@@ -0,0 +1,81 @@
+import React, { useEffect, useRef, useState } from 'react'
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
+import Layout from '@theme/Layout'
+import Section from '../components/Section'
+import Link from '@docusaurus/Link'
+
+import showcase from '../data/showcase.json'
+
+
+export default function Showcase() {
+  const { siteConfig = {} } = useDocusaurusContext();
+  const processedShowcase = showcase
+    .sort((a, b) => a.project_or_company.name.localeCompare(b.project_or_company.name))
+
+  return (
+    <Layout title={siteConfig.title} description={siteConfig.tagline}>
+      <Section title="Built with Supabase!" style="underline">
+
+        {/* Open Source */}
+        <ShowcaseSection
+          showcase={processedShowcase} />
+      </Section>
+
+      {/* Add */}
+      <Section title="Do you want to add your project?" style="underline">
+        <p>
+          <Link href="docs/handbook/contributing#how-to-add-a-your-project-to-our-showcase">
+            Learn how
+          </Link> to add your project to our showcase.
+        </p>
+      </Section>
+    </Layout>
+  );
+}
+
+function ShowcaseSection({ showcase }) {
+  return (
+    <div className="row is-multiline">
+      {/* Display showcase */}
+      {showcase.map((v, i) =>
+        (<div className="col col--4" key={`${i}-${v.project_or_company.image}`}>
+          <ShowcaseCard
+            projectOrCompany={v.project_or_company}
+            isOpenSource={v.is_open_source}
+            publicRepo={v.public_repo}
+          />
+        </div>))
+      }
+    </div>
+  )
+}
+
+function ShowcaseCard({ projectOrCompany, isOpenSource, publicRepo }) {
+  const spacedFooter = projectOrCompany.web_site && publicRepo && isOpenSource ? "ShowcaseCard-Footer-Spaced" : null;
+  const button = (label, href) => (
+    <a className="button button--secondary ShowcaseCard-Footer-Item"
+      target="_blank"
+      href={href}>{label}</a>
+  )
+
+  return (
+    <div className="card card__body ShowcaseCard">
+      <div className="ShowcaseCard-Content">
+        <div className="ShowcaseCard-ImgContainer">
+          <img className="ShowcaseCard-Img" src={`/img/showcase-logo/${projectOrCompany.image}`} />
+        </div>
+
+        <div className="ShowcaseCard-Text">
+          <h3 className="" >{projectOrCompany.name}</h3>
+          <span className="ShowcaseCard-Tag">{isOpenSource ? "#OpenSource" : null}</span>
+          <p>{projectOrCompany.description}</p>
+        </div>
+      </div>
+
+      <div className={`${spacedFooter} ShowcaseCard-Footer`}>
+        {projectOrCompany.web_site ? button('Web site', projectOrCompany.web_site) : null}
+        {publicRepo && isOpenSource ? button('View repo', publicRepo) : null}
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,23 @@
+<svg width="2978" height="628" viewBox="0 0 2978 628" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M717 390.353C720.036 418.721 745.841 467.351 820.725 467.351C885.995 467.351 917.366 425.813 917.366 385.288C917.366 348.815 892.573 318.928 843.493 308.796L808.075 301.198C794.414 298.665 785.306 291.067 785.306 278.909C785.306 264.725 799.474 254.088 817.183 254.088C845.517 254.088 856.143 272.83 858.167 287.521L914.33 274.857C911.294 248.009 887.513 202.925 816.677 202.925C763.044 202.925 723.578 239.904 723.578 284.481C723.578 319.434 745.335 348.309 793.402 358.946L826.29 366.545C845.517 370.597 853.107 379.716 853.107 390.86C853.107 404.031 842.482 415.682 820.219 415.682C790.872 415.682 776.199 397.445 774.681 377.689L717 390.353Z" fill="#1F1F1F"/>
+<path d="M1132.42 459.753H1196.68C1195.67 451.141 1194.15 433.918 1194.15 414.668V210.523H1126.85V355.4C1126.85 384.275 1109.65 404.537 1079.8 404.537C1048.43 404.537 1034.26 382.248 1034.26 354.387V210.523H966.967V368.065C966.967 422.267 1001.37 466.338 1061.58 466.338C1087.89 466.338 1116.74 456.207 1130.4 432.905C1130.4 443.036 1131.41 454.687 1132.42 459.753Z" fill="#1F1F1F"/>
+<path d="M1333.26 556V435.438C1345.4 452.154 1370.7 465.832 1405.11 465.832C1475.44 465.832 1522.49 410.109 1522.49 334.631C1522.49 260.673 1480.5 204.951 1407.64 204.951C1370.2 204.951 1342.37 221.667 1331.24 240.917V210.523H1265.97V556H1333.26ZM1456.21 335.138C1456.21 379.716 1428.89 405.55 1394.48 405.55C1360.08 405.55 1332.25 379.209 1332.25 335.138C1332.25 291.067 1360.08 265.232 1394.48 265.232C1428.89 265.232 1456.21 291.067 1456.21 335.138Z" fill="#1F1F1F"/>
+<path d="M1560.6 391.873C1560.6 430.879 1592.98 466.845 1646.11 466.845C1683.04 466.845 1706.82 449.621 1719.47 429.865C1719.47 439.49 1720.48 453.167 1722 459.753H1783.73C1782.21 451.141 1780.7 433.411 1780.7 420.241V297.652C1780.7 247.502 1751.35 202.925 1672.42 202.925C1605.63 202.925 1569.7 245.982 1565.66 284.988L1625.36 297.652C1627.39 275.87 1643.58 257.127 1672.92 257.127C1701.26 257.127 1714.92 271.817 1714.92 289.547C1714.92 298.159 1710.37 305.251 1696.2 307.277L1634.98 316.395C1593.49 322.474 1560.6 347.295 1560.6 391.873ZM1660.27 416.695C1638.52 416.695 1627.89 402.511 1627.89 387.821C1627.89 368.571 1641.55 358.946 1658.76 356.414L1714.92 347.802V358.946C1714.92 403.018 1688.61 416.695 1660.27 416.695Z" fill="#1F1F1F"/>
+<path d="M1913.8 459.753V429.359C1926.95 450.635 1953.26 465.832 1987.67 465.832C2058.51 465.832 2105.06 409.603 2105.06 334.125C2105.06 260.166 2063.06 203.938 1990.2 203.938C1953.26 203.938 1925.94 220.148 1914.81 237.877V93H1848.53V459.753H1913.8ZM2037.76 334.631C2037.76 380.222 2010.44 405.55 1976.03 405.55C1942.13 405.55 1913.8 379.716 1913.8 334.631C1913.8 289.04 1942.13 264.219 1976.03 264.219C2010.44 264.219 2037.76 289.04 2037.76 334.631Z" fill="#1F1F1F"/>
+<path d="M2143.16 391.873C2143.16 430.879 2175.54 466.845 2228.67 466.845C2265.6 466.845 2289.39 449.621 2302.03 429.865C2302.03 439.49 2303.05 453.167 2304.56 459.753H2366.29C2364.78 451.141 2363.26 433.411 2363.26 420.241V297.652C2363.26 247.502 2333.91 202.925 2254.98 202.925C2188.19 202.925 2152.27 245.982 2148.22 284.988L2207.92 297.652C2209.95 275.87 2226.14 257.127 2255.48 257.127C2283.82 257.127 2297.48 271.817 2297.48 289.547C2297.48 298.159 2292.93 305.251 2278.76 307.277L2217.54 316.395C2176.05 322.474 2143.16 347.295 2143.16 391.873ZM2242.84 416.695C2221.08 416.695 2210.45 402.511 2210.45 387.821C2210.45 368.571 2224.11 358.946 2241.32 356.414L2297.48 347.802V358.946C2297.48 403.018 2271.17 416.695 2242.84 416.695Z" fill="#1F1F1F"/>
+<path d="M2409.84 390.353C2412.87 418.721 2438.68 467.351 2513.56 467.351C2578.83 467.351 2610.2 425.813 2610.2 385.288C2610.2 348.815 2585.41 318.928 2536.33 308.796L2500.91 301.198C2487.25 298.665 2478.15 291.067 2478.15 278.909C2478.15 264.725 2492.31 254.088 2510.02 254.088C2538.36 254.088 2548.98 272.83 2551.01 287.521L2607.17 274.857C2604.13 248.009 2580.35 202.925 2509.52 202.925C2455.88 202.925 2416.42 239.904 2416.42 284.481C2416.42 319.434 2438.17 348.309 2486.24 358.946L2519.13 366.545C2538.36 370.597 2545.95 379.716 2545.95 390.86C2545.95 404.031 2535.32 415.682 2513.06 415.682C2483.71 415.682 2469.04 397.445 2467.52 377.689L2409.84 390.353Z" fill="#1F1F1F"/>
+<path d="M2712.4 306.77C2713.92 283.975 2733.15 257.633 2768.06 257.633C2806.51 257.633 2822.71 281.949 2823.72 306.77H2712.4ZM2830.3 371.611C2822.2 393.899 2805 409.603 2773.63 409.603C2740.23 409.603 2712.4 385.794 2710.89 352.868H2888.99C2888.99 351.854 2890 341.723 2890 332.098C2890 252.061 2843.96 202.925 2767.05 202.925C2703.3 202.925 2644.6 254.594 2644.6 334.125C2644.6 418.214 2704.81 467.351 2773.12 467.351C2834.34 467.351 2873.81 431.385 2886.46 388.327L2830.3 371.611Z" fill="#1F1F1F"/>
+<path d="M60.45 376.395C45.8421 376.395 34 364.556 34 349.953C34 344.056 35.9305 338.611 39.194 334.213L49.3806 319.913L280.276 8.14532C282.108 5.63276 285.075 4 288.424 4C293.989 4 298.5 8.50994 298.5 14.0732V15.2065L298.5 376.395H60.45Z" fill="#3ECF8E"/>
+<path d="M536.55 241.854C551.158 241.854 563 253.693 563 268.297C563 274.193 561.07 279.638 557.806 284.036L547.619 298.336L316.724 610.104C314.891 612.616 311.925 614.249 308.576 614.249C303.011 614.249 298.5 609.739 298.5 604.176L298.5 603.043L298.5 241.854L536.55 241.854Z" fill="url(#paint0_linear)"/>
+<path d="M536.55 241.854C551.158 241.854 563 253.693 563 268.297C563 274.193 561.07 279.638 557.806 284.036L547.619 298.336L316.724 610.104C314.891 612.616 311.925 614.249 308.576 614.249C303.011 614.249 298.5 609.739 298.5 604.176L298.5 603.043L298.5 241.854L536.55 241.854Z" fill="url(#paint1_linear)" fill-opacity="0.2"/>
+<defs>
+<linearGradient id="paint0_linear" x1="298.5" y1="318.891" x2="495.646" y2="395.82" gradientUnits="userSpaceOnUse">
+<stop stop-color="#249361"/>
+<stop offset="1" stop-color="#3ECF8E"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="212.852" y1="192.853" x2="311.265" y2="365.218" gradientUnits="userSpaceOnUse">
+<stop/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>