denoland · lucacasonato · Sep 13, 2020 · Sep 10, 2020 · Sep 12, 2020 · Sep 12, 2020
diff --git a/components/Markdown.tsx b/components/Markdown.tsx
@@ -43,6 +43,7 @@ interface MarkdownProps {
   displayURL: string;
   sourceURL: string;
   baseURL: string;
+  className?: string;
 }
 
 function Markdown(props: MarkdownProps) {
@@ -98,7 +99,6 @@ function Markdown(props: MarkdownProps) {
           images.forEach((a) => {
             const original = a[1];
             const final = transformImageUri(props.sourceURL)(original);
-            console.log(original, final);
             html = html.replace(`src="${original}"`, `src="${final}"`);
           });
           const links: RegExpMatchArray[] = [
@@ -110,7 +110,6 @@ function Markdown(props: MarkdownProps) {
               props.displayURL,
               props.baseURL
             )(original);
-            console.log(original, final);
             html = html.replace(`href="${original}"`, `href="${final}"`);
           });
           return html;
@@ -138,7 +137,7 @@ function Markdown(props: MarkdownProps) {
     return (
       <div
         dangerouslySetInnerHTML={{ __html: raw }}
-        className="markdown py-8 px-4"
+        className={`markdown py-8 px-4 ${props.className ?? ""}`}
       />
     );
   } catch (err) {
@@ -151,6 +150,8 @@ function transformLinkUri(displayURL: string, baseURL: string) {
   return (uri: string) => {
     let href = uri;
 
+    if (uri.startsWith("#")) return uri;
+
     // If the URL is relative, it should be relative to the canonical URL of the file.
     if (isRelative(href)) {
       // https://github.com/denoland/deno_website2/issues/1047

diff --git a/components/markdown.css b/components/markdown.css
@@ -564,3 +564,13 @@ object {
   background-color: initial;
   border: 0;
 }
+
+.markdown-posts h1,
+.markdown-posts h2,
+.markdown-posts h3,
+.markdown-posts h4,
+.markdown-posts h5,
+.markdown-posts h6 {
+  line-height: 1;
+  margin-top: 40px;
+}
diff --git a/pages/posts/[post].tsx b/pages/posts/[post].tsx
@@ -40,7 +40,37 @@ const NewsPostPage = (props: Props) => {
   return (
     <>
       <Head>
-        <title>{props.meta.title} | Deno</title>
+        <title>{props.meta.title}</title>
+        <meta name="title" content={props.meta.title} />
+        <meta name="description" content={props.meta.snippet} />
+
+        <meta property="og:type" content="website" />
+        <meta
+          property="og:url"
+          content={`https://deno.land/posts/${props.meta.id}`}
+        />
+        <meta property="og:title" content={props.meta.title} />
+        <meta property="og:description" content={props.meta.snippet} />
+        {props.meta.images.length > 0 ? (
+          <meta
+            property="og:image"
+            content={`https://deno.land${props.meta.images[0].image}`}
+          />
+        ) : null}
+
+        <meta property="twitter:card" content="summary_large_image" />
+        <meta
+          property="twitter:url"
+          content={`https://deno.land/posts/${props.meta.id}`}
+        />
+        <meta property="twitter:title" content={props.meta.title} />
+        <meta property="twitter:description" content={props.meta.snippet} />
+        {props.meta.images.length > 0 ? (
+          <meta
+            property="twitter:image"
+            content={`https://deno.land${props.meta.images[0].image}`}
+          />
+        ) : null}
       </Head>
       <CookieBanner />
       <Header />
@@ -62,20 +92,20 @@ const NewsPostPage = (props: Props) => {
         <Link href="/posts">
           <a className="link">&lt;- Back to overview</a>
         </Link>
-
         <h1 className="tracking-tight font-bold text-5xl leading-10 mt-4 py-8">
           {props.meta.title}
         </h1>
         <p className="text-gray-500 mt-3 leading-tight">
           {format.format(date)}
         </p>
         <p className="text-gray-500 mt-3 leading-tight">{props.meta.author}</p>
-        <div className="mt-8">
+        <div className="mt-8 -mx-4">
           <Markdown
             source={props.markdown}
             displayURL={`https://deno.land/posts/${props.meta.id}`}
             sourceURL={`https://deno.land/posts/${props.meta.id}.md`}
             baseURL={`https://deno.land`}
+            className="markdown-posts"
           />
         </div>
       </div>

diff --git a/pages/posts/index.tsx b/pages/posts/index.tsx
@@ -48,40 +48,46 @@ const PostsIndexPage = (props: Props) => {
             </div>
           </div>
           <div className="mt-6 grid gap-16 lg:grid-cols-2 lg:col-gap-5 lg:row-gap-12">
-            {props.posts.map((post) => {
-              const date = new Date(post.publish_date);
-              const format = new Intl.DateTimeFormat(undefined, {
-                month: "long",
-                day: "numeric",
-                year: "numeric",
-              });
-              return (
-                <div key={post.id}>
-                  <p className="text-sm leading-5 text-gray-500">
-                    <time dateTime={post.publish_date}>
-                      {format.format(date)}
-                    </time>
-                  </p>
-                  <Link href="/posts/[post]" as={`/posts/${post.id}`}>
-                    <a className="block">
-                      <h3 className="mt-2 text-xl leading-7 font-semibold text-gray-900">
-                        {post.title}
-                      </h3>
-                      <p className="mt-3 text-base leading-6 text-gray-500">
-                        {post.snippet}
-                      </p>
-                    </a>
-                  </Link>
-                  <div className="mt-3">
+            {props.posts
+              .sort((a, b) => {
+                const publishDateA = new Date(a.publish_date);
+                const publishDateB = new Date(b.publish_date);
+                return publishDateA < publishDateB ? 1 : -1;
+              })
+              .map((post) => {
+                const date = new Date(post.publish_date);
+                const format = new Intl.DateTimeFormat(undefined, {
+                  month: "long",
+                  day: "numeric",
+                  year: "numeric",
+                });
+                return (
+                  <div key={post.id}>
+                    <p className="text-sm leading-5 text-gray-500">
+                      <time dateTime={post.publish_date}>
+                        {format.format(date)}
+                      </time>
+                    </p>
                     <Link href="/posts/[post]" as={`/posts/${post.id}`}>
-                      <a className="text-base leading-6 font-semibold text-blue-600 hover:text-blue-500 transition ease-in-out duration-150">
-                        Read post
+                      <a className="block">
+                        <h3 className="mt-2 text-xl leading-7 font-semibold text-gray-900">
+                          {post.title}
+                        </h3>
+                        <p className="mt-3 text-base leading-6 text-gray-500">
+                          {post.snippet}
+                        </p>
                       </a>
                     </Link>
+                    <div className="mt-3">
+                      <Link href="/posts/[post]" as={`/posts/${post.id}`}>
+                        <a className="text-base leading-6 font-semibold text-blue-600 hover:text-blue-500 transition ease-in-out duration-150">
+                          Read post
+                        </a>
+                      </Link>
+                    </div>
                   </div>
-                </div>
-              );
-            })}
+                );
+              })}
           </div>
         </div>
       </div>

diff --git a/public/posts/v1.4.json b/public/posts/v1.4.json
@@ -0,0 +1,14 @@
+{
+  "title": "Deno 1.4 Release Notes",
+  "author": "Bartek Iwańczuk, Ryan Dahl, and Luca Casonato",
+  "publish_date": "2020-09-13T15:00:00.000Z",
+  "images": [
+    {
+      "image": "/posts/v1.4/header.png",
+      "width": 1200,
+      "height": 1200,
+      "className": "hidden"
+    }
+  ],
+  "snippet": "Deno 1.4 adds support for the web standard WebSocket API, deno run --watch, and integrated test coverage. This is the largest feature release yet."
+}