🐛 Fixed the logo position and the meta build script

.gitignore

@@ -4,6 +4,7 @@
 # Dist dir
 dist/*.html
 dist/*.bundle.js
+dist/*.txt
 
 # npm modules
 node_modules

dist/InstagramGetter.meta.js

@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         InstagramGetter
 // @namespace    http://joaocarmo.com/
-// @version      1.0.1
+// @version      1.0.2
 // @description  Instagram post image and video getter
 // @source       https://github.com/joaocarmo/instagram-getter
 // @updateURL    https://raw.githubusercontent.com/joaocarmo/instagram-getter/master/dist/InstagramGetter.meta.js

lib/components/instagram-getter.jsx

@@ -4,6 +4,8 @@ import Worker from './worker'
 import Logo from '../img/plus-getter.svg'
 import { debugPrint } from '../utils'
 
+const distanceFromLogo = '125px'
+
 const AppContainer = styled.div`
   z-index: 1000;
 
@@ -16,11 +18,11 @@ const AppLogoContainer = styled.div`
   opacity: ${({ isHidden }) => (isHidden ? 0 : 1)};
   position: fixed;
   top: ${({ isHidden }) => (isHidden ? '15px' : '20px')};
-  left: calc(50vw - 975px / 2 + 175px);
+  left: calc(50vw - 975px / 2 + ${distanceFromLogo});
   transition: all 0.2s ease-in 0.05s;
 
   @media (max-width: 1000px) {
-    left: 175px;
+    left: ${distanceFromLogo};
   }
 `
 

package.json

@@ -1,21 +1,22 @@
 {
   "name": "instagram-getter",
   "publicName": "InstagramGetter",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Instagram post image and video getter",
   "browser": "./dist/InstagramGetter.user.js",
   "private": true,
   "scripts": {
-    "lint": "eslint lib/**/*.js lib/**/*.jsx",
-    "start": "NODE_ENV=development webpack-dev-server --mode=development --color",
-    "test": ">&2 echo \"ERROR: no test(s) specified\" && exit 1",
+    "append-meta": "(cat ./dist/InstagramGetter.meta.js && cat ./dist/InstagramGetter.bundle.js) > ./dist/InstagramGetter.user.js",
     "build-bundle:dev": "NODE_ENV=development webpack --mode=development",
     "build-bundle": "NODE_ENV=production webpack --mode=production",
     "build-meta": "./scripts/setup-meta.js",
-    "append-meta": "(cat ./dist/InstagramGetter.meta.js && cat ./dist/InstagramGetter.bundle.js) > ./dist/InstagramGetter.user.js",
-    "build:dev": "npm run build-bundle:dev && npm run build-meta && npm run append-meta",
-    "build": "npm run build-bundle && npm run build-meta && npm run append-meta",
-    "clean": "rm -rf ./dist"
+    "build:dev": "yarn build-bundle:dev && yarn build-meta && yarn append-meta",
+    "build": "yarn build-bundle && yarn build-meta && yarn append-meta",
+    "clean": "rm -rf ./dist/*",
+    "lint": "eslint lib/**/*.js lib/**/*.jsx",
+    "push": "git add . && gitmoji -c",
+    "start": "NODE_ENV=development webpack-dev-server --mode=development --color",
+    "test": ">&2 echo \"ERROR: no test(s) specified\" && exit 1"
   },
   "repository": {
     "type": "git",
@@ -55,9 +56,9 @@
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-styled-components": "^1.10.7",
-    "copy-webpack-plugin": "^6.0.2",
+    "copy-webpack-plugin": "^7.0.0",
     "core-js": "^3.6.4",
-    "dotenv-webpack": "^1.7.0",
+    "dotenv-webpack": "^6.0.0",
     "eslint": "^7.2.0",
     "eslint-config-airbnb": "^18.1.0",
     "eslint-import-resolver-alias": "^1.1.2",
@@ -69,8 +70,8 @@
     "eslint-plugin-react-hooks": "^4.0.4",
     "html-webpack-plugin": "^4.0.2",
     "react-svg-loader": "^3.0.3",
-    "webpack": "^4.42.1",
-    "webpack-cli": "^3.3.11",
+    "webpack": "^5.10.0",
+    "webpack-cli": "^4.2.0",
     "webpack-dev-server": "^3.10.3"
   },
   "browserslist": {

scripts/setup-meta.js

@@ -16,12 +16,13 @@ const replacements = [
   ['{{VERSION}}', version],
 ]
 
+const template = path.join(__dirname, '..', 'lib', 'template.meta.js')
 const fileName = `${publicName}.meta.js`
 const metaFile = path.join(__dirname, '..', 'dist', fileName)
 
 async function main() {
-  if (fs.existsSync(metaFile)) {
-    let fileContents = fs.readFileSync(metaFile, 'utf8')
+  if (fs.existsSync(template)) {
+    let fileContents = fs.readFileSync(template, 'utf8')
     for (const replacement of replacements) {
       const [placeholder, value] = replacement
       fileContents = fileContents.replace(placeholder, value)