From 990832b7b75feb0a924a78bcaa830011a23d536f Mon Sep 17 00:00:00 2001
From: Gustavo Quinalha <gustavo_quinalha@hotmail.com>
Date: Tue, 16 Jul 2024 18:10:12 -0300
Subject: [PATCH] update

---
 src/app/app.component.html                    | 15 ++--
 src/app/app.component.ts                      | 87 +++----------------
 .../code-result/code-result.component.html    | 16 +++-
 .../code-result/code-result.component.ts      | 20 +++++
 .../components/preview/preview.component.html | 22 ++---
 src/app/utils/code.js                         | 52 +++++++++++
 src/index.html                                | 32 ++-----
 tsconfig.json                                 |  2 +
 8 files changed, 131 insertions(+), 115 deletions(-)
 create mode 100644 src/app/utils/code.js

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 8a21b49..ccb5c55 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -4,7 +4,7 @@
   <div
     class="resize-none md:resize-x w-full md:w-[33.3333%] flex-grow mx-auto flex flex-col h-full md:h-[calc(100vh-56px)] overflow-x-hidden overflow-y-auto md:overflow-y-scroll border-r border-zinc-800"
   >
-    <form [formGroup]="form" (ngSubmit)="onSubmit()" class="p-4 md:p-8 w-full">
+    <form [formGroup]="form" class="p-4 md:p-8 w-full">
       <div class="w-full max-w-xs text-center mx-auto">
         <h1 class="mb-4 md:mb-8 text-sm leading-4 text-zinc-300">
           Just type the data and generate the meta tags for your website
@@ -13,7 +13,7 @@ <h1 class="mb-4 md:mb-8 text-sm leading-4 text-zinc-300">
       <div class="w-full grid grid-cols-1 flex-col gap-8">
         <div
           class="relative flex flex-col gap-1"
