Merge pull request #26 from depatchedmode/v0.8.2

v0.8.2

.eslintrc

@@ -0,0 +1,12 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "env": {
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ]
+}

.gitignore

@@ -14,11 +14,14 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
+*.js
+
 # sharp issue: https://sharp.pixelplumbing.com/install#cross-platform
 package-lock.json 
 
 node_modules
 dist
+built
 dist-ssr
 *.local
 

api/index.js → api/index.ts

@@ -1,11 +1,11 @@
-import { getFrameMessage } from "frames.js"
-import landingPage from '../src/landing-page';
-import { parseRequest, objectToURLSearchParams } from '../modules/utils';
-import buildButtons from '../modules/buildButtons';
-import buildInputs from '../modules/buildInputs';
-import getTargetFrame from '../modules/getTargetFrame';
+import { getFrameMessage } from "frames.js";
+import landingPage from '../src/landing-page.js';
+import { parseRequest, objectToURLSearchParams } from '../modules/utils.js';
+import buildButtons from '../modules/buildButtons.js';
+import buildInputs from '../modules/buildInputs.js';
+import getTargetFrame from '../modules/getTargetFrame.js';
 
-export default async (req, context) => {
+export default async (req) => {
     try {
         const requestURL = new URL(req.url);
         const payload = await parseRequest(req);
@@ -40,14 +40,15 @@ const respondWithRedirect = (redirectURL) => {
         {
             status: 302,
             headers: { 
-                'Location': internalRedirectURL,
+                'Location': internalRedirectURL.toString(),
             },
         }
     );
 }
 
 const respondWithFrame = async (targetFrame, frameMessage) => {
     const searchParams = {
+        t: new Date().valueOf(),
         targetFrameName: targetFrame.name, 
         frameMessage
     }

api/og-image.js → api/og-image.ts

@@ -1,22 +1,22 @@
 import satori from "satori";
 import sharp from "sharp";
 import { html } from "satori-html";
-import fonts from "../src/fonts";
-import frames from "../src/frames";
-import { URLSearchParamsToObject } from '../modules/utils';
+import fonts from "../src/fonts.js";
+import frames from "../src/frames/index.js";
+import { URLSearchParamsToObject } from '../modules/utils.js';
 
-export default async (req, context) => {
+export default async (req) => {
     const url = new URL(req.url);
     const params = URLSearchParamsToObject(url.searchParams);
-    const targetFrame = frames[params.targetFrameName];
-    const markup = await targetFrame.build(params.frameMessage);
+    const targetFrame = frames[params['targetFrameName']];
+    const markup = await targetFrame.build(params['frameMessage']);
 
     const svg = await satori(
         html(markup), 
         {
             width: 1200,
             height: 630,
-            fonts
+            fonts: fonts,
         }
     );
     const svgBuffer = Buffer.from(svg);

modules/antitheft.js → modules/antitheft.ts

@@ -1,10 +1,9 @@
 import { getStore } from '@netlify/blobs';
-import frame from '../api/frame';
 
 // Utility functions to abstract the fetching and setting operations
 const fetchData = async (key) => {
     const store = getStore('antiTheft');
-    let data = await store.get(key, 'json') || [];
+    let data = await store.get(key, { type: 'json' } ) || [];
     if (!data.length) {
         data = process.env[key] ? JSON.parse(process.env[key]) : [];
     }
@@ -25,15 +24,15 @@ const setBoundCasts = (castHashes) => setData('BOUND_CAST_HASHES', castHashes);
 
 // Modified functions to use the updated getters and setters
 const addToList = async (getter, setter, item) => {
-    let list = await getter();
+    const list = await getter();
     if (!list.includes(item)) {
         list.push(item);
         await setter(list);
     }
 };
 
 const removeFromList = async (getter, setter, item) => {
-    let list = await getter();
+    const list = await getter();
     const index = list.indexOf(item);
     if (index > -1) {
         list.splice(index, 1);
@@ -52,10 +51,8 @@ const removeBoundCast = (castHash) => removeFromList(getBoundCasts, setBoundCast
 // 2. The castHash is in boundCasts.
 // 3. Both boundCasts & boundAccounts are empty.
 const isFrameStolen = async (frameMessage) => {
-    console.log('isFrameStolen', frameMessage);
     const { castId, requestURL } = frameMessage;
     if (!castId || !requestURL) {
-        console.log('isFrameStolen:quickExit', castId, requestURL);
         return false;
     }
 
@@ -67,11 +64,23 @@ const isFrameStolen = async (frameMessage) => {
     const isCastAllowed = boundCasts.includes(castHash) || boundCasts.length === 0;
     const isFirstParty = requestURL ? requestURL.indexOf(process.env.URL) > -1 : true;
 
-    console.log('isAuthorAllowed', isAuthorAllowed, castAuthorID, boundAccounts);
-    console.log('isCastAllowed', isCastAllowed, castHash, boundCasts);
-    console.log('isFirstParty', isFirstParty);
+    const isStolen = !isFirstParty || !isAuthorAllowed || !isCastAllowed;
 
-    return !isFirstParty || !isAuthorAllowed || !isCastAllowed;
+    // record the theft
+    if (isStolen) {
+        const store = getStore('stolenFrames');
+        const stolenFrame = await store.get(castHash, { type: 'json' }) || {
+            castHash,
+            castAuthorID,
+            views: 0,
+            firstView: new Date().toUTCString(),
+        };
+        stolenFrame.view++;
+        stolenFrame.lastView = new Date().toUTCString();
+        store.setJSON(castHash, stolenFrame);
+    }
+
+    return isStolen;
 };
 
 export {

modules/buildInputs.js → modules/buildInputs.ts

@@ -1,8 +1,8 @@
-import buildTextInput from "./buildTextInput";
+import buildTextInput from "./buildTextInput.js";
 
 export default (inputs) => {
     return inputs
-        .map((input, index) => {
+        .map((input) => {
             switch (input.type) {
                 case 'text':
                     return buildTextInput(input);

modules/getTargetFrame.js → modules/getTargetFrame.ts

@@ -1,6 +1,6 @@
 const DEFAULT_FRAME = 'poster';
-import frames from '../src/frames';
-import { isFrameStolen } from './antitheft';
+import frames from '../src/frames/index.js';
+import { isFrameStolen } from './antitheft.js';
 
 export default async (frameMessage) => {
     const frameIsStolen = await isFrameStolen(frameMessage);

modules/utils.js → modules/utils.ts

@@ -53,6 +53,7 @@ const URLSearchParamsToObject = (searchParams) => {
     const obj = {};
 
     for (const [key, value] of searchParams.entries()) {
+        // eslint-disable-next-line no-useless-escape
         const keys = key.split(/[\[\]]/g).filter(k => k);
         let currentObj = obj;
 
@@ -81,7 +82,7 @@ const URLSearchParamsToObject = (searchParams) => {
 
 const loadFont = async (fileName) => {
     try {
-        const filePath = path.join(__dirname, '../src', 'fonts', fileName);
+        const filePath = path.join(__dirname, '../../public', 'fonts', fileName);
         const fontData = await fs.readFile(filePath);
         return fontData;
     } catch (error) {

netlify.toml

@@ -1,8 +1,8 @@
 [build]
-  functions = "/api"
-  publish = "/public"
+  publish = "public/"
 
 [functions]
+  directory = "api/"
   node_bundler = "esbuild"
   external_node_modules = ["sharp"]
   included_files = ["node_modules/sharp/**/*"]

package.json

@@ -1,14 +1,24 @@
 {
   "name": "simplest-frame",
   "type": "module",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "dependencies": {
     "@netlify/blobs": "^6.4.2",
     "dompurify": "^3.0.8",
-    "frames.js": "^0.1.1",
+    "frames.js": "^0.5.0",
     "jsdom": "^24.0.0",
-    "satori": "^0.10.11",
+    "satori": "^0.10.13",
     "satori-html": "^0.3.2",
     "sharp": "^0.32.6"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.17",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "prettier": "^3.2.5",
+    "typescript": "^5.3.3"
   }
 }

src/data/cast.js → src/data/cast.ts

@@ -1,4 +1,4 @@
-import { streamToString } from '../../modules/utils';
+import { streamToString } from '../../modules/utils.js';
 
 const getCast = async(castHash) => {
     const request = await fetch(`https://protocol.wield.co/farcaster/v2/cast?hash=${castHash}`, {

src/data/framer.js → src/data/framer.ts

@@ -1,6 +1,6 @@
 import { getStore } from '@netlify/blobs';
-import { getUsername } from './username';
-import sanitize from '../../modules/sanitize';
+import { getUsername } from './username.js';
+import sanitize from '../../modules/sanitize.js';
 
 const getFramer = async() => {
     const store = getStore('gameState');

src/data/username.js → src/data/username.ts

@@ -1,4 +1,4 @@
-import { streamToString } from '../../modules/utils';
+import { streamToString } from '../../modules/utils.js';
 
 const getUsername = async(fid) => {
     const request = await fetch(`https://protocol.wield.co/farcaster/v2/user?fid=${fid}`, {

src/fonts.ts

@@ -0,0 +1,19 @@
+import { Font, FontStyle, FontWeight } from 'satori';
+import { loadFont } from '../modules/utils.js';
+
+const fonts: Font[] = [
+    {
+        name: 'Redaction',
+        data: await loadFont('Redaction-Regular.otf'),
+        weight: 400 as FontWeight, // Explicitly casting as Weight type
+        style: 'normal' as FontStyle, // Explicitly casting as FontStyle type
+    },
+    {
+        name: 'Redaction-100',
+        data: await loadFont('Redaction100-Regular.otf'),
+        weight: 400 as FontWeight, // Explicitly casting as Weight type
+        style: 'normal' as FontStyle, // Explicitly casting as FontStyle type
+    }
+];
+
+export default fonts;

src/frames/count.js → src/frames/count.ts

@@ -1,6 +1,6 @@
-import mainLayout from '../layouts/main';
-import { getFramer, setFramer } from '../data/framer';
-import { getCount, incrementCount } from '../data/count';
+import mainLayout from '../layouts/main.js';
+import { getFramer, setFramer } from '../data/framer.js';
+import { getCount, incrementCount } from '../data/count.js';
 
 const build = async (frameMessage) => {
     let count = await getCount();
@@ -11,10 +11,9 @@ const build = async (frameMessage) => {
         await setFramer(frameMessage.requesterFid, tauntInput);
     }
 
-    const { username, taunt } = await getFramer() || '';
+    const { username, taunt } = await getFramer() || {};
 
-    let tauntOutput;
-    tauntOutput = taunt ? `
+    const tauntOutput = taunt ? `
         <div style="font-size: 2em; line-height: 1.3; color: #cacaca; margin-top: 1em; padding: 0 2rem; text-align: center;">
             "${taunt}"
         </div>
@@ -23,8 +22,8 @@ const build = async (frameMessage) => {
     const html = String.raw;
     const frameHTML = html`
         <fc-frame>
-            <div style="font-size: 5em;">
-                i've been framed ${count || 0} times
+            <div style="display: flex; gap: 1rem; font-size: 5em;">
+                i've been framed <span style="font-family:'Redaction-100'">${count || 0}</span> times
             </div>
             <div style="font-size: 2em; margin-top: 1em">
                 last framed by @${username || ''}

src/frames/index.ts

@@ -0,0 +1,11 @@
+import poster from "./poster.js";
+import count from "./count.js";
+import credits from "./credits.js";
+import stolen from "./stolen.js";
+
+export default {
+    count,
+    poster,
+    credits,
+    stolen,
+}

src/frames/poster.js → src/frames/poster.ts

@@ -1,4 +1,3 @@
-const html = String.raw;
 export default {
     name: 'poster',
     image: `/images/poster-animated.gif`,