@explorer-1/common

• What's included
• Getting Started
  • Include the assets in your project
  • Fonts
• Build your own component templates using our docs as a guide

What's included

This package includes compiled assets for Explorer-1 and assets shared with @explorer-1/vue.

@nasa-jpl/common/
├── dist/            <-- Compiled Assets
│ ├── css/
│ │ ├── explorer-1.min.css
│ │ └── font-face.css
│ ├
├── src/             <-- Source code, use by @explorer-1/vue
│ ├── fonts/
│ ├── images/
│ ├── js/
│ ├── public/
│ └── scss/
├── stylelint.config.js
├── tailwind.colors.ts
└── tailwind.config.ts

Getting Started

Install with npm or similar:

npm install --save @explorer-1/common

Include the assets in your project

Include all styles and scripts by adding the bundled CSS and JS to your project's HTML. You will need to retrieve the files from the installed package in node_modules/@explorer-1/common/dist/, place them somewhere in your project, and update the paths to point to the right location.

<!-- CSS -->
<link
  href="/path/to/explorer-1.min.css"
  rel="stylesheet"
/>

<!-- JavaScript -->
<script src="/path/to/explorer-1.min.js"></script>

The compiled CSS includes only the Tailwind CSS classes that are used by our team's products and in Explorer 1's documentation; other default Tailwind CSS classes are not available.

Fonts

The compiled CSS references fonts with the relative path of ../fonts/. You will need to add the fonts to your build process to ensure they are included in the relative path. An example of how to handle this is to write a Node script that copies the /dist/fonts/ folder to the correct path in your project.

your-project
├── css/
│   ├── explorer-1.min.css
├── fonts/
│   ├── archivo-narrow/
│   └── metropolis/
└── js/
    └── explorer-1.min.js

Preloading Fonts

If your project requires more control over font preloading, you can preload the font-face.css stylesheet in /dist/css/:

your-project
└── css/
    └── font-face.css

Then preload the CSS in your template followed by the necessary font files.

<!-- your-project.html -->
<link
  rel="preload"
  href="/path/to/font-face.css"
  as="style"
/>
<link
  rel="preload"
  href="/path/to/fonts/metropolis/Metropolis-Medium.woff2"
  as="font"
  type="font/woff2"
  crossorigin="true"
/>

Build your own component templates using our docs as a guide

Reference the Explorer 1 Storybook for HTML snippets you can use to create components and build your pages. Step-by-step instructions on how to copy HTML snippets can be found on the Getting Started Guide for Developers page.