Style changes (#26)

* Style tweaks, move homepage to /archive * Redirect / to latest post * Fix divider spacing * Fix DOM layout * Use `gatsby-remark-embedder` * Better place for attribution * Excerpts are plain-text * Fix date formatting on archive * Move /archive back to / * target=_blank * Make yarn pin deps by default * Pin deps, remove now plugin * Class → Function components * Name Queries * Fix title for index page * Fix font stack, apparently * Add license, remove link to contributors * Update src/components/layout.js Co-Authored-By: Lipis <[email protected]> * format Co-authored-by: Lipis <[email protected]>
excalidraw · Mar 22, 2020 · 09b7f1e · 09b7f1e · vercel · Mar 22, 2020
1 parent b2ea91c
commit 09b7f1e
Show file tree

Hide file tree

Showing 13 changed files with 388 additions and 198 deletions.
diff --git a/.yarnrc b/.yarnrc
@@ -0,0 +1 @@
+--add.exact true
diff --git a/content/blog/reflections-on-excalidraw/index.md b/content/blog/reflections-on-excalidraw/index.md
@@ -1,6 +1,7 @@
 ---
 title: Reflections on Excalidraw
 date: 2020-01-15
+note: 'This post appeared first on <a href="https://blog.vjeux.com/2020/uncategorized/reflections-on-excalidraw.html">Vjeux’s blog</a>.'
 ---
 
 On January 1st I started building a little tool that lets you create diagrams that look like they are hand-written. That whole project exploded and in two weeks it got 12k unique active users, 1.5k stars on GitHub and 26 contributors on GitHub (who produced real code, we don't have any docs). If you want to play with it, go to [excalidraw.com](https://excalidraw.com/).
@@ -35,7 +36,7 @@ So when excalidraw came out, there was a clear value proposition and I knew it w
 
 The first thing was to get people excited! I'm fortunate to have a sizable audience on Twitter so I used it by posting a bunch of videos of the progress of building the first version of the tool.
 
-<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Since <a href="https://t.co/ItXQrfkQFN">https://t.co/ItXQrfkQFN</a> removed the squiggly boxes and arrow, I&#39;m having fun rebuilding one with codesandbox, rough and React hooks. Making a lot of progress in a few hours! <a href="https://t.co/GLk0f8MX6K">https://t.co/GLk0f8MX6K</a> <a href="https://t.co/D9bKUbnxIJ">pic.twitter.com/D9bKUbnxIJ</a></p>&mdash; vjeux ✪ (@Vjeux) <a href="https://twitter.com/Vjeux/status/1212503324982792193?ref_src=twsrc%5Etfw">January 1, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+https://twitter.com/Vjeux/status/1212503324982792193
 
 ## Convert Attention to Action
 

diff --git a/gatsby-browser.js b/gatsby-browser.js
@@ -1,4 +1,4 @@
 // custom typefaces
 import "typeface-montserrat";
 import "typeface-merriweather";
-require("prismjs/themes/prism-solarizedlight.css");
+import "./src/styles.css";
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -61,6 +61,7 @@ module.exports = {
           "gatsby-remark-prismjs",
           "gatsby-remark-copy-linked-files",
           "gatsby-remark-smartypants",
+          "gatsby-remark-embedder",
         ],
       },
     },
@@ -93,5 +94,6 @@ module.exports = {
         pathToConfigModule: "src/utils/typography",
       },
     },
+    "gatsby-plugin-twitter",
   ],
 };
diff --git a/package.json b/package.json
@@ -9,8 +9,10 @@
     "gatsby-plugin-offline": "3.1.0",
     "gatsby-plugin-react-helmet": "3.2.0",
     "gatsby-plugin-sharp": "2.5.1",
+    "gatsby-plugin-twitter": "2.2.0",
     "gatsby-plugin-typography": "2.4.0",
     "gatsby-remark-copy-linked-files": "2.2.0",
