diff --git a/.gitignore b/.gitignore index a6153c7..10253e5 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,3 @@ -*.psd +*.zip +build/ dist/ - diff --git a/changelog.md b/changelog.md index 07474e8..34120bc 100644 --- a/changelog.md +++ b/changelog.md @@ -7,6 +7,25 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +## 2.1.0 - 2020-09-03 + +### Added + +- ๐Ÿ‘ทโ€โ™‚๏ธ Build Process FTW. + +### Changed + +- โœ‚๏ธ Shorten document title below max filename length. +- ๐Ÿ–ผ Open timeline in a separate window. +- ๐Ÿ“ท Adjust media sizing to better fit within the page. +- ๐ŸŽ Add 50ms delay to help reduce risk of [rate limits](https://developer.twitter.com/en/docs/twitter-api/rate-limits). + +### Fixed + +- ๐Ÿ”ฅ Fix unstable timeline selector. +- ๐Ÿ™ˆ Fix background images not showing up on print. +- โฐ Fix timestamp element not matching in other languages. + ## 2.0.0 - 2020-08-31 ### Changed @@ -27,6 +46,7 @@ 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/snap-slider/compare/v2.0.0...HEAD +[Unreleased]: https://github.com/tannerhodges/snap-slider/compare/v2.1.0...HEAD +[2.1.0]: https://github.com/tannerhodges/snap-slider/compare/v2.0.0...v2.1.0 [2.0.0]: https://github.com/tannerhodges/snap-slider/compare/v1.0.0...v2.0.0 [1.0.0]: https://github.com/tannerhodges/snap-slider/releases/tag/v1.0.0 diff --git a/gulpfile.js b/gulpfile.js index 67f1e13..a13cbeb 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,8 +1,69 @@ -const gulp = require('gulp'); +const { dest, parallel, series, src, watch } = require('gulp'); +const clean = require('postcss-clean'); +const fs = require('fs'); +const postcss = require('gulp-postcss'); +const prefixer = require('postcss-prefix-selector'); +const replace = require('gulp-replace'); const zip = require('gulp-zip'); -exports.default = () => ( - gulp.src('src/*') - .pipe(zip('chrome-twitter-print-styles.zip')) - .pipe(gulp.dest('dist')) +/** + * Process CSS to work with both default Twitter print styles, + * and the custom print screen that we open in a new window. + */ +function copy() { + return src('src/*') + .pipe(dest('dist/')); +} +exports.copy = copy; + +/** + * Process CSS to work with both default Twitter print styles, + * and the custom print screen that we open in a new window. + */ +const css = parallel( + // Wrap everything in a print media query so we can apply + // it to Twitter's default print styles. + function defaultPrintCSS() { + return src('src/index.css') + .pipe(replace('/* BEGIN */', '@media print {')) + .pipe(replace('/* END */', '}')) + .pipe(dest('dist/')); + }, + // Prefix everything with a custom ID, then compress it to + // fit in a + + + + ${clone.outerHTML} + + `; + + const winUrl = URL.createObjectURL(new Blob([winHtml], { type: 'text/html' })); + + const win = window.open(winUrl); // Wait one more time, just to be sure _all_ our media is ready. - await mediaLoaded(duplicate); + await mediaLoaded(win.document.querySelector('body')); // Annnd print! - window.print(); - - // Once that's done, revert back so we don't break the app. - container.style.display = ''; - timeline.removeChild(duplicate); + win.print(); }); diff --git a/src/index.css b/src/index.css index eb211b8..1f6af97 100644 --- a/src/index.css +++ b/src/index.css @@ -15,120 +15,137 @@ * 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. Avoid page breaks in the middle of tweets, images, and videos. + * 15. Try to fit media within the page. * 16. Revert Dark Mode. */ -@media print { - /* 1. Hide main menu. */ - header[role="banner"] { - display: none !important; - } - - /* 2. Hide sidebar. */ - [data-testid="sidebarColumn"] { - display: none !important; - } - - /* 3. Hide modals/tooltips/popovers. */ - /* #layers [style*="left: "] { - display: none !important; - } */ - #layers { - 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. */ - [data-testid="primaryColumn"] > :first-child > :first-child { - position: relative !important; - } - - /* 6. Expand tweet images. */ - /* - 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; - } - /* - Prevent photos overflowing the content area. */ - [data-testid="tweetPhoto"] { - margin: 0 !important; - } - - /* 7. Hide extra video placeholders. */ - [data-testid="videoPlayer"] [role="button"] { - display: none !important; - } - - /* 8. Reset video transformations. */ - [data-testid="videoPlayer"] video { - transform: none !important; - } - - /* 9. 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. */ - [aria-label*="Timeline"] > :first-child { - min-height: 0 !important; - } - - [aria-label*="Timeline"] > :first-child > * { - position: relative !important; - transform: none !important; - } - - /* 11. Normalize tweet borders */ - [aria-label*="Timeline"] > :first-child > div > div { - border-top: 0 !important; - border-bottom: 1px solid black !important; - } - - /* 12. Hide everything after the first set timeline content. */ - /* NOTE: This allows us to easily swap out our duplicate and the original content. */ - [aria-label*="Timeline"] > :first-child ~ * { - display: none !important; - } - - /* 13. 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. */ - * { - transition: none !important; - animation: none !important; - } - - /* 15. Avoid page breaks in the middle of tweets, images, and videos. */ - article, - img, - video { - page-break-inside: avoid !important; - } - - /* 16. Revert Dark Mode. */ - *:not(a) { - background-color: transparent !important; - color: black !important; - } + +/* BEGIN */ + +/* 1. Hide main menu. */ +header[role="banner"] { + display: none !important; +} + +/* 2. Hide sidebar. */ +[data-testid="sidebarColumn"] { + display: none !important; +} + +/* 3. Hide modals/tooltips/popovers. */ +#layers { + 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. */ +[data-testid="primaryColumn"] > :first-child > :first-child { + position: relative !important; +} + +/* 6. Expand tweet images. */ +/* - Make sure inline images display instead of background images. */ +[style*="background-image: url("] { + display: none !important; +} + +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; +} + +/* - Prevent photos overflowing the content area. */ +[data-testid="tweetPhoto"] { + margin: 0 !important; +} + +/* 7. Hide extra video placeholders. */ +[data-testid="videoPlayer"] [role="button"] { + display: none !important; +} + +/* 8. Reset video transformations. */ +[data-testid="videoPlayer"] video { + transform: none !important; +} + +/* 9. 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. */ +[data-testid="primaryColumn"] [role="region"] > div > :first-child { + min-height: 0 !important; +} + +[data-testid="primaryColumn"] [role="region"] > div > :first-child > * { + position: relative !important; + transform: none !important; +} + +/* 11. Normalize tweet borders */ +[data-testid="primaryColumn"] > :first-child { + border-top: 1px solid black !important; +} + +[data-testid="primaryColumn"] [role="region"] > div > :first-child > div > div { + border-top: 0 !important; + border-bottom: 1px solid black !important; +} + +/* 12. 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. */ +article { + padding-top: 1rem !important; + padding-bottom: 1rem !important; +} + +/* 14. Make sure nothing animates during print. */ +* { + transition: none !important; + animation: none !important; +} + +/* 15. Try to fit media within the page. */ +video, +img { + max-height: 50vh; + object-fit: contain; + page-break-inside: avoid; } + +/* 16. Revert Dark Mode. */ +*:not(a) { + background-color: transparent !important; + color: black !important; +} + +/* END */ diff --git a/src/manifest.json b/src/manifest.json index 4405e4c..d16b00f 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 2, "name": "Twitter Print Styles", - "version": "2.0.0", + "version": "2.1.0", "description": "Simple print styles for saving Twitter threads as PDFs.", "icons": { "16": "icon-16.png",