Publii revamped now available, with fresh UI, rebuilt editors and page previews
Bob MitroIt's been a while since we've put out a new version of Publii, but that doesn't mean that we weren't working on it! As we move towards the full release and with the core functionality of Publii already in place, we wanted to get the the app ready for the future, so we've completely rebuilt it to utilize the expanded features of Vue.js, as well as added some nice UI enhancements and other quality of life improvements that makes this update essential.
Unified UI using Vue.js
One of the biggest changes to Publii is something that you, for the most part, won't be able to see. By switching to Vue.js as our JavaScript engine we've been able to rewrite the core code of Publii to better unify many elements of the UI and enable us to re-use code in several areas, rather than building individual solutions for each element. Plus, Vue.js provides a solid set of ready-made components and libraries that we can take advantage of, saving us a whole lot of time and giving us a solid foundation for expansion.
So what will this do for Publii and our users? Though it won't have any significant impact initially, by using a flexible base we'll be able to build upon existing features faster and more easily than ever before; whether creating complex views, introducing and testing new functionalities, or just making general improvements. And since Vue.js is a popular, widely-used library, it'll be easier for our contributors to work with and add to Publii. So while switching over to Vue.js took a lot of time and effort, we'll be able to see the fruits of our labor once we start expanding Publii's feature set!
App visuals makeover
Since Publii had to be rewritten to take advantage of Vue.js' features, we took the opportunity to perform some spring cleaning in the UI design; there's no big changes to worry about other than the ones mentioned in the next section of this article, but hopefully you'll notice that the app on the whole looks more professional and coherent, which is just what we need with the move out of beta in sight.
With so many changes in the app's backend we're anticipating a few teething issues, so we'd be very grateful for any bug reports should you encounter any visual glitches or other bugs so we can get things ironed out ASAP. Details of where to submit any bugs can be found at the end of this article.
Rebuilt menu, tag and author editors
One of our goals when unifying the UI was to make each section of the app feel familiar and connected even when using them for the first time. This issue may not be immediately obvious to people who have become familiar with Publii's functionality, but when jumping in for the first time the small differences between the various edit pages can make finding solid ground to build from a little bit harder than it needed to be.
For this revamped Publii build, we've introduced a new sidebar interface for our tag, author and menu editors, bringing them more in-line with the functionality found in other previously-updated areas like the post editor. Their functionality remains the same, so you'll still be able to do everything you could before, but introducing the sidebar means that all the core functions that a newcomer might want to use are linked in a single interface style that will make it easier for them to get comfortable using the app.
New site switcher
Publii has supported multiple websites from the start, but jumping between websites was always a little bit tedious if you're working on multiple small changes across your selection. To save a little bit of time, we've added a new site switcher to the top of the Publii interface; now you'll see your current website's name in the topbar, and by clicking it you can open a drop-down menu with all your other sites. No more jumping back and forth to the site list page every time!
Redesigned AMP sites
Accelerated Mobile Pages provides a super-fast version of your website which can be delivered quickly via Google search results, giving users with limited internet speeds the same rapid access to your content. Publii already includes an option to create an AMP version of your site for this purpose, but with this update we've reworked how the pages are built to make them more visually-appealing and in-line with your standard site's look.
What's more, your AMP site will now react to your post settings too, so if additional elements such as post date, author etc...are disabled on your main site, then they will no longer appear on the AMP version, giving you more control over how your site is presented.
Note: To get your hands on the new AMP versions of your site, you'll need to make sure that you update your theme as well as the app. If you're not sure how to do this, you can learn more in the installing and updating themes section of the Publii documentation.
New page preview rendering process pop-up
The option to preview changes on your site is an essential one, allowing users to get their pages looking just right before putting them out in the wild. However, when actually preparing the render we felt that Publii didn't clearly communicate the rendering process; once users clicked the button they simply had to wait until the completed render opened in their browser.
To rectify this, we've added a rendering popup that appears when the preview button is pressed, showing the progress of the render. Publii will now also more clearly communicate errors in the rendering process, making it easier for users to diagnose what exactly is causing display issues on their pages.
Improvements and bug fixes
What would a Publii release be without a few improvements and fixes? Buggy, we expect. But thankfully our team have been fixing a few things along the way that we missed with the last stop-gap release that included many of the bugfixes and improvements that we were planning to implement, as follows:
- Added option to open the last-viewed page on app start.
- New color picker added; no functionality changed, but it fits better with the Publii UI.
- Fixed issue with _headers file and page map generation.
- Corrected application crash when the page name was changed to the same name as an already-existing page.
- Fixed crash caused when an invalid theme in the themes directory.
Summing up
There was a long wait between releases as we worked on the new and improved Publii, but the benefits of doing so will be immeasurable in the long run; being able to more easily expand Publii's features and implement new ideas, layouts and options will allow Publii to grow even faster than before, and the switch to Vue.js will empower our experienced users to start contributing to the project and bring even more new additions to the table.
Though we're moving towards getting Publii out of beta, there's still work to do, not least of which is to squash any lingering bugs, as well as any new ones that the rebuild may have introduced. We need your help now more than ever to report bugs or other issues that you run into so that we can get on the case with our bug swatters (otherwise known as the dev team!). You can let us know about any issues you've discovered via Publii's Community Hub. Though we've locked down Publii's core features we're still always interested to hear of any ideas you may have for future features or additions, as well as general feedback, so please do drop by and let us know what's on your mind!
Thank you to all of you for your patience while we worked on this update, and look forward to more cool stuff to come in the future.