Edit: Whoops, didn’t realise the weekly update would be at the same time, sorry for stealing some of your thunder!
Hey all, these updates seem to be coming thick and fast at the moment.
The editor now has support for the following markdown:
*** horizontal rules
___ horizontal rules
--- horizontal rules
- Inline code blocks using single backticks
- Multiline code spans using three backticks, as well as support for extracting the language you’re targeting.
I’ve been doing a lot of thinking and tinkering with the theme system over the past few days and I’ve settled on an idea I like. It’s worth mentioning: this is a first draft, work in progress, and is very likely to change based on feedback or code complexity.
For most users, they will simply go to the theme page, and either click on one they like, or import a theme from a SAFE network URL they found. This allows people to make and share themes easily, and for users to import an entire theme with just a single URL.
The manifest describes the theme, gives it a displayable name, a banner image to show alongside the name, and tells the theme compiler about the assets the theme contains.
Themes are built using Vue.js, but don’t worry - I’ve abstracted away all of the complexity and left just a couple concerns to deal with. Theme template files contain the basic HTML for the webpage, as well as some
text/x-template script tags which can be used for telling the Vue application what HTML it should use for each section.
… And that’s it. It’s that simple to create a theme. (obviously, you’d have to spend time styling it and what not, but that’s to be expected.) A theme author can create the manifest, publish the files which the manifest points to on the SAFE network and the Phantom theme compiler takes care of the rest. It inlines all of the assets and creates a hash-routing based single page Vue app.
Here is a work-in-progress example of a compiled website, ready to be deployed to the SAFE network:
At the moment, the only CSS in the theme is a red background, but all of the code is there and all I have left to do is create the “bundle” containing the information about the posts and generate a Vue single-page-app route for each post and it’s done.
The final size of a website deployed using Phantom is about 120KB (uncompressed!) and it contains all the code needed to bootstrap the application, handle routing and inject each post / generate a post listing page:
Like I’ve said, this is a working proof-of-concept and it’s a bit rough around the edges, but the long and short of it is:
- The Phantom app will contain a handful of basic themes
- End-users can select a theme by clicking a single button
- End-users can import a theme created by another author by clicking a button, inputting a URL and clicking “install”
- Theme authors can create and share themes easily and quickly, with next-to-zero knowledge of how Vue works internally.
All this functionality will be available within the SAFE network as soon as RFC0060 has been accepted / implemented, as without it there’s no way for web apps to create FilesContainers directly in the SAFE network. So at the moment, all of the SAFE calls are being mocked, but I’m fairly (99%) confident as soon as that RFC is implemented all I should need to do is deploy and it should work out of the box.