• Company Profile UI Header (Logo, Products, Services, Pricing --- Left , Request for Demo, Contact Us)

1. Implement pricing page

Supplementary Info

Click images below for more information about planned result

Open Template Hub - Feature Request

Description

Implement a terminal like card (not functionality, just the looking)

Supplementary Info

Open Template Hub © 2021

1. Implement testimonial component

Supplementary Info

Click images below for more information about planned result

1. Implement a terminal like card

Supplementary Info

Click images below for more information about planned result

Open Template Hub - Feature Request

Description

• Create a reusable app-card
  • Edit card default ng-templates and default styles ✅
• Move old cards from app-card1 to app-card (mostly done, check code for the ones still using app-card1 and change)
  • In any order

Supplementary Info

Open Template Hub © 2021

Open Template Hub - Feature Request

Description

1. create contact card form
2. add contact us link to both headers

Supplementary Info

Links, images, screenshots etc.

https://stripe.com/contact/sales

Open Template Hub © 2021

{BUG_DESCRIPTION}

Supplementary Info

Click images below for more information about the bug

Open Template Hub - Quality Increase

Description

Define the quality update request clearly

Supplementary Info

Links, images, screenshots etc.

Official documentation: https://sass-lang.com/documentation

Open Template Hub © 2021

Open Template Hub - Feature Request

Description

Define the feature clearly

Supplementary Info

Links, images, screenshots etc.

Open Template Hub © 2021

Open Template Hub - Feature Request

Description

Inspirational links added, please implement the design components that you think acceptable in OTH design guidelines

Supplementary Info

Links, images, screenshots etc.

https://github.com/logos
https://www.toptal.com/branding
https://about.twitter.com/en/who-we-are/brand-toolkit
https://brand.heroku.com
https://www.mongodb.com/brand-resources

Open Template Hub © 2021

General fixes

{BUG_DESCRIPTION}

Supplementary Info

Click images below for more information about the bug

{BUG_DESCRIPTION}

Supplementary Info

Click images below for more information about the bug

1. Add prices to product_line structure

• 3 products per line
• add dealable true/false

2. https://www.hellosign.com/features

Supplementary Info

      {
        key: 'auth-server',
        name: 'Auth Server',
        description: 'Authentication Server Template supporting both regular signup and login processes and login with social networks that support OAuth and OAuth2.0',
        href: environmentCommon.website.github.url + environmentCommon.oth.social.github,
        logo: 'https://raw.githubusercontent.com/open-template-hub/open-template-hub.github.io/master/assets/logo/server/auth-server-logo.png',
        heroImage: 'assets/common/server/authentication.png',
        counters: [
          {
            name: 'Npm Downloads',
            value: '10+ million'
          },
          {
            name: 'Server Types',
            value: '3'
          },
          {
            name: 'UI Types',
            value: '5'
          }
        ],
        features: [
            {
              name: 'Signature requests',
              description: 'Customers that pay per user can send out as many signature requests as they want per month!',
            },
            {
              name: 'Templates',
              description: 'Streamline documents that need to be reused and sent out for eSignature frequently.',
            },
            {
              name: 'Templates',
              description: 'Streamline documents that need to be reused and sent out for eSignature frequently.',
            }
        ],
        pricingOptions: [
          {
            title: 'STARTER',
            price: {
              currency: '$',
              value: '9',
              subscriptionTime: 'mo.'
            },
            features: [ 'Up to 5 users', 'Maximum 100 photos/mo.', '50 queries', 'yes', 'no' ],
            styles: {
              width: '300px',
              height: '400px',
              fontSize: '1em',
              featureHeight: '10em'
            }
          }
        ]
      },

this issue and branch created from this issue shows how workflow is working

Open Template Hub - Bug Report

Please define the problem in the sections below

Bug Description

Define the problem clearly

Supplementary Info

Links, images, screenshots etc.

Open Template Hub © 2021

1. Implement business partners component

Supplementary Info

Click images below for more information about planned result

