create social app content for npm, github and linkedin

Author: lucasferreiralimax

package-lock.json

@@ -20,6 +20,7 @@
     "@angular/platform-browser": "^18.2.7",
     "@angular/platform-browser-dynamic": "^18.2.7",
     "@angular/router": "^18.2.7",
+    "angular-techs-logos": "^0.1.25",
     "rxjs": "~7.8.1",
     "slidecontent-angular": "^1.5.4",
     "tslib": "^2.7.0",

package.json

@@ -1,10 +1,4 @@
 <footer class="footer">
-  <a href="https://github.com/criar-art/slidecontent-angular" target="_blank">
-    <app-version></app-version>
-    <svg viewBox="0 0 25 25" width="30" xmlns="http://www.w3.org/2000/svg">
-      <path
-        d="M12 .5C5.37.5 0 5.78 0 12.292c0 5.211 3.438 9.63 8.205 11.188.6.111.82-.254.82-.567 0-.28-.01-1.022-.015-2.005-3.338.711-4.042-1.582-4.042-1.582-.546-1.361-1.335-1.725-1.335-1.725-1.087-.731.084-.716.084-.716 1.205.082 1.838 1.215 1.838 1.215 1.07 1.803 2.809 1.282 3.495.981.108-.763.417-1.282.76-1.577-2.665-.295-5.466-1.309-5.466-5.827 0-1.287.465-2.339 1.235-3.164-.135-.298-.54-1.497.105-3.121 0 0 1.005-.316 3.3 1.209.96-.262 1.98-.392 3-.398 1.02.006 2.04.136 3 .398 2.28-1.525 3.285-1.209 3.285-1.209.645 1.624.24 2.823.12 3.121.765.825 1.23 1.877 1.23 3.164 0 4.53-2.805 5.527-5.475 5.817.42.354.81 1.077.81 2.182 0 1.578-.015 2.846-.015 3.229 0 .309.21.678.825.56C20.565 21.917 24 17.495 24 12.292 24 5.78 18.627.5 12 .5z" />
-    </svg>
-    &#64;lucasferreiralimax
-  </a>
+  <app-social />
+  <app-version />
 </footer>

src/app/components/base/app-footer/app-footer.component.html

@@ -20,3 +20,13 @@
     margin: .5em;
   }
 }
+
+.social-links {
+  max-width: 290px;
+  display: flex;
+  margin: 0 auto 2rem;
+  ::ng-deep .tech-container {
+    width: 90px !important;
+    height: 90px;
+  }
+}

src/app/components/base/app-footer/app-footer.component.scss

@@ -0,0 +1,11 @@
+<div class="social-links">
+  <a href="https://npmjs.com/package/slidecontent-angular" target="_blank">
+    <angular-techs-logos name="npm" [hiddenLabel]="true" />
+  </a>
+  <a href="https://www.linkedin.com/in/lucasferreiralimax" target="_blank">
+    <angular-techs-logos name="linkedin" [hiddenLabel]="true" />
+  </a>
+  <a href="https://github.com/criar-art/slidecontent-angular" target="_blank">
+    <angular-techs-logos name="github" [hiddenLabel]="true" />
+  </a>
+</div>

src/app/components/base/app-social/app-social.component.html

@@ -0,0 +1,10 @@
+.social-links {
+  max-width: 290px;
+  display: flex;
+  margin: 1rem auto;
+  gap: .4rem;
+  ::ng-deep .tech-container {
+    width: 90px !important;
+    height: 90px;
+  }
+}

src/app/components/base/app-social/app-social.component.scss

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { AppSocialComponent } from './app-social.component';
+
+describe('AppSocialComponent', () => {
+  let component: AppSocialComponent;
+  let fixture: ComponentFixture<AppSocialComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AppSocialComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AppSocialComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/base/app-social/app-social.component.spec.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-social',
+  templateUrl: './app-social.component.html',
+  styleUrls: ['./app-social.component.scss']
+})
+export class AppSocialComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/components/base/app-social/app-social.component.ts

@@ -1,34 +1,35 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { RouterModule } from "@angular/router";
 
-import { AppHeaderComponent } from './app-header/app-header.component';
-import { AppNavigationComponent } from './app-navigation/app-navigation.component';
-import { AppLanguageComponent } from './app-language/app-language.component';
-import { AppLogoComponent } from './app-logo/app-logo.component';
-import { AppFooterComponent } from './app-footer/app-footer.component';
-import { AppVersionComponent } from './app-version/app-version.component';
+import { AppHeaderComponent } from "./app-header/app-header.component";
+import { AppNavigationComponent } from "./app-navigation/app-navigation.component";
+import { AppLanguageComponent } from "./app-language/app-language.component";
+import { AppLogoComponent } from "./app-logo/app-logo.component";
+import { AppFooterComponent } from "./app-footer/app-footer.component";
+import { AppVersionComponent } from "./app-version/app-version.component";
+import { AppSocialComponent } from "./app-social/app-social.component";
+import { AngularTechsLogosModule } from "angular-techs-logos";
 
 @NgModule({
   declarations: [
     AppHeaderComponent,
     AppNavigationComponent,
     AppLanguageComponent,
     AppLogoComponent,
+    AppSocialComponent,
     AppFooterComponent,
-    AppVersionComponent
+    AppVersionComponent,
   ],
   exports: [
     AppHeaderComponent,
     AppNavigationComponent,
     AppLanguageComponent,
     AppLogoComponent,
+    AppSocialComponent,
     AppFooterComponent,
-    AppVersionComponent
+    AppVersionComponent,
   ],
-  imports: [
-    CommonModule,
-    RouterModule
-  ]
+  imports: [CommonModule, RouterModule, AngularTechsLogosModule],
 })
-export class BaseModule { }
+export class BaseModule {}

src/app/components/base/base.module.ts

@@ -1,3 +1,5 @@
+<app-social />
+
 <div class="example">
   <h2 class="slide-title">
     <svg width="60px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

src/app/views/home/home.component.html

@@ -6,7 +6,6 @@
   box-shadow: 0 15px 25px rgba(0, 0, 0, .06);
 
   &:first-of-type {
-    margin-top: 2rem;
     padding-top: 0;
     border-top: 1px solid #eee;
     box-shadow: 0 15px 25px rgba(0, 0, 0, .06), 0 -5px 15px rgba(0, 0, 0, .02);
@@ -47,3 +46,14 @@ h3 {
     filter: saturate(2) brightness(1.2);
   }
 }
+
+.social-links {
+  max-width: 320px;
+  display: flex;
+  margin: 1rem auto;
+
+  .tech-container {
+    width: 90px !important;
+    height: 90px;
+  }
+}

src/app/views/home/home.component.scss

@@ -1,5 +1,6 @@
 import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
+import { BaseModule } from "src/app/components/base/base.module";
 
 import { HomeComponent } from "./home.component";
 
@@ -9,6 +10,6 @@ import { SlideContentAngular } from "slidecontent-angular";
 
 @NgModule({
   declarations: [HomeComponent],
-  imports: [SlideContentAngular, CommonModule, HomeRoutingModule],
+  imports: [SlideContentAngular, CommonModule, HomeRoutingModule, BaseModule],
 })
 export class HomeModule {}

src/app/views/home/home.module.ts

@@ -39,3 +39,7 @@ body {
 b {
   font-weight: bold;
 }
+
+figure {
+  margin: 0px !important;
+}