refactoring tslint rutles, adding tslint cmd

gehtmaguad · Apr 3, 2019 · 3e716cf · 3e716cf
1 parent a91b049
commit 3e716cf
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 62 deletions.
diff --git a/package.json b/package.json
@@ -5,7 +5,8 @@
   "version": "0.1.0",
   "license": "MIT",
   "scripts": {
-    "build": "gatsby build",
+    "lint": "tslint --project tsconfig.json -c tslint.json",
+    "build": "npm run lint && gatsby build",
     "develop": "gatsby develop",
     "format": "prettier --write src/**/*.{js,jsx}",
     "start": "npm run develop",

diff --git a/src/components/layouts/blog-post-layout.tsx b/src/components/layouts/blog-post-layout.tsx
@@ -18,63 +18,67 @@ const ContentArea = ({ title, children }) => (
   </Card>
 )
 
-export default ({ title, cover, children }) => (
-  <div style={{ backgroundColor: "#eeeeee" }}>
-    <Default>
-      <div
-        style={{
-          maxWidth: 750,
-          margin: "0 auto",
-          paddingTop: 40,
-          paddingBottom: 40,
-        }}
-      >
-        <Fab
-          style={{
-            position: "absolute",
-            marginTop: 20,
-            marginLeft: 20,
-            zIndex: 50,
-            color: "#059ce2",
-            backgroundColor: "white",
-          }}
-          color="primary"
-          aria-label="Add"
-          onClick={() => window.history.back()}
-        >
-          <ArrowBackIcon />
-        </Fab>
-        <div style={{ height: "auto", width: "auto" }}>
-          {cover ? <Image fluid={cover} /> : null}
-        </div>
-        <ContentArea title={title}>{children}</ContentArea>
-      </div>
-    </Default>
-    <Mobile>
-      <div style={{ marginTop: 10 }}>
+export default ({ title, cover, children }) => {
+  const goBack = () => window.history.back()
+
+  return (
+    <div style={{ backgroundColor: "#eeeeee" }}>
+      <Default>
         <div
           style={{
-            maxWidth: 650,
+            maxWidth: 750,
             margin: "0 auto",
             paddingTop: 40,
-            paddingLeft: 20,
-            paddingRight: 20,
+            paddingBottom: 40,
           }}
         >
-          <h1
-            onClick={() => window.history.back()}
+          <Fab
             style={{
-              display: "inline-block",
-              color: "#555",
-              textDecoration: "none",
-              cursor: "pointer",
+              position: "absolute",
+              marginTop: 20,
+              marginLeft: 20,
+              zIndex: 50,
+              color: "#059ce2",
+              backgroundColor: "white",
             }}
+            color="primary"
+            aria-label="Add"
+            onClick={goBack}
           >
-            {`< ${title}`}
-          </h1>
-          {children}
+            <ArrowBackIcon />
+          </Fab>
+          <div style={{ height: "auto", width: "auto" }}>
+            {cover ? <Image fluid={cover} /> : null}
+          </div>
+          <ContentArea title={title}>{children}</ContentArea>
         </div>
-      </div>
-    </Mobile>
-  </div>
-)
+      </Default>
+      <Mobile>
+        <div style={{ marginTop: 10 }}>
+          <div
+            style={{
+              maxWidth: 650,
+              margin: "0 auto",
+              paddingTop: 40,
+              paddingLeft: 20,
+              paddingRight: 20,
+            }}
+          >
+            <h1
+              onClick={goBack}
+              style={{
+                display: "inline-block",
+                color: "#555",
+                textDecoration: "none",
+                cursor: "pointer",
+              }}
+            >
+              {`< ${title}`}
+            </h1>
+            {children}
+          </div>
+        </div>
+      </Mobile>
+    </div>
+  )
+}
diff --git a/src/components/layouts/index-layout.tsx b/src/components/layouts/index-layout.tsx
@@ -87,6 +87,7 @@ export default ({ children }) => (
         }
       }
     `}
+    // tslint:disable-next-line:react-this-binding-issue
     render={(data: IDataProps) => (
       <>
         <Default>

diff --git a/src/components/me/author.tsx b/src/components/me/author.tsx
@@ -14,7 +14,12 @@ interface IProps {
 
 export default ({ author }: IProps) => {
   return (
-    <Grid container justify="center" alignItems="center" direction={"column"}>
+    <Grid
+      container={true}
+      justify="center"
+      alignItems="center"
+      direction={"column"}
+    >
       <Link to="/">
         <Avatar
           src={withPrefix(author.image)}

diff --git a/src/components/test.tsx b/src/components/test.tsx
diff --git a/src/templates/blog-post.tsx b/src/templates/blog-post.tsx
@@ -4,16 +4,13 @@ import Layout from "../components/layouts/blog-post-layout"
 
 export default ({ data }) => {
   const node = data.markdownRemark
+  const cover =
+    node.frontmatter.cover && node.frontmatter.cover.childImageSharp
+      ? node.frontmatter.cover.childImageSharp.fluid
+      : null
 
   return (
-    <Layout
-      title={node.frontmatter.title}
-      cover={
-        node.frontmatter.cover && node.frontmatter.cover.childImageSharp
-          ? node.frontmatter.cover.childImageSharp.fluid
-          : null
-      }
-    >
+    <Layout title={node.frontmatter.title} cover={cover}>
       {
         // tslint:disable:react-no-dangerous-html
         <div dangerouslySetInnerHTML={{ __html: node.html }} />

diff --git a/src/utils/typography.ts b/src/utils/typography.ts
@@ -1,7 +1,7 @@
 import * as Typography from "typography"
 import fairyGatesTheme from "typography-theme-fairy-gates"
 
-const typography = new (Typography as any)(fairyGatesTheme)
+const typography = new (<any>Typography)(fairyGatesTheme)
 
 export default typography
 export const rhythm = typography.rhythm
diff --git a/tslint.json b/tslint.json
@@ -17,7 +17,9 @@
     "no-unnecessary-semicolons": false,
     "no-typeof-undefined": false,
     "no-single-line-block-comment": false,
-    "prefer-array-literal": false
+    "prefer-array-literal": false,
+    "jsx-no-multiline-js": false,
+    "jsx-no-lambda": false
   },
   "linterOptions": {
     "exclude": ["./node-moudles/**/*.ts"]