2 |
3 |
11 |
12 |
--------------------------------------------------------------------------------
/reUse.min.js:
--------------------------------------------------------------------------------
1 | "use strict";function _classCallCheck(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,n){for(var t=0;tSemantically speaking, the potato has a rather Spanish origin. It came from the Spanish word ‘patata’ in the 1950s, which then stemmed from the Caribbean language ‘batata’ or “sweet potato”. Today, the word comes by other slang terms such as spud, tater, and tattie.
2 |
3 |
China is the world’s largest potato producer and exporter, while the countries India, Germany, Ukraine, Russia, Poland, and the United States are leading producers as well. In the USA alone, all 50 of its states grow the tuber crop, with Idaho and Washington being the largest ones.
4 |
5 |
There was a time when potatoes were traded with gold directly. Back in the 1890s, the Alaskan Klondlike gold rush potato had very high value due to its essential Vitamin C content.
--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Potatoes
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 Jesse Akoh
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/example/js/reUse.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
4 |
5 | function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
6 |
7 | function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
8 |
9 | var ReUseMl =
10 | function () {
11 | function ReUseMl() {
12 | _classCallCheck(this, ReUseMl);
13 | }
14 |
15 | _createClass(ReUseMl, [{
16 | key: "set",
17 | value: function set(views) {
18 | this.views = views;
19 | }
20 | }, {
21 | key: "render",
22 | value: function render(file, placement) {
23 | var insert = document.querySelector(placement);
24 | fetch(this.views + '/' + file).then(function (res) {
25 | return res.text();
26 | }).then(function (data) {
27 | insert.innerHTML = data;
28 | })["catch"](function (err) {
29 | return console.log(err);
30 | });
31 | }
32 | }]);
33 |
34 | return ReUseMl;
35 | }();
--------------------------------------------------------------------------------
/reUse.js:
--------------------------------------------------------------------------------
1 | function _classCallCheck(instance, Constructor) {
2 | if (!(instance instanceof Constructor)) {
3 | throw new TypeError("Cannot call a class as a function");
4 | }
5 | }
6 |
7 | function _defineProperties(target, props) {
8 | for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); }
9 | }
10 |
11 | function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
12 |
13 | var ReUseMl =
14 |
15 | function () {
16 | function ReUseMl() {
17 | _classCallCheck(this, ReUseMl);
18 | }
19 |
20 | _createClass(ReUseMl, [{
21 | key: "set",
22 | value: function set(views) {
23 | this.views = views;
24 | }
25 | }, {
26 | key: "render",
27 | value: function render(file, placement) {
28 | var insert = document.querySelector(placement);
29 | fetch(this.views + '/' + file).then(function (res) {
30 | return res.text();
31 | }).then(function (data) {
32 | insert.innerHTML = data;
33 | })["catch"](function (err) {
34 | return console.log(err);
35 | });
36 | }
37 | }]);
38 |
39 | return ReUseMl;
40 | }();
41 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # ReUseMarkup
2 | You create your html components and use the reUseMl script to render them to your html document
3 | # Installation
4 | For your simple usage of ReUSe dowload from [Here](https://github.com/Akohjesse/reUseMl/archive/refs/tags/v1.2.zip)
5 |
6 | # Set-Up
7 | > Create a directory of `/components` and store all your markup components , For small projects you can have your styling in your html using `` tags
8 | >
9 | >
10 | # Usage
11 | > Add the `reUse.js` file or minified `reUse.min.js` to html code, then also create another javascript file where you call the render method
12 |
13 | ```
14 |
15 |
16 | ```
17 | 
18 | > In your `app.js`, if you want to render a `header.html` component into your container with an Id of `#header`
19 | > You instantiate reuse from ReUseMl(), then set the views or directory where it'll search for your components, using the `reuse.set()` method
20 | > ```
21 | > const reuse = new ReUseMl();
22 | > reuse.set('./components)
23 | > ```
24 |
25 | ```
26 | reuse.render('header.html', '#header');
27 | ```
28 | 
29 | # Example
30 | > Check [here](https://github.com/Akohjesse/reUseMl/tree/main/example) for an example using the library or clone repo and open
31 | ## License
32 | Distributed under the MIT license. See [LICENSE](https://github.com/Akohjesse/reUseMl/blob/main/LICENSE) for more information
33 |
--------------------------------------------------------------------------------