From 1817d37a398ede35070e947ba42e2eaa8c5b90dc Mon Sep 17 00:00:00 2001 From: root Date: Sun, 6 Feb 2022 14:09:38 +0000 Subject: [PATCH] basic seach --- css/index.css | 213 +++++++++++++++------------------------- css/index.sass | 13 +++ frontend | 2 +- html/landingpage.gohtml | 48 +-------- js/main.js | 100 ++++++++++++------- js/main.js.map | 2 +- js/main.ts | 142 ++++++++++++++++----------- 7 files changed, 244 insertions(+), 276 deletions(-) diff --git a/css/index.css b/css/index.css index e15604e..d20464e 100644 --- a/css/index.css +++ b/css/index.css @@ -4,41 +4,34 @@ body { display: flex; flex-direction: column; background-color: #03071E; - color: #EAE2B7; -} + color: #EAE2B7; } a { color: inherit; font-size: 125%; text-decoration: none; - letter-spacing: 2px; -} + letter-spacing: 2px; } p { font-size: 150%; - margin: 0; -} + margin: 0; } h3 { font-size: 200%; - margin: 0; -} + margin: 0; } ul { display: flex; flex-direction: row; font-size: 20px; - list-style: none; -} -ul li { - padding-right: 30px; -} + list-style: none; } + ul li { + padding-right: 30px; } ol { display: flex; flex-direction: column; - list-style: georgian; -} + list-style: georgian; } .header { background-color: #03071E; @@ -47,8 +40,7 @@ ol { display: flex; align-items: center; justify-content: flex-end; - font-family: "Roboto", sans-serif; -} + font-family: "Roboto", sans-serif; } .header-title { margin: 100px 0; @@ -56,23 +48,19 @@ ol { flex-direction: column; align-items: center; justify-content: center; - font-family: "Staatliches", sans-serif; -} -.header-title h1 { - font-size: 90px; - letter-spacing: 30px; - margin: 0; -} -.header-title h2 { - font-size: 30px; - letter-spacing: 10px; - margin: 0; -} + font-family: "Staatliches", sans-serif; } + .header-title h1 { + font-size: 90px; + letter-spacing: 30px; + margin: 0; } + .header-title h2 { + font-size: 30px; + letter-spacing: 10px; + margin: 0; } .divider { height: 3px; - background-color: #ad080f; -} + background-color: #ad080f; } .navigation { background-color: black; @@ -84,156 +72,113 @@ ol { height: 5%; min-height: 50px; display: flex; - align-items: center; -} -.navigation img { - margin-right: auto; - width: 3%; - min-width: 30px; - padding-left: 2.5%; -} -.navigation a { - padding: 0 2%; - font-size: 200%; - font-weight: bolder; -} + align-items: center; } + .navigation img { + margin-right: auto; + width: 3%; + min-width: 30px; + padding-left: 2.5%; } + .navigation a { + padding: 0 2%; + font-size: 200%; + font-weight: bolder; } .article { - padding: 2%; -} -.article:hover { - color: white; -} + padding: 2%; } + .article:hover { + color: white; } .article-body { width: 60; font-size: 80%; font-weight: normal; margin-top: 1%; - font-family: "Roboto Mono", monospace; -} + font-family: "Roboto Mono", monospace; } .article-body, .article-body-fulltext { - width: 100%; -} + width: 100%; } .article-description { font-weight: 500; font-family: "Roboto Mono", monospace; color: #D00000; font-size: 75%; - margin-top: 0.5%; -} -.article-description:p { - white-space: pre; -} + margin-top: 0.5%; } + .article-description:p { + white-space: pre; } .articles { margin: auto; width: 80%; - font-family: "Roboto", sans-serif; -} + font-family: "Roboto", sans-serif; } .foot { display: flex; align-items: center; justify-content: space-between; width: 100%; - margin: 2.5% 0; -} -.foot a { - font-family: "Roboto Mono", monospace; - font-weight: normal; - padding: 0 10%; -} + margin: 2.5% 0; } + .foot a { + font-family: "Roboto Mono", monospace; + font-weight: normal; + padding: 0 10%; } i { - margin-right: 20px; -} + margin-right: 20px; } -.about-section { - font-family: "Roboto", sans-serif; - width: 60%; - text-align: center; - margin:auto; -} - - -.legal-section { - font-family: "Roboto", sans-serif; - width: 60%; - margin:auto; -} - -.legal-section p { - margin-bottom: 5%; -} - -.contact-section { - font-family: "Roboto", sans-serif; - width: 60%; - margin:auto; -} - -.contact-section p { - margin-bottom: 5%; -} +input { + border: 2px solid #D62828; + padding: 5px 3px; + background: #03071E; + color: #EAE2B7; + margin: 0 10px; + font-size: 1rem; + border-radius: 3px; + max-width: 200px; + width: 10%; + min-width: 100px; } @media screen and (max-width: 1000px) { .navigation { - flex-direction: column; - } - .navigation img { - margin: 10px 0; - padding: 0; - } - .navigation * { - margin: 5px 0; - } + flex-direction: column; } + .navigation img { + margin: 10px 0; + padding: 0; } + .navigation * { + margin: 5px 0; } .header-title { - text-align: center; - } - .header-title h1 { - font-size: 50px; - letter-spacing: 20px; - } - .header-title h2 { - font-size: 20px; - letter-spacing: 10px; - } + text-align: center; } + .header-title h1 { + font-size: 50px; + letter-spacing: 20px; } + .header-title h2 { + font-size: 20px; + letter-spacing: 10px; } .articles { - width: 95%; - } - .articles div { - margin: 10px 0; - } + width: 95%; } + .articles div { + margin: 10px 0; } h3 { - font-size: 130%; - } + font-size: 130%; } p { - font-size: 100%; - } + font-size: 100%; } .foot { - flex-direction: column; - } -} + flex-direction: column; } } @media screen and (max-width: 500px) { .header-title h1 { font-size: 40px; - letter-spacing: 5px; - } + letter-spacing: 5px; } .header-title h2 { - letter-spacing: 3px; - } + letter-spacing: 3px; } .article-description p { display: flex; flex-direction: row; - justify-content: space-between; - } -}/*# sourceMappingURL=index.css.map */ \ No newline at end of file + justify-content: space-between; } } + +/*# sourceMappingURL=index.css.map */ diff --git a/css/index.sass b/css/index.sass index 9932a1a..ee5f4aa 100644 --- a/css/index.sass +++ b/css/index.sass @@ -140,6 +140,19 @@ ol i margin-right: 20px +input + border: 2px solid $primary-color + padding: 5px 3px + background: $background-color + color: $text-color + margin: 0 10px + font-size: 1rem + border-radius: 3px + max-width: 200px + width: 10% + min-width: 100px + + @media screen and (max-width: 1000px) .navigation flex-direction: column diff --git a/frontend b/frontend index 026bf1c..3465ce3 160000 --- a/frontend +++ b/frontend @@ -1 +1 @@ -Subproject commit 026bf1c3bc8286f6eb530c9604800c7d4107ce41 +Subproject commit 3465ce32f148128cf35f5faf7a7d7d8bb6d52e04 diff --git a/html/landingpage.gohtml b/html/landingpage.gohtml index bfb05e3..f8cfcc5 100644 --- a/html/landingpage.gohtml +++ b/html/landingpage.gohtml @@ -24,7 +24,7 @@ Home About - Categories +
@@ -49,52 +49,6 @@
- - -
-
-

Render fractals on canvas with WASM.

-
-
-

PROGRAMMINGDAVID15.12.2021

-
-
-

Learn how to render mandelbrot fractals with web assembly.

-
-
- - -
- - -
-
-

Write directly to the framebuffer with Rust.

-
-
-

LINUXDAVID15.12.2021

-
-
-

Learn how to access the framebuffer with Rust.

-
-
- - -
- - -
-
-

Kobalt a simple webserver for testing.

-
-
-

OPEN SOURCEDAVID15.12.2021

-
-
-

Meet kobalt, the new fast and simple production ready webserver.

-
-
- -->
diff --git a/js/main.js b/js/main.js index 2afa2f7..4bd9e4f 100644 --- a/js/main.js +++ b/js/main.js @@ -1,43 +1,69 @@ let articleParent = document.getElementById("articles"); -window.onload = function () { - recent(5).then(function (data) { +function updateSeach(value) { + if (value == "") { + addRecent(); + return; + } + let query = { + query: value, + limit: 5 + }; + clearArticles(); + search(query).then(function (data) { data.forEach(function (article) { - let articleA = document.createElement("a"); - articleA.setAttribute("href", article.link); - let articleDiv = document.createElement("div"); - articleDiv.setAttribute("class", "article"); - let articleHeader = document.createElement("div"); - articleHeader.setAttribute("class", "article-header"); - let articleHeaderTitle = document.createElement("h3"); - articleHeaderTitle.innerHTML = article.title; - articleHeader.appendChild(articleHeaderTitle); - articleDiv.appendChild(articleHeader); - let articleDescription = document.createElement("div"); - articleDescription.setAttribute("class", "article-description"); - let articleDescriptionP = document.createElement("p"); - let articleDescriptionTopics = document.createElement("i"); - articleDescriptionTopics.innerHTML = article.tags.join(", "); - let articleDescriptionAuthors = document.createElement("i"); - articleDescriptionAuthors.innerHTML = article.authors[0].name; - let articleDescriptionDate = document.createElement("i"); - articleDescriptionDate.innerHTML = article.modified.toString(); - articleDescriptionP.appendChild(articleDescriptionTopics); - articleDescriptionP.appendChild(articleDescriptionAuthors); - articleDescriptionP.appendChild(articleDescriptionDate); - articleDescription.appendChild(articleDescriptionP); - articleDiv.appendChild(articleDescription); - let articleBody = document.createElement("div"); - articleBody.setAttribute("class", "article-body"); - let articleBodyP = document.createElement("p"); - articleBodyP.innerHTML = article.summary; - articleBody.appendChild(articleBodyP); - articleDiv.appendChild(articleBody); - articleA.appendChild(articleDiv); - articleParent.appendChild(articleA); - let divider = document.createElement("div"); - divider.setAttribute("class", "divider"); - articleParent.appendChild(divider); + addArticle(article); }); }); +} +function clearArticles() { + articleParent.innerHTML = ""; +} +window.onload = function () { + addRecent(); }; +function addRecent() { + clearArticles(); + recent(5).then(function (data) { + data.forEach(function (article) { + addArticle(article); + }); + }); +} +function addArticle(article) { + let articleA = document.createElement("a"); + articleA.setAttribute("href", article.link); + let articleDiv = document.createElement("div"); + articleDiv.setAttribute("class", "article"); + let articleHeader = document.createElement("div"); + articleHeader.setAttribute("class", "article-header"); + let articleHeaderTitle = document.createElement("h3"); + articleHeaderTitle.innerHTML = article.title; + articleHeader.appendChild(articleHeaderTitle); + articleDiv.appendChild(articleHeader); + let articleDescription = document.createElement("div"); + articleDescription.setAttribute("class", "article-description"); + let articleDescriptionP = document.createElement("p"); + let articleDescriptionTopics = document.createElement("i"); + articleDescriptionTopics.innerHTML = article.tags.join(", "); + let articleDescriptionAuthors = document.createElement("i"); + articleDescriptionAuthors.innerHTML = article.authors[0].name; + let articleDescriptionDate = document.createElement("i"); + articleDescriptionDate.innerHTML = article.modified.toString(); + articleDescriptionP.appendChild(articleDescriptionTopics); + articleDescriptionP.appendChild(articleDescriptionAuthors); + articleDescriptionP.appendChild(articleDescriptionDate); + articleDescription.appendChild(articleDescriptionP); + articleDiv.appendChild(articleDescription); + let articleBody = document.createElement("div"); + articleBody.setAttribute("class", "article-body"); + let articleBodyP = document.createElement("p"); + articleBodyP.innerHTML = article.summary; + articleBody.appendChild(articleBodyP); + articleDiv.appendChild(articleBody); + articleA.appendChild(articleDiv); + articleParent.appendChild(articleA); + let divider = document.createElement("div"); + divider.setAttribute("class", "divider"); + articleParent.appendChild(divider); +} //# sourceMappingURL=main.js.map \ No newline at end of file diff --git a/js/main.js.map b/js/main.js.map index bfde303..db17ddf 100644 --- a/js/main.js.map +++ b/js/main.js.map @@ -1 +1 @@ -{"version":3,"file":"main.js","sourceRoot":"","sources":["main.ts"],"names":[],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"main.js","sourceRoot":"","sources":["main.ts"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/js/main.ts b/js/main.ts index b345198..5f8790a 100644 --- a/js/main.ts +++ b/js/main.ts @@ -1,63 +1,93 @@ let articleParent = document.getElementById("articles"); -window.onload = function() { +function updateSeach(value: string) { + if(value == "") { + addRecent() + return + } - recent(5).then(function(data) { + let query: SearchQuery = { + query: value, + limit: 5 + } + + + clearArticles() + search(query).then(function(data) { data.forEach(function(article) { - - let articleA = document.createElement("a") - articleA.setAttribute("href", article.link) - - let articleDiv = document.createElement("div") - articleDiv.setAttribute("class", "article") - - let articleHeader = document.createElement("div") - articleHeader.setAttribute("class", "article-header") - - let articleHeaderTitle = document.createElement("h3") - articleHeaderTitle.innerHTML = article.title - - articleHeader.appendChild(articleHeaderTitle) - articleDiv.appendChild(articleHeader) - - let articleDescription = document.createElement("div") - articleDescription.setAttribute("class", "article-description") - - let articleDescriptionP = document.createElement("p") - - let articleDescriptionTopics = document.createElement("i") - articleDescriptionTopics.innerHTML = article.tags.join(", ") - - let articleDescriptionAuthors = document.createElement("i") - articleDescriptionAuthors.innerHTML = article.authors[0].name //TODO join ALL Auhtors - - let articleDescriptionDate = document.createElement("i") - articleDescriptionDate.innerHTML = article.modified.toString() - - articleDescriptionP.appendChild(articleDescriptionTopics) - articleDescriptionP.appendChild(articleDescriptionAuthors) - articleDescriptionP.appendChild(articleDescriptionDate) - - articleDescription.appendChild(articleDescriptionP) - articleDiv.appendChild(articleDescription) - - let articleBody = document.createElement("div") - articleBody.setAttribute("class", "article-body") - - let articleBodyP = document.createElement("p") - articleBodyP.innerHTML = article.summary - - articleBody.appendChild(articleBodyP) - articleDiv.appendChild(articleBody) - - articleA.appendChild(articleDiv) - articleParent.appendChild(articleA) - - let divider = document.createElement("div") - divider.setAttribute("class", "divider") - - articleParent.appendChild(divider) - + addArticle(article) }) }) } + +function clearArticles() { + articleParent.innerHTML = "" +} + +window.onload = function() { + addRecent() +} + +function addRecent () { + clearArticles() + recent(5).then(function(data) { + data.forEach(function(article) { + addArticle(article) + }) + }) +} + +function addArticle(article: ArticleSummary) { + let articleA = document.createElement("a") + articleA.setAttribute("href", article.link) + + let articleDiv = document.createElement("div") + articleDiv.setAttribute("class", "article") + + let articleHeader = document.createElement("div") + articleHeader.setAttribute("class", "article-header") + + let articleHeaderTitle = document.createElement("h3") + articleHeaderTitle.innerHTML = article.title + + articleHeader.appendChild(articleHeaderTitle) + articleDiv.appendChild(articleHeader) + + let articleDescription = document.createElement("div") + articleDescription.setAttribute("class", "article-description") + + let articleDescriptionP = document.createElement("p") + + let articleDescriptionTopics = document.createElement("i") + articleDescriptionTopics.innerHTML = article.tags.join(", ") + + let articleDescriptionAuthors = document.createElement("i") + articleDescriptionAuthors.innerHTML = article.authors[0].name //TODO join ALL Auhtors + + let articleDescriptionDate = document.createElement("i") + articleDescriptionDate.innerHTML = article.modified.toString() + + articleDescriptionP.appendChild(articleDescriptionTopics) + articleDescriptionP.appendChild(articleDescriptionAuthors) + articleDescriptionP.appendChild(articleDescriptionDate) + + articleDescription.appendChild(articleDescriptionP) + articleDiv.appendChild(articleDescription) + + let articleBody = document.createElement("div") + articleBody.setAttribute("class", "article-body") + + let articleBodyP = document.createElement("p") + articleBodyP.innerHTML = article.summary + + articleBody.appendChild(articleBodyP) + articleDiv.appendChild(articleBody) + + articleA.appendChild(articleDiv) + articleParent.appendChild(articleA) + + let divider = document.createElement("div") + divider.setAttribute("class", "divider") + + articleParent.appendChild(divider) +}