added years to toh

src/scss/page/_index.scss

@@ -67,20 +67,6 @@ main .page {
       flex-flow: row;
       align-items: start;
     }
-
-    aside.toc {
-      width: 25%;
-      height: 100%;
-
-      min-width: unset;
-
-      position: sticky;
-      top: calc(1.5rem + var(--navbar-height));
-
-      display: block;
-      background-color: unset;
-      border: unset;
-    }
   }
 
 }

src/views/develop/guides/_sidebar.md

@@ -3,7 +3,7 @@
 * :bi-book:Getting Started
     * [Introduction](/develop/guides)
     * [Environment Setup](/develop/guides/env-setup)
-    * Development Workflow
+    * [Development Workflow](/develop/guides/workflow)
 * :bi-code:Development
     * [Web App](/develop/guides/web-app)
     * [Native App](/develop/guides/native-app)
@@ -23,4 +23,6 @@
     * Web App
     * Native App
     * Firmware
-    * System
+    * System
+* :bi-lightbulb:Contribute to Guides
+    * [Document Syntax](/develop/guides/docs-syntax) 

src/views/develop/guides/docs-syntax.md

@@ -1,6 +1,6 @@
 # Document Syntax
 
-How to write documents for this site
+How to write documents for this site.
 
 ## Markdown Syntax
 
