tinijs · lamnhan · May 1, 2024 · Apr 29, 2024 · Apr 29, 2024 · Apr 30, 2024
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -7,6 +7,7 @@
   },
   "ignorePatterns": [
     "**/dist",
-    "**/build"
+    "**/build",
+    "**/server/public"
   ]
 }
diff --git a/apps/tinijs.dev/app/components/doc-page/index.ts b/apps/tinijs.dev/app/components/doc-page/index.ts
@@ -279,6 +279,10 @@ export class AppDocPageComponent
       min-height: calc(var(--page-height) - var(--toolbar-height));
     }
 
+    .content {
+      width: 100vw;
+    }
+
     @media (min-width: 992px) {
       .container {
         display: grid;
@@ -293,6 +297,7 @@ export class AppDocPageComponent
 
       .content {
         grid-area: content;
+        width: calc(100vw - 250px);
       }
     }
 
@@ -306,6 +311,10 @@ export class AppDocPageComponent
       app-doc-page-toc {
         grid-area: toc;
       }
+
+      .content {
+        width: calc(100vw - 500px);
+      }
     }
   `;
 }
diff --git a/apps/tinijs.dev/app/components/doc-page/menu.ts b/apps/tinijs.dev/app/components/doc-page/menu.ts
@@ -99,11 +99,11 @@ export class AppDocPageMenuComponent extends TiniComponent {
         transform 0.2s ease,
         opacity 0.2s ease;
       z-index: 800;
-    }
 
-    .menu.mobile-opened {
-      opacity: 1;
-      transform: translateX(0);
+      &.mobile-opened {
+        opacity: 1;
+        transform: translateX(0);
+      }
     }
 
     .title {
@@ -115,13 +115,15 @@ export class AppDocPageMenuComponent extends TiniComponent {
       gap: var(--size-space);
       font-weight: bold;
       font-size: 1.2rem;
-    }
-    .title icon-home {
-      transform: translateY(-2px);
-    }
-    .title:hover {
-      text-decoration: none;
-      color: var(--color-tertiary);
+
+      icon-home {
+        transform: translateY(-2px);
+      }
+
+      &:hover {
+        text-decoration: none;
+        color: var(--color-tertiary);
+      }
     }
 
     ul {
@@ -133,34 +135,38 @@ export class AppDocPageMenuComponent extends TiniComponent {
       display: flex;
       flex-flow: column;
       gap: var(--size-space-0_25x);
-    }
 
-    ul li strong {
-      display: block;
-      margin-top: var(--size-space-1_5x);
-      padding-top: var(--size-space);
-      padding-bottom: var(--size-space-0_25x);
-      font-size: 1.1rem;
-      border-top: 1px solid var(--color-background-shade);
-    }
-
-    ul li:first-child strong {
-      margin-top: 0;
-      border-top: none;
-      padding-top: 0;
-    }
-
-    ul li tini-link::part(root) {
-      color: var(--color-medium);
-      text-decoration: none;
-    }
-    ul li tini-link:hover::part(root) {
-      color: var(--color-text);
-    }
-    ul li tini-link::part(active) {
-      color: var(--color-text);
-      cursor: default;
-      pointer-events: none;
+      li {
+        strong {
+          display: block;
+          margin-top: var(--size-space-1_5x);
+          padding-top: var(--size-space);
+          padding-bottom: var(--size-space-0_25x);
+          font-size: 1.1rem;
+          border-top: 1px solid var(--color-background-shade);
+        }
+
+        &:first-child strong {
+          margin-top: 0;
+          border-top: none;
+          padding-top: 0;
+        }
+
+        tini-link::part(root) {
+          color: var(--color-medium);
+          text-decoration: none;
+        }
+
+        tini-link:hover::part(root) {
+          color: var(--color-text);
+        }
+
+        tini-link::part(active) {
+          color: var(--color-text);
+          cursor: default;
+          pointer-events: none;
+        }
+      }
     }
 
     @media (min-width: 992px) {
@@ -171,6 +177,7 @@ export class AppDocPageMenuComponent extends TiniComponent {
         left: 0;
         background: var(--color-background);
         border-right: none;
+        padding-bottom: var(--footer-height);
       }
 
       .title {

diff --git a/apps/tinijs.dev/app/components/doc-page/toc.ts b/apps/tinijs.dev/app/components/doc-page/toc.ts
@@ -80,13 +80,13 @@ export class AppDocPageTOCComponent extends TiniComponent {
       width: calc(100% - var(--size-space-2x));
       max-width: var(--wide-ss);
       z-index: 800;
-    }
 
-    .toc.mobile-opened {
-      border: 1px solid var(--color-background-shade);
-      height: auto;
-      opacity: 1;
-      transform: translateY(0);
+      &.mobile-opened {
+        border: 1px solid var(--color-background-shade);
+        height: auto;
+        opacity: 1;
+        transform: translateY(0);
+      }
     }
 
     .return-top {
@@ -110,26 +110,29 @@ export class AppDocPageTOCComponent extends TiniComponent {
       margin: 0;
       border-top: 1px solid var(--color-background-shade);
       padding: var(--size-space-0_5x) 0;
-    }

-    ul li.level-3 {
-      padding-left: var(--size-space);
-    }
-    ul li.level-4 {
-      padding-left: var(--size-space-2x);
-    }
-    ul li.level-5 {
-      padding-left: var(--size-space-3x);
-    }
-
-    ul li a {
-      display: block;
-      padding: var(--size-space-0_25x) var(--size-space);
-      color: var(--color-medium);
-    }
-    ul li a:hover {
-      text-decoration: none;
-      color: var(--color-text);
+      li {
+        &.level-3 {
+          padding-left: var(--size-space);
+        }
+        &.level-4 {
+          padding-left: var(--size-space-2x);
+        }
+        &.level-5 {
+          padding-left: var(--size-space-3x);
+        }
+
+        a {
+          display: block;
+          padding: var(--size-space-0_25x) var(--size-space);
+          color: var(--color-medium);
+
+          &:hover {
+            text-decoration: none;
+            color: var(--color-text);
+          }
+        }
+      }
     }
 
     @media (min-width: 1200px) {
@@ -149,6 +152,7 @@ export class AppDocPageTOCComponent extends TiniComponent {
         right: 0;
         top: var(--header-height);
         transform: translateX(1px);
+        padding-bottom: var(--footer-height);
       }
 
       .return-top {

diff --git a/apps/tinijs.dev/app/components/header.ts b/apps/tinijs.dev/app/components/header.ts
@@ -131,12 +131,6 @@ export class HeaderComponent
                 @click=${this._closeMobileMenu}
                 >Toolbox</tini-link
               >
-              <tini-link
-                active="active"
-                href="/server"
-                @click=${this._closeMobileMenu}
-                >Server</tini-link
-              >
               <tini-link
                 active="active"
                 href="/cli"

diff --git a/apps/tinijs.dev/app/pages/home.ts b/apps/tinijs.dev/app/pages/home.ts
@@ -107,7 +107,7 @@ export class AppPageHome extends TiniComponent {
             </p>
           </li>
 
-          <li @click=${() => this.router.go('/server')}>
+          <li @click=${() => this.router.go('/module/server')}>
             <div class="icon">🎛️</div>
             <h3>Server</h3>
             <p>

diff --git a/apps/tinijs.dev/app/pages/server.ts b/apps/tinijs.dev/app/pages/server.ts
diff --git a/apps/tinijs.dev/app/public/images/featured.jpg b/apps/tinijs.dev/app/public/images/featured.jpg
diff --git a/apps/tinijs.dev/app/routes.ts b/apps/tinijs.dev/app/routes.ts
@@ -30,11 +30,6 @@ export const routes: Route[] = [
         component: 'app-page-toolbox',
         action: () => import('./pages/toolbox.js'),
       },
-      {
-        path: 'server/:slug?',
-        component: 'app-page-server',
-        action: () => import('./pages/server.js'),
-      },
       {
         path: 'cli/:slug?',
         component: 'app-page-cli',

diff --git a/apps/tinijs.dev/app/services/content.ts b/apps/tinijs.dev/app/services/content.ts
@@ -51,14 +51,6 @@ export const toolboxPostService = new ContentService<DocPost, DocPostDetail>(
   'toolbox-posts'
 );
 
-export const serverCategoryService = new ContentService<
-  DocCategory,
-  DocCategoryDetail
->('server-categories');
-export const serverPostService = new ContentService<DocPost, DocPostDetail>(
-  'server-posts'
-);
-
 export const cliCategoryService = new ContentService<
   DocCategory,
   DocCategoryDetail

diff --git a/apps/tinijs.dev/content/cli-posts/102 - expansion/index.md b/apps/tinijs.dev/content/cli-posts/102 - expansion/index.md
@@ -50,6 +50,7 @@ You can either start a new expansion or add to an existing project.
 
 Examples:
   - Tini Content CLI: <https://github.com/tinijs/tinijs/blob/main/packages/content/cli/expand.ts>
+  - Tini Server CLI: <https://github.com/tinijs/tinijs/blob/main/packages/server/cli/expand.ts>
   - Tini UI CLI: <https://github.com/tinijs/tinijs/blob/main/packages/ui/cli/expand.ts>
 
 #### Start a new expansion
@@ -71,11 +72,14 @@ Use can also create an expansion in a exisiting package in 3 steps:
 ```ts
 import {defineTiniCLIExpansion, resolveCommand} from '@tinijs/cli';
 
