Build and host decentralized websites from your Mac

Features
 
CMD + Shift + D = Send

CMD + Shift + D is the keyboard shortcut in macOS's Mail.app to send an email. It is also the keyboard shortcut in Planet's Writer to send a post. So, if you're used to that shortcut in Mail, you can apply it in Planet, too.

Send
 
Article Settings

We have recently updated the Article Settings UI. This documentation explains how to use it.

Article Settings UI
The new Article Settings UI

Slug

Your article uses a UUID in its URL by default, but you can opt for a custom one. For example, many blog sites have a page titled "About Me." You can set its URL slug to "about-me," so it will appear like this in the full URL:

example.eth.limo/about-me/

The URL slug can only contain lowercase letters, numbers, and hyphens. It must be unique.

Type

A new post is created as a blog post by default and will appear in the homepage and RSS feeds. If you change its type to "page," it will not be included in these feeds. The "page" type suits pages like "About Me."

Navigation

If you select "Include in Site Navigation," the page will appear in the site's navigation menu. This feature is designed for pages like "About Me."

You can also use this feature to point to an external page. For instance, you can add a page titled "Discord," include your Discord invite link in the "External Link" field, and choose to include it in the site navigation. This will make it appear as a link to your Discord in the top navigation area.

Navigation weight is used for ordering the links; higher numbers appear later in the sequence.

Top Navigation
Insider Builds is part of the top navigation
 
Templates

Build New Template

You can create a new template using HTML, CSS, and JS. When the Planet app renders a site, the template can utilize the values provided in the context by the app. The template system is powered by Stencil, a simple yet powerful template language for Swift.

Forking from the default Plain template is an excellent starting point for building your own new template, as it includes most of the code examples you will need.

Template Browser

You can find all the currently installed templates in Tools -> Template Browser. If you plan to build your own template, VS Code is recommended. After installing VS Code, you can right-click on a template and select "Open in VS Code."

Template Browser: Open in VS Code
Tools -> Template Browser -> Open in VS Code

Add Template from GitHub

By default, all templates are stored in the following folder:

~/Library/Containers/xyz.planetable.Planet/Data/Documents/Planet/Templates

For instance, there is a new work-in-progress template on GitHub:

https://github.com/Planetable/SiteTemplateCroptop

To add this template to the templates folder, use these commands:

cd ~/Library/Containers/xyz.planetable.Planet/Data/Documents/Planet/Templates
git clone https://github.com/Planetable/SiteTemplateCroptop croptop

Once a new template has been added to the templates folder, you must restart the app for it to be recognized.

After the new template is recognized, you can find it in the Template Browser under the Tools menu, or you can choose to use it from the Edit Planet option.

Template Browser
Tools -> Template Browser
Select Template
Edit Planet -> Select Template

Built-in Templates

These are the built-in templates in the folder:

When the app updates, it will attempt to update these templates as well. However, if a .git subfolder is detected, it indicates the folder could be part of the developer environment, and the app will not overwrite it.

Template Showcase: Plain

This is the default template. It resembles a minimalist operating system look and feel. It features both dark and light modes.

Template: Plain
planetable.eth with the Plain template

Template Showcase: Grid

If your blog consists of many photos, this is the template for you. It features both dark and light modes.

Template: Grid
yihanphotos.eth with the Grid template

Template Showcase: 8-bit

This experimental template demonstrates that complex JS and graphics are possible with Planet templates. It has a retro gaming vibe.

Template: 8-bit
gamedb.eth with the 8-bit template
 
WalletConnect Demo

Here is a video demo of the new tipping feature. You can learn more about this feature in the documentation:

https://www.planetable.xyz/guides/walletconnect/

It is implemented with WalletConnect V1.

 
dWebServices.xyz

In September's feature update, we added integration with dWebServices.xyz.

dWebServices is an IPNS record hosting service. When the integration is enabled in Planet, each time you update your website, the latest CID will be sent to dWebServices to be updated in the IPNS record hosted there.

To start, first, you can sign up with your Ethereum wallet. The service can detect ENS domains already in the wallet, or you can add any domain to the dashboard. Then when you edit planet, you will find a section to enter the domain and API key here:

dwebservices-api-key

Then, in addition to the built-in IPNS record in Planet, you will now have another IPNS record hosted with dWebServices. The hosted IPNS record usually has better discoverability because it's on a well-connected server. That is especially useful for users running Planet from their laptops since laptops are not meant to be running 24x7 as servers.

You can set that hosted IPNS record as your ENS contenthash or .bit dWeb record too.

I hope you will find the new integration useful.

dWebServices is in the latest Gitcoin Round 15, a program that funds software projects. You can donate to the dWebServices project, and the project will receive a matching amount from Gitcoin sponsors.

So now, for the optimal experience for laptop users, the only missing piece is that we would need a good pinning service that accepts CID or IPNS records. Then users running Planet from their laptops would only need to wait a bit each time they updated their websites. As soon as confirmations from remote services arrive, they can close the lids, and the content will be hosted from those services, while authoritative versions are still controlled locally.

 
.bit
hello-dotbit

In September's feature update, Planet added support for another blockchain-based domain name:

.bit

Follow the link above, and you can register your .bit domain name.

.bit also supports IPFS as a content source. So you can use the IPNS built with Planet.

dotbit-manage

A difference is, when setting content source for .bit domain name, you will not need to pay extra gas, that is because:

  1. The cost to register a .bit domain name contains a certain amount of gas for future changes on the chain.
  2. The blockchain .bit depends on, Nervos Network's design keeps cost low for computational tasks.

So, the blog you are currently visiting has a .bit domain too, and you can access it via .bit's Public dWeb Gateway:

When you are trying to follow other Planets, .bit is now also supported:

follow-bit
 
Planet and WorldWideWeb

WorldWideWeb is an HTTP server from The Iconfactory. Craig Hockenberry made the app because it is becoming harder and harder to start a simple Web server as Apple was removing open source components like the Apache HTTPd in recent years.

worldwideweb

The name, WorldWideWeb, is a homage to the world's first HTTP server, which was running on Tim Berners-Lee's NeXT computer. You can see that computer on WorldWideWeb's help page.

first-web-server

The app works: select a folder, and WorldWideWeb starts listening on port 8080 to serve the website inside the folder. Then you can visit that website by navigating to localhost:8080 in a browser.

In the recently released 0.8.2 update for Planet, we added support for WorldWideWeb. Click on one of your Planets, and you will find a new menu item Develop -> Open in WorldWideWeb. You can use WorldWideWeb to serve the locally built static site.

open-in-worldwideweb-en

If you are developing your own template for Planet, now it is much easier to see the changes. After making any changes, click Develop -> Rebuild then you can see the updated site on localhost:8080.

the-workflow-en
worldwideweb-icon

WorldWideWeb is available on the Mac App Store for free:

WorldWideWeb for macOS