[{"_1":2,"_172":-5,"_173":-5},"loaderData",{"_3":4,"_59":60,"_171":-5},"root",{"_5":6,"_21":-5,"_22":-5,"_23":24,"_42":-5,"_43":-5,"_44":-5,"_45":46,"_55":56,"_57":58},"env",{"_7":8,"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20},"SUPABASE_URL","https://hello.websim.com","SUPABASE_KEY","sb_publishable_Psom5r5hvV9Glvzv4s3oOQ_2b_HevU-","POSTHOG_KEY","phc_VHMOlrdxAbgSZHeF0SdSf07LZLRLAg5pZuTHkJGn050","POSTHOG_API_HOST","https://e.wbsm.ai","POSTHOG_UI_HOST","https://app.posthog.com","GOOGLE_OAUTH_CLIENT_ID","891181648870-i708rj1bgjol84hie20shfr4u4ecf3o7.apps.googleusercontent.com","ACTIVITY_DIRECT_PAGEVIEW","on","authUser","user","snapshotData",{"_25":-5,"_26":-5,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5,"_33":-5,"_34":-5,"_35":-5,"_36":-5,"_37":-5,"_38":-5,"_39":-5,"_40":-5,"_41":-5},"lastProjectId","sidebarTab","homepageTab","pinSidebar","settingsOpen","maximized","assetsExpanded","focusedAssetFilename","authError","authErrorCode","authErrorDescription","sidebarWidth","videoMuted","videoVolume","navigationContext","hasSeenFeedOnboarding","nextUpExpanded","plan","balances","rewards","origins",{"_47":48,"_49":50,"_51":52,"_53":54},"origin","https://websim.com","apiOrigin","https://api.websim.com","contentOrigin","https://{PROJECT_ID}.c.websim.com","appDomainOrigin","https://{SUBDOMAIN}.on.websim.com","isMobile",false,"theme","auto","slug",{"_61":62,"_63":64,"_118":119,"_135":136,"_163":164,"_165":-5,"_166":167,"_168":169},"version","1","project",{"_65":63,"_66":67,"_68":69,"_70":71,"_81":82,"_83":84,"_85":86,"_87":88,"_89":90,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":96,"_97":98,"_59":106,"_107":96,"_108":96,"_109":56,"_110":-5,"_111":-5,"_112":-5,"_113":114,"_115":-5,"_116":-5,"_117":56},"_type","id","xeuiuk5rdyi_s3tjbfax","created_at","2024-09-21T00:46:16.931Z","created_by",{"_65":22,"_66":72,"_73":74,"_68":75,"_76":77,"_78":-5,"_79":-5,"_80":56},"66254c62-8798-4e3e-bc76-7e718baf08df","username","henryhunterjr2","2024-07-04T13:03:05.074Z","avatar_url","https://lh3.googleusercontent.com/a/ACg8ocLbLxqc-BsueIpHk1_pqDyG3kIVTigkqmGQzN7mdHE3tMefVz4=s96-c","discord_username","discord_id","is_admin","updated_at","2024-09-21T00:46:16.933Z","title","Glossary of Terms","comments_mode","open","visibility","public","current_version",1,"last_posted_version","parent_id","parent_version","deleted_at","posted",true,"stats",{"_99":100,"_101":67,"_102":103,"_104":90,"_105":103},"~type","project_stats","project_id","views",0,"likes","comments","glossary-of-terms","auto_set_current","allow_automatic_improvements","board_enabled","description","generated_description","from_template","domains",[],"thumbnail","video","has_active_experiment","project_revision",{"_65":118,"_66":120,"_61":90,"_68":82,"_121":-5,"_92":-5,"_122":-5,"_123":-5,"_70":124,"_125":126,"_101":67,"_81":82,"_94":-5,"_97":127,"_129":56,"_130":131,"_132":-5,"_133":-5,"_134":-5},"0192120b-3365-7d05-a780-85e84087712d","visited_at","parent_revision_version","parent_revision_project_id",{"_65":22,"_66":72,"_73":74,"_68":75,"_76":77,"_78":-5,"_79":-5,"_80":56},"meta",{"_61":62},{"_128":103},"multiplayer_count","draft","site_id","FGFqA4EqD1Kfnj7hq","chat_session_id","chat_session_run_index","current_screenshot_url","site",{"_65":135,"_66":131,"_92":-5,"_68":137,"_138":139,"_140":141,"_142":143,"_83":146,"_147":148,"_149":150,"_155":-5,"_156":157,"_158":159,"_94":-5,"_160":-5,"_161":162},"2024-08-29T23:00:01.696Z","state","done","model","sonnet","lore",{"_61":90,"_144":145},"attachments",[],"Baking Great Bread at Home - Glossary","owner",{"_65":22,"_66":72,"_73":74,"_68":75,"_76":77,"_78":-5,"_79":-5,"_80":56},"prompt",{"_151":152,"_153":154},"type","plaintext","text","Here’s the full code for the enhanced Bread Baker's Glossary of Terms, complete with the suggested improvements:\n\n### 1. **HTML Structure**\n\n```html\n\n\n\n \n \n \n \n \n \n \n \n \n \n \n Baking Great Bread at Home - Glossary\n\n\n

\n $\"Baking$ \n

Baking Great Bread at Home

Bread Baker's Glossary of Terms

\n \n

\n \n \n

\n \n

Suggest a New Term

\n \n \n \n

\n \n \n \n \n\n\n```\n\n### 2. **CSS (styles.css)**\nThis CSS file provides the styling for the app, giving it a fall-inspired aesthetic.\n\n```css\nbody {\n font-family: 'Arial', sans-serif;\n background-color: #f4edea;\n color: #333;\n margin: 0;\n padding: 0;\n}\n\n.hero {\n text-align: center;\n background-color: #d7a460;\n padding: 20px;\n position: relative;\n}\n\n.hero-image {\n width: 100%;\n max-height: 300px;\n object-fit: cover;\n opacity: 0.8;\n}\n\nh1 {\n font-size: 2.5em;\n color: #fff;\n margin: 0;\n position: absolute;\n top: 30%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\nh2 {\n font-size: 1.5em;\n color: #fff;\n margin: 0;\n position: absolute;\n top: 45%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.container {\n padding: 20px;\n text-align: center;\n}\n\ninput[type=\"text\"], textarea {\n width: 80%;\n padding: 10px;\n margin: 10px 0;\n border: 1px solid #ccc;\n border-radius: 4px;\n font-size: 16px;\n}\n\ntextarea {\n height: 100px;\n resize: none;\n}\n\nbutton {\n background-color: #d7a460;\n color: #fff;\n border: none;\n padding: 10px 20px;\n margin-bottom: 20px;\n cursor: pointer;\n border-radius: 4px;\n font-size: 16px;\n}\n\nbutton:hover {\n background-color: #bf8540;\n}\n\n#terms {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.term {\n background: #ffffff;\n border-radius: 5px;\n padding: 15px;\n margin: 10px 0;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n cursor: pointer;\n width: 90%;\n max-width: 600px;\n text-align: left;\n transition: background-color 0.3s;\n}\n\n.term:hover {\n background-color: #f0e2d2;\n}\n\n.term h3 {\n margin: 0;\n font-size: 18px;\n color: #d7a460;\n}\n\n.definition {\n margin-top: 20px;\n background: #fdf8f6;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n width: 90%;\n max-width: 600px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.suggest-term {\n margin-top: 40px;\n text-align: center;\n}\n\nfooter {\n background-color: #d7a460;\n padding: 10px;\n text-align: center;\n color: #fff;\n position: fixed;\n width: 100%;\n bottom: 0;\n left: 0;\n}\n```\n\n### 3. **JavaScript (script.js)**\nThis JavaScript file handles the dynamic loading of terms, filtering, random selection, and user term suggestions.\n\n```javascript\nconst glossary = [\n {\n term: \"Amylase\",\n definition: \"Enzymes that break down starch into sugar, aiding in fermentation and adding to the flavor and color of the bread.\"\n },\n {\n term: \"Ancient Grains\",\n definition: \"Grains that have remained largely unchanged for hundreds or even thousands of years, e.g., quinoa, spelt, millet.\"\n },\n {\n term: \"Autolyse\",\n definition: \"A process where flour and water are mixed and rested to aid gluten development and extensibility.\"\n },\n {\n term: \"Banneton\",\n definition: \"A basket used to shape and support bread during proofing.\"\n },\n {\n term: \"Biga\",\n definition: \"A type of Italian pre-ferment.\"\n },\n {\n term: \"Bulk Fermentation\",\n definition: \"The first rising of the dough, often lasting several hours.\"\n },\n {\n term: \"Crumb\",\n definition: \"The interior texture of the bread.\"\n },\n {\n term: \"Docking\",\n definition: \"The process of piercing dough to allow steam to escape during baking.\"\n },\n {\n term: \"Hydration\",\n definition: \"The ratio of water to flour in a dough, expressed as a percentage.\"\n },\n {\n term: \"Levain\",\n definition: \"A French term for sourdough starter.\"\n }\n // Additional terms can be added here...\n];\n\nfunction loadTerms() {\n const termsContainer = document.getElementById('terms');\n glossary.forEach(entry => {\n const termDiv = document.createElement('div');\n termDiv.className = 'term';\n termDiv.innerHTML = `

${entry.term}

`;\n termDiv.onclick = () => displayDefinition(entry);\n termsContainer.appendChild(termDiv);\n });\n}\n\nfunction filterTerms() {\n const searchValue = document.getElementById('search').value.toLowerCase();\n const terms = document.getElementsByClassName('term');\n Array.from(terms).forEach(term => {\n const termTitle = term.getElementsByTagName('h3')[0].innerText.toLowerCase();\n if (termTitle.includes(searchValue)) {\n term.style.display = '';\n } else {\n term.style.display = 'none';\n }\n });\n}\n\nfunction displayDefinition(entry) {\n const definitionDiv = document.getElementById('definition');\n definitionDiv.innerHTML = `

${entry.term}

${entry.definition}

`;\n}\n\nfunction selectRandomTerm() {\n const randomIndex = Math.floor(Math.random() * glossary.length);\n displayDefinition(glossary[randomIndex]);\n}\n\nfunction suggestTerm() {\n const newTerm = document.getElementById('newTerm').value.trim();\n const newDefinition = document.getElementById('newDefinition').value.trim();\n const feedback = document.getElementById('feedback');\n\n if (newTerm && newDefinition) {\n glossary.push({ term: newTerm, definition: newDefinition });\n feedback.innerText = `Thank you! Your suggestion for \"${newTerm}\" has been added.`;\n loadTerms(); // Reload terms to include the new term\n } else {\n feedback.innerText = 'Please provide both a term and a definition.';\n }\n\n // Clear inputs\n document.getElementById('new\n\nTerm').value = '';\n document.getElementById('newDefinition').value = '';\n}\n\nwindow.onload = loadTerms;\n```\n\n### 4. **Progressive Web App (PWA) Setup**\n\n**manifest.json:**\n\n```json\n{\n \"name\": \"Baking Great Bread at Home - Glossary\",\n \"short_name\": \"Bread Glossary\",\n \"start_url\": \"./index.html\",\n \"display\": \"standalone\",\n \"background_color\": \"#f4edea\",\n \"theme_color\": \"#d7a460\",\n \"description\": \"Interactive glossary for bread bakers by Baking Great Bread at Home.\",\n \"icons\": [\n {\n \"src\": \"icon-192.png\",\n \"sizes\": \"192x192\",\n \"type\": \"image/png\"\n },\n {\n \"src\": \"icon-512.png\",\n \"sizes\": \"512x512\",\n \"type\": \"image/png\"\n }\n ]\n}\n```\n\n**Service Worker (sw.js):**\n\n```javascript\nconst CACHE_NAME = \"bread-glossary-cache-v1\";\nconst urlsToCache = [\n \"/\",\n \"/index.html\",\n \"/styles.css\",\n \"/script.js\",\n \"/manifest.json\",\n \"/Hero image 6..png\",\n \"/icon-192.png\",\n \"/icon-512.png\"\n];\n\nself.addEventListener('install', event => {\n event.waitUntil(\n caches.open(CACHE_NAME)\n .then(cache => cache.addAll(urlsToCache))\n );\n});\n\nself.addEventListener('fetch', event => {\n event.respondWith(\n caches.match(event.request)\n .then(response => response || fetch(event.request))\n );\n});\n\nself.addEventListener('activate', event => {\n const cacheWhitelist = [CACHE_NAME];\n event.waitUntil(\n caches.keys().then(keyList =>\n Promise.all(keyList.map(key => {\n if (!cacheWhitelist.includes(key)) {\n return caches.delete(key);\n }\n }))\n )\n );\n});\n```\n\n**Update the HTML to include the service worker registration:**\n\n```html\n\n```\n\n### Summary\n\nThis project includes:\n\n1. **Expanded Glossary**: The glossary now has more terms, making it more comprehensive.\n2. **User Interaction**: Users can suggest new terms and definitions, making the glossary dynamic.\n3. **SEO Optimization**: The page includes meta tags and Open Graph data to improve its visibility on search engines and social media.\n4. **PWA Setup**: The app is set up as a Progressive Web App, allowing users to install it on their devices and use it offline.\n\n### Deployment\n\n1. **Upload to WebSim.ai**: Upload the HTML, CSS, JavaScript, manifest.json, and sw.js files to WebSim.ai.\n2. **Test**: Ensure the PWA capabilities work if WebSim.ai supports them.\n3. **Share**: Once deployed, share the app link with your Facebook group.\n\nThis setup should provide your users with an interactive and feature-rich glossary that’s easy to use and share.","url","link_url","/p/xeuiuk5rdyi_s3tjbfax","versioned_link_url","/p/xeuiuk5rdyi_s3tjbfax/1","yapping","page_description","This page is a \"Bread Baker's Glossary of Terms,\" designed to educate users about various bread baking terminology. The layout features a hero section…","cursor","eyJpZCI6InhldWl1azVyZHlpX3MzdGpiZmF4In0","token","included",[],"about",{"_170":-5},"parent","routes/browser/layout","actionData","errors"]