The new version of Podlite is available! L<Podlite|https://github.com/zag/podlite-desktop> - 
 open-source desktop pod6 editor for Windows, Linux, and Mac.

Image

TITLE

DESCRIPTION

The new version of Podlite is available! L<Podlite|https://github.com/zag/podlite-desktop> - 
 open-source desktop pod6 editor for Windows, Linux, and Mac.

head

item

code

=begin code :allow 
=for Toc :title('List of media')
B<Image, Diagram>


=for Image B<:caption>('This is a logo of Podlite')
https://github.com/zag/podlite-desktop/blob/master/dist-assets/linux-icon/256x256.png?raw=true

=for Diagram B<:caption>('Caption of diagram')
 graph LR
 A[Square Rect] -- Link text --> B((Circle))
 A --> C(Round Rect)
 B --> D{Rhombus}
 C --> D
=end code

C<:caption> used to create a table of contents: L< Toc for =Image and =Diagram example|https://pod6.in/#p=%3Dfor+Toc+%3Atitle%28%27List+of+media%27%29%0AImage%2C+Diagram%0A%0A%0A%3Dfor+Image+%3Acaption%28%27This+is+a+logo+of+Podlite%27%29%0Ahttps%3A%2F%2Fgithub.com%2Fzag%2Fpodlite-desktop%2Fblob%2Fmaster%2Fdist-assets%2Flinux-icon%2F256x256.png%3Fraw%3Dtrue%0A%0A%3Dfor+Diagram+%3Acaption%28%27Caption+of+diagram%27%29%0A++++graph+LR%0A++++++++A%5BSquare+Rect%5D+--+Link+text+--%3E+B%28%28Circle%29%29%0A++++++++A+--%3E+C%28Round+Rect%29%0A++++++++B+--%3E+D%7BRhombus%7D%0A++++++++C+--%3E+D%0A>.

=begin code :allow 
Z<>=B<for> Image B<:link>Z<><https://github.com/zag/podlite-desktop>
https://github.com/zag/podlite-desktop/blob/master/dist-assets/linux-icon/256x256.png?raw=true
B<This is a logo of L<Podlite|https://https://github.com/zag/podlite-desktop> editor>!
=end code

Will be rendered as image inside C<<a href="...">...</a>>.
See this L<example|https://pod6.in/#p=%3Dfor+Toc+%3Atitle%28%27List+of+media%27%29%0AImage%2C+Diagram%0A%0A%0A%3Dfor+Image+%3Alink%3Chttps%3A%2F%2Fgithub.com%2Fzag%2Fpodlite-desktop%3E%0Ahttps%3A%2F%2Fgithub.com%2Fzag%2Fpodlite-desktop%2Fblob%2Fmaster%2Fdist-assets%2Flinux-icon%2F256x256.png%3Fraw%3Dtrue%0AThis+is+a+logo+of+L%3CPodlite%7Chttps%3A%2F%2Fhttps%3A%2F%2Fgithub.com%2Fzag%2Fpodlite-desktop%3E+editor%21%0A%0A%3Dfor+Diagram+%3Acaption%28%27Caption+of+diagram%27%29%0A++++graph+LR%0A++++++++A%5BSquare+Rect%5D+--+Link+text+--%3E+B%28%28Circle%29%29%0A++++++++A+--%3E+C%28Round+Rect%29%0A++++++++B+--%3E+D%7BRhombus%7D%0A++++++++C+--%3E+D%0A%0A>.

All features also available at the online editor: L<https://pod6.in>

Pre-build files: L<Podlite releases|https://github.com/zag/podlite-desktop/releases>.

Source code repository: L<Source code|https://github.com/zag/podlite-desktop>.

nested

Will look forward to your feedback on L<GitHub issue|https://github.com/zag/podlite-desktop/issues> page.

root

Podlite ver. 0.3.0 


I want to give you little tips to help you create your own website/blog with "Podlite for Web"


Start you own blog/site with Podlite for Web


