diff --git a/gulpfile.js b/gulpfile.js index 5c1c63bd..9bb6f394 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -4,6 +4,8 @@ const { parallel } = require('gulp'); +const fileinclude = require('gulp-file-include'); + const csso = require('gulp-csso'); const concat = require('gulp-concat'); @@ -108,6 +110,10 @@ const build = { }, html: function() { return src(path.src + '/index.html') + .pipe(fileinclude({ + prefix: '@@', + basepath: '@file' + })) .pipe(replace(/\<\!\-\-\ css\-block\ \-\-\>([\s\S]*)\<\!\-\-\ end\-css\-block\ \-\-\>/mg, '')) .pipe(replace(/\<\!\-\-\ js\-block\ \-\-\>([\s\S]*)\<\!\-\-\ end\-js\-block\ \-\-\>/mg, '')) .pipe(htmlmin({ @@ -156,10 +162,14 @@ const dev = { }) }, html: function() { - watch(path.src + '/index.html', { + watch(path.src + '/**/*.html', { ignoreInitial: false }, function() { return src(path.src + '/index.html') + .pipe(fileinclude({ + prefix: '@@', + basepath: '@file' + })) .pipe(dest(path.dev)) }) }, diff --git a/package-lock.json b/package-lock.json index 4febf96f..cc0ddccb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "nightTab", - "version": "4.33.0", + "version": "4.34.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -3718,6 +3718,12 @@ } } }, + "flatnest": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/flatnest/-/flatnest-1.0.0.tgz", + "integrity": "sha1-IEIa0FtGxjytMO8UqOxiX4az8cU=", + "dev": true + }, "flatstr": { "version": "1.0.12", "resolved": "https://registry.npmjs.org/flatstr/-/flatstr-1.0.12.tgz", @@ -4926,6 +4932,67 @@ "vinyl-sourcemaps-apply": "^0.2.1" } }, + "gulp-file-include": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/gulp-file-include/-/gulp-file-include-2.1.1.tgz", + "integrity": "sha512-jZ/of95c/2HIM+tSvY25B6Ou7PKIgBgBPMtUQPzkxaOEgRItPBdjj3SsY26IBlafvB2a6c8AQCdWF8c7+BVTZQ==", + "dev": true, + "requires": { + "balanced-match": "^1.0.0", + "concat-stream": "^2.0.0", + "extend": "^3.0.2", + "flatnest": "^1.0.0", + "plugin-error": "^1.0.1", + "through2": "^3.0.1", + "vinyl": "^2.2.0" + }, + "dependencies": { + "concat-stream": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-2.0.0.tgz", + "integrity": "sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==", + "dev": true, + "requires": { + "buffer-from": "^1.0.0", + "inherits": "^2.0.3", + "readable-stream": "^3.0.2", + "typedarray": "^0.0.6" + } + }, + "plugin-error": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-1.0.1.tgz", + "integrity": "sha512-L1zP0dk7vGweZME2i+EeakvUNqSrdiI3F91TwEoYiGrAfUXmVv6fJIq4g82PAXxNsWOp0J7ZqQy/3Szz0ajTxA==", + "dev": true, + "requires": { + "ansi-colors": "^1.0.1", + "arr-diff": "^4.0.0", + "arr-union": "^3.1.0", + "extend-shallow": "^3.0.2" + } + }, + "readable-stream": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.5.0.tgz", + "integrity": "sha512-gSz026xs2LfxBPudDuI41V1lka8cxg64E66SGe78zJlsUofOg/yqwezdIcdfwik6B4h8LFmWPA9ef9X3FiNFLA==", + "dev": true, + "requires": { + "inherits": "^2.0.3", + "string_decoder": "^1.1.1", + "util-deprecate": "^1.0.1" + } + }, + "through2": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/through2/-/through2-3.0.1.tgz", + "integrity": "sha512-M96dvTalPT3YbYLaKaCuwu+j06D/8Jfib0o/PxbVt6Amhv3dUAtW6rTV1jPgJSBG83I/e04Y6xkVdVhSRhi0ww==", + "dev": true, + "requires": { + "readable-stream": "2 || 3" + } + } + } + }, "gulp-filter": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/gulp-filter/-/gulp-filter-6.0.0.tgz", diff --git a/package.json b/package.json index 34d1bdfb..ad3da3f1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "nightTab", - "version": "4.33.0", + "version": "4.34.0", "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.", "main": "index.js", "scripts": { @@ -43,6 +43,7 @@ "gulp-cli": "^2.2.0", "gulp-concat": "^2.6.1", "gulp-csso": "^3.0.1", + "gulp-file-include": "^2.1.1", "gulp-filter": "^6.0.0", "gulp-htmlmin": "^5.0.1", "gulp-replace": "^1.0.0", diff --git a/src/html/background.html b/src/html/background.html new file mode 100644 index 00000000..990348b4 --- /dev/null +++ b/src/html/background.html @@ -0,0 +1,4 @@ +
Use the Background colour defined by the Theme.
+Use a custom Background colour.
+Take care as some colours may make the Clock, Date and other text unreadable.
+Max image size 5MB, (due to browser local storage limits).
+Take care with large files, they may impact performance.
+If adding more than one URL separate them by spaces or on new lines. If more than one is entered a random background image will be used on load.
+Unsplash can be used for random images, eg:
+https://source.unsplash.com/random/1920x1080/?night,day,sky
+Change parameters after .../random/ for more options. Loading times may vary.
+Max width is defined by Layout Area Width.
+Effects may not be visible if the Bookmark Area is full width.
+Only available when Letter/Icon and Name are shown.
+Vertical alignment works well with Bookmark Block Style.
+Horizontal alignment works well with Bookmark List Style.
+Only available when Letter/Icon and Name are shown.
+Effects may not be visible if Theme Shadow is set to 0.
+Use the Background colour defined by the Theme.
+Use a custom Background colour.
+Take care as some colours may make the Letter/Icon and Name unreadable.
+Bookmark tiles more square shaped.
+Bookmark tiles more short and wide.
+Display the URL and Controls either at the top or bottom of a Bookmark Tile.
+Adds a unique override colour to each Bookmark.
+nightTab is free, appreciation is welcome in the form of coffee!
+Restore a previously exported nightTab backup.
+Download a backup of your nightTab Bookmarks and Settings.
+This file can later be imported on this or another deivce.
+Wipe all data and restore nightTab to default state.
+Effects may not be visible if the Group Name is not shown.
+Border between groups may not be visible if there is only one group.
+Max width is defined by Layout Area Width.
+Effects may not be visible if the Header Area is full width.
+Effects may not be visible if the Search box size is set to Auto and grows to fill available space.
+Available when Date or Time is shown.
+Define what day "1" represents, either Monday or Sunday.
+Display Date as 1st, 2nd, 3rd, 4th etc.
+Display Month as 1st, 2nd, 3rd, 4th etc.
+Search box will grow to best fit available space.
+Define how wide the Search box should be inside the Header Area.
+May not work in some browsers.
+Enter a web address with the search parameters, eg: "https://vimeo.com/search?q="
+nightTab will add the search term entered into the Search input at the end of the above URL
+Only the Search box width control will change the Width of the Search box.
+Colour and Accent can also be found under Theme.
+Header sticks to the page when scrolling up or down.
+Header moves inline with the content when scrolling up or down.
+Useful for when a Background Image is shown.
+The page will not scroll if Bookmarks are not shown.
+Use the Background colour defined by the Theme.
+Use a custom Background colour.
+May not be visible if Theme Radius is set to 0.
+Resize all elements on the page.
+Take care as some elements could scale up to outside the page.
+Effects may not be visible if the Layout Area is full width or if Bookmarks fill the page.
+Only available when Bookmarks are shown.
+May not work in some browsers.
+Applying a Preset will replace the current Colour, Accent, Font, Style, Radius, Shadow and Shade.
+Saving a Theme will record the current Colour, Accent, Font, Style, Radius, Shadow and Shade.
+Accent Colour and Background Image may need to be changed to best fit the Theme Style.
+Use a Google Font to customise the Clock, Date, Group names and Bookmark Letters.
+Add a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Fredoka One" or "Kanit"
+Clear the field to use the default font "Fjalla One".
+Not all fonts support all weights. Refer to the Google Font page to see which are available.
+Use a Google Font to customise the Bookmark name, URL and form elements.
+Add a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Roboto", "Source Sans Pro" or "Noto Sans"
+Clear the field to use the default font "Open Sans".
+Not all fonts support all weights. Refer to the Google Font page to see which are available.
+Colour shades
+Backgrounds, Bookmarks and Modals use shades from the left.
+Text and form elements use shades from the right.
+For a light look switch to the Light Style and then select a Shade colour.
+Light and dark shades from this colour are used across nightTabs.
+Accent Colour can also be changed from the Header Area.
+The shade appears behind Modals and the Menu.
+Resize all elements on the page.
-Take care as some elements could scale up to outside the page.
-Effects may not be visible if the Layout Area is full width or if Bookmarks fill the page.
-Only available when Bookmarks are shown.
-May not work in some browsers.
-Max width is defined by Layout Area Width.
-Effects may not be visible if the Header Area is full width.
-Effects may not be visible if the Search box size is set to Auto and grows to fill available space.
-Available when Date or Time is shown.
-Define what day "1" represents, either Monday or Sunday.
-Display Date as 1st, 2nd, 3rd, 4th etc.
-Display Month as 1st, 2nd, 3rd, 4th etc.
-Search box will grow to best fit available space.
-Define how wide the Search box should be inside the Header Area.
-May not work in some browsers.
-Enter a web address with the search parameters, eg: "https://vimeo.com/search?q="
-nightTab will add the search term entered into the Search input at the end of the above URL
-Only the Search box width control will change the Width of the Search box.
-Colour and Accent can also be found under Theme.
-Header sticks to the page when scrolling up or down.
-Header moves inline with the content when scrolling up or down.
-Useful for when a Background Image is shown.
-The page will not scroll if Bookmarks are not shown.
-Use the Background colour defined by the Theme.
-Use a custom Background colour.
-May not be visible if Theme Radius is set to 0.
-Effects may not be visible if the Group Name is not shown.
-Border between groups may not be visible if there is only one group.
-Max width is defined by Layout Area Width.
-Effects may not be visible if the Bookmark Area is full width.
-Only available when Letter/Icon and Name are shown.
-Vertical alignment works well with Bookmark Block Style.
-Horizontal alignment works well with Bookmark List Style.
-Only available when Letter/Icon and Name are shown.
-Effects may not be visible if Theme Shadow is set to 0.
-Use the Background colour defined by the Theme.
-Use a custom Background colour.
-Take care as some colours may make the Letter/Icon and Name unreadable.
-Bookmark tiles more square shaped.
-Bookmark tiles more short and wide.
-Display the URL and Controls either at the top or bottom of a Bookmark Tile.
-Adds a unique override colour to each Bookmark.
-Applying a Preset will replace the current Colour, Accent, Font, Style, Radius, Shadow and Shade.
-Saving a Theme will record the current Colour, Accent, Font, Style, Radius, Shadow and Shade.
-Accent Colour and Background Image may need to be changed to best fit the Theme Style.
-Use a Google Font to customise the Clock, Date, Group names and Bookmark Letters.
-Add a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Fredoka One" or "Kanit"
-Clear the field to use the default font "Fjalla One".
-Not all fonts support all weights. Refer to the Google Font page to see which are available.
-Use a Google Font to customise the Bookmark name, URL and form elements.
-Add a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Roboto", "Source Sans Pro" or "Noto Sans"
-Clear the field to use the default font "Open Sans".
-Not all fonts support all weights. Refer to the Google Font page to see which are available.
-Colour shades
-Backgrounds, Bookmarks and Modals use shades from the left.
-Text and form elements use shades from the right.
-For a light look switch to the Light Style and then select a Shade colour.
-Light and dark shades from this colour are used across nightTabs.
-Accent Colour can also be changed from the Header Area.
-The shade appears behind Modals and the Menu.
-Use the Background colour defined by the Theme.
-Use a custom Background colour.
-Take care as some colours may make the Clock, Date and other text unreadable.
-Max image size 5MB, (due to browser local storage limits).
-Take care with large files, they may impact performance.
-If adding more than one URL separate them by spaces or on new lines. If more than one is entered a random background image will be used on load.
-Unsplash can be used for random images, eg:
-https://source.unsplash.com/random/1920x1080/?night,day,sky
-Change parameters after .../random/ for more options. Loading times may vary.
-Restore a previously exported nightTab backup.
-Download a backup of your nightTab Bookmarks and Settings.
-This file can later be imported on this or another deivce.
-Wipe all data and restore nightTab to default state.
-nightTab is free, appreciation is welcome in the form of coffee!
-