diff --git a/public/static/CDN/README.md b/public/static/CDN/README.md deleted file mode 100644 index fe3397487..000000000 --- a/public/static/CDN/README.md +++ /dev/null @@ -1,25 +0,0 @@ -# CDN - -> This folder is a copy of our CDN and is meant to be used as reference. -> -> **It is not directly used by the project itself.** - ---- - -## `detect-outdated-browser` - -> Based on https://github.com/mikemaccana/outdated-browser-rework - -Copy of https://github.com/mikemaccana/outdated-browser-rework/blob/5cc5dd986d17bc168ba9699a8f4d54b42401155d/dist/outdated-browser-rework.min.js, based on commit https://github.com/mikemaccana/outdated-browser-rework/commit/5cc5dd986d17bc168ba9699a8f4d54b42401155d - -**Changes**: -- The copy has been customised to auto run the script once loaded, using the default settings -- Also, links pointing to `http://outdatedbrowser.com/` have been replaced by `https://browser-update.org/update-browser.html` because of https://github.com/mikemaccana/outdated-browser-rework/issues/72 - -> See [CDN folder](https://console.cloud.google.com/storage/browser/the-funding-place/assets/libs/outdated-browser-rework?organizationId=581986496946&project=loan-advisor-194400) - -### Note about Next.js -There are no way of performing outdated browser support other than using external JS/CSS files, because everything in `src/components/Head.tsx` is bundled by Next.js -and ends up bundled together, which completely fails to be loaded by outdated browsers such as IE11 which may not be able to parse the source code - -Because of this, we load an external JS file and CSS file (async if possible for perfs) from a CDN so that it doesn't get bundled with the rest of the source code, but is executed on its own instead. diff --git a/public/static/libs/detect-outdated-browser/README.md b/public/static/libs/detect-outdated-browser/README.md new file mode 100644 index 000000000..4973af2b3 --- /dev/null +++ b/public/static/libs/detect-outdated-browser/README.md @@ -0,0 +1,27 @@ +# `detect-outdated-browser` + +> Based on https://github.com/mikemaccana/outdated-browser-rework + +Copy of https://github.com/mikemaccana/outdated-browser-rework/blob/5cc5dd986d17bc168ba9699a8f4d54b42401155d/dist/outdated-browser-rework.min.js, +based on commit https://github.com/mikemaccana/outdated-browser-rework/commit/5cc5dd986d17bc168ba9699a8f4d54b42401155d + +**Changes**: +- The copy has been customised to auto run the script once loaded, using the default settings. +- Also, links pointing to `http://outdatedbrowser.com/` have been replaced by `https://browser-update.org/update-browser.html` because of https://github.com/mikemaccana/outdated-browser-rework/issues/72 + +## Note about Next.js + +There is no way to provide outdated browser support other than using external JS/CSS files, because everything in `src/components/Head.tsx` is bundled by Next.js, +and ends up bundled together, which completely fails to be loaded by outdated browsers such as IE11 which may not be able to parse the source code. + +Because of this, we load an external JS file and CSS file (async if possible for perfs) so that it doesn't get bundled with the rest of the source code, but is executed on its own instead. + +## Unused + +This module is an experiment and has been **disabled**. + +Basically, browser detection works fine, **unless running on a mobile device**, +where apps (facebook, linkedin, medium) display false-positive warnings about **embedded browsers** if they're too old, +and the user can't do anything about it (e.g: Facebook Chrome, Linkedin Chrome, etc.) because those aren't managed by the user but by the vendor instead. + +The code has been kept for now, until a better solution comes to light, but it is not being used by the app. diff --git a/public/static/CDN/detect-outdated-browser/outdated-browser-rework.css b/public/static/libs/detect-outdated-browser/outdated-browser-rework.css similarity index 100% rename from public/static/CDN/detect-outdated-browser/outdated-browser-rework.css rename to public/static/libs/detect-outdated-browser/outdated-browser-rework.css diff --git a/public/static/CDN/detect-outdated-browser/outdated-browser-rework.min.js b/public/static/libs/detect-outdated-browser/outdated-browser-rework.min.js similarity index 100% rename from public/static/CDN/detect-outdated-browser/outdated-browser-rework.min.js rename to public/static/libs/detect-outdated-browser/outdated-browser-rework.min.js diff --git a/src/layouts/core/components/Head.tsx b/src/layouts/core/components/Head.tsx index 36fdbdb55..422c3c27b 100644 --- a/src/layouts/core/components/Head.tsx +++ b/src/layouts/core/components/Head.tsx @@ -1,12 +1,14 @@ -import { isBrowser } from '@unly/utils'; -import NextHead from 'next/head'; -import React from 'react'; import { NRN_DEFAULT_FONT, NRN_DEFAULT_SERVICE_LABEL, } from '@/app/constants'; -import { I18nLocale } from '@/modules/core/i18n/types/I18nLocale'; +import useCustomer from '@/modules/core/data/hooks/useCustomer'; +import { Customer } from '@/modules/core/data/types/Customer'; import { SUPPORTED_LOCALES } from '@/modules/core/i18n/i18n'; +import { I18nLocale } from '@/modules/core/i18n/types/I18nLocale'; +import { isBrowser } from '@unly/utils'; +import NextHead from 'next/head'; +import React from 'react'; export type HeadProps = { /** @@ -66,10 +68,12 @@ export type HeadProps = { * https://github.com/vercel/next.js#populating-head */ const Head: React.FunctionComponent = (props): JSX.Element => { + const customer: Customer = useCustomer(); + const defaultDescription = 'Flexible production-grade boilerplate with Next.js 9, Vercel and TypeScript. Includes multiple opt-in presets using Storybook, Airtable, Analytics, CSS-in-JS, Monitoring, End-to-end testing, Internationalization, CI/CD and SaaS B2B multiple single-tenants (monorepo) support'; const defaultMetaURL = 'https://github.com/UnlyEd/next-right-now'; - const defaultMetaImage = ''; - const defaultFavicon = ''; + const defaultMetaImage = customer?.theme?.logo?.url; + const defaultFavicon = '/favicon.ico'; const { seoTitle = NRN_DEFAULT_SERVICE_LABEL, @@ -144,13 +148,13 @@ const Head: React.FunctionComponent = (props): JSX.Element => { {/* Detect outdated browser and display a popup about how to upgrade to a more recent browser/version */} - {/* XXX See public/static/CDN/README.md */} + {/* XXX See public/static/libs/detect-outdated-browser/README.md */} {/* XXX DISABLED because of https://github.com/mikemaccana/outdated-browser-rework/issues/57#issuecomment-620532590 - TLDR; Display false-positive warnings on embedded browsers if they're too old and the user can't do anything about it (e.g: Facebook Chrome, Linkedin Chrome, etc.) + TLDR; Display false-positive warnings on embedded browsers (on mobile devices) if they're too old and the user can't do anything about it (e.g: Facebook Chrome, Linkedin Chrome, etc.) */} - {/*