-export default defineTiniCLIExpansion({
+export type MyCLIExpansionOptions = {};
+
+export default defineTiniCLIExpansion<MyCLIExpansionOptions>({
   meta: {
     name: 'some-name',
+    url: 'url-to-usage', // optional usage url
   },
-  setup() {
+  setup(options, tini) {
     return {
       xxx: () => import('./commands/xxx.js').then(resolveCommand),
     };

diff --git a/apps/tinijs.dev/content/cli-posts/204 - generate/index.md b/apps/tinijs.dev/content/cli-posts/204 - generate/index.md
@@ -16,6 +16,7 @@ Support these types:
 
 - `const` - Shared constants.
 - `store` - Stores for global states management.
+- `context` - Consumable contexts.
 - `class` - Constructors which are intended to be used to construct objects.
 - `service` - Groups of similar utilities, you can either import or inject them.
 - `layout` - Layouts for pages.
@@ -30,6 +31,6 @@ Support these types:
 
 | Option | Description |
 | --- | --- |
-| `--dir <value>` or `-d` | Custom srcDir, default to `app`. |
+| `--dir <value>` or `-d` | Custom client app srcDir, default to `app`. |
 | `--typePrefixed` or `-t` | Use format `name.type.ext`. |
-| `--nested` or `-n` | Nested under a folder. |
+| `--nested` or `-n` | Nested under the folder with the same name. |
diff --git a/apps/tinijs.dev/content/cli-posts/205 - dev/index.md b/apps/tinijs.dev/content/cli-posts/205 - dev/index.md
@@ -12,4 +12,12 @@ Start a development server for the current project.
 npx tini dev
 ```
 
+## Options
+
+| Option | Description |
+| --- | --- |
+| `--debug` or `-d` | When using a compiler, log output from all commands. |
+
+## Configuration
+
 **TODO**: Add instructions for configuation.