Skip to content

Latest commit

 

History

History
300 lines (210 loc) · 7.58 KB

README.md

File metadata and controls

300 lines (210 loc) · 7.58 KB

ODH Webcomponents

FRONTEND

Source Code

Get a copy of the repository:

git clone https://github.com/noi-techpark/odh-web-components-store.git

Change directory:

cd odh-web-components-store/frontend/

Requirements

Configuration

nuxt.config.js

Mode

mode: 'universal|spa'

Change mode to either 'universal' or 'spa'.

Universal mode supports server-side-rendering (ssr) but requires node.js to run.

Spa mode (single-page-application) only requires node.js to build the project.

Configuration

This can be done through a .env file. Copy .env.example to .env and adjust the values as you like.

hCaptcha

You must configure a hCaptcha API key that is valid for the domain your frontend is exposed on. You can optain such a key here: https://www.hcaptcha.com/

See VUE hCaptcha module for more details.

Key inside .env is HCAPTCHA_PUBLIC_KEY.

API

axios: {
    baseURL: 'http://localhost:9030'
}

Adjust the baseURL to where the API is running. The API is provided by "data-service" in the 'backend' package.

Local Development with Docker

We use docker-compose for local development.

Before starting the frontend using docker-compose it is necessary to build the application on Node 14.* using:

yarn install
yarn generate

Or you can use any Node version setting legacy openssl compatibility

NODE_OPTIONS=--openssl-legacy-provider yarn generate
# Change into directory
$ cd odh-web-components-store/frontend/

# Start up the application
$ docker-compose up

# To know on which address/port the application is listening to, run...
$ docker-compose logs

# If you like, you can enter the docker container to debug or run commands you like
$ docker-compose run --rm app bash

# Stop the docker instance
$ docker-compose stop app

See Build Setup for possible commands.

Build Setup

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn dev

# build for production and launch server
$ yarn build
$ yarn start

# generate static project
$ yarn generate

For detailed explanation on how things work, check out Nuxt.js docs.

Adding pages

You can easily add new pages by creating them in the /src/pages/ folder. See Nuxt documentation

See Nuxt i18n if you need translation.

Deployment

Chose one of the following ways depending on the 'mode' set during configuration

Single Page Application

# install dependencies and build the project
$ yarn install
$ yarn build

Copy the generated files in the 'dist' folder to your webroot.

Serve the files with a webserver like nginx or apache.

Universal Mode

# install dependencies and build the project
$ yarn install
$ yarn build

# start the server
$ yarn start

You will probably need a reverse proxy to add https and proxy the application from port 3000 to port 443 on your domain.

Create new static content pages

  1. Create a .vue file under the path inside pages where you want to create a new page. The directory structure corresponds to the structure of the url.
  2. Create a .md file with the same name in the same directory
  3. Import the md file in your vue file, for example:
import legally from './legally.md';
  1. Create a computed property with the content of the md file
computed: {
	md();
	{
		return legally;
	}
}
  1. Import the markdown page component
import MarkdownPage from '~/components/markdown-page';
  1. Include the markdown page component inside the html code and pass the computed property
<markdown-page :content="md"></markdown-page>
  1. Update the menues
    • Go to frontend/src/layouts/partials/header.vue and see the code there for how to do it, if you want to have it inside the main menue, which is only visible for desktop web page layouts
    • Go to frontend/src/layouts/partials/nav-menu.vue and see the code there. Some menue items are only visible for mobile devices, if the class mobile-only is present.
    • In general make sure that items are not presented twice in the header and nav-menu aka burger.

Embed a video in a static content page

Include the following code and replace the url of your video inside the url parameter

<video-player url=""></video-player>

Create a new banner

  1. Open src/components/banner.vue
  2. Add a new banner slide tag
<banner-slide><banner-slide></banner-slide></banner-slide>
  1. Customize the banner with tag parameters
  • "title": Title of the banner
  • "subtitle": Subtitle below the title
  • "imgUrl": Url of the background image
  • "path": Path to the page inside the a tag
  • "linkText": Text of the link
  1. Example
<banner-slide
	img-url="https://picsum.photos/1024/480/?image=52"
	title="Image"
	subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
          eros felis, tincidunt a tincidunt eget, convallis vel est. Ut
          pellentesque ut lacus vel interdum."
	link-text="learn more"
	path="/contact"
></banner-slide>

Update highlighted Webcomponents

To modify the highlighted web components displayed, you'll need to adjust the boolean attribute highlighted within the web component database. However, to initiate this change, you must contact a software architect as they have the necessary access and expertise to perform this task.

Information

Support

For support, please contact help@opendatahub.com.

Contributing

If you'd like to contribute, please follow the following instructions:

https://docs.opendatahub.com/en/latest/guidelines/contributors.html

Documentation

More documentation can be found at https://docs.opendatahub.com.

License

The code in this project is licensed under the GNU AFFERO GENERAL PUBLIC LICENSE Version 3 license. See the LICENSE.md file for more information.