💻 New public adventures page

app.py

@@ -24,7 +24,7 @@
 from flask import (Flask, Response, abort, after_this_request, g, jsonify, make_response,
                    redirect, request, send_file, url_for, Blueprint,
                    send_from_directory, session, current_app)
-from flask_babel import Babel
+from flask_babel import Babel, format_timedelta
 from website.flask_helpers import gettext_with_fallback as gettext
 from website.flask_commonmark import Commonmark
 from flask_compress import Compress
@@ -2707,11 +2707,47 @@ def chunk(x, size):
 
 @app.app_template_filter()
 def format_date(date):
+    """Format a date/time as a full description of the date/time.
+
+    In HTML, render a timestamp with both absolute and relative parts, like this:
+
+    ```
+    <span title="{{ date|format_date }}">
+      {{ date|format_date_rel }}
+    </span>
+    ```
+    """
     if not isinstance(date, int):
         return date
     return utils.localized_date_format(date)
 
 
+@app.app_template_filter()
+def format_date_rel(date):
+    """Format a date/time as a relative time.
+
+    In HTML, render a timestamp with both absolute and relative parts, like this:
+
+    ```
+    <span title="{{ date|datetimeformat }}">
+      {{ date|format_date_rel }}
+    </span>
+    ```
+    """
+    if not isinstance(date, int):
+        return date
+    now = datetime.datetime.now(tz=datetime.UTC)
+    dt = datetime.datetime.fromtimestamp(date, tz=datetime.UTC)
+    # (dt - now) feels the wrong way around, but otherwise this formats "3 weeks from now"
+    return format_timedelta(dt - now, granularity='minute', add_direction=True)
+
+
+@app.app_template_filter()
+def jsts_to_unix(date):
+    """Convert a JavaScript timestamp (in milliesconds since epoch) to a UNIX timestamp (in seconds since epoch)."""
+    return int(date / 1000)
+
+
 @app.app_template_global()
 def hedy_link(level_nr, assignment_nr, subpage=None):
     """Make a link to a Hedy page."""

build-tools/heroku/tailwind/styles.css

