Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/airgead-investment-calculator/llms.txt

Use this file to discover all available pages before exploring further.

js/components/shell.js provides the shared page chrome for every Airgead page. It injects the sticky header with navigation links, the mobile drawer, the footer, and the toast notification container. The module calls renderShell() automatically when it is loaded, so including it via a <script type="module"> tag is all that is required to activate the full shell on any page.

​
Loading the shell

Add the following <script> tag to the <body> of each HTML page. The path prefix (../ vs ../../) depends on the depth of the page relative to the project root. 
<!-- From a top-level page (e.g. index.html) -->
<script type="module" src="../js/components/shell.js"></script>

<!-- From a page one level deeper (e.g. pages/calculator.html) -->
<script type="module" src="../../js/components/shell.js"></script>
The module runs renderShell() on import. You do not need to call it yourself. Every page must also include a wrapper element with the data-shell attribute for the shell to target: 
<div class="site-shell" data-shell>
  <!-- Page-specific content goes here -->
</div>
Navigation links are defined in a links array at the top of shell.js. Modifying this array updates both the desktop navigation bar and the mobile drawer simultaneously. 
const links = [
  ['Home',        'index.html'],
  ['Calculator',  'pages/calculator.html'],
  ['Compare',     'pages/compare.html'],
  ['Saved Plans', 'pages/saved-plans.html'],
  ['How It Works','pages/how-it-works.html'],
  ['Articles',    'pages/articles.html'],
  ['Case Study',  'pages/case-study.html']
];
Each entry is a two-element array: [label, href]. The href values are root-relative paths resolved against the computed path prefix for the current page.

​
renderShell()

Injects the full page shell into the [data-shell] element. Called automatically on module load — you do not need to call it manually. The function performs the following steps:
  1. Reads location.pathname to compute the correct root-relative path prefix so that asset and navigation hrefs resolve correctly regardless of which subdirectory the page lives in.
  2. Compares each link’s href against the current path to identify the active page and applies the active CSS class to the matching link.
  3. Inserts the header (including the nav and mobile drawer) using insertAdjacentHTML('afterbegin', ...) on the [data-shell] element.
  4. Inserts the footer and toast container using insertAdjacentHTML('beforeend', ...) on the same element.
Returns: void
renderShell() is exported for completeness, but because it runs automatically on import, you will not normally need to import or invoke it directly.
If the page does not contain a [data-shell] element, renderShell() will silently do nothing and no shell markup will be injected.

​
toast(message)

Displays a temporary notification at the bottom centre of the screen. The toast auto-dismisses after 2400 ms.
​
message
string
required
The text to display inside the toast. Keep messages short — a single line of feedback such as "Plan saved" or "CSV exported".
Returns: void 
import { toast } from '../components/shell.js';

// Confirm a successful save
toast('Plan saved locally');

// Confirm a CSV export
toast('CSV exported');
The toast container element (a .toast div with role="status" and aria-live="polite") is injected by renderShell(). If renderShell() has not run yet when toast() is called, the call is a no-op and no notification is shown.
Because shell.js runs renderShell() on import, the toast container is available as soon as any other module imports from shell.js. In practice, the shell is always ready before user interactions can trigger a toast.

Build docs developers (and LLMs) love

Get started for freeTalk to us