https://github.com/hacknlove/filar
https://github.com/hacknlove/filar
Last synced: 6 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/hacknlove/filar
- Owner: hacknlove
- Created: 2023-01-13T18:13:42.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-04-27T18:09:33.000Z (about 3 years ago)
- Last Synced: 2025-02-26T07:34:20.297Z (over 1 year ago)
- Language: JavaScript
- Size: 366 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Filar
Filar is an HTML framework specifically designed to minimize the reliance on JavaScript, making web development more accessible to the common folk.
## Documentation
[filar/docs](https://github.com/hacknlove/filar/tree/master/docs)
## Why?
The Web is broken, if we attend to its original ideas and goals.
Back in time, html was designed to be a markup language, not a programming language. It was designed so anybody can write a web, not only JavaScript programmers.
But we, javascript programmers, in our intent to continuously improve our productivity and development experiencie, have made the web a place where only we can write it.
We completely forgot the development expecience of the common folk that cannot write JavaScript, or at most, can write a little bit of it.
I remember when I was a kid, I was able to write a web page with just HTML, CSS, and a bit of JavaScript.
I think JavaScript frameworks are great. They allow us, developers, to write very complex web applications with low effort, but for the common folk, they are too much.
For these people, I decided to create Filar, to bring them back the simplicity of the web.
## How?
Filar translates the development experience of a JavaScript framework to a HTML framework:
To list a few:
- Reusable components
- Dynamic Routing
- Reactive state
- Modular CSS
## Quick Examples
### Components
Any file with the `.se.html` extension is a Server Element.
**/components/Hello.se.html**
```html
Hello, {{name}}!
```
**/pages/index.html**
```html
```
**Output**
```html
Hello, World!
```
No JavaScript required at all.
### Routing
It follows the Filesystem routing pattern.
**/blog/[id].html**
```html
This is a blog {{params.id}}
```
**Output**
**http://localhost:3000/blog/1**
```html
This is a blog 1
```
**Note**
The context from the request is only available in the SSR components.
### Reactive state
You can declare reactive islands, whose state can be used by all its children.
**/pages/index.html**
```html
Likes: {(likes)} Dislikes: {(dislikes)}
Like
Dislike
```
The built-in `Island` Server Element makes its parent element reactive, and initializes the state.
**Output**
```html
...
Likes: 0 Dislikes: 0
Like
Dislike
```
### Modular CSS
Just drop your CSS or (SCSS) files anywhere in the project, and they will be automatically loaded.
```html
```
You can set a directory and a pattern to SassStyle to load only the files you want.
```html
```
**Output**
```html
...
```
Add the attribute `embedded` to embed the CSS in the page.
```html
```
**Output**
```html
...
/* your scss files combines, compiled and minimified here */
```
Notice that styles are hoisted to the head of the page.
## Live Examples
### The Masterful Speaker's Journey
- Source: https://github.com/hacknlove/tmsj/
- Live: https://tmsj.hacknlove.org/
It's a learning game for public speaking.
## Status
Filar is still being prototyped, and you should not use it in production.
You can play with it, and contribute with code or ideas.
## Roadmap
- [ ] Client Elements
- [ ] Server directives
- [ ] API endpoints
- [ ] Builder for dynamic sites
- [ ] More examples
- [ ] Tutorials
- [ ] Deploy static site GitHub pages
- [ ] Deploy static site to Cloudflare
- [ ] Deploy dynamic site to Cloudflare
## Requests and Suggestions
Please use GitHub issues to request features, give feedback and suggestions, and to report bugs.