⚫️ Mini SSG

Mini SSG helps you
write reusable html files

You can create base layout, import partial code
and create component for your project.

Feature Overview


  • Partial HTML
  • Component with slot
  • Live reload (provided by live-server)

    • Our minimal syntax overview


    1. Import Page 

    
@import(header)		

<p>Your awesome content</p>

@import(footer)

<!-- anything inside '_imports/header.html' 
& '_imports/footer.html' will be rendered here -->

    *No need to write .html or quotation mark("/')


    2. Use general layout

    
@layout(base) <!-- 'base' is your html file name, could be anything -->		 

@section(title, Your Page Title)

@section(main)
<div>
	Hey.. meet your awesome content
</div>
@endsection

    *Value can be passed as 2nd argument if it contains text only or wrap in a tag if contains complex element


    Inside your /_layouts/base.html 

    
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>@attach(title)</title> <!-- render your title above -->
</head>
<body>
	@attach(main) <!-- render everything from section above -->
</body>
</html>

    *attach syntax will be a placeholder for coming values


    Your layout /_layouts/base.html could also have import statement

    
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>@attach(title)</title> <!-- render your title above -->
</head>
<body>
	@import(header)
	@attach(main) <!-- render everything from section above -->
	@import(footer)
</body>
</html>

    3. Need component? don't worry!

    
<h2>Other stuff</h2>

@component(story)
	@slot(fullDiv)
		<p>😀 I'm slot with name text</p>
		<p>I can be very complex element</p>
	@endslot

	@slot(textOnly)
		I can also be just text like this
	@endslot
@endcomponent

    In your /_components/story.html

    
<div>
	<div class="flex is-space-around">
		<div class="someClass">
			@attach(fullDiv)
		</div>

		<p>@attach(textOnly)</p>
	</div>	
</div>

    4. Default value for attach

    
<title>@attach(title, My default title)</title>

    *If no section match 'title', 2nd parameter will be the value


    SSG stands for (Static Site Generator), means
    even though codes above look fancy and dynamic,
    It will still render everything to HTML files.


    Static site means
    -Many free hosting provider
    -Not easy to hack
    -More about SSG here


    😁 You like it?
    Let's install Mini SSG