@@ -9,6 +9,18 @@ GFM [here](https://guides.github.com/features/mastering-markdown/).
 
 Additionally, we use the following syntax for writing documents:
 
+### Automatic Lead Text
+
+The first paragraph of a document will be used as
+the [lead text](https://getbootstrap.com/docs/5.3/content/typography/#lead).
+
+To avoid this behavior, you can insert an HTML comment (e.g. <code class="text-nowrap">&lt;!-- no-lead --&gt;</code>) or
+a horizontal rule (`---`) before the first paragraph.
+
+### Bootstrap Icons
+
+Use `:bi-icon-name:` to insert a Bootstrap icon. For example, `:bi-book:` will become :bi-book:.
+
 ### Tabbed Code Blocks
 
 Inspired by syntax of [readme.com](https://docs.readme.com/rdmd/docs/code-blocks), you can create code blocks

src/views/develop/guides/env-setup.md

@@ -38,3 +38,8 @@ After extracting the SDK, run `relocate-sdk.sh` to update the SDK path.
 ```bash Linux & macOS & WSL
 /path/to/arm-webos-linux-gnueabi_sdk-buildroot/relocate-sdk.sh
 ```
+
+* Previous
+  * [Introduction](/develop/guides)
+* Next
+  * [Development Workflow](/develop/guides/workflow)

src/views/develop/guides/workflow.md

@@ -0,0 +1,10 @@
+# Development Workflow
+
+Under construction.
+
+
+* Previous
+    * [Environment Setup](/develop/guides/env-setup)
+* Next
+    * [Developing Web App](/develop/guides/web-app)
+    * [Developing Native App](/develop/guides/native-app)

src/views/toh/search/conditions.ts

@@ -8,6 +8,7 @@ export interface SearchCondition {
 
 export interface SearchConditions {
     machine?: SearchCondition;
+    year?: SearchCondition;
     codename?: SearchCondition;
     series?: SearchCondition;
     broadcast?: SearchCondition;
@@ -25,7 +26,7 @@ export function getConditionsIndices(conditions?: SearchConditions): number[] |
 }
 
 export function applyToUrlParams(conditions: SearchConditions | undefined, params: URLSearchParams) {
-    const keys: (keyof SearchConditions)[] = ['machine', 'codename', 'series', 'broadcast', 'region', 'otaId'];
+    const keys: (keyof SearchConditions)[] = ['machine', 'codename', 'series', 'broadcast', 'region', 'otaId', 'year'];
     for (let k of keys) {
         const options = conditions?.[k as keyof SearchConditions]?.options;
         if (options?.length) {

src/views/toh/search/index.ts

@@ -27,6 +27,10 @@ export class SideSearch extends Component<SideSearchProps> {
                               conditions=${props.conditions}
                               changed=${(v: SearchCondition) => this.searchConditionChanged("machine", v)}>
             </SearchSection>
+            <${SearchSection} name="year" title="Year" models=${props.models} entries=${props.indices.year}
+                              conditions=${props.conditions}
+                              changed=${(v: SearchCondition) => this.searchConditionChanged("year", v)}>
+            </SearchSection>
             <${SearchSection} name="codename" title="Codename" models=${props.models} entries=${props.indices.codename}
                               conditions=${props.conditions}
                               changed=${(v: SearchCondition) => this.searchConditionChanged("codename", v)}>

src/views/toh/table.ts

@@ -65,13 +65,13 @@ export class DevicesTable extends Component<DevicesTableProps, DevicesTableState
               `)}
               ${filtered.length === 0 && html`
                 <tr>
-                  <td colspan="6" class="text-center">No devices found</td>
+                  <td colspan="7" class="text-center">No devices found</td>
                 </tr>
               `}
               </tbody>
             </table>
           </div>
-          ${filtered.length && html`
+          ${filtered.length > 0 && html`
             <${Pagination} count=${filtered.length} offset=${offset} limit=${limit}
                            onChange=${this.offsetChange}></Pagination>
           `}

src/views/toh/toh-data.d.ts

@@ -6,6 +6,7 @@ export type DeviceModelIndexEntry = { value: string, indices: number[] };
 
 export type DeviceModelIndices = {
     machine: DeviceModelIndexEntry[],
+    year: DeviceModelIndexEntry[],
     series: DeviceModelIndexEntry[],
     codename: DeviceModelIndexEntry[],
     broadcast: DeviceModelIndexEntry[],

src/views/toh/toh-data.js

@@ -10,4 +10,5 @@ export const indices = {
   region: [/*indices.region*/],
   otaId: [/*indices.otaId*/],
   screenSize: [/*indices.screenSize*/],
+  year: [/*indices.year*/],
 };

src/views/toh/toh.scss

@@ -1,3 +1,33 @@
+@import "../../scss/styles";
+
+
+.toh-app {
+  grid-template-areas: "table search" "table empty" "pagination empty";
+  grid-template-rows: auto auto auto;
+  grid-template-columns: 3fr 1fr;
+
+  > .table-responsive {
+    grid-area: table;
+  }
+
+  > aside {
+    grid-area: search;
+    max-height: min-content;
+
+    @extend .border;
+    @extend .rounded;
+
+    @include media-breakpoint-up(md) {
+      border-radius: 0 !important;
+      border: none !important;
+    }
+  }
+
+  > nav {
+    grid-area: pagination;
+  }
+}
+
 .search-section {
   [data-bs-toggle] {
     //noinspection CssNoGenericFontName

src/views/toh/toh.ts

@@ -43,16 +43,17 @@ class App extends Component<{}, AppState> {
 
     render(_props: {}, state: AppState) {
         return html`
-          <div class="d-flex flex-column-reverse flex-md-row align-items-md-start">
-            <div class="flex-md-fill overflow-x-auto">
-              <${DevicesTable} models=${models} conditions=${state.conditions}></DevicesTable>
-            </div>
-            <aside class="ms-md-3 toc flex-shrink-0" style="top: calc(var(--navbar-height) + 1em)">
-              <div class="vr position-absolute h-100 d-none d-md-block"></div>
+          <div class="toh-app d-md-grid d-block">
+            <button class="form-select text-start d-md-none mb-2" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#toh-search">
+              Filter
+            </button>
+            <aside id="toh-search" class="collapse d-md-block p-2 p-md-0">
               <${SideSearch} models=${models} indices=${indices} conditions=${state.conditions}
                              changed=${this.conditionsChanged}>
               </SideSearch>
             </aside>
+            <${DevicesTable} models=${models} conditions=${state.conditions}></DevicesTable>
           </div>
         `;
     }

webpack/toh-data-loader.js

@@ -69,6 +69,13 @@ export default function (source) {
       otaId: JSON.stringify(toIndex(models, 'otaId')),
       screenSize: JSON.stringify(toIndex(models, 'sizes', (value) => `${value}″`)),
       region: JSON.stringify(toIndex(models, 'regions')),
+      year: JSON.stringify(toIndex(models, 'otaId', (value) => {
+        let year = value.slice(8, 10);
+        if (year === 'T1') {
+          year = '14';
+        }
+        return `20${year}`;
+      })),
     }
   });
 }