-          *ngFor="let field of formFields"
+          *ngFor="let field of metatagsList"
         >
           <ng-container *ngIf="field.type === 'text' || field.type === 'color'">
             <label [for]="field.name" class="leading-4 text-xs text-zinc-200">{{
@@ -22,7 +22,7 @@ <h1 class="mb-4 md:mb-8 text-sm leading-4 text-zinc-300">
 
             <div
               *ngIf="field.name === 'image' && form?.get('image')"
-              class="w-full min-h-60 rounded bg-zinc-800 border border-zinc-800 overflow-hidden"
+              class="w-full min-h-60 rounded bg-zinc-800 border border-zinc-700 overflow-hidden"
             >
               <img *ngIf="form?.get('image')?.value" [src]="form.get('image')?.value" width="100%" alt="" />
             </div>
@@ -36,7 +36,7 @@ <h1 class="mb-4 md:mb-8 text-sm leading-4 text-zinc-300">
                 [formControlName]="field.name"
                 class="h-8 text-xs w-full bg-zinc-900 rounded border border-zinc-800 focus:border-zinc-500 focus:ring-2 focus:ring-zinc-200 outline-none text-zinc-200 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
               />
-              <div class="" *ngIf="field.name === 'color'">
+              <ng-container class="" *ngIf="field.name === 'color'">
                 <input
                   type="color"
                   [id]="field.name"
@@ -46,7 +46,12 @@ <h1 class="mb-4 md:mb-8 text-sm leading-4 text-zinc-300">
                   (change)="changeColor($event)"
                   class="appearance-none w-6 min-w-6 h-6 rounded overflow-hidden absolute bottom-1 right-1 bg-transparent"
                 />
-              </div>
+              </ng-container>
+              <ng-container class="" *ngIf="field.name === 'favicon'">
+                <div class="w-5 min-w-5 h-5 rounded-full absolute top-1.5 right-1.5 bg-zinc-800 border border-zinc-800 overflow-hidden">
+                  <img *ngIf="form?.get('favicon')?.value" [src]="form.get('favicon')?.value" width="100%" alt="Favicon" class="w-6 min-w-6 h-6" />
+                </div>
+              </ng-container>
             </div>
             <span class="text-xs text-zinc-400 leading-4 mt-1">{{
               field.description
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 4526287..6fe15d0 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,6 +1,7 @@
-import { Component, signal } from '@angular/core';
+import { Component } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { MetadataService } from 'src/app/metadata.service';
+import { returnCode } from './utils/code';
+
 
 @Component({
   selector: 'app-root',
@@ -8,39 +9,7 @@ import { MetadataService } from 'src/app/metadata.service';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  code? = `
-  <!-- HTML Meta Tags -->
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title></title>
-  <link rel="canonical" href="">
-  <link rel="icon" type="image/x-icon" href="/favicon.ico">
-  <meta name="robots" content="index, follow">
-  <meta name="googlebot" content="index, follow">
-  <meta name="description" content="">
-  <meta name="author" content="">
-  <meta name="theme-color" content="">
-
-  <!-- Facebook Meta Tags -->
-  <meta property="og:url" content="">
-  <meta property="og:type" content="website">
-  <meta property="og:title" content="">
-  <meta property="og:description" content="">
-  <meta property="og:image" content="">
-  <meta property="og:locale" content="">
-
-  <!-- Twitter Meta Tags -->
-  <meta name="twitter:card" content="summary">
-  <meta name="twitter:title" content="">
-  <meta name="twitter:site" content="">
-  <meta name="twitter:description" content="">
-  <meta name="twitter:image" content="">
-  <meta name="twitter:image:alt" content="">
-
-  <!-- Meta Tags Generated via https://gustavoquinalha.github.io/seotopper -->
-  `;
-  form: FormGroup;
-  formFields = [
+  metatagsList = [
     {
       name: 'charset', type: 'select', description: 'Specifies the character encoding for the HTML document, ensuring proper display of text.', label: 'Charset', options: [
         { value: "UTF-8", },
@@ -107,9 +76,13 @@ export class AppComponent {
     { name: 'site', type: 'text', description: 'The Twitter “@username” the card should be attributed to.', label: 'Site' },
   ];
 
-  constructor(private fb: FormBuilder, private metadataService: MetadataService) {
+  code? = returnCode(null);
+
+  form: FormGroup;
+
+  constructor(private fb: FormBuilder) {
     this.form = this.fb.group({});
-    this.formFields.forEach(field => {
+    this.metatagsList.forEach(field => {
       if (field.type === 'select' && field.options) {
         this.form.addControl(field.name, this.fb.control(field.options[0].value));
       } else {
@@ -121,42 +94,10 @@ export class AppComponent {
   }
 
   onChanges(): void {
-    this.form.valueChanges.subscribe(val => {
-      this.code = `
-  <!-- HTML Meta Tags -->
-  <meta charset="${this.form?.get('charset')?.value}">
-  <meta name="viewport" content="${this.form?.get('viewport')?.value}">
-  <title>${this.form?.get('title')?.value}</title>
-  <link rel="canonical" href="${this.form?.get('canonical')?.value}">
-  <link rel="icon" type="image/x-icon" href="${this.form?.get('favicon')?.value}">
-  <meta name="robots" content="${this.form?.get('robots')?.value}">
-  <meta name="googlebot" content="${this.form?.get('googlebot')?.value}">
-  <meta name="description" content="${this.form?.get('description')?.value}">
-  <meta name="author" content="${this.form?.get('author')?.value}">
-  <meta name="theme-color" content="${this.form?.get('color')?.value}">
-
-  <!-- Facebook Meta Tags -->
-  <meta property="og:url" content="${this.form?.get('canonical')?.value}">
-  <meta property="og:type" content="website">
-  <meta property="og:title" content="${this.form?.get('title')?.value}">
-  <meta property="og:description" content="${this.form?.get('description')?.value}">
-  <meta property="og:image" content="${this.form?.get('image')?.value}">
-  <meta property="og:locale" content="${this.form?.get('locale')?.value}">
-
-  <!-- Twitter Meta Tags -->
-  <meta name="twitter:card" content="summary">
-  <meta name="twitter:title" content="${this.form?.get('title')?.value}">
-  <meta name="twitter:site" content="${this.form?.get('site')?.value}">
-  <meta name="twitter:description" content="${this.form?.get('description')?.value}">
-  <meta name="twitter:image" content="${this.form?.get('image')?.value}">
-  <meta name="twitter:image:alt" content="${this.form?.get('imageAlt')?.value}">
-
-  <!-- Meta Tags Generated via https://gustavoquinalha.github.io/seotopper -->
-  `});
-  }
-
-  onSubmit() {
-    console.log(this.form.value);
+    this.form.valueChanges.subscribe(_val => {
+      console.log('this.form.value', this.form.value);
+      this.code = returnCode(this.form.value);
+    });
   }
 
   setFetchValue(data: any) {
diff --git a/src/app/components/code-result/code-result.component.html b/src/app/components/code-result/code-result.component.html
index b665d8c..b7eb77c 100644
--- a/src/app/components/code-result/code-result.component.html
+++ b/src/app/components/code-result/code-result.component.html
@@ -1,3 +1,13 @@
-<pre class="w-full h-full appearance-none !m-0 !p-0 flex">
-  <code class="w-full h-full appearance-none !m-0 !p-4 !bg-zinc-950 text-xs overflow-x-auto overflow-y-auto md:overflow-y-scroll" [highlight]="code" [language]="'html'"></code>
-</pre>
+<div class="relative h-full">
+  <div class="absolute top-2 right-6 flex justify-center items-center z-10">
+    <button
+      (click)="copy()"
+      class="h-6 bg-zinc-800 hover:bg-zinc-700 text-zinc-200 hover:text-zinc-50 rounded text-xs px-2 py-2 flex justify-center items-center">
+      Copy
+    </button>
+  </div>
+  <pre class="w-full h-full appearance-none !m-0 !p-0 flex relative">
+    <code class="w-full h-full appearance-none !m-0 !p-4 !bg-zinc-950 text-xs overflow-x-auto overflow-y-auto md:overflow-y-scroll" [highlight]="code" [language]="'html'"></code>
+  </pre>
+
+</div>
diff --git a/src/app/components/code-result/code-result.component.ts b/src/app/components/code-result/code-result.component.ts
index 00792c5..1a96b4e 100644
--- a/src/app/components/code-result/code-result.component.ts
+++ b/src/app/components/code-result/code-result.component.ts
@@ -7,4 +7,24 @@ import { Component, Input } from '@angular/core';
 })
 export class CodeResultComponent {
   @Input() code?: any;
+
+  copy() {
+    const teste: HTMLElement = document.querySelector("code")!;
+    const range = document.createRange();
+    range.selectNodeContents(teste);
+
+    const selection = window.getSelection();
+    if (selection) {
+      selection.removeAllRanges();
+      selection.addRange(range);
+    }
+
+    try {
+      const successful = document.execCommand('copy');
+      const msg = successful ? 'Texto copiado com sucesso!' : 'Falha ao copiar o texto';
+      console.log(msg);
+    } catch (err) {
+      console.error('Erro ao copiar o texto: ', err);
+    }
+  }
 }
diff --git a/src/app/components/preview/preview.component.html b/src/app/components/preview/preview.component.html
index d6f2b6b..32a8465 100644
--- a/src/app/components/preview/preview.component.html
+++ b/src/app/components/preview/preview.component.html
@@ -2,8 +2,8 @@
   class="text-zinc-200 gap-4 md:gap-8 h-full flex flex-col mb-4 md:mb-8 lg:mb-10 pb-4 md:pb-8 lg:pb-10"
 >
   <div class="w-full max-w-xl">
-    <div class="text-xs text-zinc-400 uppercase mb-2">Google</div>
-    <div class="w-full p-4 border border-zinc-800 rounded overflow-hidden">
+    <div class="text-xs text-zinc-200 uppercase mb-2">Google</div>
+    <div class="w-full p-4 border border-zinc-800 rounded overflow-hidden bg-zinc-900">
       <div class="text-base text-[#99c3ff]">
         {{ content?.title || "Page title" }}
       </div>
@@ -17,9 +17,9 @@
   </div>
 
   <div class="w-full max-w-lg">
-    <div class="text-xs text-zinc-400 uppercase mb-2">Twitter</div>
-    <div class="w-full border border-zinc-800 rounded overflow-hidden">
-      <div class="bg-zinc-700 w-full h-64 min-h-64 overflow-hidden">
+    <div class="text-xs text-zinc-200 uppercase mb-2">Twitter</div>
+    <div class="w-full border border-zinc-800 rounded overflow-hidden bg-zinc-900">
+      <div class="bg-zinc-800 w-full h-64 min-h-64 overflow-hidden border-b border-zinc-800">
         <img
           *ngIf="content?.image"
           [src]="content?.image"
@@ -43,9 +43,9 @@
   </div>
 
   <div class="w-full max-w-lg">
-    <div class="text-xs text-zinc-400 uppercase mb-2">Facebook</div>
-    <div class="w-full border border-zinc-800 rounded overflow-hidden">
-      <div class="bg-zinc-700 w-full h-52 min-h-52 overflow-hidden">
+    <div class="text-xs text-zinc-200 uppercase mb-2">Facebook</div>
+    <div class="w-full border border-zinc-800 rounded overflow-hidden bg-zinc-900">
+      <div class="bg-zinc-800 w-full h-52 min-h-52 overflow-hidden border-b border-zinc-800">
         <img
           *ngIf="content?.image"
           [src]="content?.image"
@@ -69,9 +69,9 @@
   </div>
 
   <div class="w-full max-w-xl">
-    <div class="text-xs text-zinc-400 uppercase mb-2">Linkedin</div>
-    <div class="w-full border border-zinc-800 rounded overflow-hidden">
-      <div class="bg-zinc-700 w-full h-64 min-h-64 overflow-hidden">
+    <div class="text-xs text-zinc-200 uppercase mb-2">Linkedin</div>
+    <div class="w-full border border-zinc-800 rounded overflow-hidden bg-zinc-900">
+      <div class="bg-zinc-800 w-full h-64 min-h-64 overflow-hidden border-b border-zinc-800">
         <img
           *ngIf="content?.image"
           [src]="content?.image"
diff --git a/src/app/utils/code.js b/src/app/utils/code.js
new file mode 100644
index 0000000..87b738e
--- /dev/null
+++ b/src/app/utils/code.js
@@ -0,0 +1,52 @@
+export function returnCode(data) {
+  if (!data) {
+    data = {
+      charset: '',
+      viewport: '',
+      title: '',
+      description: '',
+      canonical: '',
+      image: '',
+      imageAlt: '',
+      favicon: '',
+      color: '',
+      author: '',
+      robots: '',
+      googlebot: '',
+      sitemap: '',
+      locale: '',
+      site: '',
+    }
+  }
+  return `
+  <!-- HTML Meta Tags -->
+  <meta charset="${data.charset}">
+  <meta name="viewport" content="${data.viewport}">
+  <title>${data.title}</title>
+  <link rel="canonical" href="${data.canonical}">
+  <link rel="icon" type="image/x-icon" href="${data.favicon}">
+  <meta name="robots" content="${data.robots}">
+  <meta name="googlebot" content="${data.googlebot}">
+  <meta name="description" content="${data.description}">
+  <meta name="author" content="${data.author}">
+  <meta name="theme-color" content="${data.color}">
+
+  <!-- Facebook Meta Tags -->
+  <meta property="og:url" content="${data.canonical}">
+  <meta property="og:type" content="website">
+  <meta property="og:title" content="${data.title}">
+  <meta property="og:description" content="${data.description}">
+  <meta property="og:image" content="${data.image}">
+  <meta property="og:locale" content="${data.locale}">
+
+  <!-- Twitter Meta Tags -->
+  <meta name="twitter:card" content="summary">
+  <meta name="twitter:title" content="${data.title}">
+  <meta name="twitter:site" content="${data.site}">
+  <meta name="twitter:description" content="${data.description}">
+  <meta name="twitter:image" content="${data.image}">
+  <meta name="twitter:image:alt" content="${data.imageAlt}">
+
+  <!-- Meta Tags Generated via https://gustavoquinalha.github.io/seotopper -->
+  `;
+}
diff --git a/src/index.html b/src/index.html
index 4f011a8..cc860a2 100644
--- a/src/index.html
+++ b/src/index.html
@@ -20,42 +20,28 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>SeoTopper - SEO Generator</title>
-    <meta
-      name="description"
-      content="An innovative tool designed to optimize your website's performance in search engines. Developed with cutting-edge technology, SEOTopper simplifies the SEO process, providing effective and efficient results to increase your business's online visibility."
-    />
+    <link rel="canonical" href="https://seotopper.netlify.app/">
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <meta name="robots" content="index, follow">
+    <meta name="googlebot" content="index, follow">
+    <meta name="description" content="An innovative tool designed to optimize your website's performance in search engines. Developed with cutting-edge technology, SEOTopper simplifies the SEO process, providing effective and efficient results to increase your business's online visibility." />
     <meta name="author" content="https://github.com/gustavoquinalha/" />
     <meta name="theme-color" content="#09090b" />
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
 
     <!-- Facebook Meta Tags -->
     <meta property="og:url" content="https://seotopper.netlify.app/" />
     <meta property="og:type" content="website" />
     <meta property="og:title" content="SeoTopper - SEO Generator" />
-    <meta
-      property="og:description"
-      content="An innovative tool designed to optimize your website's performance in search engines. Developed with cutting-edge technology, SEOTopper simplifies the SEO process, providing effective and efficient results to increase your business's online visibility."
-    />
-    <meta
-      property="og:image"
-      content="https://seotopper.netlify.app/assets/intro.webp"
-    />
+    <meta property="og:description" content="An innovative tool designed to optimize your website's performance in search engines. Developed with cutting-edge technology, SEOTopper simplifies the SEO process, providing effective and efficient results to increase your business's online visibility." />
+    <meta property="og:image" content="https://seotopper.netlify.app/assets/intro.webp" />
     <meta property="og:locale" content="pt-Br" />
 
     <!-- Twitter Meta Tags -->
     <meta name="twitter:card" content="summary" />
-    <meta property="twitter:domain" content="https://seotopper.netlify.app/" />
-    <meta property="twitter:url" content="https://seotopper.netlify.app/" />
     <meta name="twitter:title" content="SeoTopper - SEO Generator" />
     <meta name="twitter:site" content="@gustavoquinalha" />
-    <meta
-      name="twitter:description"
-      content="An innovative tool designed to optimize your website's performance in search engines. Developed with cutting-edge technology, SEOTopper simplifies the SEO process, providing effective and efficient results to increase your business's online visibility."
-    />
-    <meta
-      name="twitter:image"
-      content="https://seotopper.netlify.app/assets/intro.webp"
-    />
+    <meta name="twitter:description" content="An innovative tool designed to optimize your website's performance in search engines. Developed with cutting-edge technology, SEOTopper simplifies the SEO process, providing effective and efficient results to increase your business's online visibility." />
+    <meta name="twitter:image" content="https://seotopper.netlify.app/assets/intro.webp" />
     <meta name="twitter:image:alt" content="SeoTopper Logo" />
 
     <!-- Meta Tags Generated via https://seotopper.netlify.app/ -->
diff --git a/tsconfig.json b/tsconfig.json
index c2b1045..72c126b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,6 +3,8 @@
   "moduleResolution": "bundler",
   "compileOnSave": false,
   "compilerOptions": {
+    "allowJs": true,
+    "esModuleInterop": true,
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,