skohub-vocabs/src/components/footer.jsx at 54715c18f3c2b3fb83aeb41dd151c89f5c98e1b0 · skohub-io/skohub-vocabs · 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
import { css } from "@emotion/react"
import PropTypes from "prop-types"
import React from "react"

import { getConfigAndConceptSchemes } from "../hooks/configAndConceptSchemes"
import { commitUrl, formatBuildTime, shortSha } from "../buildInfo"

const Footer = () => {
  const { config, buildTime } = getConfigAndConceptSchemes()
  const { repositoryUrl, gitCommit } = config

  const formattedTime = formatBuildTime(buildTime)
  const sha = shortSha(gitCommit)
  const href = commitUrl(repositoryUrl, gitCommit)

  const style = css`
    background: ${config.colors.skoHubMiddleColor};
    color: ${config.colors.skoHubWhite};

    .footerContent {
      padding: 20px;
      text-align: right;

      @media only screen and (max-width: 800px) {
        text-align: center;
      }

      ul {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;

        li {
          display: inline-block;
          padding: 0 20px 0 0px;
          margin: 0;
        }

        .push-right {
          margin-left: auto;
        }
      }

      a {
        color: ${config.colors.skoHubWhite};
        font-weight: 700;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  `

  // Get links from config.yaml, if available
  const links = config?.footer?.links || []

  return (
    <footer css={style}>
      <div className="footerContent">
        <ul>
          {repositoryUrl && (
            <li>
              <a href={repositoryUrl} target="_blank" rel="noopener noreferrer">
                Source
              </a>
            </li>
          )}
          {formattedTime && (
            <li>
              Last built: {formattedTime}
              {sha && href && (
                <>
                  {" ("}
                  <a href={href} target="_blank" rel="noopener noreferrer">
                    {sha}
                  </a>
                  {")"}
                </>
              )}
              {sha && !href && ` (${sha})`}
            </li>
          )}
          {links.map((link, idx) => (
            <li key={idx} className={idx === 0 ? "push-right" : ""}>
              <a
                href={link.url}
                target={link.target || undefined}
                rel={link.rel || undefined}
              >
                {link.title}
              </a>
            </li>
          ))}
        </ul>
      </div>
    </footer>
  )
}

Footer.propTypes = {
  siteTitle: PropTypes.string,
}

Footer.defaultProps = {
  siteTitle: ``,
}

export default Footer