diff --git a/README.md b/README.md index 805bca9d..cbf1c175 100644 --- a/README.md +++ b/README.md @@ -78,6 +78,7 @@ $ npm run start - OIDC_AUTHORITY_URL - Authority URL for retrieving OIDC metadata - OAUTH2_REDIRECT_URL - Destination to redirect after signing in - END_SESSION_URL - OAuth2 end session (or logout) endpoint, if not included in the OIDC metadata +- APP_ENV - denotes environment for app, possible values are dev, preprod, and prod 8. Visit [localhost:3000](http://localhost:3000) in your web browser to view the FirstVoices app. diff --git a/src/GlobalConfiguration.js b/src/GlobalConfiguration.js index eb0af374..85db7605 100644 --- a/src/GlobalConfiguration.js +++ b/src/GlobalConfiguration.js @@ -1,7 +1,8 @@ -/* global CONFIGURATION_SOURCE, ENV_API_URL, ENV_AWS_CLIENT_ID, ENV_OIDC_AUTHORITY_URL, ENV_OAUTH2_REDIRECT_URL, ENV_END_SESSION_URL, ENV_SENTRY_DSN, ENV_SENTRY_ENVIRONMENT, ENV_SENTRY_RELEASE, ENV_SENTRY_TRACES_SAMPLE_RATE, ENV_SENTRY_ERROR_SAMPLE_RATE */ -/* global SSI_API_URL, SSI_AWS_CLIENT_ID, SSI_OIDC_AUTHORITY_URL, SSI_OAUTH2_REDIRECT_URL, SSI_END_SESSION_URL, SSI_SENTRY_DSN, SSI_SENTRY_ENVIRONMENT, SSI_SENTRY_RELEASE, SSI_SENTRY_TRACES_SAMPLE_RATE, SSI_SENTRY_ERROR_SAMPLE_RATE */ +/* global CONFIGURATION_SOURCE, ENV_API_URL, ENV_APP_ENV, ENV_AWS_CLIENT_ID, ENV_OIDC_AUTHORITY_URL, ENV_OAUTH2_REDIRECT_URL, ENV_END_SESSION_URL, ENV_SENTRY_DSN, ENV_SENTRY_ENVIRONMENT, ENV_SENTRY_RELEASE, ENV_SENTRY_TRACES_SAMPLE_RATE, ENV_SENTRY_ERROR_SAMPLE_RATE */ +/* global SSI_API_URL, SSI_APP_ENV, SSI_AWS_CLIENT_ID, SSI_OIDC_AUTHORITY_URL, SSI_OAUTH2_REDIRECT_URL, SSI_END_SESSION_URL, SSI_SENTRY_DSN, SSI_SENTRY_ENVIRONMENT, SSI_SENTRY_RELEASE, SSI_SENTRY_TRACES_SAMPLE_RATE, SSI_SENTRY_ERROR_SAMPLE_RATE */ let API_URL +let ENV_APP let AWS_CLIENT_ID let OIDC_AUTHORITY_URL let OAUTH2_REDIRECT_URL @@ -17,6 +18,7 @@ switch (CONFIGURATION_SOURCE) { case 'Caddy': // they have been injected into the HTML API_URL = SSI_API_URL + ENV_APP = SSI_APP_ENV AWS_CLIENT_ID = SSI_AWS_CLIENT_ID OIDC_AUTHORITY_URL = SSI_OIDC_AUTHORITY_URL OAUTH2_REDIRECT_URL = SSI_OAUTH2_REDIRECT_URL @@ -30,6 +32,7 @@ switch (CONFIGURATION_SOURCE) { case 'Webpack': default: API_URL = ENV_API_URL + ENV_APP = ENV_APP_ENV AWS_CLIENT_ID = ENV_AWS_CLIENT_ID OIDC_AUTHORITY_URL = ENV_OIDC_AUTHORITY_URL OAUTH2_REDIRECT_URL = ENV_OAUTH2_REDIRECT_URL @@ -44,6 +47,7 @@ switch (CONFIGURATION_SOURCE) { const GlobalConfiguration = { API_URL, + ENV_APP, AWS_CLIENT_ID, OIDC_AUTHORITY_URL, OAUTH2_REDIRECT_URL, diff --git a/src/common/icons/Mobile.js b/src/common/icons/Mobile.js new file mode 100644 index 00000000..bcd21f0b --- /dev/null +++ b/src/common/icons/Mobile.js @@ -0,0 +1,21 @@ +import React from 'react' +import PropTypes from 'prop-types' + +function Mobile({ styling }) { + return ( + + + + ) +} +// PROPTYPES +const { string } = PropTypes +Mobile.propTypes = { + styling: string, +} + +export default Mobile diff --git a/src/common/icons/PC.js b/src/common/icons/PC.js new file mode 100644 index 00000000..fa32579c --- /dev/null +++ b/src/common/icons/PC.js @@ -0,0 +1,21 @@ +import React from 'react' +import PropTypes from 'prop-types' + +function PC({ styling }) { + return ( + + + + ) +} +// PROPTYPES +const { string } = PropTypes +PC.propTypes = { + styling: string, +} + +export default PC diff --git a/src/common/icons/Tablet.js b/src/common/icons/Tablet.js new file mode 100644 index 00000000..437f8203 --- /dev/null +++ b/src/common/icons/Tablet.js @@ -0,0 +1,21 @@ +import React from 'react' +import PropTypes from 'prop-types' + +function Tablet({ styling }) { + return ( + + + + ) +} +// PROPTYPES +const { string } = PropTypes +Tablet.propTypes = { + styling: string, +} + +export default Tablet diff --git a/src/common/utils/getIcon.js b/src/common/utils/getIcon.js index 745f91a5..3b922d48 100644 --- a/src/common/utils/getIcon.js +++ b/src/common/utils/getIcon.js @@ -56,12 +56,14 @@ import MapLocation from 'common/icons/MapLocation' import Microphone from 'common/icons/Microphone' import MicrophoneOff from 'common/icons/MicrophoneOff' import Minus from 'common/icons/Minus' +import Mobile from 'common/icons/Mobile' import More from 'common/icons/More' import Mute from 'common/icons/Mute' import Next from 'common/icons/Next' import OrderedList from 'common/icons/OrderedList' import Pause from 'common/icons/Pause' import PauseCircle from 'common/icons/PauseCircle' +import PC from 'common/icons/PC' import Pencil from 'common/icons/Pencil' import PlaceHolder from 'common/icons/PlaceHolder' import Play from 'common/icons/Play' @@ -84,6 +86,7 @@ import Star from 'common/icons/Star' import Stop from 'common/icons/Stop' import StopCircle from 'common/icons/StopCircle' import Resources from 'common/icons/Resources' +import Tablet from 'common/icons/Tablet' import TimesCircle from 'common/icons/TimesCircle' import TimesCircleSolid from 'common/icons/TimesCircleSolid' import Translate from 'common/icons/Translate' @@ -188,12 +191,14 @@ function getIcon(iconName, iconStyling, title) { Microphone, MicrophoneOff, Minus, + Mobile, More, Mute, Next, OrderedList, Pause, PauseCircle, + PC, Pencil, Phrase, PlaceHolder, @@ -221,6 +226,7 @@ function getIcon(iconName, iconStyling, title) { Stop, StopCircle, Story, + Tablet, Team, TimesCircle, TimesCircleSolid, diff --git a/src/components/App/AppContainer.js b/src/components/App/AppContainer.js index da68b34d..220dea42 100644 --- a/src/components/App/AppContainer.js +++ b/src/components/App/AppContainer.js @@ -61,7 +61,7 @@ function AppContainer() { path="apps" element={ - + } /> diff --git a/src/components/FVApps/FVAppsContainer.js b/src/components/FVApps/FVAppsContainer.js new file mode 100644 index 00000000..ce80b1b5 --- /dev/null +++ b/src/components/FVApps/FVAppsContainer.js @@ -0,0 +1,13 @@ +import React from 'react' + +// FPCC +import FVAppsData from 'components/FVApps/FVAppsData' +import FVAppsPresentation from './FVAppsPresentation' + +function FVAppsContainer() { + const { sitesWithApps } = FVAppsData() + + return +} + +export default FVAppsContainer diff --git a/src/components/FVApps/FVAppsData.js b/src/components/FVApps/FVAppsData.js new file mode 100644 index 00000000..82165b11 --- /dev/null +++ b/src/components/FVApps/FVAppsData.js @@ -0,0 +1,19 @@ +import { useSites } from 'common/dataHooks/useSites' + +function FVAppsData() { + const sites = useSites() + + function features(site) { + return site.enabledFeatures.find( + (feature) => feature.key.toLowerCase() === 'has_app', + ) + } + + const sitesWithApps = sites?.data?.results?.filter(features) + + return { + sitesWithApps, + } +} + +export default FVAppsData diff --git a/src/components/FVApps/FVApps.js b/src/components/FVApps/FVAppsPresentation.js similarity index 60% rename from src/components/FVApps/FVApps.js rename to src/components/FVApps/FVAppsPresentation.js index 0d7804d8..1a37aa37 100644 --- a/src/components/FVApps/FVApps.js +++ b/src/components/FVApps/FVAppsPresentation.js @@ -1,34 +1,91 @@ import React from 'react' +import { PropTypes } from 'prop-types' + +// FPCC import SectionTitle from 'components/SectionTitle' +import { SMALL } from 'common/constants' +import SiteLogo from 'components/SiteLogo' +import getIcon from 'common/utils/getIcon' +import GlobalConfiguration from 'src/GlobalConfiguration' -function FVApps() { +function FVAppsPresentation({ sitesWithApps }) { const headerStyle = 'text-xl font-bold mb-1 mt-4' const paraStyle = 'mb-2' + return (
-
+
-
+

FirstVoices Language Apps

The wealth of language data uploaded by Indigenous communities onto their FirstVoices language sites can also be accessed through mobile - apps. The app pulls content directly from entries on FirstVoices and - functions with offline capabilities. + apps. The app pulls content directly from FirstVoices and is + compatible with most phones, tablets, and laptops.

- Note: The classic FirstVoices language apps are no longer being - updated and may not be installable on all devices. Watch out for the - new and improved FirstVoices language apps with automatic syncing - capabilities, coming soon! + The new apps can be installed directly from the web +

+ {sitesWithApps && ( +
+ {sitesWithApps?.map(({ id, title, slug, logo }) => ( +
+
+ +
+

{title}

+
+ {getIcon('Mobile', 'w-6 h-6 fill-current mr-3 inline-flex')} + {getIcon('Tablet', 'w-6 h-6 fill-current mr-3 inline-flex')} + {getIcon('PC', 'w-6 h-6 fill-current mr-3 inline-flex')} +
+ + + +
+ ))} +
+ )} +
+
+

Legacy Apps

+

+ Note: The FirstVoices apps in the iOS and Android app stores are no + longer being updated and may not be installable on all devices.

-
+

Nazko-Dakelh

@@ -167,52 +224,6 @@ function FVApps() {

-
-

Kwak̓wala

-

- Download Now:{' '} - - iOS - {' '} - |{' '} - - Android - -

-
-
-

Lilwat - Ucwalmicwts

-

- Download Now:{' '} - - iOS - {' '} - |{' '} - - Android - -

-

SENĆOŦEN

@@ -236,29 +247,6 @@ function FVApps() {

-
-

Halq'eméylem

-

- Download Now:{' '} - - iOS - {' '} - |{' '} - - Android - -

-

Hlgaagilda Xaayda Kil

@@ -328,52 +316,6 @@ function FVApps() {

-
-

Tseshaht

-

- Download Now:{' '} - - iOS - {' '} - |{' '} - - Android - -

-
-
-

Haiɫzaqvḷa

-

- Download Now:{' '} - - iOS - {' '} - |{' '} - - Android - -

-

she shashishalhem

@@ -397,52 +339,6 @@ function FVApps() {

-
-

Tse'Khene (McLeod Lake)

-

- Download Now:{' '} - - iOS - {' '} - |{' '} - - Android - -

-
-
-

Sm'algyax

-

- Download Now:{' '} - - iOS - {' '} - |{' '} - - Android - -

-
@@ -450,4 +346,10 @@ function FVApps() { ) } -export default FVApps +// PROPTYPES +const { array } = PropTypes +FVAppsPresentation.propTypes = { + sitesWithApps: array, +} + +export default FVAppsPresentation diff --git a/src/components/FVApps/index.js b/src/components/FVApps/index.js index 54bdb400..13e0a769 100644 --- a/src/components/FVApps/index.js +++ b/src/components/FVApps/index.js @@ -1,3 +1,9 @@ -import FVApps from 'components/FVApps/FVApps' +import FVAppsContainer from 'components/FVApps/FVAppsContainer' +import FVAppsData from 'components/FVApps/FVAppsData' +import FVAppsPresentation from 'components/FVApps/FVAppsPresentation' -export default FVApps +export default { + Container: FVAppsContainer, + Data: FVAppsData, + Presentation: FVAppsPresentation, +} diff --git a/tailwind.config.js b/tailwind.config.js index 3535a557..268058cd 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -175,6 +175,9 @@ module.exports = { bgRed: { DEFAULT: '#B40212', }, + buttonOrange: { + DEFAULT: '#C4572D', + }, 'fv-charcoal': { xlight: '#979799', light: '#54584A', diff --git a/webpack/webpack.development.js b/webpack/webpack.development.js index 2164cdd4..d9188821 100644 --- a/webpack/webpack.development.js +++ b/webpack/webpack.development.js @@ -13,6 +13,9 @@ module.exports = (env) => { ENV_API_URL: env?.API_URL ? JSON.stringify(env.API_URL) : JSON.stringify('/api/1.0/'), + ENV_APP_ENV: process.env.APP_ENV + ? JSON.stringify(process.env.APP_ENV) + : JSON.stringify(''), ENV_AWS_CLIENT_ID: process.env.AWS_CLIENT_ID ? JSON.stringify(process.env.AWS_CLIENT_ID) : JSON.stringify(''),