Deploy/0.0.2

package.json

@@ -1,7 +1,8 @@
 {
   "name": "hyn",
+  "description": "Personal blog to explore fresh insights and elevate your tech skills daily with innovative articles and guidance",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "scripts": {
     "dev": "astro dev --force",
     "build": "astro build --force",

public/logo/browserconfig.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

public/logo/manifest.json

@@ -0,0 +1,66 @@
+{
+  "name": "Hyn - Discover new perspective",
+  "short_name": "hyn",
+  "start_url": "/",
+  "display": "standalone",
+  "protocol_handlers": [
+    {
+      "protocol": "web+hyn",
+      "url": "/blog?path=%s"
+    }
+  ],
+  "screenshots": [
+    {
+      "src": "\/logo_source/h-high-resolution-logo.png",
+      "sizes": "2000x2000",
+      "type": "image/png",
+      "form_factor": "wide",
+      "label": "Screenshot 1"
+    },
+    {
+      "src": "\/logo_source/h-high-resolution-logo.png",
+      "sizes": "2000x2000",
+      "type": "image/png",
+      "platform": "ios",
+      "label": "Screenshot 1"
+    }
+  ],
+  "icons": [
+    {
+      "src": "\/logo\/android-icon-36x36.png",
+      "sizes": "36x36",
+      "type": "image\/png",
+      "density": "0.75"
+    },
+    {
+      "src": "\/logo\/android-icon-48x48.png",
+      "sizes": "48x48",
+      "type": "image\/png",
+      "density": "1.0"
+    },
+    {
+      "src": "\/logo\/android-icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image\/png",
+      "density": "1.5"
+    },
+    {
+      "src": "\/logo\/android-icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image\/png",
+      "density": "2.0"
+    },
+    {
+      "src": "\/logo\/android-icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image\/png",
+      "density": "3.0"
+    },
+    {
+      "src": "\/logo\/android-icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image\/png",
+      "density": "4.0"
+    }
+  ]
+}

src/components/BaseHead.astro

@@ -4,6 +4,7 @@
 import type { ImageMetadata } from "astro";
 import FallbackImage from "../assets/blog-placeholder-1.jpg";
 import { SITE_TITLE } from "../consts";
+import FaviconHead from './FaviconHead.astro'
 
 interface Props {
     title: string;
@@ -19,7 +20,6 @@ const { title, description, image = FallbackImage } = Astro.props;
 <!-- Global Metadata -->
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1" />
-<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 <link rel="sitemap" href="/sitemap-index.xml" />
 <link
     rel="alternate"
@@ -66,3 +66,5 @@ const { title, description, image = FallbackImage } = Astro.props;
 <meta property="twitter:title" content={title} />
 <meta property="twitter:description" content={description} />
 <meta property="twitter:image" content={new URL(image.src, Astro.url)} />
+
+<FaviconHead />

src/components/FaviconHead.astro

@@ -0,0 +1,20 @@
+---
+---
+
+<link rel="apple-touch-icon" sizes="57x57" href="/logo/apple-icon-57x57.png">
+<link rel="apple-touch-icon" sizes="60x60" href="/logo/apple-icon-60x60.png">
+<link rel="apple-touch-icon" sizes="72x72" href="/logo/apple-icon-72x72.png">
+<link rel="apple-touch-icon" sizes="76x76" href="/logo/apple-icon-76x76.png">
+<link rel="apple-touch-icon" sizes="114x114" href="/logo/apple-icon-114x114.png">
+<link rel="apple-touch-icon" sizes="120x120" href="/logo/apple-icon-120x120.png">
+<link rel="apple-touch-icon" sizes="144x144" href="/logo/apple-icon-144x144.png">
+<link rel="apple-touch-icon" sizes="152x152" href="/logo/apple-icon-152x152.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/logo/apple-icon-180x180.png">
+<link rel="icon" type="image/png" sizes="192x192"  href="/logo/android-icon-192x192.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/logo/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="96x96" href="/logo/favicon-96x96.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/logo/favicon-16x16.png">
+<link rel="manifest" href="/logo/manifest.json">
+<meta name="msapplication-TileColor" content="#ffffff">
+<meta name="msapplication-TileImage" content="/logo/ms-icon-144x144.png">
+<meta name="theme-color" content="#ffffff">

src/components/Mermaid.astro

@@ -60,6 +60,8 @@ const cid = randStr();
 
         display: block;
 
+        margin-bottom: 20px;
+
         &:active {
             cursor: grabbing;
         }
@@ -86,6 +88,13 @@ const cid = randStr();
 
         display: flex;
         flex-direction: row;
+
+        opacity: 1;
+        transition: 100ms linear;
+
+        &:not(:hover) {
+            opacity: 0.3;
+        }
     }
     .o--mermaid_tool {
         width: 30px;
@@ -97,6 +106,8 @@ const cid = randStr();
         line-height: 16px;
         cursor: pointer;
 
+        background-color: inherit;
+
         svg {
             fill: white;
         }

src/components/playground/WebPlayground.astro

@@ -5,8 +5,11 @@ import { combiner } from "./web";
 
 interface Props {
     html?: string;
+    htmlFileName?: string;
     css?: string;
+    cssFileName?: string;
     js?: string;
+    jsFileName?: string;
 }
 
 const cid = randStr("o--playground-");
@@ -24,13 +27,37 @@ const props = Astro.props;
     </div>
     <div class="o--tab_contents">
         <div class="o--tab_content o--playground_code m--html">
-            {props.html && <Code lang="html" code={props.html} />}
+            {
+                props.html && (
+                    <Code
+                        lang="html"
+                        code={props.html}
+                        title={props.htmlFileName}
+                    />
+                )
+            }
         </div>
         <div class="o--tab_content o--playground_code m--css">
-            {props.css && <Code lang="css" code={props.css} />}
+            {
+                props.css && (
+                    <Code
+                        lang="css"
+                        code={props.css}
+                        title={props.cssFileName}
+                    />
+                )
+            }
         </div>
         <div class="o--tab_content o--playground_code m--js">
-            {props.js && <Code lang="javascript" code={props.js} />}
+            {
+                props.js && (
+                    <Code
+                        lang="javascript"
+                        code={props.js}
+                        title={props.jsFileName}
+                    />
+                )
+            }
         </div>
         <div class="o--tab_content o--playground_preview m--preview"></div>
     </div>
@@ -75,7 +102,6 @@ const props = Astro.props;
             }
 
             let grid = 1;
-            this.setAttribute("data-layout", "grid");
             this.setAttribute("data-tab-preview", "");
             if (html) {
                 this.setAttribute("data-tab-html", "");
@@ -91,6 +117,7 @@ const props = Astro.props;
             }
             this.setAttribute("data-grid", grid.toString());
             this.setAttribute("data-active_tab", "preview");
+            this.setAttribute("data-layout", "grid");
 
             const $btns =
                 this.querySelectorAll<HTMLButtonElement>(".o--tab_nav");
@@ -225,6 +252,9 @@ const props = Astro.props;
                 }
             }
         }
+        &:not([data-layout]) {
+            display: none;
+        }
     }
     .o--playground_code {
         :global(.expressive-code) {

src/consts.ts

@@ -2,5 +2,6 @@
 // You can import this data from anywhere in your site by using the `import` keyword.
 
 export const SITE_TITLE = "hyn";
-export const SITE_DESCRIPTION = "Welcome to my website!";
+export const SITE_SLOGAN = "Discover new perspective";
+export const SITE_DESCRIPTION = "Personal blog to explore fresh insights and elevate your tech skills daily with innovative articles and guidance";
 export const SITE_LINK_GITHUB = "https://github.com/nguyenhy";