issue # -> date

components/index/cards/mailing-list.js

@@ -4,6 +4,7 @@ import { Box, Button, Card, Flex, Grid, Input, Link, Text } from "theme-ui";
 import BGImg from "../../background-image";
 import background from "../../../public/home/footer.png";
 import MailCard from "../../mail-card";
+import { format } from "date-fns";
 
 const markdownToHtml = require("@hackclub/markdown");
 
@@ -128,7 +129,13 @@ const MailingList = ({ html }) => {
               >
                 We'll send you an email no more than once a month, when we work
                 on something cool for you. Check out our{' '}
-                <Link href='https://workshops.hackclub.com/leader-newsletters/'>previous issues</Link>.
+                <Link
+                  href='https://workshops.hackclub.com/leader-newsletters/'
+                  target='_blank'
+                  rel='noopener norefferer'
+                >
+                  previous issues
+                </Link>.
               </Text>
             </Box>
             <Grid
@@ -196,11 +203,11 @@ const MailingList = ({ html }) => {
               width: '100%',
             }}
           >
-            {data.finalHtml.map((html, index) => (
+            {data.finalHtml.slice().reverse().map((html, index) => (
               <MailCard
                 issue={index + 1}
                 body={html}
-                date={data.names[index].split('-').join('/')}
+                date={format(new Date(data.names[index].split('-').join(', ')), "MMMM d, yyyy")}
                 link={data.names[index]}
                 key={index}
               />

components/mail-card.js

@@ -44,8 +44,8 @@ export default function MailCard({ body, issue, date, link }) {
             <Box sx={{ px: [3, 4] }}>
               <Box>
                 <Text>
-                  Newsletter #{issue}
-                  <Text sx={{ color: "#8492a6" }}>— {date}</Text>
+                  {date}
+                  <Text sx={{ color: "#8492a6" }}>— From Hack Club, to You</Text>
                 </Text>
                 <Text as="h2" sx={{ fontWeight: "normal" }}>
                   {body}

package.json

@@ -33,6 +33,7 @@
     "cookies-next": "^4.0.0",
     "country-list-js": "^3.1.7",
     "cursor-effects": "^1.0.12",
+    "date-fns": "^2.30.0",
     "devtools-detect": "^4.0.1",
     "form-data": "^4.0.0",
     "fuzzysort": "^2.0.4",