v1.0.1: Flip control, upgrade dependencies and pipelines

.github/workflows/artifacts-zip.yml

@@ -45,6 +45,7 @@ jobs:
       - run: rm -rf node_modules
       - run: npm install --production
       - run: echo $(jq 'del(.background)' manifest.json) > manifest.json
+      - run: echo $(jq 'del(.action)' manifest.json) > manifest.json
       - run: echo $(jq -s 'reduce .[] as $item ({}; . * $item)' manifest.json part.firefox.json) > manifest.json
       - run: rm -rf assets && rm -rf .github && rm -rf .git && rm .gitignore package-lock.json package.json part.edge.json part.firefox.json CHANGELOG.md styles/main.css styles/main.css.map styles/main.scss
 

CHANGELOG.md

@@ -21,10 +21,17 @@
 - [x] Convert to `fetch` rather than `XMLHttpRequest` (see #4)
 - [x] Ensure the tooltip does not disappear when clicking within the tooltip itself but is removed when user clicks outside of the tooltip
 
-## v1.0.0 :raised_hands: (release)
+## v1.0.0
 - [x] Icon for right-click menu bar
 - [x] Icon for store
+
+## v.1.0.1 (current)
 - [x] Screenshots
+- [x] Gifs
 - [x] Description
 - [x] Better README
-
+- [x] Official Web page
+- [x] Automatic dark/light theme based in user preferences
+- [x] Flip tooltip depending on selection in screen
+- [x] Code cleanup
+- [x] Improved pipelines

main.js

@@ -13,7 +13,7 @@ const tooltipId = 'tldr-chrome';
 const toooltipArrowId = 'tldr-chrome-arrow';
 
 const tooltipOffset = 200;
-const arrowOffset = 25;
+const arrowHeight = 20;
 const tooltipHeight = 195;
 
 // Variables
@@ -59,6 +59,11 @@ function createTooltip (content, isMarked = false) {
   let range = selection.getRangeAt(0);
   let rect = range.getBoundingClientRect();
   let newtop = null;
+  let flip = false;
+
+  if (rect.top - tooltipOffset < 0) {
+    flip = true;
+  }
 
   if (rect.width >= 0) {
 
@@ -68,7 +73,7 @@ function createTooltip (content, isMarked = false) {
 
     tooltip = document.createElement('div');
     tooltip.id = tooltipId;
-    newtop = rect.top - tooltipOffset + window.scrollY;
+    newtop = flip ? rect.top + rect.height + arrowHeight + window.scrollY : rect.top - tooltipOffset + window.scrollY;
 
     Object.assign(
       tooltip.style,
@@ -88,8 +93,10 @@ function createTooltip (content, isMarked = false) {
     Object.assign(
       arrow.style,
       {
-        left: `${(rect.left) + arrowOffset}px`,
-        top: `${newtop + tooltipHeight}px`
+        left: `${rect.left}px`,
+        top: flip ? `${newtop - arrowHeight}px` : `${newtop + tooltipHeight}px`,
+        transform: flip ? 'rotate(180deg)' : 'initial',
+        height: `${arrowHeight}px`
       }
     );
 
@@ -101,7 +108,7 @@ function createTooltip (content, isMarked = false) {
       if (isMarked) {
         markdown = content;
       } else {
-        markdown = marked(content);
+        markdown = marked.parse(content);
       }
     }
 

manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "tldr pages",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Collaborative cheatsheets for console commands (tldr project) now in your Browser!",
   "author": "Raúl Piracés",
   "homepage_url": "https://tldr.sh",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tldr-extension-browser",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Collaborative cheatsheets for console commands (tldr project) now in your Browser!",
   "main": "main.js",
   "scripts": {
@@ -25,7 +25,7 @@
   },
   "homepage": "https://github.com/piraces/tldr-browser-extension#readme",
   "dependencies": {
-    "marked": "^3.0.8"
+    "marked": "^4.0.0"
   },
   "devDependencies": {
     "clean-css-cli": "^5.4.2",

styles/main.scss

@@ -140,7 +140,6 @@ $code-shadow-light: rgba(255, 255, 255, 0.5);
     height: 25px;
     position: absolute;
     top: 100%;
-    left: 70%;
     transform: translateX(-50%);
     overflow: hidden;