Closed cben0ist closed 5 months ago
referefref
commented
5 months ago thanks for the feedback! i'll look into this when i have a moment and see what's happening. I have some code for another project that does this already but i can't remember if i integrated it into this solution.
referefref
commented
5 months ago @cben0ist are you able to provide a copy of the html that's generated so I can have a look why the schema.org recipe markup isn't working. It is indeed built in as a feature as I needed that for my pipeline, we should be able to use the google markup validation tool to confirm if and where there's a problem.
cben0ist
commented
5 months ago @referefref Sure! Here is 1 example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popovers Recipe</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f8f8f8;
color: #333;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
h1, h2 {
color: #444;
}
.author, .date-published {
font-style: italic;
color: #666;
}
.nutrition, .keywords, .recipe-cuisine, .recipe-category {
margin-top: 10px;
font-style: italic;
}
.recipe-ingredient, .recipe-instructions {
list-style-type: none;
padding: 0;
}
.recipe-ingredient li, .recipe-instructions li {
margin-bottom: 5px;
padding: 5px;
background-color: #f0f0f0;
border-radius: 4px;
}
.recipe-instructions li {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>Popovers</h1>
<p class="author">Author: Not Specified</p>
<p class="date-published">Date Published: Not Specified</p>
<p>Description: This American version of Yorkshire pudding can be served with marmalade and fresh fruit at breakfast or add some grated cheese and herbs for a more savory accompaniment to lunch or dinner.</p>
<p class="recipe-cuisine">Cuisine: American</p>
<p class="prep-time">Prep Time: 10 minutes</p>
<p class="cook-time">Cook Time: 20 minutes</p>
<p class="total-time">Total Time: 30 minutes</p>
<p class="keywords">Keywords: popovers, breakfast, savory, American cuisine</p>
<p class="recipe-yield">Yield: 6 servings</p>
<p class="recipe-category">Category: Side Dish</p>
<p class="nutrition">Calories: Not Specified</p>
<h2>Ingredients</h2>
<ul class="recipe-ingredient">
<li>1 1/2 cups milk</li>
<li>3 large eggs</li>
<li>1/2 teaspoon kosher salt</li>
<li>1 tablespoon butter, melted</li>
<li>1 1/2 cups all-purpose flour</li>
<li>2 tablespoons butter, cut into 6 even pieces</li>
</ul>
<h2>Instructions</h2>
<ol class="recipe-instructions">
<li>Preheat Oven: Preheat oven to 400°F and grease popover pan.</li>
<li>Blend Ingredients: Add milk, eggs, kosher salt, melted butter, and all-purpose flour to jar in order listed, excluding the 2 tablespoons butter cut into 6 even pieces. Secure lid and select 'Batters'.</li>
<li>Prepare Pan: Place 1 piece of the cut butter into each cup of the popover pan and place pan back in oven until butter is melted.</li>
<li>Bake: Pour batter into each cup, filling half full. Bake for 20 minutes. Reduce oven temperature as necessary to prevent over-browning.</li>
<li>Serve: Serve popovers hot with marmalade and fresh fruit for breakfast or with grated cheese and herbs for a savory lunch or dinner accompaniment.</li>
</ol>
</div>
</body>
</html>
another one, just in case:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nestles Quik Cake Recipe</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 0;
background-color: #f8f8f8;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
h1 {
color: #333;
}
.author, .category, .cuisine, .time, .yield {
font-style: italic;
color: #666;
}
.ingredients, .instructions {
margin-top: 20px;
}
.ingredients ul, .instructions ol {
margin: 0;
padding-left: 20px;
}
.ingredients li, .instructions li {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>Nestles Quik Cake</h1>
<p class="author">By Ramona Caudle</p>
<p class="description">A delightful chocolate cake made with Nestles Quik, perfect for any occasion.</p>
<p class="category">Category: Dessert</p>
<p class="cuisine">Cuisine: American</p>
<p class="yield">Yield: 1 9x13" cake</p>
<div class="time">
<p>Prep Time: 15 minutes</p>
<p>Cook Time: 30 minutes</p>
<p>Total Time: 45 minutes</p>
</div>
<div class="ingredients">
<h2>Ingredients</h2>
<ul>
<li>2 cups flour</li>
<li>2 cups sugar</li>
<li>1/2 tsp. salt</li>
<li>6 T. Nestles Quik</li>
<li>2 eggs, beaten</li>
<li>2 tsps. soda</li>
<li>2 cups buttermilk</li>
<li>1 tsp. vanilla</li>
<li>1-1/2 cups powdered sugar (for topping)</li>
<li>1 stick margarine, melted (for topping)</li>
<li>1/2 cup milk (for topping)</li>
<li>1 tsp. vanilla (for topping)</li>
</ul>
</div>
<div class="instructions">
<h2>Instructions</h2>
<ol>
<li>Mix together flour, sugar, Nestles Quik, and salt.</li>
<li>Add beaten eggs, buttermilk (add soda to milk), and vanilla to the dry ingredients.</li>
<li>Grease and flour a 9x13" pan; add batter.</li>
<li>Bake at 350° for 30 minutes.</li>
<li>For the topping, mix together powdered sugar, melted margarine, milk, and vanilla.</li>
<li>Pour the topping over the hot cake.</li>
</ol>
</div>
</div>
</body>
</html>I've made some updates, it should put the schema at the bottom of the page for now, which isn't technically correct but Nextcloud might not be as picky about the placement of it as Google is. Let me know if there's still an issue, otherwise i'll come back to this later and tidy it up properly. @cben0ist
cben0ist
commented
5 months ago That worked! Thank you!
I am impressed by the picture to text to webpage current solution already! I have tried the convertor today with the goal to import the generated file in Nextcloud cookbook. The html output doesn't satisfy NC Cookbook however as the import end in a "No parser found for the given import" error. My understanding is that the page needs to support the schema.org recipe standard’s JSON+LD meta data. Not sure if that is an easy addition or not :/ I will happily participate to that implementation if I can get some directions. Thank you!