+    "gatsby-remark-embedder": "1.16.0",
     "gatsby-remark-images": "3.2.0",
     "gatsby-remark-prismjs": "3.4.0",
     "gatsby-remark-responsive-iframe": "2.3.0",

diff --git a/src/components/layout.js b/src/components/layout.js
@@ -1,83 +1,93 @@
 import React from "react";
 import { Link } from "gatsby";
 
+import logoPath from "../../content/assets/logo.png";
+
 import { rhythm, scale } from "../utils/typography";
 
-class Layout extends React.Component {
-  render() {
-    const { location, title, children } = this.props;
-    const rootPath = `${__PATH_PREFIX__}/`;
-    let header;
-    if (location.pathname === rootPath) {
-      header = (
-        <h1
-          style={{
-            ...scale(1.2),
-            marginBottom: rhythm(1.5),
-            marginTop: 0,
-          }}
-        >
-          <Link
-            style={{
-              boxShadow: `none`,
-              textDecoration: `none`,
-              color: `inherit`,
-            }}
-            to={`/`}
-          >
-            {title}
-          </Link>
-        </h1>
-      );
-    } else {
-      header = (
-        <h3
-          style={{
-            fontFamily: `Montserrat, sans-serif`,
-            marginTop: 0,
-          }}
-        >
-          <Link
+function Layout({ location, title, children }) {
+  const rootPath = `${__PATH_PREFIX__}/`;
+  const logo = (
+    <img
+      src={logoPath}
+      alt=""
+      style={{
+        height: rhythm(1),
+        verticalAlign: "middle",
+        background: "white",
+        padding: `0 ${rhythm(0.1)}`,
+      }}
+    />
+  );
+
+  return (
+    <div
+      style={{
+        marginLeft: `auto`,
+        marginRight: `auto`,
+        maxWidth: rhythm(26),
+        padding: `${rhythm(1.5)} ${rhythm(3 / 4)}`,
+      }}
+    >
+      <header>
+        <p style={{ fontFamily: "var(--ui-font)" }}>
+          {location.pathname === rootPath ? (
+            <a
+              href="https://excalidraw.com"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {logo}Open Excalidraw
+            </a>
+          ) : (
+            <>
+              <span style={{ float: "right" }}>
+                <a
+                  href="https://excalidraw.com"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Open Excalidraw{logo}
+                </a>
+              </span>
+              <Link to="/">All posts</Link>
+            </>
+          )}
+          <span style={{ clear: "both" }} />
+        </p>
+        {location.pathname === rootPath ? (
+          <h1
             style={{
-              boxShadow: `none`,
-              textDecoration: `none`,
-              color: `inherit`,
+              ...scale(1.2),
+              marginTop: 0,
             }}
-            to={`/`}
           >
             {title}
-          </Link>
-        </h3>
-      );
-    }
-    return (
-      <div
+          </h1>
+        ) : null}
+      </header>
+      <main>{children}</main>
+      <footer
         style={{
-          marginLeft: `auto`,
-          marginRight: `auto`,
-          maxWidth: rhythm(26),
-          padding: `${rhythm(1.5)} ${rhythm(3 / 4)}`,
+          textAlign: "center",
+          padding: `${rhythm(2)} 0`,
+          fontFamily: "var(--ui-font)",
         }}
       >
-        <header>{header}</header>
-        <main>{children}</main>
-        <footer
-          style={{
-            textAlign: "center",
-            padding: `${rhythm(2)} 0`,
-          }}
-        >
-          © {new Date().getFullYear()}
-          {" – "}
-          <a href="https://twitter.com/excalidraw">Twitter</a>
-          {" – "}
-          <a href="https://github.com/excalidraw">GitHub</a>
-          {" – "}
-          <a href="https://excalidraw.com">Excalidraw</a>
-        </footer>
-      </div>
-    );
-  }
+        © {new Date().getFullYear()} Excalidraw Blog contributors
+        {" • "}
+        <a href="https://github.com/excalidraw/excalidraw-blog/blob/master/LICENSE">
+          MIT Licensed
+        </a>
+        {" • "}
+        <a href="https://twitter.com/excalidraw">Twitter</a>
+        {" • "}
+        <a href="https://github.com/excalidraw/excalidraw-blog">View source</a>
+        {" • "}
+        <Link to="/">All posts</Link>
+      </footer>
+    </div>
+  );
 }
 
 export default Layout;
diff --git a/src/components/seo.js b/src/components/seo.js
@@ -13,7 +13,7 @@ import { useStaticQuery, graphql } from "gatsby";
 function SEO({ description, lang, meta, title }) {
   const { site } = useStaticQuery(
     graphql`
-      query {
+      query SEO {
         site {
           siteMetadata {
             title

diff --git a/src/pages/404.js b/src/pages/404.js
@@ -4,25 +4,22 @@ import { graphql } from "gatsby";
 import Layout from "../components/layout";
 import SEO from "../components/seo";
 
-class NotFoundPage extends React.Component {
-  render() {
-    const { data } = this.props;
-    const siteTitle = data.site.siteMetadata.title;
+function NotFoundPage({ data, location }) {
+  const siteTitle = data.site.siteMetadata.title;
 
-    return (
-      <Layout location={this.props.location} title={siteTitle}>
-        <SEO title="404: Not Found" />
-        <h1>Not Found</h1>
-        <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
-      </Layout>
-    );
-  }
+  return (
+    <Layout location={location} title={siteTitle}>
+      <SEO title="404: Not Found" />
+      <h1>Not Found</h1>
+      <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
+    </Layout>
+  );
 }
 
 export default NotFoundPage;
 
 export const pageQuery = graphql`
-  query {
+  query NotFoundPage {
     site {
       siteMetadata {
         title

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -5,56 +5,42 @@ import Layout from "../components/layout";
 import SEO from "../components/seo";
 import { rhythm } from "../utils/typography";
 
-class BlogIndex extends React.Component {
-  render() {
-    const { data } = this.props;
-    const posts = data.allMarkdownRemark.edges;
+function BlogIndex({ data, location }) {
+  const posts = data.allMarkdownRemark.edges;
+  const title = data.site.siteMetadata.title;
 
-    return (
-      <Layout
-        location={this.props.location}
-        title={data.site.siteMetadata.title}
-      >
-        <SEO title="News" />
-        <p
-          style={{
-            fontStyle: "italic",
-          }}
-        >
-          {data.site.siteMetadata.description}
-        </p>
-        {posts.map(({ node }) => {
-          const title = node.frontmatter.title || node.fields.slug;
-          return (
-            <div key={node.fields.slug}>
-              <h3
-                style={{
-                  marginBottom: rhythm(1 / 4),
-                }}
-              >
-                <Link style={{ boxShadow: `none` }} to={node.fields.slug}>
-                  {title}
-                </Link>
-              </h3>
-              <small>{node.frontmatter.date}</small>
-              <p
-                style={{ color: "#868e96", fontSize: "0.9em" }}
-                dangerouslySetInnerHTML={{
-                  __html: node.excerpt,
-                }}
-              />
-            </div>
-          );
-        })}
-      </Layout>
-    );
-  }
+  return (
+    <Layout location={location} title={title}>
+      <SEO title="All posts" />
+      {posts.map(({ node }) => {
+        const title = node.frontmatter.title || node.fields.slug;
+        return (
+          <div key={node.fields.slug}>
+            <h3
+              style={{
+                marginBottom: rhythm(1 / 4),
+              }}
+            >
+              <Link style={{ boxShadow: `none` }} to={node.fields.slug}>
+                {title}
+              </Link>
+            </h3>
+            <p>
+              <strong>{node.frontmatter.date}</strong>
+              {" — "}
+              <span style={{ opacity: 0.75 }}>{node.excerpt}</span>
+            </p>
+          </div>
+        );
+      })}
+    </Layout>
+  );
 }
 
 export default BlogIndex;
 
 export const pageQuery = graphql`
-  query {
+  query BlogIndex {
     site {
       siteMetadata {
         title