formatting and layout
This commit is contained in:
		@@ -116,8 +116,6 @@ const { post, nextPost, prevPost } = Astro.props;
 | 
			
		||||
</BlogPost>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
  // Removing TOC-related functions
 | 
			
		||||
 | 
			
		||||
  // Add copy buttons to code blocks
 | 
			
		||||
  function initializeCodeCopyButtons() {
 | 
			
		||||
    const codeBlocks = document.querySelectorAll('pre');
 | 
			
		||||
@@ -185,7 +183,6 @@ const { post, nextPost, prevPost } = Astro.props;
 | 
			
		||||
 | 
			
		||||
  // Main initialization function
 | 
			
		||||
  function initializeBlogPost() {
 | 
			
		||||
    // Initialize remaining components
 | 
			
		||||
    initializeCodeCopyButtons();
 | 
			
		||||
 | 
			
		||||
    // Scroll to hash if present in URL
 | 
			
		||||
@@ -207,8 +204,6 @@ const { post, nextPost, prevPost } = Astro.props;
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style>
 | 
			
		||||
  /* Removing TOC-related styles */
 | 
			
		||||
 | 
			
		||||
  /* Language badge styling */
 | 
			
		||||
  .language-badge {
 | 
			
		||||
    font-family:
 | 
			
		||||
 
 | 
			
		||||
@@ -22,19 +22,11 @@ const postsByYear = sortedPosts.reduce((acc, post) => {
 | 
			
		||||
}, {});
 | 
			
		||||
 | 
			
		||||
const years = Object.keys(postsByYear).sort((a, b) => b - a);
 | 
			
		||||
 | 
			
		||||
// Get total post count
 | 
			
		||||
const totalPosts = sortedPosts.length;
 | 
			
		||||
 | 
			
		||||
// Get unique tags for search suggestions
 | 
			
		||||
const allTags = [...new Set(sortedPosts.flatMap((post) => post.tags || []))];
 | 
			
		||||
---
 | 
			
		||||
 | 
			
		||||
<BaseLayout title="Blog">
 | 
			
		||||
  <div class="mx-auto w-full max-w-6xl px-4 py-10 sm:px-6 sm:py-16">
 | 
			
		||||
    <!-- Header with search  -->
 | 
			
		||||
    <div class="relative mb-12 sm:mb-20">
 | 
			
		||||
      <!-- Decorative elements -->
 | 
			
		||||
      <div
 | 
			
		||||
        class="animate-blob absolute -top-10 -left-10 h-48 w-48 rounded-full bg-zinc-100 opacity-30 blur-3xl sm:-top-20 sm:-left-20 sm:h-72 sm:w-72 dark:bg-zinc-800/30"
 | 
			
		||||
      >
 | 
			
		||||
@@ -124,7 +116,7 @@ const allTags = [...new Set(sortedPosts.flatMap((post) => post.tags || []))];
 | 
			
		||||
        )
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      <!-- Improved sidebar for mobile -->
 | 
			
		||||
      <!-- Sidebar for mobile -->
 | 
			
		||||
      <div class="relative md:col-span-3">
 | 
			
		||||
        <div class="mb-8 space-y-4 md:sticky md:top-24 md:mb-0">
 | 
			
		||||
          <h3
 | 
			
		||||
@@ -156,7 +148,7 @@ const allTags = [...new Set(sortedPosts.flatMap((post) => post.tags || []))];
 | 
			
		||||
        </div>
 | 
			
		||||
      </div>
 | 
			
		||||
 | 
			
		||||
      <!-- Improved post grid for mobile -->
 | 
			
		||||
      <!-- Post grid for mobile -->
 | 
			
		||||
      <div class="md:col-span-9">
 | 
			
		||||
        {
 | 
			
		||||
          years.map((year) => (
 | 
			
		||||
@@ -168,7 +160,7 @@ const allTags = [...new Set(sortedPosts.flatMap((post) => post.tags || []))];
 | 
			
		||||
              <div
 | 
			
		||||
                class={`grid grid-cols-1 ${postsByYear[year].length >= 2 ? 'md:grid-cols-2' : 'md:grid-cols-1'} gap-8 sm:gap-12`}
 | 
			
		||||
              >
 | 
			
		||||
                {postsByYear[year].map((post, index) => (
 | 
			
		||||
                {postsByYear[year].map((post) => (
 | 
			
		||||
                  <article class="group relative mx-auto flex h-full w-full max-w-sm flex-col sm:max-w-md md:mx-0">
 | 
			
		||||
                    {post.image && (
 | 
			
		||||
                      <div class="mb-4 h-48 overflow-hidden rounded-lg sm:h-56">
 | 
			
		||||
@@ -303,7 +295,7 @@ const allTags = [...new Set(sortedPosts.flatMap((post) => post.tags || []))];
 | 
			
		||||
    overflow: hidden;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  /* Improved touch targets for mobile */
 | 
			
		||||
  /* Touch targets for mobile */
 | 
			
		||||
  @media (max-width: 640px) {
 | 
			
		||||
    a,
 | 
			
		||||
    button {
 | 
			
		||||
@@ -315,7 +307,6 @@ const allTags = [...new Set(sortedPosts.flatMap((post) => post.tags || []))];
 | 
			
		||||
</style>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
  // Script không thay đổi - giữ nguyên chức năng
 | 
			
		||||
  document.addEventListener('DOMContentLoaded', () => {
 | 
			
		||||
    const backToTopButton = document.getElementById('back-to-top');
 | 
			
		||||
 | 
			
		||||
@@ -341,7 +332,7 @@ const allTags = [...new Set(sortedPosts.flatMap((post) => post.tags || []))];
 | 
			
		||||
 | 
			
		||||
      // Check scroll position
 | 
			
		||||
      window.addEventListener('scroll', toggleBackToTopButton);
 | 
			
		||||
      toggleBackToTopButton(); // Initial check
 | 
			
		||||
      toggleBackToTopButton();
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    // Add smooth scrolling to year links
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user