summaryrefslogtreecommitdiff
path: root/src/web
diff options
context:
space:
mode:
authorVidhu Kant Sharma <vidhukant@protonmail.ch>2022-05-28 14:45:09 +0530
committerVidhu Kant Sharma <vidhukant@protonmail.ch>2022-05-28 14:45:09 +0530
commita4a83e4b549e858d4f8c821591bfb74706d846e8 (patch)
treeff6a149e5be2da768f6fec5c9c5145e44d689f6b /src/web
parent8580139fe065036d4946a5fbd27a1334a0d92ab7 (diff)
Moved the blog to new repositoryHEADmain
Diffstat (limited to 'src/web')
-rw-r--r--src/web/styles/home.scss133
-rw-r--r--src/web/styles/partials/_article.scss31
-rw-r--r--src/web/styles/partials/_home.scss27
-rw-r--r--src/web/styles/partials/_navbar.scss35
-rw-r--r--src/web/styles/partials/_tags_menu.scss122
-rw-r--r--src/web/styles/post/post.scss166
-rw-r--r--src/web/styles/post/posts.scss94
-rw-r--r--src/web/styles/styles.scss30
-rw-r--r--src/web/styles/theme/_global.scss39
-rw-r--r--src/web/styles/theme/_home.scss17
-rw-r--r--src/web/styles/theme/_navbar.scss10
-rw-r--r--src/web/styles/theme/_post.scss62
-rw-r--r--src/web/templates/partials/navbar.html9
-rw-r--r--src/web/templates/partials/tags_menu.html18
-rw-r--r--src/web/templates/views/home.html54
-rw-r--r--src/web/templates/views/post.html44
-rw-r--r--src/web/templates/views/posts.html67
17 files changed, 958 insertions, 0 deletions
diff --git a/src/web/styles/home.scss b/src/web/styles/home.scss
new file mode 100644
index 0000000..c2d6242
--- /dev/null
+++ b/src/web/styles/home.scss
@@ -0,0 +1,133 @@
+@import "theme/global";
+@import "theme/home";
+@import "partials/home";
+
+body { @include home-body; }
+
+.header {
+ text-align: center;
+ #welcome-title {
+ color: $welcomeHeadingFG;
+ }
+ #welcome-subtitle {
+ font-size: 1.1em;
+ color: $welcomeHeadingAltFG;
+ }
+}
+
+.links-container {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ // border: 1px solid pink;
+
+ .links {
+ max-width: 42em;
+ width: 100%;
+
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-around;
+
+ a {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 1.1em;
+ background-color: $buttonBackgroundColor;
+ height: 3rem;
+ min-width: 10em;
+ border: 1px solid $buttonBorderColor;
+ border-radius: 2em;
+ }
+ }
+}
+
+.recents {
+ display: flex;
+ flex-direction: column;
+
+ .recents-label {
+ color: $recentsLabelFG;
+ margin-bottom: 0.5rem;
+ }
+
+ .posts, .tags {
+ background-color: $recentsItemBG;
+ border: 1px solid $buttonBorderColor;
+ width: 100%;
+ padding: 3px 7px;
+ overflow-y: scroll;
+ }
+
+ .posts {
+ font-size: 1.3rem;
+ max-height: 13em;
+ .post {
+ margin: 0.3em auto;
+ a {
+ word-break: break-word;
+ color: $postTitleFG;
+ // font-weight: bold;
+ font-size: 0.95em;
+ }
+ a:hover {
+ color: $defLinkForeground;
+ }
+ .post-createdat {
+ color: $postCreatedAtFG;
+ font-size: 0.9em;
+ }
+ }
+ }
+
+ .tags {
+ height: 28em;
+ }
+}
+
+@media screen and (max-width: 1200px) {
+ body { @include home-body-1200px; }
+}
+
+@media screen and (max-width: 800px) {
+ body { @include home-body-800px; }
+ .links-container .links {
+ a {
+ font-size: 1em;
+ min-width: 9em;
+ margin: 0.3em auto;
+ }
+ }
+}
+
+@media screen and (max-width: 600px) {
+ body { @include home-body-600px; }
+ .links-container .links {
+ a {
+ font-size: 0.9em;
+ min-width: 8.5em;
+ }
+ }
+ .recents {
+ .recents-label {
+ padding: 0 0.8rem
+ }
+ .posts, .tags {
+ padding: 0.2rem 0.8rem;
+ width: 100%;
+ border: none;
+ }
+ .posts {
+ // background-color: $defBackgroundColor;
+ .post {
+ a {
+ font-size: 0.8em;
+ }
+ .post-createdat {
+ font-size: 0.7em;
+ }
+ }
+ }
+ }
+}
diff --git a/src/web/styles/partials/_article.scss b/src/web/styles/partials/_article.scss
new file mode 100644
index 0000000..341ff94
--- /dev/null
+++ b/src/web/styles/partials/_article.scss
@@ -0,0 +1,31 @@
+@import "../theme/post";
+
+@mixin article-styling {
+ background-color: $postDefBackgroundColor;
+ min-width: 1150px;
+ width: 60%;
+ max-width: 1920px;
+ margin: 3em auto;
+ padding: 1em 2em;
+ border: 1px dotted $articleBorderColor;
+}
+
+@mixin article-styling-1200px {
+ margin: 2em auto;
+ min-width: 780px;
+ width: 90%;
+}
+
+@mixin article-styling-800px($val) {
+ min-width: 560px;
+ width: auto;
+ margin: calc($val * 1.5) $val;
+}
+
+@mixin article-styling-600px($val) {
+ min-width: 0;
+ width: 100%;
+ margin: 0;
+ border: none;
+ padding: $val;
+}
diff --git a/src/web/styles/partials/_home.scss b/src/web/styles/partials/_home.scss
new file mode 100644
index 0000000..462b67b
--- /dev/null
+++ b/src/web/styles/partials/_home.scss
@@ -0,0 +1,27 @@
+@import "../theme/global";
+
+@mixin home-body {
+ background-color: $defBackgroundColor;
+ min-width: 1150px;
+ width: 70%;
+ max-width: 1920px;
+ margin: 0em auto;
+ padding: 1em 2em;
+}
+
+@mixin home-body-1200px {
+ margin: 2em auto;
+ min-width: 780px;
+ width: 90%;
+}
+
+@mixin home-body-800px {
+ min-width: 560px;
+}
+
+@mixin home-body-600px {
+ min-width: 0;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+}
diff --git a/src/web/styles/partials/_navbar.scss b/src/web/styles/partials/_navbar.scss
new file mode 100644
index 0000000..0b9c9b1
--- /dev/null
+++ b/src/web/styles/partials/_navbar.scss
@@ -0,0 +1,35 @@
+@import "../theme/global";
+@import "../theme/navbar";
+
+#navbar {
+ height: $navbarHeight;
+ width: 100%;
+ background-color: $navbarBackgroundColor;
+ position: sticky;
+ top: 0;
+ box-shadow: $navbarShadow;
+
+ ul {
+ list-style-type: none;
+ height: 100%;
+ min-width: 400px;
+ max-width: 500px;
+ margin: 0 auto;
+ padding: 0;
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+
+ li {
+ padding: 0;
+ margin: 0 0.5em;
+ }
+
+ a {
+ font-size: 1.3em;
+ font-weight: 500;
+ text-decoration: none;
+ color: $navbarForegroundColor;
+ }
+ }
+}
diff --git a/src/web/styles/partials/_tags_menu.scss b/src/web/styles/partials/_tags_menu.scss
new file mode 100644
index 0000000..b74b139
--- /dev/null
+++ b/src/web/styles/partials/_tags_menu.scss
@@ -0,0 +1,122 @@
+@import "../theme/global";
+@import "../theme/post";
+@import "../theme/home";
+
+$tagButtonBG: $altBackgroundColor;
+
+@mixin button {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: $tagButtonBG;
+ color: $defForegroundColor;
+ font-size: 1.1em;
+ padding: 0.5em 1.3em;
+ border-radius: 2em;
+ border: 1px solid $buttonBorderColor;
+ transition: background-color 400ms, top ease 400ms;
+ position: relative;
+ top: 0;
+}
+
+@mixin button-hover {
+ transition: background-color 250ms, top ease 250ms;
+ top: -3px;
+}
+
+.tags-menu {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ max-width: 1920px;
+ width: 100%;
+ margin: auto;
+
+ .tags-switcher::before {
+ content: "Filter By Tags: ";
+ font-size: 1.5rem;
+ margin: 0.5rem 0;
+ color: $tagsMenuLabelFG;
+ }
+
+ .tags-switcher {
+ min-width: 1000px;
+ width: 50%;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-around;
+ .options, .menu {
+ margin: 0.5em auto;
+ }
+ .options {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ min-width: 80%;
+ .tag-label {
+ justify-self: center;
+ margin: 0.1em 1em;
+ .tag {
+ @include button;
+ .active {
+ border: 1px solid green;
+ background-color: blue;
+ }
+ }
+ .tag.active {
+ border-color: $tagButtonActiveBG;
+ }
+ input {
+ display: none;
+ }
+ input:checked + .tag {
+ background-color: $tagButtonActiveBG;
+ @include button-hover;
+ }
+ }
+ }
+ .menu {
+ input {
+ @include button;
+ background-color: rgba($tagButtonActiveBG, 0.9);
+ margin: 0.1em 1em;
+ }
+ input:hover {
+ @include button-hover;
+ background-color: $tagButtonActiveBG;
+ }
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ }
+}
+
+@media screen and (max-width: 1200px) {
+ .tags-menu {
+ min-width: 700px;
+
+ .tags-switcher {
+ min-width: 0;
+ width: 100%;
+ }
+ }
+}
+
+@media screen and (max-width: 800px) {
+ .tags-menu {
+ min-width: 0;
+ .tags-switcher {
+ // for some reason it won't work unless I do .1 .2 .3 thing
+ .options .tag-label .tag,
+ .menu input {
+ font-size: 1em;
+ }
+ }
+ }
+}
diff --git a/src/web/styles/post/post.scss b/src/web/styles/post/post.scss
new file mode 100644
index 0000000..80301d4
--- /dev/null
+++ b/src/web/styles/post/post.scss
@@ -0,0 +1,166 @@
+@import "../theme/global";
+@import "../theme/post";
+@import "../partials/article";
+
+article {
+ @include article-styling;
+ .post-header {
+ .post-title {
+ font-size: $postTitleFontSize;
+ text-align: $postTitleAlignment;
+ color: $postTitleColor;
+ word-break: break-word;
+ }
+ .post-info {
+ color: $postInfoForegroundColor;
+ width: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ }
+ }
+
+ .header-seperator {
+ margin: 1.1em 0;
+ }
+
+ img {
+ object-fit: contain;
+ min-width: 300px;
+ max-width: 50%;
+ min-height: 300px;
+ max-height: 600px;
+ height: auto;
+ }
+
+ img.root-img {
+ min-width: 400px;
+ width: 60%;
+ // max-height: 600px;
+ }
+
+ img.centered {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .image-flexbox {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+
+ img {
+ all: initial;
+ max-height: 25em;
+ margin: 0.5em;
+ }
+ }
+
+ li {
+ color: $listItemForeground;
+ }
+
+ .post-content {
+ h1 { color: $fg1; }
+ h2 { color: $fg2; }
+ h3 { color: $fg3; }
+ h4 { color: $fg4; }
+ h5 { color: $fg5; }
+ h6 { color: $fg6; }
+
+ .code-block {
+ color: $codeBlockForegroundColor;
+ padding: $codeBlockPadding;
+ background-color: $codeBlockBackgroundColor;
+ border-radius: $codeBlockBorderRadius;
+ @include selectionColors (
+ $codeBlockHighlightBackground,
+ $codeBlockHighlightForeground
+ );
+
+ em {
+ all: unset;
+ color: $codeCommentForegroundColor;
+ }
+ }
+ }
+}
+
+.centered {
+ text-align: center;
+}
+
+@media screen and (max-width: 1200px) {
+ article {
+ @include article-styling-1200px;
+ .header-seperator { margin: 1em -2em; }
+ .post-header { .post-title { font-size: 2.2em; } }
+ }
+}
+
+@media screen and (max-width: 800px) {
+ article {
+ $side-margin: $post-800px-padding;
+ @include article-styling-800px($side-margin);
+ .post-header { .post-title { font-size: 2em; } }
+ .header-seperator { margin: 1em (-$side-margin * 2); }
+
+ $img-width: 95%;
+ img {
+ min-width: auto;
+ max-width: $img-width;
+ min-height: auto;
+ max-height: auto;
+ }
+
+ .image-flexbox {
+ img {
+ all: initial;
+ max-height: 600px;
+ max-width: $img-width;
+ margin: 0.5em;
+ }
+ }
+
+ ul {
+ width: 100%;
+ li {
+ width: 100%;
+ .image-flexbox {
+ width: $img-width;
+ img {
+ max-width: 100%;
+ }
+ }
+ }
+ }
+ }
+}
+
+@media screen and (max-width: 600px) {
+ article {
+ $padding: $post-600px-padding;
+ @include article-styling-600px($padding);
+
+ img.root-img {
+ min-width: 300px;
+ width: 80%;
+ // max-height: 600px;
+ }
+
+ .header-seperator {
+ margin: 1em (-$padding);
+ }
+ .post-header {
+ .post-title { font-size: 1.5em; }
+ // NOTE: might need to be modified i.e
+ // content goes to next line instead of overflowing
+ .post-info {
+ justify-content: center;
+ }
+ }
+ }
+}
diff --git a/src/web/styles/post/posts.scss b/src/web/styles/post/posts.scss
new file mode 100644
index 0000000..1272d1d
--- /dev/null
+++ b/src/web/styles/post/posts.scss
@@ -0,0 +1,94 @@
+@import "../theme/global";
+@import "../theme/post";
+@import "../partials/article";
+@import "../partials/tags_menu";
+
+article {
+ @include article-styling;
+ .options {
+ width: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+
+ .limit-options {
+ a {
+ color: $defForegroundColor;
+ }
+ .active {
+ color: $defLinkForeground;
+ font-weight: 600;
+ }
+ }
+
+ .paging-options {
+ width: 16em;
+ display: flex;
+ justify-content: space-evenly;
+ }
+ }
+
+ #options-footer {
+ justify-content: center;
+ }
+
+ .posts {
+ .post {
+ padding: 0.5em 0;
+ font-size: 1.4em;
+
+ .post-title-tags {
+ .post-title {
+ font-size: 1em;
+ color: $posts_postTitleColor;
+ }
+
+ .post-title:hover {
+ color: $posts_postHighlightedTitleColor;
+ }
+
+ .post-tag {
+ font-size: 0.8em;
+ color: $posts_postTagForegroundColor;
+ }
+
+ .post-tag:hover {
+ color: $defLinkForeground;
+ }
+ }
+
+ .post-info {
+ font-size: 0.8em;
+ .post-createdat {
+ color: $posts_postInfoForegroundColor;
+ }
+ }
+ }
+ }
+}
+
+@media screen and (max-width: 1200px) {
+ article {
+ @include article-styling-1200px;
+ .post {
+ a {
+ font-size: 1.2rem;
+ text-decoration: none;
+ }
+ }
+ }
+}
+
+@media screen and (max-width: 800px) {
+ article {
+ $side-margin: 1em;
+ @include article-styling-800px($side-margin);
+ }
+}
+
+@media screen and (max-width: 600px) {
+ article {
+ $padding: 1em;
+ @include article-styling-600px($padding);
+ }
+}
diff --git a/src/web/styles/styles.scss b/src/web/styles/styles.scss
new file mode 100644
index 0000000..7a1b0c0
--- /dev/null
+++ b/src/web/styles/styles.scss
@@ -0,0 +1,30 @@
+@import "theme/global";
+@import "partials/navbar";
+
+// TODO: If I like this font I'll host it myself
+// @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500&display=swap');
+
+* {
+ box-sizing: border-box;
+
+ // font-family: 'Lato', sans-serif;
+ font-family: 'Open Sans', sans-serif;
+}
+
+body {
+ margin: 0;
+ padding: 0;
+ background-color: $defBackgroundColor;
+ color: $defForegroundColor;
+}
+
+@include selectionColors($selectionBackground, $selectionForeground);
+
+a {
+ color: $defLinkForeground;
+ text-decoration: none;
+}
+
+
+
diff --git a/src/web/styles/theme/_global.scss b/src/web/styles/theme/_global.scss
new file mode 100644
index 0000000..de77f99
--- /dev/null
+++ b/src/web/styles/theme/_global.scss
@@ -0,0 +1,39 @@
+// global color definitions
+// background
+// $defBackgroundColor: #061820;
+$defBackgroundColor: #151718;
+// $altBackgroundColor: #1a2a30;
+// $defBackgroundColor: #383A59;
+// $altBackgroundColor: #282A36;
+$altBackgroundColor: #232627;
+$selectionBackground: #8215D2;
+
+// foreground
+$defForegroundColor: #dfdfdf;
+$altForegroundColor: #FFFFFF;
+$boringForeground: #b5c4c2;
+$selectionForeground: #FFFFFF;
+// $defLinkForeground: #3691b8;
+$defLinkForeground: #6d8ee2;
+
+// colored foregrounds
+$fg-purple0: #9c79c5;
+
+$fg-pink0: #e82884;
+
+$fg-green0: #9c79c5;
+
+$fg-yellow0: #FFFF99;
+
+
+// apply text selection/highlight colors easily
+@mixin selectionColors($background, $foreground) {
+ ::selection {
+ color: $foreground;
+ background-color: $background;
+ }
+ ::-moz-selection {
+ color: $foreground;
+ background-color: $background;
+ }
+}
diff --git a/src/web/styles/theme/_home.scss b/src/web/styles/theme/_home.scss
new file mode 100644
index 0000000..037c2d3
--- /dev/null
+++ b/src/web/styles/theme/_home.scss
@@ -0,0 +1,17 @@
+@import "global";
+@import "post";
+
+$buttonBackgroundColor: $altBackgroundColor;
+
+$buttonBorderColor: #000000;
+
+$welcomeHeadingFG: $fg-purple0;
+$welcomeHeadingAltFG: $fg-yellow0;
+$recentsLabelFG: $fg-pink0;
+
+$recentsItemBG: $altBackgroundColor;
+
+// $postTitleFG: #d28bf0;
+$postTitleFG: $defForegroundColor;
+// $postCreatedAtFG: #959495;
+$postCreatedAtFG: #c2c1c2;
diff --git a/src/web/styles/theme/_navbar.scss b/src/web/styles/theme/_navbar.scss
new file mode 100644
index 0000000..1f01882
--- /dev/null
+++ b/src/web/styles/theme/_navbar.scss
@@ -0,0 +1,10 @@
+// color definitions
+$navbarBackgroundColor: $defBackgroundColor;
+// $navbarForegroundColor: #bbf2c0;
+$navbarForegroundColor: #EDEDED;
+
+// $navbarShadow: 0 0.5em 1em $navbarBackgroundColor;
+$navbarShadow: none;
+
+// size definitions
+$navbarHeight: 3rem;
diff --git a/src/web/styles/theme/_post.scss b/src/web/styles/theme/_post.scss
new file mode 100644
index 0000000..3a05a74
--- /dev/null
+++ b/src/web/styles/theme/_post.scss
@@ -0,0 +1,62 @@
+@import "global";
+
+// color definitions
+// background
+$postDefBackgroundColor: $altBackgroundColor;
+$postAltBackgroundColor: #384044;
+$codeBlockBackgroundColor: $postAltBackgroundColor;
+$codeBlockHighlightBackground: pink;
+
+// foreground
+$postDefForegroundColor: $defForegroundColor;
+$postAltForegroundColor: $altForegroundColor;
+$postInfoForegroundColor: $boringForeground;
+$codeBlockForegroundColor: $postAltForegroundColor;
+$codeCommentForegroundColor: gray;
+$codeBlockHighlightForeground: $altBackgroundColor;
+
+// $fg1: #d305e8;
+// $fg1: #AB47BC;
+// $fg2: #28c7d4;
+// $fg3: #F26413;
+// $fg4: #23DEBA;
+// $fg5: #A600FF;
+// $fg6: #B623DE;
+
+$fg1: #FF79C6;
+$fg2: #50FA7B;
+$fg3: #E659A9;
+$fg4: #8E5EBC;
+$fg5: #23DEBA;
+$fg6: #A600FF;
+
+$listItemForeground: $fg3;
+
+// other
+$articleBorderColor: $defForegroundColor;
+
+// $postTitleColor: #2aa386;
+// $postTitleColor: #dd237d;
+// $postTitleColor: #ffbb00;
+// $postTitleColor: #dea2c2;
+// $postTitleColor: #BD93F9;
+$postTitleColor: $fg-purple0;
+
+// size definitions
+$postTitleFontSize: 2.5em;
+$postTitleAlignment: center;
+
+$codeBlockBorderRadius: 0.4em;
+$codeBlockPadding: 0.2em 1em;
+
+// responsive
+$post-800px-padding: 1em;
+$post-600px-padding: 1em;
+
+$posts_postTitleColor: $defForegroundColor;
+$posts_postHighlightedTitleColor: $defLinkForeground;
+$posts_postInfoForegroundColor: $postInfoForegroundColor;
+$posts_postTagForegroundColor: $postInfoForegroundColor;
+
+$tagsMenuLabelFG: $postTitleColor;
+$tagButtonActiveBG: $tagsMenuLabelFG;
diff --git a/src/web/templates/partials/navbar.html b/src/web/templates/partials/navbar.html
new file mode 100644
index 0000000..223c3f3
--- /dev/null
+++ b/src/web/templates/partials/navbar.html
@@ -0,0 +1,9 @@
+{{ define "partials/navbar.html" }}
+<nav id="navbar">
+ <ul>
+ <a href="https://www.youtube.com/watch?v=DaWbq6KeJq4&list=RDxA_4ZFe1TME&index=16">
+ <li>This UGLY Navbar Is Just A Placeholder</li>
+ </a>
+ </ul>
+</nav>
+{{ end }}
diff --git a/src/web/templates/partials/tags_menu.html b/src/web/templates/partials/tags_menu.html
new file mode 100644
index 0000000..8f1c3ee
--- /dev/null
+++ b/src/web/templates/partials/tags_menu.html
@@ -0,0 +1,18 @@
+{{ define "partials/tags_menu.html" }}
+<div class="tags-menu">
+ <form class="tags-switcher" action="/posts/filter-by-tags" method="POST">
+ <div class="options">
+ {{ range .Tags }}
+ <label class="tag-label">
+ <input type="checkbox" name="tags" value="{{ .TagID }}" id="{{ .TagID }}" class="{{ if .IsSelected }}active{{ end }}">
+ <span class="tag {{ if .IsSelected }}active{{ end }}">{{ .TagName }}</span>
+ </label>
+ {{ end }}
+ </div>
+ <div class="menu">
+ <input type="reset" value="Clear"/>
+ <input type="submit" value="Filter"/>
+ </div>
+ </form>
+</div>
+{{ end }}
diff --git a/src/web/templates/views/home.html b/src/web/templates/views/home.html
new file mode 100644
index 0000000..8ab791b
--- /dev/null
+++ b/src/web/templates/views/home.html
@@ -0,0 +1,54 @@
+{{ define "views/home.html" }}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width,initial-scale=1" />
+ <meta name="description" content="Vidhu Kant's Blog" />
+ <link type="text/css" rel="stylesheet" href="/css/styles.css">
+ <link type="text/css" rel="stylesheet" href="/css/home.css">
+ <title>Vidhu Kant's Blog</title>
+</head>
+<body>
+ <div class="header" id="header">
+ <h1 id="welcome-title">Welcome to Vidhu Kant's Blog!</h1>
+ <p id="welcome-subtitle">Here, I talk about the various topics that interest me.</p>
+ <p>-- important links, maybe navbar, info (probably shit like last update date or number of blogs this week/month/whatever) --</p>
+ </div>
+
+ <div class="links-container" id="links">
+ <span class="links">
+ <a href="/posts">View All Posts</a>
+ <a href="/tags">Filter By Tags</a>
+ <a href="/about">About This Blog</a>
+ </span>
+ </div>
+
+ <div class="recents" id="recents">
+ <h2 class="recents-label" id="recent-posts-label">
+ My Recent Articles:
+ </h2>
+ <div class="posts" id="recent-posts">
+ {{ range .RecentPosts }}
+ <div class="post">
+ <span class="post-createdat">{{ .CreatedAt }}: </span>
+ <a href="/posts/{{ .ID }}">{{ .Title }}</a>
+ </div>
+ {{ end }}
+ </div>
+ <!-- obviously there are no "recent" tags,
+ just keeping up with naming scheme -->
+ <h2 class="recents-label" id="recent-tags-label">
+ Browse Articles by Tags:
+ </h2>
+ <div class="tags" id="recent-tags">
+ {{ range .Tags}}
+ <a href="/posts/?tags={{ .ID }}">{{ .Name }}</a>
+ {{ end }}
+ </div>
+ </div>
+
+ {{ .Message }}
+</body>
+</html>
+{{ end }}
diff --git a/src/web/templates/views/post.html b/src/web/templates/views/post.html
new file mode 100644
index 0000000..ecd1a14
--- /dev/null
+++ b/src/web/templates/views/post.html
@@ -0,0 +1,44 @@
+{{ define "views/post.html" }}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width,initial-scale=1" />
+ <meta name="description" content="Vidhu Kant's Blog Post #{{ .ID }}: {{ .Title }}" />
+ <link type="text/css" rel="stylesheet" href="/css/styles.css">
+ <link type="text/css" rel="stylesheet" href="/css/post.css">
+ <title>
+ {{ .Title }} | Vidhu Kant's Blog Post
+ </title>
+</head>
+<body>
+ {{ template "partials/navbar.html" .}}
+ <article>
+ <div class="post-header" id="header">
+ <h1 class="post-title" id="title">
+ {{ .Title }}
+ </h1>
+ <div class="post-info" id="info">
+ <span class="post-created-at" id="created-at">
+ {{ .CreatedAt }}
+ {{ if .UpdatedAt }} <span class="post-updated-at" id="created-at">(Last Updated {{ .UpdatedAt }})</span> {{- end }}
+ </span>
+ </div>
+ </div>
+ <hr class="header-seperator">
+
+ <div class="post-content" id="content">
+ {{ .Content }}
+ </div>
+
+ <div class="post-footer" id="footer">
+ {{ .post_footer }}
+ </div>
+ </article>
+ <noscript>
+ <p>Ahh I see you're a man of culture!</p>
+ <p>(Because you have JavaScript disabled)</p>
+ </noscript>
+</body>
+</html>
+{{ end }}
diff --git a/src/web/templates/views/posts.html b/src/web/templates/views/posts.html
new file mode 100644
index 0000000..e992564
--- /dev/null
+++ b/src/web/templates/views/posts.html
@@ -0,0 +1,67 @@
+{{ define "views/posts.html" }}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width,initial-scale=1" />
+ <meta name="description" content="BLOG DESCRIPTION GHERE" />
+ <link type="text/css" rel="stylesheet" href="/css/styles.css">
+ <link type="text/css" rel="stylesheet" href="/css/posts.css">
+ <title>
+ Index Page
+ </title>
+</head>
+<body>
+ {{ template "partials/navbar.html" .}}
+ {{ template "partials/tags_menu.html" .}}
+ <article>
+ <div class="options" id="options-header">
+ <span class="limit-options">
+ Posts to show per page:
+ {{ range .LimitOptions }}
+ <a href="?page={{ $.PageNumber }}&limit={{ . }}&first={{ $.FirstPost }}&sort_by={{ if $.SortByOldest }}oldest{{ else }}newest{{ end }}"
+ class="{{ if eq . $.Limit }}active{{- end }}">
+ {{ . }}
+ </a>
+ {{ end }}
+ </span>
+ <span id="page-sort">
+ Currently sorting by {{ if .SortByOldest }}oldest{{ else }}newest{{ end }} first.
+ <!--a href="?page={{ .PageNumber }}&limit={{ .Limit }}&first={{ .FirstPost }}&sort_by={{ if .SortByOldest }}newest{{ else }}oldest{{ end }}"-->
+ <a href="?limit={{ .Limit }}&sort_by={{ if .SortByOldest }}newest{{ else }}oldest{{ end }}">
+ Sort by {{ if .SortByOldest }}newest{{ else }}oldest{{ end }} first?
+ </a>
+ </span>
+ </div>
+ <div class="posts">
+ {{ range .Posts }}
+ <div class="post">
+ <span class="post-title-tags">
+ <a class="post-title" href="{{ .ID }}">{{ .Title }}</a>
+ <span class="post-tags">
+ {{ range .Tags }}
+ <a class="post-tag" href="/posts?tags={{ .ID }}">{{ .Name }}</a>
+ {{ end }}
+ </span>
+ </span>
+ <div class="post-info">
+ <span class="post-createdat">{{ .CreatedAt }}</span>
+ </div>
+ </div>
+ {{ end }}
+ </div>
+ <div class="options" id="options-footer">
+ <span class="paging-options">
+ {{ if .ShowPrev }}
+ <a href="?page={{ .PrevPage }}&limit={{ .Limit }}&first={{ .PrevFirst }}&sort_by={{ if .SortByOldest }}oldest{{ else }}newest{{ end }}">Previous Page</a>
+ {{- end }}
+
+ {{ if .ShowNext }}
+ <a href="?page={{ .NextPage }}&limit={{ .Limit }}&first={{ .NextFirst }}&sort_by={{ if .SortByOldest }}oldest{{ else }}newest{{ end }}">Next Page</a>
+ {{- end }}
+ </span>
+ </div>
+ </article>
+</body>
+</html>
+{{ end }}