Content blocks

Owlstown supports different kinds of content blocks to add rich content into your pages. You can format your text blocks using a visual editor or Markdown syntax.

You can also embed:

  • Google Docs, Slides, and Sheets

  • Twitter tweets and timelines

  • Videos from Youtube and Vimeo

  • Diagrams

  • Owlstown lists

Visual text

Add text to your content and format it using the visual text editor.

The visual editor supports these formatting actions: bold, italics, add a link, add an image, heading, blockquote, code, ordered list, unordered list, indent, and outdent.

Markdown

Add text to your content and format it using the Markdown text editor. This text editor allows you to format your text content using the Markdown syntax. Visit the Markdown Guide for details on the Markdown syntax.

Pictures

Add pictures to your content.

When you click on the area, the picture selector will appear where you can select pictures (as described here).

After you select a picture, you can edit how it appears on the page:

  • The maximum width of the picture.

  • The caption that appears under the picture.

Google Docs

Embed documents from Google Docs, Sheets, and Slides.

Google Docs

To embed a Google Doc document into your site, open the document. Click File on the menu, then click Publish to the web.

Click the Publish button.

Stay on the Link tab and copy the embed link.

Go to the Owlstown Editor and paste the embed link you copied into the URL field in the Google Docs block.

Google Sheets

Open the Sheet from Google Docs that you want to embed. Click on the File menu, then click on Publish to the web.

Click the Publish button.

Stay on the Link tab and copy the embed link.

Go to the Owlstown Editor and paste the embed link you copied into the URL field in the Google Docs block.

Google Slides

To embed a Google Slides slide into your site, open the slides. Click File on the menu, then click Publish to the web.

Click the Publish button.

Stay on the Link tab and copy the embed link.

Go to the Owlstown Editor and paste the embed link you copied into the URL field in the Google Docs block.

Google Forms

To embed a Google Forms form into your site, open the form. Click Send on the navigation bar.

Switch to the Link tab (one with the link icon) and copy the link.

Go to the Owlstown Editor and paste the embed link you copied into the URL field in the Google Docs block.

Twitter

Owlstown supports embedding tweets and timelines from Twitter. Some examples of Twitter embeds.

Embedded tweet

An embedded Tweet displays an individual Tweet from Twitter.

Copy the URL of an individual Tweet and paste it into the URL field.

https://twitter.com/owlstown/status/1279146914521452544
Example of an embedded tweet

Embedded timelines

An embedded timeline displays a stream of Tweets. Use it to showcase profiles, collections, lists, and moments.

Copy the URL of a timeline and paste into the URL field.

https://twitter.com/owlstown
Example of an embedded timeline

Video

Embed videos from Youtube and Vimeo.

Youtube

Visit the Youtube video that you want to embed into your site. Copy the URL.

Go to the Owlstown Editor and paste the Youtube URL you copied into the URL field in the Video block.

Vimeo

Visit the Vimeo video that you want to embed into your site. Copy the URL.

Go to the Owlstown Editor and paste the Vimeo URL you copied into the URL field in the Video block.

Diagrams

Owlstown supports creating diagrams using Mermaid, a Javascript library that lets you represent diagrams using text and code.

Flowchart

graph TD;
A-->B;
A-->C;
B-->D;
C-->D;

Sequence diagram

sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!

Owlstown lists

You can add lists of your Owlstown content, such as: publications, projects, courses, posts, pages.

The editor for the Owlstown list block looks like this. You can edit 3 things:

  • the number of items to show

  • the type of list to show: publications, projects, courses, posts, pages.

  • the heading of the block.

The Owlstown list block above looks like this on the page.

An Owlstown list will only appear on your website if there is at least one item in the list.

On the home page

The home page of your website is pre-filled with 5 blocks of Owlstown lists. You can choose to remove these.