Merge pull request #179 from sonderformat-llc/refactor/sdk-quickstart-update

refactor(SDK): move up quickstart to getting started

Author: synedra

packages/sdk-angular/README.md

@@ -4,14 +4,14 @@ An SDK for using FusionAuth in Angular applications.
 
 -   [Overview](#overview)
 -   [Getting Started](#getting-started)
+  -   [Quickstart](#quickstart)
   -   [Installation](#installation)
 -   [Usage](#usage)
   -   [FusionAuthService](#fusionauthservice)
   -   [Pre-built buttons](#pre-built-buttons)
   -   [State Parameter](#state-parameter)
   -   [SSR](#ssr)
 -   [Known issues](#known-issues)
--   [Quickstart](#quickstart)
 -   [Documentation](#documentation)
 -   [Releases](#releases)
 
@@ -57,6 +57,12 @@ compliant identity server.
 
 ## Getting Started
 
+If you are new to Angular development, you may want to start with the Quickstart guide. If you are already familiar with Angular development, skip to the Configuration section.
+
+### Quickstart
+
+See the [FusionAuth Angular Quickstart](https://fusionauth.io/docs/quickstarts/quickstart-javascript-angular-web) for a full tutorial on using FusionAuth and Angular.
+
 ### Installation
 
 NPM:
@@ -183,10 +189,6 @@ The SDK supports Angular applications using SSR. No additional configuration is
 
 None.
 
-## Quickstart
-
-See the [FusionAuth Angular Quickstart](https://fusionauth.io/docs/quickstarts/quickstart-javascript-angular-web) for a full tutorial on using FusionAuth and Angular.
-
 ## Documentation
 
 [Full library documentation](https://github.com/FusionAuth/fusionauth-javascript-sdk/tree/main/packages/sdk-angular/docs)

packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fa-button.scss

@@ -0,0 +1,16 @@
+.fa-button {
+  padding: 16px 16px 13px 16px;
+  border-radius: 8px;
+  background-color: #083b94;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 18px;
+  font-weight: 600;
+  text-align: center;
+  color: #fff;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  width: 400px;
+}

packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-login.button/fusion-auth-login-button.component.scss

@@ -1,15 +0,0 @@
-.fa-button {
-  padding: 16px 16px 13px 16px;
-  border-radius: 8px;
-  background-color: #083b94;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
-    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  font-size: 18px;
-  font-weight: 600;
-  text-align: center;
-  color: #fff;
-  &:hover {
-    cursor: pointer;
-  }
-  width: 400px;
-}

packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-login.button/fusion-auth-login-button.component.ts

@@ -4,7 +4,7 @@ import { FusionAuthService } from '../../fusion-auth.service';
 @Component({
   selector: 'fa-login',
   templateUrl: './fusion-auth-login-button.component.html',
-  styleUrls: ['./fusion-auth-login-button.component.scss'],
+  styleUrls: ['../fa-button.scss', './fusion-auth-login-button.component.scss']
 })
 export class FusionAuthLoginButtonComponent {
   @Input() state: string | undefined;

packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-logout.button/fusion-auth-logout-button.component.html

@@ -1,3 +1,3 @@
-<button class="fa-logout-button" (click)="logout()">
-  <span>logout</span>
-</button>
+<button class="fa-button" (click)="logout()">
+  <span>Logout</span>
+</button>

packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-logout.button/fusion-auth-logout-button.component.scss

@@ -1,14 +0,0 @@
-.fa-logout-button {
-  padding: 7px 13px;
-  border-radius: 3px;
-  display: block;
-  border: solid 1px #083b94;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
-    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  font-size: 12px;
-  text-align: center;
-  color: #083b94;
-  &:hover {
-    cursor: pointer;
-  }
-}

packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-logout.button/fusion-auth-logout-button.component.ts

@@ -4,7 +4,7 @@ import { FusionAuthService } from '../../fusion-auth.service';
 @Component({
   selector: 'fa-logout',
   templateUrl: './fusion-auth-logout-button.component.html',
-  styleUrls: ['./fusion-auth-logout-button.component.scss'],
+  styleUrls: ['../fa-button.scss', './fusion-auth-logout-button.component.scss']
 })
 export class FusionAuthLogoutButtonComponent {
   constructor(private fusionAuth: FusionAuthService) {}

packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-register.button/fusion-auth-register-button.component.scss

@@ -1,16 +0,0 @@
-.fa-button {
-  padding: 16px 16px 13px 16px;
-  border-radius: 8px;
-  background-color: #083b94;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
-    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  font-size: 18px;
-  font-weight: 600;
-  text-align: center;
-  color: #fff;
-  &:hover {
-    cursor: pointer;
-  }
-
-  width: 400px;
-}

packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-register.button/fusion-auth-register-button.component.ts

@@ -4,7 +4,7 @@ import { FusionAuthService } from '../../fusion-auth.service';
 @Component({
   selector: 'fa-register',
   templateUrl: './fusion-auth-register-button.component.html',
-  styleUrls: ['./fusion-auth-register-button.component.scss'],
+  styleUrls: ['../fa-button.scss', './fusion-auth-register-button.component.scss']
 })
 export class FusionAuthRegisterButtonComponent {
   @Input() state: string | undefined;

packages/sdk-react/README.md

@@ -4,6 +4,7 @@ An SDK for using FusionAuth in React applications.
 
 - [Overview](#overview)
 - [Getting Started](#getting-started)
+  - [Quickstart](#quickstart)
   - [Installation](#installation)
   - [Configuration](#configuration)
     - [Configuration with NextJS](#configuration-with-nextjs)
@@ -13,7 +14,6 @@ An SDK for using FusionAuth in React applications.
 	- [Protecting content](#protecting-content)
 	- [UI Components](#ui-components)
 - [Known issues](#known-issues)
-- [Quickstart](#quickstart)
 - [Documentation](#documentation)
 - [Formatting](#formatting)
 - [Releases](#releases)
@@ -61,6 +61,12 @@ compliant identity server.
 
 ## Getting Started
 
+If you are new to React development, you may want to start with the Quickstart guide. If you are already familiar with React development, skip to the Configuration section.
+
+### Quickstart
+
+See the [FusionAuth React Quickstart](https://fusionauth.io/docs/quickstarts/quickstart-javascript-react-web) for a full tutorial on using FusionAuth and React.
+
 ### Installation
 
 NPM:
@@ -226,10 +232,6 @@ export const AccountPage = () => (
 
 None.
 
-## Quickstart
-
-See the [FusionAuth React Quickstart](https://fusionauth.io/docs/quickstarts/quickstart-javascript-react-web) for a full tutorial on using FusionAuth and React.
-
 ## Documentation
 
 [Full library documentation](https://github.com/FusionAuth/fusionauth-javascript-sdk/tree/main/packages/sdk-react/docs)