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
+
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)
+}