Giter Club home page Giter Club logo

fusion.ssg's Introduction

Minimal Framework For Building Static Websites

HTML, Markdown, Front Matter + Custom .tsx and .jsx Components.

Installation

Full installation instructions can be found at fusionssg.com.

The Name

fusion plays on the idea of fusing together various elements (HTML, Markdown, Components, JSON data, YAML front matter, etc.).

Features

  • No initial project configuration is required.
  • Effortless project creation using fusion.ssg's project generator.
  • DOMless and serverless execution produces very quick build times.
  • HTML document composition from markdown, HTML, tokens, .jsx and .tsx components, JSON data sources and meta data.
  • .tsx and .jsx compilation and sand-boxed execution.
  • .ts browser script compilations.
  • Portfolio (multiple pages) generation via collections.
  • Generated projects provide package.json scripts for development and release builds.
  • CLI for one-off development and one-off release builds.
  • Base URL support for sites hosted in sub folders.
  • HTML documents that are works in progress can be ignored during release builds.
  • Blogging support, including multiple categories and tags.
  • Beautified HTML documents.
  • Optional cache busting of website assets during release builds (v1.2.0).
  • Conditional composition of includes based on build strategy (v1.2.0).
  • Reporting of works in progress during release builds (v1.2.0).
  • Blog metadata exposed as simple tokens (v1.2.0).

Project Development

The project is written in TypeScript (no excuses, it just works beautifully) and runs on Node.

Project Scope

The project's scope is limited to generating robust and resilient HTML documents and websites and requires no knowledge of other front-end frameworks. This keeps the scope of the project focused and prevents feature creep.

Versioning

Current version: v1.2.0. We use Semantic Versioning.

What Still Remains To Be Done

  • fusion.ssg deserves an awesome logo. If you are a graphic artist 🎨, we would love ❤️ your contribution to this project and we we'd be thrilled to give you well-deserved, prominent attribution! Please reply via issues.

Long Term Goals

  • Seek RFC.
  • Accept pull requests when procedures and policies are in place to govern the process.

Community

For help, discussion about best practices, or any other conversation that would benefit from being searchable:

Discuss _fusion.ssg _on Github

For casual conversation with others about using fusion.ssg:

Discuss _fusion.ssg on Twitter and other social media..

Show Your Appreciation

Please 👀 watch and leave us a 🌟 star. :)

fusion.ssg's People

Contributors

jeffschwartz avatar

Stargazers

 avatar Andrii Matenka avatar Jesus Urrutia avatar Marc G avatar Vitalii Kiiko avatar Lim Leong Kui avatar Islam Magdy avatar  avatar Nevzat Kılıçarslan avatar Tin Nguyen avatar shangwfa avatar Martin Haynes avatar Maciej Ptasiński avatar tornike shavishvili avatar Rich avatar monkeytao avatar  avatar Kamil Chmielewski avatar Minseok Kim avatar Ji Yong, Kim avatar André Santos avatar 김지섭 avatar appkr avatar Ukjin Yang avatar Ocat avatar sunhwang avatar 이성진 avatar Yuk seungjae avatar Jinhwan Kim avatar Youngkyoung Lee avatar Kim Hokyeong avatar Peter Cooper avatar Ionut Cenac avatar Michał Kolbusz avatar Chee Aun avatar Joshua Whalen avatar Damian Adams avatar Steve Anderson avatar Erik Montes avatar Chris Hart avatar lukaszkups avatar Dmitriy avatar Tino Butz avatar ⊣˚∆˚⊢ avatar Kristjan Koppel avatar Ibrahim Nergiz avatar mrisho avatar givebest avatar Kevin Elliott avatar ✅ Daniel Danielecki avatar Viki avatar Željko Šević avatar Sadegh Mohebbi avatar danigb avatar Teerapat Prommarak avatar

Watchers

 avatar

Forkers

qqq-tech

fusion.ssg's Issues

Data driven components.

Pass the data source declared in a template's front matter and assets.json to its components.

baseURL is being applied when building for development.

The fix is to refactor module composeTokens.ts to replace baseURL with "" when process.env["BUILD_STRATEGY"] equals "DEVELOPMENT". This will replace all instance of {baseURL} found in document URLs with "" when the build strategy is targeting development.

Discovery throws exception when a post doesn't include categories.

Posts aren't required to have one or more categories, which are really only used as an extension of their out path structure. Therefore, the out path of a post which doesn't provide a category should be determined the same was as the paths for files that aren't posts.

Add support for work in progress templates.

Users can treat their project's templates as works in progress by adding those templates' paths to their fusion.json configuration file's "wips" property:

{
    "wips": ["src/templates/yada.html"]
}

During builds using the release build strategy, fusion will not serialize those templates' generated documents and will include a counter of the number of documents that were not serialized.
During builds using the development build strategy, fusion will serialize those templates' generated documents.