@@ -1014,4 +1014,12 @@ div[class^="ace_incorrect_hedy_code"] {
 
 .sliding-content-open {
   grid-template-rows: 1fr;
+}
+
+.adventure-item.selected {
+  @apply bg-blue-300;
+}
+
+.adventure-item.selected .text-gray-500 {
+  @apply text-white !important;
 }

hedy.py

@@ -13,7 +13,7 @@
 import hedy_grammar
 import hedy_translation
 from utils import atomic_write_file
-from hedy_content import ALL_KEYWORD_LANGUAGES
+from hedy_content import ALL_KEYWORD_LANGUAGES, MAX_LEVEL
 from collections import namedtuple
 import re
 import regex
@@ -35,7 +35,7 @@
 from prefixes.music import present_in_notes_mapping
 from prefixes.normal import get_num_sys
 
-HEDY_MAX_LEVEL = 18
+HEDY_MAX_LEVEL = MAX_LEVEL
 HEDY_MAX_LEVEL_SKIPPING_FAULTY = 5
 MAX_LINES = 100
 LEVEL_STARTING_INDENTATION = 8

hedy_content.py

@@ -12,6 +12,8 @@
 
 COUNTRIES = static_babel_content.COUNTRIES
 
+MAX_LEVEL = 18
+
 # Define dictionary for available languages. Fill dynamically later.
 ALL_LANGUAGES = {}
 ALL_KEYWORD_LANGUAGES = {}
@@ -560,6 +562,15 @@ def deep_translate_keywords(yaml, keyword_language):
         return yaml
 
 
+def try_render_keywords(str, keyword_language):
+    """Render {placeholder}s in a string, return the original if there are any errors."""
+    try:
+        return safe_format(str, **KEYWORDS.get(keyword_language))
+    except Exception:
+        logger.exception('Error rendering keywords')
+        return str
+
+
 def get_localized_name(name, keyword_lang):
     return safe_format(name, **KEYWORDS.get(keyword_lang))
 

messages.pot

@@ -146,6 +146,9 @@ msgstr ""
 msgid "Wrong Number of Arguments"
 msgstr ""
 
+msgid "about_this_adventure"
+msgstr ""
+
 msgid "account_overview"
 msgstr ""
 
@@ -203,9 +206,6 @@ msgstr ""
 msgid "adventure_name_invalid"
 msgstr ""
 
-msgid "adventure_prompt"
-msgstr ""
-
 msgid "adventure_terms"
 msgstr ""
 
@@ -374,6 +374,9 @@ msgstr ""
 msgid "constant_variable_role"
 msgstr ""
 
+msgid "containing"
+msgstr ""
+
 msgid "content_invalid"
 msgstr ""
 
@@ -698,6 +701,9 @@ msgstr ""
 msgid "go_to_quiz_result"
 msgstr ""
 
+msgid "go_to_your_clone"
+msgstr ""
+
 msgid "goto_profile"
 msgstr ""
 
@@ -1478,9 +1484,6 @@ msgstr ""
 msgid "select_levels"
 msgstr ""
 
-msgid "select_tag"
-msgstr ""
-
 msgid "selected"
 msgstr ""
 
@@ -1697,6 +1700,9 @@ msgstr ""
 msgid "template_code"
 msgstr ""
 
+msgid "this_adventure_has_an_example_solution"
+msgstr ""
+
 msgid "this_turns_in_assignment"
 msgstr ""
 

static/css/generated.full.css

@@ -1331,6 +1331,11 @@ a.green-btn-new:hover:active {
   color: rgb(160 174 192 / var(--tw-text-opacity));
 }
 
+.adventure-item.selected .gray-btn {
+  --tw-text-opacity: 1 !important;
+  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
+}
+
 .gray-btn:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(247 250 252 / var(--tw-bg-opacity));
@@ -1362,6 +1367,11 @@ a.green-btn-new:hover:active {
   color: rgb(160 174 192 / var(--tw-text-opacity));
 }
 
+.adventure-item.selected .back-btn {
+  --tw-text-opacity: 1 !important;
+  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
+}
+
 .back-btn:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(247 250 252 / var(--tw-bg-opacity));
@@ -345215,6 +345225,16 @@ div[class^="ace_incorrect_hedy_code"] {
   grid-template-rows: 1fr;
 }
 
+.adventure-item.selected {
+  --tw-bg-opacity: 1;
+  background-color: rgb(144 205 244 / var(--tw-bg-opacity));
+}
+
+.adventure-item.selected .text-gray-500 {
+  --tw-text-opacity: 1 !important;
+  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
+}
+
 .selection\:bg-transparent *::-moz-selection {
   background-color: transparent;
 }
@@ -345486,6 +345506,11 @@ div[class^="ace_incorrect_hedy_code"] {
   background-color: rgb(217 228 243 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-red-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(197 48 48 / var(--tw-bg-opacity));
+}
+
 .hover\:fill-\[\#8b8b8b\]:hover {
   fill: #8b8b8b;
 }
@@ -346903,14 +346928,6 @@ div[class^="ace_incorrect_hedy_code"] {
     width: 50%;
   }
 
-  .sm\:basis-1\/2 {
-    flex-basis: 50%;
-  }
-
-  .sm\:flex-row {
-    flex-direction: row;
-  }
-
   .sm\:justify-normal {
     justify-content: normal;
   }
@@ -347049,6 +347066,10 @@ div[class^="ace_incorrect_hedy_code"] {
 }
 
 @media (min-width: 1024px) {
+  .lg\:order-2 {
+    order: 2;
+  }
+
   .lg\:order-3 {
     order: 3;
   }
@@ -347083,6 +347104,10 @@ div[class^="ace_incorrect_hedy_code"] {
     display: flex;
   }
 
+  .lg\:grid {
+    display: grid;
+  }
+
   .lg\:hidden {
     display: none;
   }

static/js/app.ts

@@ -423,7 +423,7 @@ function convertPreviewToEditor(preview: HTMLPreElement, container: HTMLElement,
   // And add an overlay button to the editor if requested via a show-copy-button class, either
   // on the <pre> itself OR on the element that has the '.turn-pre-into-ace' class.
   if ($(preview).hasClass('show-copy-button') || $(container).hasClass('show-copy-button')) {
-    const adventure = container.getAttribute('data-tabtarget')
+    const adventure = container.closest('[data-tabtarget]')?.getAttribute('data-tabtarget');
     const buttonContainer = $('<div>').addClass('absolute ltr:right-0 rtl:left-0 top-0 mx-1 mt-1').appendTo(preview);
     let symbol = "⇥";
     if (dir === "rtl") {
@@ -438,10 +438,17 @@ function convertPreviewToEditor(preview: HTMLPreElement, container: HTMLElement,
       clearOutput();
     });
   }
-  const levelStr = $(preview).attr('level');
-  const lang = $(preview).attr('lang');
-  if (levelStr && lang) {
-    exampleEditor.setHighlighterForLevel(parseInt(levelStr, 10), lang);
+
+  // Try to find the level for this code block. We first look at the 'level'
+  // attribute on the <pre> element itself.  This is to preserve legacy
+  // behavior, I'm not sure where this is still used. The modern way is to look
+  // for 'data-level' attributes on the element itself and any containing element.
+  // Same for 'lang' and 'data-lang'.
+  const levelStr = $(preview).attr('level') ?? $(preview).closest('[data-level]').attr('data-level');
+  const kwlang = $(preview).attr('lang') ?? $(preview).closest('[data-kwlang]').attr('data-kwlang');
+  if (levelStr) {
+    const level = parseInt(levelStr, 10);
+    exampleEditor.setHighlighterForLevel(level, kwlang ?? 'en');
   }
 }