Slugtenberg

Slugtenberg was designed to compile clean and quick websites from scratch. Saves you time by not having to deal with servers, databases and packages. All thanks to the database-free slug system based on files and folders rendering system.

What it can do?

• Zero-configuration required, just start coding.
• Maintain site contents modifying files and folders as data.
• Use conditionals and iterations to create pages dynamically based on input data.
• Include layouts and partials to separate pages in reusable smaller pieces.
• Use spreadsheet as database by builiding pages from a CSV file.
• Preview your site locally and watch live changes.

Database-Free

Files and folders are the backbones of the slug system. Filenames are used to match internally views, media and data files into a page URL. Each time you create a new file in the Slug Folder, it will automatically attach any media or data file that shares the same folder and/or file name.

↓ In this example you can see how duplicating a folder, generates new site content.

This way, you can create index.json or index.yml to handle data for your index.liquid. Also you can make global data by creating these files in your Data Folder to be accessed from every page view.

↓ Here you can see how editing a text file, updates the site content.

File & Folder Basics

Each folder serves a different purpose as stated below...

▶︎ Data Folder

Files here are used to create global variables available in every slug view. Datasheets are useful to import your data from software such as Excel, Numbers or Google Spreadsheets.

/data
│
├─ *.csv
│  └─ Datasheets are attached at {{ data.filename }}.
│
├─ *(.json|.yml)
│  └─ Options to setup Datasheet parser:
│         'use_layout' selects a layout to print data rows in pages.
│         'column_slug' indicates the column used in output's slugs.
│         'columns' holds columns id to set data parsing options (type:array)
│
└─ /dirname
   │
   ├─ *(.txt)
   │  └─ Data file attached as variable in {{ contents.filename }}.
   │
   ├─ *(.md|.markdown) 
   │  └─ Content file attached at {{ contents.filename }}.
   │
   ├─ *(.webloc)
   │  └─ Link file attached at {{ links.filename }}.
   │
   └─ *(.jpg|.jpeg|.png|.gif|.ico|.mp3|.mp4|.oga|.ogg|.wav|.webm)
      └─ Media file URL attached in {{ media.filename }}.

▶︎ Layout Folder

Layout files works are base templates to build your slug views on top of. Learn more about partials on LiquidJS

/layouts
│
└─ *(.html|.liquid)
   ├─ Partial templates invoked at {% layout 'filename' %}
   └─ also renders datasheets when 'use_layout' is present.

▶︎ Include Folder

Include files are template partials to include in your slug views. Learn more about partials on LiquidJS

/includes
│
├─ *(.html|.liquid)
│  └─ Partial templates invoked at {% include 'filename' %}.
│
└─ *
   └─ Other files can also be invoked with the extension as {% include 'filename.svg' %}.

▶︎ Media Folder

Media files will be copied to the /dist folder. The filter assetLink converts any filename into an asset URL.

/media
│
└─ *
   └─ Can be invoked as {{ 'filename.mov' | assetLink }}.

▶︎ Script Folder

Javascript files are unified and compressed using Babel to bring ES6+ scripting to your slug views.

/js
│
└─ *.js
   └─ Unified script file URL always available in {{ config.scriptsLink }}.

▶︎ Slug Folder

Files here will be used to build the site hierarchy. Filenames are slugs, used to match media and data files.

/slugs
│
├─ *(.html|.liquid) 
│  ├─ Template views will serve as direct pages URL.
│  ├─ Current page slug is always available at {{ current }}.
│  └─ File slug will attach matching data files or folders in this folder.
│
├─ *(.json|.yml)
│  └─ Data variables are available directly as {{ variables }}.
│
└─ /dirname
   │
   ├─ *(.txt)
   │  └─ Data file attached as variable in {{ contents.filename }}.
   │
   ├─ *(.md|.markdown) 
   │  └─ Content file attached at {{ contents.filename }}.
   │
   ├─ *(.webloc)
   │  └─ Safari link file attached at {{ links.filename }}.
   │
   ├─ *(.jpg|.jpeg|.png|.gif|.ico|.mp3|.mp4|.oga|.ogg|.wav|.webm)ing
   │  └─ Media file URL attached in {{ media.filename }}.
   │  
   └─ *(.html|.liquid) 
      ├─ Other template views will serve as internal pages URL.
      └─ File slug also searchs for data files and folders.

▶︎ Style Folder

SASS stylesheets are unified and compressed into CSS to quickly style your slug views.

styles/
│
└─ *(.scss|.sass|.css)
   └─ Unified style file URL available in {{ config.stylesLink }}

Getting started

This instructions assume you have Git and Node installed on your machine.

1. (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧ Open your favorite terminal
2. cd myproject access an empty directory to start.
3. curl -sL https://api.github.com/repos/pabliqe/slugtenberg/tarball | tar xzC . --strip 1 will download this repository locally.
4. npm install -D install required packages.
5. npm run build build your demo project.
6. npm run start gets your site up and running.
7. http://localhost:3000 browser will popup and you are ready to start coding.
8. ( ͡ᵔ ͜ʖ ͡ᵔ ) Enjoy
9. npm run prod once you are ready to publish your site.

Production build will output the files compressed and optimized into your /dist folder. Just upload it to your server or try a serverless option such as Now/Vercel CLI or GitHub Pages to open your site to public.

The Asset folder can be distributed separately via CDN by setting cdnURL in config file.

--

Happy Coding! *:･ﾟ✧