11<script lang =" ts"
22 import { invoke } from " @tauri-apps/api/core"
33 import { goto } from " $app/navigation"
4- import ' ./kanji-lookup.css'
4+ import " ./kanji-lookup.css"
55 let submitted_kanji = " "
66 let character = " "
77 let stroke_count = " "
88 let grade = " "
99 let jlpt_level = " "
1010 let frequency = " "
11- let onyomi = " "
12- let kunyomi = " "
11+ let onyomi: string [] = [] ;
12+ let kunyomi: string [] = [] ;
1313 let meanings: string [] = [];
1414 let nanori: string [] = [];
1515 let kanji_svg: string = " "
1919 event .preventDefault ();
2020 error = " "
2121 meanings = [];
22- onyomi = kunyomi = jlpt_level = " "
22+ nanori = [];
23+ onyomi = [];
24+ kunyomi = [];
2325 kanji_svg = " "
2426
2527 try {
4547 grade = result .grade .toString ();
4648 jlpt_level = result .jlpt_level .toString ();
4749 frequency = result .frequency .toString ();
48- onyomi = result .onyomi ;
49- kunyomi = result .kunyomi ;
50- meanings = result .meanings ;
50+
51+ // Split onyomi and kunyomi by comma and filter out empty strings
52+ onyomi = result .onyomi
53+ ? result .onyomi
54+ .split (" ,"
55+ .map ((s ) => s .trim ())
56+ .filter ((s ) => s .length > 0 )
57+ : [];
58+ kunyomi = result .kunyomi
59+ ? result .kunyomi
60+ .split (" ,"
61+ .map ((s ) => s .trim ())
62+ .filter ((s ) => s .length > 0 )
63+ : [];
64+
65+ // result.meanings is already an array, no need to split
66+ meanings = result .meanings || [];
5167 nanori = result .nanori ;
5268 } catch (e ) {
5369 console .log (" Error fetching kanji data:" e );
6076 }
6177
6278 export function insertSvg(node : HTMLElement ) {
63- if (kanji_svg ) {
64- try {
65- // Create a temporary container to parse the SVG string properly
66- const = new DOMParser ();
67- const = parser .parseFromString (kanji_svg , " image/svg+xml"
68-
69- // Extract just the SVG element
70- const = doc .querySelector (" svg"
71-
72- if (svgElement ) {
73- // Clear the node and append the SVG element
74- node .innerHTML = " "
75- node .appendChild (svgElement .cloneNode (true ));
76- } else {
77- console .error (" No SVG element found in the string"
78- }
79- } catch (e ) {
80- console .error (" Error parsing SVG:" e );
81-
82- // Fallback to regex cleaning if parsing fails
83- const = kanji_svg
84- .replace (/ <\? xml[^ >] * \? >/ g ' ' // Remove XML declaration
85- .replace (/ <!DOCTYPE[^ >] * >/ g ' ' // Remove DOCTYPE
86- .replace (/ <!ENTITY[^ >] * >/ g ' ' // Remove ENTITY declarations
87- .replace (/ <!\[ CDATA\[ . *? \]\] >/ gs ' ' // Remove CDATA sections
88- .replace (/ \] \s * >$ / g ' ' // Remove trailing ]>
89- .replace (/ \s * \] \s * >$ / g ' ' // Remove trailing ]> with whitespace
90-
91- const = cleaned .indexOf (" <svg"
92- const = cleaned .lastIndexOf (" </svg>" + 6 ; // +6 for "</svg>"
93-
94- if (svgStart >= 0 && svgEnd > svgStart ) {
95- node .innerHTML = cleaned .substring (svgStart , svgEnd );
96- } else {
97- node .innerHTML = cleaned ;
79+ if (kanji_svg ) {
80+ try {
81+ // Create a temporary container to parse the SVG string properly
82+ const = new DOMParser ();
83+ const = parser .parseFromString (kanji_svg , " image/svg+xml"
84+
85+ // Extract just the SVG element
86+ const = doc .querySelector (" svg"
87+
88+ if (svgElement ) {
89+ // Clear the node and append the SVG element
90+ node .innerHTML = " "
91+ node .appendChild (svgElement .cloneNode (true ));
92+ } else {
93+ console .error (" No SVG element found in the string"
94+ }
95+ } catch (e ) {
96+ console .error (" Error parsing SVG:" e );
97+
98+ // Fallback to regex cleaning if parsing fails
99+ const = kanji_svg
100+ .replace (/ <\? xml[^ >] * \? >/ g " " // Remove XML declaration
101+ .replace (/ <!DOCTYPE[^ >] * >/ g " " // Remove DOCTYPE
102+ .replace (/ <!ENTITY[^ >] * >/ g " " // Remove ENTITY declarations
103+ .replace (/ <!\[ CDATA\[ . *? \]\] >/ gs " " // Remove CDATA sections
104+ .replace (/ \] \s * >$ / g " " // Remove trailing ]>
105+ .replace (/ \s * \] \s * >$ / g " " // Remove trailing ]> with whitespace
106+
107+ const = cleaned .indexOf (" <svg"
108+ const = cleaned .lastIndexOf (" </svg>" + 6 ; // +6 for "</svg>"
109+
110+ if (svgStart >= 0 && svgEnd > svgStart ) {
111+ node .innerHTML = cleaned .substring (svgStart , svgEnd );
112+ } else {
113+ node .innerHTML = cleaned ;
114+ }
98115 }
99116 }
100117 }
101- }
102118script >
103119
120+ <div class =" nav-bar"
121+ <button class ="home-button" on:click ={goToHome }>Back to Home</button >
122+ </div >
123+
104124<main class =" container"
105125 <h1 >Kanji Lookup</h1 >
106126
113133 <button type =" submit" button >
114134 </form >
115135
116- <button class ="home-button" on:click ={goToHome }> Back to Home </button >
117-
118136 {#if error }
119137 <p style ="color: red;" >{error }</p >
120138 {:else if meanings .length > 0 }
124142 <p ><strong >Grade: {grade }</strong ></p >
125143 <p ><strong >JLPT Level: {jlpt_level }</strong ></p >
126144 <p ><strong >Frequency: {frequency }</strong ></p >
127- <p ><strong >Onyomi: {onyomi }</strong ></p >
128- <p ><strong >Kunyomi: {kunyomi }</strong ></p >
145+
146+ {#if onyomi .length > 0 }
147+ <p ><strong >Onyomi:</strong ></p >
148+ <ul >
149+ {#each onyomi as reading }
150+ <li >{reading }</li >
151+ {/each }
152+ </ul >
153+ {/if }
154+
155+ {#if kunyomi .length > 0 }
156+ <p ><strong >Kunyomi:</strong ></p >
157+ <ul >
158+ {#each kunyomi as reading }
159+ <li >{reading }</li >
160+ {/each }
161+ </ul >
162+ {/if }
163+
129164 <p ><strong >Meanings:</strong ></p >
130165 <ul >
131166 {#each meanings as meaning }
132167 <li >{meaning }</li >
133168 {/each }
134169 </ul >
135- <p ><strong >Nanori:</strong ></p >
136- <ul >
137- {#each nanori as name }
138- <li >{name }</li >
139- {/each }
140- </ul >
170+
171+ {#if nanori .length > 0 }
172+ <p ><strong >Nanori:</strong ></p >
173+ <ul >
174+ {#each nanori as name }
175+ <li >{name }</li >
176+ {/each }
177+ </ul >
178+ {/if }
141179 {#if kanji_svg }
142180 <div class =" svg-container" use:insertSvg ></div >
143181 {/if }
144182 </div >
145183 {/if }
146- </main >
184+ </main >
0 commit comments