basic seach

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;
+  list-style: none; }
-}
   ul li {
-  padding-right: 30px;
+    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;
+  font-family: "Staatliches", sans-serif; }
-}
   .header-title h1 {
     font-size: 90px;
     letter-spacing: 30px;
-  margin: 0;
+    margin: 0; }
-}
   .header-title h2 {
     font-size: 30px;
     letter-spacing: 10px;
-  margin: 0;
+    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;
+  align-items: center; }
-}
   .navigation img {
     margin-right: auto;
     width: 3%;
     min-width: 30px;
-  padding-left: 2.5%;
+    padding-left: 2.5%; }
-}
   .navigation a {
     padding: 0 2%;
     font-size: 200%;
-  font-weight: bolder;
+    font-weight: bolder; }
-}
 
 .article {
-  padding: 2%;
+  padding: 2%; }
-}
   .article:hover {
-  color: white;
+    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%;
+  margin-top: 0.5%; }
-}
   .article-description:p {
-  white-space: pre;
+    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;
+  margin: 2.5% 0; }
-}
   .foot a {
     font-family: "Roboto Mono", monospace;
     font-weight: normal;
-  padding: 0 10%;
+    padding: 0 10%; }
-}
 
 i {
-  margin-right: 20px;
+  margin-right: 20px; }
-}
 
-.about-section {
+input {
-  font-family: "Roboto", sans-serif;
+  border: 2px solid #D62828;
-  width: 60%;
+  padding: 5px 3px;
-  text-align: center;
+  background: #03071E;
-  margin:auto;
+  color: #EAE2B7;
-}
+  margin: 0 10px;
-
+  font-size: 1rem;
-
+  border-radius: 3px;
-.legal-section {
+  max-width: 200px;
-  font-family: "Roboto", sans-serif;
+  width: 10%;
-  width: 60%;
+  min-width: 100px; }
-  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%;
-}
 
 @media screen and (max-width: 1000px) {
   .navigation {
-    flex-direction: column;
+    flex-direction: column; }
-  }
     .navigation img {
       margin: 10px 0;
-    padding: 0;
+      padding: 0; }
-  }
     .navigation * {
-    margin: 5px 0;
+      margin: 5px 0; }
-  }
 
   .header-title {
-    text-align: center;
+    text-align: center; }
-  }
     .header-title h1 {
       font-size: 50px;
-    letter-spacing: 20px;
+      letter-spacing: 20px; }
-  }
     .header-title h2 {
       font-size: 20px;
-    letter-spacing: 10px;
+      letter-spacing: 10px; }
-  }
 
   .articles {
-    width: 95%;
+    width: 95%; }
-  }
     .articles div {
-    margin: 10px 0;
+      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;
+    justify-content: space-between; } }
-  }
+
-}/*# sourceMappingURL=index.css.map */
+/*# sourceMappingURL=index.css.map */

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

html/landingpage.gohtml

@@ -24,7 +24,7 @@
       <img id="logo" src="img/logodark.svg">
       <a href="#">Home</a>
       <a href="html/about.html">About</a>
-      <a href="#">Categories</a>
+      <input oninput="updateSeach(this.value)" type="text" placeholder="seach" name="" value="">
     </div>
 
     <div class="header-title">
@@ -49,52 +49,6 @@
         </a>
 
         <div class="divider"></div>
-
-        <a href="#">
-          <div class="article">
-            <div class="article-header">
-              <h3>Render fractals on canvas with WASM.</h3>
-            </div>
-            <div class="article-description">
-              <p><i>PROGRAMMING</i><i>DAVID</i><i>15.12.2021</i></p>
-            </div>
-            <div class="article-body">
-              <p>Learn how to render mandelbrot fractals with web assembly.</p>
-            </div>
-          </div>
-        </a>
-
-        <div class="divider"></div>
-
-        <a href="#">
-          <div class="article">
-            <div class="article-header">
-              <h3>Write directly to the framebuffer with Rust.</h3>
-            </div>
-            <div class="article-description">
-              <p><i>LINUX</i><i>DAVID</i><i>15.12.2021</i></p>
-            </div>
-            <div class="article-body">
-              <p>Learn how to access the framebuffer with Rust.</p>
-            </div>
-          </div>
-        </a>
-
-        <div class="divider"></div>
-
-        <a href="#">
-          <div class="article">
-            <div class="article-header">
-              <h3>Kobalt a simple webserver for testing.</h3>
-            </div>
-            <div class="article-description">
-              <p><i>OPEN SOURCE</i><i>DAVID</i><i>15.12.2021</i></p>
-            </div>
-            <div class="article-body">
-              <p>Meet kobalt, the new fast and simple production ready webserver.</p>
-            </div>
-          </div>
-        </a>
     -->
       </div>
     </div>

js/main.js

@@ -1,7 +1,35 @@
 let articleParent = document.getElementById("articles");
+function updateSeach(value) {
+    if (value == "") {
+        addRecent();
+        return;
+    }
+    let query = {
+        query: value,
+        limit: 5
+    };
+    clearArticles();
+    search(query).then(function (data) {
+        data.forEach(function (article) {
+            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");
@@ -37,7 +65,5 @@ window.onload = function () {
     let divider = document.createElement("div");
     divider.setAttribute("class", "divider");
     articleParent.appendChild(divider);
-        });
+}
-    });
-};
 //# sourceMappingURL=main.js.map

js/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sourceRoot":"","sources":["main.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"main.js","sourceRoot":"","sources":["main.ts"],"names":[],"mappings":"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"}

js/main.ts

@@ -1,10 +1,43 @@
 let articleParent = document.getElementById("articles");
 
-window.onload = function() {
+function updateSeach(value: string) {
+    if(value == "") {
+        addRecent()
+        return
+    }
 
+    let query: SearchQuery = {
+        query: value,
+        limit: 5
+    }
+
+
+    clearArticles()
+    search(query).then(function(data) {
+        data.forEach(function(article) {
+            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)
 
@@ -57,7 +90,4 @@ window.onload = function() {
     divider.setAttribute("class", "divider")
 
     articleParent.appendChild(divider)
-
-        })
-    })
 }