From fd56127996be2d3160b3ef9c25ef745844d17681 Mon Sep 17 00:00:00 2001 From: Adil Hanney Date: Thu, 14 Mar 2024 14:46:52 +0000 Subject: [PATCH] feat: integrate leanpub styles with extension --- build.dart | 6 + src/leanpub/leanpub_theme.css | 210 -------------------- src/{leanpub => scripts}/save_scroll_pos.js | 28 +-- src/styles/_globals.scss | 19 +- src/styles/leanpub.com.scss | 153 ++++++++++++++ 5 files changed, 173 insertions(+), 243 deletions(-) delete mode 100644 src/leanpub/leanpub_theme.css rename src/{leanpub => scripts}/save_scroll_pos.js (83%) create mode 100644 src/styles/leanpub.com.scss diff --git a/build.dart b/build.dart index 2e64f36..39932ae 100644 --- a/build.dart +++ b/build.dart @@ -48,6 +48,9 @@ const styles = >{ ], // Duo iframe "shib.manchester.ac.uk_duo": ["*://api-4c039978.duosecurity.com/frame*"], + + // Leanpub + "leanpub.com": ["*://leanpub.com/*"], }; /// Maps each script file to the domains it applies to @@ -64,14 +67,17 @@ const scripts = >{ ], 'auto_login': ['*://login.manchester.ac.uk/cas/login*'], 'expand_menu': ['*://online.manchester.ac.uk/webapps/blackboard/content/*'], + 'save_scroll_pos': ['*://leanpub.com/*/read*'], 'video_keyboard_shortcuts': ['*://video.manchester.ac.uk/embedded/*'], }; /// Whether to print extra information. late final bool verbose; + /// Whether to watch the src directory for changes, /// and rebuild when changes are detected. late final bool shouldWatchSrc; + /// Whether to use Manifest V3. /// If false, Manifest V2 is used. late final bool useManifestV3; diff --git a/src/leanpub/leanpub_theme.css b/src/leanpub/leanpub_theme.css deleted file mode 100644 index f223bad..0000000 --- a/src/leanpub/leanpub_theme.css +++ /dev/null @@ -1,210 +0,0 @@ -:root { - --background: #fefbff; - --on-background: #1b1b1f; - --surface-variant: #e1e2ec; - --primary: #005ac1; - --on-primary: #ffffff; - - --body-fonts: 'Atkinson Hyperlegible', Inter, - system-ui, sans-serif, - 'Font Awesome 5 Free', - 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; -} - -body, html { - background: var(--background); - color: var(--on-background); -} - -* { - font-family: var(--body-fonts) !important; - font-feature-settings: "liga" 1, "calt" 1; - font-smooth: always; - -webkit-font-smoothing: subpixel-antialiased; -} -.book-title, -h1, h2, h3, h4, h5, h6 { - font-family: Urbanist, ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', var(--body-fonts) !important; -} - -.Header { - background: #141b2c; - color: #dbe2f9; -} - -.cookies-banner { - display: none !important; -} - - -#read-online > header, -#read-online #leanpub-toc { - background: #e9edfb; - color: #141b2c; - --shadow: 1.5rem; - ---shadow: -1.5rem; - box-shadow: inset var(---shadow) 0 var(--shadow) var(---shadow) rgba(20, 27, 44, 0.125); - transition: none; -} -#read-online > header { - display: block; - border-top-right-radius: 0.5rem; - - hr { - display: none; - } - - .btn--solid { - display: block; - background: var(--primary); - color: var(--on-primary); - border-radius: 0.5rem; - margin-bottom: 4rem; - padding: 0.5rem; - height: auto; - } - - .read-upsell { - height: 10rem; - - > a { - display: none; - } - - .upsell-text, - .upsell-text * { - margin-top: 0; - } - - .book-title { - font-size: 2rem; - max-height: initial; - line-height: 1.1; - margin-bottom: 0.5rem; - } - } -} -#read-online #leanpub-toc { - border-bottom-right-radius: 0.5rem; - top: 18rem; - - .toc ul { - margin: 0; - - > li:first-child > span:first-child { - display: none; - } - } - - li { - .section-number { - color: inherit !important; - opacity: 0.5; - } - a { - border-top-left-radius: 0.5rem; - border-bottom-left-radius: 0.5rem; - } - a.highlight, - a:hover { - background: rgba(0, 90, 193, 0.85); - color: var(--on-primary); - transition: background 0.1s ease-out, color 0.1s ease-out, filter 0.1s ease-out; - } - a.highlight:hover { - background: rgba(0, 90, 193, 1); - } - } -} - -#leanpub-main, -#leanpub-doc-main { - overflow-x: hidden; - color: inherit; - - p { - text-indent: 5rem; - line-height: 1.5; - margin-bottom: 5rem; - color: inherit; - } - - aside p, - .centered p { - margin-bottom: 1.5rem; - } - - ::selection { - background-color: rgba(0, 90, 193, 0.15); - color: black; - } - - aside, - aside.blurb { - background-color: rgba(225, 226, 236, 0.2); - border-radius: 0.5rem; - } - - blockquote { - color: inherit; - opacity: 0.8; - border-radius: 0.5rem; - border-left: 0.3rem solid var(--surface-variant); - - p { - margin-bottom: 0; - padding-block: 1rem; - } - - + p { - margin-top: 1.5rem; - } - } - - img { - border-radius: 0.5rem; - } - figure { - max-width: 100%; - margin-left: 0; - margin-right: 0; - } -} - - - -/* https://fonts.googleapis.com/css?family=Urbanist&display=swap */ -@font-face { /* latin-ext */ - font-family: 'Urbanist'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url(https://fonts.gstatic.com/s/urbanist/v15/L0xjDF02iFML4hGCyOCpRdycFsGxSrqDyx4vH5mqe8Q.woff2) format('woff2'); - unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; -} -@font-face { /* latin */ - font-family: 'Urbanist'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url(https://fonts.gstatic.com/s/urbanist/v15/L0xjDF02iFML4hGCyOCpRdycFsGxSrqDyx4vEZmq.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} - -/* https://fonts.googleapis.com/css?family=Atkinson%20Hyperlegible&display=swap */ -@font-face { /* latin-ext */ - font-family: 'Atkinson Hyperlegible'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url(https://fonts.gstatic.com/s/atkinsonhyperlegible/v11/9Bt23C1KxNDXMspQ1lPyU89-1h6ONRlW45G07JIoSwQ.woff2) format('woff2'); - unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; -} -@font-face { /* latin */ - font-family: 'Atkinson Hyperlegible'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url(https://fonts.gstatic.com/s/atkinsonhyperlegible/v11/9Bt23C1KxNDXMspQ1lPyU89-1h6ONRlW45G04pIo.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} diff --git a/src/leanpub/save_scroll_pos.js b/src/scripts/save_scroll_pos.js similarity index 83% rename from src/leanpub/save_scroll_pos.js rename to src/scripts/save_scroll_pos.js index 60d2483..0de8b4c 100644 --- a/src/leanpub/save_scroll_pos.js +++ b/src/scripts/save_scroll_pos.js @@ -1,16 +1,5 @@ -// ==UserScript== -// @name Where am I? (Leanpub scrolling improvements) -// @namespace http://tampermonkey.net/ -// @version 2024-01-24 -// @description Saves your scroll position, and highlights the current chapter in the table of contents. Best used with the styles at https://userstyles.world/style/14072/my-personal-leanpub-styles. -// @author adil192 -// @match https://leanpub.com/*/read -// @icon https://www.google.com/s2/favicons?sz=64&domain=leanpub.com -// @grant GM_setValue -// @grant GM_getValue -// @grant GM.setValue -// @grant GM.getValue -// ==/UserScript== +// Saves your scroll position, +// and highlights the current chapter in the table of contents. // @ts-check @@ -36,15 +25,6 @@ let tocElem = null; */ let pageLoaded = false; -/** - * @typedef {Object} _GM - * @property {(key: string) => Promise} getValue - * @property {(key: string, value: string) => Promise} setValue - */ -/** @type {_GM} */ -// @ts-ignore -const gm = GM; - /** * Finds the html elements * @returns {Promise} @@ -122,7 +102,7 @@ function onScroll() { // save current section if (sectionNumber) { console.log('Saving last section to', sectionNumber); - gm.setValue('lastSection', sectionNumber); + localStorage.setItem('lastSection', sectionNumber); } } } @@ -147,7 +127,7 @@ function onScroll() { window.addEventListener('load', (e) => { findElements().then(async () => { if (!scrollElem || !contentElem || !tocElem) return; - const lastSection = await gm.getValue('lastSection'); + const lastSection = localStorage.getItem('lastSection'); console.log('Restoring last section to', lastSection); if (lastSection) { const headings = Array.from(contentElem.querySelectorAll('h1, h2, h3, h4, h5, h6')); diff --git a/src/styles/_globals.scss b/src/styles/_globals.scss index b012aaf..9c9a224 100644 --- a/src/styles/_globals.scss +++ b/src/styles/_globals.scss @@ -78,32 +78,33 @@ $shadow: rgba($primary, 0.10); ); } -$font-fallbacks: "Atkinson Hyperlegible", "Inter", - ui-sans-serif, system-ui, sans-serif, - "Apple Color Emoji", "Segoe UI Emoji", - "Segoe UI Symbol", "Noto Color Emoji", - FontAwesome, VideoJS; - @mixin fonts($selector: '*') { @include hyperlegible; @include urbanist; :root { - --fonts-body: #{$font-fallbacks}; - --fonts-heading: "Urbanist", "Product Sans", #{$font-fallbacks}; + --fonts-body: "Atkinson Hyperlegible", "Inter", + ui-sans-serif, system-ui, sans-serif, + "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol", "Noto Color Emoji", + FontAwesome, VideoJS, "Font Awesome 5 Free"; + --fonts-heading: "Urbanist", "Product Sans", var(--fonts-body); } #{$selector} { @include fonts-body; // 'liga' enables font ligatures, 'calt' enables contextual alternates font-feature-settings: 'liga' 1, 'calt' 1; + font-smooth: always; + -webkit-font-smoothing: subpixel-antialiased; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .heading, .subheading, .title, .subtitle, #pageTitleHeader, #pageTitleText, - .vjs-title-bar-link { + .vjs-title-bar-link, + .book-title { &, * { @include fonts-heading; } diff --git a/src/styles/leanpub.com.scss b/src/styles/leanpub.com.scss new file mode 100644 index 0000000..ccd7bc3 --- /dev/null +++ b/src/styles/leanpub.com.scss @@ -0,0 +1,153 @@ +@import "globals"; + +@include fonts; +* { + accent-color: $primary !important; +} + +body, html { + background: $background; + color: $on-background; +} + +.Header { + background: $header; + color: $on-header; +} + +.cookies-banner { + display: none !important; +} + +#read-online > header, +#read-online #leanpub-toc { + background: $surface-1; + color: $on-surface; + $shadow: 1.5rem; + box-shadow: inset (-$shadow) 0 $shadow (-$shadow) rgba($header, 0.1); + transition: none; +} +#read-online > header { + display: block; + border-top-right-radius: 0.5rem; + + hr { + display: none; + } + + .btn--solid { + display: block; + background: $primary; + color: $on-primary; + border-radius: 0.5rem; + margin-bottom: 4rem; + padding: 0.5rem; + height: auto; + } + + .read-upsell { + height: 10rem; + + > a { + display: none; + } + + .upsell-text, + .upsell-text * { + margin-top: 0; + } + + .book-title { + font-size: 2rem; + max-height: initial; + line-height: 1.1; + margin-bottom: 0.5rem; + } + } +} +#read-online #leanpub-toc { + border-bottom-right-radius: 0.5rem; + top: 18rem; + + .toc ul { + margin: 0; + + > li:first-child > span:first-child { + display: none; + } + } + + li { + .section-number { + color: inherit !important; + opacity: 0.5; + } + a { + border-top-left-radius: 0.5rem; + border-bottom-left-radius: 0.5rem; + } + a.highlight, + a:hover { + background: rgba($primary, 0.85); + color: $on-primary; + transition: background 0.1s ease-out, color 0.1s ease-out, filter 0.1s ease-out; + } + a.highlight:hover { + background: rgba($primary, 1); + } + } +} + +#leanpub-main, +#leanpub-doc-main { + overflow-x: hidden; + color: inherit; + + p { + text-indent: 5rem; + line-height: 1.5; + margin-bottom: 5rem; + color: inherit; + } + + aside p, + .centered p { + margin-bottom: 1.5rem; + } + + ::selection { + background-color: rgba($primary, 0.1); + color: black; + } + + aside, + aside.blurb { + background-color: $surface-1; + border-radius: 0.5rem; + } + + blockquote { + color: inherit; + opacity: 0.8; + border-radius: 0.5rem; + border-left: 0.3rem solid $surface-1; + + p { + margin-bottom: 0; + padding-block: 1rem; + } + + + p { + margin-top: 1.5rem; + } + } + + img { + border-radius: 0.5rem; + } + figure { + max-width: 100%; + margin-left: 0; + margin-right: 0; + } +}