🏥 Fix Profile Pictures, Squished Images, Polls, and Filenames (#23)

* Remove unused 'center' styles (and renumber comments)

* Remove static position overrides so profile pics show up again

* Fix poll styles

* Sanitize titles so emojis don't cause errors with filenames

* v2.1.4

changelog.md

@@ -7,6 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [2.1.4] - 2022-01-03
+
+### Fixed
+
+- 🔥 Fix missing profile pictures.
+- 📊 Fix polls not rendering correctly.
+- 🪗 Fix squished images.
+- 😜 Fix emojis causing issues with PDF filenames.
+
 ## [2.1.3] - 2021-11-07
 
 ### Added
@@ -76,7 +85,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Automatically print when replies have finished loading.
 - Hide promoted tweets.
 
-[Unreleased]: https://github.com/tannerhodges/twitter-print-styles/compare/v2.1.3...HEAD
+[Unreleased]: https://github.com/tannerhodges/twitter-print-styles/compare/v2.1.4...HEAD
+[2.1.4]: https://github.com/tannerhodges/twitter-print-styles/compare/v2.1.3...v2.1.4
 [2.1.3]: https://github.com/tannerhodges/twitter-print-styles/compare/v2.1.2...v2.1.3
 [2.1.2]: https://github.com/tannerhodges/twitter-print-styles/compare/v2.1.1...v2.1.2
 [2.1.1]: https://github.com/tannerhodges/twitter-print-styles/compare/v2.1.0...v2.1.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "twitter-print-styles",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "Chrome extension for adding simple print styles to save Twitter threads as PDFs.",
   "keywords": [
     "chrome",

src/content.js

@@ -127,6 +127,27 @@ function shorten(str, max = 100) {
     : str;
 }
 
+/**
+ * Sanitize title for safe file names.
+ *
+ * @see https://stackoverflow.com/a/57044767/1786459
+ * @param  {String}  str
+ * @return {String}
+ */
+function sanitizeTitle(str) {
+  // Ignore empty values.
+  if (!str) {
+    return '';
+  }
+
+  // Convert all non-word and non-space characters with hyphens.
+  // Exceptions: Preserve `@` for Twitter handles, and then basic punctuation.
+  str = str.replace(/[^\w\s@.]/g, '-');
+
+  // Return title with a maximum of 200 characters.
+  return shorten(str, 200);
+}
+
 // ------------------------------
 // PRINT TWEETS
 // ------------------------------
@@ -305,7 +326,7 @@ https://github.com/tannerhodges/twitter-print-styles/issues`);
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover">
       <link rel="shortcut icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E %3Cstyle%3E@media (prefers-color-scheme: dark) %7B path %7B fill: %23fff; %7D %7D%3C/style%3E %3Cpath d='M150 0a150 150 0 1 0 150 150A150 150 0 0 0 150 0zm70.013 114.075c.075 1.5.075 3.075.075 4.65 0 47.775-36.375 102.9-102.9 102.9a100.76 100.76 0 0 1-55.275-16.35 65.763 65.763 0 0 0 8.625.525 72.7 72.7 0 0 0 44.925-15.45 36.11 36.11 0 0 1-33.75-25.125 34.528 34.528 0 0 0 6.825.675 36.052 36.052 0 0 0 9.525-1.275 36.2 36.2 0 0 1-29.026-35.475v-.45a35.525 35.525 0 0 0 16.35 4.5 36.148 36.148 0 0 1-11.25-48.225 102.6 102.6 0 0 0 74.55 37.8 33.143 33.143 0 0 1-.975-8.25 36.186 36.186 0 0 1 62.55-24.75A73.234 73.234 0 0 0 233.212 81a36.144 36.144 0 0 1-15.9 20.025 73.4 73.4 0 0 0 20.775-5.7 74.091 74.091 0 0 1-18.074 18.75z'%3E%3C/path%3E %3C/svg%3E">
-      <title>${shorten(document.title, 200)}</title>
+      <title>${sanitizeTitle(document.title)}</title>
       <style>${getAllCSS(document)}</style>
       <style>/* STYLES */</style>
     </head>

src/index.css

@@ -4,19 +4,19 @@
  * 1. Hide main menu.
  * 2. Hide sidebar.
  * 3. Hide modals/tooltips/popovers.
- * 4. Center main content.
- * 5. Make "Thread" header non-sticky.
- * 6. Expand tweet images.
- * 7. Hide extra video placeholders.
- * 8. Reset video transformations.
- * 9. Fix icon alignment for reply/retweet/like buttons.
- * 10, Make infinite scrolling timeline static again.
- * 11. Normalize tweet borders
- * 12. Hide everything after the first set timeline content.
- * 13. Add some breathing room to make tweets more readable.
- * 14. Make sure nothing animates during print.
- * 15. Try to fit media within the page.
- * 16. Revert Dark Mode.
+ * 4. Make "Thread" header non-sticky.
+ * 5. Expand tweet images.
+ * 6. Hide extra video placeholders.
+ * 7. Reset video transformations.
+ * 8. Fix icon alignment for reply/retweet/like buttons.
+ * 9, Make infinite scrolling timeline static again.
+ * 10. Normalize tweet borders
+ * 11. Hide everything after the first set timeline content.
+ * 12. Add some breathing room to make tweets more readable.
+ * 13. Make sure nothing animates during print.
+ * 14. Try to fit media within the page.
+ * 15. Revert Dark Mode.
+ * 16. Fix poll styles.
  */
 
 /* BEGIN */
@@ -36,22 +36,17 @@ header[role="banner"] {
   display: none !important;
 }
 
-/* 4. Center main content. */
-/* main > :first-child {
-  width: 100% !important;
-} */
-
 [data-testid="primaryColumn"] {
   margin-right: auto !important;
   margin-left: auto !important;
 }
 
-/* 5. Make "Thread" header non-sticky. */
+/* 4. Make "Thread" header non-sticky. */
 [data-testid="primaryColumn"] > :first-child > :first-child {
   position: relative !important;
 }
 
-/* 6. Expand tweet images. */
+/* 5. Expand tweet images. */
 /* - Make sure inline images display instead of background images. */
 [style*="background-image: url("] {
   display: none !important;
@@ -61,16 +56,6 @@ img {
   opacity: 1 !important;
 }
 
-/* - Break everything out of their `position: absolute;` containers. */
-[data-testid="tweet"] * {
-  position: static !important;
-}
-
-/* - Hide all the placeholder aspect ratio elements. */
-[data-testid="tweet"] [style*="padding-bottom"] {
-  display: none !important;
-}
-
 /* - Ensure images are visible. */
 [data-testid="tweet"] img {
   opacity: 1 !important;
@@ -81,22 +66,22 @@ img {
   margin: 0 !important;
 }
 
-/* 7. Hide extra video placeholders. */
+/* 6. Hide extra video placeholders. */
 [data-testid="videoPlayer"] [role="button"] {
   display: none !important;
 }
 
-/* 8. Reset video transformations. */
+/* 7. Reset video transformations. */
 [data-testid="videoPlayer"] video {
   transform: none !important;
 }
 
-/* 9. Fix icon alignment for reply/retweet/like buttons. */
+/* 8. Fix icon alignment for reply/retweet/like buttons. */
 [data-testid="tweet"] [role="group"]:last-child [role="button"] > :first-child > :first-child > :first-child {
   display: none !important;
 }
 
-/* 10, Make infinite scrolling timeline static again. */
+/* 9, Make infinite scrolling timeline static again. */
 [data-testid="primaryColumn"] [role="region"] > div > :first-child {
   min-height: 0 !important;
 }
@@ -106,7 +91,7 @@ img {
   transform: none !important;
 }
 
-/* 11. Normalize tweet borders */
+/* 10. Normalize tweet borders */
 [data-testid="primaryColumn"] > :first-child {
   border-top: 1px solid black !important;
 }
@@ -116,36 +101,44 @@ img {
   border-bottom: 1px solid black !important;
 }
 
-/* 12. Hide everything after the first set timeline content. */
+/* 11. Hide everything after the first set timeline content. */
 /* NOTE: This allows us to easily swap out our duplicate and the original content. */
 [data-testid="primaryColumn"] [role="region"] > div > :first-child ~ * {
   display: none !important;
 }
 
-/* 13. Add some breathing room to make tweets more readable. */
+/* 12. Add some breathing room to make tweets more readable. */
 article {
   padding-top: 1rem !important;
   padding-bottom: 1rem !important;
 }
 
-/* 14. Make sure nothing animates during print. */
+/* 13. Make sure nothing animates during print. */
 * {
   transition: none !important;
   animation: none !important;
 }
 
-/* 15. Try to fit media within the page. */
+/* 14. Try to fit media within the page. */
 video,
 img {
   max-height: 50vh;
   object-fit: contain;
   page-break-inside: avoid;
 }
 
-/* 16. Revert Dark Mode. */
+/* 15. Revert Dark Mode. */
+/* - Remove background colors from all non-links. */
+/* - Make all text black. */
 *:not(a) {
   background-color: transparent !important;
   color: black !important;
 }
 
+/* 16. Fix poll styles. */
+/* - Make all bars light gray. */
+[data-testid="cardPoll"] [style*="width: "] {
+  background-color: lightgray !important;
+}
+
 /* END */

src/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Twitter Print Styles",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "Simple print styles for saving Twitter threads as PDFs.",
   "icons": {
     "16": "icon-16.png",