| package main |
|
|
| import ( |
| "fmt" |
| ) |
|
|
| templ RecipePage(recipe Recipe) { |
| <!doctype html> |
| <html lang="he"> |
| <head> |
| <meta charset="utf-8"> |
| <title>{ recipe.Title }</title> |
| <link rel="stylesheet" href="/static/style.css"> |
| </head> |
| <body> |
| <header> |
| <a href="/">Back</a> |
| <center><h1>{ recipe.Title }</h1></center> |
| </header> |
| <main> |
| <article> |
| <div class="url"><a href={ recipe.URL } target="_blank">Original</a></div> |
| if recipe.ImageURL != "" { |
| <center> |
| <figure> |
| <img src={ recipe.ImageURL } alt={ recipe.Title }> |
| <figcaption>{ recipe.Title }</figcaption> |
| </figure> |
| </center> |
| } |
| if recipe.Description != "" { |
| <section class="description"> |
| <h3>תיאור</h3> |
| <p>{ recipe.Description }</p> |
| </section> |
| } |
| if recipe.Author != "" { |
| <section class="author"> |
| <h3>מחבר</h3> |
| <p>{ recipe.Author }</p> |
| </section> |
| } |
| if recipe.AggregateRating > 0 { |
| <section class="rating"> |
| <h3>דירוג</h3> |
| <p>{ fmt.Sprintf("%.1f", recipe.AggregateRating) } ★ ({ recipe.RatingCount } reviews)</p> |
| </section> |
| } |
| if len(recipe.Ingredients) > 0 { |
| <section class="ingredients"> |
| <h3>מרכיבים</h3> |
| <ul> |
| for _, ingredient := range recipe.Ingredients { |
| <li>{ ingredient }</li> |
| } |
| </ul> |
| </section> |
| } |
| if len(recipe.Instructions) > 0 { |
| <section class="instructions"> |
| <h3>הוראות</h3> |
| <ol> |
| for _, instruction := range recipe.Instructions { |
| <li>{ instruction }</li> |
| } |
| </ol> |
| </section> |
| } |
| <section class="raw-json-ld"> |
| <h3>Raw JSON-LD</h3> |
| <pre id="json_text">{ recipe.RawJsonLd }</pre> |
| </section> |
| </article> |
| </main> |
| </body> |
| <script> |
| |
| function syntaxHighlight(json) { |
| json = JSON.stringify(json, undefined, 4); |
| json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>'); |
| return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?)|(\b(true|false|null)\b)|(\b-?\d+(\.\d*)?([eE][+-]?\d+)?\b)/g, function (match) { |
| var cls = 'number'; |
| if (/^"/.test(match)) { |
| if (/:$/.test(match)) { |
| cls = 'key'; |
| } else { |
| cls = 'string'; |
| } |
| } else if (/true|false/.test(match)) { |
| cls = 'boolean'; |
| } else if (/null/.test(match)) { |
| cls = 'null'; |
| } |
| return '<span class="' + cls + '">' + match + '</span>'; |
| }); |
| } |
| |
| try { |
| var json = JSON.parse(document.getElementById("json_text").innerText); |
| document.getElementById("json_text").innerHTML = '<pre>' + syntaxHighlight(json) + '</pre>'; |
| } catch (e) { |
| console.error("Error parsing JSON:", e); |
| } |
| </script> |
| </html> |
| } |
|
|
