fix #1 and format everything using prettier

see issue for fix since the diff is polluted
vegetabill · Jun 30, 2020 · 677c66d · 677c66d
1 parent 2a84ca0
commit 677c66d
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 54 deletions.
diff --git a/README.md b/README.md
@@ -18,4 +18,4 @@ Pull requests welcome!
 
 ## Developer Links
 
-* [web-ext docs](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext)
+- [web-ext docs](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext)
diff --git a/manifest.json b/manifest.json
@@ -1,15 +1,11 @@
 {
  "manifest_version": 2,
  "name": "Photo Tab",
- "version": "2018.1.1",
+ "version": "2020.1.0",
  "description": "Loads a Reddit nature photo when you open a new tab",
  "author": "William DePhillips <[email protected]>",
  "homepage_url": "https:/vegetabill/photo-tab-firefox",
- "permissions": [
- "tabs",
- "browserSettings",
- "<all_urls>"
- ],
+ "permissions": ["tabs", "browserSettings", "<all_urls>"],
  "chrome_settings_overrides": {},
  "chrome_url_overrides": {
  "newtab": "./photo-tab.html"

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "photo-tab-firefox",
- "version": "1.0.0",
+ "version": "2020.1.0",
  "description": "I built this because I loved the [Tab Pics](http://tab.pics/) Chrome extension but migrated off Chrome due to privacy concerns. It's my first Firefox extension so it may not be that well-designed but works for me.",
  "main": "photo-tab.js",
  "scripts": {
@@ -19,6 +19,7 @@
  },
  "homepage": "https:/vegetabill/photo-tab-firefox#readme",
  "devDependencies": {
+ "prettier": "^2.0.5",
  "web-ext": "^4.3.0"
  }
 }
diff --git a/photo-tab.html b/photo-tab.html
@@ -1,17 +1,19 @@
 <html>
  <head>
- <meta charset="UTF-8"> 
+ <meta charset="UTF-8" />
  <title>Photo Tab</title>
  <style>
  body {
  background-size: cover;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+ Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  }
  a {
  color: inherit;
  text-decoration: none;
  }
- h1, h2 {
+ h1,
+ h2 {
  color: white;
  text-shadow: 1px 1px 2px black;
  }
@@ -40,7 +42,7 @@ <h1>
  <a id="title" href="#">Photo Tab</a>
  </h1>
  <h2 id="author">Author</h2>
- <img id="next-photo"/>
+ <img id="next-photo" />
  <script type="text/javascript" src="./photo-tab.js"></script>
  </body>
-</html>
+</html>
diff --git a/photo-tab.js b/photo-tab.js
@@ -1,4 +1,4 @@
-const LS_KEY = 'photo-cache-v20181101';
+const LS_KEY = "photo-cache-v2020.1.0";
 
 const getPhotoCache = () => {
  const raw = localStorage.getItem(LS_KEY);
@@ -10,7 +10,7 @@ const getPhotoCache = () => {
 };
 
 const preloadNextPhoto = (photo) => {
- document.querySelector('#next-photo').src = photo.url;
+ document.querySelector("#next-photo").src = photo.url;
 };
 
 const updatePhotoCache = (photos) => {
@@ -36,69 +36,71 @@ const withPopulatedCache = () => {
 };
 
 const withNextPhoto = () => {
- return withPopulatedCache()
- .then((photos) => {
- const photo = photos.shift();
- updatePhotoCache(photos);
- return photo;
- });
+ return withPopulatedCache().then((photos) => {
+ const photo = photos.shift();
+ updatePhotoCache(photos);
+ return photo;
+ });
 };
 
 const extractPhotoAttrs = (child) => {
- const {
- name,
- url,
- title,
- permalink,
- author,
- } = child.data;
+ const { name, url, title, permalink, author, stickied } = child.data;
  return {
  name, // name is the unique id
  url,
  title,
  author,
  permalink: `https://www.reddit.com${permalink}`,
+ stickied,
  };
 };
 
 const filterOutHugePhotos = (photos) => {
- return Promise.all(photos.map((photo) => {
- return fetch(photo.url, { method: 'head', mode: 'no-cors' }).then((response) => {
- if (response.status !== 200) {
- ;
- throw new Error(`Unexpected response HEAD ${photo.url}: HTTP ${response.status}`);
- }
- const sizeInBytes = response.headers.get('content-length') || -1;
- return Object.assign({}, photo, { sizeInBytes });
+ return Promise.all(
+ photos.map((photo) => {
+ const { url } = photo;
+ return fetch(url, { method: "head", mode: "no-cors" })
+ .then((response) => {
+ if (response.status !== 200) {
+ throw new Error(
+ `Unexpected response HEAD ${url}: HTTP ${response.status}`
+ );
+ }
+ const sizeInBytes = response.headers.get("content-length") || -1;
+ return Object.assign({}, photo, { sizeInBytes });
+ })
+ .catch((err) => {
+ console.error(`Error looking up size of image at ${url}`, err);
+ });
  })
- })).then((photos) => {
- return photos.filter((p) => p.sizeInBytes < 6000000);
+ ).then((photos) => {
+ return photos.filter((p) => p && p.sizeInBytes < 6000000);
  });
 };
 
 const loadPhotos = () => {
- return fetch('https://www.reddit.com/r/earthporn.json')
+ return fetch("https://www.reddit.com/r/earthporn.json")
  .then(function (response) {
- if (response.status !== 200) {;
- throw new Error(`Unexpected response from Reddit: HTTP ${response.status}`);
+ if (response.status !== 200) {
+ throw new Error(
+ `Unexpected response from Reddit: HTTP ${response.status}`
+ );
  }
  return response.json();
  })
- .then(function (json) {
- const { children } = json.data;
- return children.map(extractPhotoAttrs);
- }).then((photos) => {
- return filterOutHugePhotos(photos);
- })
- };
+ .then(({ data }) =>
+ data.children.map(extractPhotoAttrs).filter((photo) => !photo.stickied)
+ )
+ .then((photos) => filterOutHugePhotos(photos));
+};
 
 const showPhoto = (photo) => {
- document.querySelector('body').style.backgroundImage = `url('${photo.url}')`;
- document.querySelector('#title').innerText = photo.title;
- document.querySelector('#title').href = photo.permalink;
- document.querySelector('#author').innerText  = photo.author;
+ document.querySelector("body").style.backgroundImage = `url('${photo.url}')`;
+ document.querySelector("#title").innerText = photo.title;
+ document.querySelector("#title").href = photo.permalink;
+ document.querySelector("#author").innerText = photo.author;
 };
 
-const onNewTab = () => withNextPhoto().then((p) => showPhoto(p))
+const onNewTab = () => withNextPhoto().then((p) => showPhoto(p));
 
-onNewTab();
+onNewTab();
diff --git a/yarn.lock b/yarn.lock
@@ -3099,6 +3099,11 @@ prepend-http@^2.0.0:
  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
  integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=
 
+prettier@^2.0.5:
+ version "2.0.5"
+ resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.0.5.tgz#d6d56282455243f2f92cc1716692c08aa31522d4"
+ integrity sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==
+
 [email protected]:
  version "5.0.0"
  resolved "https://registry.yarnpkg.com/probe-image-size/-/probe-image-size-5.0.0.tgz#1b87d20340ab8fcdb4324ec77fbc8a5f53419878"