Skip to content

Commit cbb1f72

Browse files
committed
refactor(404): add title to iframe + refactor component
- resolve a warning that iframe is missing title attribute - remove deprecated scrolling and frameborder attributes, use css instead - refactor component to react function component - keep the background music on this page even though it will never play unless you knew it was there and specifically allowed this site to play bg music
1 parent 6718f50 commit cbb1f72

File tree

1 file changed

+22
-19
lines changed

1 file changed

+22
-19
lines changed

src/pages/404.js

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,27 @@
1-
import React, { Component, Fragment } from "react";
1+
import React from "react";
2+
import styled from "styled-components";
23

34
import { Helmet, Layout } from "ui/partials";
45

5-
export default class ErrorPage extends Component {
6-
constructor(props) {
7-
super(props);
8-
this.state = {};
9-
}
6+
const Iframe = styled.iframe`
7+
overflow: hidden;
8+
border: 0;
9+
`;
1010

11-
render() {
12-
return (
13-
<Fragment>
14-
<Helmet {...this.props} title="Error" />
15-
<Layout {...this.props}>
16-
<h1>You'd think there would be something more interesting here.</h1>
17-
<iframe width="1" height="1" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/348238181&color=%23ff5500&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
18-
</Layout>
19-
</Fragment>
20-
);
21-
}
11+
export default function ErrorPage(props) {
12+
return (
13+
<>
14+
<Helmet {...props} title="Error" />
15+
<Layout {...props}>
16+
<h1>You'd think there would be something more interesting here.</h1>
17+
<Iframe
18+
title="Background music"
19+
width="1"
20+
height="1"
21+
allow="autoplay"
22+
src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/348238181&color=%23ff5500&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
23+
/>
24+
</Layout>
25+
</>
26+
);
2227
}
23-
24-
ErrorPage.propTypes = {};

0 commit comments

Comments
 (0)