dev mode rewrite

package.json

@@ -44,6 +44,7 @@
     "rehype-slug-custom-id": "^2.0.0",
     "rehype-stringify": "^10.0.0",
     "remark": "^15.0.1",
+    "remark-gemoji": "^8.0.0",
     "remark-gfm": "^4.0.0",
     "remark-github-blockquote-alert": "^1.2.1",
     "remark-rehype": "^11.1.0",

src/partials/footer.html

@@ -14,7 +14,7 @@ <h5>Guides</h5>
     <div class="col-6 col-md">
       <h5>Resources</h5>
       <ul class="list-unstyled text-small">
-        <li><a class="link-secondary text-decoration-none" href="/develop">Development</a></li>
+        <li><a class="link-secondary text-decoration-none" href="/develop">Develop</a></li>
       </ul>
     </div>
     <div class="col-6 col-md">

src/partials/page-toc.hbs

@@ -1,4 +1,4 @@
-<button class="btn toc-toggle" type="button" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+<button class="btn toc-toggle px-2" type="button" role="button" data-bs-toggle="dropdown" aria-expanded="false">
   <i class="bi bi-list-ul h2"></i>
 </button>
 <aside id="page-toc" class="toc ps-md-3 dropdown-menu mx-2 mx-md-0">

src/partials/page.hbs

@@ -12,8 +12,8 @@
 {{> navbar }}
 <main class="bg-dark-subtle page">
   <div class="page-content container py-4">