-> Expected result

Open Template Hub - Feature Request

Description

Just replace the existing code with the ones below:

Supplementary Info

external.component.html

<div class="splash-content flex-layout-column flex-center-center">
  <div class="splash-logos flex-layout-row flex-center-center">
    <img [src]="brand.brandLogo" alt="logo"/>
    <i aria-hidden="true" class="fa fa-arrow-alt-circle-right success-text"></i>
    <img [src]="website.logo" alt="partner"
         onerror="this.src='./assets/common/globe.png'"/>
  </div>
  <div class="alert-with-icon">
    <i aria-hidden="true" class="fas fa-info fa-lg fa-fw success-text"></i>
    <p>
      {{ info }}
    </p>
    <br />
    <p>
      {{ 'Will be redirected to: ' }}<br/><a class="link green-theme" (click)="redirect()">{{ href }}</a>
    </p>
  </div>
  <div class="external-component-button-wrapper">
    <app-button1 [text]="'Home'" [lighterContrast]="true" [themeColor]="ThemeColorSettings.green" [isSleekButton]="true"
                 transparent="true" [routerLink]="URLS.root">
    </app-button1>
    <app-button1 [text]="'Proceed'" [lighterContrast]="true" [themeColor]="ThemeColorSettings.green"
                 [isSleekButton]="true" transparent="true" (click)="redirect()">
    </app-button1>
  </div>
</div>

external.component.ts

import { Component } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { environmentCommon } from '../../../../environments/environment-common';
import { ThemeColorSettings, URLS } from '../../../data/constant';
import { ThemeService } from '../../../service/theme/theme.service';

@Component( {
  selector: 'app-external',
  templateUrl: './external.component.html',
  styleUrls: [ './external.component.scss' ]
} )
export class ExternalComponent {

  href: any;
  info: string;
  website: any;

  brand = {
    brandLogo: '',
  };

  ThemeColorSettings = ThemeColorSettings;
  URLS = URLS;

  constructor(
      private route: ActivatedRoute,
      private router: Router,
      private themeService: ThemeService
  ) {
    this.brand = this.themeService.brand;

    this.route.queryParams.subscribe( params => {
      this.href = params.href;
      this.info = params.info;

      for ( const key in environmentCommon.website ) {
        if ( this.href.startsWith( environmentCommon.website[ key ].url ) ) {
          this.website = environmentCommon.website[ key ];
          break;
        }
      }

      if ( !this.website ) {
        const url = new URL( this.href );

        const favicon = 'https://www.google.com/s2/favicons?sz=64&domain=' + url.origin;

        this.website = {
          logo: favicon
        };
      }
    } );
  }

  redirect() {
    window.location.href = this.href;
  }
}

Open Template Hub © 2021

Open Template Hub - Feature Request

Description

Collect github star, fork and release versions for each project from github api and update the project page with counters

Supplementary Info

Links, images, screenshots etc.

Open Template Hub © 2021

Open Template Hub - Quality Increase

Description

An open ended issue for using SCSS functionalities to make stylesheet files more readable, reusable.

Goal: Having at most 1 class name for html tag we have in the site. Rest should be done in the scss via @mixin, @extend and other scss tag with correct importing mechanism.

Some of the functionalities that we can use:

• & parent selector: https://sass-lang.com/documentation/style-rules/parent-selector
• variables and properties: https://sass-lang.com/documentation/variables (we will still be using css defined vars (--theme-color etc.) too, do not remove them)
• interpolation: https://sass-lang.com/documentation/interpolation
• @use: https://sass-lang.com/documentation/at-rules/use (Do not use scss' @import)
• @mixin and @include: https://sass-lang.com/documentation/at-rules/mixin
• @extend: https://sass-lang.com/documentation/at-rules/extend

Supplementary Info

Docs: https://sass-lang.com/documentation

Open Template Hub © 2021

Open Template Hub - Feature Request

Description

Remove the download counters from home page and add correct counters to server generator and app generator using the following document below

