Added Random Joke Generator

demos/random-joke-generator/.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+/dist-e2e
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

demos/random-joke-generator/README.md

@@ -0,0 +1,27 @@
+# Random Recipe Generator with Tolgee
+[<img src="https://raw.githubusercontent.com/tolgee/documentation/main/tolgee_logo_text.svg" alt="Tolgee" width="100" />](https://tolgee.io)
+
+### [Live Website](https://recipe-generator-tolgee.vercel.app/)
+### [Dev.to Blog Link](https://dev.to/sanketshinde/random-recipe-generator-with-tolgee-2di5)
+##
+Here i used `tolgee` with `next.js` app router.
+based on `next14` app folder with `tolgee` and `next-intl` package.
+
+## Setup
+
+1. Clone this repo
+2. Run `npm i`
+3. Add Gemini Api key in `.env.development.local` file.
+4. Run `npm run dev`
+
+## Setup tolgee credentials (optional)
+
+5. Create project in Tolgee platform
+6. Add `.env.development.local` file to base folder of this project with an API key to your project
+
+```
+NEXT_PUBLIC_TOLGEE_API_URL=https://app.tolgee.io
+NEXT_PUBLIC_TOLGEE_API_KEY=<your project API key>
+```
+
+7. Re-run `npm run dev`

demos/random-joke-generator/messages/en.json

@@ -0,0 +1,7 @@
+{
+  "app-name": "Random Joke Generator",
+  "joke-title": "Random Joke",
+  "new-button": "New Joke",
+  "select-lang": "Select Language",
+  "share-button": "Share on X"
+}

demos/random-joke-generator/messages/fr-PF.json

@@ -0,0 +1,7 @@
+{
+  "app-name": "Générateur de blagues aléatoires",
+  "joke-title": "Blague aléatoire",
+  "new-button": "Nouvelle blague",
+  "select-lang": "Sélectionnez la langue",
+  "share-button": "Partager sur X"
+}

demos/random-joke-generator/messages/hi-IN.json

@@ -0,0 +1,7 @@
+{
+  "app-name": "रैंडम जोक जेनरेटर",
+  "joke-title": "रैंडम जोक",
+  "new-button": "नया चुटकुला",
+  "select-lang": "भाषा चुनें",
+  "share-button": "X पर शेयर करें"
+}

demos/random-joke-generator/messages/ja-JP.json

@@ -0,0 +1,7 @@
+{
+  "app-name": "ランダムジョークジェネレーター",
+  "joke-title": "ランダム・ジョーク",
+  "new-button": "ニュー・ジョーク",
+  "select-lang": "言語選択",
+  "share-button": "Xで共有する"
+}

demos/random-joke-generator/next.config.js

@@ -0,0 +1,10 @@
+const createNextIntlPlugin = require('next-intl/plugin');
+
+const withNextIntl = createNextIntlPlugin();
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  distDir: process.env.NEXT_BUILD_DIR || '.next',
+};
+
+module.exports = withNextIntl(nextConfig);

demos/random-joke-generator/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@tolgee/next-app-testapp",
+  "version": "5.29.5",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "develop": "next dev",
+    "build": "next build",
+    "build:e2e": "NEXT_BUILD_DIR=dist-e2e next build",
+    "start": "next start",
+    "clean": "rm -rf .next dist-e2e"
+  },
+  "dependencies": {
+    "@google/generative-ai": "^0.21.0",
+    "@tolgee/format-icu": "5.29.5",
+    "@tolgee/react": "5.29.5",
+    "@tolgee/web": "5.29.5",
+    "axios": "^1.7.7",
+    "cloudinary": "^2.5.1",
+    "html2canvas": "^1.4.1",
+    "next": "14.2.13",
+    "next-intl": "3.19.4",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-toastify": "^10.0.6"
+  },
+  "devDependencies": {
+    "@tolgee/cli": "^2.2.0",
+    "@types/node": "^20",
+    "@types/react": "^18.2.42",
+    "@types/react-dom": "^18.2.17",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.14",
+    "typescript": "^5.3.2"
+  }
+}

demos/random-joke-generator/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

demos/random-joke-generator/src/app/[locale]/Joke.tsx

