Merge pull request #60 from Foblex/examples-docs

update to f-docs 1.38

angular.json

@@ -30,6 +30,7 @@
               }
             ],
             "styles": [
+//              "projects/f-docs/src/assets/styles/styles.scss",
               "src/styles/styles.scss"
             ],
             "scripts": [],

package.json

@@ -68,7 +68,7 @@
     "@cypress/angular": "^2.1.0",
     "@foblex/2d": "1.1.0",
     "@foblex/drag-toolkit": "1.1.0",
-    "@foblex/f-docs": "1.3.7",
+    "@foblex/f-docs": "1.3.8",
     "@foblex/mediator": "1.1.0",
     "@foblex/platform": "1.0.4",
     "@foblex/utils": "1.1.0",

public/docs/en/examples/resize-handle.md

@@ -2,7 +2,7 @@
 
 ## Description
 
-Learn how to enhance the interactivity of your flow diagrams by adding a [ResizeHandle](./docs/f-resize-handle-directive) to nodes. This example demonstrates the process of making nodes dynamically resizable, allowing users to easily modify the dimensions of nodes within an Angular application powered by Foblex Flow.
+Learn how to enhance the interactivity of your flow diagrams by adding a ResizeHandle to nodes. This example demonstrates the process of making nodes dynamically resizable, allowing users to easily modify the dimensions of nodes within an Angular application powered by Foblex Flow.
 
 ## Example
 

src/app/app.routes.ts

@@ -22,6 +22,10 @@ export const routes: Routes = [
     ],
     loadChildren: () => import('@foblex/f-docs').then(m => m.F_DOCUMENTATION_ROUTES)
   },
+  // {
+  //   path: '**',
+  //   loadComponent: () => import('./not-found-page/not-found-page.component').then(m => m.NotFoundPageComponent),
+  // }
   {
     path: '**',
     redirectTo: '/docs/get-started',

src/app/not-found-page/not-found-page.component.html

@@ -0,0 +1,8 @@
+<div class="content">
+  <div class="flex-space"></div>
+  <div>
+    <div class="item">Created with Foblex MarkEngine</div>
+    <div class="item">MIT License | Copyright © 2022 - Present</div>
+  </div>
+</div>
+

src/app/not-found-page/not-found-page.component.scss

@@ -0,0 +1,32 @@
+:host {
+  position: relative;
+  z-index: 5;
+  padding: 0 24px;
+
+  .content {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: wrap;
+    width: 100%;
+    height: 64px;
+    max-width: calc(1440px - 64px);
+    margin: 0 auto;
+  }
+
+  .item {
+    line-height: 20px;
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--secondary-text);
+    text-align: right;
+  }
+
+  @media (min-width: 640px) {
+    padding: 0 48px;
+  }
+
+  @media (min-width: 960px) {
+    padding: 0 64px;
+  }
+}

src/app/not-found-page/not-found-page.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'not-found-page',
+  templateUrl: './not-found-page.component.html',
+  styleUrl: './not-found-page.component.scss',
+  standalone: true,
+})
+export class NotFoundPageComponent {
+
+}

src/index.html

@@ -49,6 +49,30 @@
   <meta name="apple-mobile-web-app-status-bar-style" content="default" />
   <meta name="theme-color" content="#FFFFFF">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
+
+  <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "WebSite",
+      "name": "Foblex Flow",
+      "url": "https://flow.foblex.com/",
+      "description": "An Angular library designed to simplify the creation and manipulation of dynamic flow. Provides components for flows, nodes, and connections, automating node manipulation and inter-node connections.",
+      "creator": {
+        "@type": "Organization",
+        "name": "Foblex",
+        "url": "https://flow.foblex.com/",
+        "logo": "https://flow.foblex.com/favicons/android-chrome-512x512.png",
+        "sameAs": [
+          "https://github.com/Foblex/f-flow",
+          "https://twitter.com/foblexflow"
+        ]
+      },
+      "mainEntityOfPage": {
+        "@type": "WebPage",
+        "@id": "https://flow.foblex.com/"
+      }
+    }
+  </script>
 </head>
 <body>
   <app-root></app-root>