-
Notifications
You must be signed in to change notification settings - Fork 65
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
8c30548
commit 9ce8397
Showing
6 changed files
with
123 additions
and
97 deletions.
There are no files selected for viewing
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,71 @@ | ||
| <script lang="ts"> | ||
| import { Card } from 'flowbite-svelte'; | ||
| import alice from '../../../alice.txt?raw'; | ||
| import Underlines from '$lib/Underlines.svelte'; | ||
| import { Button } from 'flowbite-svelte'; | ||
| import { lintText, applySuggestion, spanContent } from '$lib/analysis'; | ||
| import type { Lint } from '$lib/analysis'; | ||
| let content = alice; | ||
| let lints: Lint[] = []; | ||
| let focused: number | undefined; | ||
| $: lintText(content).then((newLints) => (lints = newLints)); | ||
| $: console.log(focused); | ||
| </script> | ||
|
|
||
| <div class="flex flex-row w-full h-full [&>*]:m-5"> | ||
| <Card class="flex-auto max-w-full p-5 grid z-10 text-lg overflow-auto"> | ||
| <div class="m-0 p-0" style="grid-row: 1; grid-column: 1"> | ||
| <Underlines {content} focusLintIndex={focused} /> | ||
| </div> | ||
| <textarea | ||
| class="w-full m-0 rounded-none p-0 z-0 bg-transparent border-none text-lg resize-none" | ||
| rows={content.length - content.replaceAll('\n', '').length + 1} | ||
| spellcheck="false" | ||
| style="grid-row: 1; grid-column: 1" | ||
| bind:value={content} | ||
| ></textarea> | ||
| </Card> | ||
| <Card class="flex flex-col flex-grow overflow-auto h-full"> | ||
| <h2 class="text-2xl font-bold m-1">Suggestions</h2> | ||
| {#each lints as lint, i} | ||
| <Card class="m-1 hover:translate-x-3 transition-all" on:click={() => (focused = i)}> | ||
| <div class="pl-2 border-l-[3px] border-l-primary-500"> | ||
| <div class="flex flex-row"> | ||
| <h3 class="font-bold"> | ||
| {lint.lint_kind} - “<span class="italic"> | ||
| {spanContent(lint.span, content)} | ||
| </span> ” | ||
| </h3> | ||
| </div> | ||
| <div | ||
| class="transition-all overflow-hidden flex flex-col justify-evenly" | ||
| style={`height: ${ | ||
| focused === i ? `calc(55px * ${lint.suggestions.length + 1})` : '0px' | ||
| }`} | ||
| > | ||
| <p style="height: 50px">{lint.message}</p> | ||
| {#each lint.suggestions as suggestion} | ||
| <Button | ||
| color="primary" | ||
| class="w-full mb-1" | ||
| style="height: 40px; margin: 5px 0px;" | ||
| on:click={() => | ||
| applySuggestion(content, suggestion, lint.span).then( | ||
| (edited) => (content = edited) | ||
| )} | ||
| > | ||
| Replace "{content.substring(lint.span.start, lint.span.end)}" with "{suggestion.ReplaceWith.reduce( | ||
| (p, c) => p + c | ||
| )}" | ||
| </Button> | ||
| {/each} | ||
| </div> | ||
| </div> | ||
| </Card> | ||
| {/each} | ||
| </Card> | ||
| </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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,78 +1,22 @@ | ||
| <script lang="ts"> | ||
| import { Card } from 'flowbite-svelte'; | ||
| import alice from '../../../alice.txt?raw'; | ||
| import Underlines from '$lib/Underlines.svelte'; | ||
| import { Button } from 'flowbite-svelte'; | ||
| import { lintText, applySuggestion, spanContent } from '$lib/analysis'; | ||
| import type { Lint } from '$lib/analysis'; | ||
| let content = alice; | ||
| let editor: HTMLTextAreaElement; | ||
| let lints: Lint[] = []; | ||
| let focused: number | undefined; | ||
| $: lintText(content).then((newLints) => (lints = newLints)); | ||
| function ping() { | ||
| lintText(content).then((newLints) => (lints = newLints)); | ||
| setTimeout(ping, 1000); | ||
| } | ||
| ping(); | ||
| $: console.log(focused); | ||
| <script> | ||
| import Editor from '$lib/Editor.svelte'; | ||
| </script> | ||
|
|
||
| <div class="flex flex-row w-full h-screen [&>*]:m-5"> | ||
| <Card class="flex-auto max-w-full h-full p-5 grid z-10 text-lg"> | ||
| <div class="overflow-auto p-0" style="grid-row: 1; grid-column: 1"> | ||
| <Underlines {content} focusLintIndex={focused} /> | ||
| <div class="w-full h-screen flex flex-col items-center justify-evenly"> | ||
| <div> | ||
| <h1 class="text-5xl font-bold text-center">Hi! I'm Audrey</h1> | ||
| <h2 class="text-3xl italic text-center">The Grammar Checker for Artists</h2> | ||
| <div class="flex flex-row justify-evenly mt-5"> | ||
| <a href="https://github.com/chilipepperhott/lt-rs" class="hover:scale-105 transition-all" | ||
| ><img width="40" height="40" src="/icons/github.svg" alt="Project Repository" /></a | ||
| > | ||
| <a href="https://elijahpotter.dev" class="hover:scale-105 transition-all" | ||
| ><img width="40" height="40" src="/icons/profile.svg" alt="Author" /></a | ||
| > | ||
| </div> | ||
| <textarea | ||
| class="w-full h-full m-0 rounded-none p-0 z-0 bg-transparent border-none text-lg" | ||
| spellcheck="false" | ||
| style="grid-row: 1; grid-column: 1" | ||
| bind:value={content} | ||
| bind:this={editor} | ||
| ></textarea> | ||
| </Card> | ||
| <Card class="flex flex-col flex-grow"> | ||
| {#each lints as lint, i} | ||
| <Card class="m-1 hover:translate-x-3 transition-all" on:click={() => (focused = i)}> | ||
| <div class="pl-2 border-l-[3px] border-l-primary-500"> | ||
| <div class="flex flex-row"> | ||
| <h3 class="font-bold"> | ||
| {lint.lint_kind} - “<span class="italic"> | ||
| {spanContent(lint.span, content)} | ||
| </span> ” | ||
| </h3> | ||
| </div> | ||
| <div | ||
| class="transition-all overflow-hidden flex flex-col justify-evenly" | ||
| style={`height: ${ | ||
| focused === i ? `calc(55px * ${lint.suggestions.length + 1})` : '0px' | ||
| }`} | ||
| > | ||
| <p style="height: 50px">{lint.message}</p> | ||
| {#each lint.suggestions as suggestion} | ||
| <Button | ||
| color="primary" | ||
| class="w-full mb-1" | ||
| style="height: 40px; margin: 5px 0px;" | ||
| on:click={() => | ||
| applySuggestion(content, suggestion, lint.span).then( | ||
| (edited) => (content = edited) | ||
| )} | ||
| > | ||
| Replace "{content.substring(lint.span.start, lint.span.end)}" with "{suggestion.ReplaceWith.reduce( | ||
| (p, c) => p + c | ||
| )}" | ||
| </Button> | ||
| {/each} | ||
| </div> | ||
| </div> | ||
| </Card> | ||
| {/each} | ||
| </Card> | ||
| </div> | ||
| <div class="w-full 2xl:w-3/4 h-1/2"> | ||
| <Editor /> | ||
| </div> | ||
| </div> | ||
|
|
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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,27 +1,30 @@ | ||
| export default { | ||
| content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'], | ||
| content: [ | ||
| './src/**/*.{html,js,svelte,ts}', | ||
| './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}' | ||
| ], | ||
|
|
||
| plugins: [require('flowbite/plugin')], | ||
| plugins: [require('flowbite/plugin')], | ||
|
|
||
| darkMode: 'class', | ||
| darkMode: 'class', | ||
|
|
||
| theme: { | ||
| extend: { | ||
| colors: { | ||
| // flowbite-svelte | ||
| primary: { | ||
| 50: '#FFF5F2', | ||
| 100: '#FFF1EE', | ||
| 200: '#FFE4DE', | ||
| 300: '#FFD5CC', | ||
| 400: '#FFBCAD', | ||
| 500: '#FE795D', | ||
| 600: '#EF562F', | ||
| 700: '#EB4F27', | ||
| 800: '#CC4522', | ||
| 900: '#A5371B' | ||
| } | ||
| } | ||
| } | ||
| } | ||
| theme: { | ||
| extend: { | ||
| colors: { | ||
| // flowbite-svelte | ||
| primary: { | ||
| 900: '#133f71', | ||
| 800: '#355280', | ||
| 700: '#50658f', | ||
| 600: '#69799f', | ||
| 500: '#818eae', | ||
| 400: '#9aa4be', | ||
| 300: '#b3bace', | ||
| 200: '#ccd0de', | ||
| 100: '#e5e7ef', | ||
| 50: '#ffffff' | ||
| } | ||
| } | ||
| } | ||
| } | ||
| }; |