What OpenYida Provides
OpenYida is a bridge between AI coding tools and Yida. It gives agents a stable command-line interface for the full application lifecycle:
| Area | What you can do |
|------|-----------------|
| Application delivery | Create, update, export, and import Yida applications |
| Form modeling | Create forms, update fields, inspect schemas, and manage permissions |
| Custom pages | Generate React-based pages, lint Yida runtime rules, compile, and publish |
| Workflow automation | Create process forms, configure approval flows, preview process instances |
| Data operations | Query form/process/task/subform data and run anomaly checks |
| Integrations | Manage HTTP connectors, connector actions, auth accounts, and automation flows |
| Operations | Diagnose environment issues, manage login state, configure sharing, upload CDN assets |
The result remains a native Yida application: teams can continue editing it in Yida, use existing enterprise security controls, and deploy through the Yida platform.
Quick Start
1. Install
npm install -g openyida
OpenYida requires Node.js 18 or later. The package exposes both openyida and yida commands.
For npm global installations, OpenYida checks the npm registry before a normal command at most once every 24 hours. When a newer version is available, it installs that exact version and then reruns the original command. This behavior is identical whether the local command is launched from a terminal, Codex, Claude Code, or Qoder. Managed cloud Agent runtimes are excluded before any cache access, registry request, or npm invocation.
Set OPENYIDA_NO_AUTO_UPDATE=1 to disable automatic updates. OPENYIDA_AUTO_UPDATE_SECS can override the check interval for development and testing. The explicit openyida update command remains available.
If Codex is already installed, OpenYida also imports a local Codex plugin during postinstall. Restart Codex after installation, then type @宜搭 or @openyida in the composer to attach the OpenYida context.
2. Check Your Environment
Run this from the AI coding workspace where you want OpenYida to operate:
openyida agent-capabilities --summary-json
OpenYida returns a compact machine-readable summary with the version, login state, workspace/cache paths, and command manifest digest. openyida agent-capabilities --json is the full diagnostic snapshot, where compact workdir maps to active.projectRoot and workdir_exists maps to active.projectRootExists. openyida commands --json remains available when an agent only needs the command manifest.
3. Log In
openyida login
OpenYida login defaults to OAuth token mode. It opens the DingTalk OAuth authorization page, receives the local loopback callback, exchanges code / authCode with the Yida server, and stores access_token / refresh_token in the user auth store when available. If the user auth store is not writable, OpenYida explicitly falls back to the current project cache and reports that narrower persistence scope.
When the user names a target Yida entry URL, pass it to the login command so OpenYida can select the matching environment and auth profile. For example:
openyida login https://yida-group.alibaba-inc.com/
openyida login --alibaba
For token status checks, use:
openyida login --check-only --json
openyida auth status
To reuse an existing shared login profile for the current project, switch first instead of starting a new OAuth login:
openyida auth profiles
openyida auth profile switch <auth_profile>
If the target profile is not listed, run openyida login to add it, then switch to the new profile.
OpenYida does not install Playwright by default.
4. Build With an AI Agent
Ask your coding agent for a concrete Yida application or workflow:
Create a CRM application in Yida with customer, contact, opportunity, and follow-up forms.
Build an IPD workflow for chip production, including approval nodes and dashboard pages.
Generate a public landing page and publish it to my Yida app.
The agent can then call OpenYida commands to create the application, generate source files, publish pages, and return the final Yida URLs. In Codex, QwenWork, Qoder, Qoder IDE, and QoderWork environments, successful creation and publish commands also include a browser handoff so the agent can open the resulting Yida page in the in-app browser. Use --open to force this handoff or --no-open to suppress it.
Supported AI Coding Tools
| Tool | Support |
|------|---------|
| Codex | Full support |
| Claude Code | Full support |
| MuleRun | Full support |
| OpenCode | Full support |
| Cursor | Full support |
| Visual Studio Code | Full support |
| QwenWork（千问办公） | Full support |
| Qoder | Full support |
| Qoder IDE | Full support |
| QoderWork | Full support |
How It Works
flowchart LR
A["AI coding agent"] --> B["OpenYida CLI"]
B --> C["Environment detection"]
B --> D["Login and organization context"]
B --> E["Yida API operations"]
B --> F["Local page generation and compile"]
E --> G["Native Yida app"]
F --> G
OpenYida keeps platform-specific behavior inside the CLI, while agents interact with predictable commands and project files.
Project Layout
openyida/
├── bin/yida.js # CLI entry and command routing
├── lib/
│ ├── app/ # Application, form, page, import/export commands
│ ├── auth/ # OAuth token login, token session storage, organization switch
│ ├── connector/ # HTTP connector lifecycle and smart creation
│ ├── core/ # Environment detection, i18n, diagnostics, data commands
│ ├── process/ # Process form creation, configuration, preview
│ ├── report/ # Yida report and chart generation
│ └── samples/ # Reusable code templates emitted by openyida sample
├── project/ # Default workspace template for generated Yida projects
├── yida-skills/ # Source skill docs and Yida API references
└── scripts/ # CI, packaging, and installation helpers
Capabilities
For a user-facing list of supported features and matching CLI commands, see OpenYida 功能完整列表.
Application and Form Management
openyida create-app --name "CRM" --desc "Customer management"
openyida sample yida-design app-theme --output .cache/openyida/crm/app-theme.css
openyida create-app --name "CRM" --desc "Customer management" --theme-file .cache/openyida/crm/app-theme.css --nav-theme light --logo-source appIcon --layout l_shape
openyida app-list --type managed --page 1 --size 16
openyida update-app APP_XXX --theme-file .cache/openyida/crm/app-theme.css --nav-theme light --logo-source appIcon --layout l_shape
openyida corp-efficiency
openyida create-form create APP_XXX "Customer" .cache/openyida/forms/customer-fields.json
openyida create-form update APP_XXX FORM_XXX .cache/openyida/forms/customer-changes.json
openyida create-form update APP_XXX FORM_XXX --data-file .cache/openyida/forms/customer-changes.json
openyida create-form resume APP_XXX FORM_XXX .cache/openyida/forms/customer-fields.json --json
openyida sample openyida-page-template form-fields --output .cache/openyida/forms/customer-fields.json
openyida sample openyida-page-template canvas-form-drawer --output project/pages/src/customer-entry.canvas.jsx --var APP_TYPE=APP_XXX --var FORM_UUID=FORM_XXX
openyida get-schema APP_XXX FORM_XXX
openyida get-schema APP_XXX FORM_XXX --compact --resolve-fields "Customer Name,Status"
openyida get-schema APP_XXX --all --output-dir .cache/schemas
Form definitions support 19 business field types plus verified presentation/layout components. Prefer Divider for section titles and ColumnContainer (mapped to ColumnsLayout + Column) for multi-column layout; use GroupContainer / PageSection only when an actual grouping container is needed.
Custom Page Development
openyida create-page APP_XXX "Dashboard" --mode dashboard
openyida publish pages/src/home.canvas.jsx APP_XXX FORM_XXX
Custom page source is authored directly from PRD and design guidance. Custom page development uses yida-canvas-custom-page and .canvas.jsx.
For member, department, attachment, and image upload components, .canvas.jsx pages should follow yida-canvas-custom-page/references/native-components-bridge.md for feature detection, fallback, and value normalization.
For the current custom page native-component support matrix, see Yida native components supported by custom pages.
Workflow, Data, and Permissions
openyida create-process APP_XXX "Purchase Request" .cache/openyida/process/fields.json .cache/openyida/process/process.json
openyida configure-process APP_XXX FORM_XXX .cache/openyida/process/process.json
openyida process preview APP_XXX PROC_INST_XXX --output .cache/openyida/process/process.html
openyida data query form APP_XXX FORM_XXX --page 1 --size 20
openyida data query form APP_XXX FORM_XXX --dynamic-order '{"dateField_xxx":"-"}'
openyida data create form APP_XXX FORM_XXX --expect-form-name 客户 --expect-form-type receipt --data-file .cache/openyida/data-import/record.json
openyida get-permission APP_XXX FORM_XXX
configure-process 的流程 JSON 中，审批人可配置为发起人、指定成员、指定角色、部门主管或直属主管，例如：
{
"nodes": [
{
"type": "approval",
"name": "主管审批",
"approver": {
"type": "user",
"users": [{ "id": "manager7350", "name": "九神" }],
"multiApproverType": "all"
}
}
]
}
configure-process 会先通过表单绑定和流程版本只读接口证明 processCode ownership。目标已有 PUBLISHED 流程或 SAVED 草稿时，整图替换必须在人工确认后显式传入 --replace；未确认或 ownership 不匹配时远程写入数为 0。draft/save/publish 均为 one-shot，认证异常返回 NON_IDEMPOTENT_RESULT_UNKNOWN，不得自动重试。
发布成功还必须精确回读同一 PUBLISHED processId/processVersion 的 getProcessById 平台视图，并验证可见节点的组件、名称、顺序和审批模式。只有输出 verificationLevel: "PLATFORM_VIEW_VERIFIED" 才表示平台 view 已验证；PUBLISHED_UNVERIFIED 表示发布可能已生效但回读不完整，不能宣称 processJson 已验证，也不能直接重放写请求。
When creating or updating test data with openyida data, Yida date fields must use 13-digit millisecond timestamps, for example "dateField_xxx": 1719705600000. Do not submit YYYY-MM-DD strings for DateField or CascadeDateField values.
For deterministic query order, pass --dynamic-order '{"fieldId":"+"}' for ascending order or --dynamic-order '{"fieldId":"-"}' for descending order. Without --dynamic-order, searchFormDatas does not guarantee a stable result order; pagination, comparison, and pairing logic must not depend on the default order.
Temporary JSON, CSV, and one-off import scripts should live under .cache/openyida/ so generated run artifacts do not clutter the repository root.
Real Environment E2E
Most checks should stay offline, but OpenYida also includes an explicit real-environment smoke path for release and nightly validation:
OPENYIDA_E2E=1 npm run test:e2e:real
OPENYIDA_E2E=1 npm run test:e2e:real:full
OPENYIDA_E2E=1 OPENYIDA_E2E_FULL_STAGES=auth,app,form,process npm run test:e2e:real:full
npm run test:e2e:real:skills
The runner creates a disposable app, form, and custom page with an OY_E2E_* prefix, then verifies token login, app listing, schema fetch, data query, and page publish. It writes a registry to project/.cache/e2e-real/ so created resources can be audited later. Run openyida login for the target environment before starting the real E2E runner.
test:e2e:real:full extends the smoke path into a broad deterministic feature matrix: auth/env, app update, form update and option mutation, page build/compile/generate/publish, data create/get/update/query, permission read, page config and short URL check, report create/append, dashboard skill verification, export/import, batch, task-center, formula/doctor/sample/CDN config, and local connector parsing/template generation. AI-backed commands such as flash-to-prd are available as the optional ai stage because they depend on remote model availability. Workflow mutation is available as the opt-in process stage; it creates and republishes a workflow on the disposable E2E form and records advanced official-node fixtures for review.
test:e2e:real:skills enforces coverage for every directory under yida-skills/skills/. Each skill must be classified as real E2E, offline/unit, opt-in, or deprecated with an explicit reason. This prevents new skills from quietly bypassing the real-environment test plan.
Each successful full run leaves a human-inspectable result app in the target organization. The final step publishes a dedicated Full E2E Dashboard custom page, renames the app to OY_E2E_*_PASSED by default, and prints direct links for the app, form, dashboard page, and report; the same links are saved under resultApp in the registry JSON.
Useful options:
| Env var | Purpose |
|---------|---------|
| OPENYIDA_E2E_PREFIX | Override the disposable resource name prefix |
| OPENYIDA_E2E_CORP_ID | Switch to the dedicated test organization before creating resources |
| OPENYIDA_E2E_RESULT_APP_NAME | Override the final app name shown as the full-run result |
| OPENYIDA_E2E_BASE_URL | Override the Yida base URL for private deployments |
| OPENYIDA_E2E_FIELDS_FILE | Use a custom form fields fixture |
| OPENYIDA_E2E_PAGE_SOURCE | Use a custom page source for publish verification |
| OPENYIDA_E2E_SKIP_PUBLISH=1 | Skip custom page creation and publish |
| OPENYIDA_E2E_REGISTRY_DIR | Write registries outside project/.cache/e2e-real/ |
| OPENYIDA_E2E_FULL_STAGES | Comma-separated stage list for test:e2e:real:full; use all or omit for the default broad matrix |
Use npm run test:e2e:real:cleanup to list recorded disposable resources. OpenYida does not yet expose a safe app/form deletion command, so cleanup is intentionally a registry-backed audit step rather than an automatic destructive action.
Skill Evaluation Harness
The E2E paths above prove the CLI works. The eval harness under scripts/eval/ measures whether the agent still routes natural-language requests to the right sub-skill and produces good output after you edit yida-skills/SKILL.md. It is the feedback loop for harness engineering.
# Routing eval — "did it pick the right sub-skill?" No real resources, no login.
Drives a headless claude -p agent with each scenario prompt and checks
the selected sub-skill against the golden set.
npm run eval:routing
Doc quality — static analysis of all SKILL.md files (standards + maintainability).
npm run eval:doc-quality
Safety — credential leak detection, command whitelist, corpId consistency.
npm run eval:safety
Coverage — how much of the skill/category/reference space is covered by scenarios.
npm run eval:coverage
Comprehensive — 10-dimension scorecard for a single skill (doc quality, routing,
safety, step completeness, output validity, efficiency, stability, coverage).
Outputs a JSON scorecard, SVG radar chart, and trend analysis.
npm run eval:comprehensive -- --skill yida-dashboard
Tool-pipeline baseline (end-to-end) — wraps the real-environment runner for one
sub-skill, adds guardrail assertions, screenshots the published page, and writes a
human scoring template. Runs deterministic CLI commands (no agent) so it serves as
a control that proves the build→publish→screenshot→score plumbing itself works.
Requires OPENYIDA_E2E=1 and a valid token session.
OPENYIDA_E2E=1 npm run eval:e2e -- --skill yida-dashboard --screenshot
Same, plus automatic screenshot scoring via the local multimodal claude -p.
OPENYIDA_E2E=1 npm run eval:e2e -- --skill yida-dashboard --screenshot --auto-score
Real-generation eval — "can one sentence really build a usable app?" Feeds a
natural-language request ("帮我创建一个订单管理系统") to a headless claude -p
that actually reads the openyida skill and runs the CLI to build a real app, then
reuses the screenshot + scoring + report pipeline. Creates real 宜搭 resources, so
it needs OPENYIDA_E2E=1 + an authenticated agent. Unlike the deterministic baseline
above, here the agent self-orchestrates.
OPENYIDA_E2E=1 npm run eval:generate -- --screenshot
Re-evaluate an archived real CLI trace against the latest scenario contract and
current read-only platform state. This does not run an agent or mutate resources.
npm run eval:replay -- --report <generation-report.json> --scenario <scenario.json> --app-type APP_XXX
Run all three in one pass (routing + tool-pipeline baseline + real generation).
OPENYIDA_E2E=1 npm run eval:all -- --skill yida-dashboard --screenshot
Optional: a zero-dependency local web console (buttons + live streamed output)
that runs the tasks above on click. Binds to 127.0.0.1 only; tasks are a fixed
whitelist. Use the Node version you start it with, so run nvm use 20 first.
npm run eval:dashboard # http://127.0.0.1:4500
Configuration precedence is CLI flag > env (OPENYIDA_EVAL_*) > scripts/eval/eval.config.json > defaults.
| Flag | Purpose |
|------|---------|
| --mode e2e\|routing\|generate\|doc-quality\|safety\|coverage\|comprehensive\|all | Which evals to run (default e2e) |
| --skill | Restrict the e2e run to one sub-skill; stages are reverse-looked-up from the SKILL_COVERAGE matrix |
| --stages a,b | Explicit stage list, overriding the skill reverse-lookup |
| --runs N | Multi-run stability: repeat routing N times, report consistency rate |
| --screenshot / --no-screenshot | Capture the published page (default on; skipped gracefully if Playwright is absent) |
| --auto-score / --no-auto-score | Score screenshots with the local claude -p agent (default off → human template only) |
| --scenarios | Routing golden-set directory (default scripts/eval/scenarios) |
| --gen-scenarios | Real-generation golden-set directory (default scripts/eval/scenarios/generation) |
Results are written back into the existing acceptance-manifest.json under a new eval section (guardrails, screenshots, scores) plus two sibling artifacts: a scoring.md human-scoring template and a self-contained eval-report.html visual report (screenshots inlined as base64, so the single file opens anywhere). Routing results land in project/.cache/eval/routing-report.json; generation results (with their own scoring.md + eval-report.html) land in project/.cache/eval/generate/gen-/. The harness degrades gracefully: a missing Playwright skips screenshots (enable with npm install --no-save playwright && npx playwright install chromium), and a missing claude CLI skips auto-scoring while keeping the human template. A guardrail failure (for example a resource-creating command issued before a successful login --check-only) fails the run.
A zero-dependency local dashboard (npm run eval:dashboard, then open http://127.0.0.1:4500) drives these runs from buttons and streams output live; its "📊 查看最新报告" button opens the most recent eval-report.html.
Connectors, Integrations, and Reports
openyida connector smart-create --curl "curl https://api.example.com/users"
openyida connector list
openyida integration create APP_XXX FORM_XXX "Sync customer data"
openyida integration create APP_XXX FORM_XXX "Approval result notify" \
--events processFinish --approval-actions agree,disagree --receivers 123456
Capability probe only; currently fails closed before auth/spec reads/remote writes
openyida integration update APP_XXX FORM_XXX LPROC_XXX \
--spec .cache/openyida/integration/desired-spec.json
openyida create-report APP_XXX "Sales Dashboard" .cache/openyida/reports/charts.json
openyida append-chart APP_XXX REPORT_XXX .cache/openyida/reports/chart.json
Aggregate tables use two independent optimistic-concurrency axes.
openyida aggregate-table inspect APP_XXX FORM_XXX --json
openyida aggregate-table preview APP_XXX FORM_XXX .cache/openyida/aggregate/design.json --json
openyida aggregate-table save APP_XXX FORM_XXX .cache/openyida/aggregate/design.json --json --no-open
openyida aggregate-table publish APP_XXX FORM_XXX .cache/openyida/aggregate/design.json --json --no-open
openyida aggregate-table status APP_XXX FORM_XXX --json
Aggregate-table save verifies the draft stashGmtModified axis; publish verifies the live gmtModified axis. Both commands require the corresponding GET readback revision to advance; when a response revision exists it must equal that readback axis. Both commands also require canonical readback of relationForms, relationships, aggregatedFields, auxFields, formulaFields, and validators. The CLI intentionally does not expose aggregate-table deletion, AI authoring, a high-level design DSL, or tenant-dynamic limits until the corresponding platform contracts are proven.
The opt-in aggregate real-E2E runner additionally requires OPENYIDA_AGGREGATE_E2E_RUN_ID and an exact OPENYIDA_AGGREGATE_E2E_OWNED_MARKER beginning with __. Before its first write it verifies the exact list/inspect identity and name, persists a redacted manifest, registry, and baseline snapshot, then conditionally restores the baseline using the latest live revision. Missing ownership proof or concurrent revision movement produces PLATFORM_PROBE_REQUIRED / restore_blocked without a restore write.
CLI Reference
Run openyida --help or openyida --help for detailed usage.
Auth & Environment
| Command | Description |
|---------|-------------|
| openyida login [target-url] [--env \|--intl\|--overseas\|--global\|--yidaapps\|--alibaba] [--client-id ] [--endpoint ] [--no-browser] | Login with OAuth token mode |
| openyida logout | Logout / unbind current project auth |
| openyida auth | Token login state and profile management |
| openyida org [--json] [--corp-id ] | Organization management (list / switch existing profiles first) |
| openyida env [--json\|setup\|list\|show\|switch\|add\|remove] [options] | Detect AI tool environment & token login state |
App Management
| Command | Description |
|---------|-------------|
| openyida app-list [--type managed\|created] [--page N] [--size N] | Page through apps I manage or created |
| openyida corp-efficiency [overview\|details\|detail\|groups\|notify] [options] [--open\|--no-open] | Query enterprise efficiency overview and detail reports |
| openyida create-app ""\|--name [options] [--locale zh_CN\|en_US\|ja_JP] [--open\|--no-open] | Create a Yida app |
| openyida design-plan init [--theme-id ] [--output-dir ] [--json] | Initialize a plan draft from confirmed requirements |
| openyida design-plan preview --part-file [--json] | Update plan drafts by module |
| openyida design-plan materialize [--from-preview \| --business-file --visual-file ] [--output-dir ] [--check] [--json] | Generate and validate design-plan artifacts from build-plan.json |
| openyida design-plan patch --set [--set ...] [--materialize] [--output-dir ] [--json] | Patch a design plan by field path and invalidate prior confirmation |
| openyida update-app [--name "..."] [--theme-file ] [--nav-theme light\|dark\|white\|gray] [--logo-source appIcon\|customImage] [--layout side\|top\|l_shape] [--hide-app-nav\|--show-app-nav] | Update app info |
| openyida app-online [--to-ding-app-center] [--show-app-center] | Enable a Yida app |
| openyida app-offline [--to-ding-app-center] [--show-app-center] | Disable a Yida app |
| openyida nav-group ... | Manage app sidebar navigation groups |
| openyida app-permission ... | Manage app primary, data, and developer admins |
| openyida i18n ... | Manage app multilingual copy and language config |
| openyida export [output] | Export app (generate migration package) |
| openyida import [name] | Import migration package, rebuild app |
Forms & Pages
| Command | Description |
|---------|-------------|
| openyida create-form batch [--concurrency 1..4] [--check] [--json] | Create forms concurrently by dependency |
| openyida create-form create "" [--icon auto\|] [--locale zh_CN\|en_US\|ja_JP] [--open\|--no-open] | Create a form page |
| openyida create-form icons [--json] | List available form navigation icons |
| openyida create-form validate-fields [--json] | Validate form field JSON locally |
| openyida create-form update ( \| --data-file ) [--locale zh_CN\|en_US\|ja_JP] [--open\|--no-open] | Update a form page |
| openyida create-form resume [--json] | Update a form page |
| openyida create-form patch [--open\|--no-open] | Update a form page |
| openyida create-form rule [--open\|--no-open] | Update a form page |
| openyida create-form validation [--open\|--no-open] | Update a form page |
| openyida add-validation --field --type [--message ] | Update a form page |
| openyida create-form bind-datasource [--open\|--no-open] | Update a form page |
| openyida create-form add-option [option2] ... | Update a form page |
| openyida list-forms [--keyword ] | List forms/pages in an app |
| openyida aggregate-table ... | Manage aggregate tables (virtualView) |
| openyida get-schema [--summary-json\|--field-map-json\|--analysis-json] | Get one form Schema or all form Schemas |
| openyida check-prd-completeness --app-type [--build-manifest ] [--json] | Check PRD page/resource count risk |
| openyida er [--format mermaid\|json] [--output file] [--include-system] [--include-pages] | Export app entity relationship diagram |
| openyida create-page "" [--mode dashboard] [--hide-nav] [--locale zh_CN\|en_US\|ja_JP] [--open\|--no-open] | Create a custom display page |
| openyida build-page [--output file\|--write] | Build Yida-compatible page source |
| openyida check-page [--compat] | Check custom page standards |
| openyida compile | Compile custom page locally |
| openyida publish [--health-check] [--force] [--canvas] [--auto-nav-order] [--open\|--no-open] | Compile and publish custom page |
| openyida update-form-config "" [--locale zh_CN\|en_US\|ja_JP]</code> | Update form configuration |
| <code>openyida get-form-config <appType> <formUuid> [--json]</code> | Query form configuration |</p>
<h3>Data & Permissions</h3>
<p>| Command | Description |
|---------|-------------|
| <code>openyida data <query\|get\|create\|update> <resource> ... \| delete form <appType> <formUuid> --inst-id <id> --expect-form-name <name> --expect-form-type receipt --confirm [--json]</code> | Unified data management (form/process/task/subform) |
| <code>openyida task-center <type> [options]</code> | Global task center (todo/processed/cc etc.) |
| <code>openyida basic-info <overview\|commodity\|grant\|capacity\|quota\|abs-path\|dataflow\|i18n\|domain></code> | Query organization basic info, capacity, quotas, and domain settings |
| <code>openyida read-dingtalk-doc <docUrl> [--output <file>] [--json]</code> | Fetch Markdown content from a DingTalk document |
| <code>openyida read-dingtalk-tingji <taskUuid> [--json]</code> | Fetch DingTalk Tingji details by task UUID |
| <code>openyida get-permission <appType> <formUuid> [--package-uuid <packageUuid>] [--json]</code> | Query form permission config |
| <code>openyida save-permission <appType> <formUuid> --package-uuid <packageUuid> [--data-permission <json>\|--action-permission <json>\|--field-permission <json>]</code> | Save form permission config |
| <code>openyida corp-manager <search-user\|list\|add\|remove\|address-book> ...</code> | Manage platform admins and address book permissions |
| <code>openyida agent-center <list\|create\|update\|cancel\|range\|search-user> ...</code> | Manage process and departure delegation |</p>
<h3>Process</h3>
<p>| Command | Description |
|---------|-------------|
| <code>openyida configure-process <appType> <formUuid> <definition> [processCode] [--replace]</code> | Configure and publish process rules |
| <code>openyida create-process <appType> ... [--replace]</code> | Create process form (all-in-one) |
| <code>openyida ai-form-setting <get\|fields\|models\|enable\|disable\|save> <appType> ...</code> | Manage process form AI approval prompts |
| <code>openyida process preview <appType> ...</code> | Preview process instance (visual flowchart) |</p>
<h3>Page Config & Sharing</h3>
<p>| Command | Description |
|---------|-------------|
| <code>openyida verify-short-url <appType> ...</code> | Verify short URL |
| <code>openyida save-share-config <appType> ...</code> | Save public access / share config |
| <code>openyida get-page-config <appType> <formUuid></code> | Query page public access config |
| <code>openyida externalize-form <appType> <formUuid> [--schema-file file]</code> | Plan external access-safe mirror fields |</p>
<h3>Reports</h3>
<p>| Command | Description |
|---------|-------------|
| <code>openyida create-report <appType> "<name>" ... [--json] [--open\|--no-open]</code> | Create a Yida report |
| <code>openyida append-chart <appType> <reportId> ... [--json] [--open\|--no-open]</code> | Append chart to existing report |
| <code>openyida report inspect <appType> <reportId> --json</code> | Inspect report runtime bindings (read-only) |</p>
<h3>Connectors</h3>
<p>| Command | Description |
|---------|-------------|
| <code>openyida connector list</code> | List HTTP connectors |
| <code>openyida connector create "name" "domain" ...</code> | Create a connector |
| <code>openyida connector detail <id></code> | View connector details |
| <code>openyida connector delete <id> [--force]</code> | Show manual deletion guidance (CLI does not delete) |
| <code>openyida connector add-action --operations <file> --connector-id <id></code> | Add an action |
| <code>openyida connector update-action --connector-id <id> --action <operationId> --query-json JSON --confirm</code> | Safely update action query defaults |
| <code>openyida connector list-actions <id></code> | List actions |
| <code>openyida connector delete-action <id> <operation-id></code> | Delete an action |
| <code>openyida connector test --connector-id <id> --action <actionId> [--path-json JSON] [--query-json JSON] [--header-json JSON] [--body-json JSON] [--account-id <id>] [--system-token-app <appType>]</code> | Test an action |
| <code>openyida connector list-connections <id></code> | List auth connections |
| <code>openyida connector create-connection <id> <name> [--interactive]</code> | Create an auth connection |
| <code>openyida connector smart-create --curl "..."</code> | Generate a redacted action draft from cURL (no remote create) |
| <code>openyida connector parse-api [options]</code> | Parse API information |
| <code>openyida connector gen-template [output]</code> | Generate API document template |</p>
<h3>Integration & DingTalk</h3>
<p>| Command | Description |
|---------|-------------|
| <code>openyida integration create <appType> ... [--spec file.json] [--connector-system-token-app <appType>]</code> | Create integration automation flow |
| <code>openyida integration update <appType> <formUuid> <processCode> --spec <desired-spec.json> [--publish]</code> | Probe integration update capability (currently blocked without full readback) |
| <code>openyida integration list <appType> [--flow-types 1,2,3,5,6] [--form-uuid <uuid>] [--status y\|n] [--json]</code> | List integration automation flows |
| <code>openyida integration enable <appType> <formUuid> <processCode></code> | Enable integration automation flow |
| <code>openyida integration disable <appType> <formUuid> <processCode></code> | Disable integration automation flow |
| <code>openyida integration check <appType...></code> | Check abnormal integration automation run logs |
| <code>openyida integration diagnose (--text <text>\|--file <path>\|--rules) [--json]</code> | Diagnose integration automation tickets and common pitfalls |
| <code>openyida dws <command> [args]</code> | DingTalk CLI (contacts/calendar/todo/approval etc.) |
| <code>openyida dws contact user search --keyword <text></code> | DingTalk CLI (contacts/calendar/todo/approval etc.) |
| <code>openyida dingtalk-link <url> [--target fullScreen] [--legacy-scheme] [--json]</code> | Generate DingTalk AppLink / legacy dingtalk:// page links |</p>
<h3>Utility</h3>
<p>| Command | Description |
|---------|-------------|
| <code>openyida commands [--json]</code> | Output machine-readable command manifest |
| <code>openyida agent-capabilities [--json] [--summary-json\|--compact]</code> | Output one-shot agent capability snapshot |
| <code>openyida a2a <serve\|agent-card> [options]</code> | Start local read-only A2A adapter or print Agent Card |
| <code>openyida bridge start [--token <pair-token>] [--port 6736] [--origin https://demo.aliwork.com] [--open\|--no-open]</code> | Start OpenYida local web bridge service |
| <code>openyida copy [--force]</code> | Copy project working directory |
| <code>openyida sample [--list] [<skill> <name>] [--output <file>] [--var KEY=VALUE ...] [--design-file <design.md>]</code> | Output code samples/templates |
| <code>openyida doctor [--fix]</code> | Environment diagnostics & auto-fix |
| <code>openyida db-seq-fix [--fix]</code> | Detect and repair PostgreSQL sequence drift |
| <code>openyida formula evaluate <formula\|file> [--schema file]</code> | Static-check Yida formula syntax and field refs |
| <code>openyida update</code> | Check and update to latest version |
| <code>openyida export-conversation [options]</code> | Export AI conversation records |
| <code>openyida feedback <setup\|url\|dismiss\|status> [options]</code> | Configure experience feedback form and local reminder state |
| <code>openyida batch <file>\|--commands "cmd1 ; cmd2" [--stop-on-error] [--json]</code> | Run OpenYida commands in batch |
| <code>openyida flash-to-prd --file <path> --name "<project>"</code> | Convert flash notes or meeting notes to a PRD prompt |
| <code>openyida ai <text\|image> [options]</code> | Call Yida AI text and image recognition APIs |
| <code>openyida asset <status\|resolve\|generate> [options]</code> | Detect asset capability / resolve materials |
| <code>openyida cdn-config [options]</code> | Configure CDN / OSS upload |
| <code>openyida cdn-upload <image-path></code> | Upload image to CDN |
| <code>openyida cdn-refresh [options]</code> | Refresh CDN cache |</p>
<p><!-- OPENYIDA_COMMANDS_END --></p>
<h3>CLI Notes</h3>
<h4>Connector Safety and Real E2E</h4>
<p><code>connector test</code> keeps the legacy flat <code>--params</code> option, but dispatches each key only to the location proven by the action schema. Unknown or ambiguous keys fail closed. Authenticated connectors require <code>--account-id</code>, and that account must belong to the selected connector. The test response follows the frontend canonical contract <code>{statusLine,responseHeaders,content}</code>; unknown envelopes and non-2xx status lines are failures.</p>
<p><code>connector update-action --connector-id <id> --action <operationId> --query-json '{"currentPage":"1"}' --confirm</code> is the narrow safe path for editing existing query defaults. It requires a complete connector/action preflight, changes only declared query defaults mirrored in <code>inputs</code> and <code>parameters</code>, submits the complete action collection once, and verifies an unchanged connector fingerprint, action count, non-target actions, and stable IDs. Missing/empty/unknown parameters, duplicate IDs, incomplete readback, and unknown write outcomes fail closed without automatic retry. <code>add-action</code> no longer overwrites an existing action ID; use <code>update-action</code> for query-only edits.</p>
<p>The opt-in connector E2E is intentionally separate from the shared full runner:</p>
<pre><code class="bash">OPENYIDA_E2E=1 \
OPENYIDA_E2E_CONNECTOR=1 \
OPENYIDA_E2E_CORP_ID='<target-corp-id>' \
OPENYIDA_E2E_CONNECTOR_ECHO_URL='https://<team-controlled-host>/<stable-echo-path>' \
OPENYIDA_E2E_CONNECTOR_FIXTURE_MARKER='<expected-response-marker>' \
OPENYIDA_E2E_CONNECTOR_FIXTURE_OWNER='<expected-owner-header-value>' \
node scripts/e2e-real/connector/runner.js</code></pre>
<p>The runner rejects public generic echo services such as httpbin and example.com. Before its first remote write it selects and verifies the explicit organization profile, prints a redacted resource plan, and persists synchronized registry/manifest evidence plus the SHA-256 of the preserved operations fixture. The controlled fixture must return exact JSON fields <code>content.runId</code>, <code>content.fixtureMarker</code>, and <code>content.authorization === "Basic <em>*</em>"</code>, plus the exact <code>x-openyida-fixture-owner</code> response header. Substring matches, malformed JSON, and wrong fields fail closed. Each remote create is persisted as <code>attempted</code> before execution and becomes <code>completed</code> only after exact readback; an exception is recorded as <code>outcome_unknown</code> with a non-owned residual candidate and is never retried. The runner deletes only its temporary local copy and reports remote connector/account cleanup as blocked because the CLI has no proven delete API. If organization or fixture ownership cannot be proven, it returns <code>PLATFORM_PROBE_REQUIRED</code> with zero remote writes.</p>
<p>The opt-in <code>node scripts/e2e-real/connector/action-update-runner.js</code> regression uses the owner-confirmed login-free <code>www.aliwork.com</code> fixture and a single owned NONE-auth connector containing a target action plus one preservation sentinel. Enable it with <code>OPENYIDA_E2E=1 OPENYIDA_E2E_CONNECTOR_ACTION_UPDATE=1</code>. It verifies isolated <code>currentPage</code>, <code>pageSize</code>, <code>userLanguage</code>, <code>searchFieldJson</code>, and dynamic <code>_stamp</code> edits, restores each field and the final baseline, and persists only response structure, data count, and SHA-256. It never stores response row values or auth/profile/corp identifiers, never retries unknown writes, and intentionally leaves the owned connector as a <code>cleanup_blocked</code> residual because no proven delete API exists.</p>
<p><code>openyida asset resolve --hero <path-or-url> --product <path-or-url> --require-hero --upload-assets --json</code> is the preferred preflight for homepage visuals. It handles local files and external image references in one flow, uploads or mirrors them when CDN is configured, and returns <code>materialStatus: final|draft|none</code> so agents do not claim an unfinished visual page is final.</p>
<h4>Environment and Localization</h4>
<p>Environment selectors such as <code>--env intl</code>, <code>--intl</code>, <code>--overseas</code>, <code>--global</code>, and <code>--yidaapps</code> can be used on login-required commands to choose the target Yida environment for that run. The <code>intl</code> preset uses <code>https://www.yidaapps.com</code> as the built-in Global YiDA entrypoint (not the bare <code>https://yidaapps.com</code> domain) and DingTalk International OAuth at <code>https://login.dingtalk.io</code>; business API requests still use the authenticated environment <code>baseUrl</code>, so customer custom subdomains are supported.</p>
<p>For overseas apps, pass <code>--locale en_US</code> or <code>--locale ja_JP</code> on creation commands, or set <code>OPENYIDA_CONTENT_LOCALE</code>. OpenYida writes YiDA resource names with <code>zh_CN</code>, <code>en_US</code>, and <code>ja_JP</code> values so Global YiDA does not fall back to Chinese-only metadata.</p>
<p>The CLI package ships the core UI languages <code>zh</code> and <code>en</code> by default. Other CLI UI language packs are optional: keep or install files such as <code>ja.js</code> / <code>fr.js</code> in an external directory and point <code>OPENYIDA_LOCALE_DIR</code> to that directory, then set <code>OPENYIDA_LANG=ja</code>. If an optional language pack is unavailable, OpenYida falls back through <code>en -> zh</code>.</p>
<h4>Forms and Pages</h4>
<p>Form field definitions can include <code>alias</code> or <code>componentAlias</code> to populate Yida designer component aliases, stored as <code>pages[0].componentAlias.items</code>. Yida runtime resolves these aliases in page JS, so <code>this.$('phone')</code> can be used instead of <code>this.$('textField_xxx')</code>; OpenYida form rules, validations, and <code>openyida data ... --resolve-aliases</code> JSON inputs also accept aliases as field references. For server-side DingTalk OpenAPI calls, use <code>GET /v2.0/yida/forms/component/alias/{appType}/{formUuid}</code> to read the <code>{ fieldId, alias }</code> mapping, then translate aliases before sending form data/search JSON. That endpoint requires <code>systemToken</code>, <code>userId</code>, an access token, and the Yida form data read permission. Use <code>connector test --system-token-app <appType></code> for a transient test or <code>integration create --connector-system-token-app <appType></code> for a server-side automation; OpenYida resolves <code>systemToken</code> internally and never prints it or stores it in page source and Action defaults.</p>
<p><code>openyida publish</code> preserves existing custom page data sources by default. Before saving the new compiled JSX Schema, it reads the current page Schema and merges the Page-level <code>dataSource</code> with the built-in <code>urlParams</code> and <code>timestamp</code> sources, so manually configured data sources are not deleted during republish.</p>
<h4>Data, Permissions, and Sharing</h4>
<p><code>openyida externalize-form</code> is useful when a form contains fields such as <code>AssociationFormField</code>, <code>EmployeeField</code>, or <code>DepartmentSelectField</code> that depend on internal organization permissions. It produces a report plus optional <code>--mirror-fields-output</code> JSON that can be used with <code>openyida create-form create</code> to build a separate public intake form while keeping the internal form and its association fields private.</p>
<h4>Workflow, Reports, and Integrations</h4>
<p><code>openyida integration create</code> supports form events (<code>insert</code>, <code>update</code>, <code>delete</code>, <code>comment</code>) and approval events (<code>processFinish</code>, <code>activityTask</code>; aliases: <code>approval</code>, <code>approvalNode</code>). Approval events require <code>--approval-actions agree,disagree,terminated</code>; <code>activityTask</code> also requires <code>--approval-node-ids <nodeId,...></code>. Passing <code>--process-code</code> selects a full graph replacement and now requires explicit <code>--replace</code>; it is not a safe update. <code>integration update</code> currently performs capability detection only: because full platform <code>processJson</code> + <code>viewJson</code> readback is unproven, it writes a redacted local probe artifact and returns <code>PLATFORM_PROBE_REQUIRED</code> before authentication, spec reading, or remote writes. It does not edit a flow.</p>
<h2>Agent Skills</h2>
<p>The <code>yida-skills/</code> directory is the source skill library used by OpenYida during development and distributed with the npm package.</p>
<p>| Path | Purpose |
|------|---------|
| <code>yida-skills/SKILL.md</code> | Entry point and skill index |
| <code>yida-skills/skills/</code> | Self-contained sub-skills for app, form, process, page, data, and integration work |
| <code>yida-skills/references/</code> | Shared Yida API, model API, and query-condition references |</p>
<p>When OpenYida is used inside a supported AI coding environment, these skills help the agent choose the right command sequence and file conventions.</p>
<p>For QwenWork, use the same user-level global skills layout as QoderWork: <code>~/.qwenworkcn/skills/yida-skills/</code>. Skip QwenWork setup when <code>~/.qwenworkcn</code> is not present.</p>
<p>Qoder and Qoder IDE share the user-level <code>~/.qoder/skills/yida-skills/</code> directory. QoderWork remains a separate product and uses <code>~/.qoderwork/skills/yida-skills/</code>.</p>
<p>For Codex, <code>npm install -g openyida</code> additionally creates a local plugin marketplace under <code>~/.openyida/codex-plugin</code> and enables <code>openyida@openyida</code> in <code>~/.codex/config.toml</code> when Codex is detected. This makes OpenYida show up in Codex's <code>@</code> plugin menu as <strong>宜搭</strong> after Codex reloads.</p>
<h2>Examples</h2>
<h3>Business Systems: IPD and CRM</h3>
<p>Describe your requirements in one sentence; the agent can create a complete multi-form Yida application.</p>
<p>!<a href="https://img.alicdn.com/imgextra/i2/O1CN01YBEMa929J7sD9v8U1_!!6000000008046-2-tps-3840-3366.png" target="_blank" rel="noopener">IPD</a></p>
<p>!<a href="https://img.alicdn.com/imgextra/i3/O1CN01kn0Vcn1H5OkbQaizA_!!6000000000706-2-tps-3840-2168.png" target="_blank" rel="noopener">CRM</a></p>
<h3>Custom Pages and Utilities</h3>
<p>!<a href="https://gw.alicdn.com/imgextra/i2/O1CN017TeJuE1reVH2Dj7b7_!!6000000005656-2-tps-5114-2468.png" target="_blank" rel="noopener">Salary Calculator</a></p>
<p>!<a href="https://gw.alicdn.com/imgextra/i1/O1CN01EZtvfs1cxXV00UaXi_!!6000000003667-2-tps-5118-2470.png" target="_blank" rel="noopener">Enterprise Collaboration</a></p>
<h3>Interactive Campaigns</h3>
<p>!<a href="https://img.alicdn.com/imgextra/i3/O1CN01dCoscP25jSAtAB9o3_!!6000000007562-2-tps-2144-1156.png" target="_blank" rel="noopener">Lantern Riddle Game</a></p>
<h2>Common Prompts</h2>
<pre><code class="text">Build a Yida application for [business scenario].
Generate an app from this requirements document.
Create a [name] form page with these fields.
Add a required [field type] field named [field name] to [form name].
Publish this custom page to the Yida app.
Make this page publicly accessible.
Export the application as a migration package.</code></pre>
<h2>OpenClaw Integration</h2>
<p>Use OpenYida through <a href="https://clawhub.ai/nicky1108/yida-app" target="_blank" rel="noopener">yida-app</a> in OpenClaw:</p>
<pre><code class="bash">npx clawhub@latest install nicky1108/yida-app</code></pre>
<h2>Development</h2>
<pre><code class="bash">git clone https://github.com/openyida/openyida.git
cd openyida
npm install
npm run check:ci</code></pre>
<p>Useful checks:</p>
<p>| Command | Purpose |
|---------|---------|
| <code>npm test</code> | Run Jest tests |
| <code>npm run lint</code> | Run ESLint |
| <code>npm run check:quick</code> | Run structure, manifest, syntax, and lint checks |
| <code>npm run check:commands</code> | Validate router, command manifest, and README alignment |
| <code>npm run docs:commands</code> | Regenerate the README command index from the manifest |
| <code>npm run check:docs</code> | Verify generated README command docs are current |
| <code>npm run check:syntax</code> | Validate JavaScript syntax |
| <code>npm run check:structure</code> | Validate project structure |
| <code>npm run check:package-size</code> | Validate npm package size and file-count budget |
| <code>npm run check:package</code> | Validate npm package contents |</p>
<p>When adding new CLI commands, register the route in <code>bin/yida.js</code>, add it to <code>lib/core/command-manifest.js</code>, regenerate the README command index with <code>npm run docs:commands</code>, and keep agent skills in <code>yida-skills/</code> aligned when the workflow changes. <code>npm run check:commands</code> fails if the router, manifest, or README drift apart.</p>
<h2>Security and Configuration</h2>
<ul><li>OAuth token sessions are cached locally and should never be hard-coded into source files.</li>
<li>Private deployment environments are managed through <code>lib/core/env-manager.js</code>.</li>
<li>Yida API requests should use the active environment base URL and Bearer token auth.</li>
<li>For multi-organization accounts, prefer explicit <code>--corp-id</code> values in non-interactive automation.</li></ul>
<h2>Community</h2>
<p>Scan the QR code to join the OpenYida DingTalk user group for updates and support.</p>
<p>!<a href="https://img.alicdn.com/imgextra/i4/O1CN01RAlxmO1qF1cxRguyj_!!6000000005465-2-tps-350-356.png" target="_blank" rel="noopener">Join OpenYida Community</a></p>
<h2>Contributors</h2>
<p>Thanks to everyone who has contributed to OpenYida. Read the <a href="./CONTRIBUTING.md" target="_blank" rel="noopener">Contributing Guide</a> to get involved.</p>
<p>Latest contributors: <a href="https://github.com/DDlixin1" target="_blank" rel="noopener">DDlixin1</a>, <a href="https://github.com/fcloud" target="_blank" rel="noopener">fcloud</a>.</p>
<p><!-- openyida-contributors:start --></p>
<p><p>
<a href="https://github.com/yize"><img src="https://github.com/yize.png?size=48" width="48" height="48" alt="九神" title="</p>
<p>... <em>(README truncated for length)</em></p>
</article>
<!-- Article Completion Section -->
<div class="reader-footer mt-5 pt-5">
<div class="reader-completion-box rounded-3 p-4 text-center">
<div class="reader-completion-icon mb-3">
<i class="fas fa-check-circle"></i>
</div>
<p class="reader-completion-text fw-semibold mb-1" style="font-size: 1rem;">You finished the article!</p>
<p class="reader-completion-subtext small mb-4">Want to go deeper or explore more stories?</p>
<div class="d-flex justify-content-center gap-3 flex-wrap">
<a href="https://github.com/openyida/openyida" target="_blank" rel="noopener noreferrer" class="btn btn-primary-custom btn-sm rounded-pill px-4">
<i class="fas fa-external-link-alt me-2"></i>Full Article on GitHub Trending
</a>
<a href="https://neshdevtech.com/news" class="reader-back-btn btn btn-sm rounded-pill px-4">
<i class="fas fa-newspaper me-2"></i>More Tech News
</a>
</div>
</div>
</div>
<!-- Internal Linking CTA -->
</div>
</div>
</div>
<!-- Sidebar (desktop only) -->
<div class="col-lg-4 col-xl-3 d-none d-lg-block">
<div class="sticky-top" style="top: 80px;">
<!-- Mini Controller Widget -->
<div class="card border-0 shadow-sm mb-4 bg-surface">
<div class="card-body p-4">
<h6 class="fw-bold mb-3"><i class="fas fa-glasses me-2 text-primary-custom"></i>Reading Mode</h6>
<p class="text-secondary-custom small mb-4">Adjust typography and theme to your preference.</p>
<div class="mb-3">
<label class="text-muted-custom small d-block mb-2">Typography</label>
<div class="d-flex gap-2">
<button class="btn btn-light btn-sm flex-grow-1 border-custom" id="sidebar-font-serif">Serif</button>
<button class="btn btn-light btn-sm flex-grow-1 border-custom" id="sidebar-font-sans">Sans</button>
</div>
</div>
<div class="mb-4">
<label class="text-muted-custom small d-block mb-2">Text Scale</label>
<div class="d-flex gap-2">
<button class="btn btn-light btn-sm flex-grow-1 border-custom" id="sidebar-size-dec"><i class="fas fa-minus small"></i></button>
<button class="btn btn-light btn-sm flex-grow-1 border-custom" id="sidebar-size-inc"><i class="fas fa-plus small"></i></button>
</div>
</div>
<div class="border-top border-light-custom pt-3">
<a href="https://github.com/openyida/openyida" target="_blank" rel="noopener noreferrer" class="btn btn-outline-primary btn-sm w-100 rounded-pill">
View Original <i class="fas fa-external-link-alt ms-1"></i>
</a>
</div>
</div>
</div>
<!-- Sidebar Related News -->
<div class="card border-0 shadow-sm bg-surface">
<div class="card-header bg-transparent border-0 pt-4 pb-0 px-4">
<h5 class="card-title fw-bold mb-0" style="font-size: 1.05rem;">
<i class="fas fa-newspaper me-2 text-primary-custom"></i>Related Stories
</h5>
</div>
<div class="card-body p-0">
<div class="list-group list-group-flush rounded-0 bg-transparent">
<a href="https://neshdevtech.com/news/instagrams-head-says-engagement-falls-by-half-without-the-algorithm-gwsZg"
class="list-group-item list-group-item-action border-0 px-4 py-3 bg-transparent border-bottom border-light-custom hover-bg-light">
<h6 class="mb-1 fw-semibold text-truncate-2" style="font-size: 0.875rem; line-height: 1.4;">
Instagram's head says engagement falls by half without the algorithm
</h6>
<div class="d-flex align-items-center justify-content-between text-muted-custom mt-1" style="font-size: 0.72rem;">
<span>Hacker News</span>
<span>1 hour ago</span>
</div>
</a>
<a href="https://neshdevtech.com/news/down-is-kind-slow-is-fatal-circuit-breakers-and-the-three-links-around-them-lRFo4"
class="list-group-item list-group-item-action border-0 px-4 py-3 bg-transparent border-bottom border-light-custom hover-bg-light">
<h6 class="mb-1 fw-semibold text-truncate-2" style="font-size: 0.875rem; line-height: 1.4;">
Down Is Kind, Slow Is Fatal: Circuit Breakers and the Three Links Around Them
</h6>
<div class="d-flex align-items-center justify-content-between text-muted-custom mt-1" style="font-size: 0.72rem;">
<span>Dev.to</span>
<span>19 hours ago</span>
</div>
</a>
<a href="https://neshdevtech.com/news/my-oss-projects-anglesharp-B9E8a"
class="list-group-item list-group-item-action border-0 px-4 py-3 bg-transparent border-bottom border-light-custom hover-bg-light">
<h6 class="mb-1 fw-semibold text-truncate-2" style="font-size: 0.875rem; line-height: 1.4;">
My OSS Projects: AngleSharp
</h6>
<div class="d-flex align-items-center justify-content-between text-muted-custom mt-1" style="font-size: 0.72rem;">
<span>Dev.to</span>
<span>2 days ago</span>
</div>
</a>
<a href="https://neshdevtech.com/news/would-you-choose-a-library-because-ai-writes-it-better-AlXJc"
class="list-group-item list-group-item-action border-0 px-4 py-3 bg-transparent border-bottom border-light-custom hover-bg-light">
<h6 class="mb-1 fw-semibold text-truncate-2" style="font-size: 0.875rem; line-height: 1.4;">
Would You Choose a Library Because AI Writes It Better?
</h6>
<div class="d-flex align-items-center justify-content-between text-muted-custom mt-1" style="font-size: 0.72rem;">
<span>Dev.to</span>
<span>2 days ago</span>
</div>
</a>
<a href="https://neshdevtech.com/news/what-happens-when-you-type-a-url-answer-it-with-three-interactive-simulators-cTBEF"
class="list-group-item list-group-item-action border-0 px-4 py-3 bg-transparent border-bottom border-light-custom hover-bg-light">
<h6 class="mb-1 fw-semibold text-truncate-2" style="font-size: 0.875rem; line-height: 1.4;">
What Happens When You Type a URL: Answer It With Three Interactive Simulators
</h6>
<div class="d-flex align-items-center justify-content-between text-muted-custom mt-1" style="font-size: 0.72rem;">
<span>Dev.to</span>
<span>2 days ago</span>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Mobile: Related News horizontal scroll strip -->
<div class="d-block d-lg-none mt-4">
<h6 class="fw-bold mb-3 px-1">
<i class="fas fa-newspaper me-2 text-primary-custom"></i>Related Stories
</h6>
<div class="related-scroll-strip">
<a href="https://neshdevtech.com/news/instagrams-head-says-engagement-falls-by-half-without-the-algorithm-gwsZg" class="related-scroll-card">
<p class="related-scroll-title">Instagram's head says engagement falls by half without the algorithm</p>
<div class="related-scroll-meta">
<span>Hacker News</span>
<span>1 hour ago</span>
</div>
</a>
<a href="https://neshdevtech.com/news/down-is-kind-slow-is-fatal-circuit-breakers-and-the-three-links-around-them-lRFo4" class="related-scroll-card">
<p class="related-scroll-title">Down Is Kind, Slow Is Fatal: Circuit Breakers and the Three Links Arou...</p>
<div class="related-scroll-meta">
<span>Dev.to</span>
<span>19 hours ago</span>
</div>
</a>
<a href="https://neshdevtech.com/news/my-oss-projects-anglesharp-B9E8a" class="related-scroll-card">
<p class="related-scroll-title">My OSS Projects: AngleSharp</p>
<div class="related-scroll-meta">
<span>Dev.to</span>
<span>2 days ago</span>
</div>
</a>
<a href="https://neshdevtech.com/news/would-you-choose-a-library-because-ai-writes-it-better-AlXJc" class="related-scroll-card">
<p class="related-scroll-title">Would You Choose a Library Because AI Writes It Better?</p>
<div class="related-scroll-meta">
<span>Dev.to</span>
<span>2 days ago</span>
</div>
</a>
<a href="https://neshdevtech.com/news/what-happens-when-you-type-a-url-answer-it-with-three-interactive-simulators-cTBEF" class="related-scroll-card">
<p class="related-scroll-title">What Happens When You Type a URL: Answer It With Three Interactive Sim...</p>
<div class="related-scroll-meta">
<span>Dev.to</span>
<span>2 days ago</span>
</div>
</a>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<!-- Footer -->
<footer class="py-5 mt-5 position-relative overflow-hidden" style="background: var(--surface); border-top: 1px solid var(--border); box-shadow: var(--shadow-lg);">
<!-- Decorative subtle background gradients -->
<div class="position-absolute" style="top: -200px; right: -200px; width: 400px; height: 400px; background: rgba(var(--primary-rgb), 0.03); filter: blur(100px); border-radius: 50%; pointer-events: none;"></div>
<div class="position-absolute" style="bottom: -200px; left: -200px; width: 400px; height: 400px; background: rgba(var(--accent-rgb), 0.03); filter: blur(100px); border-radius: 50%; pointer-events: none;"></div>
<div class="container position-relative z-3">
<div class="row g-4">
<!-- Column 1: Brand & About -->
<div class="col-lg-4 col-md-6">
<div class="d-flex align-items-center mb-3">
<span class="brand-mark me-2" style="width: 42px; height: 42px;" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
</span>
<span class="fs-4 fw-extrabold text-primary-custom" style="letter-spacing: -0.05em; font-family: 'JetBrains Mono', monospace;">NeshDevTech</span>
</div>
<p class="text-secondary-custom mb-4 pe-lg-4" style="font-size: 0.95rem; line-height: 1.6;">NeshDevTech is a professional technology firm passionate about creating innovative, high-performance web and mobile solutions.</p>
<div class="d-flex gap-2">
</div>
</div>
<!-- Column 2: Navigation Links -->
<div class="col-lg-2 col-md-6 col-6">
<h6 class="text-primary-custom fw-bold text-uppercase mb-3" style="font-size: 0.85rem; letter-spacing: 0.05em;">Quick Navigation</h6>
<ul class="list-unstyled mb-0">
<li class="mb-2"><a href="https://neshdevtech.com" class="footer-link text-secondary-custom text-decoration-none d-inline-block">Home</a></li> <li class="mb-2"><a href="https://neshdevtech.com/projects" class="footer-link text-secondary-custom text-decoration-none d-inline-block">Projects</a></li> <li class="mb-2"><a href="https://neshdevtech.com/blog" class="footer-link text-secondary-custom text-decoration-none d-inline-block">Tech Blog</a></li> <li class="mb-2"><a href="https://neshdevtech.com/pricing" class="footer-link text-secondary-custom text-decoration-none d-inline-block">Get Quote</a></li> <li class="mb-2"><a href="https://neshdevtech.com/contact" class="footer-link text-secondary-custom text-decoration-none d-inline-block">Contact Me</a></li> </ul>
</div>
<!-- Column 3: Tech Stack & Services -->
<div class="col-lg-3 col-md-6 col-6">
<h6 class="text-primary-custom fw-bold text-uppercase mb-3" style="font-size: 0.85rem; letter-spacing: 0.05em;">Core Services</h6>
<ul class="list-unstyled mb-0">
<li class="text-secondary-custom mb-2 small"><i class="bi bi-rocket-takeoff text-primary-custom me-2"></i>Custom Laravel Apps</li>
<li class="text-secondary-custom mb-2 small"><i class="bi bi-laptop text-primary-custom me-2"></i>SPA (React & Vue.js)</li>
<li class="text-secondary-custom mb-2 small"><i class="bi bi-phone-vibrate text-primary-custom me-2"></i>Flutter Mobile Apps</li>
<li class="text-secondary-custom mb-2 small"><i class="bi bi-search text-primary-custom me-2"></i>SEO & Performance Opt</li>
</ul>
</div>
<!-- Column 4: Contact & Availability -->
<div class="col-lg-3 col-md-6">
<h6 class="text-primary-custom fw-bold text-uppercase mb-3" style="font-size: 0.85rem; letter-spacing: 0.05em;">Get in Touch</h6>
<ul class="list-unstyled mb-3">
<li class="text-secondary-custom mb-2 small d-flex align-items-center">
<i class="bi bi-geo-alt text-primary-custom me-2 fs-6"></i>Nairobi, Kenya
</li>
<li class="text-secondary-custom mb-2 small d-flex align-items-center">
<i class="bi bi-envelope-at text-primary-custom me-2 fs-6"></i>
<a href="mailto:info@neshdevtech.com" class="text-secondary-custom text-decoration-none footer-link">info@neshdevtech.com</a>
</li>
</ul>
<div class="bg-primary-custom-light border border-primary-custom border-opacity-10 p-3 rounded-3" style="border-radius: 12px !important;">
<small class="d-block fw-semibold text-primary-custom mb-1"><i class="bi bi-patch-check-fill me-1"></i>Available for Projects</small>
<p class="mb-0 text-secondary-custom small" style="font-size: 0.8rem; line-height: 1.4;">Need a high-performing system? Let's discuss your project.</p>
</div>
</div>
</div>
<hr style="border-color: var(--border); opacity: 0.8; margin: 2.5rem 0 2rem;">
<div class="row align-items-center">
<div class="col-md-6 text-center text-md-start mb-2 mb-md-0">
<p class="mb-0 text-secondary-custom small">© 2026 NeshDevTech. All rights reserved.</p>
</div>
<div class="col-md-6 text-center text-md-end">
<p class="mb-0 text-secondary-custom small">Built with <i class="bi bi-heart-fill text-danger"></i></p>
</div>
</div>
</div>
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Custom JavaScript -->
<script>
// Theme Management System
class ThemeManager {
constructor() {
this.themeToggle = document.getElementById('themeToggle');
this.themeIcon = document.getElementById('theme-icon');
this.mobileThemeToggle = document.getElementById('mobileThemeToggle');
this.mobileThemeIcon = document.getElementById('mobile-theme-icon');
this.init();
}
init() {
// Get current theme (already applied in head)
const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
// Update icons to match current theme
this.updateIcon(currentTheme);
// Listen for desktop theme toggle clicks
if (this.themeToggle) {
this.themeToggle.addEventListener('click', (e) => {
e.preventDefault();
this.toggleTheme();
});
}
// Listen for mobile theme toggle clicks
if (this.mobileThemeToggle) {
this.mobileThemeToggle.addEventListener('click', (e) => {
e.preventDefault();
this.toggleTheme();
});
}
// Listen for system theme changes
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
if (!localStorage.getItem('theme')) {
this.setTheme(e.matches ? 'dark' : 'light');
}
});
}
setTheme(theme) {
document.documentElement.setAttribute('data-theme', theme);
document.documentElement.setAttribute('data-bs-theme', theme);
if (theme === 'dark') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
localStorage.setItem('theme', theme);
this.updateThemeColor(theme);
this.updateIcon(theme);
}
updateThemeColor(theme) {
document.querySelectorAll('meta[name="theme-color"]').forEach((meta) => {
meta.setAttribute('content', theme === 'dark' ? '#1c2028' : '#e4e8f0');
});
}
toggleTheme() {
const currentTheme = document.documentElement.getAttribute('data-theme');
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
this.setTheme(newTheme);
// Close mobile menu if open
const navbarCollapse = document.querySelector('.navbar-collapse');
if (navbarCollapse && navbarCollapse.classList.contains('show') && window.innerWidth < 992) {
setTimeout(() => {
const bsCollapse = new bootstrap.Collapse(navbarCollapse, { toggle: false });
bsCollapse.hide();
}, 150);
}
}
updateIcon(theme) {
const iconClass = theme === 'dark' ? 'bi bi-sun-fill' : 'bi bi-moon-fill';
// Update desktop icon
if (this.themeIcon) {
this.themeIcon.className = iconClass;
}
// Update mobile icon
if (this.mobileThemeIcon) {
this.mobileThemeIcon.className = iconClass;
}
}
}
// Initialize theme manager when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
new ThemeManager();
// Initialize navbar live clock
(function initNavClock(){
const clockEls = Array.from(document.querySelectorAll('[data-clock]'));
if (!clockEls.length) return;
const locale = navigator.language || 'en-US';
// Detect 12/24h by locale: use resolvedOptions hourCycle when available
const dtf = new Intl.DateTimeFormat(locale, { hour: 'numeric' });
const uses12h = (dtf.resolvedOptions().hour12 === true);
const fmt = new Intl.DateTimeFormat(locale, {
hour: '2-digit', minute: '2-digit', second: '2-digit',
hour12: uses12h
});
const update = () => {
const now = new Date();
const text = fmt.format(now);
clockEls.forEach(el => { el.textContent = text; });
};
update();
setInterval(update, 1000);
})();
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// Navbar background on scroll
window.addEventListener('scroll', () => {
const navbar = document.querySelector('.navbar');
if (window.scrollY > 50) {
navbar.style.backdropFilter = 'blur(20px)';
navbar.style.backgroundColor = 'rgba(var(--background-rgb), 0.8)';
} else {
navbar.style.backdropFilter = 'blur(10px)';
navbar.style.backgroundColor = 'var(--background)';
}
});
// Add fade-in animation to elements when they come into view
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-fade-in-up');
}
});
}, observerOptions);
// Observe elements with animation class
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.animate-on-scroll').forEach(el => {
observer.observe(el);
});
});
// Enhanced mobile menu functionality
document.addEventListener('DOMContentLoaded', function() {
const navbarToggler = document.querySelector('.navbar-toggler');
const navbarCollapse = document.querySelector('.navbar-collapse');
const navLinks = document.querySelectorAll('.navbar-nav .nav-link');
const socialLinks = document.querySelectorAll('.navbar-nav .d-flex a');
let isToggling = false; // Prevent rapid clicking
// Enhanced menu close function
function closeMenu() {
if (navbarCollapse && navbarCollapse.classList.contains('show')) {
// Use Bootstrap's collapse API for smooth transition
const bsCollapse = new bootstrap.Collapse(navbarCollapse, {
toggle: false
});
bsCollapse.hide();
}
// Reset hamburger animation and aria-expanded
if (navbarToggler) {
navbarToggler.classList.remove('active');
navbarToggler.setAttribute('aria-expanded', 'false');
}
}
// Enhanced hamburger toggle functionality
if (navbarToggler) {
navbarToggler.addEventListener('click', function(e) {
e.preventDefault();
// Prevent rapid clicking
if (isToggling) return;
isToggling = true;
const isMenuOpen = navbarCollapse.classList.contains('show');
if (isMenuOpen) {
closeMenu();
} else {
// Open menu
const bsCollapse = new bootstrap.Collapse(navbarCollapse, {
toggle: false
});
bsCollapse.show();
navbarToggler.setAttribute('aria-expanded', 'true');
}
// Reset toggle flag after animation
setTimeout(() => {
isToggling = false;
}, 350);
});
}
// Close menu when clicking outside
document.addEventListener('click', function(event) {
const isClickInsideNav = navbarCollapse.contains(event.target);
const isToggler = navbarToggler.contains(event.target);
const isMenuOpen = navbarCollapse.classList.contains('show');
if (!isClickInsideNav && !isToggler && isMenuOpen && window.innerWidth < 992) {
closeMenu();
}
});
// Close menu when clicking on navigation links (mobile)
navLinks.forEach(function(link) {
link.addEventListener('click', function(e) {
const isMenuOpen = navbarCollapse.classList.contains('show');
if (isMenuOpen && window.innerWidth < 992 && !this.classList.contains('dropdown-toggle')) {
// Add a small delay to let the link navigation start
setTimeout(() => {
closeMenu();
}, 100);
}
});
});
// Close menu when clicking on social links (mobile)
socialLinks.forEach(function(link) {
link.addEventListener('click', function() {
if (window.innerWidth < 992) {
setTimeout(() => {
closeMenu();
}, 100);
}
});
});
// Escape key closes menu
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape' && window.innerWidth < 992) {
closeMenu();
}
});
// Handle window resize to close menu when switching to desktop
window.addEventListener('resize', function() {
if (window.innerWidth >= 992) {
closeMenu();
}
});
// Theme toggle functionality is handled by ThemeManager class
// No separate event listener needed here
// Prevent menu items from being too small on touch devices
if ('ontouchstart' in window) {
navLinks.forEach(function(link) {
link.style.minHeight = '44px';
link.style.display = 'flex';
link.style.alignItems = 'center';
});
}
// Add smooth scrolling for anchor links within pages
navLinks.forEach(function(link) {
const href = link.getAttribute('href');
if (href && href.startsWith('#')) {
link.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(href);
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
closeMenu();
});
}
});
});
</script>
<script>
// Sticky navbar scroll enhancement (desktop only)
(function () {
const navbar = document.querySelector('.navbar');
if (!navbar) return;
let ticking = false;
const SCROLL_THRESHOLD = 20; // px
function updateNavbar() {
if (window.innerWidth >= 992) {
if (window.scrollY > SCROLL_THRESHOLD) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
} else {
// Always remove on mobile so it doesn't affect mobile look
navbar.classList.remove('scrolled');
}
ticking = false;
}
window.addEventListener('scroll', function () {
if (!ticking) {
requestAnimationFrame(updateNavbar);
ticking = true;
}
}, { passive: true });
window.addEventListener('resize', updateNavbar, { passive: true });
// Run once on page load in case page is already scrolled (e.g. back-navigation)
updateNavbar();
})();
</script>
<script>
// Lightweight toast badge notifications
(function(){
function ensureContainer(){
let c = document.getElementById('toast-badge-container');
if(!c){
c = document.createElement('div');
c.id = 'toast-badge-container';
c.setAttribute('aria-live','polite');
c.setAttribute('aria-atomic','true');
document.body.appendChild(c);
}
return c;
}
function iconFor(type){
switch(type){
case 'success': return '<i class="bi bi-check-circle"></i>';
case 'warning': return '<i class="bi bi-exclamation-triangle"></i>';
case 'error': return '<i class="bi bi-x-circle"></i>';
default: return '<i class="bi bi-info-circle"></i>';
}
}
window.notifyBadge = function(message, opts={}){
const { type = 'success', timeout = 2500 } = opts;
const container = ensureContainer();
const el = document.createElement('div');
el.className = 'toast-badge ' + type;
el.setAttribute('role','status');
el.innerHTML = '<span class="icon">'+iconFor(type)+'</span><span>'+message+'</span>';
container.appendChild(el);
requestAnimationFrame(()=>{
el.classList.add('show');
});
const remove = () => {
el.classList.remove('show');
setTimeout(()=> el.remove(), 200);
};
setTimeout(remove, timeout);
return { remove };
};
// Global copy helper used by inline buttons
window.copyToClipboard = function(url){
try {
navigator.clipboard.writeText(url).then(()=>{
// Update the clicked button, if available
let btn = document.activeElement && document.activeElement.tagName === 'BUTTON'
? document.activeElement
: (window.event && window.event.target && window.event.target.closest ? window.event.target.closest('button') : null);
if (btn){
const original = btn.innerHTML;
btn.innerHTML = '<i class="fas fa-check me-1"></i> Copied!';
btn.classList.remove('btn-outline-secondary');
btn.classList.add('btn-success');
setTimeout(()=>{
btn.innerHTML = original;
btn.classList.remove('btn-success');
btn.classList.add('btn-outline-secondary');
}, 2000);
}
notifyBadge('Link copied to clipboard', { type: 'success' });
}).catch((err)=>{
console.error('Clipboard error:', err);
notifyBadge('Could not copy link', { type: 'error' });
});
} catch (e) {
console.error(e);
notifyBadge('Copy not supported', { type: 'error' });
}
};
})();
</script>
<a href="https://wa.me/254768033943?text=Hi%2C+I+visited+your+website+and+would+like+to+inquire+about+your+services."
class="whatsapp-btn-float"
target="_blank"
rel="noopener noreferrer"
aria-label="Chat on WhatsApp">
<i class="fab fa-whatsapp"></i>
<span class="whatsapp-tooltip">Chat with me</span>
</a>
<style>
.whatsapp-btn-float {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 1050;
display: flex;
align-items: center;
justify-content: center;
background-color: #25d366;
color: #fff !important;
width: 60px;
height: 60px;
border-radius: 50%;
box-shadow: 0 4px 16px rgba(37, 211, 102, 0.45);
text-decoration: none;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.whatsapp-btn-float i {
font-size: 32px;
transition: transform 0.3s ease;
}
.whatsapp-btn-float:hover {
background-color: #128c7e;
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(18, 140, 126, 0.6);
}
.whatsapp-btn-float:hover i {
transform: rotate(10deg);
}
/* Pulsing ring animation */
.whatsapp-btn-float::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #25d366;
opacity: 0.7;
z-index: -1;
animation: whatsapp-pulse 2s infinite;
}
@keyframes whatsapp-pulse {
0% {
transform: scale(1);
opacity: 0.7;
}
100% {
transform: scale(1.6);
opacity: 0;
}
}
/* Tooltip style utilizing site-wide theme colors */
.whatsapp-btn-float .whatsapp-tooltip {
position: absolute;
right: 76px;
background-color: var(--surface);
color: var(--text-primary);
border: 1px solid var(--border);
padding: 8px 14px;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transform: translateX(10px);
transition: all 0.3s ease;
box-shadow: var(--shadow);
pointer-events: none;
}
.whatsapp-btn-float:hover .whatsapp-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
/* Responsive Design */
@media (max-width: 768px) {
.whatsapp-btn-float {
bottom: 16px;
right: 16px;
width: 50px;
height: 50px;
}
.whatsapp-btn-float i {
font-size: 26px;
}
.whatsapp-btn-float .whatsapp-tooltip {
display: none; /* Hide tooltip on small screens to prevent overlap issues */
}
}
</style>
<!-- Mobile More Menu (Offcanvas Bottom Sheet) - Auth actions only -->
<style>
/* ══════════════════════════════════════════════════════════════
NEUMORPHISM REVAMP (front-end only)
Soft-extruded UI: same-tone surfaces with dual light/dark
shadows. This block sits at the end of the body so it layers
over every page's own styles without touching page markup.
══════════════════════════════════════════════════════════════ */
/* ── Buttons: extruded, press-in on click ─────────────────────── */
.btn {
box-shadow: var(--shadow) !important;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.btn:hover {
transform: translateY(-2px) !important;
box-shadow: var(--shadow-md) !important;
}
.btn:active:not(.btn-link), .btn.show {
transform: translateY(1px) scale(0.99) !important;
box-shadow: var(--shadow-inset) !important;
}
.btn-primary-custom, .btn-primary, .btn-success {
background: var(--primary-color) !important;
border-color: var(--primary-color) !important;
color: #fff !important;
box-shadow: var(--shadow) !important;
}
.btn-primary-custom:hover, .btn-primary:hover, .btn-success:hover {
background: var(--primary-dark) !important;
border-color: var(--primary-dark) !important;
color: #fff !important;
box-shadow: var(--shadow-md) !important;
}
.btn-outline-primary-custom, .btn-outline-primary, .btn-outline-success,
.btn-outline-secondary, .btn-outline-danger, .btn-outline-dark, .btn-light {
background-color: var(--surface) !important;
border-color: transparent !important;
color: var(--text-primary) !important;
box-shadow: var(--shadow) !important;
}
.btn-outline-primary-custom:hover, .btn-outline-primary:hover {
background-color: var(--primary-color) !important;
border-color: var(--primary-color) !important;
color: #fff !important;
box-shadow: var(--shadow-md) !important;
}
.btn-outline-success:hover {
background-color: var(--primary-color) !important;
border-color: var(--primary-color) !important;
color: #fff !important;
box-shadow: var(--shadow-md) !important;
}
.btn-outline-secondary:hover {
background-color: var(--text-secondary) !important;
border-color: var(--text-secondary) !important;
color: #fff !important;
box-shadow: var(--shadow-md) !important;
}
.btn-outline-danger:hover {
background-color: #ef4444 !important;
border-color: #ef4444 !important;
color: #fff !important;
box-shadow: var(--shadow-md) !important;
}
.btn-outline-dark:hover, .btn-light:hover {
background-color: var(--text-secondary) !important;
border-color: var(--text-secondary) !important;
color: var(--background) !important;
box-shadow: var(--shadow-md) !important;
}
.btn-dark {
background-color: var(--text-primary) !important;
border-color: var(--text-primary) !important;
color: var(--background) !important;
box-shadow: var(--shadow) !important;
}
/* ── Forms: pressed-in surfaces ────────────────────────────────── */
.form-control, .form-select {
background-color: var(--surface) !important;
border: 1px solid transparent !important;
color: var(--text-primary) !important;
border-radius: 14px !important;
box-shadow: var(--shadow-inset) !important;
transition: box-shadow 0.3s ease, background-color 0.25s ease !important;
}
.form-control:focus, .form-select:focus {
background-color: var(--surface) !important;
border-color: transparent !important;
color: var(--text-primary) !important;
box-shadow: var(--shadow-inset), 0 0 0 4px rgba(var(--primary-rgb), 0.15) !important;
}
.form-control::placeholder {
color: var(--text-muted) !important;
}
.input-group-text {
background-color: var(--surface-alt) !important;
border: 1px solid transparent !important;
color: var(--text-secondary) !important;
box-shadow: var(--shadow-inset-sm) !important;
}
/* ── Navbar: floating neumorphic pill (tablet & desktop) ──────── */
.navbar {
background-color: rgba(var(--background-rgb), 0.9) !important;
border-bottom: 1px solid transparent !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
box-shadow: var(--shadow-md) !important;
}
[data-theme="dark"] .navbar {
box-shadow: var(--shadow-md) !important;
}
@media (min-width: 768px) {
.navbar {
top: 14px !important;
left: 18px !important;
right: 18px !important;
width: auto !important;
border-radius: 20px !important;
padding: 0.6rem 0 !important;
box-shadow: var(--shadow-lg) !important;
}
[data-theme="dark"] .navbar {
box-shadow: var(--shadow-lg) !important;
}
.navbar.scrolled {
background-color: rgba(var(--background-rgb), 0.95) !important;
border-bottom-color: transparent !important;
padding: 0.5rem 0 !important;
box-shadow: var(--shadow-lg) !important;
}
[data-theme="dark"] .navbar.scrolled {
background-color: rgba(28, 32, 40, 0.95) !important;
box-shadow: var(--shadow-lg) !important;
}
body {
padding-top: 96px !important;
}
.reading-progress-container {
top: 88px !important;
}
}
/* ── Tablet refinements (768px - 991.98px) ────────────────────── */
@media (min-width: 768px) and (max-width: 991.98px) {
/* Hamburger dropdown panel blends with the floating pill */
.navbar-collapse {
border-radius: 20px !important;
border-color: transparent !important;
}
body {
padding-bottom: 0 !important;
}
.whatsapp-btn-float {
bottom: 24px !important;
}
/* Hero: tighten the inline 80px top padding that assumed a
full-height bar, so tablets don't get excessive empty space */
.hero-section-bg {
padding-top: 40px !important;
}
}
/* ── Neumorphic brand icon mark ────────────────────────────────── */
.brand-mark {
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: 13px;
background-color: var(--surface) !important;
color: var(--primary-color) !important;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow) !important;
transition: box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.brand-mark svg {
width: 21px;
height: 21px;
}
a:hover .brand-mark {
box-shadow: var(--shadow-inset-sm) !important;
transform: translateY(1px);
}
.mobile-logo .brand-mark {
width: 34px;
height: 34px;
border-radius: 11px;
}
.mobile-logo .brand-mark svg {
width: 17px;
height: 17px;
}
/* ── Uploaded brand logo image ─────────────────────────────────── */
.brand-img {
height: 38px;
width: auto;
max-width: 160px;
object-fit: contain;
flex-shrink: 0;
}
.brand-img-sm {
height: 28px;
max-width: 120px;
}
.brand-img-footer {
height: 44px;
max-width: 180px;
}
/* ── Mobile bars: floating neumorphic pills (phones) ──────────── */
@media (max-width: 767.98px) {
.mobile-top-bar {
top: 8px !important;
left: 12px !important;
right: 12px !important;
height: 52px !important;
border-radius: 16px !important;
border-bottom: none !important;
background-color: rgba(var(--surface-rgb), 0.92) !important;
box-shadow: var(--shadow-md) !important;
}
.mobile-bottom-bar {
left: 12px !important;
right: 12px !important;
bottom: 12px !important;
height: 58px !important;
border-radius: 18px !important;
border-top: none !important;
background-color: rgba(var(--surface-rgb), 0.92) !important;
box-shadow: var(--shadow-md) !important;
}
body {
padding-top: 74px !important;
padding-bottom: 86px !important;
}
.whatsapp-btn-float {
bottom: 88px !important;
}
.reading-progress-container {
top: 70px !important;
}
}
/* ── Nav pill widgets: pressed-in ──────────────────────────────── */
.theme-toggle, .mobile-theme-toggle, .nav-clock {
background-color: var(--surface) !important;
border-color: transparent !important;
box-shadow: var(--shadow-inset-sm) !important;
}
/* ── Icon chips, markers & circles: extruded ───────────────────── */
.icon-wrap, .icon-wrapper, .expertise-card-icon, .timeline-marker,
.mobile-more-icon-wrapper, .social-circle, .value-icon, .skill-icon-box {
box-shadow: var(--shadow) !important;
border-color: transparent !important;
}
/* ── Panels: extruded ──────────────────────────────────────────── */
.accordion-item {
border-color: transparent !important;
box-shadow: var(--shadow) !important;
}
.timeline-content {
background: var(--surface) !important;
border-radius: 12px !important;
padding: 1rem 1.25rem !important;
box-shadow: var(--shadow) !important;
}
.feature-item {
background: var(--surface) !important;
border-color: transparent !important;
box-shadow: var(--shadow) !important;
}
.feature-item:hover {
transform: translateY(-2px) !important;
box-shadow: var(--shadow-md) !important;
}
.progress {
background-color: var(--surface-alt) !important;
box-shadow: var(--shadow-inset-sm) !important;
}
/* Card hover: consistent soft neu shadow */
.card-hover:hover, .project-card:hover, .blog-card:hover, .post-card:hover,
.news-card:hover, .testimonial-card:hover, .hover-lift:hover, .stats-item:hover {
box-shadow: var(--shadow-lg) !important;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const readerCard = document.getElementById('reader-card');
if (!readerCard) return;
// Settings Key constants
const THEME_KEY = 'reader_mode_theme';
const FONT_KEY = 'reader_mode_font';
const SIZE_KEY = 'reader_mode_size';
// Available Options
const themes = ['light', 'sepia', 'dark', 'oled'];
const fonts = ['serif', 'sans'];
const sizes = ['xs', 'sm', 'md', 'lg', 'xl'];
// Default Configs
const siteTheme = document.documentElement.getAttribute('data-theme') || 'light';
const defaultTheme = siteTheme === 'dark' ? 'dark' : 'light';
let currentTheme = localStorage.getItem(THEME_KEY) || defaultTheme;
let currentFont = localStorage.getItem(FONT_KEY) || 'serif';
let currentSize = localStorage.getItem(SIZE_KEY) || 'md';
// Apply initial config
applySettings();
// Register Action Listeners (Toolbar)
document.getElementById('btn-font-serif').addEventListener('click', () => setFont('serif'));
document.getElementById('btn-font-sans').addEventListener('click', () => setFont('sans'));
document.getElementById('btn-size-decrease').addEventListener('click', () => adjustSize(-1));
document.getElementById('btn-size-increase').addEventListener('click', () => adjustSize(1));
document.getElementById('theme-light').addEventListener('click', () => setTheme('light'));
document.getElementById('theme-sepia').addEventListener('click', () => setTheme('sepia'));
document.getElementById('theme-dark').addEventListener('click', () => setTheme('dark'));
document.getElementById('theme-oled').addEventListener('click', () => setTheme('oled'));
// Register Action Listeners (Sidebar widgets, if present)
const sidebarSerif = document.getElementById('sidebar-font-serif');
const sidebarSans = document.getElementById('sidebar-font-sans');
const sidebarSizeDec = document.getElementById('sidebar-size-dec');
const sidebarSizeInc = document.getElementById('sidebar-size-inc');
if (sidebarSerif) sidebarSerif.addEventListener('click', () => setFont('serif'));
if (sidebarSans) sidebarSans.addEventListener('click', () => setFont('sans'));
if (sidebarSizeDec) sidebarSizeDec.addEventListener('click', () => adjustSize(-1));
if (sidebarSizeInc) sidebarSizeInc.addEventListener('click', () => adjustSize(1));
// Action Core Functions
function setTheme(theme) {
currentTheme = theme;
localStorage.setItem(THEME_KEY, theme);
applySettings();
}
function setFont(font) {
currentFont = font;
localStorage.setItem(FONT_KEY, font);
applySettings();
}
function adjustSize(delta) {
let index = sizes.indexOf(currentSize);
index = Math.max(0, Math.min(sizes.length - 1, index + delta));
currentSize = sizes[index];
localStorage.setItem(SIZE_KEY, currentSize);
applySettings();
}
function applySettings() {
// 1. Reset theme classes and apply selected
themes.forEach(t => readerCard.classList.remove('reader-theme-' + t));
readerCard.classList.add('reader-theme-' + currentTheme);
// Update Theme circles highlight
themes.forEach(t => {
const circle = document.getElementById('theme-' + t);
if (circle) {
if (t === currentTheme) {
circle.classList.add('active');
} else {
circle.classList.remove('active');
}
}
});
// 2. Reset Font classes and apply selected
fonts.forEach(f => readerCard.classList.remove('reader-font-' + f));
readerCard.classList.add('reader-font-' + currentFont);
// Highlight Font buttons
const serifBtns = [document.getElementById('btn-font-serif'), document.getElementById('sidebar-font-serif')];
const sansBtns = [document.getElementById('btn-font-sans'), document.getElementById('sidebar-font-sans')];
serifBtns.forEach(btn => {
if (btn) {
if (currentFont === 'serif') {
btn.classList.add('btn-primary-custom');
btn.classList.remove('btn-light');
} else {
btn.classList.add('btn-light');
btn.classList.remove('btn-primary-custom');
}
}
});
sansBtns.forEach(btn => {
if (btn) {
if (currentFont === 'sans') {
btn.classList.add('btn-primary-custom');
btn.classList.remove('btn-light');
} else {
btn.classList.add('btn-light');
btn.classList.remove('btn-primary-custom');
}
}
});
// 3. Reset Sizing classes and apply selected
sizes.forEach(s => readerCard.classList.remove('reader-size-' + s));
readerCard.classList.add('reader-size-' + currentSize);
}
// Reading Scroll progress calculation
const progressBar = document.getElementById('reading-progress-bar');
window.addEventListener('scroll', () => {
const documentHeight = document.documentElement.scrollHeight - window.innerHeight;
if (documentHeight > 0) {
const scrollProgress = (window.pageYOffset / documentHeight) * 100;
progressBar.style.width = scrollProgress + '%';
}
});
});
</script>
<script>
// ══════════════════════════════════════════════════════════════
// PWA: Service Worker registration + install prompt
// ══════════════════════════════════════════════════════════════
(function () {
const PWA_VERSION = '20260805-1';
// ---- Service worker ------------------------------------
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js?v=' + PWA_VERSION).then((reg) => {
// Apply updates (new deploy) on the next load without disruption
reg.addEventListener('updatefound', () => {
const newWorker = reg.installing;
if (!newWorker) return;
newWorker.addEventListener('statechange', () => {
if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
newWorker.postMessage({ type: 'SKIP_WAITING' });
}
});
});
}).catch(() => {});
});
}
// ---- Install prompt --------------------------------------
let deferredPrompt = null;
const bannerId = 'pwa-install-banner';
const DISMISS_KEY = 'nesh-install-dismissed';
function showInstallBanner() {
if (localStorage.getItem(DISMISS_KEY) || document.getElementById(bannerId)) return;
const banner = document.createElement('div');
banner.id = bannerId;
banner.setAttribute('role', 'dialog');
banner.setAttribute('aria-label', 'Install app');
banner.innerHTML =
'<div class="pwa-install-content">' +
'<span class="pwa-install-icon">' +
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>' +
'</span>' +
'<div class="pwa-install-text">' +
'<strong>Install NeshDevTech</strong>' +
'<span>Get the app on your device</span>' +
'</div>' +
'<button type="button" class="pwa-install-btn" id="pwa-install-btn">Install</button>' +
'<button type="button" class="pwa-install-close" id="pwa-install-close" aria-label="Dismiss">×</button>' +
'</div>';
document.body.appendChild(banner);
document.getElementById('pwa-install-btn').addEventListener('click', () => {
if (!deferredPrompt) return;
deferredPrompt.prompt();
deferredPrompt.userChoice.finally(() => {
deferredPrompt = null;
hideInstallBanner();
});
});
document.getElementById('pwa-install-close').addEventListener('click', () => {
localStorage.setItem(DISMISS_KEY, '1');
hideInstallBanner();
});
requestAnimationFrame(() => banner.classList.add('show'));
}
function hideInstallBanner() {
const banner = document.getElementById(bannerId);
if (banner) {
banner.classList.remove('show');
setTimeout(() => banner.remove(), 250);
}
}
window.addEventListener('beforeinstallprompt', (e) => {
e.preventDefault();
deferredPrompt = e;
showInstallBanner();
});
window.addEventListener('appinstalled', () => {
deferredPrompt = null;
hideInstallBanner();
localStorage.setItem(DISMISS_KEY, '1');
});
})();
</script>
<style>
.pwa-install-content {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
}
#pwa-install-banner {
position: fixed;
left: 50%;
transform: translate(-50%, 20px);
bottom: 84px;
z-index: 1070;
background: var(--surface);
color: var(--text-primary);
border: 1px solid var(--border);
border-radius: 18px;
box-shadow: var(--shadow-lg);
opacity: 0;
transition: opacity .25s cubic-bezier(.16, 1, .3, 1), transform .25s cubic-bezier(.16, 1, .3, 1);
width: min(420px, calc(100vw - 32px));
}
#pwa-install-banner.show {
opacity: 1;
transform: translate(-50%, 0);
}
.pwa-install-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex: 0 0 40px;
border-radius: 12px;
background: rgba(var(--primary-rgb), 0.1);
border: 1px solid rgba(var(--primary-rgb), 0.2);
color: var(--primary-color);
}
.pwa-install-icon svg {
width: 20px;
height: 20px;
}
.pwa-install-text {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
.pwa-install-text strong {
font-size: 0.92rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pwa-install-text span {
font-size: 0.78rem;
color: var(--text-secondary);
}
.pwa-install-btn {
background: var(--primary-color);
border: none;
color: #fff;
font-weight: 600;
font-size: 0.85rem;
padding: 8px 18px;
border-radius: 9999px;
cursor: pointer;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.25);
transition: all .2s ease;
}
.pwa-install-btn:hover {
background: var(--primary-dark);
transform: translateY(-1px);
}
.pwa-install-close {
background: transparent;
border: none;
color: var(--text-muted);
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
padding: 2px 6px;
border-radius: 50%;
transition: background-color .2s ease, color .2s ease;
}
.pwa-install-close:hover {
background: var(--surface-alt);
color: var(--text-primary);
}
@media (min-width: 992px) {
#pwa-install-banner {
bottom: 24px;
}
}
</style>
</div><!-- /.page-wrapper -->
</body>
</html>
