✨feat: add Utterances

src/components/Header.astro

@@ -12,11 +12,7 @@ import { SITE_TITLE } from '../consts';
 			<HeaderLink href="/notable/about">About</HeaderLink>
 		</div>
 		<div class="flex gap-4">
-			<a href="https://facebook.com/trantanloc016" target="_blank" class="text-gray-500 hover:text-gray-700 no-underline duration-200">
-				<span class="sr-only">Follow Tan Loc on Facebook</span>
-				<svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2.04c-5.5 0-10 4.49-10 10.02c0 5 3.66 9.15 8.44 9.9v-7H7.9v-2.9h2.54V9.85c0-2.51 1.49-3.89 3.78-3.89c1.09 0 2.23.19 2.23.19v2.47h-1.26c-1.24 0-1.63.77-1.63 1.56v1.88h2.78l-.45 2.9h-2.33v7a10 10 0 0 0 8.44-9.9c0-5.53-4.5-10.02-10-10.02"/></svg>
-			</a>
-			<a href="https://github.com/titieo" target="_blank" class="text-gray-500 hover:text-gray-700 no-underline duration-200">
+			<a href="https://github.com/titieo/notable" target="_blank" class="text-gray-500 hover:text-gray-700 no-underline duration-200">
 				<span class="sr-only">Go to Tan Loc's GitHub repo</span>
 				<svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"/></svg>
 			</a>

src/components/Utterances.astro

@@ -0,0 +1,21 @@
+<div id="utterances-container"></div>
+
+<script>
+  const script = document.createElement("script");
+  const container = document.querySelector("#utterances-container");
+const currentTheme = localStorage.getItem("theme");
+
+  Object.entries({
+    src: "https://utteranc.es/client.js",
+    repo: "titieo/notable",
+    "issue-term": "title",
+    label: "post comments",
+    // theme: "github-dark",
+    theme: currentTheme == "dark" ? "github-dark" : "github-light",
+    crossorigin: "anonymous",
+  }).forEach(([key, value]) => {
+    script.setAttribute(key, value);
+  });
+
+  container?.appendChild(script);
+</script>

src/content/blog/tinck.md

@@ -10,67 +10,86 @@ tags: ['Tin học']
 
 ![box plot](/notable/tinck-boxplot.png)
 
-- Median: trung bình của biểu đồ
+* Median: trung bình của biểu đồ
 
-- Mean: giá trị trung bình (max+min)/2
+* Mean: giá trị trung bình (max+min)/2
 
 ## Kiểm định
 
-Chi Square: 2 biến định tính (hạt lép/bth) 
+Chi Square: 2 biến định tính (hạt lép/bth)
 
 * H0: 2 biến độc lập - nhỏ hơn giá trị p-value
 
 * H1: 2 biến phụ thuộc - ngược lại
-
-
 
 T-test: 2 biến định lượng
 
-- 2 biến độc lập thì dùng T-test, ngược lại thì dùng t-test cặp
-
-- Phương sai bằng nhao thì equal (dùng F-test)
-
+* 2 biến độc lập thì dùng T-test, ngược lại thì dùng t-test cặp
 
+* Phương sai bằng nhao thì equal (dùng F-test)
 
 ## Phím tắt
 
-- **Trong PPT, để trình chiếu một slide tùy ý không phải slide đầu tiên, chọn phím nào trên bàn phím?**: Shift + F5
+* Trong PPT, để trình chiếu một slide tùy ý không phải slide đầu tiên, chọn phím nào trên bàn phím?: **Shift + F5**
 
-- **Trong Excel, để nhập các cột nội dung sau:**  
-  **Bước 1: Quét khối các ô có nội dụng giống nhau**  
-  **Bước 2: Nhập nội dung**  
-  **Bước 3: Nhấn tổ hợp phím** Ctrl + Enter
+* Trong Excel, để nhập các cột nội dung sau:
+  Bước 1: Quét khối các ô có nội dụng giống nhau
+  Bước 2: Nhập nội dung
+  Bước 3: Nhấn tổ hợp phím Ctrl + Enter
 
-- **MS Excel quy định hai kí tự đại diện (Wildcard) là gì?**: * và ?
+* MS Excel quy định hai kí tự đại diện (Wildcard) là gì?: *** và ?**
 
