pub const CODE_WEB_SITE: &str = "# A Website in a Website\n\nThis card is a whole website, and the program beside it is all of it. Change a\nline and the page rebuilds as you type: the words, the list, the button, the colours.\n\n## Page /\n\nState:\n Let hellos be 0.\n Let dark be false.\n Let reasons be [\"You can read every line.\", \"Logic and mathematics are built in.\", \"Your agent writes it with you.\"].\n\nActions:\n To wave:\n Set hellos to hellos + 1.\n\n To switchLights:\n Set dark to not dark.\n\nView:\n <section id=\"site\" class=\"site\" class:dark={dark}>\n <p class=\"kicker\">Made with LOGOS</p>\n <h1 id=\"title\">A website in a website</h1>\n <p>Everything on this card is the English program beside it.</p>\n <ul>\n {for each reason in reasons:}\n <li>{reason}</li>\n {end}\n </ul>\n <div class=\"row\">\n <button id=\"wave\" on-click={wave}>Say hello</button>\n <button id=\"lights\" class=\"secondary\" on-click={switchLights}>Switch the lights</button>\n </div>\n <p id=\"hellos\" class=\"count\">{hellos | plural \"hello\" \"hellos\"} so far</p>\n </section>\n\nStyle:\n .kicker { color: var(--accent); font-weight: 600; margin-bottom: 0.25rem; }\n .row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.25rem 0 0.75rem; }\n .count { color: var(--muted); margin: 0; }\n .site.dark { background: #1f1e1d; color: #f5f4ef; border-color: #3a3936; }\n .site.dark .count { color: #a3a29e; }\n .site.dark .secondary { color: #f5f4ef; border-color: #3a3936; }\n\n## Test: every hello is counted\n\nClick \"#wave\".\nClick \"#wave\".\nExpect that the text of \"#hellos\" is equal to \"2 hellos so far\".\n\n## Test: the lights switch off and on\n\nClick \"#lights\".\nExpect that the count of \".dark\" is equal to 1.\nClick \"#lights\".\nExpect that the count of \".dark\" is equal to 0.\n";Expand description
Web page: a website in a website, the front page’s live example: a card with a list, a counted button and a light switch. Kept in its own file so the front page shows exactly what ships.