Giter VIP home page Giter VIP logo

devhub-app-web's Introduction

Devhub

Lifecycle:Dormant

This is the primary repository for the BC Gov DevHub application. This is a mono repo holding multiple services that are coupled together. More details can be found in the schematic

Deploying Devhub

The Devhub has a ton of components that are stiched together that need to be deployed in a specific order. The best way to accomplish is is to first deploy the CI/CD pipelines (deploy-tron) to perform the work for you.

Pre Requisites

  • Obtain a Openshift Project Set (dev, test, tools, prod)
  • Apply for a realm in the 3 SSO instances (dev, test, prod)
  • Setup Network Policies for each namespace
      oc process -f openshift/templates/supporting-infrastructure/networkpolicy.yaml -p APP_NAME=platform-services -p NAMESPACE=<namespace> -p ENVIRONMENT=dev | oc apply -f - -n <namespace>-dev
    
  • Create a Service Account in the Dev SSO instance to perform the automated client creation in the CI/CD workflow. Ensure you have enough priviledges to manage clients with this service account!
    • when you have the service account user those credentials to create a secret in the tools namespace. oc process -f openshift/supporting-infrastructure/keycloak.secret.yaml -p KEYCLOAK_CLIENT_ID=... -p KEYCLOAK_CLIENT_SECRET=... | oc apply -f - This is for long term storage.
  • Setup an Algolia Production Account (this costs moolah) and collect your application id, search key and admin api key.
      oc process -f openshift/templates/web/algolia-build.secret.yaml \ 
      -p ALGOLIA_ADMIN_KEY= \
      -p GATSBY_ALGOLIA_APP_ID= \
      -p GATSBY_ALGOLIA_SEARCH_KEY= |
       oc apply -f -
    
  • Create the CI/CD service account that the Github Actions will utilize
   oc process -f openshift/templates/supporting-infrastructure/cicd.yaml -p TOOLS_NAMESPACE=<namespace> -p PROD_NAMESPACE=<namespace> -p TEST_NAMESPACE=<namespace> -p DEV_NAMESPACE=<namespace> | oc apply -f -
  • Obtain the SA Name and Credentials

  • Setup your GITHUB secrets so that the CI/CD workflows work correctly. These are the following secrets you will need to add.

ALGOLIA_API_KEY
ALGOLIA_APP_ID
ALGOLIA_SEARCH_KEY
DEV_NAMESPACE
TEST_NAMESPACE
TOOLS_NAMESPACE
PROD_NAMESPACE
# event brite key is optional
EVENT_BRITE_API_KEY 
# your key cloack service accout client id
KC_SA_CLIENT_ID
KC_SA_CLIENT_SECRET
# you can obtain the server url by inspecting the --server flag when copy and pasting your oc 
# login command
OPENSHIFT_SERVER_URL
OPENSHIFT_SA_NAME
# this is the openshift service account secret token
OPENSHIFT_SA_PASSWORD
# optional as described in schematic.md recommended not to use searchgate
SEARCHGATE_API_URL
SSO_REALM
# please note that your test and prod instances of the SSO_CLIENT should be exactly the same, the dev clients are created dynamically
SSO_CLIENT
  • Deploy deploy-tron and setup a Github App for your repository.

deploy tron will be your interface for CD with the devhub front end component

  • In order to deploy the Devhub Front End Component you will need to create the s2i builder image in your tools namespace. You can do that easily by
  oc process -f https://raw.githubusercontent.com/bcgov/s2i-caddy-nodejs/master/openshift/templates/build.yaml | 
  oc apply -f -

Deploying Devhub

It's as easy as creating a PR and running them command in your PR @deploy-tron deploy web to dev!

devhub-app-web's People

Contributors

actionanalytics avatar agehlers avatar andrewjun97 avatar caggles avatar cloudsmart avatar cvarjao avatar dependabot[bot] avatar dereksiemens avatar devhub-cicd[bot] avatar dlevinebc avatar jas29 avatar jleach avatar kant avatar ll911 avatar lukegonis avatar maxwardle avatar mitovskaol avatar monicag avatar nickcorcoran avatar orinevares avatar patricksimonian avatar rajpersram avatar repo-mountie[bot] avatar sheaphillips avatar shellyhan avatar shellyxuehan avatar snyk-bot avatar thegentlemanphysicist avatar ty2k avatar w8896699 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

