From: Dan Brown Date: Sun, 29 Jan 2023 19:04:27 +0000 (+0000) Subject: Added images for v23.01 post X-Git-Url: http://source.bookstackapp.com/website/commitdiff_plain/32b227988554f79f1c79e71ac859f9aa8ed847a8 Added images for v23.01 post --- diff --git a/content/blog/bookstack-release-v23-01.md b/content/blog/bookstack-release-v23-01.md index 9cab411..0449bc9 100644 --- a/content/blog/bookstack-release-v23-01.md +++ b/content/blog/bookstack-release-v23-01.md @@ -30,14 +30,14 @@ This addition allows the upload and easy setting of a custom application icon th by browsers as the icon for a tab, or often by mobile devices to use as an "App" icon when creating a webpage shortcut. -TODO - Image of new control +![Screenshot of an "Application Icon" setting with a preview image showing a cat](/images/2023/01/app_icon_setting.png) This is a separate option to the application logo since they're used in different areas in different ways, and the icon is expected to be a fixed-square size whereas the logo may vary in aspect ratio. Upon upload BookStack resizes the provided image into a range of sizes for good general compatibility across different browsers, devices and platforms. -TODO - Image of icon on mobile device? +![A row of mobile app icons, with a BookStack-labelled cat icon in the centre](/images/2023/01/mobile_app_icon.webp) While you could already hack-in a custom icon via various means, this should it much easier and accessible to those that don't want to hack about with code or web-servers. @@ -48,7 +48,7 @@ Continuing the theme of customization settings, the provided color options have The main addition is that different controls are now available for light and dark mode, meaning you can set different colors to best suit the mode and theme. -TODO - Image of color scheme block +![View of a "Application Color Scheme" panel with color controls and separate dark & light mode sections](/images/2023/01/app_color_scheme.png) To support choosing good colors, the interface will jump between light or dark mode as you select the relevant tabs. It was always tricky to select colors that worked well cross-theme, while ensuring good contrast and legibility, @@ -60,7 +60,7 @@ since the primary color was also used for many non-text focused use-cases such a which made choosing a color, which worked across all these areas, difficult to achieve. Splitting these out now provides a little more control to get the right look with great usability. -TODO - Link color usage? +![Screenshot of a page view in BookStack, showing different colors between the actions sidebar and header banner](/images/2023/01/app_link_color_usage.png) BookStack has set new defaults for the dark-mode colors, but those upgrading will find their color settings auto-copied across to ensure minimal change upon system update, although you can just then change these settings thereafter. @@ -77,24 +77,21 @@ have a positive impact to all users. Changes include: - Multi-select and drag, once previously available, has now been fixed. - The "Other books" sidebar is now sticky on desktop, meaning you don't need to scroll back up to find this box when sorting long books. - The book sort boxes are now collapsible, which can useful when sorting multiple large books. +- Sort items show drag-handles to make it clear you're able to drag & drop. - Some intro text has been added to help guide users. -TODO - Image of sort with a collapsed and non-collapsed book, showing expanded menu controls for a page. +![Screenshot of the BookStack sort view for a book, featuring a collapsed book and a dropdown menu providing move actions for a page](/images/2023/01/book_sort.png) ### Code Block Additions Since v22.11 a few new code languages have been added for code-highlighting and code-editor support: - Scheme -- SQL variants: - - MySQL - - MSSQL - - PostgreSQL - - SQLite -- Twig -- Smarty - -TODO - Image of code editor with one of these used? +- SQL variants: MySQL, MSSQL, PostgreSQL, SQLite +- Twig (PHP Templating Engine) +- Smarty (PHP Templating Engine) + +![Screenshot of the BookStack code editor, showing "Twig" templating code being correctly highlighted](/images/2023/01/twig_code.png) ### OIDC Auth ID Configuration Option diff --git a/static/images/2023/01/app_color_scheme.png b/static/images/2023/01/app_color_scheme.png new file mode 100644 index 0000000..446f9c6 --- /dev/null +++ b/static/images/2023/01/app_color_scheme.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ce6d3a74480fa33c78f0a5dc2611931086b7c04235218ec5aacee533bbcd7772 +size 54455 diff --git a/static/images/2023/01/app_icon_setting.png b/static/images/2023/01/app_icon_setting.png new file mode 100644 index 0000000..51d7f17 --- /dev/null +++ b/static/images/2023/01/app_icon_setting.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:f0ef7b7b06d3e242f724d05118e4efccfd138337f8b3ed4ab4fd44c6e559d3a4 +size 14040 diff --git a/static/images/2023/01/app_link_color_usage.png b/static/images/2023/01/app_link_color_usage.png new file mode 100644 index 0000000..6a30c87 --- /dev/null +++ b/static/images/2023/01/app_link_color_usage.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7be929c2f3a804f25d02364c3554abf6fc824b85deccc072d934bf21ea15227c +size 127987 diff --git a/static/images/2023/01/book_sort.png b/static/images/2023/01/book_sort.png new file mode 100644 index 0000000..517a49a --- /dev/null +++ b/static/images/2023/01/book_sort.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:38a1f13bd5614bfbae8367d03a5f4ecc32c455fc3464268a53eb586dbc8cc2cd +size 54519 diff --git a/static/images/2023/01/mobile_app_icon.webp b/static/images/2023/01/mobile_app_icon.webp new file mode 100644 index 0000000..07d1d39 --- /dev/null +++ b/static/images/2023/01/mobile_app_icon.webp @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:8c84ccb56ac6bd4e20049a10cf5a008d2e9a4a619c7ecf16b46c159079c023e2 +size 40016 diff --git a/static/images/2023/01/twig_code.png b/static/images/2023/01/twig_code.png new file mode 100644 index 0000000..beedd74 --- /dev/null +++ b/static/images/2023/01/twig_code.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:975e3d93bdf3959b0d54a217bed1c9e241e47294ac8076a4e7f3382efeccfe11 +size 35830