pxt-core 7.5.2 → 7.5.3

package/common-docs/faq.md

@@ -58,7 +58,7 @@ When you download the program for your project, the name you gave the project be
 
 ## I just added / approved a new translation in Crowdin, when will it show up?
 
-[Translations](https://makecode.com/translate) are managed by the [Crowdin](https://crowdin.com/project/kindscript) site. There's a scheduled process which checks for new translations in Crowdin and brings them down to the website serving a MakeCode editor. The process usually takes 10 - 30 minutes from when a new translation is approved to when it will appear in an online editor.
+[Translations](https://makecode.com/translate) are managed by the [Crowdin](https://crowdin.com/project/makecode) site. There's a scheduled process which checks for new translations in Crowdin and brings them down to the website serving a MakeCode editor. The process usually takes 10 - 30 minutes from when a new translation is approved to when it will appear in an online editor.
 
 ## Where is the "Add Package" button?
 

package/common-docs/translate.md

@@ -1,6 +1,6 @@
 # Help translate
 
-Translations of text in the editor, in blocks, and documentation managed by [Crowdin](https://crowdin.com/project/kindscript), a translation management platform. It is free to join
+Translations of text in the editor, in blocks, and documentation managed by [Crowdin](https://crowdin.com/project/makecode), a translation management platform. It is free to join
 and you can volunteer to translate parts of the web site. Translation into different languages is done by the work of people all over the world who volunteer to help MakeCode be accessible to as many people as possible.
 
 ### ~ hint
@@ -16,7 +16,7 @@ https://youtu.be/XpdUzpBVKFU
 
 ## Localized MakeCode
 
-Text, or [strings](/types/string), used in the editor and documentation pages are localized into the current language for the editor (you switch languages by choosing **Language** in the **Settings** menu). Text is continually being added or changed so translations are always at a different stage of completeness. MakeCode text content is stored in files on Crowdin in [English](https://crowdin.com/project/kindscript/en#). Translators choose their language in the [MakeCode Crowdin project](https://crowdin.com/project/kindscript) and work on the files for the editor they want to translate for.
+Text, or [strings](/types/string), used in the editor and documentation pages are localized into the current language for the editor (you switch languages by choosing **Language** in the **Settings** menu). Text is continually being added or changed so translations are always at a different stage of completeness. MakeCode text content is stored in files on Crowdin in [English](https://crowdin.com/project/makecode/en#). Translators choose their language in the [MakeCode Crowdin project](https://crowdin.com/project/makecode) and work on the files for the editor they want to translate for.
 
 ## Want to help?
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pxt-core",
-  "version": "7.5.2",
+  "version": "7.5.3",
   "description": "Microsoft MakeCode provides Blocks / JavaScript / Python tools and editors",
   "keywords": [
     "TypeScript",
@@ -63,7 +63,7 @@
     "@fortawesome/fontawesome-free": "^5.15.4",
     "@microsoft/immersive-reader-sdk": "1.1.0",
     "applicationinsights-js": "^1.0.20",
-    "browserify": "16.2.0",
+    "browserify": "16.2.3",
     "chai": "^3.5.0",
     "cssnano": "4.1.10",
     "dompurify": "2.0.8",
@@ -129,7 +129,7 @@
     "monaco-editor": "0.24.0",
     "pouchdb": "7.2.1",
     "pouchdb-adapter-memory": "7.2.1",
-    "pxt-blockly": "4.0.8",
+    "pxt-blockly": "4.0.9",
     "react": "16.8.3",
     "react-dom": "16.11.0",
     "react-modal": "3.3.2",

package/pxtarget.json

@@ -18,7 +18,7 @@
         "homeUrl": "https://makecode.com/",
         "cardLogo": "./static/logo.svg",
         "appLogo": "./static/logo.svg",
-        "crowdinProject": "kindscript",
+        "crowdinProject": "makecode",
         "docMenu": [
             {
                 "name": "About",

package/react-common/components/controls/EditorToggle.tsx

@@ -0,0 +1,109 @@
+import * as React from "react";
+import { useState } from "react";
+import { classList, ControlProps } from "../util";
+import { Button } from "./Button";
+import { MenuDropdown } from "./MenuDropdown";
+
+export interface EditorToggleProps extends ControlProps {
+    items: EditorToggleItem[];
+    selected: number;
+}
+
+export type EditorToggleItem = BasicEditorToggleItem | DropdownEditorToggleItem;
+
+export interface BasicEditorToggleItem {
+    label: string;
+    title: string;
+    focusable: boolean;
+    icon?: string;
+    onClick: () => void;
+}
+
+export interface DropdownEditorToggleItem extends BasicEditorToggleItem {
+    items: BasicEditorToggleItem[];
+}
+
+
+export const EditorToggle = (props: EditorToggleProps) => {
+    const {
+        id,
+        className,
+        ariaHidden,
+        ariaLabel,
+        role,
+        items,
+        selected
+    } = props;
+
+
+    const hasDropdown = items.some(item => isDropdownItem(item));
+
+    const onKeydown = (ev: React.KeyboardEvent) => {
+        // TODO
+    }
+
+    return (
+        <div id={id}
+            className={classList("common-editor-toggle", hasDropdown && "has-dropdown", className)}
+            role={role || "tablist"}
+            aria-hidden={ariaHidden}
+            aria-label={ariaLabel}>
+                {items.map((item, index) => {
+                    const isSelected = selected === index;
+                    return (
+                        <div key={index}
+                            className={classList(
+                                "common-editor-toggle-item",
+                                isSelected && "selected",
+                                isDropdownItem(item) && "common-editor-toggle-item-dropdown",
+                            )} >
+                            <ToggleButton item={item} isSelected={isSelected} onKeydown={onKeydown} />
+                            { isDropdownItem(item) &&
+                                <MenuDropdown
+                                    id="toggle-dropdown"
+                                    className="toggle-dropdown"
+                                    icon="fas fa-chevron-down"
+                                    title={lf("More options")}
+                                    items={items.map(item => ({
+                                        title: item.title,
+                                        label: item.label,
+                                        onClick: item.onClick,
+                                        leftIcon: item.icon
+                                    }))}
+                                    />
+                            }
+                        </div>
+                    );
+                })}
+
+                <div className="common-editor-toggle-handle"
+                    aria-hidden={true}
+                />
+        </div>
+    );
+}
+
+interface ToggleButtonProps {
+    item: BasicEditorToggleItem;
+    isSelected?: boolean;
+    onKeydown: (ev: React.KeyboardEvent) => void;
+}
+
+const ToggleButton = (props: ToggleButtonProps) => {
+    const { item, isSelected, onKeydown } = props;
+    const { label, title, onClick, icon, focusable } = item;
+
+    return <Button
+        role={focusable ? "tab" : undefined}
+        tabIndex={focusable && isSelected ? 0 : -1}
+        onKeydown={onKeydown}
+        label={label}
+        title={title}
+        onClick={onClick}
+        leftIcon={icon}
+        aria-selected={isSelected} />
+}
+
+function isDropdownItem(item: EditorToggleItem): item is DropdownEditorToggleItem {
+    return !!(item as DropdownEditorToggleItem).items?.length
+}

package/react-common/styles/controls/Button.less

@@ -32,6 +32,10 @@
     margin-left: 0.5rem;
 }
 
+.common-button-flex {
+    white-space: nowrap;
+}
+
 /****************************************************
  *                  Color Variants                   *
  ****************************************************/

package/react-common/styles/controls/EditorToggle.less

@@ -0,0 +1,233 @@
+.common-editor-toggle {
+    position: relative;
+    border-radius: 0.2rem;
+    border: @editorToggleBorderWidth solid @editorToggleBorderColor;
+    background: @editorToggleBackgroundColor;
+    display: flex;
+    flex-direction: row;
+}
+
+// Used in image/tilemap/animation editor
+.common-editor-toggle.slim .common-editor-toggle-item > .common-button {
+    padding: .6rem 2rem .75rem;
+}
+
+.common-editor-toggle-item {
+    z-index: 1;
+    flex: 3;
+
+    .common-menu-dropdown {
+        flex: 4;
+
+        & > .common-button {
+            padding: 0;
+            width: 100%;
+            border-left: 1px solid @editorToggleBorderColor;
+            border-right: 1px solid @editorToggleBorderColor;
+        }
+
+        .common-menu-dropdown-pane {
+            border-top: 1px solid @editorToggleBorderColor;
+        }
+    }
+
+    & > .common-button {
+        background: none;
+        color: @buttonTextColorInverted;
+        transition: color .25s;
+        margin: 0;
+        width: 100%;
+    }
+
+    .common-button:focus::after {
+        outline: none;
+    }
+}
+
+.common-editor-toggle-item.common-editor-toggle-item-dropdown {
+    display: grid;
+    grid-template-columns: 3fr 1fr;
+    flex: 4;
+}
+
+.common-editor-toggle-item.selected {
+    .common-menu-dropdown {
+        text-align: center;
+
+        & > .common-button {
+            border-right: none;
+            color: @buttonTextColor;
+        }
+    }
+
+    & > .common-button {
+        color: @buttonTextColor;
+    }
+}
+
+/*****************************************************
+ *                  Toggle Handle                    *
+ ****************************************************/
+
+ .common-editor-toggle-handle {
+    position: absolute;
+    background: white;
+    width: 33%;
+    height: 100%;
+    transition: margin-left .25s, width .25s;
+    border-radius: 0.2rem;
+    margin-left: -@editorToggleBorderWidth;
+}
+
+.common-editor-toggle {
+    /* toggle size, two items, no dropdown */
+    .common-editor-toggle-item:first-child:nth-last-child(3) ~ .common-editor-toggle-handle { width: 50% }
+
+    /* toggle positioning, two items, no dropdown */
+    .common-editor-toggle-item:first-child:nth-last-child(3) ~ .common-editor-toggle-item.selected ~ .common-editor-toggle-handle { margin-left: 50%; }
+
+    /* toggle positioning, three items, no dropdown */
+    .common-editor-toggle-item:nth-of-type(1).selected ~ .common-editor-toggle-handle { margin-left: 0; }
+    .common-editor-toggle-item:nth-of-type(2).selected ~ .common-editor-toggle-handle { margin-left: 33%; }
+    .common-editor-toggle-item:nth-of-type(3).selected ~ .common-editor-toggle-handle { margin-left: 67%; }
+
+    &.has-dropdown {
+        /* flex balance, two items, has dropdown (45% to non-dropdown, 55% to dropdown) */
+       .common-editor-toggle-item:first-child:nth-last-child(3) ~ .common-editor-toggle-item-dropdown,
+       .common-editor-toggle-item.common-editor-toggle-item-dropdown:first-child:nth-last-child(3) { flex: 55 }
+       .common-editor-toggle-item:first-child:nth-last-child(3),
+       .common-editor-toggle-item-dropdown:first-child:nth-last-child(3) ~ .common-editor-toggle-item { flex: 45 }
+
+        /* toggle size, two items, has dropdown */
+        .common-editor-toggle-item:first-child:nth-last-child(3) ~ .common-editor-toggle-handle { width: 45% }
+        .common-editor-toggle-item:first-child:nth-last-child(3) ~ .common-editor-toggle-item-dropdown.selected ~ .common-editor-toggle-handle,
+        .common-editor-toggle-item.common-editor-toggle-item-dropdown.selected:first-child:nth-last-child(3) ~ .common-editor-toggle-handle { width: 55% }
+
+        /* toggle positioning, two items, first item has dropdown */
+        .common-editor-toggle-item.common-editor-toggle-item-dropdown:first-child:nth-last-child(3) + .selected ~ .common-editor-toggle-handle { margin-left: 55% }
+
+        /* toggle positioning, two items, second item has dropdown */
+        .common-editor-toggle-item:first-child:nth-last-child(3) + .common-editor-toggle-item-dropdown.selected ~ .common-editor-toggle-handle { margin-left: 45% }
+
+        /* toggle size, three items, has dropdown */
+        .common-editor-toggle-handle { width: 30% }
+        .common-editor-toggle-item.common-editor-toggle-item-dropdown.selected ~ .common-editor-toggle-handle { width: 40%; }
+
+        /* toggle positioning, three items, has dropdown */
+        .common-editor-toggle-item:nth-of-type(2).selected ~ .common-editor-toggle-handle { margin-left: 30%; }
+        .common-editor-toggle-item:nth-of-type(3).selected ~ .common-editor-toggle-handle { margin-left: 60%; }
+
+        /* toggle positioning, three items, first item in toggle has dropdown */
+        .common-editor-toggle-item.common-editor-toggle-item-dropdown + .common-editor-toggle-item.selected ~ .common-editor-toggle-handle { margin-left: 40%; }
+        .common-editor-toggle-item.common-editor-toggle-item-dropdown + .common-editor-toggle-item + .common-editor-toggle-item.selected ~ .common-editor-toggle-handle { margin-left: 70%; }
+
+        /* toggle positioning, three items, second item in toggle has dropdown */
+        .common-editor-toggle-item + .common-editor-toggle-item.common-editor-toggle-item-dropdown + .common-editor-toggle-item.selected ~ .common-editor-toggle-handle { margin-left: 70%; }
+    }
+}
+
+
+/*****************************************************
+ *                    Tablet View                    *
+ ****************************************************/
+
+@media @tabletAndBelow {
+    .common-editor-toggle.tablet-compact {
+        & > .common-editor-toggle-item > .common-button {
+            padding-left: 0.5rem;
+            padding-right: 0.5rem;
+            .common-button-label {
+                display: none;
+            }
+        }
+
+        &.has-dropdown {
+            .common-editor-toggle-item {
+                flex: 25;
+            }
+            .common-editor-toggle-item.common-editor-toggle-item-dropdown {
+                flex: 50;
+                display: grid;
+                grid-template-columns: 1fr 1fr;
+            }
+            .common-editor-toggle-handle { width: 25%; }
+            .common-editor-toggle-item-dropdown.selected ~ .common-editor-toggle-handle { width: 50%; }
+
+            /* flex balance, two items, has dropdown (33% to non-dropdown, 67% to dropdown) */
+            .common-editor-toggle-item:first-child:nth-last-child(3) ~ .common-editor-toggle-item-dropdown,
+            .common-editor-toggle-item.common-editor-toggle-item-dropdown:first-child:nth-last-child(3) { flex: 67 }
+            .common-editor-toggle-item:first-child:nth-last-child(3),
+            .common-editor-toggle-item-dropdown:first-child:nth-last-child(3) ~ .common-editor-toggle-item { flex: 33 }
+
+            /* toggle size, two items, has dropdown */
+            .common-editor-toggle-item:first-child:nth-last-child(3) ~ .common-editor-toggle-handle { width: 33% }
+            .common-editor-toggle-item:first-child:nth-last-child(3) ~ .common-editor-toggle-item-dropdown.selected ~ .common-editor-toggle-handle,
+            .common-editor-toggle-item.common-editor-toggle-item-dropdown.selected:first-child:nth-last-child(3) ~ .common-editor-toggle-handle { width: 67% }
+
+            /* toggle positioning, two items, first item has dropdown */
+            .common-editor-toggle-item.common-editor-toggle-item-dropdown:first-child:nth-last-child(3) + .selected ~ .common-editor-toggle-handle { margin-left: 67% }
+
+            /* toggle positioning, two items, second item has dropdown */
+            .common-editor-toggle-item:first-child:nth-last-child(3) + .common-editor-toggle-item-dropdown.selected ~ .common-editor-toggle-handle { margin-left: 33% }
+
+            /* toggle positioning, first item in toggle has dropdown */
+            .common-editor-toggle-item.common-editor-toggle-item-dropdown + .common-editor-toggle-item.selected ~ .common-editor-toggle-handle { margin-left: 50%; }
+            .common-editor-toggle-item.common-editor-toggle-item-dropdown + .common-editor-toggle-item + .common-editor-toggle-item.selected ~ .common-editor-toggle-handle { margin-left: 75%; }
+
+            /* toggle positioning, second item in toggle has dropdown */
+            .common-editor-toggle-item + .common-editor-toggle-item.common-editor-toggle-item-dropdown.selected ~ .common-editor-toggle-handle { margin-left: 25%; }
+            .common-editor-toggle-item + .common-editor-toggle-item.common-editor-toggle-item-dropdown + .common-editor-toggle-item.selected ~ .common-editor-toggle-handle { margin-left: 75%; }
+        }
+    }
+}
+
+// Same as tablet
+@media @mobileAndBelow {
+    .common-editor-toggle.mobile-compact {
+        & > .common-editor-toggle-item > .common-button {
+            padding-left: 0.5rem;
+            padding-right: 0.5rem;
+            .common-button-label {
+                display: none;
+            }
+        }
+
+        &.has-dropdown {
+            .common-editor-toggle-item {
+                flex: 25;
+            }
+            .common-editor-toggle-item.common-editor-toggle-item-dropdown {
+                flex: 50;
+                display: grid;
+                grid-template-columns: 1fr 1fr;
+            }
+            .common-editor-toggle-handle { width: 25%; }
+            .common-editor-toggle-item-dropdown.selected ~ .common-editor-toggle-handle { width: 50%; }
+
+            /* flex balance, two items, has dropdown (33% to non-dropdown, 67% to dropdown) */
+            .common-editor-toggle-item:first-child:nth-last-child(3) ~ .common-editor-toggle-item-dropdown,
+            .common-editor-toggle-item.common-editor-toggle-item-dropdown:first-child:nth-last-child(3) { flex: 67 }
+            .common-editor-toggle-item:first-child:nth-last-child(3),
+            .common-editor-toggle-item-dropdown:first-child:nth-last-child(3) ~ .common-editor-toggle-item { flex: 33 }
+
+            /* toggle size, two items, has dropdown */
+            .common-editor-toggle-item:first-child:nth-last-child(3) ~ .common-editor-toggle-handle { width: 33% }
+            .common-editor-toggle-item:first-child:nth-last-child(3) ~ .common-editor-toggle-item-dropdown.selected ~ .common-editor-toggle-handle,
+            .common-editor-toggle-item.common-editor-toggle-item-dropdown.selected:first-child:nth-last-child(3) ~ .common-editor-toggle-handle { width: 67% }
+
+            /* toggle positioning, two items, first item has dropdown */
+            .common-editor-toggle-item.common-editor-toggle-item-dropdown:first-child:nth-last-child(3) + .selected ~ .common-editor-toggle-handle { margin-left: 67% }
+
+            /* toggle positioning, two items, second item has dropdown */
+            .common-editor-toggle-item:first-child:nth-last-child(3) + .common-editor-toggle-item-dropdown.selected ~ .common-editor-toggle-handle { margin-left: 33% }
+
+            /* toggle positioning, first item in toggle has dropdown */
+            .common-editor-toggle-item.common-editor-toggle-item-dropdown + .common-editor-toggle-item.selected ~ .common-editor-toggle-handle { margin-left: 50%; }
+            .common-editor-toggle-item.common-editor-toggle-item-dropdown + .common-editor-toggle-item + .common-editor-toggle-item.selected ~ .common-editor-toggle-handle { margin-left: 75%; }
+
+            /* toggle positioning, second item in toggle has dropdown */
+            .common-editor-toggle-item + .common-editor-toggle-item.common-editor-toggle-item-dropdown.selected ~ .common-editor-toggle-handle { margin-left: 25%; }
+            .common-editor-toggle-item + .common-editor-toggle-item.common-editor-toggle-item-dropdown + .common-editor-toggle-item.selected ~ .common-editor-toggle-handle { margin-left: 75%; }
+        }
+    }
+}

package/react-common/styles/react-common-authcode-core.less

@@ -0,0 +1,10 @@
+/**
+ * This file is the same as react-common-skillmap.less except it doesn't import any
+ * variables from the target. This is used for pxt-core's css build
+ */
+
+// Import variables from pxt-core
+@import "themes/default/globals/site.variables";
+@import "themes/pxt/globals/site.variables";
+
+@import "react-common.less";

package/react-common/styles/react-common-authcode.less

@@ -0,0 +1,12 @@
+/**
+ * Used for building react-common-skillmap.css
+ */
+
+// Import variables from pxt-core
+@import "themes/default/globals/site.variables";
+@import "themes/pxt/globals/site.variables";
+
+// Import the variables from the target
+@import "site/globals/site.variables";
+
+@import "react-common.less";

package/react-common/styles/react-common-variables.less

@@ -74,6 +74,13 @@
 @inputButtonColor: rgb(0, 120, 212);
 @inputButtonColorHover: rgb(16, 110, 190);
 
+/****************************************************
+ *              EditorToggle                        *
+ ****************************************************/
+@editorToggleBackgroundColor: rgba(52,73,94,.4);
+@editorToggleBorderColor: rgba(52,73,94,.2);
+@editorToggleBorderWidth: 3px;
+
 /****************************************************
  *                 High Contrast                    *
  ****************************************************/

package/react-common/styles/react-common.less

@@ -1,6 +1,7 @@
 @import "profile/profile.less";
 @import "controls/Button.less";
 @import "controls/Checkbox.less";
+@import "controls/EditorToggle.less";
 @import "controls/Icon.less";
 @import "controls/Input.less";
 @import "controls/MenuDropdown.less";

package/theme/image-editor/imageEditor.less

@@ -103,6 +103,13 @@
     flex: 1;
 }
 
+.image-editor-header-center {
+    flex: 1.5;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
 .image-editor-header-right {
     display: flex;
     justify-content: flex-end;
@@ -146,10 +153,6 @@
         flex: 3!important;
     }
 
-    .image-editor-header-left {
-        display: none;
-    }
-
     .gallery-editor-toggle {
         margin-left: .25rem!important;
         flex-shrink: 1;
@@ -186,118 +189,6 @@
 
 }
 
-.gallery-editor-toggle {
-    display: flex;
-    flex-direction: row;
-    position: relative;
-
-    height: 2.25rem;
-    line-height: 2.25rem;
-
-    background-color: #4572cf;
-    border: 2px solid #4067b3;
-    border-radius: 5px;
-    width: 24rem;
-    margin-top: 0.25rem;
-
-    margin-left: auto;
-    margin-right: auto;
-    cursor: pointer;
-}
-
-.gallery-editor-toggle.right {
-    .gallery-editor-toggle-handle {
-        /* Subtract small margin for rightmost element */
-        transform: translateX(calc(16rem - 0.2rem));
-    }
-    .gallery-editor-toggle-right {
-        color: #4B7BEC;
-    }
-}
-
-.gallery-editor-toggle.center {
-    .gallery-editor-toggle-handle {
-        transform: translateX(8rem);
-    }
-    .gallery-editor-toggle-center {
-        color: #4B7BEC;
-    }
-}
-
-.gallery-editor-toggle.left {
-    .gallery-editor-toggle-left {
-        color: #4B7BEC;
-    }
-}
-
-.gallery-editor-toggle.no-gallery {
-    width: 16rem;
-
-    .gallery-editor-toggle-handle {
-        width: 50%;
-    }
-    .gallery-editor-toggle-label {
-        flex-basis: 50%;
-    }
-}
-
-.gallery-editor-toggle.no-gallery.right {
-    .gallery-editor-toggle-handle {
-        transform: translateX(8rem);
-    }
-}
-
-// Microsoft Edge has a bug related to relative z-indices that prevents the handle
-// from appearing below the text, so instead we make the handle transparent and have the text
-// show through
-.gallery-editor-toggle.edge {
-    .gallery-editor-toggle-label, .gallery-editor-toggle-label-right, .gallery-editor-toggle-label-left, .gallery-editor-toggle-label-center {
-        color: #ffffff;
-        z-index: auto;
-    }
-    .gallery-editor-toggle-handle {
-        opacity: 0.3;
-    }
-}
-
-.gallery-editor-toggle-label {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-basis: 33%;
-    text-align: center;
-    color: #ffffff;
-    z-index: 1;
-    transition: color 0.3s;
-    user-select: none;
-
-    & > i.icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-    }
-
-    span {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        flex-shrink: 1;
-        white-space: nowrap;
-    }
-}
-
-.gallery-editor-toggle-handle {
-    width: 33%;
-    height: 2rem;
-    background-color: white;
-    border-radius: 5px;
-    position: absolute;
-    left: 0;
-
-    transform: translateX(0);
-    transition: transform 0.3s;
-}
-
 .gallery-editor-show-tiles {
     position: absolute;
     height: 2.3rem;

package/webapp/public/authcode.html

@@ -0,0 +1 @@
+<!doctype html><html lang="@locale@"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>MakeCode Device Auth</title><link rel="stylesheet" data-rtl="/blb/rtlsemantic.css" href="/blb/semantic.css"><link rel="stylesheet" href="/blb/icons.css"><link rel="stylesheet" href="/blb/react-common-authcode.css"><script defer="defer" src="/blb/authcode/js/main.03da4c20.js"></script><link href="/blb/authcode/css/main.1cf9dc37.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><script type="text/javascript" src="/blb/target.js"></script><script type="text/javascript" src="/blb/pxtlib.js"></script><div id="root"></div><script>var pxtConfig=null</script></body></html>