refactor: simplified scaffolding and dependencies, theme optimization…

…s, windicss integration and views ejection prototype

.eslintrc

@@ -1,3 +1,3 @@
 {
-    "extends": "@fiad"
+  "extends": "@fiad"
 }

README.md

@@ -4,7 +4,7 @@ A nostalgic but modern front-end boilerplate
 
 
 ## Overview
-*Carpentry* is essentially a custom vanilla template for [Vite](https://vitejs.dev/) with an enhanced scaffolding and a ready-made integration for [Twig](https://github.com/twigjs/twig.js/).
+*Carpentry* is essentially a custom vanilla template for [Vite](https://vitejs.dev/) with an enhanced scaffolding and a ready-made integration of [Twig](https://github.com/twigjs/twig.js/) and [windicss](https://github.com/windicss/windicss).
 
 It also comes along with built-in additional utilities and basic configurations aimed to speed up your workflow.
 
@@ -38,13 +38,20 @@ The usage of template engines is very common in backend frameworks (like *Larave
 
 Take a look to [vite-plugin-twig](https://github.com/fiadone/vite-plugin-twig/) to learn more.
 
+#### Looking for backend integration?
+Using Twig is not only a comfortable and efficient way to handle markup during static sites development, but it could be a project requirement too (e.g. when dealing with a cms or when you're asked to provide both bundle and views to be integrated in a backend).
+In those cases, the *twig* files from the source tree can be ejected (and normalized) during the build process and made available under the *dist/views* directory.
+To take advantage of this feature, use the *npm run build:views* command.
+
+> ⚠️ Attention: this feature is experimental and comes with some relevant limitations. For example, by using the built-in extensions from *@fiad/twig-addons* you'll be led to have parsing errors since they won't be available in the Twig environment of the target backend. Also, the ejection doesn't provide any automatic assets injection, so you'll need to implement it by yourself (by the way the build process will generate a manifest.json for that purpose).
+
 ### Built-in SCSS and vanilla JS utilities
 Since there is no front-end framework involved here, this boilerplate comes with some "old but gold" *SCSS* and *vanilla JS* utilities out of the box.
 
 Take a look to [@fiad/stitchery](https://github.com/fiadone/stitchery/) and [@fiad/toolbox](https://github.com/fiadone/toolbox/) to learn more.
 
-### Pre-structured router with page lazy loading and transitions
-Take a look to [barba.js](https://barba.js.org/) to learn more.
+### Pre-configured WindiCSS
+Take a look to [windicss](https://github.com/windicss/windicss) to learn more.
 
-### Pre-configured *css* purging for production
+### Pre-configured *CSS* purging for production
 Take a look to [postcss-purgecss](https://github.com/FullHuman/purgecss/tree/main/packages/postcss-purgecss/) to learn more.

bin/eject-views/index.js

@@ -0,0 +1,27 @@
+const path = require('path')
+const glob = require('glob')
+const fs = require('fs-extra')
+const { getTemplateFilename, getTemplateContent } = require('./utils')
+
+const cwd = process.cwd()
+const srcPath = path.join(cwd, 'src')
+const distPath = path.join(cwd, 'dist/views')
+const sourceFiles = glob.sync(path.join(srcPath, '**/*.twig'), {
+  ignore: [
+    '.git/**',
+    'bin/**',
+    'dist/**',
+    'node_modules/**',
+    'public/**',
+    'src/**'
+  ]
+})
+
+fs.emptyDirSync(distPath)
+
+sourceFiles.forEach(filepath => {
+  const filename = getTemplateFilename(filepath, srcPath, distPath)
+  const content = getTemplateContent(filepath)
+  if (!filename || !content) return
+  fs.outputFileSync(filename, content)
+})

bin/eject-views/utils.js

@@ -0,0 +1,24 @@
+const path = require('path')
+const fs = require('fs-extra')
+
+module.exports.getTemplateFilename = function(file, srcPath, distPath) {
+  try {
+    const base = path.dirname(file).replace(srcPath, distPath)
+    const name = path.basename(file, '.twig')
+    return `${(name === 'template') ? base : path.join(base, name)}.twig`
+  } catch {
+    return null
+  }
+}
+
+module.exports.getTemplateContent = function(file) {
+  try {
+    return (
+      fs.readFileSync(file)
+        .toString()
+        .replace(/({{\s?(sourcePath|publicPath)\s?}}|\/template)/g, ''))
+        .replace(/(\s)*<script type="module" src="\/main.js"><\/script>/, '')
+  } catch {
+    return null
+  }
+}

index.html

@@ -1,6 +1,6 @@
 <script type="application/json">
   {
-    "template": "src/pages/home/template.twig",
+    "template": "templates/home.twig",
     "data": {
       "namespace": "home",
       "meta": {
@@ -9,9 +9,8 @@
       },
       "title": "Welcome!",
       "subtitle": "Here is your brand new app",
-      "abstract": "Enjoy development with <strong class=\"c-secondary\">Carpentry</strong>",
+      "abstract": "Enjoy development with <strong>Carpentry</strong>",
       "button": {
-        "link": true,
         "label": "Documentation",
         "icon": { "name": "github" },
         "attributes": {

jsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "baseUrl": ".",
     "paths": {
       "~/*": ["./src/*"]
     }