created tailwind command

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Next Version
+
+# 2.1.5
 - Tailwind command
+- Writes to file abstracted
 
 # 2.1.4
 - Build command correctly writes temp files to disk

README.md

@@ -4,7 +4,7 @@ _gloria is spanish for glory, also the name of my mom and the name was available
 
 **V2 is deprecating lots of old functions, make sure to read the migrating docs.** We're also slowly moving into typescript, and while I think it should work very well for your projects, legally I need to remind you that this is a satire of other projects.
 
-[![Build Status](https://travis-ci.org/gloriajs/gloria.svg?branch=master)](https://travis-ci.org/dvidsilva/gloria)
+It currently supports having a content management system using MD files and tailwind CSS, with some bugs, but the main functionality and philosophy have been accomplished.
 
 This project aims to be a substitute for [jekyll](https://jekyllrb.com/), to help you create static websites without depending on ruby.
 
@@ -34,8 +34,6 @@ Github pages offers support for custom domains, follow the instructions on [thei
 
 ## Installation
 
-Install globally or per project.
-
 For more information check our [website](https://gloriajs.github.io).
 
 Add the `@gloriajs` scope to your `.npmrc` or your project before installing. If added globally it only needs to be done once, but is better to add it on each project so your collaborators don't have to do it too before getting started. I can't remember my npm login, but once I figure it out we can also publish there I guess.
@@ -81,9 +79,9 @@ npm run gloria-local -- --version
 - `extract` - `[dest]` finds metadata and frontmatter information from every collected file
 - `prebuild` - `[dest]` creates the output placeholders so they can be processed
 - `build` - `[path] [dest]` interpolates the content into the layout
-- `css` - `[path] [dest]` @TODO runs tailwind in the html output
+- `css:tailwind` - `[path] [dest]` runs tailwind in the html output
 - `scripts` - `[path] [dest]` @TODO processes scripts
-- `write` - `[dest]` @TODO writes to disk
+- `write` - `[dest]` @TODO writes production version to disk and cleans temp files
 - `version` - ` ` returns the current package version
 
 The commands all should work on their own, and the ones that combine multiple steps do it very nicely by using promises, we pass the project around, and store and read from its properties, to create new commands or amplify existing ones, for plugins and templates, review the data structure.
@@ -94,11 +92,13 @@ Refer to our [Contributing page](CONTRIBUTING.md) and local installation instruc
 
 **Here's our @TODO in no particular order for inspiration:**
 
-- [ ] Write the previous commands to restore basic features
+- [x] Write the previous commands to restore basic features
+- [ ] Fix build so it interpolates the parsed markdown
 - [ ] Recreate documentation website
 - [ ] Move to typescript
 - [ ] Delete unused files
-- [ ] Data sources / interpolation
+- [ ] Data sources
+- [x] interpolations
 
 ## Data structure
 
@@ -115,6 +115,10 @@ const project = {
 
 Once we're in typescript it will be much easier to see by referencing the interfaces.
 
+## CSS
+
+I'm using tailwind coz it seemed easy, should be quite extendable and possible to include other css pre-processors, or change the configuration flag.
+
 ## Tests
 
 I removed this line `./node_modules/.bin/mocha --reporter spec` and need to add it later, but now that we're using TS and new testing tools have come out, perhaps we don't need mocha.

docs/commands/collect.md

@@ -2,6 +2,7 @@
 title: Collect command
 description: Documentation website for the collect command GloriaJS
 permalink: docs/command/collect
+layout: blog
 ---
 
 # Command

docs/commands/copy.md

@@ -2,6 +2,7 @@
 title: Copy command
 description: Documentation website for the copy command GloriaJS
 permalink: docs/command/copy
+layout: blog
 ---
 
 # Command

docs/tests.html

@@ -0,0 +1,8 @@
+---
+title: GloriaJS
+description: Documentation for testing with gloriaJS
+permalink: tests/
+layout: blog
+---
+<h2>Tests</h2>
+<p>Tests are not only possible, but desirable.</p>

layouts/tailwind/blog.layout.md

@@ -15,7 +15,7 @@ title: Blog
   </style>
 </head>
 <body>
-  <div class="">
+  <div class="container mx-auto px-4">
     <div>
       <h1>{{page.title}}</h1>
       <main>

layouts/tailwind/main.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

lib/bin/commands/build.js

@@ -4,8 +4,8 @@ const _collect = require('../../commands/collect');
 const _extract = require('../../commands/extract');
 const _prebuild = require('../../commands/prebuild');
 const _build = require('../../commands/build');
+const _write_html = require('../../commands/write.html');
 const fs = require('fs');
-const upath = require('upath');
 
 /**
  * work in progress, always add on top of existing ways and prevent
@@ -40,47 +40,23 @@ const build = (argv) => {
     .then((project) => _prebuild.run(project))
     .then((project) => _build.run(project))
     .then((prochecto) => {
-      const { config, html } = prochecto;
+      const { config } = prochecto;
 
       if (argv.dest) {
         const dest = `./${argv.dest}/built.${config._hash}.json`;
         const ztring = JSON.stringify(prochecto);
         fs.writeFileSync(dest, ztring);
       }
 
-      if (argv.folder) {
-        if (!fs.existsSync(argv.folder)) {
-          fs.mkdirSync(argv.folder, { recursive: true });
-        }
-
-        html.map((file) => {
-          const destination = upath.normalize(
-            `${argv.folder}/${file.destination}`,
-          );
-
-          const parsed = upath.parse(destination);
-
-          if (!fs.existsSync(parsed.dir)) {
-            fs.mkdirSync(parsed.dir, { recursive: true });
-          }
-
-          fs.writeFileSync(destination, file.content);
-        });
-      }
-
       logger.log({ ...prochecto });
-      return prochecto;
+      return _write_html.run(prochecto);
     })
     .catch((e) => {
       logger.error({ e });
     });
 };
 
 const options = {
-  folder: {
-    default: 'build',
-    description: `Destination folder to output temporary HTML files.`,
-  },
   dest: {
     default: null,
     description: `Destination folder to output JSON report.`,
@@ -91,10 +67,11 @@ const options = {
  * Command to compile html files
  */
 module.exports = {
-  command: `build [folder] [dest] [write]`,
+  command: `build [dest]`,
   aliases: ['html'],
-  describe: `Builds the site into the desired destination.
-    By default it will use a folder name 'build' in the root directory of the project.
+  describe: `Compiles files, interpolates data and writes temp files to chosen destination.
+    By default it will use a folder name 'build' in the root directory of the project,
+    Check your _config.yml to change.
     It won't build to a parent folder.
     The command will fail if _config.yml is invalid or not present.`,
   builder: options,

lib/bin/commands/css.tailwind.js

@@ -0,0 +1,81 @@
+const logger = require('../../utils/logger');
+const config = require('../../core/project.config');
+const _collect = require('../../commands/collect');
+const _extract = require('../../commands/extract');
+const _prebuild = require('../../commands/prebuild');
+const _build = require('../../commands/build');
+const _css_tailwind = require('../../commands/css.tailwind');
+const fs = require('fs');
+const upath = require('upath');
+const _write_html = require('../../commands/write.html');
+
+/**
+ * work in progress, always add on top of existing ways and prevent
+ * backwards compatibility issues
+ *
+ * Default include-paths are pages and posts.
+ *
+ * This method
+ * @param {string} argv.dest If present, write result to destination file
+ * @param {string} argv.folder If present writes files to folder
+ * @param {string} argv.write If false, skips writing files to disk
+ *
+ * @return {object} information like content and medatata from every coollected path
+ */
+const build = (argv) => {
+  const project = {
+    config: config.get(),
+    collected: {},
+    content: {},
+    extracted: {},
+    prebuilt: {
+      files: {},
+      styles: {},
+      scripts: {},
+    },
+    html: [],
+  };
+
+  _collect
+    .run(project)
+    .then((project) => _extract.run(project))
+    .then((project) => _prebuild.run(project))
+    .then((project) => _build.run(project))
+    .then((prochecto) => {
+      const { config, html } = prochecto;
+
+      if (argv.dest) {
+        const dest = `./${argv.dest}/built.${config._hash}.json`;
+        const ztring = JSON.stringify(prochecto);
+        fs.writeFileSync(dest, ztring);
+      }
+
+      return _write_html.run(prochecto);
+    })
+    .then((project) => _css_tailwind.run(project))
+    .then((project) => {
+      logger.log({ ...project });
+    })
+    .catch((e) => {
+      logger.error({ e });
+    });
+};
+
+const options = {
+  dest: {
+    default: null,
+    description: `Destination for stylesheet.`,
+  },
+};
+
+/**
+ * Command to compile html files
+ */
+module.exports = {
+  command: `css:tailwind [dest]`,
+  aliases: ['tailwind'],
+  describe: `Reads the html output and creates a tailwind stylesheet.
+    The command will fail if _config.yml is invalid or not present.`,
+  builder: options,
+  handler: build,
+};

lib/commands/build.js

@@ -24,6 +24,7 @@ const run = (project) => {
         page: {
           ...file.item.meta,
           ...file.item.attrs,
+          content: file.item.content,
           location: file.destination,
         },
       });

lib/commands/css.tailwind.js

@@ -0,0 +1,41 @@
+const logger = require('../utils/logger');
+const tailwind = require("tailwindcss");
+const postcss = require("postcss");
+const fs = require('fs');
+
+/**
+ * Creates the resulting CSS by reading all the pages and getting the tailwind classes
+ *
+ * @param {*} project
+ * @returns project
+ */
+const run = (project) => {
+  const promise = new Promise((resolve, reject) => {
+    const { html, config } = project;
+    if (!html) {
+      logger.error('Missing html data at css step');
+      return reject();
+    }
+
+    (async () => {
+      const result = await postcss([
+        tailwind({
+          //...config,
+          content: [`${config.dest}/**/*.{html,js}`],
+        }),
+      ]).process(`@tailwind base;@tailwind components;@tailwind utilities;`, {
+        from: undefined,
+      });
+
+      fs.writeFileSync(`${config.dest}/main.css`, result.css);
+    })();
+
+    return resolve(project);
+  });
+
+  return promise;
+};
+
+module.exports = {
+  run,
+};

lib/commands/write.html.js

@@ -0,0 +1,45 @@
+const logger = require('../utils/logger');
+const upath = require('upath');
+const fs = require('fs');
+
+/**
+ * Writes the HTHL property from the project to disk
+ *
+ * @param {*} project
+ * @returns project
+ */
+const run = (project) => {
+  const promise = new Promise((resolve, reject) => {
+    const { html, config } = project;
+
+    if (!html) {
+      logger.error('Missing html data at css step');
+      return reject();
+    }
+
+
+    html.map((file) => {
+      if (!fs.existsSync(config.dest)) {
+        fs.mkdirSync(config.dest, { recursive: true });
+      }
+
+      const destination = upath.normalize(`${config.dest}/${file.destination}`);
+
+      const parsed = upath.parse(destination);
+
+      if (!fs.existsSync(parsed.dir)) {
+        fs.mkdirSync(parsed.dir, { recursive: true });
+      }
+
+      fs.writeFileSync(destination, file.content);
+    });
+
+    return resolve(project);
+  });
+
+  return promise;
+};
+
+module.exports = {
+  run,
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gloriajs/gloria",
-  "version": "2.1.4",
+  "version": "2.1.5",
   "description": "Gloria is a NodeJS simple static website generator.",
   "main": "cli.js",
   "bin": "cli.js",
@@ -25,6 +25,7 @@
   "dependencies": {
     "@types/yargs": "^17.0.19",
     "async": "^2.1.2",
+    "autoprefixer": "^10.4.13",
     "chalk": "^5.2.0",
     "configstore": "^2.1.0",
     "express": "^4.14.0",
@@ -39,6 +40,7 @@
     "mz": "^2.5.0",
     "node-watch": "^0.4.1",
     "open": "0.0.5",
+    "postcss": "^8.4.21",
     "prompt-sync": "^4.1.4",
     "q": "^1.4.1",
     "request": "^2.79.0",
@@ -47,6 +49,7 @@
     "shelljs": "^0.7.5",
     "string": "^3.3.3",
     "stylus": "^0.54.5",
+    "tailwindcss": "^3.2.7",
     "upath": "^2.0.1",
     "uuid": "^9.0.0",
     "yaml": "^0.3.0",