From 0c58362b493831ad04ec5ebcee574c3fca2136ff Mon Sep 17 00:00:00 2001 From: David Joy Date: Thu, 13 May 2021 14:57:25 -0400 Subject: [PATCH] docs: Updating README with repository details. (#101) * docs: fleshing out the readme Making it consistent with frontend-component-footer and much more detailed. * fix: Removing unused variable, siteName Also fixing logout URL in development. (We fixed this in a number of other repositories already, but somehow this one snuck through) --- .env.development | 2 +- README.rst | 72 +++++++++++++++++++++++++++++++++++++++++++++--- src/Header.jsx | 1 - 3 files changed, 69 insertions(+), 6 deletions(-) diff --git a/.env.development b/.env.development index 303bf9e..d57d063 100644 --- a/.env.development +++ b/.env.development @@ -6,7 +6,7 @@ ECOMMERCE_BASE_URL=http://localhost:18130 LANGUAGE_PREFERENCE_COOKIE_NAME=openedx-language-preference LMS_BASE_URL=http://localhost:18000 LOGIN_URL=http://localhost:18000/login -LOGOUT_URL=http://localhost:18000/login +LOGOUT_URL=http://localhost:18000/logout MARKETING_SITE_BASE_URL=http://localhost:18000 ORDER_HISTORY_URL=localhost:1996/orders REFRESH_ACCESS_TOKEN_ENDPOINT=http://localhost:18000/login_refresh diff --git a/README.rst b/README.rst index df9d2bc..02dbda0 100644 --- a/README.rst +++ b/README.rst @@ -1,11 +1,75 @@ +######################### frontend-component-header -========================= +######################### |Build Status| |Codecov| |npm_version| |npm_downloads| |license| |semantic-release| -This is the standard Open edX header for use in React applications. It has two exports: - - **default**: The Header Component - - **messages**: for i18n in the form of ``{ locale: { key: translatedString } }`` +******** +Overview +******** + +A generic header for Open edX micro-frontend applications. + +************ +Requirements +************ + +This component uses ``@edx/frontend-platform`` services such as i18n, analytics, configuration, and the ``AppContext`` React component, and expects that it has been loaded into a micro-frontend that has been properly initialized via ``@edx/frontend-platform``'s ``initialize`` function. `Please visit the frontend template application to see an example. `_ + +Environment Variables +===================== + +* ``LMS_BASE_URL`` - The URL of the LMS of your Open edX instance. +* ``LOGOUT_URL`` - The URL of the API endpoint which performs a user logout. +* ``LOGIN_URL`` - The URL of the login page where a user can sign into their account. +* ``SITE_NAME`` - The user-facing name of the site, used as `alt` text on the logo in the header. + Defaults to "localhost" in development. +* ``LOGO_URL`` - The URL of the site's logo. This logo is displayed in the header. +* ``AUTHN_MINIMAL_HEADER`` - A boolean flag which hides the main menu, user menu, and logged-out + menu items when truthy. This is intended to be used in micro-frontends like + frontend-app-authentication in which these menus are considered distractions from the user's task. + +************ +Installation +************ + +To install this header into your Open edX micro-frontend, run the following command in your MFE: + +``npm i --save @edx/frontend-component-header`` + +This will make the component available to be imported into your application. + +***** +Usage +***** + +This library has the following exports: + +* ``(default)``: The header as a React component. +* ``messages``: Internationalization messages suitable for use with `@edx/frontend-platform/i18n `_ +* ``dist/index.scss``: A SASS file which contains style information for the component. It should be imported into the micro-frontend's own SCSS file. + +Examples +======== + +* `An example of component and messages usage. `_ +* `An example of SCSS file usage. `_ + +*********** +Development +*********** + +Install dependencies:: + + npm i + +Start the development server:: + + npm start + +Build a production distribution:: + + npm run build .. |Build Status| image:: https://api.travis-ci.com/edx/frontend-component-header.svg?branch=master :target: https://travis-ci.com/edx/frontend-component-header diff --git a/src/Header.jsx b/src/Header.jsx index bfc31dd..a76fb2f 100644 --- a/src/Header.jsx +++ b/src/Header.jsx @@ -79,7 +79,6 @@ function Header({ intl }) { const props = { logo: config.LOGO_URL, logoAltText: config.SITE_NAME, - siteName: config.SITE_NAME, logoDestination: `${config.LMS_BASE_URL}/dashboard`, loggedIn: authenticatedUser !== null, username: authenticatedUser !== null ? authenticatedUser.username : null,