22 |
23 | ---
24 |
25 | [RU ↑](#ru) | 
40 |
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | const gulp = require(`gulp`);
2 | const sass = require(`gulp-sass`)(require('node-sass'));
3 | const sync = require(`browser-sync`).create();
4 | const reload = sync.reload;
5 | const colors = require(`colors/safe`);
6 | const del = require(`del`);
7 | const mustache = require(`gulp-mustache`);
8 | const rename = require(`gulp-rename`);
9 |
10 | const SERVER_ROOT = `build/`;
11 |
12 | const translates = [
13 | {
14 | dest: SERVER_ROOT,
15 | url: `./src/translate/ru.json`
16 | },
17 | {
18 | dest: `${SERVER_ROOT}en/`,
19 | url: `./src/translate/en.json`
20 | }
21 | ];
22 |
23 | // TEMPLATES
24 | const tmplTasks = translates.map(({ dest, url }) => {
25 | return (done) => {
26 | gulp.src(`./src/index-src.html`)
27 | .pipe(mustache(url))
28 | .pipe(rename(`index.html`))
29 | .pipe(gulp.dest(dest))
30 | .pipe(reload({ stream: true }));
31 | done();
32 | };
33 | });
34 |
35 | gulp.task(`tmpl`, gulp.series(...tmplTasks));
36 |
37 | // SCSS
38 | gulp.task(`scss`, function () {
39 | return gulp.src(`src/scss/**/styles.scss`)
40 | .pipe(sass().on(`error`, sass.logError))
41 | .pipe(gulp.dest(`${SERVER_ROOT}assets/css`))
42 | .pipe(reload({ stream: true }));
43 | });
44 |
45 | // JS
46 | gulp.task(`js`, function () {
47 | return gulp.src(`src/js/**/*.js`)
48 | .pipe(gulp.dest(`${SERVER_ROOT}assets/js`))
49 | .pipe(reload({ stream: true }));
50 | });
51 |
52 | // WATCH FILES
53 | function watchTasks () {
54 | sync.init({
55 | ui: false,
56 | notify: false,
57 | server: {
58 | baseDir: SERVER_ROOT
59 | }
60 | });
61 |
62 | gulp.watch([`src/scss/**/*.scss`], gulp.series(`scss`));
63 | gulp.watch([`src/index-src.html`, `src/translate/**/*`], gulp.series(`tmpl`));
64 | gulp.watch([`src/js/**/*`], gulp.series(`js`));
65 | }
66 |
67 | gulp.task(`serve`, gulp.series([`scss`, `js`, `tmpl`], watchTasks));
68 |
69 | // CLEAN BUILD
70 | gulp.task(`clean`, function (done) {
71 | del([`${SERVER_ROOT}*`]).then(paths => {
72 | console.log(`⬤ Deleted files and folders:\n`, paths.join(`\n`));
73 | });
74 |
75 | done();
76 | });
77 |
78 | // CLEAN BUILD & COPY FILES TO IT
79 | gulp.task(`build`, gulp.series([`clean`], [`scss`, `js`, `tmpl`]));
80 |
81 | gulp.task(`default`, function () {
82 | console.log(colors.rainbow(`⬤ ================================ ⬤\n`));
83 | console.log(` AVAILABLE COMMANDS:`);
84 | console.log(` ` + colors.cyan(`-------------------\n`));
85 | console.log(` ` + colors.yellow(`npm start`) +
86 | ` — run local server with watcher`);
87 | console.log(` ` + colors.green(`npm run build`) +
88 | ` — make build of the project`);
89 | console.log(` ` + colors.cyan(`npm run deploy`) +
90 | ` — make build and publish project to Github Pages`);
91 | console.log(colors.rainbow(`\n⬤ ================================ ⬤`));
92 | });
93 |
--------------------------------------------------------------------------------
/img/default-en.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yoksel/html-tree/749c3aff3628c8df09e6a572642ab8420813423d/img/default-en.png
--------------------------------------------------------------------------------
/img/default-ru.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yoksel/html-tree/749c3aff3628c8df09e6a572642ab8420813423d/img/default-ru.png
--------------------------------------------------------------------------------
/img/errors-en.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yoksel/html-tree/749c3aff3628c8df09e6a572642ab8420813423d/img/errors-en.png
--------------------------------------------------------------------------------
/img/errors-ru.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yoksel/html-tree/749c3aff3628c8df09e6a572642ab8420813423d/img/errors-ru.png
--------------------------------------------------------------------------------
/img/highlight-en.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yoksel/html-tree/749c3aff3628c8df09e6a572642ab8420813423d/img/highlight-en.png
--------------------------------------------------------------------------------
/img/highlight-ru.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yoksel/html-tree/749c3aff3628c8df09e6a572642ab8420813423d/img/highlight-ru.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Title
Title
Content
Title
Content
10 |
11 |
22 |
23 |
68 |
69 |
70 |
71 |
72 | HTML-tree generator
12 | 13 | 21 |
24 |
62 |
63 |
67 |
25 |
52 | Input html:
26 | 27 | 28 |
29 |
35 |
36 |
51 | 30 | Levels: 31 | 1 32 |
33 | 34 |
53 |
61 | Markup tree:
54 |
55 |
56 |
60 |
57 |
59 | Чтобы увидеть структуру разметки, вставьте HTML-код в поле слева.
Можно вставлять как отдельные блоки, так и код страницы целиком.
58 |
10 |
11 |
22 |
23 |
68 |
69 |
70 |
71 |
72 | Генератор HTML-дерева
12 | 13 | 21 |
24 |
62 |
63 |
67 |
25 |
52 | Введите код:
26 | 27 | 28 |
29 |
35 |
36 |
51 | 30 | Уровни: 31 | 1 32 |
33 | 34 |
53 |
61 | Структура разметки:
54 |
55 |
56 |
60 |
57 |
59 | Чтобы увидеть структуру разметки, вставьте HTML-код в поле слева.
Можно вставлять как отдельные блоки, так и код страницы целиком.
58 |
17 |
18 |
28 |
29 |
77 |
78 |
79 |
80 |
81 | {{title}}
19 | 20 |-
21 | {{#langs}}
22 |
- 23 | {{{.}}} 24 | 25 | {{/langs}} 26 |
30 |
71 |
72 |
76 |
31 |
61 | {{inputCode}}:
32 | 36 | 37 |
38 |
44 |
45 |
60 | 39 | {{levels}}: 40 | 1 41 |
42 | 43 |
62 |
70 | {{markupTree}}:
63 |
64 |
65 |
69 |
66 | {{{tip}}}
67 |
68 | Title
501 |
502 |
503 |
515 |
516 |
517 |
522 |
523 |
528 |
537 |
538 | `;
539 | codeInput.value = testMarkup;
540 | setHeadersDefs();
541 | hasBemWarning = false;
542 | createTreeFromHTML(testMarkup);
543 | addClassesActions();
544 | }
545 |
--------------------------------------------------------------------------------
/src/scss/base.scss:
--------------------------------------------------------------------------------
1 | .gnr-html {
2 | font-size: 16px;
3 | }
4 |
5 | .gnr-body {
6 | min-width: 800px;
7 | margin: 0;
8 | background: #EEE;
9 | color: #000;
10 | font: 15px/1.5 Trebuchet MS, sans-serif;
11 | }
12 |
13 | H1,
14 | H2,
15 | H3 {
16 | margin-top: 0;
17 | margin-bottom: .8em;
18 | font-weight: normal;
19 | }
20 |
21 | A {
22 | color: royalblue;
23 |
24 | &:hover {
25 | text-decoration: none;
26 | }
27 | }
28 |
29 | UL,
30 | LI {
31 | padding: 0;
32 | margin: 0;
33 | list-style: none;
34 | }
35 |
36 | .gnr-hidden {
37 | display: none;
38 | }
39 |
--------------------------------------------------------------------------------
/src/scss/blocks/code-io.scss:
--------------------------------------------------------------------------------
1 | .gnr-code-input {
2 | width: 100%;
3 | height: 200px;
4 | margin-bottom: 2rem;
5 | padding: .75rem;
6 | box-sizing: border-box;
7 | border: 1px solid #CCC;
8 | box-shadow: 0 0 10px rgba(0, 0, 0, .2) inset;
9 | font: inherit;
10 | line-height: 1.3;
11 | }
12 |
13 | .gnr-code-output {
14 | display: none;
15 | }
16 |
--------------------------------------------------------------------------------
/src/scss/blocks/column.scss:
--------------------------------------------------------------------------------
1 | .gnr-column {
2 | width: 48%;
3 | }
4 |
5 | .gnr-column__title {
6 | font-size: 1.5em;
7 | }
8 |
--------------------------------------------------------------------------------
/src/scss/blocks/deep-levels.scss:
--------------------------------------------------------------------------------
1 | .gnr-deep__title {
2 | font-size: 1.17em;
3 | }
4 |
5 | .gnr-deep__digit {
6 | display: inline-block;
7 | font-weight: bold;
8 | color: crimson;
9 | }
10 |
11 | .gnr-deep__range {
12 | width: 100%;
13 | margin: 0;
14 | cursor: pointer;
15 | }
16 |
--------------------------------------------------------------------------------
/src/scss/blocks/headers-list.scss:
--------------------------------------------------------------------------------
1 | .headers__list {
2 | margin: 0;
3 | display: flex;
4 | flex-wrap: wrap;
5 | }
6 |
7 | .headers__item {
8 | margin-left: .5rem;
9 |
10 | &--notfound {
11 | opacity: .3;
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/scss/blocks/headers-tree.scss:
--------------------------------------------------------------------------------
1 | .gnr-message--headers-tree {
2 | margin-top: 2rem;
3 | }
4 |
5 | .gnr-message__content--headers-tree {
6 | background: lighten(yellowgreen, 30%);
7 | font-size: 10px;
8 |
9 | H1,
10 | H2,
11 | H3,
12 | H4,
13 | H5,
14 | H6 {
15 | margin-top: 0;
16 | margin-bottom: .85rem;
17 | line-height: 1.1;
18 | font-weight: bold;
19 |
20 | &:last-child {
21 | margin-bottom: 0;
22 | }
23 |
24 | SPAN {
25 | font-size: .75em;
26 | opacity: .5;
27 | }
28 | }
29 |
30 | /* stylelint-disable no-descending-specificity */
31 | H1 {
32 | font-size: 2em;
33 | }
34 |
35 | H2 {
36 | margin-left: 1rem;
37 | font-size: 1.75em;
38 | }
39 |
40 | H3 {
41 | margin-left: 3rem;
42 | font-size: 1.5em;
43 | }
44 |
45 | H4 {
46 | margin-left: 4rem;
47 | font-size: 1.25em;
48 | }
49 |
50 | H5 {
51 | margin-left: 5rem;
52 | font-size: 1em;
53 | }
54 |
55 | H6 {
56 | margin-left: 6rem;
57 | font-size: .75em;
58 | }
59 | /* stylelint-enable no-descending-specificity */
60 | }
61 |
--------------------------------------------------------------------------------
/src/scss/blocks/highlight.scss:
--------------------------------------------------------------------------------
1 | @mixin highlight ($color: gold) {
2 | box-shadow: -.2em 0 0 0 $color,
3 | .2em 0 0 0 $color;
4 | background: $color;
5 | }
6 |
7 | .gnr-highlight-bem {
8 | @include highlight;
9 | }
10 |
11 | [data-color="fuchsia"] {
12 | @include highlight( $color: fuchsia );
13 | }
14 |
15 | [data-color="yellow"] {
16 | @include highlight( $color: yellow );
17 | }
18 |
19 | [data-color="lime"] {
20 | @include highlight( $color: lime );
21 | }
22 |
23 | [data-color="aqua"] {
24 | @include highlight( $color: aqua );
25 | }
26 |
--------------------------------------------------------------------------------
/src/scss/blocks/langs.scss:
--------------------------------------------------------------------------------
1 | .gnr-page__langs {
2 | position: absolute;
3 | top: 0;
4 | right: 0;
5 | display: flex;
6 |
7 | A:not([href]) {
8 | font-weight: bold;
9 | color: inherit;
10 | }
11 | }
12 |
13 | .gnr-page__langs-item {
14 | & + & {
15 | margin-left: .5rem;
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/scss/blocks/messages.scss:
--------------------------------------------------------------------------------
1 | .gnr-messages {
2 | margin-top: 2rem;
3 | }
4 |
5 | .gnr-message {
6 | margin-top: .75rem;
7 |
8 | &:first-child {
9 | margin-top: 0;
10 | }
11 | }
12 |
13 | .gnr-message__content {
14 | padding: .75rem;
15 | background: lemonchiffon;
16 | }
17 |
--------------------------------------------------------------------------------
/src/scss/blocks/tree.scss:
--------------------------------------------------------------------------------
1 | $level-color: lawngreen;
2 |
3 | .gnr-tree {
4 | min-height: 200px;
5 | padding: 1rem;
6 | box-sizing: border-box;
7 | border: 1px solid #DDD;
8 | display: flex;
9 | justify-content: center;
10 | align-items: center;
11 | }
12 |
13 | .gnr-tree__placeholder {
14 | width: 80%;
15 | text-align: center;
16 | font-size: 14px;
17 | color: #999;
18 | }
19 |
20 | .gnr-tree__content {
21 | max-width: 100%;
22 | }
23 |
24 | /* Level
25 | ------------------------------ */
26 |
27 | .gnr-level {
28 | position: relative;
29 | margin-bottom: .5rem;
30 | margin-left: 1.2rem;
31 | background:
32 | linear-gradient(
33 | to right,
34 | lawngreen 1px,
35 | transparent 2px
36 | );
37 | background-repeat: no-repeat;
38 | background-position: 10px 0;
39 |
40 | &::before {
41 | content: "";
42 | display: block;
43 | position: absolute;
44 | z-index: 0;
45 | left: -1px;
46 | bottom: 0;
47 | width: 2rem;
48 | margin-left: 10px;
49 | height: 10px;
50 | background: white;
51 | border-top: 1px solid $level-color;
52 | }
53 |
54 | &--0::before {
55 | height: 10px;
56 | }
57 | }
58 |
59 | .gnr-level__item {
60 | position: relative;
61 |
62 | &::before {
63 | content: "";
64 | display: block;
65 | position: absolute;
66 | width: .7rem;
67 | height: .08rem;
68 | margin-left: -.55rem;
69 | margin-top: .6rem;
70 | background: $level-color;
71 | }
72 |
73 | .gnr-level--0 > &::before {
74 | content: none;
75 | }
76 | }
77 |
78 | .gnr-elem {
79 | padding-left: .3rem;
80 | background: white;
81 | }
82 |
83 | .gnr-elem__tag {
84 | background: #FFF;
85 | color: royalblue;
86 | }
87 |
88 | .gnr-class__dot {
89 | position: relative;
90 | padding: 0 .05em;
91 | font-size: 1.2em;
92 | line-height: 1;
93 | }
94 |
95 | .gnr-class__item {
96 | white-space: nowrap;
97 | cursor: pointer;
98 | }
99 |
--------------------------------------------------------------------------------
/src/scss/layout.scss:
--------------------------------------------------------------------------------
1 | .gnr-page {
2 | margin: 2rem auto;
3 | padding: 2rem 3rem 3rem;
4 | width: 80%;
5 | min-width: 800px;
6 | max-width: 1200px;
7 | box-sizing: content-box;
8 | background: #FFF;
9 | box-shadow: 0 0 10px rgba(0, 0, 0, .2);
10 | }
11 |
12 | .gnr-page__header {
13 | position: relative;
14 | margin-bottom: 2.65rem;
15 | padding: 1rem 0;
16 | border-bottom: 3px solid #EEE;
17 | }
18 |
19 | .gnr-page__title {
20 | margin-bottom: 0;
21 | text-align: center;
22 | font-size: 2em;
23 | }
24 |
25 | .gnr-page__container {
26 | display: flex;
27 | justify-content: space-between;
28 | }
29 |
30 | .gnr-page__footer {
31 | margin-top: 3rem;
32 | padding-top: 1rem;
33 | border-top: 3px solid #EEE;
34 | display: flex;
35 | justify-content: space-between;
36 | }
37 |
--------------------------------------------------------------------------------
/src/scss/styles.scss:
--------------------------------------------------------------------------------
1 | @import "base";
2 | @import "layout";
3 | @import "blocks/langs";
4 | @import "blocks/column";
5 | @import "blocks/tree";
6 | @import "blocks/code-io";
7 | @import "blocks/deep-levels";
8 | @import "blocks/messages";
9 | @import "blocks/headers-list";
10 | @import "blocks/headers-tree";
11 | @import "blocks/highlight";
12 |
--------------------------------------------------------------------------------
/src/translate/en.json:
--------------------------------------------------------------------------------
1 | {
2 | "lang": "en",
3 | "title": "HTML Tree Generator",
4 | "desc": "Tool shows tree for given HTML markup. As a bonus it checks BEM notation and headers hierarchy.",
5 | "inputCode": "Input HTML",
6 | "levels": "Levels",
7 | "bemError": "It seems like classes use BEM notation, but something went wrong.",
8 | "headers": "Headers",
9 | "headersTree": "Headers tree",
10 | "markupTree": "Markup tree",
11 | "tip": "
518 |
521 | Title
519 |Content
520 |
524 |
527 | Title
525 |Content
526 | To see markup tree, add HTML to textarea on the left.
You can add whole page or particular blocks.
", 12 | "projectOn": "Project on ", 13 | "twitter": "yoksel_en", 14 | "langs": [ 15 | "EN", 16 | "RU" 17 | ], 18 | "path": ".." 19 | } 20 | -------------------------------------------------------------------------------- /src/translate/ru.json: -------------------------------------------------------------------------------- 1 | { 2 | "lang": "ru", 3 | "title": "Генератор HTML-дерева", 4 | "desc": "Показывает дерево документа на основе HTML-разметки. Бонусом делается простая проверка БЭМ-классов и иерархии заголовков.", 5 | "inputCode": "Введите код", 6 | "levels": "Уровни", 7 | "bemError": "Похоже, в классах используется БЭМ-нотация, ноЧтобы увидеть структуру разметки, вставьте HTML-код в поле слева.
Можно вставлять как отдельные блоки, так и код страницы целиком.
", 12 | "projectOn": "Проект на", 13 | "twitter": "yoksel", 14 | "langs": [ 15 | "EN", 16 | "RU" 17 | ], 18 | "path": "." 19 | } 20 | --------------------------------------------------------------------------------