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" }],