-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
9 lines (9 loc) · 28.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="theme-color" content="#000000"> <link rel="shortcut icon" href="/assets/logo/yassb-logo.ico"> <link rel="apple-touch-icon" sizes="76x76" href="/assets/logo/yassb-logo.png"> <link rel="stylesheet" href="/assets/fontawesome-free/css/all.min.css"> <link rel="stylesheet" href="/assets/css/styles-1-0-3.min.css"> <title>YASSB | Yet Another Static Site Builder</title> </head> <body class="text-gray-800 antialiased"> <nav class="top-0 absolute z-50 w-full flex flex-wrap items-center justify-between py-3 navbar-expand-lg"> <div class="container px-4 mx-auto flex flex-wrap items-center justify-between z-50"> <div class="w-full relative flex justify-between lg:w-auto lg:static lg:block lg:justify-start"> <a class="text-lg font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="/"><i class="fas fa-filter"></i> YASSB</a><button class="cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button" onclick='toggleNavbar("example-collapse-navbar")'> <i class="text-white fas fa-bars"></i> </button> </div> <div class="lg:flex flex-grow items-center bg-white lg:bg-transparent lg:shadow-none hidden" id="example-collapse-navbar"> <ul class="flex flex-col lg:flex-row list-none mr-auto"> <li class="flex items-center"> <a class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold" href="/guides"><i class="lg:text-gray-300 text-gray-500 fas fa-book text-lg leading-lg mr-2"></i> Guides</a> </li> <li class="pl-6 lg:hidden"> <div><ul class="flex flex-col lg:flex-row list-none lg:ml-auto"><li class="flex items-center"><a class="lg:text-white lg:hover:text-gray-200 text-gray-800 text-xs px-3 py-2 lg:py-2 flex items-center uppercase font-bold" href="/guides/setup/index.html">Setup</a></li><li class="flex items-center pl-4"><a class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase" href="/guides/setup/index.html">Quick start</a></li><li class="flex items-center pl-4"><a class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase" href="/guides/setup/project-structure.html">Project structure</a></li><li class="flex items-center pl-4"><a class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase" href="/guides/setup/configuration.html">Configuration</a></li><li class="flex items-center pl-4"><a class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase" href="/guides/setup/front-matter.html">Front Matter</a></li><li class="flex items-center pl-4"><a class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase" href="/guides/setup/post-processors.html">Post processors</a></li><li class="flex items-center pl-4"><a class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase" href="/guides/setup/sitemap.html">Sitemap</a></li></ul><ul class="flex flex-col lg:flex-row list-none lg:ml-auto"><li class="flex items-center"><a class="lg:text-white lg:hover:text-gray-200 text-gray-800 text-xs px-3 py-2 lg:py-2 flex items-center uppercase font-bold" href="/guides/directives/index.html">Directives</a></li><li class="flex items-center pl-4"><a class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase" href="/guides/directives/index.html">Overview</a></li><li class="flex items-center pl-4"><a class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase" href="/guides/directives/component-directive.html">component directive</a></li><li class="flex items-center pl-4"><a class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase" href="/guides/directives/create-from-data-source-directive.html">createFromDataSource directive</a></li><li class="flex items-center pl-4"><a class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase" href="/guides/directives/generate-from-files-directive.html">generateFromFiles directive</a></li><li class="flex items-center pl-4"><a class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase" href="/guides/directives/public-file-list-directive.html">publicFileList directive</a></li><li class="flex items-center pl-4"><a class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase" href="/guides/directives/include-script-src-directive.html">includeScriptSrc directive</a></li><li class="flex items-center pl-4"><a class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase" href="/guides/directives/include-styles-src-directive.html">includeStylesSrc directive</a></li><li class="flex items-center pl-4"><a class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase" href="/guides/directives/url-to-directive.html">urlTo directive</a></li><li class="flex items-center pl-4"><a class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase" href="/guides/directives/custom-directives.html">Custom directives</a></li></ul><ul class="flex flex-col lg:flex-row list-none lg:ml-auto"><li class="flex items-center"><a class="lg:text-white lg:hover:text-gray-200 text-gray-800 text-xs px-3 py-2 lg:py-2 flex items-center uppercase font-bold" href="/guides/renderers/index.html">Renderers</a></li><li class="flex items-center pl-4"><a class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase" href="/guides/renderers/index.html">Overview</a></li><li class="flex items-center pl-4"><a class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase" href="/guides/renderers/basic-element-renderer.html">basicElement renderer</a></li><li class="flex items-center pl-4"><a class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase" href="/guides/renderers/li-date-description-renderer.html">liDateDescription renderer</a></li><li class="flex items-center pl-4"><a class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase" href="/guides/renderers/custom-renderers.html">Custom renderers</a></li></ul><ul class="flex flex-col lg:flex-row list-none lg:ml-auto"><li class="flex items-center"><a class="lg:text-white lg:hover:text-gray-200 text-gray-800 text-xs px-3 py-2 lg:py-2 flex items-center uppercase font-bold" href="/guides/assets/index.html">Assets</a></li><li class="flex items-center pl-4"><a class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase" href="/guides/assets/index.html">Overview</a></li><li class="flex items-center pl-4"><a class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase" href="/guides/assets/scripts.html">Scripts</a></li><li class="flex items-center pl-4"><a class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase" href="/guides/assets/styles.html">Styles</a></li></ul><ul class="flex flex-col lg:flex-row list-none lg:ml-auto"><li class="flex items-center"><a class="lg:text-white lg:hover:text-gray-200 text-gray-800 text-xs px-3 py-2 lg:py-2 flex items-center uppercase font-bold" href="/guides/internationalization/index.html">Internationalization (i18n)</a></li></ul></div> </li> <li class="flex items-center"> <a class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold" href="/docs"><i class="lg:text-gray-300 text-gray-500 far fa-file-alt text-lg leading-lg mr-2"></i> Docs</a> </li> </ul> <ul class="flex flex-col lg:flex-row list-none lg:ml-auto"> <li class="flex items-center"> <a class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold" href="https://www.npmjs.com/package/yassb-web"><i class="lg:text-gray-300 text-gray-500 fab fa-npm text-xl leading-xl"></i><span class="lg:hidden inline-block ml-2">Package</span></a> </li> <li class="flex items-center"> <a class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold" href="https://github.com/YASSB-FOSS/yassb"><i class="lg:text-gray-300 text-gray-500 fab fa-github text-xl leading-xl"></i><span class="lg:hidden inline-block ml-2">Source Code</span></a> </li> </ul> </div> </div> </nav> <main> <div class="relative pt-16 pb-32 flex content-center items-center justify-center" style="min-height:65vh"> <div class="absolute top-0 w-full h-full bg-center bg-cover" style="background-image:url(/assets/images/pexels-mnm-zameer-3308588-min.jpg)"> <span id="blackOverlay" class="w-full h-full absolute opacity-40 bg-black"></span> </div> <div class="container relative mx-auto"> <div class="items-center flex flex-wrap"> <div class="w-full lg:w-8/12 px-4 ml-auto mr-auto text-center"> <h1 class="text-white font-semibold text-5xl leading-tight"> YASSB<br>Yet Another Static Site Builder </h1> <p class="mt-4 text-xl text-gray-300"> YASSB processes HTML, (S)CSS, JavaScript/TypeScript, JSX/TSX, JSON, MarkDown and many other files and combines them into beautiful static websites, like this one! </p> </div> </div> </div> <div class="top-auto bottom-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden" style="height:70px;transform:translateZ(0)"> <svg class="absolute bottom-0 overflow-hidden" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.1" viewBox="0 0 2560 100" x="0" y="0"> <polygon class="text-gray-400 fill-current" points="2560 0 2560 100 0 100"></polygon> </svg> </div> </div> <section class="pb-20 bg-gray-400 -mt-24"> <div class="container mx-auto px-4"> <div class="flex flex-wrap"> <div class="w-full lg:w-4/12 px-4 text-center"> <div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-8 shadow-lg rounded-lg"> <div class="px-4 py-5 flex-auto"> <div class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-yellow-500"> <i class="fas fa-download"></i> </div> <h6 class="text-xl font-semibold">Install YASSB Globally</h6> <p class="mt-2 mb-4 text-gray-600"> </p><div class="code-block"><pre class="d"><code>npm i -g yassb-web
</code></pre></div> <p>or</p> <div class="code-block"><pre class="d"><code>yarn global add yassb-web
</code></pre></div> <p></p> </div> </div> </div> <div class="w-full lg:w-4/12 px-4 text-center"> <div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-8 shadow-lg rounded-lg"> <div class="px-4 py-5 flex-auto"> <div class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-blue-400"> <i class="far fa-folder-open"></i> </div> <h6 class="text-xl font-semibold">Create a new project</h6> <p class="mt-2 mb-4 text-gray-600"> </p><div class="code-block"><pre class="d"><code>yassb new myStaticWebSite
</code></pre></div> <p>and</p> <div class="code-block"><pre class="d"><code>cd myStaticWebSite
</code></pre></div> <p></p> </div> </div> </div> <div class="w-full lg:w-4/12 px-4 text-center"> <div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-8 shadow-lg rounded-lg"> <div class="px-4 py-5 flex-auto"> <div class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-green-400"> <i class="fas fa-code"></i> </div> <h6 class="text-xl font-semibold">Build your static website</h6> <div class="code-block"><pre class="d"><code>yassb build
</code></pre></div> <p>or</p> <div class="code-block"><pre class="d"><code>yassb watch // w/ live reloading!
</code></pre></div> </div> </div> </div> </div> <div class="container px-5 py-24 mx-auto"> <div class="flex flex-col text-center w-full mb-20"> <h1 class="sm:text-4xl text-4xl font-medium title-font text-gray-900">Made for <b>web</b> developers</h1> </div> <div class="flex flex-wrap -m-4"> <div class="flex flex-wrap"><div class="px-0 w-1/1 lg:w-1/2 mb-8 lg:mb-14 xl:mb-20 lg:px-8 xl:px-22 2xl:px-32"><div class="flex rounded-lg h-full bg-gray-100 p-8 flex-col shadow-lg"><div class="flex items-center mb-3"><div class="text-gray-100 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-pink-600"><i class="fas fa-rocket text-2xl -ml-1 -mb-1"></i></div><h2 class="text-gray-900 text-2xl title-font font-medium -mt-6 ml-8">Ready for production</h2></div><div class="flex-grow"><p class="p-4 text-xl font-normal leading-relaxed text-gray-500 text-justify">YASSB comes with everything you need to build a production-ready static web site. HTML. From prototyping to packaging styles and scripts, everything is taken care of, ready to ship.</p></div></div></div><div class="px-0 w-1/1 lg:w-1/2 mb-8 lg:mb-14 xl:mb-20 lg:px-8 xl:px-22 2xl:px-32"><div class="flex rounded-lg h-full bg-gray-100 p-8 flex-col shadow-lg"><div class="flex items-center mb-3"><div class="text-gray-100 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-pink-600"><i class="fas fa-puzzle-piece text-2xl -mr-1 -mt-1"></i></div><h2 class="text-gray-900 text-2xl title-font font-medium -mt-6 ml-8">Extendable as you need</h2></div><div class="flex-grow"><p class="p-4 text-xl font-normal leading-relaxed text-gray-500 text-justify">YASSB can be extended with custom renderers and directives, written in JavaScript or TypeScript with JSX and TSX support out-of-the-box. Every step of the build process can be customized as well.</p></div></div></div><div class="px-0 w-1/1 lg:w-1/2 mb-8 lg:mb-14 xl:mb-20 lg:px-8 xl:px-22 2xl:px-32"><div class="flex rounded-lg h-full bg-gray-100 p-8 flex-col shadow-lg"><div class="flex items-center mb-3"><div class="text-gray-100 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-pink-600"><i class="fab fa-js-square text-2xl"></i></div><h2 class="text-gray-900 text-2xl title-font font-medium -mt-6 ml-8">In a language you know</h2></div><div class="flex-grow"><p class="p-4 text-xl font-normal leading-relaxed text-gray-500 text-justify">YASSB is shipped as a regular JavaScript node package and is entirely written in TypeScript. Everything runs on well known technologies, popular libraries and reliable packages, like Webpack and alikes.</p></div></div></div><div class="px-0 w-1/1 lg:w-1/2 mb-8 lg:mb-14 xl:mb-20 lg:px-8 xl:px-22 2xl:px-32"><div class="flex rounded-lg h-full bg-gray-100 p-8 flex-col shadow-lg"><div class="flex items-center mb-3"><div class="text-gray-100 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-pink-600"><i class="fas fa-bolt text-2xl"></i></div><h2 class="text-gray-900 text-2xl title-font font-medium -mt-6 ml-8">Built for speed</h2></div><div class="flex-grow"><p class="p-4 text-xl font-normal leading-relaxed text-gray-500 text-justify">YASSB runs on the latest LTS version of node and takes full advantage of its capabilties. During development the watch mode recompiles the project selectively, and with live reload your browser is refreshed instantly.</p></div></div></div></div> </div> </div> </div> </section> <section class="relative py-20"> <div class="bottom-auto top-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden -mt-20" style="height:80px;transform:translateZ(0)"> <svg class="absolute bottom-0 overflow-hidden" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.1" viewBox="0 0 2560 100" x="0" y="0"> <polygon class="text-white fill-current" points="2560 0 2560 100 0 100"></polygon> </svg> </div> <div class="container mx-auto px-4"> <div class="flex flex-wrap justify-center text-center mb-2"> <div class="w-full lg:w-6/12 px-4"> <h2 class="text-5xl font-semibold">As <i>easy</i> as writing HTML <b>comments</b></h2> <img src="/assets/images/examples/index-html.png" alt="Example of a index.html page"> </div> </div> </div> </section> <section class="text-gray-700 body-font pb-20"> <div class="container px-5 pb-16 mx-auto"> <div class="text-center mb-20"> <h1 class="sm:text-3xl text-2xl font-medium text-center title-font text-gray-900 mb-4">Features</h1> <p class="text-base leading-relaxed xl:w-2/4 lg:w-3/4 mx-auto">YASSB is packed with features and customization options. It comes with many built-in capabilities, and it can be extended to meet any need.</p> </div> <div class="flex flex-wrap -m-4"><div class="p-4 lg:w-1/4 sm:w-1/2 w-full"><h2 class="font-medium title-font tracking-widest text-gray-900 mb-4 text-sm text-center sm:text-left">Core</h2><nav class="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1"><div class="mb-2"><span class="text-pink-600 bg-pink-200 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"></path></svg></span><span>built-in & custom directives</span></div><div class="mb-2"><span class="text-pink-600 bg-pink-200 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"></path></svg></span><span>built-in & custom renderers</span></div><div class="mb-2"><span class="text-pink-600 bg-pink-200 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"></path></svg></span><span>"native" JS/TS/JSX/TSX support</span></div><div class="mb-2"><span class="text-pink-600 bg-pink-200 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"></path></svg></span><span>scss processing</span></div><div class="mb-2"><span class="text-pink-600 bg-pink-200 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"></path></svg></span><span>sitemap generation</span></div><div class="mb-2"><span class="text-pink-600 bg-pink-200 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"></path></svg></span><span>live reloading in watch mode</span></div></nav></div><div class="p-4 lg:w-1/4 sm:w-1/2 w-full"><h2 class="font-medium title-font tracking-widest text-gray-900 mb-4 text-sm text-center sm:text-left">Supported data sources</h2><nav class="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1"><div class="mb-2"><span class="text-pink-600 bg-pink-200 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"></path></svg></span><span>HTML</span></div><div class="mb-2"><span class="text-pink-600 bg-pink-200 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"></path></svg></span><span>MarkDown</span></div><div class="mb-2"><span class="text-pink-600 bg-pink-200 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"></path></svg></span><span>TXT</span></div><div class="mb-2"><span class="text-pink-600 bg-pink-200 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"></path></svg></span><span>JSON</span></div></nav></div><div class="p-4 lg:w-1/4 sm:w-1/2 w-full"><h2 class="font-medium title-font tracking-widest text-gray-900 mb-4 text-sm text-center sm:text-left">Customization</h2><nav class="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1"><div class="mb-2"><span class="text-pink-600 bg-pink-200 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"></path></svg></span><span>Configuration based on <a href="https://www.npmjs.com/package/config">config</a></span></div><div class="mb-2"><span class="text-pink-600 bg-pink-200 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"></path></svg></span><span>WebPack custom configurations</span></div><div class="mb-2"><span class="text-pink-600 bg-pink-200 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"></path></svg></span><span>MarkDown parsing options</span></div><div class="mb-2"><span class="text-pink-600 bg-pink-200 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"></path></svg></span><span>Front Matter parsing options</span></div><div class="mb-2"><span class="text-pink-600 bg-pink-200 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"></path></svg></span><span>HTML minification options</span></div><div class="mb-2"><span class="text-pink-600 bg-pink-200 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"></path></svg></span><span>Styles custom parsers (e.g. TailwindCSS)</span></div></nav></div><div class="p-4 lg:w-1/4 sm:w-1/2 w-full"><h2 class="font-medium title-font tracking-widest text-gray-900 mb-4 text-sm text-center sm:text-left">Internationalization (i18n)</h2><nav class="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1"><div class="mb-2"><span class="text-pink-600 bg-pink-200 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"></path></svg></span><span>Multi-language sites</span></div><div class="mb-2"><span class="text-pink-600 bg-pink-200 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"></path></svg></span><span>HTML content translation</span></div><div class="mb-2"><span class="text-pink-600 bg-pink-200 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"></path></svg></span><span>HTML attributes translation</span></div><div class="mb-2"><span class="text-pink-600 bg-pink-200 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"></path></svg></span><span>Localization of dates</span></div></nav></div></div> <h3 class="sm:text-2xl text-1xl font-medium text-center title-font text-gray-900 mb-4 mt-20">Get started now</h3> <div class="xl:w-2/4 lg:w-3/4 mx-auto text-center"> <div class="code-block"><pre class="d"><code>npm i -g yassb-web
</code></pre></div> <p>or</p> <div class="code-block"><pre class="d"><code>yarn global add yassb-web
</code></pre></div> </div> </div> </section> <section class="pb-20 relative block bg-gray-900"> <div class="bottom-auto top-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden -mt-20" style="height:80px;transform:translateZ(0)"> <svg class="absolute bottom-0 overflow-hidden" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.1" viewBox="0 0 2560 100" x="0" y="0"> <polygon class="text-gray-900 fill-current" points="2560 0 2560 100 0 100"></polygon> </svg> </div> <div class="container mx-auto px-4 lg:pt-24 lg:pb-24"> <div class="flex flex-wrap text-center justify-center"> <div class="w-full lg:w-6/12 px-4 mt-16 lg:mt-0"> <h2 class="text-4xl font-semibold text-white">Well Documented</h2> <p class="text-lg leading-relaxed mt-4 mb-4 text-gray-500"> Learn more on how to use YASSB<br>and how it can help you build awesome static websites. </p> </div> </div> <div class="flex flex-wrap mt-12 justify-center"> <div class="w-full lg:w-3/12 px-4 text-center"> <div> <a class="text-gray-900 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center" href="/guides"> <i class="fas fa-book text-xl"></i> </a> </div> <div class="mt-5"> <a class="text-xl font-semibold text-white" href="/guides"> Guides </a> </div> <div class="mt-2"> <a class="mb-4 text-gray-500" href="/guides"> A comprehensive explaination of how to use YASSB, with examples and code snippets. </a> </div> </div> <div class="w-full lg:w-3/12 px-4 text-center mt-12 lg:mt-0 mb-16 lg:mb-0"> <div> <a class="text-gray-900 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center" href="/docs"> <i class="far fa-file-alt text-xl"></i> </a> </div> <div class="mt-5"> <a class="text-xl font-semibold text-white" href="/docs"> Docs </a> </div> <div class="mt-2"> <a class="mb-4 text-gray-500" href="/docs"> Find out how YASSB works under the hood, with exhaustive comments and types descriptions. </a> </div> </div> </div> </div> </section> </main> <footer class="relative bg-gray-300 pt-8 pb-6"> <div class="bottom-auto top-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden -mt-20" style="height:80px;transform:translateZ(0)"> <svg class="absolute bottom-0 overflow-hidden" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.1" viewBox="0 0 2560 100" x="0" y="0"> <polygon class="text-gray-300 fill-current" points="2560 0 2560 100 0 100"></polygon> </svg> </div> <div class="container mx-auto px-4"> <div class="flex flex-wrap items-center md:justify-left justify-left"> <div class="w-6/12 md:w-4/12"> <button class="bg-white text-gray-900 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2 p-3" onclick='window.open("https://github.com/YASSB-FOSS/yassb","_blank")'> <i class="flex fab fa-github"></i> </button> <button class="bg-white text-gray-900 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2 p-3" onclick='window.open("https://www.npmjs.com/package/yassb-web","_blank")'> <i class="flex fab fa-npm"></i> </button> </div> <div class="w-6/12 md:w-4/12 text-right md:text-center"> <div class="text-sm text-gray-600 font-semibold py-1"> Mady with <i class="far fa-heart text-red-800"></i> by humans. </div> </div> </div> </div> <script src="/assets/js/main-1-0-3.min.js"></script> </footer> </body> </html>