fixed copy files

gloriajs · Feb 25, 2023 · 0f722bd · 0f722bd
1 parent cc16509
commit 0f722bd
Show file tree

Hide file tree

Showing 10 changed files with 134 additions and 104 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Next Version
 
+# 2.1.6
+- Copying files that are meant to be copied before running CSS
+- Fixed sample files
+
 # 2.1.5
 - Tailwind command
 - Writes to file abstracted

diff --git a/README.md b/README.md
@@ -99,6 +99,7 @@ Refer to our [Contributing page](CONTRIBUTING.md) and local installation instruc
 - [ ] Delete unused files
 - [ ] Data sources
 - [x] interpolations
+- [ ] bug: only excluding first condition
 
 ## Data structure
 

diff --git a/_config.yml b/_config.yml
@@ -13,3 +13,5 @@ include:
   - docs
 exclude:
   - '.draft.md'
+copy:
+  - public
diff --git a/docs/commands/copy.md b/docs/commands/copy.md
@@ -11,4 +11,4 @@ layout: blog
 ./bin/gloria copy --dest=build --path=public
 ```
 
-Command to copy the static assets into edstination folder.
+Command to copy the static assets into destination folder.
diff --git a/docs/index.md b/docs/index.md
@@ -11,109 +11,104 @@ The following commands are available and exist:
 - [x] collect all files
 - [x] collect assets
 - [x] pre-process content pages
-- [ ] process content data and layouts
-- [ ] process tailwind
-- [ ] write to file system
+- [x] process content data and layouts
+- [x] process tailwind
+- [x] write to file system
 
 We might open a discord later.
 
 This project hopes to make simple websites super simple to create and deploy, specially for super easy things you don't wanna worry about, that way everyone can focus on their amazing content without worrying about obscure compile errors.
 
-Don't remember what this is:
+A configuration file looks like this:
 
 ```
