feat: new embeds

Author: GalvinPython

README.md

@@ -1,12 +1,21 @@
 # SQLite Reader
+
 [A web app where you can view your SQLite database](https://sqlitereader.com)
 
 # Changelog
+
+## 25/03/2025
+
+- Added puppeteer script to generate embed images
+    - Storytime: MicroLink uses DigitialOcean for its services, however I had to block DigitalOcean as I was getting 1,000+ requests an hour sometimes trying to "exploit" wordpress stuff, so I just straight up blocked the ASN :p
+
 ## 18/03/2025
+
 - Added footer to site
 - Updated `sql.js` from 1.12 to 1.13
 
 ## 14/03/2025
+
 - Removed API/backend for parsing SQLite databases
 - Moved everything to local processing using `sql.js`
 - Added SQLite exports to the following languages

bun.lock

@@ -0,0 +1,22 @@
+import path from "path";
+
+import puppeteer from "puppeteer";
+
+(async () => {
+    const browser = await puppeteer.launch({ headless: false });
+    const page = await browser.newPage();
+
+    await page.goto("http://localhost:8010");
+    await page.setViewport({ width: 1920, height: 1080 });
+
+    await page.screenshot({
+        path: path.resolve(process.cwd(), "./public/screenshot_home.png"),
+    });
+
+    await page.goto("http://localhost:8010/convert");
+    await page.screenshot({
+        path: path.resolve(process.cwd(), "./public/screenshot_convert.png"),
+    });
+
+    await browser.close();
+})();

embed.ts

@@ -8,13 +8,15 @@
         "start": "next start --port 8010",
         "lint": "eslint . --ext .ts,.tsx -c .eslintrc.json",
         "lint:fix": "eslint . --ext .ts,.tsx -c .eslintrc.json --fix",
-        "updatesql": "cp ./node_modules/sql.js/dist/sql-wasm.wasm ./public/sql-wasm.wasm"
+        "updatesql": "cp ./node_modules/sql.js/dist/sql-wasm.wasm ./public/sql-wasm.wasm",
+        "embed": "bun embed.ts"
     },
     "dependencies": {
         "@million/lint": "^1.0.14",
         "bun-types": "^1.1.39",
         "jszip": "^3.10.1",
         "next": "15.2.3",
+        "puppeteer": "^24.4.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "react-icons": "^5.4.0",
@@ -29,6 +31,7 @@
         "@types/sql.js": "^1.4.9",
         "@typescript-eslint/eslint-plugin": "7.2.0",
         "@typescript-eslint/parser": "7.2.0",
+        "concurrently": "^9.1.2",
         "eslint": "^8.57.0",
         "eslint-config-next": "15.1.0",
         "eslint-config-prettier": "^8.2.0",

package.json

@@ -202,20 +202,14 @@ export default function Home() {
                 />
                 <meta content="website" property="og:type" />
                 <meta content="https://sqlitereader.com" property="og:url" />
-                <meta
-                    content="https://api.microlink.io/?url=https://sqlitereader.com/convert&amp;screenshot=true&amp;embed=screenshot.url&amp;overlay.browser=dark"
-                    property="og:image"
-                />
+                <meta content="./screenshot_convert.png" property="og:image" />
                 <meta content="summary_large_image" name="twitter:card" />
                 <meta content="SQLite Database Viewer" name="twitter:title" />
                 <meta
                     content="Easily convert and export your SQLite database to CSV, JSON, SQL, and more — right in your web browser! No downloads, no setup. Just upload your file, select a format, and export your data instantly, all for free!"
                     name="twitter:description"
                 />
-                <meta
-                    content="https://api.microlink.io/?url=https://sqlitereader.com/convert&amp;screenshot=true&amp;embed=screenshot.url&amp;overlay.browser=dark"
-                    name="twitter:image"
-                />
+                <meta content="./screenshot_convert.png" name="twitter:image" />
             </Head>
             <div style={{ color: "var(--text-color)" }}>
                 <Navbar />

pages/convert.tsx

@@ -179,20 +179,14 @@ export default function Home() {
                 />
                 <meta content="website" property="og:type" />
                 <meta content="https://sqlitereader.com" property="og:url" />
-                <meta
-                    content="https://api.microlink.io/?url=https://sqlitereader.com/&amp;screenshot=true&amp;embed=screenshot.url&amp;overlay.browser=dark"
-                    property="og:image"
-                />
+                <meta content="./screenshot_home.png" property="og:image" />
                 <meta content="summary_large_image" name="twitter:card" />
                 <meta content="SQLite Database Viewer" name="twitter:title" />
                 <meta
                     content="Need to inspect an SQLite database without hassle? Our free online viewer lets you upload and browse your data instantly—no downloads, no setup. Open, search, and analyze your database right in your web browser with ease!"
                     name="twitter:description"
                 />
-                <meta
-                    content="https://api.microlink.io/?url=https://sqlitereader.com/&amp;screenshot=true&amp;embed=screenshot.url&amp;overlay.browser=dark"
-                    name="twitter:image"
-                />
+                <meta content="./screenshot_home.png" name="twitter:image" />
             </Head>
             <div style={{ color: "var(--text-color)" }}>
                 <Navbar />

pages/index.tsx

@@ -1,13 +1,13 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
 <url>
 <loc>https://sqlitereader.com/</loc>
-<lastmod>2025-03-18T00:00:00.000Z</lastmod>
+<lastmod>2025-03-25T00:00:00.000Z</lastmod>
 <changefreq>daily</changefreq>
 <priority>1</priority>
 </url>
 <url>
 <loc>https://sqlitereader.com/convert</loc>
-<lastmod>2025-03-18T00:00:00.000Z</lastmod>
+<lastmod>2025-03-25T00:00:00.000Z</lastmod>
 <changefreq>daily</changefreq>
 <priority>1</priority>
 </url>