├── .vscode
    └── extensions.json
├── public
    ├── batname.png
    ├── favicon.ico
    ├── favicon-16x16.png
    ├── favicon-32x32.png
    ├── apple-touch-icon.png
    ├── android-chrome-192x192.png
    ├── android-chrome-512x512.png
    └── site.webmanifest
├── src
    ├── vite-env.d.ts
    ├── assets
    │   └── batman_logo_bg_1200.jpg
    ├── app.css
    ├── main.ts
    ├── lib
    │   ├── Disclaimer.svelte
    │   ├── DownloadErrorModal.svelte
    │   ├── EnterYourName.svelte
    │   └── BatCanvas.svelte
    └── App.svelte
├── README.md
├── tsconfig.node.json
├── vite.config.ts
├── svelte.config.js
├── tailwind.config.cjs
├── .gitignore
├── postcss.config.cjs
├── tsconfig.json
├── package.json
└── index.html


/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["svelte.svelte-vscode"]
3 | }
4 | 


--------------------------------------------------------------------------------
/public/batname.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shajidhasan/batname/HEAD/public/batname.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shajidhasan/batname/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="svelte" />
2 | /// <reference types="vite/client" />
3 | 


--------------------------------------------------------------------------------
/public/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shajidhasan/batname/HEAD/public/favicon-16x16.png


--------------------------------------------------------------------------------
/public/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shajidhasan/batname/HEAD/public/favicon-32x32.png


--------------------------------------------------------------------------------
/public/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shajidhasan/batname/HEAD/public/apple-touch-icon.png


--------------------------------------------------------------------------------
/public/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shajidhasan/batname/HEAD/public/android-chrome-192x192.png


--------------------------------------------------------------------------------
/public/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shajidhasan/batname/HEAD/public/android-chrome-512x512.png


--------------------------------------------------------------------------------
/src/assets/batman_logo_bg_1200.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shajidhasan/batname/HEAD/src/assets/batman_logo_bg_1200.jpg


--------------------------------------------------------------------------------
/src/app.css:
--------------------------------------------------------------------------------
1 | /* Write your global styles here, in PostCSS syntax */
2 | @tailwind base;
3 | @tailwind components;
4 | @tailwind utilities;
5 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # batname
2 | 
3 | This simple little app lets you generate logos like the "The Batman (2022)" film logo. Enjoy!
4 | 
5 | https://batname.vercel.app
6 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import "./app.css";
2 | import App from "./App.svelte";
3 | 
4 | const app = new App({
5 |   target: document.getElementById("app"),
6 | });
7 | 
8 | export default app;
9 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "composite": true,
4 |     "module": "esnext",
5 |     "moduleResolution": "node"
6 |   },
7 |   "include": ["vite.config.ts"]
8 | }
9 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import { svelte } from '@sveltejs/vite-plugin-svelte'
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [svelte()]
7 | })
8 | 