-name: sampleblog
-location: sampleblog
-layout: default
-author: 'david silva'
-description: 'Sample site created with gloria'
-version: 1.0.0
+name: Gloria JS
+tagline: 'A simple static website generator'
+baseurl: 'https://gloriajs.github.io'
+author: 'daveed silva'
+description: 'Documentation for the tool gloriajs'
+dest: build
+theme:
+  - layouts/tailwind
+css: tailwind
+include:
+  - docs
+exclude:
+  - '.draft.md'
+copy:
+  - public
 ```
 
-You can add any amount of data here and it will be available for you in the templates as properties of <code>project.config</code>.
+You can add any additional properties here and they will be available for you in the templates as properties of <code>project.config</code>.
 
-        <h1>Commands</h1>
+## Commands
 
-        <p>The following commands are available to use</p>
+The following commands are available to use
 
-        <h2>Init</h2>
 
-        <p><code>gloria init [name]</code></p>
+- `collect` - `[output]` traverses the include-paths and saves information about the available files
+- `copy` - `[path] [dest]` copies the static files from source paths to dest folders
+- `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:tailwind` - `[path] [dest]` runs tailwind in the html output
+- `scripts` - `[path] [dest]` @TODO processes scripts
+- `write` - `[dest]` @TODO writes production version to disk and cleans temp files
+- `version` - ` ` returns the current package version
 
-        <p>Will create a new project in a specified folder.</p>
+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.
 
-        <p>Options can be passed in the command like <code>--name=myBlog</code> or given in the interactive prompt.</p>
+Find the website documentation in [github](https://github.com/gloriajs/gloriajs.github.io)
 
-        <h2>Build</h2>
+Or the live website in [gloria.js.org](https://gloria.js.org/)
 
-        <p><code>gloria build [dest] --clear=false</code></p>
+<h1>Template</h1>
 
-        <p>Builds the site into the desired destination. By default it will use a folder name 'site' in the root directory of
-            the project. It won't build to a parent folder. The command will fail if _config.yml is invalid or not present.</p>
+<p>Templates are html or markdown files, they are interpreted with <a href="https://www.npmjs.com/package/handlebars">handlebars</a>.</p>
 
-        <p>If clear equals true it will empty the destination directory before processing and copying content to it.</p>
+<p>There are three main objects you can access on your template, <code>site</code> has access to the properties specified
+    in <code>_config.yml</code>.
+    <code>page</code> has access to the properties specified in the header of the page, and <code>args</code> has
+    access to the arguments given to the command build. </p>
 
-        <p>Any amount of key-value pairs can be passed to the build command, like <code>title='A New Adventure</code> and they
-            will be available to use in your templates as properties of <code>args</code>.</p>
+<h2>Layouts</h2>
 
-        <h2>Serve</h2>
+<p>A layout file is used to have a structure common to different pages, for example a navigation menu, header, css includes,
+    scripts, etc.</p>
 
-        <p>Will spawn a web server to allow access to the built files, using the provided <code>dest</code> argument, or the
-            one stored in the site configuration.</p>
+<p>The name of the layout will be the name of the file, by default <code>default.html</code> is included, additional
+    files included in the <code>_layout</code> folder will be used. If no layout exists or is especified the file
+    will be rendered on its own.</p>
 
-        <h2>Help</h2>
+<p>The main thing that templates require is <code>&lbrace;&lbrace;&lbrace;page.content}}}</code> that will get replaced with the actual content
+    of the page.</p>
 
-        <p><code>gloria --help</code></p>
+<h2>Includes</h2>
 
-        <p>Will provide a list of commands and options available.</p>
+<p>Include files, or also known as partials, are files that can be included in your content or layouts, they can be
+    useful to reuse snippets like a <code>head</code> element, or a share button.</p>
 
-        <h1>Template</h1>
+<p>Any amount of partials and includes can exists, in the <code>_includes</code> folder, they are named as their file
+    name, and they can be used like this <code>&lbrace;&lbrace;&gt; head}}</code>. Data will be interpolated there as expected.</p>
 
-        <p>Templates are html or markdown files, they are interpreted with <a href="https://www.npmjs.com/package/handlebars">handlebars</a>.</p>
+<h2>Frontmatter</h2>
 
-        <p>There are three main objects you can access on your template, <code>site</code> has access to the properties specified
-            in <code>_config.yml</code>.
-            <code>page</code> has access to the properties specified in the header of the page, and <code>args</code> has
-            access to the arguments given to the command build. </p>
+<p>Every page can have additional attributes that will be accessible to it, the layout or the includes.</p>
 
-        <h2>Layouts</h2>
-
-        <p>A layout file is used to have a structure common to different pages, for example a navigation menu, header, css includes,
-            scripts, etc.</p>
-
-        <p>The name of the layout will be the name of the file, by default <code>default.html</code> is included, additional
-            files included in the <code>_layout</code> folder will be used. If no layout exists or is especified the file
-            will be rendered on its own.</p>
-
-        <p>The main thing that templates require is <code>&lbrace;&lbrace;&lbrace;page.content}}}</code> that will get replaced with the actual content
-            of the page.</p>
-
-        <h2>Includes</h2>
-
-        <p>Include files, or also known as partials, are files that can be included in your content or layouts, they can be
-            useful to reuse snippets like a <code>head</code> element, or a share button.</p>
-
-        <p>Any amount of partials and includes can exists, in the <code>_includes</code> folder, they are named as their file
-            name, and they can be used like this <code>&lbrace;&lbrace;&gt; head}}</code>. Data will be interpolated there as expected.</p>
-
-        <h2>Frontmatter</h2>
-
-        <p>Every page can have additional attributes that will be accessible to it, the layout or the includes.</p>
-
-        <p>The additional attributes should be included in the beginning of the file in the following format, use three dashes
-            in the first line of the file, and add any key pair of attributes using the
-            <a href="https://learn.getgrav.org/advanced/yaml">Yaml</a> syntax, and finish with three dashes. Like this:
-            <code></code>`</p>
-        <p>
-            This change allows accessing variables defined in layouts' and includes' frontmatters. This could be achieved through the following syntax. {{ page.g.layout.var1}} for accessing layout variables or
+<p>The additional attributes should be included in the beginning of the file in the following format, use three dashes
+    in the first line of the file, and add any key pair of attributes using the
+    <a href="https://learn.getgrav.org/advanced/yaml">Yaml</a> syntax, and finish with three dashes. Like this:
+    <code></code>`</p>
+<p>
+    This change allows accessing variables defined in layouts' and includes' frontmatters. This could be achieved through the following syntax. {{ page.g.layout.var1}} for accessing layout variables or
 
 {{ page.g.head.var1}} for accessing includes' (hbs partials) variables. head here is the name of the include. g (short for gloria) acts as a namespace to avoid collision between common variable names like 'title' or 'description'.
 
-        </p>
-        <hr>
+</p>
+<hr>
 
-        <p>
-            <pre><code>
+<p>
+    <pre><code>
 
 ---
 
@@ -123,44 +118,44 @@ description:
 
 ---
 
-            </code></pre>
-        </p>
+    </code></pre>
+</p>
 
-        <hr>
+<hr>
 
-        <h2>Issues</h2>
+<h2>Issues</h2>
 
-        <p>There's no layouts or including other files yet.</p>
+<p>There's no layouts or including other files yet.</p>
 
-        <p>Roadmap, also includes having access to other pages, to be able to loop in blog posts, or read categories for example.</p>
+<p>Roadmap, also includes having access to other pages, to be able to loop in blog posts, or read categories for example.</p>
 
-        <h1>Deployment</h1>
+<h1>Deployment</h1>
 
-        <p>You can use any service that lets you host HTML or static sites. The quickest ones to get working are <a href="https://pages.github.com/">github pages</a>            and
-            <a href="https://firebase.google.com/docs/hosting/">firebase</a>.</p>
+<p>You can use any service that lets you host HTML or static sites. The quickest ones to get working are <a href="https://pages.github.com/">github pages</a>            and
+    <a href="https://firebase.google.com/docs/hosting/">firebase</a>.</p>
 
-        <h2>Firebase instructions</h2>
+<h2>Firebase instructions</h2>
 
-        <p>Create a firebase account and a project, then run <code>firebase init</code> on your root folder and follow the instructions.
-            When prompted what folder to use, chose your destination folder.</p>
+<p>Create a firebase account and a project, then run <code>firebase init</code> on your root folder and follow the instructions.
+    When prompted what folder to use, chose your destination folder.</p>
 
-        <h2>Github pages instructions</h2>
+<h2>Github pages instructions</h2>
 
-        <p>The best option to use github pages is to build your site to a folder called <code>docs</code>, push to a repo, and
-            then select that folder in the github-pages configuration for that repo.</p>
+<p>The best option to use github pages is to build your site to a folder called <code>docs</code>, push to a repo, and
+    then select that folder in the github-pages configuration for that repo.</p>
 
-    <h1>Contributing</h1>
-    <p>
-        We are creating a contributing guide, find more information
-        <a href="/contributing">here</a>.
-    </p>
+<h1>Contributing</h1>
+<p>
+We are creating a contributing guide, find more information
+<a href="/contributing">here</a>.
+</p>
 
 
-        <h1>Troubleshooting</h1>
+<h1>Troubleshooting</h1>
 
-        <p>I'm currently using:</p>
+<p>I'm currently using:</p>
 
-        <p><pre><code>
+<p><pre><code>
 
 node v6.4.0
 npm 3.10.3

diff --git a/lib/commands/collect.js b/lib/commands/collect.js
@@ -1,16 +1,29 @@
 const klaw = require('klaw');
 const $q = require('q');
 const logger = require('../utils/logger');
+const root = process.cwd();
+const S = require(`string`);
+const path = require('path');
 
-const _klaw = (path, items, config) => {
+const _klaw = (folder, items, config) => {
   const promise = new Promise(function (resolve, reject) {
-    klaw(path)
+    klaw(folder)
       .on('data', (item) => {
         // @TODO: fix bug where is not ignoring excludes
         if (item.path.endsWith(config.exclude[0])) {
           return;
         } else {
-          items.push(item);
+          const shortPath = S(item.path).chompLeft(`${root}/`).s;
+          /**  excludes the folder it was found in, for copying files as they are usually referenced this way */
+          const relativePath = S(shortPath).chompLeft(folder).s;
+
+          const details = {
+            ...item,
+            shortPath,
+            relativePath,
+          };
+
+          items.push(details);
         }
       })
       .on('error', (e) => {

diff --git a/lib/commands/extract.js b/lib/commands/extract.js
@@ -26,7 +26,8 @@ const extract = (file, items) => {
     stat,
     isDir: stat.isDirectory(),
     path: file.path,
-    shortPath: S(file.path).chompLeft(root).s,
+    shortPath: file.shortPath,
+    relativePath: file.relativePath,
   };
 
   if (item.isDir) {

diff --git a/lib/commands/write.html.js b/lib/commands/write.html.js
@@ -11,19 +11,19 @@ const fs = require('fs');
 const run = (project) => {
   const promise = new Promise((resolve, reject) => {
     const { html, config } = project;
+    const { dest } = config;
 
     if (!html) {
       logger.error('Missing html data at css step');
       return reject();
     }
 
+    if (!fs.existsSync(dest)) {
+      fs.mkdirSync(dest, { recursive: true });
+    }
 
     html.map((file) => {
-      if (!fs.existsSync(config.dest)) {
-        fs.mkdirSync(config.dest, { recursive: true });
-      }
-
-      const destination = upath.normalize(`${config.dest}/${file.destination}`);
+      const destination = upath.normalize(`${dest}/${file.destination}`);
 
       const parsed = upath.parse(destination);
 
@@ -34,6 +34,20 @@ const run = (project) => {
       fs.writeFileSync(destination, file.content);
     });
 
+    project.extracted.copy.map((file) => {
+      const destination = upath.normalize(`${dest}/${file.relativePath}`);
+      const parsed = upath.parse(destination);
+
+      if (parsed.dir && !fs.existsSync(parsed.dir)) {
+        fs.mkdirSync(parsed.dir, { recursive: true });
+      }
+
+      if (!file.isDir) {
+        fs.writeFileSync(destination, file.content);
+      }
+
+    });
+
     return resolve(project);
   });
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gloriajs/gloria",
-  "version": "2.1.5",
+  "version": "2.1.6",
   "description": "Gloria is a NodeJS simple static website generator.",
   "main": "cli.js",
   "bin": "cli.js",

diff --git a/public/logo.png b/public/logo.png
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,3 +13,5 @@ include: @@
       - docs
     exclude:
       - '.draft.md'
+    copy:
+      - public