Add editor info overlay

src/components/Editor.tsx

@@ -6,6 +6,7 @@ import usePreference from '../hooks/usePreference';
 import themes, { Themes } from '../style/themes';
 import EditorControls from './EditorControls';
 import EditorGlobalStyle from './EditorGlobalStyle';
+import EditorOverlay from './EditorOverlay';
 import EditorTextArea from './EditorTextArea';
 
 export interface EditorProps {
@@ -57,6 +58,7 @@ export default function Editor({
     <>
       <ThemeProvider theme={themes[theme]}>
         <EditorGlobalStyle />
+        <EditorOverlay />
         <EditorControls
           actualContent={actualContent}
           resetFunction={resetFunction}

src/components/EditorOverlay.tsx

@@ -0,0 +1,54 @@
+import styled from 'styled-components';
+
+export default function EditorOverlay() {
+  return (
+    <EditorIntroOverlay>
+      <h1>&#123;pastes&#125;</h1>
+      <ul>
+        <li>
+          <span># Upload a file</span>
+        </li>
+        <li>$ curl -T example.txt https://pastes.dev</li>
+        <br />
+        <li>
+          <span># Pipe output from another command</span>
+        </li>
+        <li>$ tail -n 50 file.log | curl -T - https://pastes.dev</li>
+        <br />
+        <li>
+          <span># Upload a file (without curl)</span>
+        </li>
+        <li>$ cat example.txt | netcat nc.pastes.dev 1337</li>
+      </ul>
+    </EditorIntroOverlay>
+  );
+}
+
+const EditorIntroOverlay = styled.div`
+  width: max(50vw, 400px);
+  height: 450px;
+
+  h1 {
+    color: ${props => props.theme.primary};
+    text-align: center;
+    font-size: 5vw;
+  }
+
+  ul {
+    list-style-type: none;
+  }
+
+  span {
+    color: ${props => props.theme.comment};
+  }
+
+  color: ${props => props.theme.primary};
+  border: 5px solid ${props => props.theme.secondary};
+  background: ${props => props.theme.background};
+
+  position: absolute;
+  z-index: 1;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+`;

src/style/themes.ts

@@ -13,6 +13,7 @@ export interface Theme {
   secondary: Color;
   highlight: Color;
   background: Color;
+  comment: Color;
   lightOrDark: 'light' | 'dark';
   highlightedLine: {
     color: Color;
@@ -37,6 +38,7 @@ const themes: Themes = {
     secondary: '#010409', // canvas.inset
     highlight: '#161b22', // canvas.overlay
     background: '#0d1117', // canvas.default
+    comment: '#8b949e',
     lightOrDark: 'dark',
 
     highlightedLine: {
@@ -68,6 +70,7 @@ const themes: Themes = {
     secondary: '#022550',
     highlight: '#36368c',
     background: '#ffffff',
+    comment: '#708090',
     lightOrDark: 'light',
 
     highlightedLine: {
@@ -99,6 +102,7 @@ const themes: Themes = {
     secondary: '#383a59',
     highlight: '#44475a',
     background: '#282a36',
+    comment: '#6272a4',
     lightOrDark: 'dark',
     highlightedLine: {
       color: '#586e75',
@@ -112,6 +116,7 @@ const themes: Themes = {
     secondary: '#222218',
     highlight: '#49483E',
     background: '#272822',
+    comment: '#75715e',
     lightOrDark: 'dark',
     highlightedLine: {
       color: '#49483E',
@@ -125,6 +130,7 @@ const themes: Themes = {
     secondary: '#073642', // base02
     highlight: '#002b36', // base03
     background: '#002B36', // base03
+    comment: '#586e75', // base01
     lightOrDark: 'dark',
     highlightedLine: {
       color: '#93a1a1', // base1
@@ -138,6 +144,7 @@ const themes: Themes = {
     secondary: '#eee8d5', // base2
     highlight: '#FDF6E3', // base3
     background: '#FDF6E3', // base3
+    comment: '#93a1a1', // base1
     lightOrDark: 'light',
     highlightedLine: {
       color: '#586e75', // base01