src/components/cards.js - Code Metrics - Inspection of "chore(deps): update dependency eslint to v7.29.0" - soniCaH/KCVV-Elewijt-Gatsby - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — renovate/eslint-7.x ( eb7113 )

unknown

created 2021-06-20 22:24 UTC

src/components/cards.js A

↳ Parent: Project

Complexity

Total Complexity	4
Complexity/F	1

Size

Lines of Code	219
Function Count	4

Duplication

Duplicated Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
wmc	4
eloc	172
mnd	0
bc	0
fnc	4
dl	0
loc	219
rs	10
bpm	0
cpm	1
noi	0
c	0
b	0
f	0

4 Functions

Rating	Name	Size	Complexity
A	SingleImageCard.render	31	1
A	CardImage.render	36	1
A	CardVertical.render	40	1
B	Card.render	81	1

import React, { Component } from "react"
import { Link } from "gatsby"
import { GatsbyImage } from "gatsby-plugin-image"

import Icon from "./Icon"

import "./cards.scss"

/**
 * Render a card layout (image / tag / title / excerpt).
 */
export class Card extends Component {
  render() {
    const {
      title,
      icon = null,
      body = null,
      localFile,
      link,
      metadata = false,
      tags = [],
      created = null,
    } = this.props

    const image = (
      <GatsbyImage
        image={{
          ...localFile.childImageSharp.gatsbyImageData,
          aspectRatio: 3 / 2,
        }}
        alt={title}
      />
    )

    const absoluteUrlRegex = /^https?:\/\/|^\/\//i

    return (
      <article className={"cardItem"}>
        {absoluteUrlRegex.test(link) || (
          <Link to={link}>
            <header>
              <figure>{image}</figure>
            </header>

            <main className={"cardItem__summary"}>
              <div className={"cardItem__heading"}>
                <h3>
                  {icon && <Icon icon={icon} />} {title}
                </h3>
              </div>

              {body && <div dangerouslySetInnerHTML={{ __html: body }}></div>}
            </main>
          </Link>
        )}

        {absoluteUrlRegex.test(link) && (
          <a href={link} target="_blank" rel="noopener noreferrer">
            <header>
              <figure>{image}</figure>
            </header>

            <main className={"cardItem__summary"}>
              <div className={"cardItem__heading"}>
                <h3>
                  {icon && <i className={`fa ${icon}`} aria-hidden={true}></i>}{" "}
                  {title}
                </h3>
              </div>

              {body && <div dangerouslySetInnerHTML={{ __html: body }}></div>}
            </main>
          </a>
        )}

        {metadata && (
          <footer className={"cardItem__footer article__tags"}>
            <span className={"datetime"}>
              <i className={"fa fa-clock-o"} aria-hidden="true"></i> {created}
            </span>
            {tags.length > 0 && (
              <span className={"tag__wrapper"}>
                <i className={"fa fa-tags"} aria-hidden="true"></i>{" "}
                {tags.map(({ path, name }, i) => (
                  <Link to={path.alias} key={i}>
                    <span className={"tag__label"}>#{name}</span>
                  </Link>
                ))}
              </span>
            )}
          </footer>
        )}
      </article>
    )
  }
}

export class CardImage extends Component {
  render() {
    const { title, localFile, link, body = null } = this.props
    const absoluteUrlRegex = /^https?:\/\/|^\/\//i

    const image = (
      <GatsbyImage
        image={{
          ...localFile.childImageSharp.gatsbyImageData,
          aspectRatio: 2 / 1,
        }}
        alt={title}
      />
    )

    const content = (
      <header>
        <figure>{image}</figure>
        <div className={"gradient gradient--70"}></div>
        <div className={"cardItem__heading"}>
          <h3>{title}</h3>
          {body && <div dangerouslySetInnerHTML={{ __html: body }}></div>}
        </div>
      </header>
    )

    return (
      <article className={"cardItem cardItem--image"}>
        {link === false && content}
        {link !== false &&
          (absoluteUrlRegex.test(link) || <Link to={link}>{content}</Link>)}
        {link !== false && absoluteUrlRegex.test(link) && (
          <a href={link} target="_blank" rel="noopener noreferrer">
            {content}
          </a>
        )}
      </article>
    )
  }
}

