update

Author: CodeWithSushil

assets/css/style.css

@@ -1,33 +1,13 @@
 *{
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body{
-  font-family:'Inter',sans-serif;
-  background:#0f1720;
-  color:#e6eef8;
-  line-height:1.6;
-}
-
-.wrap{
-  max-width:1000px;
-  margin:32px auto;
-  padding:20px;
-}
-
-h1{
-  text-align:center;
-  margin-bottom:32px;
-}
-
-.articles-grid{
-  display:grid;
-  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
-gap:20px;
+  margin:0;
+  padding:0;
+  box-sizing:border-box;
 }
 
+body{margin:0;font-family:'Inter',sans-serif;background:#0f1720;color:#e6eef8;line-height:1.6;}
+.wrap{max-width:1000px;margin:32px auto;padding:20px;}
+h1{text-align:center;margin-bottom:32px;}
+.articles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;}
 .article-card{background:rgba(255,255,255,0.02);border-radius:14px;padding:20px;border:1px solid rgba(255,255,255,0.03);cursor:pointer;transition:0.2s;}
 .article-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(0,0,0,0.3);}
 .article-card h2{margin-top:0;color:#7c5cff;}

assets/js/main.js

@@ -1,6 +1,6 @@
 // --- GitHub Config ---
 const GITHUB_USER = 'codebysushil';      
-const GITHUB_REPO = "codebysushil.github.io";    
+const GITHUB_REPO = 'codebysushil.github.io';    
 const ARTICLES_PATH = 'articles';         
 const BRANCH = 'main';                    
 
@@ -21,13 +21,6 @@ function parseFrontMatter(md){
 }
 function formatDate(iso){try{const d=new Date(iso);return isNaN(d)?iso:d.toLocaleDateString(undefined,{year:'numeric',month:'short',day:'numeric'});}catch(e){return iso}}
 function estimateReadTime(text){const words=text.trim().split(/\s+/).length;return Math.max(1,Math.round(words/200))+' min read'}
-async function incAndGetViews(key){
-  try{
-    const res=await fetch(`https://api.countapi.xyz/hit/${GITHUB_USER}-${GITHUB_REPO}/${key}`);
-    const json=await res.json();
-    return json.value||0;
-  }catch(e){return '—'}
-}
 
 // --- DOM Elements ---
 const grid=document.getElementById('articles-grid');
@@ -85,7 +78,6 @@ let currentIndex=0;     // current article in modal
           <div class="meta">By ${article.author} | ${article.date}</div>
           <div class="tags">${article.tags}</div>
         `;
-
         card.addEventListener('click',()=>openModal(articlesData.indexOf(article)));
         grid.appendChild(card);
 
@@ -96,18 +88,49 @@ let currentIndex=0;     // current article in modal
 
 // --- Modal functions ---
 async function openModal(index){
-  currentIndex=index;
-  const article=articlesData[index];
-  modalTitle.textContent=article.title;
-  modalAuthor.textContent='By '+article.author;
-  modalDate.textContent=article.date;
-  modalReadtime.textContent=estimateReadTime(article.content);
-  modalTags.textContent=article.tags;
-  if(article.cover){modalCover.src=article.cover; modalCover.style.display='block';} else modalCover.style.display='none';
-  articleContent.innerHTML=marked.parse(article.content);
+  currentIndex = index;
+  const article = articlesData[index];
+
+  // --- Update modal content ---
+  modalTitle.textContent = article.title;
+  modalAuthor.textContent = 'By ' + article.author;
+  modalDate.textContent = article.date;
+  modalReadtime.textContent = estimateReadTime(article.content);
+  modalTags.textContent = article.tags;
+
+  if(article.cover){
+    modalCover.src = article.cover;
+    modalCover.style.display = 'block';
+  } else {
+    modalCover.style.display = 'none';
+  }
+
+  articleContent.innerHTML = marked.parse(article.content);
   Prism.highlightAll();
-  modalViews.textContent='Views: ' + await incAndGetViews(article.fileName.replace(/\.[^/.]+$/,""));
-  modal.style.display='flex';
+
+  // --- GA4 Event Tracking ---
+  if (typeof gtag === 'function') {
+    gtag('event', 'view_article', {
+      article_name: article.title,
+      article_file: article.fileName
+    });
+  }
+
+  // --- Local view counter ---
+  const storageKey = 'views_' + article.fileName;
+  let views = parseInt(localStorage.getItem(storageKey)) || 0;
+  views++;
+  localStorage.setItem(storageKey, views);
+  modalViews.textContent = 'Views (you): ' + views;
+
+  // --- Update page title & meta description ---
+  document.title = article.title + " | Code By Sushil";
+  const metaDesc = document.querySelector('meta[name="description"]');
+  if(metaDesc){
+    metaDesc.setAttribute('content', article.description || article.title);
+  }
+
+  modal.style.display = 'flex';
 }
 
 // Next / Previous

index.html

@@ -4,13 +4,25 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <title>Code By Sushil | Articles</title>
+<meta name="description" content="Code By Sushil or Code With Sushil aka Sushil Kumar">
 
+<!-- Google Fonts & Prism -->
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
 <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css" rel="stylesheet">
+
+<!-- GA4 -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
+<script>
+window.dataLayer = window.dataLayer || [];
+function gtag(){dataLayer.push(arguments);}
+gtag('js', new Date());
+gtag('config', 'G-XXXXXXXXXX'); // <-- Replace with your GA4 Measurement ID
+</script>
 <link rel="stylesheet" href="./assets/css/style.css"/>
 </head>
 <body>
-<div class="wrap">
+
+  <div class="wrap">
 <h1>Articles</h1>
 <div class="articles-grid" id="articles-grid"></div>
 </div>