Recently I released the tool L<Podlite for Web|https://github.com/podlite/podlite-web> which helps to create websites and blogs using the markup language L<Podlite|https://github.com/podlite/podlite-specs>. It replaces my previous engine based on L<gatsby|https://github.com/zag/gatsby-starter-pod6>.

I want to give you little tips to help you create your own website/blog.


For startup you need C<yarn> should be installed. L<Podlite-web|https://github.com/podlite/podlite-web> is also available as Docker image.

It is recommended to install Yarn through the npm package manager, which comes bundled with Node.js when you install it on your system


Once you have npm installed you can run the following both to install and upgrade Yarn:


Then you checkout the repo and start the development server:


And after open URL: L<http://localhost:3000/>

caption

This is the default page. The sources of this page are available in the C<pub> directory. You can edit the file C<pub/index.pod6> and see the changes.

You can also explore the C<examples> directory and check use cases.

The most useful example is C<examples/03-blog>.

To play with it, add the variable C<POSTS_PATH>:

=begin code :allow 

B<POSTS_PATH>='examples/03-blog' yarn dev

=end code

And then open the URL: L<http://localhost:3000/>

C<examples/03-blog> contains the following files:

=begin code :allow 

├── about.pod6 # static I</about> page
├── blog-post.pod6 # example of a blog post
├── content.pod6 # I</contents> page with TOC for blog at all
├── B<index.pod6> # this is an index file of the website
├── journal.pod6 # file with selectively published notes 
├── logo.png # image used for I<:favicon> and in =Image block
├── now.pod6 # static I</now> page
└── styles.css # css for custom styles 

=end code

The file C<index.pod6> is the same as the file C<index.html> for a normal website. This is the root file for the website and also the configuration for the website in general.

Let's see the C<=pod> section from the example for this:

=begin code :allow 
=begin pod 
= :favicon<./logo.png>
= :puburl<http://example.com>
= :globalStyles("./styles.css")

=TITLE Podlite-web Starter Blog

...
=end pod
=end code

The following configuration options for the C<=pod> block are used :

table_head

   =====================================================================================


table_row

table

The semantic block '=TITLE' in C<index.pod6> is used as the title of the site.

Each static page has a fixed URL. This is possible with the C<:puburl> attribute for the C<=pod> block. For example, let's look at C<about.pod6>:

=begin code :allow<Z B I>
Z<>=begin pod :pubdate('2022-08-08 23:00:00') B<:puburl>Z<></about>
Z<>=TITLE About page
Z<>=end pod
=end code

with I<pubdate> - is needed to indicate that this page is publicly available from a certain date.
Pages without I<pubdate> will be skipped when published.

Pages without I<puburl> are treated as blog posts and the URL is generated based on the publication date.

=begin code :allow<Z B I>
Z<>=begin pod :pubdate('2012-08-08 23:00:00') 
Z<>=TITLE Blog post 
Z<>=end pod
=end code

will be available at url C</2022/8/6/1/blog-post>.

The C<=TITLE> block is used for the public URL and as the page title.

C<=Toc> is a block that inserts a table of contents (TOC). Usually a table of contents is an index of headers in a document.

By default C<=Toc> block inserts header with all levels. For example for document which contains C<=head1>, C<=head2>, C<=head3> TOC may be:

The number of levels (i.e., depth) of the TOC is configurable. For example, to place a table of contents listing only top- and second-level headings:


=begin code
  About
    Intro
  Content
    Story 1
    Story 2
  Links
=end code


To add title for TOC use C<:title> attribute:

=begin code
Table of content
  About
    Intro
  Content
    Story 1
    Story 2
  Links
=end code


C<=Toc> block support comma separated list of block names to build TOC for. It is possible to mix various block.
As this:

For example, to place a index of images, diagrams (assuming a user-defined C<Diagram> block):

=begin code
Table of visuals
 Logo image
 Flow diagram
=end code


Here are is few notes about how TOC is builds:


Podlite ver. 0.3.0

Highlights of this version

Get Podlite

Useful links are: