https://github.com/4awpawz/fusion.ssg-flags-of-the-world-demo
Flags Of The World Demo
https://github.com/4awpawz/fusion.ssg-flags-of-the-world-demo
Last synced: 15 days ago
JSON representation
Flags Of The World Demo
- Host: GitHub
- URL: https://github.com/4awpawz/fusion.ssg-flags-of-the-world-demo
- Owner: 4awpawz
- License: mit
- Created: 2023-05-10T18:13:54.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-30T19:25:58.000Z (over 1 year ago)
- Last Synced: 2024-05-07T11:51:20.761Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://fusionssg.com
- Size: 1.44 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Flags Of The World
View [Flags Of The World](https://www.youtube.com/watch?v=PuoOGCEs1gk) video.
This project demonstrates the efficiency and ease of implementation of fusion.ssg's __collection feature__ to generate 248 individual HTML documents using a template, a page, a Typescript component and a JSON data source.
fusion.ssg's ability to generate pages using it's _collections_ feature is extremely useful. Websites that host any kind of portfolio, catalog or list will greatly benefit building them using this feature.
## Instructions For Running This Demo
1. Install fusion.ssg.
```shell
npm i -g @4awpawz/fusion.ssg
```
2. Fork this repo.
3. Use `git clone` to clone your fork to you computer.
4. In the root of the project, run the following to install dependencies and to build and serve the project in your browser.:
```shell
npm i
npm run development
```
## Examples
### Default page - default.html
```html
{title}
{{template}}
```
### JSON data source - flags.json
```json
[
{"id":4,"countryName":"Afghanistan","alpha2":"af","alpha3":"afg","img":"af.png"},
{"id":248,"countryName":"Åland Islands","alpha2":"ax","alpha3":"ala","img":"ax.png"},
{"id":8,"countryName":"Albania","alpha2":"al","alpha3":"alb","img":"al.png"},
{"id":12,"countryName":"Algeria","alpha2":"dz","alpha3":"dza","img":"dz.png"},
{"id":16,"countryName":"American Samoa","alpha2":"as","alpha3":"asm","img":"as.png"},
{"id":20,"countryName":"Andorra","alpha2":"ad","alpha3":"and","img":"ad.png"},
{"id":24,"countryName":"Angola","alpha2":"ao","alpha3":"ago","img":"ao.png"},
{"id":660,"countryName":"Anguilla","alpha2":"ai","alpha3":"aia","img":"ai.png"},
{"id":10,"countryName":"Antarctica","alpha2":"aq","alpha3":"ata","img":"aq.png"},
{"id":28,"countryName":"Antigua and Barbuda","alpha2":"ag","alpha3":"atg","img":"ag.png"},
{"id":32,"countryName":"Argentina","alpha2":"ar","alpha3":"arg","img":"ar.png"},
...
]
```
### Home page
#### Template - index.md
```html
---
tokens: {
title: Flags Of The World
}
---
# Flags Of The World
```
#### Countries Component
```Typescript
interface Flag {
"id": number, "countryName": string, "alpha2": string, "alpha3": string, "img": string
}
interface Props {
flags: Flag[]
}
export const Countries = function({ flags }: Props) {
return (
-
{flag.countryName}
;
{flags.map(flag => {
const src = `media/flags/${flag.img}`;
return
})}
);
};
```
### Individual Flag Pages
#### Template - flag.md
```md
---
isCollection: true
---
```
#### Country Component
```Typescript
interface Flag {
"id": number, "countryName": string, "alpha2": string, "alpha3": string, "img": string
}
interface Props {
flags: Flag[],
index: number
}
export const Country = function({ index, flags }: Props): { content: unknown, title: string, htmlDocumentName: string } | undefined {
if (index === flags.length) return;
const countryName = flags[index].countryName;
const src = `../media/flags/${flags[index].img}`;
const content = (
{countryName}
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo error velit voluptates impedit deserunt reprehenderit repudiandae dolor minima corrupti alias vero officia veritatis eveniet, molestias dolore adipisci in libero maxime!
);
return { content, title: flags[index].countryName, htmlDocumentName: flags[index].countryName };
};
```