docs/_includes/open_graph/cli-commands.jsx at e8170a63216c54699a3bf0b69e8110d882968c95 · denoland/docs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
/** @jsxImportSource npm:react@18.2.0 */

export default function ({ title, description, openGraphTitle }) {
  if (!openGraphTitle) {
    title = "deno help";
  }
  if (!description) {
    description = "Learn more at docs.deno.com";
  }

  return (
    <div
      style={{
        height: "100%",
        width: "100%",
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        background:
          `radial-gradient(circle 450px at 300px 50%, #273a34, #172723)`,
        fontSize: 28,
        fontWeight: 400,
        padding: "0 90px",
        textWrap: "balance",
        color: "#fff",
        fontFamily: "Inter",
      }}
    >
      <p
        style={{
          fontSize: "18px",
          lineHeight: "1",
          marginBottom: "2rem",
          textTransform: "uppercase",
        }}
      >
        docs.deno.com
      </p>
      <h1
        style={{
          margin: "0",
          fontSize: 60,
          fontWeight: 800,
          lineHeight: "1.1",
          marginTop: 0,
          marginLeft: "-16px",
          marginBottom: "2rem",
        }}
      >
        <span
          style={{
            background: "#000",
            borderRadius: "10px",
            padding: "10px 18px 4px 18px",
            fontFamily: "Courier",
            lineHeight: "1.2",
            color: "#ffffff",
            textShadow:
              "0 0 42px #70ffaf, 0 0 36px #70ffaf66, 0 0 28px #70ffaf33, 0 0 16px #70ffaf22, 0 0 8px #70ffaf11",
          }}
        >
          {openGraphTitle}
        </span>
      </h1>
      <p
        style={{
          marginTop: 0,
          width: "72%",
          lineHeight: "1.5",
        }}
      >
        {description}
      </p>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 501 501"
        stroke-linejoin="round"
        stroke-miterlimit="2"
        clip-rule="evenodd"
        style={{
          position: "absolute",
          bottom: "2rem",
          right: "2rem",
          width: "100px",
          height: "100px",
        }}
      >
        <path
          fill="#fff"
          d="M230 0a220 220 0 1 1-20 440A220 220 0 0 1 230 0Zm52 265-39-5c-8-1-16-3-23-6l-3 1v3c3 4 13 11 21 14-7 6-11 18-13 24a72 72 0 0 0 69 91c23 1 52-10 74-32a200 200 0 1 0-296 0 3 3 0 0 0 5-4c-26-103 31-215 95-250 24-13 47-18 68-10 32 13 50 34 89 52 40 18 44 48 33 78-11 31-46 46-80 44Zm-69-160c-13 1-22 17-23 27-1 11 4 28 21 27 20 0 26-17 24-33-2-13-11-22-22-21Z"
        />
      </svg>
    </div>
  );
}