Links in markdown headings, corrected date

src/components/Icon.astro

@@ -10,7 +10,7 @@ const { code } = Astro.props;
 
 <span class="icon">{code}</span>
 
-<style lang="less">
+<style lang="less" is:global>
     @font-face {
         font-family: 'Line Awesome Regular';
         font-style: normal;

src/pages/blog/[slug].astro

@@ -1,6 +1,5 @@
 ---
 import BlogLayout from "../../layouts/BlogLayout.astro";
-import Icon from "../../components/Icon.astro";
 
 import { getCollection } from "astro:content";
 
@@ -44,15 +43,16 @@ const description = post.body
     .trim() + '\u2026';  // 2026 = ellipsis
 
 let dateStr = slug.split("-", 1)[0];
-let date: string | undefined;
+let date: Date | undefined;
 if (isNaN(Number(dateStr))) {
     dateStr = undefined;
 }
 else {
-    date =
+    date = new Date(
         `${dateStr.slice(0,4)}-` +
         `${dateStr.slice(4,6)}-` +
-        `${dateStr.slice(6,8)}`;
+        `${dateStr.slice(6,8)}`
+    )
 }
 
 const image = (post.body.match(/(?:\s|^)!\[.*\]\((.*?)\)/) || [])[1];
@@ -64,20 +64,17 @@ const image = (post.body.match(/(?:\s|^)!\[.*\]\((.*?)\)/) || [])[1];
         <meta property="og:title" content={title} />
         <meta property="og:description" content={description} />
         <meta property="og:image" content={image} />
-        <meta property="article:published_time" content={date} />
+        <meta property="article:published_time" content={date.toISOString()} />
         <meta property="article:author" content="DarkCat09" />
         <meta property="twitter:card" content="summary" />
         <meta property="twitter:title" content={title} />
         <meta property="twitter:description" content={description} />
         <meta property="twitter:image" content={image} />
     </Fragment>
-    <span id="link-icon" style="display: none;">
-        <Icon code="&#xf0c1;" />
-    </span>
     <header>
         <h1>{title}</h1>
         <address>
-            <time datetime={date}>{date}</time>,
+            <time datetime={date.toISOString()}>{date.toLocaleDateString()}</time>,
             <a href="https://t.me/dcat09" rel="author">DarkCat09</a>
         </address>
     </header>
@@ -97,6 +94,16 @@ const image = (post.body.match(/(?:\s|^)!\[.*\]\((.*?)\)/) || [])[1];
 
     h1, h2, h3, h4, h5, h6 {
         margin: 0;
+
+        span.icon::before {
+            content: "\f0c1";
+            font-size: 1.1rem;
+            display: none;
+        }
+
+        &:hover span.icon::before {
+            display: inline-block;
+        }
     }
 
     .heading-link {
@@ -156,16 +163,3 @@ const image = (post.body.match(/(?:\s|^)!\[.*\]\((.*?)\)/) || [])[1];
         }
     }
 </style>
-
-<script>
-    const linkIcon = document.getElementById("link-icon").innerHTML || "";
-    const hs = document.querySelectorAll("article h1,h2,h3");
-
-    for (let h of hs) {
-        const link = document.createElement("a");
-        link.classList.add("heading-link");
-        link.innerHTML = linkIcon;
-        link.href = "#" + h.id;
-        h.append(link);
-    }
-</script>