veda-ui/app/index.html at 5fc5e2c38353457ba4a7d74fd39f39d4c4c3b0d2 · NASA-IMPACT/veda-ui · 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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!doctype html>
<html lang='en'>

<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no' />
  <meta name='theme-color' content='#2276AC'>

  <link rel='icon' sizes='any' href='{{baseurl}}/meta/favicon.ico' />
  <link rel='icon' type='image/svg+xml' href='{{baseurl}}/meta/icon.svg' />
  <link rel='apple-touch-icon' sizes='180x180' href='{{baseurl}}/meta/apple-touch-icon.png' />
  <link rel='manifest' href='{{baseurl}}/meta/site.webmanifest' />

  <title>{{appTitle}}</title>
  <meta name='description' content='{{appDescription}}' data-react-helmet="true" />

  <meta name='twitter:card' content='summary' data-react-helmet="true"/>
  <meta name='twitter:site' content='' data-react-helmet="true" />
  <meta name='twitter:title' content='{{appTitle}}' data-react-helmet="true" />
  <meta name='twitter:description' content='{{appDescription}}' data-react-helmet="true" />
  <meta name='twitter:image' content='{{baseurl}}/meta/meta-image.png' data-react-helmet="true" />

  <meta property='og:type' content='website' data-react-helmet="true" />
  <meta property='og:url' content='{{baseurl}}' data-react-helmet="true" />
  <meta property='og:site_name' content='{{appTitle}}' data-react-helmet="true" />
  <meta property='og:title' content='{{appTitle}}' data-react-helmet="true" />
  <meta property='og:image' content='{{baseurl}}/meta/meta-image.png' data-react-helmet="true" />
  <meta property='og:description' content='{{appDescription}}' data-react-helmet="true" />

  <link rel='preconnect' href='https://fonts.gstatic.com'>
  <link href='https://fonts.googleapis.com/css2?family=Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,300..800&display=swap' rel='stylesheet' />
  <style>
    #welcome-banner {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 100;
      background: #fff;
      margin: 0;
      padding: 1rem;
      font-family: sans-serif;
      font-size: 1rem;

      transition: all 320ms ease-in-out;
    }

    #welcome-banner h1 {
      height: 3rem;
    }

    #welcome-banner.dismissed {
      opacity: 0;
      visibility: hidden;
    }

    .welcome-banner-loading {
      margin-top: 2rem;
      opacity: 0.64;
    }
  </style>

  <!--
    Disable CRA overlay for handled errors.
    Following the discussion on https://stackoverflow.com/questions/46589819/disable-error-overlay-in-development-mode
    Code partially borrowed from https://github.com/jeron-diovis/react-app-error-boundary
  -->
  <style id="suppress-cra-overlay-styles">
    body > iframe:last-of-type {
      display: none;
    }
  </style>
  <script>
    function allowCRAOverlay(allow) {
      const styles = document.getElementById('suppress-cra-overlay-styles');
      if (!styles) return;
      styles.disabled = allow;
    }

    window.addEventListener('error', function (e) {
      const { error } = e;
      if (error && !error.captured) {
        error.captured = true;
        allowCRAOverlay(false);
        e.preventDefault();
        // Revisit this error after the error boundary element processed it.
        setTimeout(() => {
          // Can be set by the error boundary error handler.
          if (!error.CRAOverlayIgnore) {
            // But if it wasn't caught by a boundary, release it back to the wild.
            allowCRAOverlay(true)
            throw error;
          }
        })
      }
    });
  </script>

</head>

<body>
  <!-- Welcome banner gets hidden by React -->
  <div id='welcome-banner'>
    <div>
      <!--
          To avoid an abrupt transition when the app loads, this banner is
          transitioned out. Replace the contents with something appropriate
          for the project.
        -->
      <h1>{{appTitle}}</h1>
      <p>{{appDescription}}</p>
      <p class='welcome-banner-loading'>Loading...</p>
    </div>
  </div>

  <div id='app-container'>
    <!-- Content rendered here via React -->
  </div>

  <script>
    // https://stackoverflow.com/a/9851769/728583

    // internet explorer 6-11
    var isIE = /*@cc_on!@*/ false || !!document.documentMode;

    if (isIE) {
      document.body.innerHTML =
        'Unfortunately, your browser is not currently supported.<br />Recommended browsers: Edge, Firefox, Safari, Chrome';
    }
  </script>

  <script type='module' src='../packages/veda-ui/src/main.tsx'></script>
</body>

</html>