Refactor project to export and import its types defined in types/types.ts.

Types declared in types/types.ts need to import types declared in other files (e.g. gray-matter) using import type .... This has the effect of making the types/types.ts file a module and therefore that requires that any other module that relies on its types must then import those types from types/types.ts.

Add url property to template assets.

The url can be obtained from getting asset.htmlDocumentName path minus its file name.
This needs to be done in the discover.ts and makeNewAsset.ts modules.

Support WIP folders.

Support WIP Folders

Users should be able to ignore folders as well as individual files.
When ignoring folders the path declared in fusion.json wips must end with a forward slash, i.e. /.

"wips": [
  "src/templates/docs/"
]

Templates that match paths that begin with a ! character should be ignored.

"wips": [
  "src/templates/docs/",
 "!src/templates/docs/index.html"
]

Note: wips should be sorted in ascending order when the configuration file is created. Sorting is necessary to insure that wip that are to be ignored are evaluated first.

Call render-to-string for content returned from user components.

  • User components should return JSX, not HTML.
  • This eliminates the need for user components having to call render-to-string.
  • This eliminates the need for components having to import render-to-string in user projects.
  • This eliminates the dependency on preact's render to string in user projects.

Implementation

As components would no longer be returning a string of HTML and will be returning jSX both hydration processing and collection processing will now have to call preact's render-to-string to convert the JSX returned by components to HTML prior to updating content.

Logo

fusion.ssg needs a logo that unequivocally communicates what it is. If you are a graphic artist and would like to contribute to the fusion.ssg project then this is a great opportunity.

Build Strategies

The build strategy is determined by the CLI and is based on the command that it receives. Build strategies dictate the strategy that fusion is to use to build the project. Currently there is only one build strategy, which is dev, but additional ones will be added as fusion supports other build strategies, such as release.

# Add collection ame to generated collection ages.

When generating a new collection asset, the module name of the collection tag should be added to each generated template's front matter and would serve as the collection's name. This would permit easy querying of assets to acquire those of a specific collection.

Implementation

Add a new property, memberOf: string to Asset. It's value should be set to the collection component's module name.

A collection component tag:

<TeamMember isCollection />

The above collection component's module name is TeamMember, which is assigned to the asset's teamMember property.

Assets:

memberOf: "TeamMember"

Use Custom Components Instead of Tokens.

Use Custom Components Instead Of Component Tokens

Custom component tags must be self closing and component names must be in Pascal Case.

  • <MyComponent /> - declares component named MyComponent
  • <MyComponent dataSource="team.json, ..." /> - declares component named MyComponent and its data sources
  • <MyComponent isCollection dataSource="team.json, ..." /> - declares collection component named MyComponent and its data sources

Support For Simple Tokens Should Be Retained

  • Support for components declared using triple brackets will be dropped.
  • Support for components declared using single brackets, ie. {}, that are replaced by front matter should be retained.

Support default associated pages.

If template front matter doesn't declare a page property then default associated page to src/pages/default.html.

Important: When fusion generates a uer project, the default.html page should be created as well.

Rename Templates and Pages

Currently 'Template' is used to describe an HTML file that 'Pages' are inserted into. However, template is generally understood to mean a partial or an HTML template. Therefore I think it is better to use terms as they are commonly understood and so these should be renamed accordingly.

Yada needs to be refactored to implement these changes and user projects need to be refactored to use the appropriate folder names for these two project assets.

Tokens in generated collection pages are never resolved.

Tokenization currently occurs as part of composition, which occurs prior to collection processing. As such, any tokens contributed to a document by a collection, including their custom components, will never be resolved.

The fix is to make token processing its own service and call it immediately before serialization. This will safeguard any future problems should additional types of tokenizing be implemented.

Support base URLs.

Support Base URLs

This is for those who want to use Github pages without a domain.

It would convert the following url

<a href="/path/to/page.html"></a>

to

<a href="{baseurl}/path/to/page.html"></a>

Configuration

This would be configured by the user using their user configuration file:

{
    baseURL: "base.url.path"
}

Implementation

During composition all {baseURL} markers would be replaced with the value of baseURL taken from the user's configuration file.

Rename markers to tokens.

Referring to them as tokens rather than as markers is more semantically aligned with their actually use case.

Hydration

Add support for composition using components and component tokens whose paths point to components.

Components can be implemented using .js, .jsx, .ts, .tsx. They are dynamically loaded and are declared in component tokens whose content are paths that point to the components in the src/components folder. Components are called asynchronously. The content returned by components replaces their associated component tokens.

Custom URL formats.

Currently Supporting urls that point to folders that contain index.html files:

-- path/to/page/
|-- index.html : currently supported

Could support urls that directly point to html files:

-- name.html

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.