Touch up footer.

This commit is contained in:
Mike Cao 2023-03-03 21:26:39 -08:00
parent 05f01cd09e
commit 3fc5f5151b
5 changed files with 26 additions and 29 deletions

View File

@ -1,38 +1,31 @@
import { Row, Column } from 'react-basics'; import { Row, Column } from 'react-basics';
import { useRouter } from 'next/router'; import { FormattedMessage } from 'react-intl';
import Script from 'next/script';
import classNames from 'classnames';
import { useIntl, defineMessages } from 'react-intl';
import { CURRENT_VERSION, HOMEPAGE_URL, REPO_URL } from 'lib/constants'; import { CURRENT_VERSION, HOMEPAGE_URL, REPO_URL } from 'lib/constants';
import { labels } from 'components/messages';
import styles from './Footer.module.css'; import styles from './Footer.module.css';
const messages = defineMessages({ export default function Footer() {
poweredBy: { id: 'message.powered-by', defaultMessage: 'Powered by {name}' },
});
export default function Footer({ className }) {
const { pathname } = useRouter();
const { formatMessage } = useIntl();
return ( return (
<footer className={classNames(styles.footer, className)}> <footer className={styles.footer}>
<Row> <Row>
<Column> <Column defaultSize={11} xs={12} sm={12}>
<div> <div>
{formatMessage(messages.poweredBy, { <FormattedMessage
{...labels.poweredBy}
values={{
name: ( name: (
<a href={HOMEPAGE_URL}> <a href={HOMEPAGE_URL}>
<b>umami</b> <b>umami</b>
</a> </a>
), ),
})} }}
/>
</div> </div>
</Column> </Column>
<Column className={styles.version}> <Column className={styles.version} defaultSize={1} xs={12} sm={12}>
<a href={REPO_URL}>{`v${CURRENT_VERSION}`}</a> <a href={REPO_URL}>{`v${CURRENT_VERSION}`}</a>
</Column> </Column>
</Row> </Row>
{!pathname.includes('/share/') && <Script src={`/telemetry.js`} />}
</footer> </footer>
); );
} }

View File

@ -1,10 +1,11 @@
.footer { .footer {
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
text-align: center; text-align: center;
margin: 30px 0; margin: 60px 0;
}
.footer a {
color: var(--font-color100);
} }
.version { .version {

View File

@ -99,6 +99,7 @@ export const labels = defineMessages({
pageNotFound: { id: 'message.page-not-found', defaultMessage: 'Page not found' }, pageNotFound: { id: 'message.page-not-found', defaultMessage: 'Page not found' },
logs: { id: 'label.activity-log', defaultMessage: 'Activity log' }, logs: { id: 'label.activity-log', defaultMessage: 'Activity log' },
dismiss: { id: 'label.dismiss', defaultMessage: 'Dismiss' }, dismiss: { id: 'label.dismiss', defaultMessage: 'Dismiss' },
poweredBy: { id: 'label.powered-by', defaultMessage: 'Powered by {name}' },
}); });
export const messages = defineMessages({ export const messages = defineMessages({

View File

@ -19,7 +19,7 @@ export default function useSticky({ scrollElement = document, defaultSticky = fa
return () => { return () => {
scrollElement.removeEventListener('scroll', handleScroll, true); scrollElement.removeEventListener('scroll', handleScroll, true);
}; };
}, [ref, setIsSticky]); }, [ref, setIsSticky, scrollElement]);
return { ref, isSticky }; return { ref, isSticky };
} }

View File

@ -10,6 +10,7 @@ import 'styles/locale.css';
import 'styles/index.css'; import 'styles/index.css';
import '@fontsource/inter/400.css'; import '@fontsource/inter/400.css';
import '@fontsource/inter/600.css'; import '@fontsource/inter/600.css';
import Script from 'next/script';
const client = new QueryClient({ const client = new QueryClient({
defaultOptions: { defaultOptions: {
@ -22,7 +23,7 @@ const client = new QueryClient({
export default function App({ Component, pageProps }) { export default function App({ Component, pageProps }) {
const { locale, messages } = useLocale(); const { locale, messages } = useLocale();
const { basePath } = useRouter(); const { basePath, pathname } = useRouter();
useConfig(); useConfig();
const Wrapper = ({ children }) => <span className={locale}>{children}</span>; const Wrapper = ({ children }) => <span className={locale}>{children}</span>;
@ -52,6 +53,7 @@ export default function App({ Component, pageProps }) {
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
</Head> </Head>
<Component {...pageProps} /> <Component {...pageProps} />
{!pathname.includes('/share/') && <Script src={`${basePath}/telemetry.js`} />}
</IntlProvider> </IntlProvider>
</QueryClientProvider> </QueryClientProvider>
); );