SWEB is a static website generator that processes templates, styles, and assets
Project description
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
# 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:
{
"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:
{
"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 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:
{
"title": "my-project",
"description": "A sweb project."
}
You could have a file templates/index.hbs with the following content:
<!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
<!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 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:
body {
h1 {
color: red;
}
}
would generate the following CSS file dist/styles/style.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. These files are important for the multimedia elements of the site.
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:
- Load the JSON data from the
app/data/folder, - Generate the html from the handlebar templates in the
app/templates/folder and save the result in thedist/folder, - Compile The CSS/SASS/SCSS files in the
app/styles/folder and save the result thedist/styles/folder, - The media files in the
app/assets/folder are copied as-is to thedist/assets/folder. - The
dist/folder now contains a fully functional static website.
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Filter files by name, interpreter, ABI, and platform.
If you're not sure about the file name format, learn more about wheel file names.
Copy a direct link to the current filters
File details
Details for the file sweb-0.5.tar.gz.
File metadata
- Download URL: sweb-0.5.tar.gz
- Upload date:
- Size: 7.9 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/5.0.0 CPython/3.12.3
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
7f02973e49554da2fbc171ac7713a47590d06c279e0fcdb4b5e41834a9919f17
|
|
| MD5 |
ff0a2a912839aa097523ccc5f4b015bf
|
|
| BLAKE2b-256 |
2c9eca93e0f8b2bd810ed22551adcff4be64bffd593882b72b3784498839a70a
|
File details
Details for the file sweb-0.5-py3-none-any.whl.
File metadata
- Download URL: sweb-0.5-py3-none-any.whl
- Upload date:
- Size: 7.7 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/5.0.0 CPython/3.12.3
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
38c026fde19b73e8a6505cbd95109bdc7cccdba043d2fa36cae60ec30b805eee
|
|
| MD5 |
daf051c99649e3a498df00db12159f45
|
|
| BLAKE2b-256 |
68b7452d9ddb4c3e9449ca781eff5f43cc265149298ee5475fa01c65cffc2c03
|
