https://github.com/Appsilon/rhinoverse.dev

The landing page for Rhinoverse: a collection of open-source R packages for enterprise Shiny apps.
https://github.com/Appsilon/rhinoverse.dev

Last synced: about 1 month ago
JSON representation

The landing page for Rhinoverse: a collection of open-source R packages for enterprise Shiny apps.

• Host: GitHub
• URL: https://github.com/Appsilon/rhinoverse.dev
• Owner: Appsilon
• Created: 2020-08-04T11:38:00.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2024-05-23T08:53:51.000Z (4 months ago)
• Last Synced: 2024-07-29T16:35:31.841Z (about 2 months ago)
• Language: JavaScript
• Homepage: https://rhinoverse.dev/
• Size: 1.59 MB
• Stars: 10
• Watchers: 19
• Forks: 1
• Open Issues: 5
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• jimsghstars - Appsilon/rhinoverse.dev - The landing page for Rhinoverse: a collection of open-source R packages for enterprise Shiny apps. (JavaScript)

README

        
# rhinoverse.dev

The landing page for Rhinoverse: a collection of open-source R packages for enterprise Shiny apps.

## Development

Install all the necessary dependencies based on package.json file:

```

npm install

```

In the project directory, you can run:

```

npm start

```

to run the app in the development mode.

Open [http://localhost:9000](http://localhost:9000) to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

## Editing content

Grid of hexagonal cells and packages descriptions are generated dynamically in JS. In order to **edit packages content**, like descriptions and links, or to **add new package** to the landing page, you basically need to modify `libraries.js` and/or `hexData.js` files.

### `libraries.js`

This file contains an array of objects defining all the packages. Each object has specific keys:

- `id` - string to be used to create css classes and find SVG icon file with exactly the same name

- `heading` - string being a package title

- `paragraphs` - array of strings describing a package

- `repoLink` - url address of github repo

- `demoLink` - url address of demo app

### `hexData.js`

The file contains nested arrays for each media query breakpoint. It represents the actual hexagonal layout of all cells and their content and properties.

1. The **layout** is an array containing another arrays serving as grid's rows.

2. Each **row's** element is an array representing single cell.

3. Each **cell's** first element is a number related to its appearance (css class)

4. Each cell's second element is an object with optional keys:

- `library` - name of the library matching SVG file name and library id in libraries.js

- `title` - string displayed below SVG icon on mobile devices, if `library` is provided

- `logo` - id of logo SVG symbol

- `url` - url specified for a link element

- `text` - string displayed within the cell

To have more clear visual representiation of hexagonal grid in code, it's recommended to assign an object to one-letter variable prefixed by `_` sign, e.g. `_A`. This way it's easier to modify and add new cells to existing layouts.

### SVG file

If you are adding a new package, please provide SVG file with a logo and place it in `static/svg/` directory. SVG file name should be the same as the `id` specified in `libraries.js` and `library` specified in `hexData.js`, in order to be displayed correctly.

## Deployment

The `.github/deploy.yml` workflow will automatically build and deploy the page upon push to `main`.