Supplementary Info

https://github.com/npm/registry/blob/master/docs/download-counts.md

Open Template Hub © 2021

Open Template Hub - Workflow Request

Description

Define the workflow request clearly

Supplementary Info

Links, images, screenshots etc.

Open Template Hub © 2021

Open Template Hub - Feature Request

Description

• add price plan features table to the product page
• add view pricing link and redirect to pricing page
• add pricing link to the landing layout top nav and bottom nav

Supplementary Info

https://www.hellosign.com/features

Open Template Hub © 2021

1. https://www.hellosign.com/features

Supplementary Info

      {
        key: 'auth-server',
        name: 'Auth Server',
        description: 'Authentication Server Template supporting both regular signup and login processes and login with social networks that support OAuth and OAuth2.0',
        href: environmentCommon.website.github.url + environmentCommon.oth.social.github,
        logo: 'https://raw.githubusercontent.com/open-template-hub/open-template-hub.github.io/master/assets/logo/server/auth-server-logo.png',
        heroImage: 'assets/common/server/authentication.png',
        counters: [
          {
            name: 'Npm Downloads',
            value: '10+ million'
          },
          {
            name: 'Server Types',
            value: '3'
          },
          {
            name: 'UI Types',
            value: '5'
          }
        ],
        features: [
            {
              name: 'Signature requests',
              description: 'Customers that pay per user can send out as many signature requests as they want per month!',
            },
            {
              name: 'Templates',
              description: 'Streamline documents that need to be reused and sent out for eSignature frequently.',
            },
            {
              name: 'Templates',
              description: 'Streamline documents that need to be reused and sent out for eSignature frequently.',
            }
        ],
        pricingOptions: [
          {
            title: 'STARTER',
            price: {
              currency: '$',
              value: '9',
              subscriptionTime: 'mo.'
            },
            features: [ 'Up to 5 users', 'Maximum 100 photos/mo.', '50 queries', 'yes', 'no' ],
            styles: {
              width: '300px',
              height: '400px',
              fontSize: '1em',
              featureHeight: '10em'
            }
          }
        ]
      },

Open Template Hub - Bug Report

Description

• Reduce visible element size to 3
• Remove 1200 media config from code

Supplementary Info

Links, images, screenshots etc.

Open Template Hub © 2021

1. create product page
2. add creative common licensed images from google or try shutter stock. find similar themed images.

Open Template Hub - Feature Request

Description

Add team members design like testimonials design, to the team behind the Open Template Hub part of about us page

Supplementary Info

Links, images, screenshots etc.

https://dribbble.com/shots/4648161-Our-Team-Page

Open Template Hub © 2021

Open Template Hub - Bug Report

Description

Please make select box rounded too just like button design

Supplementary Info

Links, images, screenshots etc.

Open Template Hub © 2021

Open Template Hub - Feature Request

Description

Define the feature clearly

Supplementary Info

https://stripe.com

Open Template Hub © 2021

1. {ACTION_ITEM}

• {CONDITION}

Supplementary Info

Click images below for more information about planned result

{BUG_DESCRIPTION}

Supplementary Info

Click images below for more information about the bug

Open Template Hub - Feature Request

Description

Define the feature clearly

Supplementary Info

Links, images, screenshots etc.

Open Template Hub © 2021

Open Template Hub - Dependency Update

Description

List of dependencies to be updated

Supplementary Info

Links, images, screenshots etc.

Open Template Hub © 2021

Open Template Hub - Documentation Request

Description

Define the expected documentation clearly

Supplementary Info

Links, images, screenshots etc.

Open Template Hub © 2021

{BUG_DESCRIPTION}

Supplementary Info

Click images below for more information about the bug

Open Template Hub - Documentation Request

Description

Define the expected documentation clearly

Supplementary Info

Links, images, screenshots etc.

Open Template Hub © 2021

Open Template Hub - Feature Request

Description

