diff --git a/changelog.md b/changelog.md index e163f6f..4c2823b 100644 --- a/changelog.md +++ b/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 diff --git a/package-lock.json b/package-lock.json index c7d974c..45226c0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "twitter-print-styles", - "version": "2.1.3", + "version": "2.1.4", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "twitter-print-styles", - "version": "2.1.3", + "version": "2.1.4", "license": "MIT", "dependencies": { "eslint": "^7.32.0", diff --git a/package.json b/package.json index 20d9093..1d02ba3 100644 --- a/package.json +++ b/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", diff --git a/src/content.js b/src/content.js index 66ef7e0..538fe4c 100644 --- a/src/content.js +++ b/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`); - ${shorten(document.title, 200)} + ${sanitizeTitle(document.title)} diff --git a/src/index.css b/src/index.css index 1f6af97..2382536 100644 --- a/src/index.css +++ b/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,25 +101,25 @@ 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; @@ -142,10 +127,18 @@ img { 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 */ diff --git a/src/manifest.json b/src/manifest.json index aef4bea..5e6d65d 100644 --- a/src/manifest.json +++ b/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",