mc-header/exampleUse.html at main · materialscloud-org/mc-header · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Materials Cloud Header Light</title>
    <link
      href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap"
      rel="stylesheet"
    />
  </head>
  <body style="background-color: aliceblue;">
    <script>
      var breadcrumbsPath = [
        { name: "Work", link: "https://www.materialscloud.org/work/menu" },
        {
          name: "Tools",
          link: "https://www.materialscloud.org/work/tools/options",
        },
        {
          name: "EXAMPLE NAME",
          link: null,
        },
      ];
    </script>
    <script src="header.js" defer></script>
    <div style="background-color: white; padding: 40px; max-width: 1100px; margin: 0 auto;">
    <section
      style="
        font-family: Arial, sans-serif;
        background: #f9f9f9;
        border: 1px solid #ddd;
        padding: 20px;
        max-width: 1100px;
        margin: 10px auto;
        border-radius: 8px;
        font-size: 1.25em;
      "
    >
      <h3 style="color: #222; margin-top: 0">Usage:</h3>
      <p style="color: #555; line-height: 1.5">
        Injection of mc-header is done by including the
        <code>header.js</code> script in the body of your HTML page.
      </p>
      <p style="color: #555; line-height: 1.5">
        Local:
        <pre
        style="
          background: #272822;
          color: #f8f8f2;
          padding: 15px;
          border-radius: 4px;
          overflow-x: auto;
          white-space: pre;
        "
      >
&lt;script src="header.js" defer&gt;&lt;/script&gt;</pre
      >
      <p style="color: #555; line-height: 1.5">
        or via jsdelivr CDN.</p>
      </p>
      <pre
        style="
          background: #272822;
          color: #f8f8f2;
          padding: 15px;
          border-radius: 4px;
          overflow-x: auto;
          white-space: pre;
        "
      >
&lt;script src="https://cdn.jsdelivr.net/gh/materialscloud-org/mc-header@main/header.js" defer&gt;&lt;/script&gt;</pre
      >
      <p style="color: #555; line-height: 1.5">
        If the page has breadcrumbs, you can set them with the
        <code>breadcrumbsPath</code> variable before including the script:
      </p>

      <pre
        style="
          background: #272822;
          color: #f8f8f2;
          padding: 15px;
          border-radius: 4px;
          overflow-x: auto;
          white-space: pre;
        "
      >
&lt;script&gt;
  var breadcrumbsPath = [
    { name: "Work", link: "https://www.materialscloud.org/work/menu" },
    {
      name: "Tools",
      link: "https://www.materialscloud.org/work/tools/options",
    },
    {
      name: "EXAMPLE NAME",
      link: null,
    },
  ];
  &lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/gh/materialscloud-org/mc-header@main/header.js" defer&gt;&lt;/script&gt;</pre
      >

      <p style="color: #555; line-height: 1.5">
        Make sure to load <code>header.js</code> with the
        <code>defer</code> attribute so it runs after the DOM is ready.
      </p>
    </section>
    <section
    style="
      font-family: Arial, sans-serif;
      background: #f9f9f9;
      border: 1px solid #ddd;
      padding: 0px 15px 5px 15px;
      max-width: 1100px;
      margin: 30px auto;
      font-size: 1.25em;
    "
  >
  <p style="color: #555; line-height: 1.5">
  The script will create a header with some reserved css styling;
  most things should be self-contained within the js but to avoid conflicts its recommended to not
  use <code>.mc-header</code> as a css classname and to not override <code>.body: { margin: 0px} </code>
  </p>

  *Note*: Check the version in the CDN call. There may be a newer release available.
  Due to the way jsdDelivr caches gh-releases this may switch to npm.
  </div>
  </body>
</html>