Start intro

src/components/CardContent.tsx

@@ -5,7 +5,7 @@ import ExpressionRunnerScrollAdjuster from 'src/components/ExpressionRunnerScrol
 export interface CardContentProps {
   children: React.ReactNode
   preview?: {
-    content: React.ReactNode
+    content?: React.ReactNode
     text: React.ReactNode
     afterText?: React.ReactNode
   }

src/components/EmojiSeparator.tsx

@@ -23,6 +23,7 @@ interface EmojiSeparatorProps {
   description?: React.ReactNode
   noBottomMargin: boolean
   noTopMargin: boolean
+  topDescription?: React.ReactNode
 }
 
 const fontSize = (size: EmojiSeparatorProps['size']) =>
@@ -63,6 +64,7 @@ const EmojiSeparator = ({
   alignCenter,
   cssOverrides,
   description,
+  topDescription,
   noBottomMargin,
   noTopMargin
 }: EmojiSeparatorProps) => (
@@ -81,6 +83,21 @@ const EmojiSeparator = ({
     ]}
   >
     <>
+      {topDescription && (
+        <div
+          css={[
+            css`
+              font-size: ${fontSizes(0.85)};
+              color: ${colors('grey700')};
+              padding-top: ${spaces(0.5)};
+              max-width: ${fitWithinMobileWidth};
+              margin: 0 auto;
+            `
+          ]}
+        >
+          {topDescription}
+        </div>
+      )}
       <span
         css={css`
           display: flex;

src/components/EpisodePageFooter.tsx

@@ -48,7 +48,7 @@ const EpisodePageFooter = () => {
         css={linkClasses}
       >
         <H args={{ name: 'aboutThisSite' }} />
-      </ExternalLink>
+      </ExternalLink>{' '}
       &middot;{' '}
       <ExternalLink href="https://github.com/twitter/twemoji" css={linkClasses}>
         Twemoji

src/components/H.tsx

@@ -35,7 +35,7 @@ import EmojiNumber from 'src/components/EmojiNumber'
 import TwitterEmbed from 'src/components/TwitterEmbed'
 import { shareId, shareVisible } from 'src/lib/twitter'
 import { dateString, dateSchemaString } from 'src/lib/date'
-import { githubRepo } from 'src/lib/meta'
+import { githubRepo, jpBaseUrl, enBaseUrl } from 'src/lib/meta'
 import CustomEmoji from 'src/components/CustomEmoji'
 import InlinePrioritiesLabel from 'src/components/InlinePrioritiesLabel'
 import { VariableNames } from 'src/types/VariableNames'
@@ -122,6 +122,7 @@ interface HProps {
     | {
         name: 'categoryNameColored'
         category: keyof typeof episodePrefixes
+        text?: React.ReactNode
       }
     | { name: 'stoppedForExplanation' }
     | { name: 'pageNotFound' }
@@ -203,7 +204,7 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
           color: ${prefixColors[args.category]};
         `}
       >
-        {episodePrefixes[args.category]}
+        {args.text || episodePrefixes[args.category]}
       </span>
     )
   }
@@ -1088,7 +1089,34 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
   }
   if (args.name === 'dateAndSource') {
     if (locale === 'en') {
-      return <>?</>
+      return (
+        <>
+          <P>
+            {args.includeAboutMe && (
+              <>
+                <Bold>Author:</Bold> <HighlightBold>Shu Uesugi</HighlightBold> (
+                <ExternalLink href="https://chibicode.com">
+                  Website
+                </ExternalLink>{' '}
+                &middot;{' '}
+                <ExternalLink href="https://twitter.com/chibicode">
+                  Twitter
+                </ExternalLink>
+                )
+                <br />
+              </>
+            )}
+            <Bold>Published on:</Bold>{' '}
+            <time dateTime={dateSchemaString}>{dateString}</time>
+            <br />
+            <Bold>Source code:</Bold>{' '}
+            <ExternalLink href={githubRepo}>Available on GitHub</ExternalLink>
+            <br />
+            <Bold>Japanese translation:</Bold>{' '}
+            <ExternalLink href={jpBaseUrl}>日本語版はこちら</ExternalLink>
+          </P>
+        </>
+      )
     } else {
       return (
         <>
@@ -1108,6 +1136,9 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
             <br />
             <Bold>ソースコード:</Bold>{' '}
             <ExternalLink href={githubRepo}>GitHubで公開中</ExternalLink>
+            <br />
+            <Bold>英語版:</Bold>{' '}
+            <ExternalLink href={enBaseUrl}>英語版はこちら</ExternalLink>
             {args.includeTwitter && (
               <>
                 <br />