AXE-WEB/block-dev-tool
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added the logic of wrapper + responsiveness controllers.

Browse Source
This commit is contained in:
Roman Axelrod
2022-07-19 18:43:16 +03:00
parent a7e51803cf
commit 9173efe9c9
24 changed files with 535 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+3
View File
@@ -10,3 +10,6 @@ deploy-*.sh
# Custom # Custom
blocks blocks
config
data
src
README.md
+8
View File
@@ -20,3 +20,11 @@ environment.
Generated blocks are including this repository. Generated blocks are including this repository.
This project is running a nodejs script with `browsersync` and `gulp` which improves the development process. This project is running a nodejs script with `browsersync` and `gulp` which improves the development process.
## Development / Testing the tool
Run `npm run generate-block` command and give the `development` name to the block, it will generate the `/blocks` folder.
Copy the `/development/data` and `/development/src` folders to root folder of project.
Now you're ready to run development process: `npm run dev`.
generators/block/templates/src/template.template.hbs
+2 -2
View File
@@ -33,9 +33,9 @@
<h2>Image Example</h2> <h2>Image Example</h2>
<div> <div>
<img src="images/demo.jpeg" alt=""> <img src="/images/demo.jpeg" alt="">
<br> <br>
<code>&lt;img src=&quot;images/demo.jpeg&quot; alt=&quot;&quot;&gt; <code>&lt;img src=&quot;/images/demo.jpeg&quot; alt=&quot;&quot;&gt;
</code> </code>
</div> </div>
layouts/alignfull.hbs
-2
View File
@@ -4,8 +4,6 @@
<body> <body>
{{> (include_partial "layouts/partials/toolbar") }}
<main> <main>
{{> (include_block_template) }} {{> (include_block_template) }}
</main> </main>
layouts/container.hbs
-2
View File
@@ -4,8 +4,6 @@
<body> <body>
{{> (include_partial "layouts/partials/toolbar") }}
<main> <main>
<div class="container"> <div class="container">
{{> (include_block_template) }} {{> (include_block_template) }}
layouts/images/icon-desktop.svg
+18
View File
@@ -0,0 +1,18 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M15 20H9" stroke="url(#paint0_linear_17102_17357)" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
<path
d="M19 5H5C4.44772 5 4 5.44772 4 6V16C4 16.5523 4.44772 17 5 17H19C19.5523 17 20 16.5523 20 16V6C20 5.44772 19.5523 5 19 5Z"
stroke="url(#paint1_linear_17102_17357)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<defs>
<linearGradient id="paint0_linear_17102_17357" x1="9" y1="21" x2="11.3077" y2="17.5385"
gradientUnits="userSpaceOnUse">
<stop stop-color="#14181F"/>
<stop offset="1" stop-color="#272A31"/>
</linearGradient>
<linearGradient id="paint1_linear_17102_17357" x1="4" y1="17" x2="22" y2="11" gradientUnits="userSpaceOnUse">
<stop stop-color="#14181F"/>
<stop offset="1" stop-color="#272A31"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 970 B

layouts/images/icon-mobile.svg
+19
View File
@@ -0,0 +1,19 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path
d="M16 3H8C7.44772 3 7 3.44772 7 4V20C7 20.5523 7.44772 21 8 21H16C16.5523 21 17 20.5523 17 20V4C17 3.44772 16.5523 3 16 3Z"
stroke="url(#paint0_linear_17102_17362)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 18H12.002V18.002H12V18Z" stroke="url(#paint1_linear_17102_17362)" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
<defs>
<linearGradient id="paint0_linear_17102_17362" x1="7" y1="21" x2="19.2634" y2="19.2967"
gradientUnits="userSpaceOnUse">
<stop stop-color="#14181F"/>
<stop offset="1" stop-color="#272A31"/>
</linearGradient>
<linearGradient id="paint1_linear_17102_17362" x1="12" y1="18.002" x2="12.0024" y2="18.0014"
gradientUnits="userSpaceOnUse">
<stop stop-color="#14181F"/>
<stop offset="1" stop-color="#272A31"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

layouts/images/icon-tablet.svg
+19
View File
@@ -0,0 +1,19 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path
d="M20 3H4C3.44772 3 3 3.44772 3 4V20C3 20.5523 3.44772 21 4 21H20C20.5523 21 21 20.5523 21 20V4C21 3.44772 20.5523 3 20 3Z"
stroke="url(#paint0_linear_17102_17360)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 18H12.002V18.002H12V18Z" stroke="url(#paint1_linear_17102_17360)" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
<defs>
<linearGradient id="paint0_linear_17102_17360" x1="3" y1="21" x2="24.1765" y2="15.7059"
gradientUnits="userSpaceOnUse">
<stop stop-color="#14181F"/>
<stop offset="1" stop-color="#272A31"/>
</linearGradient>
<linearGradient id="paint1_linear_17102_17360" x1="12" y1="18.002" x2="12.0024" y2="18.0014"
gradientUnits="userSpaceOnUse">
<stop stop-color="#14181F"/>
<stop offset="1" stop-color="#272A31"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

layouts/index.hbs
+19
View File
@@ -0,0 +1,19 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/styles/page--main.css">
<title>Block Development Tool</title>
</head>
<body>
{{> (include_partial "layouts/partials/toolbar") }}
<script>window.previewFrameUrl = 'http://localhost:{{ port }}/view/{{ baseView }}';</script>
<iframe id="preview_frame" src="http://localhost:{{ port }}/view/{{ baseView }}" class="breakpoint"></iframe>
<script src="/scripts/page--toolbar.js"></script>
</body>
</html>
layouts/partials/head.hbs
+5 -3
View File
@@ -2,8 +2,10 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
{{#if config.cssUrl }}<link rel="stylesheet" href="{{ config.cssUrl }}"> {{#if config.cssUrl }}
{{/if}}<link rel="stylesheet" href="styles/page--main.css"> <link rel="stylesheet" href="{{ config.cssUrl }}">
<link rel="stylesheet" href="styles/{{ config.blockName }}.min.css"> {{/if}}
<link rel="stylesheet" href="/styles/page--view.css">{{# if config.blockName}}
<link rel="stylesheet" href="/styles/{{ config.blockName }}.min.css">{{/if}}
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/> <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>
</head> </head>
layouts/partials/scripts.hbs
+3 -4
View File
@@ -1,5 +1,4 @@
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script> <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>{{#if config.jsUrl }}
<script src="scripts/page--toolbar.js"></script>{{#if config.jsUrl }} <script src="{{ config.jsUrl }}"></script>{{/if}}{{#if config.blockName }}
<script src="{{ config.jsUrl }}"></script>{{/if}} <script src="/scripts/{{ config.blockName }}.min.js"></script>{{/if}}
<script src="scripts/{{ config.blockName }}.min.js"></script>
layouts/partials/toolbar.hbs
+13
View File
@@ -1,7 +1,20 @@
<header class="page_toolbar"> <header class="page_toolbar">
<div class="page_toolbar__responsive_mode">
<input type="radio" value="desktop" id="responsive_mode__desktop" name="responsive_mode" checked="checked"/>
<label for="responsive_mode__desktop">Desktop</label>
<input type="radio" value="tablet" id="responsive_mode__tablet" name="responsive_mode"/>
<label for="responsive_mode__tablet">Tablet</label>
<input type="radio" value="mobile" id="responsive_mode__mobile" name="responsive_mode"/>
<label for="responsive_mode__mobile">Mobile</label>
</div>
<div class="page_toolbar__data_options"> <div class="page_toolbar__data_options">
<label for="data-options">Data Options: </label> <label for="data-options">Data Options: </label>
<select name="data" id="data-options"> <select name="data" id="data-options">
{{#each config.dataFiles }} {{#each config.dataFiles }}
<option value="{{ name }}" {{#if active }}selected="selected"{{/if}}>{{ name }}</option> <option value="{{ name }}" {{#if active }}selected="selected"{{/if}}>{{ name }}</option>
layouts/scripts/page--toolbar.js
+28 -3
View File
@@ -1,13 +1,38 @@
(function () { (function () {
const previewFrame = document.getElementById('preview_frame');
initDataOptions();
initResponsiveMode();
/**
* Functions
*/
function initDataOptions() {
const dataOptionsSelect = document.getElementById('data-options'); const dataOptionsSelect = document.getElementById('data-options');
if (!dataOptionsSelect) { if (!dataOptionsSelect) {
return; return;
} }
dataOptionsSelect.addEventListener('change', function () { dataOptionsSelect.addEventListener('change', function () {
console.log(this.value) previewFrame.src = window.previewFrameUrl + '?data=' + this.value;
window.location = '?data=' + this.value; });
}) }
function initResponsiveMode() {
document.querySelectorAll('input[name="responsive_mode"]').forEach((input) => {
input.addEventListener('change', (event) => {
const mode = event.target.value;
previewFrame.classList.remove('breakpoint--desktop');
previewFrame.classList.remove('breakpoint--tablet');
previewFrame.classList.remove('breakpoint--mobile');
previewFrame.classList.add('breakpoint--' + mode);
});
});
}
})(); })();
layouts/styles/_page--breakpoints.scss
+24
View File
@@ -0,0 +1,24 @@
#preview_frame {
display: block;
margin-right: auto;
margin-left: auto;
border: 1px solid #E2E8F0;
transition: max-width .3s ease-in-out, width .3s ease-in-out;
&.breakpoint {
width: 100%;
max-width: 1920px;
//max-width: 100%;
&--mobile {
max-width: 375px;
}
&--tablet {
max-width: 768px;
}
}
}
layouts/styles/_page--main--responsive-mode.scss
+38
View File
@@ -0,0 +1,38 @@
&__responsive_mode {
display: flex;
gap: 0.5rem;
input[type='radio'] {
display: none;
}
label {
--size: 1.5rem;
cursor: pointer;
background-image: url("../images/icon-desktop.svg");
background-repeat: no-repeat;
background-size: calc(var(--size) - 0.15rem);
background-position: center;
font-size: 1px;
color: rgba(0, 0, 0, 0);
line-height: 1;
display: block;
width: var(--size);
height: var(--size);
border-radius: 0.25rem;
&[for="responsive_mode__tablet"] {
background-image: url("../images/icon-tablet.svg");
}
&[for="responsive_mode__mobile"] {
background-image: url("../images/icon-mobile.svg");
}
}
input[type='radio']:checked + label {
background-color: #CBD5E0;
}
}
layouts/styles/page--main.css
+70 -18
View File
@@ -1,29 +1,36 @@
body { body {
margin: 0; margin: 0;
font-size: 1rem; font-size: 1rem;
background-color: #F7FAFC;
} }
header.page_toolbar { iframe {
margin-top: 30px;
height: calc(100% - 54px - 32px);
background-color: white;
}
.page_toolbar {
--gap: 2.5rem; --gap: 2.5rem;
font-size: 14px; font-size: 14px;
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
background-color: #ccc; background-color: #EDF2F7;
padding: 1em; padding: 1em;
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: var(--gap); gap: var(--gap);
align-items: center; align-items: center;
margin-bottom: 2em;
} }
.page_toolbar > div {
header.page_toolbar > div {
position: relative; position: relative;
} }
@media (max-width: 1024px) {
header.page_toolbar > div:not(:first-child):after { .page_toolbar > div {
content: '|'; display: none;
}
}
.page_toolbar > div:not(:first-child):after {
content: "|";
position: absolute; position: absolute;
left: calc(var(--gap) / 2 * -1); left: calc(var(--gap) / 2 * -1);
top: 40%; top: 40%;
@@ -31,8 +38,7 @@ header.page_toolbar > div:not(:first-child):after {
line-height: 1; line-height: 1;
transform: translateY(-50%); transform: translateY(-50%);
} }
.page_toolbar > div select {
header.page_toolbar select {
font-size: 0.85em; font-size: 0.85em;
margin: 0; margin: 0;
display: inline-block; display: inline-block;
@@ -41,13 +47,59 @@ header.page_toolbar select {
width: initial !important; width: initial !important;
padding: 4px 8px; padding: 4px 8px;
} }
@media (max-width: 1024px) { @media (max-width: 1024px) {
header.page_toolbar > div { .page_toolbar__data_options {
display: none;
}
header.page_toolbar .page_toolbar__data_options {
display: block; display: block;
} }
} }
.page_toolbar__responsive_mode {
display: flex;
gap: 0.5rem;
}
.page_toolbar__responsive_mode input[type=radio] {
display: none;
}
.page_toolbar__responsive_mode label {
--size: 1.5rem;
cursor: pointer;
background-image: url("../images/icon-desktop.svg");
background-repeat: no-repeat;
background-size: calc(var(--size) - 0.15rem);
background-position: center;
font-size: 1px;
color: rgba(0, 0, 0, 0);
line-height: 1;
display: block;
width: var(--size);
height: var(--size);
border-radius: 0.25rem;
}
.page_toolbar__responsive_mode label[for=responsive_mode__tablet] {
background-image: url("../images/icon-tablet.svg");
}
.page_toolbar__responsive_mode label[for=responsive_mode__mobile] {
background-image: url("../images/icon-mobile.svg");
}
.page_toolbar__responsive_mode input[type=radio]:checked + label {
background-color: #CBD5E0;
}
#preview_frame {
display: block;
margin-right: auto;
margin-left: auto;
border: 1px solid #E2E8F0;
transition: max-width 0.3s ease-in-out, width 0.3s ease-in-out;
}
#preview_frame.breakpoint {
width: 100%;
max-width: 1920px;
}
#preview_frame.breakpoint--mobile {
max-width: 375px;
}
#preview_frame.breakpoint--tablet {
max-width: 768px;
}
/*# sourceMappingURL=page--main.css.map */
layouts/styles/page--main.css.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["page--main.scss","_page--main--responsive-mode.scss","_page--breakpoints.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EAEA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAGA;EACE;;AAEA;EAHF;IAII;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EADF;IAEI;;;ACxDN;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAIJ;EACE;;;AClCJ;EACE;EACA;EACA;EAEA;EAEA;;AAEA;EACE;EACA;;AAGA;EACE;;AAGF;EACE","file":"page--main.css"}
layouts/styles/page--main.scss
+66
View File
@@ -0,0 +1,66 @@
body {
margin: 0;
font-size: 1rem;
//overflow: none;
background-color: #F7FAFC;
}
iframe {
margin-top: 30px;
height: calc(100% - 54px - 32px);
background-color: white;
}
.page_toolbar {
--gap: 2.5rem;
font-size: 14px;
font-family: Arial, sans-serif;
background-color: #EDF2F7;
padding: 1em;
display: flex;
justify-content: center;
gap: var(--gap);
align-items: center;
//margin-bottom: 2em;
> div {
position: relative;
@media (max-width: 1024px) {
display: none;
}
&:not(:first-child):after {
content: '|';
position: absolute;
left: calc(var(--gap) / 2 * -1);
top: 40%;
font-size: 20px;
line-height: 1;
transform: translateY(-50%);
}
select {
font-size: 0.85em;
margin: 0;
display: inline-block;
border-radius: initial;
min-width: initial;
width: initial !important;
padding: 4px 8px;
}
}
&__data_options {
@media (max-width: 1024px) {
display: block;
}
}
@import "page--main--responsive-mode";
}
@import "page--breakpoints";
layouts/styles/page--view.css
+19
View File
@@ -0,0 +1,19 @@
body {
margin: 0;
}
main {
max-width: 1920px;
margin-left: auto;
margin-right: auto;
}
.container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
/*# sourceMappingURL=page--view.css.map */
layouts/styles/page--view.css.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["page--view.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"page--view.css"}
layouts/styles/page--view.scss
+17
View File
@@ -0,0 +1,17 @@
body {
margin: 0;
}
main {
max-width: 1920px;
margin-left: auto;
margin-right: auto;
}
.container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
package-lock.json
Generated
+100 -10
View File
@@ -1,12 +1,12 @@
{ {
"name": "create-block-dev-tool", "name": "create-block-dev-tool",
"version": "1.0.2", "version": "1.0.3",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "create-block-dev-tool", "name": "create-block-dev-tool",
"version": "1.0.2", "version": "1.0.3",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"browser-sync": "^2.27.9", "browser-sync": "^2.27.9",
@@ -27,6 +27,9 @@
}, },
"bin": { "bin": {
"component-dev": "server.js" "component-dev": "server.js"
},
"devDependencies": {
"open": "^8.4.0"
} }
}, },
"node_modules/@ampproject/remapping": { "node_modules/@ampproject/remapping": {
@@ -3039,6 +3042,15 @@
"node": ">=0.8" "node": ">=0.8"
} }
}, },
"node_modules/define-lazy-prop": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
"integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
"dev": true,
"engines": {
"node": ">=8"
}
},
"node_modules/define-properties": { "node_modules/define-properties": {
"version": "1.1.4", "version": "1.1.4",
"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz", "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
@@ -8985,11 +8997,44 @@
} }
}, },
"node_modules/open": { "node_modules/open": {
"version": "6.4.0", "version": "8.4.0",
"resolved": "https://registry.npmjs.org/open/-/open-6.4.0.tgz", "resolved": "https://registry.npmjs.org/open/-/open-8.4.0.tgz",
"integrity": "sha512-IFenVPgF70fSm1keSd2iDBIDIBZkroLeuffXq+wKTzTJlBpesFWojV9lb8mzOfaAzM1sr7HQHuO0vtV0zYekGg==", "integrity": "sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==",
"dev": true,
"dependencies": { "dependencies": {
"is-wsl": "^1.1.0" "define-lazy-prop": "^2.0.0",
"is-docker": "^2.1.1",
"is-wsl": "^2.2.0"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/open/node_modules/is-docker": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
"integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
"dev": true,
"bin": {
"is-docker": "cli.js"
},
"engines": {
"node": ">=8"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/open/node_modules/is-wsl": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
"integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
"dev": true,
"dependencies": {
"is-docker": "^2.0.0"
}, },
"engines": { "engines": {
"node": ">=8" "node": ">=8"
@@ -14451,6 +14496,17 @@
"node": ">=6" "node": ">=6"
} }
}, },
"node_modules/yo/node_modules/open": {
"version": "6.4.0",
"resolved": "https://registry.npmjs.org/open/-/open-6.4.0.tgz",
"integrity": "sha512-IFenVPgF70fSm1keSd2iDBIDIBZkroLeuffXq+wKTzTJlBpesFWojV9lb8mzOfaAzM1sr7HQHuO0vtV0zYekGg==",
"dependencies": {
"is-wsl": "^1.1.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/yo/node_modules/p-locate": { "node_modules/yo/node_modules/p-locate": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz", "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
@@ -17084,6 +17140,12 @@
} }
} }
}, },
"define-lazy-prop": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
"integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
"dev": true
},
"define-properties": { "define-properties": {
"version": "1.1.4", "version": "1.1.4",
"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz", "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
@@ -21696,11 +21758,31 @@
} }
}, },
"open": { "open": {
"version": "6.4.0", "version": "8.4.0",
"resolved": "https://registry.npmjs.org/open/-/open-6.4.0.tgz", "resolved": "https://registry.npmjs.org/open/-/open-8.4.0.tgz",
"integrity": "sha512-IFenVPgF70fSm1keSd2iDBIDIBZkroLeuffXq+wKTzTJlBpesFWojV9lb8mzOfaAzM1sr7HQHuO0vtV0zYekGg==", "integrity": "sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==",
"dev": true,
"requires": { "requires": {
"is-wsl": "^1.1.0" "define-lazy-prop": "^2.0.0",
"is-docker": "^2.1.1",
"is-wsl": "^2.2.0"
},
"dependencies": {
"is-docker": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
"integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
"dev": true
},
"is-wsl": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
"integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
"dev": true,
"requires": {
"is-docker": "^2.0.0"
}
}
} }
}, },
"openurl": { "openurl": {
@@ -25835,6 +25917,14 @@
"path-exists": "^3.0.0" "path-exists": "^3.0.0"
} }
}, },
"open": {
"version": "6.4.0",
"resolved": "https://registry.npmjs.org/open/-/open-6.4.0.tgz",
"integrity": "sha512-IFenVPgF70fSm1keSd2iDBIDIBZkroLeuffXq+wKTzTJlBpesFWojV9lb8mzOfaAzM1sr7HQHuO0vtV0zYekGg==",
"requires": {
"is-wsl": "^1.1.0"
}
},
"p-locate": { "p-locate": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz", "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
package.json
+4 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "create-block-dev-tool", "name": "create-block-dev-tool",
"version": "1.0.3", "version": "1.0.3-a",
"scripts": { "scripts": {
"start": "component-dev", "start": "component-dev",
"dev": "NODE_ENV=development node server.js", "dev": "NODE_ENV=development node server.js",
@@ -28,5 +28,8 @@
}, },
"bin": { "bin": {
"component-dev": "./server.js" "component-dev": "./server.js"
},
"devDependencies": {
"open": "^8.4.0"
} }
} }
server.js
+54 -27
View File
@@ -13,13 +13,14 @@ import dartSass from 'sass';
import gulpSass from 'gulp-sass'; import gulpSass from 'gulp-sass';
import sourcemaps from "gulp-sourcemaps"; import sourcemaps from "gulp-sourcemaps";
import fs from "fs/promises"; import fs from "fs/promises";
import open from "open";
/** /**
* Constants * Constants
*/ */
const isDev = config.has('mode') && config.get('mode') === 'development'; const isDev = process.env.NODE_ENV === 'development'; // Check README file in case you get "missing files" error.
const modulePath = 'node_modules/create-block-dev-tool/'; const modulePath = isDev ? '' : 'node_modules/create-block-dev-tool/';
const projectDir = modulePath; const projectDir = modulePath;
const sass = gulpSass(dartSass); const sass = gulpSass(dartSass);
@@ -31,6 +32,7 @@ buildScriptFiles()
* Init server * Init server
*/ */
let port = 3000;
const app = express(); const app = express();
const hbs = create({ const hbs = create({
@@ -44,45 +46,38 @@ app.set('views', projectDir + 'layouts');
const dataFiles = prepareListOfDataFiles(await fs.readdir('./data')); const dataFiles = prepareListOfDataFiles(await fs.readdir('./data'));
app.get('/', async (req, res) => { app.get('/', async (req, res) => {
let jsonFileName = (req.query.data) ? req.query.data : 'default'; let jsonFileName = req.query.data ? req.query.data : 'default';
if (!jsonFileName || !await fsExtra.exists(`./data/${jsonFileName}.json`)) { const data = await getBlockConfigs(jsonFileName);
jsonFileName = 'default';
data.helpers = {
port: port,
include_partial: (path) => projectDir + path,
baseView: config.has('baseView') ? config.get('baseView') : 'container',
} }
const data = await fsExtra.readJson(`./data/${jsonFileName}.json`); res.render('index', data);
Object.assign(data, {
config: Object.assign(
JSON.parse(JSON.stringify(config)), // The entire config object.
{
projectDir,
activeDataFile: jsonFileName,
dataFiles: dataFiles.map((name) => {
return {
name,
active: jsonFileName === name,
};
}),
remToPx: config.has('remToPx') ? config.get('remToPx') : 16,
}
)
}); });
app.get('/view/:baseView', async (req, res) => {
let jsonFileName = req.query.data ? req.query.data : 'default';
const data = await getBlockConfigs(jsonFileName);
data.helpers = { data.helpers = {
include_partial: (path) => projectDir + path, include_partial: (path) => projectDir + path,
include_block_template: (path) => 'src/' + config.get('blockName') + '.template', include_block_template: (path) => 'src/' + (config.has('blockName') ? config.get('blockName') : 'development') + '.template',
} }
const baseView = config.has('baseView') ? config.get('baseView') : 'container'; const baseView = req.params.baseView ?? 'container';
res.render(baseView, data); res.render(baseView, data)
}); });
app.use(express.static('src')); app.use(express.static('src'));
app.use(express.static(projectDir + 'layouts')); app.use(express.static(projectDir + 'layouts'));
const listener = app.listen(0, () => { const listener = app.listen(0, async () => {
const PORT = listener.address().port; const PORT = listener.address().port;
await open(`http://localhost:${PORT}`);
console.log(`The web server has started on port ${PORT}`); console.log(`The web server has started on port ${PORT}`);
@@ -98,7 +93,6 @@ const listener = app.listen(0, () => {
return cb(); return cb();
}])); }]));
// bs.watch("src/**/*.js", function (event, file) {}); // bs.watch("src/**/*.js", function (event, file) {});
// bs.watch("src/**/*.css", function (event, file) {}); // bs.watch("src/**/*.css", function (event, file) {});
@@ -106,9 +100,15 @@ const listener = app.listen(0, () => {
browserSyncReload(bs, '', 'Template File Change: ' + file) browserSyncReload(bs, '', 'Template File Change: ' + file)
}); });
bs.init({ bs.init({
proxy: `http://localhost:${PORT}`, proxy: `http://localhost:${PORT}`,
open: false
}, (err, bs) => {
port = bs.server._connectionKey.split(':').pop();
console.log(port)
}); });
}); });
/** /**
@@ -160,3 +160,30 @@ function prepareListOfDataFiles(dataFiles) {
}) })
.sort(); .sort();
} }
async function getBlockConfigs(jsonFileName) {
if (!jsonFileName || !await fsExtra.exists(`./data/${jsonFileName}.json`)) {
jsonFileName = 'default';
}
const data = await fsExtra.readJson(`./data/${jsonFileName}.json`);
Object.assign(data, {
config: Object.assign(
JSON.parse(JSON.stringify(config)), // The entire config object.
{
projectDir,
activeDataFile: jsonFileName,
dataFiles: dataFiles.map((name) => {
return {
name,
active: jsonFileName === name,
};
}),
remToPx: config.has('remToPx') ? config.get('remToPx') : 16,
}
)
});
return data;
}