Merge pull request #23 from khoaxuantu/dev

Dev new contents
khoaxuantu · Jan 26, 2024 · b7999bb · b7999bb
2 parents 8286e72 + 5f7e633
commit b7999bb
Show file tree

Hide file tree

Showing 21 changed files with 576 additions and 171 deletions.
diff --git a/public/images/blogs/react_bun_boilerplate/1.webp b/public/images/blogs/react_bun_boilerplate/1.webp
diff --git a/public/images/blogs/react_bun_boilerplate/2.webp b/public/images/blogs/react_bun_boilerplate/2.webp
diff --git a/src/components/blogs/header.tsx b/src/components/blogs/header.tsx
@@ -6,7 +6,7 @@ export function BlogsPageHeaderGrp() {
  <div className='header-txt-blog'>
  <b>Tus's Blogs</b>
  </div>
- <div className='body-txt mt-2'>
+ <div className='body-txt-blog mt-2'>
  Some notes, some ideas, some opinions
  </div>
  <hr />
@@ -20,6 +20,20 @@ export function SingleBlogPageHeaderGrp(props: {id: string}) {
  <div className='header-txt-blog'>
  <b>{blogInfoDict[props.id].title}</b>
  </div>
+ <div className='body-txt-blog mt-2'>
+ {formatDate(blogInfoDict[props.id].date)}
+ </div>
  </div>
  );
 }
+
+function formatDate(date: Date) {
+ const options: Intl.DateTimeFormatOptions = {
+ day: "numeric",
+ month: "long",
+ year: "numeric",
+ weekday: "long",
+ }
+
+ return date.toLocaleDateString("en-UK", options);
+}
diff --git a/src/components/copyright.tsx b/src/components/copyright.tsx
@@ -18,7 +18,7 @@ function Copyright(props: { copyright_class?: string }) {
  <a href="https://react.dev/" target="_blank" rel="noreferrer">React</a>, {" "}
  <a href="https://www.typescriptlang.org/" target="_blank" rel="noreferrer">TypeScript</a> and {" "}
  <a href="https://sass-lang.com/" target="_blank" rel="noreferrer">Sass</a>.<br></br>
- Copyright © {year} All Rights Reserved.
+ Copyright © 2023-{year} All Rights Reserved.
  </div>
  );
 }

diff --git a/src/components/layouts/blog.tsx b/src/components/layouts/blog.tsx
@@ -21,7 +21,7 @@ function BlogLayout() {
  <div className="container page-wrapper">
  <CustomHead metadata={metadata} />
  <Outlet />
- <Copyright copyright_class="page-copyright pb-3" />
+ <Copyright copyright_class="page-copyright mt-5 pt-5 pb-3" />
  </div>
  );
 }

diff --git a/src/css/markdown.css b/src/css/markdown.css
diff --git a/src/css/markdown.css.map b/src/css/markdown.css.map
diff --git a/src/css/scss/components/_button.scss b/src/css/scss/components/_button.scss
@@ -61,7 +61,7 @@
 }
 
 .btn-contact-overlay {
- @include util.overlay(rgba($color: dimgray, $alpha: 1));
+ @include util.overlay(rgba($color: var.$text-menu, $alpha: 0.7));
 }
 
 .btn-skill-grp {

diff --git a/src/css/scss/general/_container.scss b/src/css/scss/general/_container.scss
@@ -23,7 +23,7 @@
  position: relative;
  width: 80%;
  line-height: initial;
- color: lightgray;
+ color: var.$text-menu;
 }
 
 .menu-proj-wrapper {

diff --git a/src/css/scss/general/_util.scss b/src/css/scss/general/_util.scss
@@ -60,7 +60,7 @@ $directions: (
 
 @mixin overlay($color) {
  background: $color;
- position: absolute;
+ position: fixed;
  width: 100dvw;
  height: 100dvh;
  top: 0;

diff --git a/src/css/scss/general/_var.scss b/src/css/scss/general/_var.scss
@@ -21,9 +21,11 @@ $default-body-font-size: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
 
 $radius: 5px;
 $text-dark: aliceblue;
+$text-menu: #E2E8F0;
 $background-dark: #34383d;
 $gray: #8c8c8c;
 $light-gray: #cbcbcb;
 $default-atag-color: #0d6efd;
 $navbar-bg-color: #383838;
 $navbar-stick-color: #191717;
+$overlay-color: #1E293B;
diff --git a/src/css/scss/markdown.scss b/src/css/scss/markdown.scss
@@ -9,7 +9,11 @@ $codeinline-background: #f6f8fa;
  margin: revert;
  padding: revert;
  list-style-type: revert;
- line-height: 1.5rem;
+ line-height: 1.625rem;
+ }
+
+ h1 {
+ padding-top: 3rem;
  }
 
  code, pre {
@@ -47,6 +51,7 @@ $codeinline-background: #f6f8fa;
  font-style: italic;
  padding: 1.33em;
  text-align: left;
+ font-weight: bold;
  }
 
  table {

diff --git a/src/css/scss/style.scss b/src/css/scss/style.scss
@@ -42,7 +42,7 @@ span {
 }
 
 .background-overlay {
- @include util.overlay(rgba($color: dimgray, $alpha: 0.9));
+ @include util.overlay(rgba($color: var.$overlay-color, $alpha: 0.75));
 }
 
 .header-grp {
@@ -88,7 +88,7 @@ span {
  @extend %copyright-txt;
  position: relative;
  display: none;
- color: lightgray;
+ color: var.$text-menu;
 
  a {
  color: bisque;

diff --git a/src/css/style.css b/src/css/style.css
diff --git a/src/css/style.css.map b/src/css/style.css.map
diff --git a/src/lib/factory/cardBase.tsx b/src/lib/factory/cardBase.tsx
@@ -22,6 +22,7 @@ export interface IBlogCardProps extends ICardProps {
  brief_description: string,
  url: string,
  file: string,
+ date: Date,
 }