Display OSS sponsors

.env

@@ -16,5 +16,8 @@ VITE_MEASUREMENT_ID=<MEASUREMENT_ID (optional)>
 # Small Chat (optional)
 VITE_SMALL_CHAT=https://embed.small.chat/Txxxxxxxxx.js
 
+# OpenSponsors
+VITE_OPEN_SPONSORS=
+
 # Emulators (run everything in local)
 VITE_EMULATORS=true

src/baseComponents/useOSSSponsors.ts

@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react'
+import { OpenSponsorsUrl } from '../env.ts'
+
+export const useOSSSponsors = () => {
+    const [sponsors, setSponsors] = useState<
+        { name: string; website: string; logo: string; logoDark: string }[]
+    >([])
+
+    useEffect(() => {
+        const fetchData = async () => {
+            const response = await fetch(OpenSponsorsUrl)
+            const data = await response.json()
+            setSponsors(data.sponsors || [])
+        }
+        fetchData()
+    }, [])
+
+    return sponsors
+}

src/env.ts

@@ -1,3 +1,2 @@
-import 'vite/client'
-
-export const ViteAuthDomain = import.meta.env.VITE_AUTH_DOMAIN
+// @ts-ignore
+export const OpenSponsorsUrl = import.meta.env.VITE_OPEN_SPONSORS

src/feedback/layout/Footer.jsx

@@ -2,11 +2,15 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Box, useTheme } from '@mui/material'
 import Link from '@mui/material/Link'
