Add Ko-fi ad, can be disabled

README.md

@@ -36,6 +36,10 @@ You can use Docker (instructions below), or simply host the website on a static
 
 First, install dependencies with `npm install` and then build the app with `npm run build`. Simple as that! The application is in the `dist` directory.
 
+### Ko-fi advert
+
+By default, the default post shows a link to my Ko-fi profile. If you want to disable it, you can customize the defaultPost in `src/config.ts`, or set environment value `VITE_HIDE_DEVELOPER_KOFI_AD` to false. I appreciate if you decide to keep it.
+
 ## Building with docker
 
 You can use docker for deploying a production ready instance of Mastopoet.

package.json

@@ -19,6 +19,7 @@
     "@ronilaukkarinen/stylelint-a11y": "^1.2.7",
     "@ronilaukkarinen/stylelint-declaration-strict-value": "^1.9.2",
     "@ronilaukkarinen/stylelint-value-no-unknown-custom-properties": "^4.0.1",
+    "@types/node": "^20.4.5",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.0.0",

src/App.tsx

@@ -140,7 +140,10 @@ function App() {
           width={width}
         />
       )}
-      <div className="flex-center button-grid" style={{ marginBottom: "2rem" }}>
+      <div
+        className="flex-center button-grid"
+        style={{ marginBottom: "0.5rem" }}
+      >
         {post && (
           <>
             <button className="render-button" onClick={exportImage}>

src/config.ts

@@ -38,6 +38,9 @@ export const welcomePost: Post = {
   comments: 0,
   favourites: 0,
   date: new Date(1690503611282),
-  content:
-    '<p>Hello and welcome to <a href="https://mementomori.social/tags/Mastopoet" class="mention hashtag" rel="tag">#<span>Mastopoet</span></a> !<br />Paste a Mastodon post URL in the field above and play with the options to create perfect screenshots!</p><p>Source code (licensed under MIT) -&gt; <a href="https://github.com/raikasdev/mastopoet" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="">github.com/raikasdev/mastopoet</span><span class="invisible"></span></a><br />Reach out to me -&gt; <a href="https://mementomori.social/@raikas" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="">mementomori.social/@raikas</span><span class="invisible"></span></a></p>',
+  content: `<p>Hello and welcome to <a href="https://mementomori.social/tags/Mastopoet" class="mention hashtag" rel="tag">#<span>Mastopoet</span></a> !<br />Paste a Mastodon post URL in the field above and play with the options to create perfect screenshots!</p><p>Source code (licensed under MIT) -&gt; <a href="https://github.com/raikasdev/mastopoet" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="">github.com/raikasdev/mastopoet</span><span class="invisible"></span></a><br />Reach out to me -&gt; <a href="https://mementomori.social/@raikas" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="">mementomori.social/@raikas</span><span class="invisible"></span></a>${
+    import.meta.env.VITE_HIDE_DEVELOPER_KOFI_AD === "true"
+      ? ""
+      : '<br /><br />If you enjoy Mastopoet, consider buying me a coffee ☕<br />at <a href="https://ko-fi.com/raikasdev" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="">ko-fi.com/raikasdev</span></a>, I would really appreciate it ❤️!</p>'
+  }`,
 };

vite.config.ts

@@ -1,9 +1,7 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
 import stylelint from "vite-plugin-stylelint";
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import { execSync } from "child_process"; // A node library, safe to ignore
+import { execSync } from "child_process";
 
 const commitHash = execSync("git rev-parse --short HEAD").toString().trim();