-
-
Notifications
You must be signed in to change notification settings - Fork 44
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
f21eebe
commit cf25290
Showing
22 changed files
with
655 additions
and
305 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 { } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,99 +1 @@ | ||
| <app-menu (onFetchValue)="setFetchValue($event)" /> | ||
|
|
||
| <div class="w-full flex flex-col md:flex-row bg-zinc-950"> | ||
| <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" 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-white"> | ||
| Just type the data and generate the meta tags for your website | ||
| </h1> | ||
| </div> | ||
| <div class="w-full grid grid-cols-1 flex-col gap-8"> | ||
| <div | ||
| class="relative flex flex-col gap-1" | ||
| *ngFor="let field of metatagsList" | ||
| > | ||
| <ng-container *ngIf="field.type === 'text' || field.type === 'color'"> | ||
| <label [for]="field.name" class="leading-4 text-xs text-white">{{ | ||
| field.label | ||
| }}</label> | ||
|
|
||
| <div | ||
| *ngIf="field.name === 'image' && form?.get('image')" | ||
| class="w-full aspect-[1.91/1] rounded bg-zinc-800 border border-zinc-800 overflow-hidden max-w-64" | ||
| > | ||
| <img *ngIf="form?.get('image')?.value" [src]="form.get('image')?.value" class="aspect-[1.91/1] max-w-64" width="100%" alt="" /> | ||
| </div> | ||
|
|
||
| <div class="relative w-full"> | ||
| <input | ||
| [type]="field.type" | ||
| [id]="field.name" | ||
| [name]="field.name" | ||
| [placeholder]="field.label" | ||
| [formControlName]="field.name" | ||
| class="h-8 text-xs w-full bg-zinc-900 rounded border placeholder:text-zinc-500 border-zinc-800 focus:border-zinc-500 focus:ring-2 focus:ring-white outline-none text-white py-1 px-3 leading-8 transition-colors duration-200 ease-in-out" | ||
| /> | ||
| <ng-container class="" *ngIf="field.name === 'color'"> | ||
| <input | ||
| type="color" | ||
| [id]="field.name" | ||
| [name]="field.name" | ||
| [placeholder]="field.label" | ||
| [formControlName]="field.name" | ||
| (change)="changeColor($event)" | ||
| class="appearance-none w-6 min-w-6 h-6 rounded overflow-hidden absolute bottom-1 right-1 bg-transparent" | ||
| /> | ||
| </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-5 min-w-5 h-5" /> | ||
| </div> | ||
| </ng-container> | ||
| </div> | ||
| <span class="text-xs text-zinc-500 leading-4 mt-1">{{ | ||
| field.description | ||
| }}</span> | ||
| </ng-container> | ||
|
|
||
| <ng-container *ngIf="field.type === 'select'"> | ||
| <label [for]="field.name" class="leading-4 text-xs text-white">{{ | ||
| field.label | ||
| }}</label> | ||
| <select | ||
| [id]="field.name" | ||
| [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-white outline-none text-white py-1 px-3 leading-8 transition-colors duration-200 ease-in-out" | ||
| > | ||
| <option | ||
| *ngFor="let option of field.options" | ||
| [value]="option.value" | ||
| > | ||
| {{ option.value }} | ||
| </option> | ||
| </select> | ||
| <span class="text-xs text-zinc-500 leading-4 mt-1">{{ | ||
| field.description | ||
| }}</span> | ||
| </ng-container> | ||
| </div> | ||
| </div> | ||
| </form> | ||
|
|
||
| <app-footer /> | ||
| </div> | ||
|
|
||
| <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-hidden border-r border-zinc-800 p-4 md:p-0" | ||
| > | ||
| <app-code-result [code]="code" class="h-full" /> | ||
| </div> | ||
|
|
||
| <div | ||
| class="w-full md:w-[33.3333%] flex-grow overflow-auto h-full md:h-[calc(100vh-56px)] bg-zinc-950 overflow-y-auto md:overflow-y-scroll overflow-x-hidden p-4 md:p-8" | ||
| > | ||
| <app-preview [content]="form.value" /> | ||
| </div> | ||
| </div> | ||
| <router-outlet></router-outlet> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,17 @@ | ||
| <div class="relative h-full"> | ||
| <div class="absolute top-2 right-2 md:right-6 flex justify-center items-center z-10"> | ||
| <div | ||
| class="absolute top-2 right-2 md:right-6 flex justify-center items-center z-10" | ||
| > | ||
| <button | ||
| (click)="copy()" | ||
| class="h-6 bg-zinc-800 hover:bg-zinc-700 text-white hover:text-zinc-50 rounded text-xs px-2 py-2 flex justify-center items-center"> | ||
| class="h-6 bg-zinc-800 hover:bg-zinc-700 text-white 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-900 md:!bg-zinc-950 rounded md:rounded-none text-xs overflow-x-auto overflow-y-auto md:overflow-y-scroll" [highlight]="code" [language]="'html'"></code> | ||
| <code class="w-full h-full appearance-none !m-0 !p-4 !bg-zinc-900 md:!bg-zinc-950 rounded md:rounded-none text-xs overflow-x-auto overflow-y-auto md:overflow-y-scroll"> | ||
| {{code}} | ||
| </code> | ||
| </pre> | ||
|
|
||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.