Truffle Boxes
The easiest way to get started
Truffle Boxes are helpful boilerplates that allow you to focus on what makes your dapp unique. In addition to Truffle, Truffle Boxes can contain other helpful modules, Solidity contracts & libraries, front-end views and more; all the way up to complete example dapps.
- Create a Box +
+
-
+ Create a Box
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
{% for box in config.extra.boxes %}
-
-
+
+
+
+
{% endblock %}
diff --git a/mkdocs.yml b/mkdocs.yml
index 1fb2010ce..fbc3709bd 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -55,8 +55,10 @@ plugins:
htmlmin_opts:
remove_comments: true
js_files:
+ - assets/js/boxes.js
- assets/js/dashboard.js
- assets/js/os-detector.js
css_files:
+ - assets/stylesheets/boxes.css
- assets/stylesheets/dashboard.css
- assets/stylesheets/extra.css
diff --git a/src/assets/js/boxes.js b/src/assets/js/boxes.js
new file mode 100644
index 000000000..d4c09af67
--- /dev/null
+++ b/src/assets/js/boxes.js
@@ -0,0 +1,80 @@
+const boxes = {
+ container: Array.from(document.querySelectorAll('#boxes [data-type="boxes.container"]')),
+ params: null,
+ init: () => {
+ boxes.bind();
+ boxes.queryString();
+ },
+ bind: () => {
+ const input = document.getElementById('boxes.filter.input');
+
+ input.addEventListener('keyup', (e) => {
+ // if (e.key === 'Enter') {
+ // const filter = document.querySelector('input[name="boxes.filter.radio"]:checked').value;
+ // const term = e.target.value;
+
+ // boxes.search(filter, term);
+ // }
+
+ if (e.key === 'Backspace' || e.key === 'Delete') {
+ if (e.target.value.length === 0) {
+ boxes.clear();
+ }
+ } else {
+ const filter = document.querySelector('input[name="boxes.filter.radio"]:checked').value;
+ const term = e.target.value;
+
+ boxes.search(filter, term);
+ }
+
+ e.preventDefault();
+ });
+
+ input.focus();
+ },
+ queryString: () => {
+ boxes.params = new Proxy(new URLSearchParams(window.location.search), {
+ get: (searchParams, prop) => searchParams.get(prop),
+ });
+
+ const filter = boxes.params.filter;
+ const term = boxes.params.term;
+
+ if ((filter == "tags" || filter == "name") && term !== '') {
+ document.getElementById('boxes.filter.input').value = term;
+ document.querySelector(`input[name="boxes.filter.radio"][value="${filter}"]`).checked = true;
+
+ boxes.search(filter, term);
+ } else {
+ document.getElementById('boxes').style.visibility = 'visible';
+ }
+
+ },
+ search: (filter, term) => {
+ switch (filter) {
+ case "name":
+ boxes.container.forEach((item) => {
+ if (item.id.toString().includes(term))
+ item.style.display = 'block';
+ else
+ item.style.display = 'none';
+ });
+ break;
+ case "tags":
+ boxes.container.forEach((item) => {
+ if (JSON.parse(item.dataset.tags.replace(/'/g, '"')).filter(s => s.includes(term)).length > 0)
+ item.style.display = 'block';
+ else
+ item.style.display = 'none';
+ });
+ break;
+ }
+
+ document.getElementById('boxes').style.visibility = 'visible';
+ },
+ clear: () => {
+ boxes.container.forEach((item) => {
+ item.style.display = 'block';
+ });
+ }
+}
\ No newline at end of file
diff --git a/src/assets/stylesheets/boxes.css b/src/assets/stylesheets/boxes.css
new file mode 100644
index 000000000..66dc0f875
--- /dev/null
+++ b/src/assets/stylesheets/boxes.css
@@ -0,0 +1,64 @@
+/* Remove spacing, as we cannot hide it completely */
+.md-main__inner {
+ margin: 0;
+}
+
+/* Hide main content for now */
+.md-content {
+ display: none;
+}
+
+/* Hide table of contents */
+@media screen and (min-width: 60em) {
+ .md-sidebar--secondary {
+ display: none;
+ }
+}
+
+/* Hide navigation */
+@media screen and (min-width: 76.25em) {
+ .md-sidebar--primary {
+ display: none;
+ }
+}
+
+#boxes {
+ margin-top: 3.5rem;
+ visibility: hidden;
+}
+
+#boxes a {
+ text-decoration: none;
+}
+
+.box-search-container-radio {
+ display: inline-block;
+ margin-left: 0.5rem;
+}
+
+.box-search-container-input {
+ display: inline-block;
+}
+
+.box-search-inner-input {
+ font-size: .9rem;
+ height: 40px;
+ padding: 0 0.3rem 0 2.0rem;
+ position: relative;
+ text-overflow: ellipsis;
+ z-index: 2;
+ border-radius: 0.2rem;
+}
+
+.box-search-icon {
+ left: 1.65rem;
+ position: relative;
+ top: 0.3rem;
+ z-index: 99999;
+ float: left;
+}
+
+.box-search-filter {
+ float: right;
+ padding-top: 0.3rem;
+}
\ No newline at end of file