feat: initial

.babelrc

@@ -0,0 +1,10 @@
+{
+  "presets": [
+    // "@babel/preset-env"
+    "@babel/preset-react"
+    // "react-app"
+  ],
+  "plugins": [
+    // "@babel/plugin-proposal-class-properties",
+  ]
+}

.eslintrc

@@ -0,0 +1,6 @@
+{
+  "extends": "react-app",
+  "globals": {
+    "chrome": "readonly"
+  }
+}

.gitignore

@@ -0,0 +1,24 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# zip
+/zip
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.history
+
+# secrets
+secrets.*.js

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "requirePragma": false,
+  "arrowParens": "always"
+}

.release-it.json

@@ -0,0 +1,5 @@
+{
+  "github": {
+    "release": true
+  }
+}

commitlint.config.js

@@ -0,0 +1 @@
+module.exports = {extends: ['@commitlint/config-conventional']};

package.json

@@ -0,0 +1,94 @@
+{
+  "name": "tweet-for-dev",
+  "version": "1.0.0",
+  "description": "A Chrome extension that enhances tweets by adding code syntax highlighting, ChatGPT to explain it, and enabling markdown formatting.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/hadnet/.git"
+  },
+  "scripts": {
+    "build::zip": "node utils/build.js",
+    "build": "webpack --watch --progress --config webpack.prod.js",
+    "start": "webpack --watch --progress --config webpack.dev.js",
+    "prettier": "prettier --write '**/*.{js,jsx,ts,tsx,json,css,scss,md}'",
+    "release": "release-it"
+  },
+  "dependencies": {
+    "hast-util-to-html": "^8.0.4",
+    "highlight.js": "^11.7.0",
+    "lowlight": "^2.8.1",
+    "marked": "^4.2.12",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "shiki": "^0.14.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.12",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@commitlint/cli": "^17.5.0",
+    "@commitlint/config-conventional": "^17.4.4",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
+    "@types/chrome": "^0.0.202",
+    "@types/marked": "^4.0.8",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^9.1.2",
+    "babel-preset-react-app": "^10.0.1",
+    "clean-webpack-plugin": "^4.0.0",
+    "commitizen": "^4.3.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.7.3",
+    "cz-conventional-changelog": "^3.3.0",
+    "eslint": "^8.31.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-flowtype": "^8.0.3",
+    "eslint-plugin-import": "^2.27.4",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.32.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "file-loader": "^6.2.0",
+    "fs-extra": "^11.1.0",
+    "html-loader": "^4.2.0",
+    "html-webpack-plugin": "^5.5.0",
+    "husky": "4.3.6",
+    "lint-staged": "^13.2.0",
+    "prettier": "^2.8.3",
+    "react-refresh": "^0.14.0",
+    "react-refresh-typescript": "^2.0.7",
+    "release-it": "^15.9.3",
+    "sass": "^1.57.1",
+    "sass-loader": "^13.2.0",
+    "source-map-loader": "^3.0.1",
+    "style-loader": "^3.3.1",
+    "terser-webpack-plugin": "^5.3.6",
+    "ts-loader": "^9.4.2",
+    "type-fest": "^3.5.2",
+    "typescript": "^4.9.4",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1",
+    "webpack-merge": "^5.8.0",
+    "zip-webpack-plugin": "^4.0.1"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged",
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
+      "prepare-commit-msg": "exec < /dev/tty && git cz --hook || true"
+    }
+  },
+  "lint-staged": {
+    "*.{ts,tsx,json}": [
+      "prettier --write"
+    ]
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  }
+}

src/pages/Background/index.ts

@@ -0,0 +1,84 @@
+import { nonNullable } from '../../utils';
+import { Actions, type Action, type OpenaiResponse } from '../../types';
+
+let isDark: boolean;
+
+function setCSSTheme(isDark: boolean, tabId: number | undefined) {
+  nonNullable(tabId);
+  if (isDark) {
+    chrome.scripting.insertCSS(
+      {
+        files: ['a11y-dark.css'],
+        target: {
+          tabId,
+        },
+      },
+      () => {
+        console.log('Dark CSS inserted');
+      }
+    );
+    chrome.scripting.removeCSS({
+      files: ['a11y-light.css'],
+      target: {
+        tabId,
+      },
+    });
+  } else {
+    chrome.scripting.insertCSS(
+      {
+        files: ['a11y-light.css'],
+        target: {
+          tabId,
+        },
+      },
+      () => {
+        console.log('Light CSS inserted');
+      }
+    );
+    chrome.scripting.removeCSS({
+      files: ['a11y-dark.css'],
+      target: {
+        tabId,
+      },
+    });
+  }
+}
+
+chrome.runtime.onMessage.addListener(
+  (message: Action, sender, sendResponse) => {
+    switch (message.action) {
+      case Actions.fetchOpenAi:
+        //INFO: cant use async/await here because onMessage doesnt work properly with `await`
+        fetch('https://openai-api.hadnet.workers.dev/?action=explain-code', {
+          method: 'POST',
+          body: JSON.stringify({ code: message.payload?.code }),
+          headers: {
+            'Content-Type': 'application/json; charset=utf-8',
+          },
+        })
+          .then((response) => response.json())
+          .then((data: OpenaiResponse) => {
+            sendResponse(data);
+          })
+          .catch((e) => console.log('Error', e));
+        break;
+      case Actions.copyToClipboard:
+        chrome.notifications.create(
+          {
+            type: 'basic',
+            title: 'Copied!',
+            message: 'The code snippet was copied to your clipboard',
+            iconUrl: 'icon-128.png',
+          },
+          () => console.log('notification created')
+        );
+        break;
+      default:
+        if (sender.url?.includes('https://twitter.com')) {
+          isDark = message.payload?.isDark;
+          setCSSTheme(isDark, sender.tab?.id);
+        }
+    }
+    return true;
+  }
+);