alfredbaudisch / pardall_markdown_phoenix_demo

Sample reactive Blog and Documentation website with Phoenix LiveView that adapts immediately to Markdown files and folders, powered by PardallMarkdown.

PardallMarkdown Phoenix LiveView Demo

Demo project for the PardallMarkdown framework.

Production website running with this template: https://pardall.xyz. Notice that the website Pardall.xyz is my own experimental Wiki, and the content is not the same as the demo sample content used in this demo application, but other than that, it's the same source code (pardall.xyz content comes from the alfredbaudisch/pardall.xyz_content repository).

Demo Features

• Example Phoenix.LiveView website that contains both a Blog and a Documentation section, both powered by PardallMarkdown instant updates.
  • Showcases archive pages, trees, single posts, sidebars, table of contents, next and previous posts, static images, etc.
• Sample content, with nested hierarchies, custom post metadata and taxonomy overrides and custom sorting. The sample content also includes local images and links.
• HTML helpers for PardallMarkdown content trees, taxonomy trees and table of contents.
• HTML helper and example to create a collapsible PardallMarkdown content tree.

Video Demo and Tutorial

See PardallMarkdown in action and learn how to use it by following this video:

Want to know more?

Check PardallMarkdown repository's README and or the library documentation.

How to run the demo?

• Configure the application. You can use the included local "sample_content" remote_repository_url: "https://github.com/alfredbaudisch/pardall_markdown_sample_content" sample content repository, or change to another folder and/or another repository.
  • Remember that root_path is required, but remote_repository_url is optional. You can use content from a folder, without pulling it from a repository.
• Install dependencies with mix deps.get
• Install JS deps (currently only "top_bar" to make the LiveView experience a little better): cd assets & npm install
• Start Phoenix endpoint with mix phx.server
• Visit localhost:4000.
• Change content from inside the content folder and see it being reflected in the website.

How to use the Sample application for your own website?

• Change the configuration accordingly, especially the root_path path.
• Adjust the Phoenix.LiveView views and components accordingly.
• Deploy!

Copyright License

Copyright 2021 Alfred Reinold Baudisch (alfredbaudisch, pardall)

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

pardall_markdown_phoenix_demo's Issues

Make a persistent sidebar component

The current example sidebar resets every time a new post is opened, losing any expanded/collapsed category.

Make the sidebar its own live view component, to persist selections.

When headers in a page start at the 2nd level and the next header is also 2nd level, it gets wrongly nested inside the previous one in the Table of Contents

This is not related to the framework, it's the table of contents HTML helper from this demo project that is dealing with this wrongly. Although this is a demo project and demo feature, this repository is as important as PardallMarkdown itself, since it shows a real application for the framework.

This is probably going to be used by all Phoenix applications that use PardallMarkdown, including my own Wiki, like the wrong nesting in the About page.

Problem

Example Markdown:

%{
  title: "Page"
}
---

## Links
Content...

## More about me
About content...

## Wrong nesting
Nested content...

This is how the table of contents is being generated:

Expected

This is the expected result, since they are at the same level (h2):

Source

• Generate TOC: pardall_markdown_helpers.ex#L195
• Usage: single_post.html.heex#L10