f5b33104ef
Getting started: - New 15-minute Getting Started guide featuring the two most popular tracks (BLE on esp32dev-ble, RF on lilygo-rtl_433), with broker setup and a verification step - Sidebar restructured around the new-user journey; upload options numbered by ease; Gitpod upload method removed Home page: - VitePress hero with clear actions, larger hero image - How-it-works pipeline diagram shared as a component (responsive via container queries), use-case grid, bigger video tiles without the image lightbox, refreshed press coverage list, functions pills - Support section pointing to Theengs Bridge and github.com/sponsors/1technophile Upload flow: - Decision-oriented upload landing page (journey strip, method cards, comparison table) - Pre-flight checklist and driver troubleshooting on the web installer - Guided environment picker (bridge + hardware wizard) replacing the filter chips, with manifest-verified recommendations - Post-flash next-steps card linking to the portal and verification Board images: - custom_img key in environments.ini and board photos for all web-flashable environments (licenses recorded); private prod_env.ini environments excluded from boards-info.json Corrections: - RF frequency coverage stated as 433/315/868/915MHz - Removed references to the retired compatible.openmqttgateway.com site (BLE list is decoder.theengs.io), the discontinued Theengs Plug, and the private sponsor forum Claude-Session: https://claude.ai/code/session_01TYysQW8tpmt1dWWuzKhTLi Co-authored-by: Florian <1technophile@users.noreply.github.com> Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
123 lines
2.4 KiB
Vue
123 lines
2.4 KiB
Vue
<template>
|
|
<div class="omg-pipeline-wrap">
|
|
<div class="omg-pipeline">
|
|
<div class="omg-node">
|
|
<span class="omg-node-icon">🌡️</span>
|
|
<strong>Your devices</strong>
|
|
<span class="omg-node-sub">BLE · RF · IR · LoRa</span>
|
|
</div>
|
|
<span class="omg-arrow">⇄</span>
|
|
<div class="omg-node omg-node-brand">
|
|
<span class="omg-node-icon">📟</span>
|
|
<strong>OpenMQTTGateway</strong>
|
|
<span class="omg-node-sub">ESP32 / ESP8266</span>
|
|
</div>
|
|
<span class="omg-arrow">⇄</span>
|
|
<div class="omg-node">
|
|
<span class="omg-node-icon">🔀</span>
|
|
<strong>MQTT broker</strong>
|
|
<span class="omg-node-sub">Mosquitto...</span>
|
|
</div>
|
|
<span class="omg-arrow">⇄</span>
|
|
<div class="omg-node">
|
|
<span class="omg-node-icon">🏠</span>
|
|
<strong>Your controller</strong>
|
|
<span class="omg-node-sub">Home Assistant, OpenHAB...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.omg-pipeline-wrap {
|
|
container-type: inline-size;
|
|
margin: 24px 0;
|
|
}
|
|
|
|
.omg-pipeline {
|
|
display: flex;
|
|
align-items: stretch;
|
|
gap: 8px;
|
|
}
|
|
|
|
.omg-node {
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
gap: 4px;
|
|
background: var(--vp-c-bg-soft);
|
|
border: 1px solid var(--vp-c-divider);
|
|
border-radius: 12px;
|
|
padding: 20px 10px;
|
|
}
|
|
|
|
.omg-node-brand {
|
|
border-color: var(--vp-c-brand-1);
|
|
box-shadow: 0 0 0 1px var(--vp-c-brand-1);
|
|
}
|
|
|
|
.omg-node-icon {
|
|
font-size: 28px;
|
|
}
|
|
|
|
.omg-node strong {
|
|
font-size: 15px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.omg-node-sub {
|
|
color: var(--vp-c-text-2);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.omg-arrow {
|
|
align-self: center;
|
|
flex-shrink: 0;
|
|
color: var(--vp-c-brand-1);
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* Narrow containers (doc column, tablets): tighten the nodes, keep one row */
|
|
@container (max-width: 760px) {
|
|
.omg-pipeline {
|
|
gap: 6px;
|
|
}
|
|
.omg-node {
|
|
padding: 12px 6px;
|
|
}
|
|
.omg-node strong {
|
|
font-size: 13px;
|
|
}
|
|
.omg-node-sub {
|
|
font-size: 11px;
|
|
}
|
|
.omg-node-icon {
|
|
font-size: 22px;
|
|
}
|
|
.omg-arrow {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
/* Very narrow (phones): stack vertically */
|
|
@container (max-width: 480px) {
|
|
.omg-pipeline {
|
|
flex-direction: column;
|
|
}
|
|
.omg-arrow {
|
|
transform: rotate(90deg);
|
|
}
|
|
.omg-node strong {
|
|
font-size: 15px;
|
|
}
|
|
.omg-node-sub {
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
</style>
|