export class SingleImageCard extends Component {
  render() {
    const { localFile, link } = this.props

    const absoluteUrlRegex = /^https?:\/\/|^\/\//i

    const image = (
      <GatsbyImage
        image={{
          ...localFile.childImageSharp.gatsbyImageData,
          aspectRatio: 2 / 1,
        }}
      />
    )

    return (
      <article className={"cardItem cardItem--vertical"}>
        {absoluteUrlRegex.test(link) || (
          <Link to={link}>
            <header>
              <figure>{image}</figure>
            </header>
          </Link>
        )}
        {absoluteUrlRegex.test(link) && (
          <a href={link} target="_blank" rel="noopener noreferrer">
            <header>
              <figure>{image}</figure>
            </header>
          </a>
        )}
      </article>
    )
  }
}

export class CardVertical extends Component {
  render() {
    const { title, localFile, link } = this.props

    const absoluteUrlRegex = /^https?:\/\/|^\/\//i

    const image = (
      <GatsbyImage
        image={{
          ...localFile.childImageSharp.gatsbyImageData,
          aspectRatio: 6 / 8,
        }}
        alt={title}
      />
    )

    return (
      <article className={"cardItem cardItem--vertical"}>
        {absoluteUrlRegex.test(link) || (
          <Link to={link}>
            <header>
              <figure>{image}</figure>
              <div className={"gradient gradient--70"}></div>
              <div className={"cardItem__heading"}>
                <h3>{title}</h3>
              </div>
            </header>
          </Link>
        )}
        {absoluteUrlRegex.test(link) && (
          <a href={link} target="_blank" rel="noopener noreferrer">
            <header>
              <figure>{image}</figure>
              <div className={"gradient gradient--70"}></div>
              <div className={"cardItem__heading"}>
                <h3>{title}</h3>
              </div>
            </header>
          </a>
        )}
      </article>
    )
  }
}