--------------------------------------------------------------------------------
/public/site.webmanifest:
--------------------------------------------------------------------------------
1 | {"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}


--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
 1 | import sveltePreprocess from "svelte-preprocess";
 2 | 
 3 | export default {
 4 |   // Consult https://github.com/sveltejs/svelte-preprocess
 5 |   // for more information about preprocessors
 6 |   preprocess: [
 7 |     sveltePreprocess({
 8 |       postcss: true,
 9 |     }),
10 |   ],
11 | };
12 | 


--------------------------------------------------------------------------------
/tailwind.config.cjs:
--------------------------------------------------------------------------------
 1 | const config = {
 2 |   content: ["./src/**/*.{html,js,svelte,ts}"],
 3 | 
 4 |   theme: {
 5 |     extend: {
 6 |       fontFamily: {
 7 |         sans: ['Anton', 'sans-serif'],
 8 |         bengali: ["'Baloo Da 2'"]
 9 |       }
10 |     },
11 |   },
12 | 
13 |   plugins: [require("@tailwindcss/forms")],
14 | };
15 | 
16 | module.exports = config;
17 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/postcss.config.cjs:
--------------------------------------------------------------------------------
 1 | const tailwindcss = require("tailwindcss");
 2 | const autoprefixer = require("autoprefixer");
 3 | 
 4 | const config = {
 5 |   plugins: [
 6 |     //Some plugins, like tailwindcss/nesting, need to run before Tailwind,
 7 |     tailwindcss(),
 8 |     //But others, like autoprefixer, need to run after,
 9 |     autoprefixer,
10 |   ],
11 | };
12 | 
13 | module.exports = config;
14 | 


--------------------------------------------------------------------------------
/src/lib/Disclaimer.svelte:
--------------------------------------------------------------------------------
 1 | <div class="space-y-2">
 2 |   <p class="text-sm text-red-600 uppercase">
 3 |     I do not own the rights to the "The Batman" logo. This is for educational
 4 |     and entertainment purposes only.
 5 |   </p>
 6 |   <a
 7 |     class="text-red-600 underline block text-center"
 8 |     href="https://github.com/shajidhasan/batname"
 9 |     target="_blank">GitHub</a
10 |   >
11 | </div>
12 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "@tsconfig/svelte/tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "target": "esnext",
 5 |     "useDefineForClassFields": true,
 6 |     "module": "esnext",
 7 |     "resolveJsonModule": true,
 8 |     "baseUrl": ".",
 9 |     /**
10 |      * Typecheck JS in `.svelte` and `.js` files by default.
11 |      * Disable checkJs if you'd like to use dynamic types in JS.
12 |      * Note that setting allowJs false does not prevent the use
13 |      * of JS in `.svelte` files.
14 |      */
15 |     "allowJs": true,
16 |     "checkJs": true
17 |   },
18 |   "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
19 |   "references": [{ "path": "./tsconfig.node.json" }]
20 | }
21 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "batname",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "preview": "vite preview",
10 |     "check": "svelte-check --tsconfig ./tsconfig.json"
11 |   },
12 |   "devDependencies": {
13 |     "@sveltejs/vite-plugin-svelte": "^1.0.0-next.30",
14 |     "@tailwindcss/forms": "^0.4.0",
15 |     "@tsconfig/svelte": "^2.0.1",
16 |     "autoprefixer": "^10.4.2",
17 |     "postcss": "^8.4.5",
18 |     "postcss-load-config": "^3.1.1",
19 |     "svelte": "^3.44.0",
20 |     "svelte-check": "^2.2.7",
21 |     "svelte-preprocess": "^4.10.1",
22 |     "tailwindcss": "^3.0.12",
23 |     "tslib": "^2.3.1",
24 |     "typescript": "^4.5.4",
25 |     "vite": "^2.8.0"
26 |   },
27 |   "dependencies": {
28 |     "file-saver": "^2.0.5"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/src/lib/DownloadErrorModal.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { createEventDispatcher } from "svelte";
 3 | 
 4 |   import { scale } from "svelte/transition";
 5 | 
 6 |   const dispatch = createEventDispatcher();
 7 | </script>
 8 | 
 9 | <div
10 |   transition:scale={{ start: 1.5 }}
11 |   class="bg-black fixed inset-0 flex flex-col items-center justify-center text-red-700 p-4"
12 | >
13 |   <div class="w-full sm:w-1/2 md:w-1/3">
14 |     <h1 class="text-3xl mb-10 w-full">Error encountered!</h1>
15 |     <p class="uppercase">
16 |       Couldn't download your logo, sorry. Are you in a Facebook/Messenger
17 |       embedded browser? Open this browser in the dedicated browser and try
18 |       again!
19 |     </p>
20 |     <button
21 |       class="float-right mt-10 px-8 py-2 bg-red-700 hover:bg-red-600 font-semibold text-red-100 rounded disabled:opacity-0 transition-opacity ease-in-out duration-300"
22 |       on:click={() => dispatch("close")}
23 |     >
24 |       Okay
25 |     </button>
26 |   </div>
27 | </div>
28 | 


--------------------------------------------------------------------------------
/src/lib/EnterYourName.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { scale } from "svelte/transition";
 3 |   import { createEventDispatcher } from "svelte";
 4 | 
 5 |   export let name: string;
 6 |   export let ref: any;
 7 | 
 8 |   const dispatch = createEventDispatcher();
 9 | </script>
10 | 
11 | <div
12 |   transition:scale={{ start: 1.5 }}
13 |   class="bg-black fixed inset-0 flex flex-col items-center justify-center text-red-700 p-4"
14 | >
15 |   <form
16 |     class="w-full sm:w-1/2 md:w-1/3"
17 |     on:submit|preventDefault={() => dispatch("submit", name)}
18 |   >
19 |     <h1 class="text-3xl mb-10 w-full uppercase">Enter your name</h1>
20 |     <input
21 |       type="text"
22 |       class="bg-transparent border-0 border-b-2 uppercase border-b-red-600 focus:ring-0 focus:border-b-red-600 text-center text-4xl w-full font-bold"
23 |       bind:value={name}
24 |       bind:this={ref}
25 |     />
26 | 
27 |     <button
28 |       class="float-right mt-10 px-8 py-2 bg-red-700 uppercase hover:bg-red-600 font-semibold text-red-100 rounded disabled:opacity-0 transition-opacity ease-in-out duration-300"
29 |       disabled={name ? false : true}
30 |       type="submit"
31 |     >
32 |       GO
33 |     </button>
34 |   </form>
35 |   <div class="font-bengali font-[800] opacity-0">স্বাগতম!</div>
36 | </div>
37 | 


--------------------------------------------------------------------------------
/src/App.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts" context="module">
 2 |   export interface BatData {
 3 |     name: null | string;
 4 |     isBengali: boolean;
 5 |   }
 6 | </script>
 7 | 
 8 | <script lang="ts">
 9 |   import { onMount } from "svelte";
10 |   import EnterYourName from "./lib/EnterYourName.svelte";
11 |   import BatCanvas from "./lib/BatCanvas.svelte";
12 |   import Disclaimer from "./lib/Disclaimer.svelte";
13 | 
14 |   let nameRef: any;
15 | 
16 |   let batData: BatData = {
17 |     name: null,
18 |     isBengali: false,
19 |   };
20 | 
21 |   let nameDialogOpen: boolean = true;
22 | 
23 |   onMount(() => {
24 |     nameRef.focus();
25 |   });
26 | 
27 |   const isBengali = (name: string) => {
28 |     for (let c of name) {
29 |       if (/^[\u0980-\u09ff]+$/.test(c)) {
30 |         return true;
31 |       }
32 |     }
33 |     return false;
34 |   };
35 | 
36 |   const nameSubmit = (event: { detail: string }) => {
37 |     batData = {
38 |       name: event.detail.toUpperCase(),
39 |       isBengali: isBengali(event.detail),
40 |     };
41 |     console.log(batData);
42 |     nameDialogOpen = false;
43 |   };
44 | </script>
45 | 
46 | <main
47 |   class="min-h-screen bg-black text-white/80 flex flex-col items-center justify-center p-4 space-y-4 selection:text-red-100 selection:bg-red-700"
48 | >
49 |   <BatCanvas
50 |     {batData}
51 |     on:edit={() => {
52 |       nameDialogOpen = true;
53 |     }}
54 |     class="w-full md:max-w-lg lg:max-w-xl rounded-lg ring-2 ring-red-800/50"
55 |   />
56 |   <Disclaimer />
57 | 
58 |   {#if nameDialogOpen}
59 |     <EnterYourName
60 |       name={batData.name}
61 |       on:submit={nameSubmit}
62 |       bind:ref={nameRef}
63 |     />
64 |   {/if}
65 | </main>
66 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8" />
 6 |   <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
 7 |   <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
 8 |   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
 9 |   <link rel="manifest" href="/site.webmanifest">
10 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
11 |   <link rel="preconnect" href="https://fonts.googleapis.com">
12 |   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13 |   <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&display=swap" rel="stylesheet">
14 |   <link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
15 | 
16 |   <title>Batname - Generate Batman Logos</title>
17 | 
18 |   <meta name="title" content="Batname - Generate Batman Logos">
19 |   <meta name="description" content="Batname allows you to generate logos that look like The Batman (2022) film logo.">
20 |   <meta name="keywords" content="batman,batman logo generator,batman logo">
21 |   <meta name="robots" content="index, follow">
22 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
23 |   <meta name="language" content="English">
24 | 
25 |   <meta property="og:title" content="Batname - Generate Batman Logos">
26 |   <meta property="og:site_name" content="Batname">
27 |   <meta property="og:url" content="https://batname.vercel.app">
28 |   <meta property="og:description"
29 |     content="Batname allows you to generate logos that look like The Batman (2022) film logo. Enjoy!">
30 |   <meta property="og:type" content="website">
31 |   <meta property="og:image" content="/batname.png">
32 | 
33 | </head>
34 | 
35 | <body>
36 |   <div id="app"></div>
37 |   <script type="module" src="/src/main.ts"></script>
38 | </body>
39 | 
40 | </html>


--------------------------------------------------------------------------------
/src/lib/BatCanvas.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 |   import { createEventDispatcher, onMount } from "svelte";
  3 |   import { saveAs } from "file-saver";
  4 | 
  5 |   import type { BatData } from "../App.svelte";
  6 | 
  7 |   import batmanBg from "../assets/batman_logo_bg_1200.jpg";
  8 |   import DownloadErrorModal from "./DownloadErrorModal.svelte";
  9 | 
 10 |   export let batData: BatData;
 11 | 
 12 |   const SCALE = 0.5;
 13 |   const ELONGATE = 1.2;
 14 |   const MAX_TEXT_SCALE = 8.0;
 15 | 
 16 |   let canvas: HTMLCanvasElement;
 17 |   let context: CanvasRenderingContext2D;
 18 |   let downloadError: boolean = false;
 19 | 
 20 |   const backgroundImage = new Image();
 21 |   backgroundImage.src = batmanBg;
 22 | 
 23 |   const dispatch = createEventDispatcher();
 24 | 
 25 |   const resetCanvas = () => {
 26 |     resetScale();
 27 |     context.clearRect(0, 0, canvas.width, canvas.height);
 28 |     context.globalCompositeOperation = "source-over";
 29 |   };
 30 | 
 31 |   const resetScale = () => {
 32 |     context.setTransform(1, 0, 0, 1, 0, 0);
 33 |   };
 34 | 
 35 |   const generate = () => {
 36 |     resetCanvas();
 37 | 
 38 |     context.scale(SCALE, SCALE);
 39 |     context.drawImage(
 40 |       backgroundImage,
 41 |       (canvas.width - backgroundImage.width * SCALE) / 2 / SCALE,
 42 |       (canvas.height - backgroundImage.height * SCALE) / 2 / SCALE
 43 |     );
 44 | 
 45 |     context.globalCompositeOperation = "destination-in";
 46 | 
 47 |     resetScale();
 48 | 
 49 |     context.font = batData.isBengali
 50 |       ? "800 25px 'Baloo Da 2'"
 51 |       : "25px 'Anton'";
 52 | 
 53 |     const measurement = context.measureText(batData.name);
 54 |     const textScale = Math.min(
 55 |       (SCALE * canvas.width) / measurement.width,
 56 |       MAX_TEXT_SCALE
 57 |     );
 58 |     console.log(textScale);
 59 |     context.scale(textScale, textScale * ELONGATE);
 60 |     context.fillStyle = "white";
 61 |     context.fillText(
 62 |       batData.name,
 63 |       (canvas.width - measurement.width * textScale) / 2 / textScale,
 64 |       (canvas.height +
 65 |         measurement.actualBoundingBoxAscent * textScale * ELONGATE +
 66 |         (batData.isBengali
 67 |           ? 0
 68 |           : measurement.actualBoundingBoxDescent * textScale * ELONGATE)) /
 69 |         2 /
 70 |         textScale /
 71 |         ELONGATE
 72 |     );
 73 |     resetScale();
 74 |     context.globalCompositeOperation = "destination-over";
 75 |     context.fillStyle = "black";
 76 |     context.fillRect(0, 0, canvas.width, canvas.height);
 77 |   };
 78 | 
 79 |   const editName = () => {
 80 |     dispatch("edit");
 81 |   };
 82 | 
 83 |   const download = () => {
 84 |     try {
 85 |       canvas.toBlob((blob) => {
 86 |         saveAs(blob, `${batData.name}.png`);
 87 |       });
 88 |     } catch (exception) {
 89 |       downloadError = true;
 90 |     }
 91 |   };
 92 | 
 93 |   onMount(() => {
 94 |     context = canvas.getContext("2d");
 95 |   });
 96 | 
 97 |   $: {
 98 |     if (context && batData.name) {
 99 |       generate();
100 |     }
101 |   }
102 | </script>
103 | 
104 | <div class="relative">
105 |   <div class="absolute right-0 top-0">
106 |     <button class="canvas-button" on:click={editName}>
107 |       <svg
108 |         xmlns="http://www.w3.org/2000/svg"
109 |         class="h-5 w-5"
110 |         viewBox="0 0 20 20"
111 |         fill="currentColor"
112 |       >
113 |         <path
114 |           d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
115 |         />
116 |       </svg>
117 |     </button>
118 |     <button class="canvas-button" on:click={download}
119 |       ><svg
120 |         xmlns="http://www.w3.org/2000/svg"
121 |         class="h-5 w-5"
122 |         viewBox="0 0 20 20"
123 |         fill="currentColor"
124 |       >
125 |         <path
126 |           fill-rule="evenodd"
127 |           d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
128 |           clip-rule="evenodd"
129 |         />
130 |       </svg>
131 |     </button>
132 |   </div>
133 | 
134 |   <canvas bind:this={canvas} height="800" width="1200" class={$$props.class} />
135 | </div>
136 | 
137 | {#if downloadError}
138 |   <DownloadErrorModal
139 |     on:close={() => {
140 |       downloadError = false;
141 |     }}
142 |   />
143 | {/if}
144 | 
145 | <style lang="postcss">
146 |   .canvas-button {
147 |     @apply p-2 text-sm font-semibold text-red-100 bg-red-700 hover:bg-red-600 rounded-lg;
148 |   }
149 | </style>
150 | 


--------------------------------------------------------------------------------