Skip to content

Commit 990832b

Browse files
gustavoquinalhagustavoquinalha
committed
update
1 parent f1b901b commit 990832b

8 files changed

+131
-115
lines changed

‎src/app/app.component.html

+10-5
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<div
55
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"
66
>
7-
<form [formGroup]="form" (ngSubmit)="onSubmit()" class="p-4 md:p-8 w-full">
7+
<form [formGroup]="form" class="p-4 md:p-8 w-full">
88
<div class="w-full max-w-xs text-center mx-auto">
99
<h1 class="mb-4 md:mb-8 text-sm leading-4 text-zinc-300">
1010
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">
1313
<div class="w-full grid grid-cols-1 flex-col gap-8">
1414
<div
1515
class="relative flex flex-col gap-1"
16-
*ngFor="let field of formFields"
16+
*ngFor="let field of metatagsList"
1717
>
1818
<ng-container *ngIf="field.type === 'text' || field.type === 'color'">
1919
<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">
2222

2323
<div
2424
*ngIf="field.name === 'image' && form?.get('image')"
25-
class="w-full min-h-60 rounded bg-zinc-800 border border-zinc-800 overflow-hidden"
25+
class="w-full min-h-60 rounded bg-zinc-800 border border-zinc-700 overflow-hidden"
2626
>
2727
<img *ngIf="form?.get('image')?.value" [src]="form.get('image')?.value" width="100%" alt="" />
2828
</div>
@@ -36,7 +36,7 @@ <h1 class="mb-4 md:mb-8 text-sm leading-4 text-zinc-300">
3636
[formControlName]="field.name"
3737
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"
3838
/>
39-
<div class="" *ngIf="field.name === 'color'">
39+
<ng-container class="" *ngIf="field.name === 'color'">
4040
<input
4141
type="color"
4242
[id]="field.name"
@@ -46,7 +46,12 @@ <h1 class="mb-4 md:mb-8 text-sm leading-4 text-zinc-300">
4646
(change)="changeColor($event)"
4747
class="appearance-none w-6 min-w-6 h-6 rounded overflow-hidden absolute bottom-1 right-1 bg-transparent"
4848
/>
49-
</div>
49+
</ng-container>
50+
<ng-container class="" *ngIf="field.name === 'favicon'">
51+
<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">
52+
<img *ngIf="form?.get('favicon')?.value" [src]="form.get('favicon')?.value" width="100%" alt="Favicon" class="w-6 min-w-6 h-6" />
53+
</div>
54+
</ng-container>
5055
</div>
5156
<span class="text-xs text-zinc-400 leading-4 mt-1">{{
5257
field.description

‎src/app/app.component.ts

+14-73
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,15 @@
1-
import { Component, signal } from '@angular/core';
1+
import { Component } from '@angular/core';
22
import { FormBuilder, FormGroup } from '@angular/forms';
3-
import { MetadataService } from 'src/app/metadata.service';
3+
import { returnCode } from './utils/code';
4+
45

56
@Component({
67
selector: 'app-root',
78
templateUrl: './app.component.html',
89
styleUrls: ['./app.component.scss']
910
})
1011
export class AppComponent {
11-
code? = `
12-
<!-- HTML Meta Tags -->
13-
<meta charset="UTF-8">
14-
<meta name="viewport" content="width=device-width, initial-scale=1">
15-
<title></title>
16-
<link rel="canonical" href="">
17-
<link rel="icon" type="image/x-icon" href="/favicon.ico">
18-
<meta name="robots" content="index, follow">
19-
<meta name="googlebot" content="index, follow">
20-
<meta name="description" content="">
21-
<meta name="author" content="">
22-
<meta name="theme-color" content="">
23-
24-
<!-- Facebook Meta Tags -->
25-
<meta property="og:url" content="">
26-
<meta property="og:type" content="website">
27-
<meta property="og:title" content="">
28-
<meta property="og:description" content="">
29-
<meta property="og:image" content="">
30-
<meta property="og:locale" content="">
31-
32-
<!-- Twitter Meta Tags -->
33-
<meta name="twitter:card" content="summary">
34-
<meta name="twitter:title" content="">
35-
<meta name="twitter:site" content="">
36-
<meta name="twitter:description" content="">
37-
<meta name="twitter:image" content="">
38-
<meta name="twitter:image:alt" content="">
39-
40-
<!-- Meta Tags Generated via https://gustavoquinalha.github.io/seotopper -->
41-
`;
42-
form: FormGroup;
43-
formFields = [
12+
metatagsList = [
4413
{
4514
name: 'charset', type: 'select', description: 'Specifies the character encoding for the HTML document, ensuring proper display of text.', label: 'Charset', options: [
4615
{ value: "UTF-8", },
@@ -107,9 +76,13 @@ export class AppComponent {
10776
{ name: 'site', type: 'text', description: 'The Twitter “@username” the card should be attributed to.', label: 'Site' },
10877
];
10978

110-
constructor(private fb: FormBuilder, private metadataService: MetadataService) {
79+
code? = returnCode(null);
80+
81+
form: FormGroup;
82+
83+
constructor(private fb: FormBuilder) {
11184
this.form = this.fb.group({});
112-
this.formFields.forEach(field => {
85+
this.metatagsList.forEach(field => {
11386
if (field.type === 'select' && field.options) {
11487
this.form.addControl(field.name, this.fb.control(field.options[0].value));
11588
} else {
@@ -121,42 +94,10 @@ export class AppComponent {
12194
}
12295

12396
onChanges(): void {
124-
this.form.valueChanges.subscribe(val => {
125-
this.code = `
126-
<!-- HTML Meta Tags -->
127-
<meta charset="${this.form?.get('charset')?.value}">
128-
<meta name="viewport" content="${this.form?.get('viewport')?.value}">
129-
<title>${this.form?.get('title')?.value}</title>
130-
<link rel="canonical" href="${this.form?.get('canonical')?.value}">
131-
<link rel="icon" type="image/x-icon" href="${this.form?.get('favicon')?.value}">
132-
<meta name="robots" content="${this.form?.get('robots')?.value}">
133-
<meta name="googlebot" content="${this.form?.get('googlebot')?.value}">
134-
<meta name="description" content="${this.form?.get('description')?.value}">
135-
<meta name="author" content="${this.form?.get('author')?.value}">
136-
<meta name="theme-color" content="${this.form?.get('color')?.value}">
137-
138-
<!-- Facebook Meta Tags -->
139-
<meta property="og:url" content="${this.form?.get('canonical')?.value}">
140-
<meta property="og:type" content="website">
141-
<meta property="og:title" content="${this.form?.get('title')?.value}">
142-
<meta property="og:description" content="${this.form?.get('description')?.value}">
143-
<meta property="og:image" content="${this.form?.get('image')?.value}">
144-
<meta property="og:locale" content="${this.form?.get('locale')?.value}">
145-
146-
<!-- Twitter Meta Tags -->
147-
<meta name="twitter:card" content="summary">
148-
<meta name="twitter:title" content="${this.form?.get('title')?.value}">
149-
<meta name="twitter:site" content="${this.form?.get('site')?.value}">
150-
<meta name="twitter:description" content="${this.form?.get('description')?.value}">
151-
<meta name="twitter:image" content="${this.form?.get('image')?.value}">
152-
<meta name="twitter:image:alt" content="${this.form?.get('imageAlt')?.value}">
153-
154-
<!-- Meta Tags Generated via https://gustavoquinalha.github.io/seotopper -->
155-
`});
156-
}
157-
158-
onSubmit() {
159-
console.log(this.form.value);
97+
this.form.valueChanges.subscribe(_val => {
98+
console.log('this.form.value', this.form.value);
99+
this.code = returnCode(this.form.value);
100+
});
160101
}
161102

162103
setFetchValue(data: any) {

‎src/app/components/code-result/code-result.component.html

+13-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
1-
<pre class="w-full h-full appearance-none !m-0 !p-0 flex">
2-
<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>
3-
</pre>
1+
<div class="relative h-full">
2+
<div class="absolute top-2 right-6 flex justify-center items-center z-10">
3+
<button
4+
(click)="copy()"
5+
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">
6+
Copy
7+
</button>
8+
</div>
9+
<pre class="w-full h-full appearance-none !m-0 !p-0 flex relative">
10+
<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>
11+
</pre>
12+
13+
</div>

‎src/app/components/code-result/code-result.component.ts

+20
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,24 @@ import { Component, Input } from '@angular/core';
77
})
88
export class CodeResultComponent {
99
@Input() code?: any;
10+
11+
copy() {
12+
const teste: HTMLElement = document.querySelector("code")!;
13+
const range = document.createRange();
14+
range.selectNodeContents(teste);
15+
16+
const selection = window.getSelection();
17+
if (selection) {
18+
selection.removeAllRanges();
19+
selection.addRange(range);
20+
}
21+
22+
try {
23+
const successful = document.execCommand('copy');
24+
const msg = successful ? 'Texto copiado com sucesso!' : 'Falha ao copiar o texto';
25+
console.log(msg);
26+
} catch (err) {
27+
console.error('Erro ao copiar o texto: ', err);
28+
}
29+
}
1030
}

‎src/app/components/preview/preview.component.html

+11-11
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
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"
33
>
44
<div class="w-full max-w-xl">
5-
<div class="text-xs text-zinc-400 uppercase mb-2">Google</div>
6-
<div class="w-full p-4 border border-zinc-800 rounded overflow-hidden">
5+
<div class="text-xs text-zinc-200 uppercase mb-2">Google</div>
6+
<div class="w-full p-4 border border-zinc-800 rounded overflow-hidden bg-zinc-900">
77
<div class="text-base text-[#99c3ff]">
88
{{ content?.title || "Page title" }}
99
</div>
@@ -17,9 +17,9 @@
1717
</div>
1818

1919
<div class="w-full max-w-lg">
20-
<div class="text-xs text-zinc-400 uppercase mb-2">Twitter</div>
21-
<div class="w-full border border-zinc-800 rounded overflow-hidden">
22-
<div class="bg-zinc-700 w-full h-64 min-h-64 overflow-hidden">
20+
<div class="text-xs text-zinc-200 uppercase mb-2">Twitter</div>
21+
<div class="w-full border border-zinc-800 rounded overflow-hidden bg-zinc-900">
22+
<div class="bg-zinc-800 w-full h-64 min-h-64 overflow-hidden border-b border-zinc-800">
2323
<img
2424
*ngIf="content?.image"
2525
[src]="content?.image"
@@ -43,9 +43,9 @@
4343
</div>
4444

4545
<div class="w-full max-w-lg">
46-
<div class="text-xs text-zinc-400 uppercase mb-2">Facebook</div>
47-
<div class="w-full border border-zinc-800 rounded overflow-hidden">
48-
<div class="bg-zinc-700 w-full h-52 min-h-52 overflow-hidden">
46+
<div class="text-xs text-zinc-200 uppercase mb-2">Facebook</div>
47+
<div class="w-full border border-zinc-800 rounded overflow-hidden bg-zinc-900">
48+
<div class="bg-zinc-800 w-full h-52 min-h-52 overflow-hidden border-b border-zinc-800">
4949
<img
5050
*ngIf="content?.image"
5151
[src]="content?.image"
@@ -69,9 +69,9 @@
6969
</div>
7070

7171
<div class="w-full max-w-xl">
72-
<div class="text-xs text-zinc-400 uppercase mb-2">Linkedin</div>
73-
<div class="w-full border border-zinc-800 rounded overflow-hidden">
74-
<div class="bg-zinc-700 w-full h-64 min-h-64 overflow-hidden">
72+
<div class="text-xs text-zinc-200 uppercase mb-2">Linkedin</div>
73+
<div class="w-full border border-zinc-800 rounded overflow-hidden bg-zinc-900">
74+
<div class="bg-zinc-800 w-full h-64 min-h-64 overflow-hidden border-b border-zinc-800">
7575
<img
7676
*ngIf="content?.image"
7777
[src]="content?.image"

‎src/app/utils/code.js

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
export function returnCode(data) {
2+
if (!data) {
3+
data = {
4+
charset: '',
5+
viewport: '',
6+
title: '',
7+
description: '',
8+
canonical: '',
9+
image: '',
10+
imageAlt: '',
11+
favicon: '',
12+
color: '',
13+
author: '',
14+
robots: '',
15+
googlebot: '',
16+
sitemap: '',
17+
locale: '',
18+
site: '',
19+
}
20+
}
21+
return `
22+
<!-- HTML Meta Tags -->
23+
<meta charset="${data.charset}">
24+
<meta name="viewport" content="${data.viewport}">
25+
<title>${data.title}</title>
26+
<link rel="canonical" href="${data.canonical}">
27+
<link rel="icon" type="image/x-icon" href="${data.favicon}">
28+
<meta name="robots" content="${data.robots}">
29+
<meta name="googlebot" content="${data.googlebot}">
30+
<meta name="description" content="${data.description}">
31+
<meta name="author" content="${data.author}">
32+
<meta name="theme-color" content="${data.color}">
33+
34+
<!-- Facebook Meta Tags -->
35+
<meta property="og:url" content="${data.canonical}">
36+
<meta property="og:type" content="website">
37+
<meta property="og:title" content="${data.title}">
38+
<meta property="og:description" content="${data.description}">
39+
<meta property="og:image" content="${data.image}">
40+
<meta property="og:locale" content="${data.locale}">
41+
42+
<!-- Twitter Meta Tags -->
43+
<meta name="twitter:card" content="summary">
44+
<meta name="twitter:title" content="${data.title}">
45+
<meta name="twitter:site" content="${data.site}">
46+
<meta name="twitter:description" content="${data.description}">
47+
<meta name="twitter:image" content="${data.image}">
48+
<meta name="twitter:image:alt" content="${data.imageAlt}">
49+
50+
<!-- Meta Tags Generated via https://gustavoquinalha.github.io/seotopper -->
51+
`;
52+
}

‎src/index.html

+9-23
Original file line numberDiff line numberDiff line change
@@ -20,42 +20,28 @@
2020
<meta charset="utf-8" />
2121
<meta name="viewport" content="width=device-width, initial-scale=1" />
2222
<title>SeoTopper - SEO Generator</title>
23-
<meta
24-
name="description"
25-
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."
26-
/>
23+
<link rel="canonical" href="https://seotopper.netlify.app/">
24+
<link rel="icon" type="image/x-icon" href="favicon.ico" />
25+
<meta name="robots" content="index, follow">
26+
<meta name="googlebot" content="index, follow">
27+
<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." />
2728
<meta name="author" content="https://github.com/gustavoquinalha/" />
2829
<meta name="theme-color" content="#09090b" />
29-
<link rel="icon" type="image/x-icon" href="favicon.ico" />
3030

3131
<!-- Facebook Meta Tags -->
3232
<meta property="og:url" content="https://seotopper.netlify.app/" />
3333
<meta property="og:type" content="website" />
3434
<meta property="og:title" content="SeoTopper - SEO Generator" />
35-
<meta
36-
property="og:description"
37-
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."
38-
/>
39-
<meta
40-
property="og:image"
41-
content="https://seotopper.netlify.app/assets/intro.webp"
42-
/>
35+
<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." />
36+
<meta property="og:image" content="https://seotopper.netlify.app/assets/intro.webp" />
4337
<meta property="og:locale" content="pt-Br" />
4438

4539
<!-- Twitter Meta Tags -->
4640
<meta name="twitter:card" content="summary" />
47-
<meta property="twitter:domain" content="https://seotopper.netlify.app/" />
48-
<meta property="twitter:url" content="https://seotopper.netlify.app/" />
4941
<meta name="twitter:title" content="SeoTopper - SEO Generator" />
5042
<meta name="twitter:site" content="@gustavoquinalha" />
51-
<meta
52-
name="twitter:description"
53-
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."
54-
/>
55-
<meta
56-
name="twitter:image"
57-
content="https://seotopper.netlify.app/assets/intro.webp"
58-
/>
43+
<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." />
44+
<meta name="twitter:image" content="https://seotopper.netlify.app/assets/intro.webp" />
5945
<meta name="twitter:image:alt" content="SeoTopper Logo" />
6046

6147
<!-- Meta Tags Generated via https://seotopper.netlify.app/ -->

‎tsconfig.json

+2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
"moduleResolution": "bundler",
44
"compileOnSave": false,
55
"compilerOptions": {
6+
"allowJs": true,
7+
"esModuleInterop": true,
68
"baseUrl": "./",
79
"outDir": "./dist/out-tsc",
810
"forceConsistentCasingInFileNames": true,

0 commit comments

Comments
 (0)