tada!
'; 20 | } 21 | ``` 22 | 23 | Now run the build, `msg`: 24 | 25 | `index.html`: 26 | ```html 27 |tada!
28 | ``` 29 | 30 | Simple! The page.js file exports a function that returns a string. That string is then saved into a .html file of the same name. Because the page file is just JavaScript, you can do pretty much anything you want in there! 31 | 32 | ## Defining src & dist folders 33 | 34 | Pass in the relative paths of your source and distribution folders with the `-io` flag, "in" first "out" second: 35 | 36 | ``` 37 | msg -io ./src/ ./dist/ 38 | ``` 39 | 40 | Before: 41 | 42 | ``` 43 | ./dist/ 44 | ./src/ 45 | ├──index.page.js 46 | ├──about.page.js 47 | ├──/funFolder/ 48 | | ├──fun.page.js 49 | ``` 50 | 51 | After: 52 | 53 | ``` 54 | ./dist/ 55 | ├──index.html 56 | ├──about.html 57 | ├──/funFolder/ 58 | | ├──fun.html 59 | ./src/ 60 | ├──index.page.js 61 | ├──about.page.js 62 | ├──/funFolder/ 63 | | ├──fun.page.js 64 | ``` 65 | 66 | Alternativly you may wish to keep your source and distribution files together. Just pass the same value twice: 67 | 68 | ``` 69 | msg -io ./docs/ ./docs/ 70 | ``` 71 | 72 | Before: 73 | 74 | ``` 75 | ./docs/ 76 | ├──index.page.js 77 | ├──about.page.js 78 | ├──/funFolder/ 79 | | ├──fun.page.js 80 | ``` 81 | 82 | After: 83 | 84 | ``` 85 | ./docs/ 86 | ├──index.html - Hello! 87 | ├──index.page.js 88 | ├──about.html - hello 89 | ├──about.page.js 90 | ├──/funFolder/ 91 | | ├──fun.html - HELLO!! 92 | | ├──fun.page.js 93 | ``` 94 | 95 | You can even run both if you want to watch the world burn: `msg -io ./src/ ./dist/ -io ./docs/ ./docs/` 96 | 97 | --- 98 | 99 | ## Syntax Highlighting 100 | Different editors do this in different ways. VS Code requires [a plugin](https://marketplace.visualstudio.com/items?itemName=bierner.lit-html), Atom does not (according to a quick google). However it happens, in most cases you will need to add the `html` tag: 101 | 102 | ```js 103 | module.exports = function(){ 104 | return html` 105 |Me Syntax be Higlighted!
106 | `; 107 | } 108 | ``` 109 | 110 | _Note that tags have to be defined functions. To make life a little easier I've added a global defenition for html so it won't throw undefined errors at you._ 111 | 112 | --- 113 | 114 | ## How does it work? 115 | 116 | I'm glad you asked! Time for sudocode. 117 | 118 | ```js 119 | //pass it a directory 120 | goIntoFolder(folder){ 121 | 122 | //get all the .page.js files in this directory 123 | pages = getAllPagesFrom(folder) 124 | 125 | pages.forEach(page){ 126 | //run the "page" 127 | markup = page() 128 | //save the result 129 | saveToDist(markup) 130 | } 131 | 132 | //now get all the folders in this folder 133 | folderChildren = getAllFoldersFrom(folder) 134 | 135 | folderChildren.forEach(childFolder){ 136 | //go into each of them and do the same thing 137 | goIntoFolder(childFolder) 138 | } 139 | } 140 | ``` 141 | 142 | _The real code is a little different, but that's the essence of it. [Have a read if you wish!](https://github.com/ijmccallum/Mini-Site-Generator/blob/master/build.js)_ 143 | 144 | --- 145 | -------------------------------------------------------------------------------- /docsrc/css/base/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in 9 | * IE on Windows Phone and in iOS. 10 | */ 11 | 12 | html { 13 | line-height: 1.15; /* 1 */ 14 | -ms-text-size-adjust: 100%; /* 2 */ 15 | -webkit-text-size-adjust: 100%; /* 2 */ 16 | } 17 | 18 | /* Sections 19 | ========================================================================== */ 20 | 21 | /** 22 | * Remove the margin in all browsers (opinionated). 23 | */ 24 | 25 | body { 26 | margin: 0; 27 | } 28 | 29 | /** 30 | * Add the correct display in IE 9-. 31 | */ 32 | 33 | article, 34 | aside, 35 | footer, 36 | header, 37 | nav, 38 | section, 39 | main, 40 | details, 41 | menu { 42 | display: block; 43 | } 44 | 45 | 46 | 47 | /* Text-level semantics 48 | ========================================================================== */ 49 | 50 | /** 51 | * 1. Remove the gray background on active links in IE 10. 52 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. 53 | */ 54 | 55 | a { 56 | background-color: transparent; /* 1 */ 57 | -webkit-text-decoration-skip: objects; /* 2 */ 58 | } 59 | 60 | 61 | 62 | /** 63 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6. 64 | */ 65 | 66 | b, 67 | strong { 68 | font-weight: inherit; 69 | font-weight: bolder; 70 | 71 | } 72 | /** 73 | * Add the correct font size in all browsers. 74 | */ 75 | 76 | small { 77 | font-size: 80%; 78 | } 79 | 80 | /** 81 | * Prevent `sub` and `sup` elements from affecting the line height in 82 | * all browsers. 83 | */ 84 | 85 | sub, 86 | sup { 87 | font-size: 75%; 88 | line-height: 0; 89 | position: relative; 90 | vertical-align: baseline; 91 | } 92 | 93 | sub { 94 | bottom: -0.25em; 95 | } 96 | 97 | sup { 98 | top: -0.5em; 99 | } 100 | 101 | 102 | 103 | 104 | /** 105 | * Remove the border on images inside links in IE 10-. 106 | */ 107 | 108 | img { 109 | border-style: none; 110 | } 111 | 112 | /** 113 | * Hide the overflow in IE. 114 | */ 115 | 116 | svg:not(:root) { 117 | overflow: hidden; 118 | } 119 | 120 | /* Forms 121 | ========================================================================== */ 122 | 123 | /** 124 | * 1. Change the font styles in all browsers (opinionated). 125 | * 2. Remove the margin in Firefox and Safari. 126 | */ 127 | 128 | button, 129 | input, 130 | optgroup, 131 | select, 132 | textarea { 133 | font-family: sans-serif; /* 1 */ 134 | font-size: 100%; /* 1 */ 135 | line-height: 1.15; /* 1 */ 136 | margin: 0; /* 2 */ 137 | } 138 | 139 | /** 140 | * Show the overflow in IE. 141 | * 1. Show the overflow in Edge. 142 | */ 143 | 144 | button, 145 | input { /* 1 */ 146 | overflow: visible; 147 | } 148 | 149 | /** 150 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 151 | * 1. Remove the inheritance of text transform in Firefox. 152 | */ 153 | 154 | button, 155 | select { /* 1 */ 156 | text-transform: none; 157 | } 158 | 159 | /** 160 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` 161 | * controls in Android 4. 162 | * 2. Correct the inability to style clickable types in iOS and Safari. 163 | */ 164 | 165 | button, 166 | html [type="button"], /* 1 */ 167 | [type="reset"], 168 | [type="submit"] { 169 | -webkit-appearance: button; /* 2 */ 170 | } 171 | 172 | /** 173 | * Remove the inner border and padding in Firefox. 174 | */ 175 | 176 | button::-moz-focus-inner, 177 | [type="button"]::-moz-focus-inner, 178 | [type="reset"]::-moz-focus-inner, 179 | [type="submit"]::-moz-focus-inner { 180 | border-style: none; 181 | padding: 0; 182 | } 183 | 184 | /** 185 | * Restore the focus styles unset by the previous rule. 186 | */ 187 | 188 | button:-moz-focusring, 189 | [type="button"]:-moz-focusring, 190 | [type="reset"]:-moz-focusring, 191 | [type="submit"]:-moz-focusring { 192 | outline: 1px dotted ButtonText; 193 | } 194 | 195 | 196 | /** 197 | * Remove the default vertical scrollbar in IE. 198 | */ 199 | 200 | textarea { 201 | overflow: auto; 202 | } 203 | 204 | /** 205 | * 1. Add the correct box sizing in IE 10-. 206 | * 2. Remove the padding in IE 10-. 207 | */ 208 | 209 | [type="checkbox"], 210 | [type="radio"] { 211 | box-sizing: border-box; /* 1 */ 212 | padding: 0; /* 2 */ 213 | } 214 | 215 | /** 216 | * Correct the cursor style of increment and decrement buttons in Chrome. 217 | */ 218 | 219 | [type="number"]::-webkit-inner-spin-button, 220 | [type="number"]::-webkit-outer-spin-button { 221 | height: auto; 222 | } 223 | 224 | /** 225 | * 1. Correct the odd appearance in Chrome and Safari. 226 | * 2. Correct the outline style in Safari. 227 | */ 228 | 229 | [type="search"] { 230 | -webkit-appearance: textfield; /* 1 */ 231 | outline-offset: -2px; /* 2 */ 232 | } 233 | 234 | /** 235 | * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. 236 | */ 237 | 238 | [type="search"]::-webkit-search-cancel-button, 239 | [type="search"]::-webkit-search-decoration { 240 | -webkit-appearance: none; 241 | } 242 | 243 | 244 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 |It's Just JavaScript
.page.js .html
2 | module.exports = function(){
3 | return html`
4 | <p>It's just JavaScript!</p>
5 | `
6 | }
7 | It's Just JavaScript
22 |26 | .page.js 27 | 31 | .html 32 |
33 |
37 | module.exports = function(){
38 | return html`
39 | <p>It's just JavaScript!</p>
40 | `
41 | }
42 |