I implemented something similar in my mind just as an inspiration please use the code below to continue.
Please also create a new component for this extending version of swiper-wrapper component

Supplementary Info

swiper-wrapper-component.html

<swiper
    [slidesPerView]="1"
    [spaceBetween]="10"
    [loop]="true"
    [autoplay]="{
      delay: 2500,
      disableOnInteraction: false
    }"
    [loopFillGroupWithBlank]="true"
    [pagination]="isPaginationEnabled ? {
      clickable: true
    } : undefined"
    [navigation]="isNavigationEnabled"
    [breakpoints]="breakpoints">
  <ng-template *ngFor="let partner of partners" swiperSlide>
    <img [src]="partner.brandLogo" alt="logo" class="brand-logo " [class.grayscale]="isGrayscale" height="90"/>
  </ng-template>
</swiper>

swiper-wrapper-component.scss

@use '../../../../../node_modules/swiper/swiper-bundle.min.css';

app-swiper-wrapper {
  width: 65%;
  margin: 0 auto;
  position: relative;
}

.swiper {
  width: 100%;
  height: 100%;
  position: initial;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: transparent;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  object-fit: cover;

  &.grayscale {
    filter: contrast(0);
  }
}

.swiper-button-prev {
  left: -40px;
}

.swiper-button-next {
  right: -40px;
}

.swiper-button-next, .swiper-button-prev {
  color: var(--contrast);
}

.swiper-button-next::after, .swiper-button-prev::after {
  font-size: 20px;
}

.swiper-pagination-bullet-active {
  background: var(--theme-color);
}

/*
@media only screen and (max-width: 999px) {
  .swiper-button-next::after, .swiper-button-prev::after {
    display: none;
  }
}*/

swiper-wrapper-component.ts

import { Component, Input, ViewEncapsulation } from '@angular/core';
import SwiperCore, { Autoplay, Navigation, Pagination } from 'swiper';
import { Partner } from '../../../model/partner/partner.model';

SwiperCore.use( [ Pagination, Navigation, Autoplay ] );

@Component( {
  selector: 'app-swiper-wrapper',
  templateUrl: './swiper-wrapper.component.html',
  styleUrls: [ './swiper-wrapper.component.scss' ],
  encapsulation: ViewEncapsulation.None,
} )

export class SwiperWrapperComponent {
  @Input() partners: Partner[] = [];
  @Input() isNavigationEnabled = false;
  @Input() isPaginationEnabled = false;
  @Input() isGrayscale = false;
  @Input() breakpoints: any = {};
}

home.component.html

...
  <app-swiper-wrapper [partners]="PARTNERS" [isGrayscale]="true" [isNavigationEnabled]="true"
                      [isPaginationEnabled]="true" [breakpoints]="{
      '640': {
        slidesPerView: 1,
        spaceBetween: 30
      },
      '768': {
        slidesPerView: 2,
        spaceBetween: 40
      },
      '1200': {
        slidesPerView: 4,
        spaceBetween: 50
      }
      }">
  </app-swiper-wrapper>
  <div class="auth-server-social-login-wrapper">
    <h5>Social logins supported</h5>
    <h6>(and any other OAuth1 and OAuth2 supporting apps and websites)</h6>
    <div class="social-login-wrapper">
      <img [src]="brand.brandLogo" alt="logo" class="brand-logo" width="100"/>
      <i aria-hidden="true" class="fa fa-check-circle success-text"></i>
      <app-swiper-wrapper [partners]="SOCIAL_LOGIN_PARTNERS"></app-swiper-wrapper>
    </div>
  </div>
...

home.component.scss

