Temporary Banner (#721)

* Add banner and logic

* Add translations and fix date

app/src/components/Layout.tsx

@@ -1,6 +1,7 @@
+/* eslint-disable jsx-a11y/no-distracting-elements */
 import cx from "classnames";
 import { X } from "phosphor-react";
-import { memo, ReactNode, Suspense } from "react";
+import { memo, ReactNode, Suspense, useState } from "react";
 import { Link } from "react-router-dom";
 
 import { useFullscreen, useIsEditorView } from "../lib/hooks";
@@ -11,12 +12,15 @@ import styles from "./Layout.module.css";
 import Loading from "./Loading";
 import { VersionCheck } from "./VersionCheck";
 import { PaywallModal } from "./PaywallModal";
+import { Trans } from "@lingui/macro";
 
 const Layout = memo(({ children }: { children: ReactNode }) => {
   const isFullscreen = useFullscreen();
   let [showBanner, message, messageType] = getShowBannerAndMessage();
   const isEditorView = useIsEditorView();
 
+  const [showPHBanner, setShowPHBanner] = useState<boolean>(isPHBannerTime());
+
   // fullscreen disables banners
   if (isFullscreen) {
     showBanner = false;
@@ -29,8 +33,19 @@ const Layout = memo(({ children }: { children: ReactNode }) => {
         className={styles.LayoutWrapper}
         data-showing={isEditorView ? "editor" : undefined}
         data-fullscreen={isFullscreen}
-        data-banner={showBanner}
+        data-banner={showBanner || showPHBanner}
       >
+        {showPHBanner ? (
+          <ProductHuntBanner
+            hide={() => {
+              setShowPHBanner(false);
+              // set a cookie to not show the banner again
+              document.cookie = `showPHBanner=false; path=/; max-age=${
+                60 * 60 * 24 * 30
+              }`;
+            }}
+          />
+        ) : null}
         {showBanner ? (
           <div
             className={cx("flex justify-center items-center w-full gap-2", {
@@ -76,3 +91,56 @@ function getShowBannerAndMessage(): [boolean, string, "error" | "info"] {
   }
   return [false, "", "info"];
 }
+
+/**
+ * Extremely Temporary Producthunt Banner
+ */
+export function ProductHuntBanner({ hide }: { hide: () => void }) {
+  return (
+    <a
+      href="https://www.producthunt.com/posts/flowchart-fun-2?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-flowchart-fun-2"
+      target="_blank"
+      rel="noopener noreferrer"
+      className="relative bg-gradient-to-b from-orange-400 to-orange-300/80 text-[#443214] hidden md:flex items-center justify-center group"
+      onClick={hide}
+    >
+      <p className="text-sm font-bold pl-4 z-10">
+        <Trans>
+          Love Flowchart Fun? Support us with a vote on Product Hunt!
+        </Trans>
+      </p>
+      <div className="w-[64px] h-[52px] overflow-hidden relative mix-blend-multiply rounded-full z-10">
+        <div className="absolute -top-px -right-px w-[250px] h-[54px]">
+          <img
+            src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=483202&theme=neutral"
+            alt="Flowchart Fun - Text-to-Flowchart with AI Magic 🪄 | Product Hunt"
+            width={250}
+            height={54}
+          />
+        </div>
+      </div>
+      <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-transparent to-amber-500 hidden group-hover:block animate-pulseIn" />
+    </a>
+  );
+}
+
+/**
+ * This function returns true if it's August 25th, 2024, between 12:00am and 11:59pm PST
+ */
+export function isPHBannerTime() {
+  // check if the cookie exists
+  const cookie = document.cookie
+    .split("; ")
+    .find((row) => row.startsWith("showPHBanner="));
+  if (cookie) {
+    return false;
+  }
+
+  const pstDate = new Date().toLocaleString("en-US", {
+    timeZone: "America/Los_Angeles",
+  });
+  const [date] = pstDate.split(", ");
+  const [month, day, year] = date.split("/").map(Number);
+
+  return year === 2024 && month === 8 && day === 25;
+}

app/src/index.css

@@ -495,3 +495,13 @@ body.dark .convert-on-paste-overlay {
     hsl(265.79, 79.08%, 30%) 100%
   );
 }
+
+.clip-path-rectangle {
+  @apply relative;
+  clip-path: polygon(
+    calc(100% - 64px) 0,
+    100% 0,
+    100% 100%,
+    calc(100% - 64px) 100%
+  );
+}

app/src/locales/de/messages.po

@@ -147,6 +147,7 @@ msgid "Become a Pro User"
 msgstr "Werden Sie ein Pro-Benutzer"
 
 #: src/lib/getDefaultText.ts:5
+#: src/lib/getDefaultText.ts:14
 msgid "Begin your journey"
 msgstr "Beginne deine Reise"
 
@@ -959,6 +960,10 @@ msgstr "Einloggen, um zu speichern"
 msgid "Log in to upgrade your account"
 msgstr "Melde dich an, um dein Konto zu aktualisieren"
 
+#: src/components/Layout.tsx:108
+msgid "Love Flowchart Fun? Support us with a vote on Product Hunt!"
+msgstr "Liebst du den Flowchart Spaß? Unterstütze uns mit einer Stimme auf Product Hunt!"
+
 #: src/components/Settings.tsx:151
 msgid "Make a One-Time Donation"
 msgstr "Machen Sie eine einmalige Spende"

app/src/locales/en/messages.po

@@ -147,6 +147,7 @@ msgid "Become a Pro User"
 msgstr "Become a Pro User"
 
 #: src/lib/getDefaultText.ts:5
+#: src/lib/getDefaultText.ts:14
 msgid "Begin your journey"
 msgstr "Begin your journey"
 
@@ -959,6 +960,10 @@ msgstr "Log in to Save"
 msgid "Log in to upgrade your account"
 msgstr "Log in to upgrade your account"
 
+#: src/components/Layout.tsx:108
+msgid "Love Flowchart Fun? Support us with a vote on Product Hunt!"
+msgstr "Love Flowchart Fun? Support us with a vote on Product Hunt!"
+
 #: src/components/Settings.tsx:151
 msgid "Make a One-Time Donation"
 msgstr "Make a One-Time Donation"

app/src/locales/es/messages.po

@@ -147,6 +147,7 @@ msgid "Become a Pro User"
 msgstr "Convierte en un Usuario Pro"
 
 #: src/lib/getDefaultText.ts:5
+#: src/lib/getDefaultText.ts:14
 msgid "Begin your journey"
 msgstr "Comienza tu viaje"
 
@@ -959,6 +960,10 @@ msgstr "Inicia sesión para guardar"
 msgid "Log in to upgrade your account"
 msgstr "Iniciar sesión para actualizar tu cuenta"
 
+#: src/components/Layout.tsx:108
+msgid "Love Flowchart Fun? Support us with a vote on Product Hunt!"
+msgstr "¿Te gusta Love Flowchart Fun? ¡Apóyanos con un voto en Product Hunt!"
+
 #: src/components/Settings.tsx:151
 msgid "Make a One-Time Donation"
 msgstr "Realizar una donación única"

app/src/locales/fr/messages.po

@@ -147,6 +147,7 @@ msgid "Become a Pro User"
 msgstr "Devenez un utilisateur Pro"
 
 #: src/lib/getDefaultText.ts:5
+#: src/lib/getDefaultText.ts:14
 msgid "Begin your journey"
 msgstr "Commencez votre voyage"
 
@@ -959,6 +960,10 @@ msgstr "Connectez-vous pour enregistrer"
 msgid "Log in to upgrade your account"
 msgstr "Connectez-vous pour mettre à niveau votre compte"
 
+#: src/components/Layout.tsx:108
+msgid "Love Flowchart Fun? Support us with a vote on Product Hunt!"
+msgstr "Vous aimez le Flowchart Fun ? Soutenez-nous en votant sur Product Hunt !"
+
 #: src/components/Settings.tsx:151
 msgid "Make a One-Time Donation"
 msgstr "Faites un don unique"

app/src/locales/hi/messages.po

@@ -147,6 +147,7 @@ msgid "Become a Pro User"
 msgstr "प्रो उपयोगकर्ता बनें"
 
 #: src/lib/getDefaultText.ts:5
+#: src/lib/getDefaultText.ts:14
 msgid "Begin your journey"
 msgstr "अपनी यात्रा शुरू करें"
 
@@ -959,6 +960,10 @@ msgstr "सेव में लॉग इन करें"
 msgid "Log in to upgrade your account"
 msgstr "अपने खाते को अपग्रेड करने के लिए लॉग इन करें"
 
+#: src/components/Layout.tsx:108
+msgid "Love Flowchart Fun? Support us with a vote on Product Hunt!"
+msgstr "क्या आप प्यार फ्लोचार्ट फन को समर्थन करते हैं? हमें प्रोडक्ट हंट पर एक वोट देकर समर्थन करें!"
+
 #: src/components/Settings.tsx:151
 msgid "Make a One-Time Donation"
 msgstr "एक बार दान करें"

app/src/locales/ko/messages.po

@@ -147,6 +147,7 @@ msgid "Become a Pro User"
 msgstr "프로 사용자가 되기"
 
 #: src/lib/getDefaultText.ts:5
+#: src/lib/getDefaultText.ts:14
 msgid "Begin your journey"
 msgstr "여정을 시작하세요."
 
@@ -959,6 +960,10 @@ msgstr "로그인하여 저장하기"
 msgid "Log in to upgrade your account"
 msgstr "계정 업그레이드를 위해 로그인"
 
+#: src/components/Layout.tsx:108
+msgid "Love Flowchart Fun? Support us with a vote on Product Hunt!"
+msgstr "러브 플로우차트 펀을 좋아하시나요? 제품헌트에서 투표로 우리를 지원해주세요!"
+
 #: src/components/Settings.tsx:151
 msgid "Make a One-Time Donation"
 msgstr "한 번 선물하기"

app/src/locales/pt-br/messages.po

@@ -147,6 +147,7 @@ msgid "Become a Pro User"
 msgstr "Se torne um usuário Pro"
 
 #: src/lib/getDefaultText.ts:5
+#: src/lib/getDefaultText.ts:14
 msgid "Begin your journey"
 msgstr "Comece sua jornada"
 
@@ -959,6 +960,10 @@ msgstr "Faça login para salvar"
 msgid "Log in to upgrade your account"
 msgstr "Faça login para atualizar sua conta"
 
+#: src/components/Layout.tsx:108
+msgid "Love Flowchart Fun? Support us with a vote on Product Hunt!"
+msgstr "Gosta do Love Flowchart Fun? Apoie-nos com um voto no Product Hunt!"
+
 #: src/components/Settings.tsx:151
 msgid "Make a One-Time Donation"
 msgstr "Faça uma Doação Única"

app/src/locales/zh/messages.po

@@ -147,6 +147,7 @@ msgid "Become a Pro User"
 msgstr "成为专业用户"
 
 #: src/lib/getDefaultText.ts:5
+#: src/lib/getDefaultText.ts:14
 msgid "Begin your journey"
 msgstr "开始你的旅程"
 
@@ -959,6 +960,10 @@ msgstr "登录以保存"
 msgid "Log in to upgrade your account"
 msgstr "登录升级您的账户"
 
+#: src/components/Layout.tsx:108
+msgid "Love Flowchart Fun? Support us with a vote on Product Hunt!"
+msgstr "喜欢《爱情流程图乐趣》吗？ 在Product Hunt上给我们投票支持吧！"
+
 #: src/components/Settings.tsx:151
 msgid "Make a One-Time Donation"
 msgstr "进行一次性捐赠"

app/tailwind.config.js

@@ -114,6 +114,10 @@ module.exports = {
           "0%, 100%": { opacity: 1 },
           "50%": { opacity: 0.5 },
         },
+        pulseIn: {
+          "0%, 100%": { opacity: 0 },
+          "50%": { opacity: 0.5 },
+        },
         hide: {
           from: { opacity: 1 },
           to: { opacity: 0 },
@@ -145,6 +149,7 @@ module.exports = {
         hide: "hide 100ms ease-in",
         slideIn: "slideIn 150ms cubic-bezier(0.16, 1, 0.3, 1)",
         swipeOut: "swipeOut 100ms ease-out",
+        pulseIn: "pulseIn 1s cubic-bezier(0.4, 0, 0.6, 1) infinite",
       },
       fontSize: {
         xs: ["14px", { lineHeight: "16px" }],