@yorekaid/frontend-component-footer

The standard footer component used across CLIP applications. This package provides a responsive, dark-mode-ready footer and a Studio-specific footer, with custom copyrights and built-in theme synchronization.

Installation

npm install @yorekaid/frontend-component-footer

Features

• Dark Mode Sync: Automatically reads clip-theme-dark from localStorage and stays in sync with the header without page reloads.
• Dynamic Logos: Switches between light and dark mode CLIP logos seamlessly.
• Custom Copyright: Features a custom copyright line (© CLIP. Powered by Open edX).
• Studio Support: Includes a specialized StudioFooter for authoring tools.

Usage

Standard Footer

To use the standard footer in your application (like Learner Dashboard):

import Footer from '@yorekaid/frontend-component-footer';

// Inside your layout/component
<Footer />

Studio Footer

For Studio or authoring applications, use the StudioFooter component:

import { StudioFooter } from '@yorekaid/frontend-component-footer';

// Inside your Studio layout
<StudioFooter />

Local Development

If you want to test changes locally:

1. Clone this repository.
2. Run npm install.
3. Start the dev server with npm start (it runs on port 9091 by default).
4. Run npm run build to generate the dist folder before publishing.

Publishing

Ensure you build the files first before publishing:

npm run build
npm publish