+import { useOSSSponsors } from '../../baseComponents/useOSSSponsors.ts'
 
 export const Footer = () => {
     const { t } = useTranslation()
     const theme = useTheme()
-    const logoColor = theme.palette.mode === 'dark' ? 'white' : 'black'
+    const isDarkMode = theme.palette.mode === 'dark'
+    const logoColor = isDarkMode ? 'white' : 'black'
+
+    const sponsors = useOSSSponsors()
 
     return (
         <Box
@@ -16,33 +20,62 @@ export const Footer = () => {
             padding={1}
             marginTop={2}
             color={theme.palette.textDimmed}
-            component="footer"
-        >
+            component="footer">
             <span style={{ marginRight: 6, marginTop: -2 }}>
                 {t('footer.madeBy')}
             </span>
             <a
                 href="https://github.com/HugoGresse/open-feedback"
                 target="_blank"
-                rel="noopener noreferrer"
-            >
+                rel="noopener noreferrer">
                 <img
                     height="25"
                     src={`/static/logos/openfeedback-${logoColor}-orange.svg`}
                     alt="open feedback"
                 />
             </a>
 
-            <Link
-                href="https://github.com/sponsors/HugoGresse"
-                target="_blank"
-                rel="noopener noreferrer"
-                style={{ color: theme.palette.primary.contrastText }}
-            >
-                <span style={{ left: 16, top: -2, position: 'relative' }}>
-                    {t('common.donate')}
-                </span>
-            </Link>
+            <Box
+                display="flex"
+                flexDirection="row"
+                paddingRight={1.8}
+                paddingTop={0.5}
+                gap={2}
+                borderRadius={10}
+                border="1px solid #888"
+                alignItems="center"
+                marginTop={-2}
+                marginLeft={2}
+                justifyContent="center">
+                <Box marginInlineEnd={2}>
+                    <Link
+                        href="https://github.com/sponsors/HugoGresse"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        style={{ color: theme.palette.textDimmed }}>
+                        <span
+                            style={{ left: 16, top: -2, position: 'relative' }}>
+                            Devenir sponsor
+                        </span>
+                    </Link>
+                </Box>
+                {sponsors.map((sponsor) => (
+                    <Box
+                        component="a"
+                        href={sponsor.website}
+                        target="_blank"
+                        key={sponsor.name}
+                        sx={{ ':hover': { opacity: 0.4 } }}>
+                        <img
+                            src={
+                                (isDarkMode && sponsor.logoDark) || sponsor.logo
+                            }
+                            alt={sponsor.name}
+                            style={{ height: 30, borderRadius: 5 }}
+                        />
+                    </Box>
+                ))}
+            </Box>
         </Box>
     )
 }

src/root/HowItWorks.jsx

@@ -7,7 +7,6 @@ import adminImage from './images/admin-new.webp'
 import newImage from './images/new.png'
 import qrcodeImage from './images/qrcode.png'
 import bulleImage from './images/bulle.png'
-import hoverboard from './images/hoverboard.png'
 import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
@@ -64,15 +63,6 @@ const List = styled.ul`
     }
 `
 
-const CompatibilityText = styled(Box)`
-    margin-top: 20px;
-    color: ${COLORS.GRAY};
-
-    img {
-        margin: 0 5px;
-    }
-`
-
 const Header = () => {
     const { t } = useTranslation()
 
@@ -103,15 +93,6 @@ const Header = () => {
                             {t('home.vote')}
                         </li>
                     </List>
-
-                    <CompatibilityText display="flex" alignItems="center">
-                        {t('home.compatibleHoverboard')}
-                        <img
-                            height="40"
-                            src={hoverboard}
-                            alt="hoverboard"
-                        />
-                    </CompatibilityText>
                 </BoxRight>
             </InnerWrapperResponsive>
         </Box>

src/root/Root.jsx

@@ -5,11 +5,16 @@ import HowItWorks from './HowItWorks.jsx'
 import FAQ from './FAQ.jsx'
 import { I18nextProvider } from 'react-i18next'
 import i18n from './translations/i18n'
-import { createTheme, ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
+import {
+    createTheme,
+    ThemeProvider,
+    StyledEngineProvider,
+} from '@mui/material/styles'
 import { showSmallChat, useSmallchat } from '../admin/project/utils/smallchat'
 import { Footer } from './Footer.jsx'
 import { Contact } from './Contact.jsx'
 import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3'
+import { Sponsor } from './Sponsor.jsx'
 
 const theme = createTheme({
     typography: {
@@ -52,11 +57,13 @@ const Root = () => {
             <StyledEngineProvider injectFirst>
                 <ThemeProvider theme={theme}>
                     <GoogleReCaptchaProvider
-                        reCaptchaKey={import.meta.env.VITE_RECAPTCHAV3_SITE_KEY}
-                    >
+                        reCaptchaKey={
+                            import.meta.env.VITE_RECAPTCHAV3_SITE_KEY
+                        }>
                         <Header />
                         <main>
                             <HowItWorks />
+                            <Sponsor />
                             <FAQ />
                             <Contact />
                         </main>
@@ -65,7 +72,7 @@ const Root = () => {
                 </ThemeProvider>
             </StyledEngineProvider>
         </I18nextProvider>
-    );
+    )
 }
 
 export default Root

src/root/Sponsor.jsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
+import { useTranslation } from 'react-i18next'
+import { useOSSSponsors } from '../baseComponents/useOSSSponsors'
+import OFButton from '../admin/baseComponents/button/OFButton.jsx'
+
+export const Sponsor = () => {
+    const { t } = useTranslation()
+
+    const sponsors = useOSSSponsors()
+
+    return (
+        <Box
+            display="flex"
+            flexDirection="column"
+            justifyContent="center"
+            alignItems="center"
+            bgcolor="#eee"
+            flexGrow="1"
+            textAlign="center"
+            paddingY={4}
+            borderTop="1px solid #ccc">
+            <Typography variant="h2" id="contact" style={{ marginTop: 16 }}>
+                {t('sponsor.title')}
+            </Typography>
+
+            <Typography variant="body1" style={{ marginTop: 16 }}>
+                {t('sponsor.description')}
+            </Typography>
+
+            <Box
+                display="flex"
+                flexDirection="row"
+                marginY={4}
+                gap={4}
+                alignItems="center"
+                justifyContent="center">
+                {sponsors.map((sponsor) => (
+                    <Box
+                        component="a"
+                        href={sponsor.website}
+                        target="_blank"
+                        key={sponsor.name}
+                        sx={{ ':hover': { opacity: 0.4 } }}>
+                        <img
+                            src={sponsor.logo}
+                            alt={sponsor.name}
+                            style={{ height: 50, borderRadius: 5 }}
+                        />
+                    </Box>
+                ))}
+            </Box>
+            <OFButton
+                style={{ marginTop: 26, marginBottom: 32 }}
+                href="https://github.com/sponsors/HugoGresse"
+                target="_blank"
+                rel="noopener noreferrer">
+                {t('sponsor.becomeSponsor')}
+            </OFButton>
+        </Box>
+    )
+}

src/root/translations/languages/en.root.json

@@ -44,6 +44,11 @@
         "success": "Message sent 🚀",
         "submit": "Send"
     },
+    "sponsor": {
+        "title": "Sponsor",
+        "description": "Sponsors helps to keep the project alive, improve it and participate to the hosting costs.",
+        "becomeSponsor": "Become a sponsor"
+    },
     "footer": {
         "about": "About",
         "contact": "Contact"

src/root/translations/languages/fr.root.json

@@ -44,6 +44,11 @@
         "success": "Message envoyé 🚀",
         "submit": "Envoyer"
     },
+    "sponsor": {
+        "title": "Sponsor",
+        "description": "Les sponsors aident à garder le projet en vie et à l'améliorer.",
+        "becomeSponsor": "Devenir sponsor"
+    },
     "footer": {
         "about": "À propos",
         "contact": "Contact"