Naked Panda Meditations

    mini-ssg

    0.2.2 • Public • Published

    Mini SSG

    Simple static site generator, to prevent you write DRY HTML files with minimal syntax
    Built with Nodejs
    Inspired by Laravel Blade Template and Sergey.cool SSG

    Update/Log
    v 0.2.2: Add livereload, running npm run dev, will auto reload browser when changes occured
    v 0.2.1: Bug fixes: section value include "comma sign" allowed
    v 0.1.9: All static assets live in "dev/static".

    Use Case

    For someone who works with a lot of html files and many reuse components (header, footer, etc.) or want to use general layout

    Why and How to use it

    Check out mini SSG website

    Syntax preview

    Import page

    @import(header)		
    
    <p>Your awesome content</p>
    
    @import(footer)
    

    Use general layout

    @layout(base) 
    
    @section(title, Your Page Title)
    
    @section(main)
    <main>
    	Hey.. meet your awesome content
    </main>
    @endsection
    

    How layout looks like

    <!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>
    

    Layout can include multiple imports

    <!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>
    

    Need components? 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
    

    How your component looks like

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

    If attach need a default value as fallback

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

    All static assets or files like CSS, javascript, image and stuff can live in "static" folder

    That's it! learn more at mini SSG website

    Keywords

    Install

    npm i mini-ssg

    DownloadsWeekly Downloads

    2

    Version

    0.2.2

    License

    ISC

    Unpacked Size

    10.7 kB

    Total Files

    3

    Last publish

    Collaborators

    • hilmanski