From 2c9c3868fbb65ac2acf2c5739bce50c935554bc7 Mon Sep 17 00:00:00 2001 From: Alexander Date: Tue, 1 Feb 2022 16:48:15 +0200 Subject: [PATCH 1/4] Set theme jekyll-theme-cayman --- _config.yml | 1 + index.md | 37 +++++++++++++++++++++++++++++++++++++ 2 files changed, 38 insertions(+) create mode 100644 _config.yml create mode 100644 index.md diff --git a/_config.yml b/_config.yml new file mode 100644 index 0000000..c419263 --- /dev/null +++ b/_config.yml @@ -0,0 +1 @@ +theme: jekyll-theme-cayman \ No newline at end of file diff --git a/index.md b/index.md new file mode 100644 index 0000000..3eb9812 --- /dev/null +++ b/index.md @@ -0,0 +1,37 @@ +## Welcome to GitHub Pages + +You can use the [editor on GitHub](https://github.com/yukal/gulp-json-loader/edit/gh-pages/index.md) to maintain and preview the content for your website in Markdown files. + +Whenever you commit to this repository, GitHub Pages will run [Jekyll](https://jekyllrb.com/) to rebuild the pages in your site, from the content in your Markdown files. + +### Markdown + +Markdown is a lightweight and easy-to-use syntax for styling your writing. It includes conventions for + +```markdown +Syntax highlighted code block + +# Header 1 +## Header 2 +### Header 3 + +- Bulleted +- List + +1. Numbered +2. List + +**Bold** and _Italic_ and `Code` text + +[Link](url) and ![Image](src) +``` + +For more details see [Basic writing and formatting syntax](https://docs.github.com/en/github/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax). + +### Jekyll Themes + +Your Pages site will use the layout and styles from the Jekyll theme you have selected in your [repository settings](https://github.com/yukal/gulp-json-loader/settings/pages). The name of this theme is saved in the Jekyll `_config.yml` configuration file. + +### Support or Contact + +Having trouble with Pages? Check out our [documentation](https://docs.github.com/categories/github-pages-basics/) or [contact support](https://support.github.com/contact) and we’ll help you sort it out. From 8a08dbcb486cc8c79b0e57aa551e91974567c036 Mon Sep 17 00:00:00 2001 From: Alexander Yukal Date: Tue, 1 Feb 2022 19:00:37 +0200 Subject: [PATCH 2/4] update: GitHub Pages --- index.md | 155 +++++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 134 insertions(+), 21 deletions(-) diff --git a/index.md b/index.md index 3eb9812..f213d7b 100644 --- a/index.md +++ b/index.md @@ -1,37 +1,150 @@ -## Welcome to GitHub Pages +## Gulp Json Loader -You can use the [editor on GitHub](https://github.com/yukal/gulp-json-loader/edit/gh-pages/index.md) to maintain and preview the content for your website in Markdown files. +A little tool for the [gulp-data](https://www.npmjs.com/package/gulp-data) plugin. +It useful for automatically data loading in the development including the PUG files. -Whenever you commit to this repository, GitHub Pages will run [Jekyll](https://jekyllrb.com/) to rebuild the pages in your site, from the content in your Markdown files. +### What for +I tried to find any simple solution to assign my variables to a current PUG file in a building +process, but some of the solutions are the same with solutions between the 2014th and 2019th +years and, actually do not satisfy my needs as I want. And the most popular solution I have +found looks like: -### Markdown +```javascript +// Somewhere in gulp task +.pipe(data(() => JSON.parse(fs.readFileSync('data.json')) )) -Markdown is a lightweight and easy-to-use syntax for styling your writing. It includes conventions for +// Sometimes it can looks like this one +.pipe(data(() => require('data.json') )) +``` + +After a while, in search of the solution I have found one more way in solving this decision +in a [detailed article](https://tusharghate.com/rendering-pug-templates-with-multiple-data-files), +but still not satisfied. + +So, what's wrong with these solutions? +First of all, any time, when the queue reaches to Html part, it starts the merging process of all +the JSON files. Each any Html file, Carl! It means that sometimes the process is performing +unnecessary actions. What if you don't need to include the data in some of the Html file, it still +will run enforced actions, any time, again and again, merge... merge... merge. Yes, you can solve +it by running a once merge, and then always include it as a combined object from the JSON file, as +the solution in an article above. But it still not a good solution to including the JSON file there +where you should not include. + +And I decided to fix this problem in my vision. + +### How does it work +When the build process's queue reaches Html, it automatically searches the JSON file with the same +name as in the directory with Html files, or PUG files (it depends on how you set up your project). + +### Structure +To automatically asigning data to the pages, you must be following the canonical paths. The +structure of directory with the JSON files should contains with two required folders inside: +**pages** and **imports**. The **pages** directory structure must be exactly the same structure as +the directory with PUG files. Here in example the PUG files located in **html** directory. The +**imports** directory is provided for the JSON files which you can include as a partial data. +If you missed any of the JSON files in the data/pages directory, the loading of the JSON files will +not happen and the error will not rise except one thing - It would not happen if you will not try +to get the data variable from current context while the building process is running. + +```bash +src src +├─ ... ├─ ... +└─ html └─ data + │ ├─ imports + │ │ └─ ... + │ └─ pages + ├─ about.pug ├─ about.json + ├─ menu.pug ├─ menu.json + ├─ without_data.pug ├─ [ empty ] // no data provided + └─ subdir └─ subdir + └─ ... └─ ... +``` + +### Usage -```markdown -Syntax highlighted code block +Somewhere in gulpfile.js: +```javascript +// It is optional now, but you able to tune it as you wish. +// You can pass the settings by an object, or you can pass it using package.json +const jsonLoaderSettings = { + // Chose where the source files are located. + // Use sourcePath or the pare of pathHtml and pathData -# Header 1 -## Header 2 -### Header 3 + // sourcePath: 'src', + pathHtml: 'src/html', + pathData: 'src/data', -- Bulleted -- List + // The namespace where the Data is located. + // To get some loaded data from the JSON in a PUG context use syntax: + // $.href or $.imports.menu + dataEntry: '$', -1. Numbered -2. List + // It needs for the Date object to show a local date + locales: 'en-GB', -**Bold** and _Italic_ and `Code` text + // Will report about the loaded JSON files + report: true, +}; -[Link](url) and ![Image](src) +const gulp = require('gulp'); +const plugins = require('gulp-load-plugins')(); +const jsonLoaderFactory = require('./lib/gulp-json-loader'); +const jsonLoader = jsonLoaderFactory(jsonLoaderSettings); + +function html() { + return gulp.src('src/html/**/*.pug') + .pipe(plugins.data(jsonLoader)) + .pipe(plugins.pug({ + pretty: true + })) + .pipe(gulp.dest('dest')); +} +``` + +Somewhere in json file: +```javascript +{ + "data": { // Here, in the data node, you can add any data + "name": "Catalog", // that belongs to your page + "href": "#catalog", + "visible": true + }, + "imports": [ // Sometimes you need to include other parts of the data. + "partials/catalog_1", // To avoid the duplicate data you can split the files + "partials/catalog_2", // and include them partially + "partials/genres" + ] +} ``` -For more details see [Basic writing and formatting syntax](https://docs.github.com/en/github/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax). +Somewhere in pug file: +```pug +block content + // As a result, you will be able to access the "$" variable. + // All imported data will be available in the $.imports namespace + //- - console.log($) + + div= filename + div: a(href = $.href)= $.name + + ul.genres + each $GenreItem in $.imports.genres + li + a(href = $GenreItem.href)= $GenreItem.name +``` + +Run command to build html page with data +```bash +$ gulp html + +# Or +$ npx gulp html +``` -### Jekyll Themes +## Libraries Using `gulp-json-loader` -Your Pages site will use the layout and styles from the Jekyll theme you have selected in your [repository settings](https://github.com/yukal/gulp-json-loader/settings/pages). The name of this theme is saved in the Jekyll `_config.yml` configuration file. +- [gulp-data](https://www.npmjs.com/package/gulp-data) -### Support or Contact +## License -Having trouble with Pages? Check out our [documentation](https://docs.github.com/categories/github-pages-basics/) or [contact support](https://support.github.com/contact) and we’ll help you sort it out. +[MIT License](http://en.wikipedia.org/wiki/MIT_License) From d0cbc3e962fb577ec7f9e55eaddd26b127260f3d Mon Sep 17 00:00:00 2001 From: Alexander Yukal Date: Tue, 30 Jan 2024 11:43:22 +0200 Subject: [PATCH 3/4] update description and fix grammar and typos --- index.md | 45 ++++++++++----------------------------------- 1 file changed, 10 insertions(+), 35 deletions(-) diff --git a/index.md b/index.md index f213d7b..63f4f4a 100644 --- a/index.md +++ b/index.md @@ -1,13 +1,8 @@ -## Gulp Json Loader - -A little tool for the [gulp-data](https://www.npmjs.com/package/gulp-data) plugin. -It useful for automatically data loading in the development including the PUG files. +# gulp-json-loader +A little tool for the [gulp-data](https://www.npmjs.com/package/gulp-data) plugin. It useful for automatically data loading in the development including the PUG files. ### What for -I tried to find any simple solution to assign my variables to a current PUG file in a building -process, but some of the solutions are the same with solutions between the 2014th and 2019th -years and, actually do not satisfy my needs as I want. And the most popular solution I have -found looks like: +I've tried to find a simple solution for assigning my variables into PUG files in a building process. Some of them have similar examples between the 2014th and 2019th years and don't satisfy my technical needs. The most popular solution I have found looks like this: ```javascript // Somewhere in gulp task @@ -17,34 +12,14 @@ found looks like: .pipe(data(() => require('data.json') )) ``` -After a while, in search of the solution I have found one more way in solving this decision -in a [detailed article](https://tusharghate.com/rendering-pug-templates-with-multiple-data-files), -but still not satisfied. - -So, what's wrong with these solutions? -First of all, any time, when the queue reaches to Html part, it starts the merging process of all -the JSON files. Each any Html file, Carl! It means that sometimes the process is performing -unnecessary actions. What if you don't need to include the data in some of the Html file, it still -will run enforced actions, any time, again and again, merge... merge... merge. Yes, you can solve -it by running a once merge, and then always include it as a combined object from the JSON file, as -the solution in an article above. But it still not a good solution to including the JSON file there -where you should not include. - -And I decided to fix this problem in my vision. +What's wrong with these examples? +First of all, each time when the queue reaches the HTML part, it starts the merging process of all the JSON files. It means that sometimes the process is performing unnecessary actions. We can solve it by once running merge and then always including it as a combined object from the JSON file. But it is still not a good idea to include the JSON file there where we shouldn't. ### How does it work -When the build process's queue reaches Html, it automatically searches the JSON file with the same -name as in the directory with Html files, or PUG files (it depends on how you set up your project). +When the build process queue reaches HTML, it automatically searches the JSON file with the same name as in the directory with kinds of PUG files (it depends on how you set up your project). ### Structure -To automatically asigning data to the pages, you must be following the canonical paths. The -structure of directory with the JSON files should contains with two required folders inside: -**pages** and **imports**. The **pages** directory structure must be exactly the same structure as -the directory with PUG files. Here in example the PUG files located in **html** directory. The -**imports** directory is provided for the JSON files which you can include as a partial data. -If you missed any of the JSON files in the data/pages directory, the loading of the JSON files will -not happen and the error will not rise except one thing - It would not happen if you will not try -to get the data variable from current context while the building process is running. +To assign some data inside your pages, you have to follow canonical paths. The directory structure with JSON files must contain two necessary folders inside pages and imports. The "pages" directory structure must have the same structure as the directory with the pug files. In the example below, pug files are placed inside the "html" directory. The "imports" directory is provided for the JSON files, which you can include as partial data. If you've missed any JSON file inside the data/pages directory, the loading of the JSON files will not happen, and the error will not rise except, It will not rise if you do not try to get the data variable from the current context while the building process is running. ```bash src src @@ -109,9 +84,9 @@ Somewhere in json file: "href": "#catalog", "visible": true }, - "imports": [ // Sometimes you need to include other parts of the data. - "partials/catalog_1", // To avoid the duplicate data you can split the files - "partials/catalog_2", // and include them partially + "imports": [ // Sometimes, you might need to include other parts of the data. + "partials/catalog_1", // You can split the files and include them partially + "partials/catalog_2", // to avoid duplicates "partials/genres" ] } From 18be9f5aece6ebd79f2d0b63d744cf069584e6b9 Mon Sep 17 00:00:00 2001 From: Alexander Yukal Date: Tue, 30 Jan 2024 11:47:50 +0200 Subject: [PATCH 4/4] update title --- index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.md b/index.md index 63f4f4a..fcebf99 100644 --- a/index.md +++ b/index.md @@ -1,4 +1,4 @@ -# gulp-json-loader +# Gulp Json Loader A little tool for the [gulp-data](https://www.npmjs.com/package/gulp-data) plugin. It useful for automatically data loading in the development including the PUG files. ### What for