1			import React, { Component } from "react"
2			import { Link } from "gatsby"
3			import { GatsbyImage } from "gatsby-plugin-image"
4
5			import Icon from "./Icon"
6
7			import "./cards.scss"
8
9			/**
10			* Render a card layout (image / tag / title / excerpt).
11			*/
12			export class Card extends Component {
13			render() {
14			const {
15			title,
16			icon = null,
17			body = null,
18			localFile,
19			link,
20			metadata = false,
21			tags = [],
22			created = null,
23			} = this.props
24
25			const image = (
26			<GatsbyImage
27			image={{
28			...localFile.childImageSharp.gatsbyImageData,
29			aspectRatio: 3 / 2,
30			}}
31			alt={title}
32			/>
33			)
34
35			const absoluteUrlRegex = /^https?:\/\/\|^\/\//i
36
37			return (
38			<article className={"cardItem"}>
39			{absoluteUrlRegex.test(link) \|\| (
40			<Link to={link}>
41			<header>
42			<figure>{image}</figure>
43			</header>
44
45			<main className={"cardItem__summary"}>
46			<div className={"cardItem__heading"}>
47			<h3>
48			{icon && <Icon icon={icon} />} {title}
49			</h3>
50			</div>
51
52			{body && <div dangerouslySetInnerHTML={{ __html: body }}></div>}
53			</main>
54			</Link>
55			)}
56
57			{absoluteUrlRegex.test(link) && (
58			<a href={link} target="_blank" rel="noopener noreferrer">
59			<header>
60			<figure>{image}</figure>
61			</header>
62
63			<main className={"cardItem__summary"}>
64			<div className={"cardItem__heading"}>
65			<h3>
66			{icon && <i className={`fa ${icon}`} aria-hidden={true}></i>}{" "}
67			{title}
68			</h3>
69			</div>
70
71			{body && <div dangerouslySetInnerHTML={{ __html: body }}></div>}
72			</main>
73			</a>
74			)}
75
76			{metadata && (
77			<footer className={"cardItem__footer article__tags"}>
78			<span className={"datetime"}>
79			<i className={"fa fa-clock-o"} aria-hidden="true"></i> {created}
80			</span>
81			{tags.length > 0 && (
82			<span className={"tag__wrapper"}>
83			<i className={"fa fa-tags"} aria-hidden="true"></i>{" "}
84			{tags.map(({ path, name }, i) => (
85			<Link to={path.alias} key={i}>
86			<span className={"tag__label"}>#{name}</span>
87			</Link>
88			))}
89			</span>
90			)}
91			</footer>
92			)}
93			</article>
94			)
95			}
96			}
97
98			export class CardImage extends Component {
99			render() {
100			const { title, localFile, link, body = null } = this.props
101			const absoluteUrlRegex = /^https?:\/\/\|^\/\//i
102
103			const image = (
104			<GatsbyImage
105			image={{
106			...localFile.childImageSharp.gatsbyImageData,
107			aspectRatio: 2 / 1,
108			}}
109			alt={title}
110			/>
111			)
112
113			const content = (
114			<header>
115			<figure>{image}</figure>
116			<div className={"gradient gradient--70"}></div>
117			<div className={"cardItem__heading"}>
118			<h3>{title}</h3>
119			{body && <div dangerouslySetInnerHTML={{ __html: body }}></div>}
120			</div>
121			</header>
122			)
123
124			return (
125			<article className={"cardItem cardItem--image"}>
126			{link === false && content}
127			{link !== false &&
128			(absoluteUrlRegex.test(link) \|\| <Link to={link}>{content}</Link>)}
129			{link !== false && absoluteUrlRegex.test(link) && (
130			<a href={link} target="_blank" rel="noopener noreferrer">
131			{content}
132			</a>
133			)}
134			</article>
135			)
136			}
137			}
138
139			export class SingleImageCard extends Component {
140			render() {
141			const { localFile, link } = this.props
142
143			const absoluteUrlRegex = /^https?:\/\/\|^\/\//i
144
145			const image = (
146			<GatsbyImage
147			image={{
148			...localFile.childImageSharp.gatsbyImageData,
149			aspectRatio: 2 / 1,
150			}}
151			/>
152			)
153
154			return (
155			<article className={"cardItem cardItem--vertical"}>
156			{absoluteUrlRegex.test(link) \|\| (
157			<Link to={link}>
158			<header>
159			<figure>{image}</figure>
160			</header>
161			</Link>
162			)}
163			{absoluteUrlRegex.test(link) && (
164			<a href={link} target="_blank" rel="noopener noreferrer">
165			<header>
166			<figure>{image}</figure>
167			</header>
168			</a>
169			)}
170			</article>
171			)
172			}
173			}
174
175			export class CardVertical extends Component {
176			render() {
177			const { title, localFile, link } = this.props
178
179			const absoluteUrlRegex = /^https?:\/\/\|^\/\//i
180
181			const image = (
182			<GatsbyImage
183			image={{
184			...localFile.childImageSharp.gatsbyImageData,
185			aspectRatio: 6 / 8,
186			}}
187			alt={title}
188			/>
189			)
190
191			return (
192			<article className={"cardItem cardItem--vertical"}>
193			{absoluteUrlRegex.test(link) \|\| (
194			<Link to={link}>
195			<header>
196			<figure>{image}</figure>
197			<div className={"gradient gradient--70"}></div>
198			<div className={"cardItem__heading"}>
199			<h3>{title}</h3>
200			</div>
201			</header>
202			</Link>
203			)}
204			{absoluteUrlRegex.test(link) && (
205			<a href={link} target="_blank" rel="noopener noreferrer">
206			<header>
207			<figure>{image}</figure>
208			<div className={"gradient gradient--70"}></div>
209			<div className={"cardItem__heading"}>
210			<h3>{title}</h3>
211			</div>
212			</header>
213			</a>
214			)}
215			</article>
216			)
217			}
218			}
219

soniCaH / KCVV-Elewijt-Gatsby

Push — renovate/eslint-7.x ( eb7113 )

src/components/cards.js A

Complexity

Size

Duplication

Importance

4 Functions

Duplication Side-by-Side

Filter issues like