Felizia

Felizia is a website application generator that renders your site the same way as you organize your content. Felizia generates a dynamic isomorphic web application and exposes itself as a Single page application (SPA) but uses Server Site Rendering (SSR) to render the initial page request.

Felizia config and content handling is heavily inspired by the static website generator Hugo but built using SAFE stack components such as Fable, Elmish and Giraffe.

Felizia uses Feliz and Feliz.ViewEngine for templating and Markdown for content.

Features

• Content Management Scalable and manageable content. Folders becomes sections. Files becomes pages. Menus are generated from the top level sections and summaries are generated from the content.
• Server Side Rendering (SSR), the initial request on every URL will be server side rendered (SSR). This gives better SEO (Search Engine Optimization), perceived quicker loading speed and enables previews in some social media sharing (Facebook, twitter, etc).
• Single Page Application (SPA), subsequent navigation and requests will be client rendered. This gives quicker, almost instant switching between pages.
• Feliz Templating, templates are separated from the content and written in F# using Feliz DSL syntax.
• Multilingual Mode, Internationalization (i18n) of pages and words. Translate whole pages or single words or sentences used in e.g navigation buttons or menus.
• Markdown. content files are written in Markdown.
• Front-matter, allows you to add metadata in Yaml to your content files.
• Menus, are automatically generated based on how you organize your content.
• Site Configuration, the site is configured using Yaml configuration.
• Pagination, both server and client side pagination.
• Themes, themes are compiled as separate assemblies which makes it easy to share and change.

Installation

Felizia is available as NuGet packages. To install:

Using Package Manager:

Install-Package Felizia
Install-Package Felizia.ViewEngine

Using .NET CLI:

dotnet add package Felizia
dotnet add package Felizia.ViewEngine

In addition you will need to install a theme:

Using Package Manager:

Install-Package Felizia.Arctic
Install-Package Felizia.Arctic.ViewEngine

Using .NET CLI:

dotnet add package Felizia.Arctic
dotnet add package Felizia.Arctic.ViewEngine

Install pre-requisites

You'll need to install the following pre-requisites in order to build SAFE applications

• The .NET Core SDK
• FAKE 5 installed as a global tool
• The Yarn package manager (you an also use npm but the usage of yarn is encouraged).
• Node LTS installed for the front end components.

Work with the application

A demo application is available in the app folder. To concurrently run the server and the client components in watch mode use the following command:

cd app
fake build -t run

Content Organization

All content is organized in the content folder. Pages are added as Markdown files e.g Welcome.md. Pages can be organized in Sections by placing them inside folders e.g information/Welcome.md, thus the sections are generated based on how you organized your content. Content can be translated to other languages by adding a language code to the file e.g Welcome.nb.md or Welcome.fr.md.

The Felizia Technology Stack

Felizia is built on the shoulders of some amazing F# technology. You will find more documentation about the used F# components at the following places (alphabetical order):

• Elmish, MVU pattern for Fable applications
• Fable, F# compiler powered by Babel
• Feliz, React DSL
• Feliz.Bulma, React DSL
• Feliz.ViewEngine, Server side React DSL
• Giraffe, ASP.NET Core web framework
• Legivel, YAML parser
• SAFE Stack, An and-to-end, functional-first technology stack.

Documentation

Documentation is currently self-hosted. Run the application to browse the documentation.

Terminology and Links

• Configuration

  • Configuration file (https://gohugo.io/getting-started/configuration/)

• Content (https://gohugo.io/content-management/organization/)

  • Organization (https://gohugo.io/content-management/organization/)
  • Sections (https://gohugo.io/content-management/sections/)
  • Menus (https://gohugo.io/content-management/menus/)
  • Multilingual and i8n (https://gohugo.io/content-management/multilingual/)
  • Front matter (https://gohugo.io/content-management/front-matter/)

• Templates

  • Overview (https://gohugo.io/templates/)
  • Single page templates (https://gohugo.io/templates/single-page-templates/)
  • List page templates (https://gohugo.io/templates/lists/)
  • Section templates (https://gohugo.io/templates/section-templates/)
  • Lookup order (https://gohugo.io/templates/lookup-order/)
  • Partials (https://gohugo.io/templates/partials/)

• Variables

  • Site (https://gohugo.io/variables/site/)
  • Page (https://gohugo.io/variables/page/)

• Taxonomies (currently not implemented), i.e tags (https://gohugo.io/content-management/taxonomies/)

Differences from Hugo

• Felicia is a dynamic (non-static) website application generator. Static-generation of all pages should be possible and may be added in future releases.

• Templates, i.e Layouts and Partials needs to be compiled and thus be part of both Client.fsproj and Server.fsproj. Mapping of URLs to custom templates must be done in Routing.fs. If not mapped then default templates, i.e ListPage.fs or SinglePage.fs will be used for sections and pages.

• Only YAML supported for config. Other configuration languages such as JSON and TOML might be added in future.

• Page.Site is not available from pages. The site is however directly available in the model. This is to reduce the size of JSON state that needs to be transferred to the client in the initial request.

• The Params field of front-matter and site config is currently hard coded so you cannot add anything you want there. This might be fixed later when we figure out how to customize the YAML parser.

Up for Grabs

• Short-codes, reference e.g Feliz REACT components in Markdown would be really cool.

• Taxonomies, tagging content

• Data folder, have a data folder with additional data or even a database connection

• Archetypes, use e.g a dotnet tool to create new pages based on archetypes templates.

• Many other things are currently not supported. Please provide feature request as an issue or a PR.

• Reduce the transfer size of the state / model. Would be cool to allow it to be dynamic, server "patchable" ...

• Search box should search within summaries, titles, descriptions and content when available.

License

MIT, see LICENSE.