Skip to content

Latest commit

 

History

History
253 lines (202 loc) · 5.25 KB

README.md

File metadata and controls

253 lines (202 loc) · 5.25 KB

Português

GIMP
Lua WPP | Download

"A lightweight Lua-based HTML framework designed for creating static web applications"

Create a fork on github GitHub Repo stars Dependency free

This framework allows you to define HTML elements using Lua's native syntax, giving you the ability to build structured HTML documents programmatically. The framework supports extendable elements, self-closing tags, and allows for nested children with customizable properties.

Features

  • Declarative HTML Elements: Easily create and manipulate HTML code using Lua's syntax.
  • Self-closing Tags: Automatically handles self-closing HTML tags like
    , , and more.
  • Components: Extend and customize existing HTML elements with additional properties and children.
  • Dynamic Tag Handling: Unrecognized tags are automatically interpreted as new HTML elements.
  • HTML Encoding: Automatically encodes characters for safe HTML rendering.
  • Custom Syntax for Tables and Forms: Supports custom handling of common elements like <table>, <select>, and <form>.

Getting Started

Installation

To use this framework, simply include the Lua script in your project.

Using git 
# Clone the repository
git clone https://github.com/your-username/lua-web-framework.git
Using zip
  • Click download
  • Extract the contents of the zip to some folder

How to use?

  1. Create a file for example Project.lua containing:
Pages = {
   sources = "lua", -- Location of Lua pages
   output="www",    -- Where pages will be rendered

   -- List of pages separated by ,
   'index',
}

-- Keep bellow lines untouched
local f = io.open("lua4webapps-framework/init.lua")
local _ = f and {require "lua4webapps-framework",f:close()} or require "lua4webapps"
  1. Now create a folder called "lua" and in it an index.lua file with the content:
-- Create a simple HTML document
html {
    head {
      title "Example"
    },
    body {
        h1 "Hello, Lua Framework!",
        p "This is a paragraph generated using Lua.",
        img {src = "image.jpg", alt = "Sample Image"},
        ul {
            "First Item",
            "Second Item",
            "Third Item"
        }
    }
}
  1. Run lua5.4 Project.lua you will have a page built on www with the name containing:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style>body {font-family: sans-serif;}</style>
    <title>Example</title>
</head>
<body>
    <h1>Hello, Lua Framework!</h1>
    <p>This is a paragraph generated using Lua.</p>
    <img src="image.jpg" alt="Sample Image" />
    <ul>
        <li>First Item</li>
        <li>Second Item</li>
        <li>Third Item</li>
    </ul>
</body>
</html>

Extending Tags

local customDiv = div:extends {
    class = "custom-div",
    childrens = {
        span "This is inside a custom div"
    }
}

html {
    body {
        customDiv "Custom content"
    }
}

Will render:

<html>
    <head></head>
    <body>
        <div class="custom-div">
        <span>This is inside a custom div</span>
        Custom content
    </div>
    </body>
</html>

Pro tips:

  • You can simplify use of ul, ol and select:
ul {
  "Item A",
  "Item B",
  "Item C",
}

ol {
  "Item A",
  "Item B",
  "Item C",
}

select {
  "Item A",
  "Item B",
  "Item C",
}

Rendered:

<ul> {
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
</ul>

<ol> {
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
</ol>

<select> {
  <option value="Item A">Item A</option>
  <option value="Item B">Item B</option>
  <option value="Item C">Item C</option>
</select>
  • select has a second way:
select {
  {"Item A","X"},
  {"Item B","Y"},
  {"Item C","Z"},
}

Rendered:

<select> {
  <option value="X">Item A</option>
  <option value="Y">Item B</option>
  <option value="Z">Item C</option>
</select>
  • You can use Lua syntax to declare table elements:
table {
   {'A1', 'B1', 'C1'},
   {'A2', 'B2', 'C2'},
   {'A3', 'B3', 'C3'},
}

Rendered:

<table>
    <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
    </tr>
    <tr>
        <td>A2</td>
        <td>B2</td>
        <td>C2</td>
    </tr>
    <tr>
        <td>A3</td>
        <td>B3</td>
        <td>C3</td>
    </tr>
</table>

License

This project is licensed under the MIT License.

Contributing

Feel free to submit issues or contribute to the project by creating pull requests.