https://github.com/kevinhellos/igloo
Single Page Application (SPA) router in vanilla JS for static site
https://github.com/kevinhellos/igloo
Last synced: over 1 year ago
JSON representation
Single Page Application (SPA) router in vanilla JS for static site
- Host: GitHub
- URL: https://github.com/kevinhellos/igloo
- Owner: kevinhellos
- License: mit
- Created: 2023-08-14T08:17:50.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-11-11T17:39:23.000Z (over 2 years ago)
- Last Synced: 2025-01-21T21:09:12.575Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://igloo-spa.netlify.app/
- Size: 18.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Igloo
Single Page Application (SPA) router for static site. [View demo](https://igloo-spa.netlify.app/).
# Install via CDN
```html
```
# Pretty URL
Only available in igloo.2.js and above version
When prettyUrl is set to true, the url will be:
localhost:3000/#/page1 instead of localhost:3000/#/page1.
When prettyUrl is enabled, navigation between pages will cause a full page refresh.
```html
// Igloo router configuration
$Igloo({
root: "#root"
folder: "views",
default_path: "index",
scope: ["index", "page1", "page2", "page3"],
error: "error"
prettyUrl: true;
})
```
# Manual setup template
1. In the root of your project directory, create an index.html
2. In the root of your project directory, in index.html, inside the head tag,
add the script to include igloo.1.1.js
```html
```
3. In the root of your project directory, create a views folder
4. Create these files inside the views folder:
- index.html
- page1.html
- page2.html
- page3.html
- error.html
5. Copy the contents of each file form this repo views folder and paste them to your own code correspondingly.
6. In the root of your project directory, in index.html, inside the body tag, paste these codes:
```html
Homepage
Page 1
Page 2
Page 3
// Igloo router configuration
$Igloo({
root: "#root" // this is the id of the div to inject the content to
folder: "views",
default_path: "index",
scope: ["index", "page1", "page2", "page3"],
error: "error"
prettyUrl: true;
})
#root{
margin-top: 20px;
}
a{
padding: 10px;
margin-right: 5px;
border: 1px solid darkgrey;
text-decoration: none;
color: black;
}
```
7. You are done with the sample template.