diff --git a/package-lock.json b/package-lock.json index 832c40a..844986f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { - "name": "teste", - "version": "0.0.0", + "name": "seotopper", + "version": "2.0.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "teste", - "version": "0.0.0", + "name": "seotopper", + "version": "2.0.0", "dependencies": { "@angular/animations": "^17.3.11", "@angular/common": "^17.3.11", diff --git a/package.json b/package.json index d9f7cca..47f59a5 100644 --- a/package.json +++ b/package.json @@ -18,10 +18,7 @@ "@angular/platform-browser": "^17.3.11", "@angular/platform-browser-dynamic": "^17.3.11", "@angular/router": "^17.3.11", - "highlight.js": "^11.9.0", "ng-github-button": "^18.0.0", - "ngx-highlight-js": "^18.0.0", - "ngx-highlightjs": "^12.0.0", "rxjs": "~7.5.0", "tslib": "^2.3.0", "zone.js": "~0.14.7" @@ -30,7 +27,6 @@ "@angular-devkit/build-angular": "^17.3.8", "@angular/cli": "~17.3.8", "@angular/compiler-cli": "^17.3.11", - "@types/highlight.js": "^10.1.0", "@types/jasmine": "~4.3.0", "@types/json-schema": "^7.0.15", "autoprefixer": "^10.4.19", diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts new file mode 100644 index 0000000..32167bc --- /dev/null +++ b/src/app/app-routing.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { HomeComponent } from './pages/home/home.component'; +import { CreateComponent } from './pages/create/create.component'; + +const routes: Routes = [ + { path: '', component: HomeComponent }, + { path: 'create/:urlName', component: CreateComponent }, + { path: '**', redirectTo: '/' } +]; + +@NgModule({ + imports: [RouterModule.forRoot(routes)], + exports: [RouterModule] +}) +export class AppRoutingModule { } diff --git a/src/app/app.component.html b/src/app/app.component.html index 52b9697..0680b43 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,99 +1 @@ - - -
-
-
-
-

- Just type the data and generate the meta tags for your website -

-
-
-
- - - -
- -
- -
- - - - - -
- Favicon -
- -
- {{ - field.description - }} - - - - - - {{ - field.description - }} - -
-
-
- - -
- -
- -
- -
- -
-
+ diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 8a2afce..83d44c7 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,6 +1,4 @@ import { Component } from '@angular/core'; -import { FormBuilder, FormGroup } from '@angular/forms'; -import { returnCode } from './utils/code'; @Component({ @@ -9,124 +7,4 @@ import { returnCode } from './utils/code'; styleUrls: ['./app.component.scss'] }) export class AppComponent { - 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", }, - { value: "ISO-8859-1", }, - { value: "ISO-8859-2", }, - { value: "ISO-8859-3", }, - { value: "ISO-8859-4", }, - { value: "ISO-8859-5", }, - { value: "ISO-8859-6", }, - { value: "ISO-8859-7", }, - { value: "ISO-8859-8", }, - { value: "ISO-8859-9", }, - { value: "ISO-8859-10", }, - { value: "ISO-8859-11", }, - { value: "ISO-8859-13", }, - { value: "ISO-8859-14", }, - { value: "ISO-8859-15", }, - { value: "ISO-8859-16", }, - { value: "Windows-1250", }, - { value: "Windows-1251", }, - { value: "Windows-1252", }, - { value: "Windows-1253", }, - { value: "Windows-1254", }, - { value: "Windows-1255", }, - { value: "Windows-1256", }, - { value: "Windows-1257", }, - { value: "Windows-1258", }, - { value: "KOI8-R", }, - { value: "KOI8-U", }, - { value: "GB18030", }, - { value: "Big5", }, - { value: "Shift_JIS", }, - { value: "EUC-JP", }, - { value: "EUC-KR", }, - ], - }, - { name: 'viewport', type: 'text', description: 'Controls the layout and scaling of a webpage on different devices, improving responsiveness and user experience.', label: 'Viewport' }, - { name: 'name', type: 'text', description: 'Defines the name of the page.', label: 'Site name' }, - { name: 'title', type: 'text', description: 'Defines the title of the HTML document, displaying text in the browser tab and aiding in search engine optimization (SEO).', label: 'Title' }, - { name: 'description', type: 'text', description: 'Provides a concise summary of the webpages content, often used by search engines to display in search results, enhancing click-through rates.', label: 'Description' }, - { name: 'canonical', type: 'text', description: 'Specifies the preferred URL for a webpage, consolidating search engine ranking signals and avoiding duplicate content issues.', label: 'Canonical URL' }, - { name: 'image', type: 'text', description: `Specifies the image displayed when sharing the webpage on platforms like Facebook, enhancing visual appeal. Og:images should have an aspect ratio of 1.91:1. This means that the width should be 1.9 X the height to avoid cropping issues. Your image shouldn't be larger than 8MB. Image size should be 1200 X 630 pixels (px).`, label: 'Image URL' }, - { name: 'imageAlt', type: 'text', description: 'Provides alternative text for the image specified in og:image, improving accessibility and SEO when shared on platforms supporting Open Graph.', label: 'Image alt text' }, - { name: 'favicon', type: 'text', description: 'Specifies the favicon, enhancing website recognition in browsers and bookmarks.', label: 'Favicon' }, - { name: 'color', type: 'text', description: 'Defines the color theme for the browsers UI elements when a webpage is viewed on mobile devices, enhancing user experience and brand consistency.', label: 'Theme color' }, - { name: 'author', type: 'text', description: 'Specifies the author of the webpage, providing attribution for content creation and ownership.', label: 'Author' }, - { - name: 'robots', type: 'select', description: 'Controls how search engines index and display content, influencing webpage visibility and accessibility in search results.', label: 'Robots', options: [ - { value: 'index, follow' }, - { value: 'index, nofollow' }, - { value: 'noindex, follow' }, - { value: 'noindex, nofollow' }, - ] - }, - { - name: 'googlebot', type: 'select', description: 'Controls how search engines index and display content, influencing webpage visibility and accessibility in search results.', label: 'Googlebot', options: [ - { value: 'index, follow' }, - { value: 'index, nofollow' }, - { value: 'noindex, follow' }, - { value: 'noindex, nofollow' }, - ] - }, - { name: 'sitemap', type: 'text', description: '', label: 'URL site map' }, - { name: 'locale', type: 'text', description: 'Defines the language and region of a webpage, aiding in content and regional settings adaptation.', label: 'Locale' }, - { name: 'site', type: 'text', description: 'The Twitter “@username” the card should be attributed to.', label: 'Site' }, - ]; - - code? = returnCode(null); - - form: FormGroup; - - constructor(private fb: FormBuilder) { - this.form = this.fb.group({}); - this.metatagsList.forEach(field => { - if (field.type === 'select' && field.options) { - this.form.addControl(field.name, this.fb.control(field.options[0].value)); - } else if (field.name === 'viewport') { - this.form.addControl(field.name, this.fb.control('width=device-width, initial-scale=1')); - } else { - this.form.addControl(field.name, this.fb.control('')); - } - }); - - this.onChanges(); - } - - onChanges(): void { - this.form.valueChanges.subscribe(_val => { - console.log('this.form.value', this.form.value); - this.code = returnCode(this.form.value); - }); - } - - setFetchValue(data: any) { - this.form.patchValue({ - charset: data.charset ?? '', - viewport: data.viewport ?? '', - name: data.name ?? '', - title: data.title ?? '', - description: data.description ?? '', - canonical: data.canonicalURL ?? '', - image: data.imageURL ?? '', - imageAlt: data.imageAltText ?? '', - favicon: data.favicon ?? '', - color: data.themeColor ?? '', - author: data.pageAuthor ?? '', - robots: data.robots ?? '', - googlebot: data.googlebot ?? '', - sitemap: data.sitemap ?? '', - locale: data.locale ?? '', - site: data.pageSite ?? '', - }); - } - - changeColor(value: any) { - this.form.patchValue({ - color: value.target.value - }) - } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index cc6c577..0de44e6 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -2,7 +2,6 @@ import { NgModule } from '@angular/core'; import { provideHttpClient } from '@angular/common/http'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; -import { HighlightModule, HIGHLIGHT_OPTIONS } from 'ngx-highlightjs'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { GithubButtonModule } from 'ng-github-button'; import { CodeResultComponent } from "./components/code-result/code-result.component"; @@ -10,6 +9,9 @@ import { PreviewComponent } from './components/preview/preview.component'; import { MenuComponent } from './components/menu/menu.component'; import { FooterComponent } from './components/footer/footer.component'; import { LoadingComponent } from './components/loading/loading.component'; +import { HomeComponent } from './pages/home/home.component'; +import { CreateComponent } from './pages/create/create.component'; +import { AppRoutingModule } from './app-routing.module'; @NgModule({ declarations: [ @@ -18,28 +20,19 @@ import { LoadingComponent } from './components/loading/loading.component'; PreviewComponent, MenuComponent, FooterComponent, - LoadingComponent + LoadingComponent, + HomeComponent, + CreateComponent ], imports: [ BrowserModule, + AppRoutingModule, FormsModule, - HighlightModule, ReactiveFormsModule, GithubButtonModule, ], providers: [ - provideHttpClient(), - { - provide: HIGHLIGHT_OPTIONS, - useValue: { - coreLibraryLoader: () => import('highlight.js/lib/core'), - languages: { - xml: () => import('highlight.js/lib/languages/xml'), - javascript: () => import('highlight.js/lib/languages/javascript'), - typescript: () => import('highlight.js/lib/languages/typescript'), - } - } - } + provideHttpClient() ], bootstrap: [AppComponent] }) diff --git a/src/app/components/code-result/code-result.component.html b/src/app/components/code-result/code-result.component.html index 4bcf5e8..40b5bd5 100644 --- a/src/app/components/code-result/code-result.component.html +++ b/src/app/components/code-result/code-result.component.html @@ -1,13 +1,17 @@
-
+ 
-    
+    
+      {{code}}
+
-
diff --git a/src/app/components/footer/footer.component.html b/src/app/components/footer/footer.component.html index 243c9a2..b16b8af 100644 --- a/src/app/components/footer/footer.component.html +++ b/src/app/components/footer/footer.component.html @@ -1,10 +1,10 @@