-- **Trong Camtasia 8, để quy định khoảng thời gian mặc định cho một phụ đề (Caption) thì làm cách nào?** Tools → Options
+* Trong Camtasia 8, để quy định khoảng thời gian mặc định cho một phụ đề (Caption) thì làm cách nào? **Tools → Options**
 
-- **Trong Word, để giãn khoảng cách giữa hai đoạn thì dùng chức năng nào?** Spacing
+* Trong Word, để giãn khoảng cách giữa hai đoạn thì dùng chức năng nào? **Spacing**
 
-- **Để ghi âm kèm ghi hình từ webcam, trong Camtasia 8 ta chọn chức năng nào?**
+* Để ghi âm kèm ghi hình từ webcam, trong Camtasia 8 ta chọn chức năng nào?
 
-  Tools → Record Camer
+  **Tools → Record Camer**
+
+* Trong Word, để chèn số thứ tự phụ chú cho hình thì chọn chức năng nào/ **References → Insert Caption***
+
+* Trong PPT, để tạo chú thích thì dùng chức năng nào? **Insert → Shapes**
+
+* Tín hiệu Digital có bao nhiêu giá trị biểu diễn? **2**
+
+* Nhìn từ phía thiết kế trên word, chúng ta nên chia cấu trúc tổng quát của bài báo cáo luận văn thành bao nhiêu section? **5**
 