@@ -0,0 +1,132 @@
+'use client'
+import React, { useEffect, useState, useRef } from 'react';
+import { useTranslate } from '@tolgee/react';
+
+const JokeCard: React.FC = () => {
+  const { t } = useTranslate();
+  const [joke, setJoke] = useState<string>('Loading...');
+  const [isLoading, setIsLoading] = useState(true);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const jokeCardRef = useRef<HTMLDivElement>(null);
+
+  const fetchJoke = async () => {
+    setIsLoading(true);
+    setIsAnimating(true);
+    const response = await fetch('https://official-joke-api.appspot.com/jokes/random');
+    const data = await response.json();
+    setJoke(`${data.setup} - ${data.punchline}`);
+    setIsLoading(false);
+    setTimeout(() => setIsAnimating(false), 500);
+  };
+
+  useEffect(() => {
+    fetchJoke();
+  }, []);
+
+  const handleShare = () => {
+    const jokeText = `${joke}`;
+    const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(jokeText)}`;
+    window.open(twitterUrl, '_blank');
+  };
+
+
+  return (
+    <div className="fixed inset-0 bg-black flex  flex-col items-center justify-center p-4 overflow-hidden ">
+      {/* Animated Cyber Background */}
+      <div className="absolute inset-0">
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-blue-900 via-black to-black" />
+        <div className="absolute inset-0 opacity-20" />
+        <div className="absolute inset-0">
+          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-r from-blue-500/20 to-cyan-500/20 rounded-full blur-3xl animate-pulse" />
+          <div className="absolute top-1/3 left-1/3 w-[600px] h-[600px] bg-gradient-to-r from-violet-500/20 to-purple-500/20 rounded-full blur-3xl animate-pulse delay-100" />
+          <div className="absolute bottom-1/3 right-1/3 w-[400px] h-[400px] bg-gradient-to-r from-fuchsia-500/20 to-pink-500/20 rounded-full blur-3xl animate-pulse delay-200" />
+        </div>
+      </div>
+
+      {/* Main Content Container */}
+      <div className="relative w-full max-w-4xl mx-auto perspective-1000">
+        {/* Joke Card */}
+        <div
+          ref={jokeCardRef}
+          className={`relative bg-gradient-to-br from-gray-900/90 to-gray-900/50 backdrop-blur-2xl border border-white/10 rounded-3xl transform transition-all duration-700 hover:rotate-x-12 group ${
+            isAnimating ? 'scale-95 opacity-0' : 'scale-100 opacity-100'
+          }`}
+        >
+          {/* Neon Border Effect */}
+          <div className="absolute -inset-[1px] bg-gradient-to-r from-cyan-500 via-blue-500 to-purple-500 rounded-3xl opacity-0 group-hover:opacity-100 blur-sm transition-opacity duration-500" />
+
+          {/* Content Container */}
+          <div className="relative p-8 rounded-3xl bg-gray-900/90">
+            {/* Header Section */}
+            <div className="flex flex-col items-center space-y-6">
+              <div className="relative">
+                <h2 className="text-5xl font-bold bg-gradient-to-r from-cyan-400 via-blue-400 to-purple-400 bg-clip-text text-transparent pb-2">
+                {t('joke-title')}
+                </h2>
+                <div className="absolute -inset-1 bg-gradient-to-r from-cyan-500 via-blue-500 to-purple-500 opacity-30 blur-lg -z-10" />
+              </div>
+
+              {/* Animated Loading Indicator */}
+              <div className="flex justify-center space-x-3">
+                <div className="w-4 h-4 rounded-full bg-cyan-500 animate-[bounce_1s_infinite_0ms]" />
+                <div className="w-4 h-4 rounded-full bg-blue-500 animate-[bounce_1s_infinite_200ms]" />
+                <div className="w-4 h-4 rounded-full bg-purple-500 animate-[bounce_1s_infinite_400ms]" />
+              </div>
+
+              {/* Decorative Line */}
+              <div className="w-full h-px bg-gradient-to-r from-transparent via-white/20 to-transparent" />
+            </div>
+
+            {/* Joke Text */}
+            <div className="mt-8 p-6 bg-white/5 rounded-2xl backdrop-blur-sm border border-white/10">
+              <p className={`text-2xl text-gray-100 text-center leading-relaxed transition-all duration-500 ${
+                isLoading ? 'opacity-50 blur-sm' : 'opacity-100 blur-0'
+              }`}>
+                {joke}
+              </p>
+            </div>
+
+            {/* Interactive Elements */}
+            <div className="absolute -bottom-3 left-1/2 -translate-x-1/2 w-1/2 h-6 bg-gradient-to-r from-transparent via-blue-500/20 to-transparent blur-xl" />
+          </div>
+        </div>
+
+        {/* Action Buttons */}
+        <div className="flex flex-col sm:flex-row gap-4 mt-12 w-full">
+          {/* New Joke Button */}
+          <button
+            onClick={fetchJoke}
+            className="group relative flex-1 overflow-hidden rounded-2xl transition-all duration-300 hover:scale-105 hover:rotate-x-12"
+          >
+            <div className="absolute inset-0 bg-gradient-to-r from-cyan-500 to-blue-500 animate-gradient-x" />
+            <div className="absolute inset-[1px] bg-gray-900 rounded-2xl" />
+            <div className="relative px-6 py-4 flex items-center justify-center">
+              <div className="absolute inset-0 bg-gradient-to-r from-cyan-500/20 to-blue-500/20 opacity-0 group-hover:opacity-100 transition-opacity" />
+              <span className="font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-400">
+              {t('new-button')}
+              </span>
+            </div>
+          </button>
+
+          {/* Share Button */}
+          <button
+            onClick={handleShare}
+            className="group relative flex-1 overflow-hidden rounded-2xl transition-all duration-300 hover:scale-105 hover:rotate-x-12"
+          >
+            <div className="absolute inset-0 bg-gradient-to-r from-blue-500 to-violet-500 animate-gradient-x" />
+            <div className="absolute inset-[1px] bg-gray-900 rounded-2xl" />
+            <div className="relative px-6 py-4 flex items-center justify-center">
+              <div className="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-violet-500/20 opacity-0 group-hover:opacity-100 transition-opacity" />
+              <span className="font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-violet-400">
+              {t('share-button')}
+              </span>
+            </div>
+          </button>
+
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default JokeCard;

demos/random-joke-generator/src/app/[locale]/[...rest]/page.tsx

@@ -0,0 +1,5 @@
+import { notFound } from 'next/navigation';
+
+export default function CatchAllPage() {
+  notFound();
+}

demos/random-joke-generator/src/app/[locale]/layout.tsx

@@ -0,0 +1,35 @@
+import { notFound } from 'next/navigation';
+import { ReactNode } from 'react';
+import { TolgeeNextProvider } from '@/tolgee/client';
+import { ALL_LOCALES, getStaticData } from '@/tolgee/shared';
+
+type Props = {
+  children: ReactNode;
+  params: { locale: string };
+};
+
+export default async function LocaleLayout({
+  children,
+  params: { locale },
+}: Props) {
+  if (!ALL_LOCALES.includes(locale)) {
+    notFound();
+  }
+
+  // it's important you provide all data which are needed for initial render
+  // so current locale and also fallback locales + necessary namespaces
+  const locales = await getStaticData([locale, 'en']);
+
+  return (
+    <html lang={locale}>
+      <body>
+        <TolgeeNextProvider locale={locale} locales={locales}>
+          {children}
+          <footer className="fixed bottom-0 left-0 right-0 bg-tranparent text-white py-4 text-center">
+            <p>Made by <a href="https://github.com/sanketshinde3001" target='blank' className='text-blue-400'>Sanket Shinde</a></p>
+          </footer>
+        </TolgeeNextProvider>
+      </body>
+    </html>
+  );
+}

demos/random-joke-generator/src/app/[locale]/page.tsx

@@ -0,0 +1,20 @@
+import { getTranslate } from '@/tolgee/server';
+import Jokes from './Joke';
+import { Navbar } from '@/components/Navbar';
+
+import 'react-toastify/dist/ReactToastify.css';
+
+export default async function IndexPage() {
+  const t = await getTranslate();
+
+  return (
+    <div className="bg-faint-cross-lines">
+      <div className="container mx-auto py-4">
+        <Navbar />
+        <div className="mt-20">
+          <Jokes />
+        </div>
+      </div>
+    </div>
+  );
+}

demos/random-joke-generator/src/app/layout.tsx

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import './style.css';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: "Random Joke Generator",
+  description: "Created by Sanket shinde",
+};
+
+type Props = {
+  children: ReactNode;
+};
+
+// Since we have a `not-found.tsx` page on the root, a layout file
+// is required, even if it's just passing children through.
+export default function RootLayout({ children }: Props) {
+  return children;
+}

demos/random-joke-generator/src/app/not-found.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import Error from 'next/error';
+
+// Render the default Next.js 404 page when a route
+// is requested that doesn't match the middleware and
+// therefore doesn't have a locale associated with it.
+
+export default function NotFound() {
+  return (
+    <html lang="en">
+      <body>
+        <Error statusCode={404} />
+      </body>
+    </html>
+  );
+}