sweb 0.7
SWEB is a static website generator that processes templates, styles, and assets
License: MIT
Requires Python: >=3.6

# SWEB - Static Website Generator

## TL;DR

SWEB is a static website generator that processes templates, styles, and assets.


It uses data from JSON files to generate a static website with HTML, CSS, and media files. The project is organized into several folders, each serving a specific role in the generation of the website.

## A SWEB project overview

A sweb project is organized into several source folders, each serving a specific role in the generation of the static website.
Below is an overview of the folders and their purposes:

```
sweb-project/
  app/         # Contains your SWEB project files.
    data/      # Contains JSON files with the data used to populate the templates.
    templates/ # Holds the handlebar template files used to generate the HTML pages of the website.
    styles/    # Stores CSS/SASS/SCSS files that define the visual appearance of the website.
    assets/    # Includes media files like images, videos, and other static files that need to be copied as-is.
  dist/      # The output directory where the generated website is saved.
```

## Quick Start

```bash
# Step 1: Install SWEB using pip
pip install sweb

# Step 2: Create a new SWEB project named 'my-project'
sweb new my-project

# Step 3: Change directory to the newly created project
cd my-project

# Step 4: Generate the website using SWEB
sweb

# Step 5: Open the generated website's index page in the default web browser
open dist/index.html
```



## Folders details

## Data

### Path
```
app/data/
```

### Purpose

This directory stores JSON files which are essential for providing the content that gets inserted into the templates.

For Example: index.json, about.json, which might contain structured data for different parts of the site.

### Data access

Data are accessible from the handlebar templates using the `{{filename.key_path}}` variable.

#### Example
If the data file is `menu.json` and the data is structured as follows:

```json
{
  "items": [ "Home", "About", "Contact" ]
}
```
Then the data can be accessed in the template using `{{menu.items}}` which would output `["Home", "About", "Contact"]`

### Subdirectories

You can have subdirectories in the `data/` folder, and the data will be accessible using the subdirectory name as the first part of the key path.


#### Example
If you have a file `data/subdir/about.json` with the following data:
```json
{
  "title": "About Us",
  "description": "We are a team of developers passionate about creating amazing websites."
}
```
Then the data can be accessed in the template using `{{subdir.about.title}}` which would output `About Us`.


## Templates

### Path
```
app/templates/
```

### Purpose

Contains [handlebar](https://handlebarsjs.com/) template files which are the blueprints for the website. These templates are processed to insert data from the data directory and generate the HTML files in the dist directory.

#### Example

If you have a file data/index.json with the following content:
```json
{
  "title": "my-project",
  "description": "A sweb project."
}
```

You could have a file `templates/index.hbs` with the following content:
```html
<!DOCTYPE html>
<html>
  <head>
    <title>{{index.title}}</title>
    <link rel='stylesheet' href='styles/style.css'>
  </head>
  <body>
    <h1>Hello, world to {{index.description}}!</h1>
  </body>
</html>
```

it would generate the following HTML file in the `dist/` folder: `dist/index.html`
```html
<!DOCTYPE html>
<html>
  <head>
    <title>my-project</title>
    <link rel='stylesheet' href='styles/style.css'>
  </head>
  <body>
    <h1>Hello, world to A sweb project.!</h1>
  </body>
</html>
```



## Styles

### Path

```
app/styles/
```

### Purpose

Stores CSS & [SASS/SCSS](https://sass-lang.com/) style sheets that control the look and feel of the website. These stylesheets are compiled and saved in the `dist/styles/` folder.

### Example

The following `style.scss` file in the `app/styles/` folder:
```scss
body {
  h1 {
    color: red;
  }
}
```

would generate the following CSS file `dist/styles/style.css`:
```css
body h1 {
  color: red;
}
```

## Assets

## Path
```
app/assets/
```

### Purpose

Holds static files like images, fonts, and other media which are copied directly into the output directory without modification.

### Example

If you have an image `app/assets/logo.png`, it would be copied to `dist/assets/logo.png` without any changes.


## How SWEB works?

To generate a website, SWEB:
1. Load the JSON data from the `app/data/` folder,
2. Generate the html from the handlebar templates in the `app/templates/` folder and save the result in the `dist/` folder,
3. Compile The CSS/SASS/SCSS files in the `app/styles/` folder and save the result the `dist/styles/` folder,
4. The media files in the `app/assets/` folder are copied as-is to the `dist/assets/` folder.
5. The `dist/` folder now contains a fully functional static website.