...
.auth-server-social-login-wrapper {
  padding: 5vh 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.social-login-wrapper {
  padding-top: 2vh;
  width: 350px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  & .brand-logo {
    margin: 0 auto;
  }
}

.social-login-wrapper app-swiper-wrapper {
  height: 100px;
  width: 100px;
}
...

home.component.ts

...
  SOCIAL_LOGIN_PARTNERS: Partner[] = [];
  constructor(
    private formBuilder: FormBuilder,
    public router: Router,
    private authenticationService: AuthenticationService,
    private themeService: ThemeService,
    private npmProviderService: NpmProviderService
  ) {
    for ( const website in environmentCommon.website ) {
      // filter only oauth configured websites
      if ( environmentCommon.website[ website ].tag && environmentCommon.website[ website ].logo ) {
        console.log( environmentCommon.website[ website ].logo );
        this.SOCIAL_LOGIN_PARTNERS.push({ brandLogo: environmentCommon.website[ website ].logo });
      }
    }
...

Open Template Hub © 2021

Open Template Hub - Feature Request

Description

• EN
• FR

Supplementary Info

Links, images, screenshots etc.

Open Template Hub © 2021

Open Template Hub - Feature Request

Description

• Why Open Template Hub
• Maybe add terminal component with generator's install instructions

Supplementary Info

Links, images, screenshots etc.

Open Template Hub © 2021

Open Template Hub - Feature Request

Description

Define the feature clearly

Supplementary Info

Links, images, screenshots etc.

Open Template Hub © 2021

Open Template Hub - Feature Request

Description

add a notification bell left to the contact us and it will have red dot after 15 seconds and when it clicked by user show some advertisement message like 50% off at orchestration server.

Supplementary Info

Links, images, screenshots etc.

Open Template Hub © 2021

{BUG_DESCRIPTION}

Supplementary Info

Click images below for more information about the bug

{BUG_DESCRIPTION}

Supplementary Info

Click images below for more information about the bug

Open Template Hub - Feature Request

Description

• Add docs homepage that includes getting started and links to the projects’ doc links
• Add docs link to the footer
• Add docs page that includes components for installation usage etc of the projects for each project
• Add docs link to the project page

Supplementary Info

Links, images, screenshots etc.

Open Template Hub © 2021

Open Template Hub - Feature Request

Description

1. Add prices to product_line structure

• 3 products per line
• add dealable true/false

Supplementary Info

https://www.hellosign.com/features

Expected structure

{
  key: 'auth-server',
  name: 'Auth Server',
  description: 'Authentication Server Template supporting both regular signup and login processes and login with social networks that support OAuth and OAuth2.0',
  href: environmentCommon.website.github.url + environmentCommon.oth.social.github,
  logo: 'https://raw.githubusercontent.com/open-template-hub/open-template-hub.github.io/master/assets/logo/server/auth-server-logo.png',
  heroImage: 'assets/common/server/authentication.png',
  counters: [
    {
      name: 'Npm Downloads',
      value: '10+ million'
    },
    {
      name: 'Server Types',
      value: '3'
    },
    {
      name: 'UI Types',
      value: '5'
    }
  ],
  features: [
      {
        name: 'Signature requests',
        description: 'Customers that pay per user can send out as many signature requests as they want per month!',
      },
      {
        name: 'Templates',
        description: 'Streamline documents that need to be reused and sent out for eSignature frequently.',
      },
      {
        name: 'Templates',
        description: 'Streamline documents that need to be reused and sent out for eSignature frequently.',
      }
  ],
  pricingOptions: [
    {
      title: 'STARTER',
      price: {
        currency: '$',
        value: '9',
        subscriptionTime: 'mo.'
      },
      features: [ 'Up to 5 users', 'Maximum 100 photos/mo.', '50 queries', 'yes', 'no' ],
      styles: {
        width: '300px',
        height: '400px',
        fontSize: '1em',
        featureHeight: '10em'
      }
    }
  ]
}

Open Template Hub © 2021

1. create contact card form
2. add contact us link to both headers

https://stripe.com/contact/sales

Open Template Hub - Documentation Request

Description

Create a sitemap generator task using the link below and add it to package json scripts

Supplementary Info

Links, images, screenshots etc.

https://medium.com/@iamssurya/generating-xml-sitemaps-for-angular-react-73514c2a62a6

Open Template Hub © 2021