devhub-app-web's Issues

Badges that reference SVG files from github in a markdown file don't work in devhub

Describe the bug
I have a markdown file in a repository that has an image [image](../../something.svg)
It appears to work when i view the markdown file from Github, but in the Devhub the image is broken.

What it looks like
screen shot 2018-11-22 at 10 43 19 am
What it should look like
screen shot 2018-11-22 at 10 43 39 am

Desktop (please complete the following information):

  • OS: Any
  • Browser Any

Smartphone (please complete the following information):

  • Device: Any
  • OS: Any
  • Browser Any

Have the intro section collapse on click of a persona

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

Collections/Sources should support overview content/pages/links

In some cases for a given collection/source, there is a natural entry point and or overview/index/abstract that is where users should/want to start. This may provide additional context for some of the resources/cards or may provide suggested navigation/order/path through the collection. There should be an obvious way to link to this overview from the card list view.

For example, for the Design System, the logical entry point is the "About" resource. As it happens, clicking the "About" card links to the design system page/site with side navigation that provides a sort of path through the content, but it is not explicit from the card list that About is the starting point. A simple thought would be that perhaps we could annotate overview/lead/entrypoint resources so they don't show as cards, but are displayed by clicking on the collection header?

Markdown files that use an absolute link that is not a web uri breaks

Describe the bug
if a markdown file has a link
with
owner: bcgov
repo: foo

[my link](README.md)

the file transformer doesn't transform this correctly.

To Reproduce
what happens

