Merge pull request #7 from patrick91/feature/twitter-name

Allow using name for tags (twitter)
patrick91 · Mar 13, 2024 · 261b1b4 · 261b1b4
2 parents 911b663 + 4fad121
commit 261b1b4
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 13 deletions.
diff --git a/packages/astro-meta-tags/package.json b/packages/astro-meta-tags/package.json
@@ -1,6 +1,6 @@
 {
     "name": "astro-meta-tags",
-    "version": "0.2.1",
+    "version": "0.2.2",
     "author": "Patrick Arminio",
     "repository": "github:patrick91/astro-meta-tags",
     "license": "MIT",

diff --git a/packages/astro-meta-tags/src/toolbar.ts b/packages/astro-meta-tags/src/toolbar.ts
@@ -10,19 +10,19 @@ const getWindowContent = () => {
     .querySelector("meta[name='description']")
     ?.getAttribute("content");
 
-  const getTagTuple = (tag: Element) =>
-    [tag.getAttribute("property"), tag.getAttribute("content")] as [
+  const getTagTuple = (tag: Element, attributeName: string = "property") =>
+    [tag.getAttribute(attributeName), tag.getAttribute("content")] as [
       string,
       string
     ];
 
   const ogMetaTags = Array.from(
     document.querySelectorAll("meta[property^='og:']")
-  ).map(getTagTuple);
+  ).map((tag) => getTagTuple(tag, "property"));
 
   const twitterMetaTags = Array.from(
-    document.querySelectorAll("meta[property^='twitter:']")
-  ).map(getTagTuple);
+    document.querySelectorAll("meta[name^='twitter:']")
+  ).map((tag) => getTagTuple(tag, "name"));
 
   const getSingleTagHtml = ([property, content]: [string, string]) => {
     let contentTag: HTMLElement | Text;
@@ -43,7 +43,7 @@ const getWindowContent = () => {
 
     tagHtml.append(propertyName, propertyValue);
 
-    return tagHtml
+    return tagHtml;
   };
 
   const getTagsHtml = (
@@ -62,7 +62,7 @@ const getWindowContent = () => {
     }
 
     const details = document.createElement("details");
-    
+
     const summary = document.createElement("summary");
     summary.textContent = title;
 

diff --git a/packages/demo/src/components/BaseHead.astro b/packages/demo/src/components/BaseHead.astro
@@ -40,8 +40,8 @@ const { title, description, image = '/blog-placeholder-1.jpg' } = Astro.props;
 <meta property="og:image" content={new URL(image, Astro.url)} />
 
 <!-- Twitter -->
-<meta property="twitter:card" content="summary_large_image" />
-<meta property="twitter:url" content={Astro.url} />
-<meta property="twitter:title" content={title} />
-<meta property="twitter:description" content={description} />
-<meta property="twitter:image" content={new URL(image, Astro.url)} />
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:url" content={Astro.url} />
+<meta name="twitter:title" content={title} />
+<meta name="twitter:description" content={description} />
+<meta name="twitter:image" content={new URL(image, Astro.url)} />