-    <article data-bs-spy="scroll" data-bs-target="#page-toc" data-bs-smooth-scroll="true"
-             data-bs-root-margin="-20% 0px 80%">
+    <article data-bs-spy="scroll" data-bs-target="#page-toc" data-bs-smooth-scroll="false"
+             data-bs-root-margin="-65px 0px -90%" data-bs-threshold="[0]">
       {{> @partial-block }}
     </article>
     {{#toc}}

src/scss/components/callout.scss

@@ -17,6 +17,7 @@
   @extend .border-end-0;
 
   .callout-title {
+    @extend .mt-2;
     @extend .mb-1;
 
     svg.octicon {
@@ -52,18 +53,22 @@
   }
 
   &.callout-important {
-    border-color: $purple-400 !important;
+    --bs-primary-rgb: #{to-rgb($purple-400)};
+
+    @extend .border-primary;
 
     .callout-title {
-      color: $purple-400 !important;
+      @extend .text-primary;
 
       svg.octicon {
-        fill: $purple-400;
+        fill: rgba(var(--bs-primary-rgb), var(--bs-text-opacity));
       }
     }
   }
 
   &.callout-note {
+    --bs-info-rgb: #{to-rgb($blue-600)};
+
     @extend .border-info;
 
     .callout-title {
@@ -88,8 +93,3 @@
   }
 
 }
-
-.callout-title {
-  @extend .mt-2;
-  @extend .fw-bold;
-}

src/scss/page.scss

@@ -18,7 +18,7 @@ main.page {
 
       &:not(:only-child) {
         h1 {
-          margin-inline-start: 1em;
+          margin-inline-start: 1.25em;
         }
       }
     }
@@ -42,7 +42,7 @@ main.page {
 
     .toc-toggle {
       position: absolute;
-      margin-inline-start: -1em;
+      margin-inline-start: -0.5em;
       margin-block-start: -0.25em;
     }
 

src/views/develop.hbs

@@ -1,5 +1,5 @@
-{{#> page title="Development"}}
-  <h1>Development</h1>
+{{#> page title="Develop"}}
+  <h1>Develop</h1>
   <p>
     Under construction.
   </p>

src/views/devmode/index.md

@@ -14,21 +14,39 @@ Use officially supported development mode to install homebrew apps and games.
 
 ### Get a Developer Account
 
-You'll need a developer account to use Developer Mode.
-Please read <a href="https://webostv.developer.lge.com/develop/getting-started/preparing-lg-account">
-Preparing LG Account</a> for creating one.
+1. Visit [webOS TV Developer](https://webostv.developer.lge.com/), select "Sign In"
+   ![webOS TV Developer Home](webos.tv.developer_home.png?width=600)
+2. You will be redirected to LG Account login page. If you don't have an account, select "CREATE ACCOUNT"
+   ![LG Account Login](lgaccount.sign_in.png?as=webp)
+3. You'll see a pop-up window. Select country and click "CONFIRM"
+   ![LG Account Select Country](lgaccount.select_country.png?width=600)
+4. Accept terms & conditions and click "AGREE"
+   ![LG Account Terms & Conditions](lgaccount.terms.png?as=webp)
+5. Input your email address and password, check required checkboxes, and click "CONFIRM"
+   ![LG Account Create Account](lgaccount.create_account.png?as=webp)
+6. You'll receive an email to verify your email address. Click the link in the email to verify your email
+   address. ![LG Account Verify Email](lgaccount.verified.png?as=webp)
+7. Go back to the LG Account login page and login with your email and password
+   ![LG Account Login](lgaccount.sign_in_2.png?as=webp)
+
+Now you'll be able to use this account to log in to Developer Mode app on your TV.
 
 ### Install Developer Mode App
 
-1. Open LG Content Store
-2. Search for "Developer Mode"
-3. Select "Install"
+1. Open LG Content Store, search for "Developer Mode"
+   ![LG Content Store](contentstore.search_box.png?as=webp)
+2. Select "Developer Mode" app
+   ![Developer Mode App](contentstore.search_result.png?as=webp)
+3. Click "Install" to download and install the app
+   ![Developer Mode App Install](contentstore.devmode.png?as=webp)
 
 ### Enable Developer Mode
 
 1. Launch Developer Mode app
 2. Login to Developer Mode app with developer account
+   ![Developer Mode Login](Login_of_Dev_Mode_App_l87hq9.webp)
 3. Enable Developer Mode and wait for TV to restart
+   ![Developer Mode Enable](Dev_Mode_Status_On_qqzjd4.webp)
 
 ### Prepare for Device Setup
 

webpack.config.mjs

@@ -70,6 +70,14 @@ export default function (env, argv) {
       }),
       new FaviconsBundlerPlugin({
         enabled: true,
+        faviconOptions: {
+          path: '/img/favicons',
+          display: 'browser',
+          theme_color: '#212529',
+          icons: {
+            appleStartup: false,
+          }
+        }
       }),
       ...(argv.mode === 'production' ? [new PurgeCSSPlugin({
         paths: () => fs.readdirSync(path.resolve('src'), {recursive: true})
@@ -140,7 +148,6 @@ export default function (env, argv) {
               options: {
                 minimizer: [
                   {
-                    // resize works only with `sharpMinify`
                     implementation: ImageMinimizerPlugin.imageminMinify,
                     options: {
                       plugins: [

webpack/extract-meta.js

@@ -18,22 +18,17 @@ function extractToc(tree, title) {
   const toc = {title, id: '', depth: 1, children: []};
   const children = toc.children;
   let current;
-  visit(tree, /**@param node {Element}*/(node) => node.tagName === 'section',
+  visit(tree, /**@param node {Element}*/(node) => node.tagName?.match(/h[2-4]/),
     /**
-     * @param section {Element}
+     * @param heading {Element}
      * @param index {number}
      * @param parent {Element}
      */
-    (section, index, parent) => {
-      /** @type {Element} */
-      const firstChild = section.children[0];
-      if (!firstChild?.tagName) {
-        return;
-      }
+    (heading, index, parent) => {
       const item = {
-        title: toString(firstChild),
-        id: section.properties.id,
-        level: firstChild.tagName.match(/h([1-6])/)[1] - 0
+        title: toString(heading),
+        id: heading.properties.id || parent.properties.id,
+        level: heading.tagName.match(/h([1-6])/)[1] - 0
       };
       if (item.level > current?.level) {
         current.children = current.children || [];

webpack/markdown-loader.js

@@ -2,10 +2,13 @@ import {remark} from 'remark';
 import remarkGfm from 'remark-gfm';
 import {remarkAlert} from 'remark-github-blockquote-alert';
 import remarkSectionize from 'remark-sectionize';
+import remarkGemoji from 'remark-gemoji';
 import remarkRehype from 'remark-rehype';
+
 import rehypeRaw from 'rehype-raw';
 import rehypeSlug from 'rehype-slug';
 import rehypeStringify from 'rehype-stringify';
+
 import {visit} from 'unist-util-visit';
 import {capitalize} from 'lodash-es';
 import extractMeta from "./extract-meta.js";
@@ -94,6 +97,7 @@ const parser = remark()
   .use(remarkGfm)
   .use([remarkAlert, alertRestyle])
   .use(remarkSectionize)
+  .use(remarkGemoji)
   .use(remarkRehype, {allowDangerousHtml: true})
   .use(rehypeRaw)
   .use(rehypeSlug)
@@ -103,7 +107,7 @@ const parser = remark()
   .use(headingHr)
   .use(blockQuoteStyle)
   .use(extractMeta)
-  .use(rehypeStringify);
+  .use(rehypeStringify, {allowDangerousCharacters: true, allowDangerousHtml: true});
 
 /**
  * @this {import('webpack').LoaderContext}