Fix the style of documentation tables

engali94 · Dec 17, 2019 · 534d5a1 · 534d5a1
1 parent c2a541d
commit 534d5a1
Show file tree

Hide file tree

Showing 9 changed files with 84 additions and 65 deletions.
diff --git a/assets/Avatar.png b/assets/Avatar.png
diff --git a/assets/tuist.png b/assets/tuist.png
diff --git a/website/markdown/docs/components/enum.jsx b/website/markdown/docs/components/enum.jsx
@@ -1,31 +1,41 @@
+/** @jsx jsx */
+import { jsx, Styled } from 'theme-ui'
+
 import React from 'react'
 import { Label, Table } from 'semantic-ui-react'
-import StyledCode from "./styled-code"
+import StyledCode from './styled-code'
 
 const EnumTable = ({ cases }) => {
+  const borderStyle = {
+    border: theme => `1px solid ${theme.colors.gray5}`,
+    borderCollapse: 'collapse',
+  }
+  const cellStyle = {
+    ...borderStyle,
+    p: 2,
+  }
   return (
-    <Table celled>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell>Case</Table.HeaderCell>
-          <Table.HeaderCell>Description</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
+    <table sx={{ ...borderStyle }}>
+      <thead>
+        <tr sx={{ bg: 'gray6' }}>
+          <th sx={{ ...cellStyle }}>Case</th>
+          <th sx={{ ...cellStyle }}>Description</th>
+        </tr>
+      </thead>
 
-      <Table.Body>
+      <tbody>
         {cases.map((prop, index) => {
           return (
-            <Table.Row warning={prop.deprecated} key={index}>
-              <Table.Cell>
-                {prop.deprecated && <Label ribbon>Deprecated</Label>}
-                <StyledCode>{prop.case}</StyledCode>
-              </Table.Cell>
-              <Table.Cell>{prop.description}</Table.Cell>
-            </Table.Row>
+            <tr key={index}>
+              <td sx={{ ...cellStyle }}>
+                <Styled.code>{prop.case}</Styled.code>
+              </td>
+              <td sx={{ ...cellStyle }}>{prop.description}</td>
+            </tr>
           )
         })}
-      </Table.Body>
-    </Table>
+      </tbody>
+    </table>
   )
 }
 

diff --git a/website/markdown/docs/components/message.jsx b/website/markdown/docs/components/message.jsx
@@ -19,7 +19,7 @@ const Message = ({ title, description, success, warning, info, error }) => {
     prefix = 'Information'
   }
   return (
-    <div sx={{ bg: 'gray6', display: 'flex', flexDirection: 'row', my: 2 }}>
+    <quote sx={{ bg: 'gray6', display: 'flex', flexDirection: 'row', my: 2 }}>
       <div sx={{ width: '10px', bg: color }} />
       <div sx={{ flex: 1, p: 3 }}>
         <div sx={{ fontWeight: 'heading', fontSize: 2 }}>
@@ -30,7 +30,7 @@ const Message = ({ title, description, success, warning, info, error }) => {
         </div>
         <ReactMarkdown source={description} />
       </div>
-    </div>
+    </quote>
   )
 }
 

diff --git a/website/markdown/docs/components/properties-table.jsx b/website/markdown/docs/components/properties-table.jsx
@@ -1,22 +1,33 @@
+/** @jsx jsx */
+import { jsx, Styled } from 'theme-ui'
+
 import React from 'react'