[my link](https://developer.gov.bc.ca/README.md)

Expected behavior
it should transfomr url using repo owner and name

[my link](https://github.com/repo/owner/blob/master/README.md)

or something like that?

Siphon should be able to target specific github files in the registry

Describe the solution you'd like
It would be awesome to be able to just request a specific file from a repo using a github URI or some other type of configuration

Describe alternatives you've considered
The only alternative would be to register the repo with a massive inline ignore configuration to ignore everything but the file described

OR

To register the repo with a (currently non-existant) include configuration

Additional context
Something like this in the registry would be amazing..

sourceType: github
sourceProperties:
  name: myrepo
  owner: owner
  file(s): https://github.com/bcgov/devhub-app-web/blob/master/docs/Readme.md

As a user I would like to have a curated collection of Github in Gov resources

Is your feature request related to a problem? Please describe.
There is some scattered content in the devhub about github but not a clear collection. With the collections #174 feature available. We can pull in a whole bunch of resources to describe the github in government journey

Describe the solution you'd like
A collection of github for gov resources

PropType Errors on page load

Describe the bug
getting prop type errors

To Reproduce
Steps to reproduce the behavior:

  1. Go to home page
  2. open dev tools
  3. See error

Expected behavior
no prop type errors

Screenshots

index.js:2177 Warning: Failed prop type: Invalid prop `actions[0].icon` supplied to `ActionsRibbon`, expected a ReactNode.
    in ActionsRibbon (created by Component Card Component)
    in Component Card Component (created by Github Cards Component)
    in div (created by Toggle)
    in div (created by Toggle)
    in Toggle (created by Github Cards Component)
    in div (created by Github Cards Component)
    in section (created by Github Cards Component)
    in Github Cards Component (at pages/index.js:46)
    in Flag (at pages/index.js:106)
    in div (at pages/index.js:105)
    in div (at pages/index.js:102)
    in main (at pages/index.js:60)
    in div (created by Layout)
    in Layout (created by Connect(Layout))
    in Connect(Layout) (at pages/index.js:55)
    in Index (created by Connect(Index))
    in Connect(Index) (created by PageRenderer)
    in PageRenderer (created by JSONStore)
    in JSONStore (created by EnsureResources)
    in ScrollContext (created by EnsureResources)
    in RouteUpdates (created by EnsureResources)
    in EnsureResources (created by RouteHandler)
    in RouteHandler (created by Root)
    in div (created by FocusHandlerImpl)
    in FocusHandlerImpl (created by Context.Consumer)
    in FocusHandler (created by RouterImpl)
    in RouterImpl (created by LocationProvider)
    in LocationProvider (created by Context.Consumer)
    in Location (created by Context.Consumer)
    in Router (created by Root)
    in Root
    in FlagsProvider (created by ConnectedFlagsProvider)
    in ConnectedFlagsProvider
    in Provider
    in _default (created by HotExported_default)
    in AppContainer (created by HotExported_default)
    in HotExported_default

as a developer I want the devhub to upgrade Gatsby to Version 2

It looks like gatsby version 2 has been released. Gatsby's site no longer offers v1 documentation. This is a good cue for us to migrate to the latest version. There are huge performance benefits to be had with the migration
gatsbyjs.org/blog/2018-09-17-gatsby-v2

gatsbyjs.org/docs/migrating-from-v1-to-v2

make sure to update gatsby-remark-autolink-headers package version to latest (it is specifically using an outdated version to work with gatsby v1)

documentation should have a template markdown file

Documentation should have a template markdown file that can be referenced or copied, specifically a markdown file with the front matter properties that are required for devhub to consume the markdown content.

As a user I should be able to search devhub content

Is your feature request related to a problem? Please describe.
The devhub has a lot of content now. It sure would be great if we could search through it!

Describe the solution you'd like
A search bar

Describe alternatives you've considered
No search bar?

Schmancier collection/source header presentation

It would be nice to spruce up the header displays in the card list view so that they can provide more visual appeal and cues to users.

For example, we could support icons to indicate the "type" of a collection (tutorial, guide, component set/library).

Connected to the "overview" issue, we could also contemplate having "fat/informational headers" - maybe even expandable to show a snippet of the overview information...Also maybe collection "metrics" (# content items, etc.)

Loading indicator on page load

Is your feature request related to a problem? Please describe.
When you load the devhub up. it takes some times for the cards to render and so there is a flicker.

Describe the solution you'd like
perhaps we can enable a loading spinner indicator while the cards are being rendered

Only see the welcome jumbotron once

Is your feature request related to a problem? Please describe.
After seeing the welcome to devhub jumbotron it'd be nice if it didn't render subsequent times

Support different types of authors in markdown/twittercard/opengraphs

Is your feature request related to a problem? Please describe.
I guess the problem could be is that the author attribute in markdown frontmatter or a twitter card or open graph OR some other type of metadata spec is assumed to be a github user.

Describe the solution you'd like
It would be nice if we could better annotate the type of author a user is
EG:

  • twitterCard
    <meta name="twitter:author" content="github:patricksimonian">
  • openGraph
    <meta name="og:author" content="github:patricksimonian">
  • frontmatter in markdown
---
author: gravatar:[email protected]
---

Additional context
I think allowing for this convention opens the door for many new exciting ways of integrating an author into the devhub. We could potentially pull profile data from different sources such as gravatar, github, and so on.

Can't reference a image by relative paths in markdown front matter

Describe the bug
I'm unable to reference an image in my markdown front matter by relative path or absolute path

To Reproduce

Sample Markdown

---
author: patricksimonian
description: description
title: title
image: /docs/images/myimage.png || ./images/myimages.png
---
markdown content below

Expected behavior
I'd expect that when this is transformed into an <img src="...">, when viewing the resource as a card, that the path to the image is properly processed with the original source location of the markdown file/repo

ie: <img src="https://www.github.com/owner/repo/blob/docs/images/myimage.png?raw=true">

Extra Info

This appears to be working correctly if an image is loaded via a twitter card?

Front Matter Generator Wizard

Is your feature request related to a problem? Please describe.
It can be hard to discern what front matter I need to add to my markdown files.

Describe the solution you'd like
A graphical interface where I can select/edit the front matter properties I want which then is converted into valid markdown front matter I can copy and paste

Describe alternatives you've considered
Reading Documentation

Additional context
This is ultra low priority, but just keeping it out there as a thought.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.