From 1be1940e032b81256031f0bc6b14cdcd35dc7a07 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Sat, 14 Nov 2020 14:01:52 -0800
Subject: [PATCH] Use readme as description for skin page

---
 src/Head.js | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/Head.js b/src/Head.js
index 8bd888df..5d817045 100644
--- a/src/Head.js
+++ b/src/Head.js
@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { connect } from "react-redux";
+import { connect, useSelector } from "react-redux";
 import { Helmet } from "react-helmet";
 import * as Selectors from "./redux/selectors";
 import { SCREENSHOT_WIDTH, SCREENSHOT_HEIGHT } from "./constants";
@@ -32,6 +32,11 @@ function Head({ url: relativeUrl, pageTitle, previewImageUrl }) {
       node.parentNode.removeChild(node);
     });
   }, []);
+
+  const focusedSkinFile = useSelector(Selectors.getFocusedSkinFile);
+
+  let readme = focusedSkinFile?.content?.slice(0, 300);
+  const description = readme || DESCRIPTION;
   const pageUrl = `https://skins.webamp.org${relativeUrl}`;
   return (
     <Helmet canUseDOM={true}>
@@ -42,18 +47,18 @@ function Head({ url: relativeUrl, pageTitle, previewImageUrl }) {
       />
       <meta name="theme-color" content="#000000" />
       <title>{pageTitle}</title>
-      <meta name="description" content={DESCRIPTION} />
+      <meta name="description" content={description} />
       <link rel="canonical" href={pageUrl} />
       <meta property="og:url" content={pageUrl} />
       <meta property="og:title" content={pageTitle} />
-      <meta property="og:description" content={DESCRIPTION} />
+      <meta property="og:description" content={description} />
       <meta property="og:type" content="website" />
       <meta property="og:site-name" content="Winamp Skin Museum" />
 
       <meta name="twitter:site" content="@winampskins" />
       <meta name="twitter:creator" content="@captbaritone" />
       <meta name="twitter:title" content={pageTitle} />
-      <meta name="twitter:description" content={DESCRIPTION} />
+      <meta name="twitter:description" content={description} />
 
       {previewImageUrl ? (
         <Image