-import { Responsive, Label, Table } from 'semantic-ui-react'
-import StyledCode from "./styled-code"
-import ReactMarkdown from "react-markdown"
+import ReactMarkdown from 'react-markdown'
 
 const PropertiesTable = ({ properties }) => {
+  const borderStyle = {
+    border: theme => `1px solid ${theme.colors.gray5}`,
+    borderCollapse: 'collapse',
+  }
+  const cellStyle = {
+    ...borderStyle,
+    p: 2,
+  }
   return (
-    <Table celled>
-      <Responsive as={Table.Header} {...Responsive.onlyComputer}>
-        <Table.Row>
-          <Table.HeaderCell>Property</Table.HeaderCell>
-          <Table.HeaderCell>Description</Table.HeaderCell>
-          <Table.HeaderCell>Type</Table.HeaderCell>
-          <Table.HeaderCell>Optional</Table.HeaderCell>
-          <Table.HeaderCell>Default</Table.HeaderCell>
-        </Table.Row>
-      </Responsive>
+    <table
+      sx={{
+        ...borderStyle,
+      }}
+    >
+      <tr sx={{ bg: 'gray6', ...borderStyle }}>
+        <th sx={{ ...cellStyle }}>Property</th>
+        <th sx={{ ...cellStyle }}>Description</th>
+        <th sx={{ ...cellStyle }}>Type</th>
+        <th sx={{ ...cellStyle }}>Optional</th>
+        <th sx={{ ...cellStyle }}>Default</th>
+      </tr>
 
-      <Table.Body>
+      <tbody>
         {properties.map((prop, index) => {
           let type
           if (prop.typeLink) {
@@ -28,35 +39,25 @@ const PropertiesTable = ({ properties }) => {
           const optionalValue = prop.optional ? 'Yes' : 'No'
 
           return (
-            <Table.Row warning={prop.deprecated} key={index}>
-              <Table.Cell>
-                {prop.deprecated && <Label ribbon>Deprecated</Label>}
-                {prop.name}
-              </Table.Cell>
-              <Table.Cell><ReactMarkdown source={prop.description}/></Table.Cell>
-              <Table.Cell>
-                <Responsive as="b" {...Responsive.onlyMobile}>
-                  Type:{' '}
-                </Responsive>
-                <StyledCode>{type}</StyledCode>
-              </Table.Cell>
-              <Table.Cell>
-                <Responsive as="b" {...Responsive.onlyMobile}>
-                  Optional:{' '}
-                </Responsive>
-                {optionalValue}
-              </Table.Cell>
-              <Table.Cell>
-                <Responsive as="b" {...Responsive.onlyMobile}>
-                  Default:{' '}
-                </Responsive>
-                <StyledCode>{prop.default}</StyledCode>
-              </Table.Cell>
-            </Table.Row>
+            <tr key={index} sx={{ ...borderStyle }}>
+              <td sx={{ ...cellStyle }}>{prop.name}</td>
+              <td sx={{ ...cellStyle }}>
+                <ReactMarkdown source={prop.description} />
+              </td>
+              <td sx={{ ...cellStyle }}>
+                <Styled.code>{type}</Styled.code>
+              </td>
+              <td sx={{ ...cellStyle }}>{optionalValue}</td>
+              <td sx={{ ...cellStyle }}>
+                {prop.default != '' && (
+                  <Styled.code>{prop.default}</Styled.code>
+                )}
+              </td>
+            </tr>
           )
         })}
-      </Table.Body>
-    </Table>
+      </tbody>
+    </table>
   )
 }
 

diff --git a/website/markdown/posts/2019-12-18-version-1.0.0/post.mdx b/website/markdown/posts/2019-12-18-version-1.0.0/post.mdx
@@ -43,6 +43,8 @@ In this blog post,
 I’d like to dive into some important features that we bundled in this release,
 and I’ll spoil what will be our focus for version 2.0.
 
+> If you already have Tuist installed, run `tuist update` to get the latest version. Otherwise you can execute `bash <(curl -Ls https://install.tuist.io)` to install it.
+
 ## What’s new in 1.0.0
 
 ### Project description helpers
@@ -119,8 +121,6 @@ We believe that poor user experiences diminish the value of the software,
 and for that reason,
 **we pay attention to every detail of crafting Tuist**.
 
-> If you already have Tuist installed, run `tuist update` to get the latest version. Otherwise you can execute `bash <(curl -Ls https://install.tuist.io)` to install it.
-
 ## The journey towards 2.0
 
 So having achieved this important milestone, one might wonder **what’s next?**

diff --git a/website/src/components/meta.jsx b/website/src/components/meta.jsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import Helmet from 'react-helmet'
-import { useStaticQuery, graphql } from 'gatsby'
+import { useStaticQuery, graphql, withPrefix } from 'gatsby'
+import urljoin from 'url-join'
 
 function Meta({ description, lang, meta, keywords, title, author, slug }) {
   const { site } = useStaticQuery(
@@ -31,6 +32,13 @@ function Meta({ description, lang, meta, keywords, title, author, slug }) {
       <meta property="og:title" content={title} />
       <meta property="og:description" content={metaDescription} />
       <meta property="og:type" content="website" />
+      <meta
+        property="og:image"
+        content={urljoin(
+          site.siteMetadata.siteUrl,
+          withPrefix('squared-logo.png')
+        )}
+      />
 
       <meta name="twitter:card" content="summary" />
       <meta name="twitter:creator" content={site.siteMetadata.author} />

diff --git a/website/src/gatsby-plugin-theme-ui/index.js b/website/src/gatsby-plugin-theme-ui/index.js
@@ -106,7 +106,7 @@ const styles = {
     borderRadius: 2,
   },
   code: {
-    fontSize: 1,
+    fontSize: 0,
   },
   blockquote: {
     bg: 'muted',

diff --git a/website/static/squared-logo.png b/website/static/squared-logo.png