-- **Trong Word, để chèn số thứ tự phụ chú cho hình thì chọn chức năng nào/** References → Insert Caption
+* Quy tắc làm 1 slide: **Nhiều slide, mỗi slide 1 ý**
 
-- **Trong PPT, để tạo chú thích thì dùng chức năng nào?** Insert → Shapes
+* Khi trình chiếu Presentation, bạn muốn vẽ trên slide: **Nhấp phải chuột trên Slide, chọn Pointer Options Pen, drag chuột để vẽ**
 
-- Trong Excel, để xuống dòng trong 1 ô (cell) chúng ta nhập xong nội dung thứ nhất và nhấn: **Ctrl + Enter**
+* Chức năng RSS (Really Simple Syndication) trong PubMed để làm gì? **Tạo ra một nguồn cấp dữ liệu của một tìm kiếm PubMed để hiển thị các kết quả mới, với các liên kết quay lại các trích dẫn trong PubMed**
 
-- Tín hiệu Digital có bao nhiêu giá trị biểu diễn? **2**
+* Trong Excel, để xuống dòng trong 1 ô (cell) chúng ta nhập xong nội dung thứ nhất và nhấn: **Alt + Enter**
 
-- Nhìn từ phía thiết kế trên word, chúng ta nên chia cấu trúc tổng quát của bài báo cáo luận văn thành bao nhiêu section? **5**
+* Trong word, để sao chép định dạng nhiều lần thì chọn lệnh nào? **Double click vào nút format painter**
 
-- Quy tắc làm 1 slide: **Nhiều slide, mỗi slide 1 ý**
+* Tìm chuỗi tìm kiếm thích hợp trên Pubmed với yêu cầu tìm các tài liệu của tạp chí The New England Journal of Medicine về phẫu thuật nội soi dạ dày(gastroscopy) **(The New England journal of medicine “[Journal] AND (gastroscopy[Title/Abstract]**
 
-- Khi trình chiếu Presentation, bạn muốn vẽ trên slide: **Nhấp phải chuột trên Slide, chọn Pointer Options Pen, drag chuột để vẽ**
+* Tìm chuỗi tìm kiếm thích hợp trên Pubmed với yêu cầu tìm các tài liệu về nguyên nhân của bệnh nha chu (Periodontal Diseases): **“Periodontal Diseases/etiology”[Majr]**
 
-- Chức năng RSS (Really Simple Syndication) trong PubMed để làm gì? **Tạo ra một nguồn cấp dữ liệu của một tìm kiếm PubMed để hiển thị các kết quả mới, với các liên kết quay lại các trích dẫn trong PubMed**
+* Một luận văn tốt nghiệp gồm hai phần chính. Anh chị hãy chọn cách để đánh số trang trong luận văn được mô tả giống trong hình: **Section Break, Next Page, Page Number**
 
-- Trong Excel, để xuống dòng trong 1 ô (cell) chúng ta nhập xong nội dung thứ nhất và nhấn: **Alt + Enter**
+* Trong Camtasia Studio, khi tạo chú thích(Add Caliouts) tại vị trí con trỏ hiện hành, chúng ta có thể chọn các nhóm nào sau đây: **...Sketch Motion**
 
-- Trong word, để sao chép định dạng nhiều lần thì chọn lệnh nào? **Double click vào nút format painter**
+* Để ghi âm kèm ghi hình từ webcam, trong Camtasia 8 ta chọn chức năng nào? **Tools -> Record Camera**
 
-- Tìm chuỗi tìm kiếm thích hợp trên Pubmed với yêu cầu tìm các tài liệu của tạp chí The New England Journal of Medicine về phẫu thuật nội soi dạ dày(gastroscopy) **(The New England journal of medicine “[Journal] AND (gastroscopy[Title/Abstract]**
+* Với yêu cầu tìm kiếm các tài liệu về ảnh hưởng của ô nhiễm không khí có liên quan đến giao thông đối với cao huyết áp, chúng ta nên sử dụng chức năng nào của Pubmed? **Advanced Search**
+
+* Cần tìm các bài báo nói về nguyên nhân của bệnh đái tháo đường, chúng ta sử dụng chức năng của Pubmed? **MESH**
+
+* Tóm tắt một bài báo cáo được soạn thảo bằng ngôn ngữ Tiếng Anh. Trong word, anh chị làm thế nào để biết được từ ngữ và cú pháp của văn bản có được soạn thảo đúng hay không **Review, Spelling & Grammar**
+
+* Mesh (medical subject headings) trong Pubmed để làm gì? **Phân tích chủ đề của y sinh học tại NLM**
+
+* Để ghi âm trong Camtasia 8 thì chọn chức năng nào? **Tools -> Audio**
+
+* Trong word, để chèn số thứ tự phụ chú cho hình thì chọn chức năng nào? **References -> Insert Caption**
+
+* Quan sát hình bên dưới, bạn thấy trong Navigation Pane có những dòng trống, tại sao?
+  **Có thể do định dạng của dòng trên quy định Style for following paragraph là heading**
+
+  ![](/notable/tinck-nav.png)
 
-- 
+* Trong PPT, để tạo chú thích thì dùng chức năng nào? **Insert Shapes**

src/layouts/BlogPost.astro

@@ -4,7 +4,7 @@ import BaseHead from '../components/BaseHead.astro';
 import Header from '../components/Header.astro';
 import Footer from '../components/Footer.astro';
 import FormattedDate from '../components/FormattedDate.astro';
-
+import Utterances from '../components/utterances.astro';
 type Props = CollectionEntry<'blog'>['data'];
 
 const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
@@ -24,9 +24,9 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 
 	<body style="background-image: url(/notable/bg.svg)" class="bg-repeat-y min-h-100rem text-blue-600">
 		<Header />
-		<main class="font-content mx-auto w-2/3 mt-12">
+		<main class="font-content mx-auto w-2/3 mt-12 mb-20">
 			<article class="tracking-wide">
-				<div class="prose-xl lg:prose-2xl prose-headings:font-heading prose-headings:text-red-400 tracking-normal">
+				<div class="prose-xl lg:prose-2xl prose-headings:font-heading prose-headings:text-red-400 tracking-normal prose-ul:list-disc">
 					<div class="leading-none text-center">
 
 						<h1 class="mb-2">{title}</h1>
@@ -46,6 +46,7 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 				</div>
 			</article>
 		</main>
+        <Utterances />
 		<Footer />
 	</body>
 </html>

src/pages/notes/index.astro

@@ -20,7 +20,7 @@ const posts = (await getCollection('blog')).sort(
 		<Header />
 		<main>
 			<section>
-				<ul class="mx-auto grid grid-cols-3 group group-first:col-span-3 p-5 text-center max-w-max gap-8">
+				<ul class="mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 p-5 text-center max-w-max gap-8">
 					{
 						posts.map((post) => (
 							<li class="rounded-lg bg-white border-black shadow-lg drop-shadow-md hover:shadow-xl hover:-translate-y-2 pb-4 duration-200 overflow-hidden max-w-none">