From 4bd04e96938600d99d9ded9999c5062aae17a853 Mon Sep 17 00:00:00 2001
From: Juan Villela <13276705+fourjuaneight@users.noreply.github.com>
Date: Tue, 7 Jan 2025 14:01:56 -0500
Subject: [PATCH] chore: Update react and js templates with cleaner comments.

---
 templates/react/head.tsx       |  5 -----
 templates/react/images.tsx     | 11 ++++-------
 templates/react/layout.tsx     |  5 -----
 templates/scripts/clipboard.ts |  4 +++-
 templates/scripts/lazyload.ts  |  4 ++++
 5 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/templates/react/head.tsx b/templates/react/head.tsx
index 7f5782c..bfa6174 100644
--- a/templates/react/head.tsx
+++ b/templates/react/head.tsx
@@ -36,11 +36,6 @@ type Data = {
 
 /**
  * HTML Head
- * @component
- *
- * @param   {ILocation} location router location info
- *
- * @returns {React.FC}
  */
 const Head: React.FC<HeadProps> = ({ location }): React.FC => {
   const {
diff --git a/templates/react/images.tsx b/templates/react/images.tsx
index 392752d..4004ff2 100644
--- a/templates/react/images.tsx
+++ b/templates/react/images.tsx
@@ -26,14 +26,11 @@ interface ImageProps {
 /**
  * Static Image Query
  * Queries all images at a set max-width and allows filtering of specific image via props
- * @component
  *
- * @param   {string} alt      alt text
- * @param   {string} filename image relative filename
- * @param   {object} imgStyle img styles
- * @param   {object} style    wrapper container styles
- *
- * @returns {React.FC}        <Image filename={string} alt={string} style={object} imgStyle={object} />
+ * @param alt alt text
+ * @param filename image relative filename
+ * @param imgStyle img styles
+ * @param style wrapper container styles
  */
 const Image: React.FC<ImageProps> = ({
   alt,
diff --git a/templates/react/layout.tsx b/templates/react/layout.tsx
index a7c9f49..c468989 100644
--- a/templates/react/layout.tsx
+++ b/templates/react/layout.tsx
@@ -12,11 +12,6 @@ interface LayoutProps {
 
 /**
  * Main layout
- * @component
- *
- * @param   {LayoutProps} location router location info
- *
- * @returns {React.FC}             <Layout location={location} />
  */
 const Layout: React.FC<LayoutProps> = ({ children, location }): React.FC => (
   <>
diff --git a/templates/scripts/clipboard.ts b/templates/scripts/clipboard.ts
index b545d0d..aaec042 100644
--- a/templates/scripts/clipboard.ts
+++ b/templates/scripts/clipboard.ts
@@ -1,7 +1,9 @@
 /* eslint-disable quotes */
 const clip = document.querySelector('button.clip-btn');
 
-// create selection range for <code> element
+/**
+ * Create selection range for <code> element.
+ */
 clip.addEventListener('click', () => {
   const selection: Selection = window.getSelection();
   const range: Range = document.createRange();
diff --git a/templates/scripts/lazyload.ts b/templates/scripts/lazyload.ts
index fceae82..3903b3c 100644
--- a/templates/scripts/lazyload.ts
+++ b/templates/scripts/lazyload.ts
@@ -2,6 +2,9 @@ const imgs: NodeListOf<HTMLImageElement> = document.querySelectorAll(
   'img[data-lazy="true"]'
 );
 
+/**
+ * IntersectionObserver API
+ */
 let observer = new IntersectionObserver((entries, self) => {
   entries.forEach(entry => {
     if (entry.isIntersecting) {
@@ -15,6 +18,7 @@ let observer = new IntersectionObserver((entries, self) => {
   });
 });
 
+// Observe all images with `data-lazy` attribute
 if (imgs.length > 0) {
   imgs.forEach(img => {
     observer.observe(img);