{"html":"

\n\n

\n \n \n \n

\n NHOST\n

\n\n

\n \n \n

\n\n

nhost-js

\n The ultra-lightweight JavaScript SDK for interacting with the Nhost stack.\n

\n JS\n TS\n

\n","css":"@keyframes blink {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n }\n}\n\n@keyframes grid-move {\n 0% {\n background-position: 0 0;\n }\n 100% {\n background-position: 30px 30px;\n }\n}\n\n@keyframes float {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(-4px);\n }\n}\n\n/* Component Styles */\n.nhost-card {\n --bg-color: #0c111d;\n --card-border: #1f2937;\n --text-primary: #f3f4f6;\n --text-secondary: #9ca3af;\n --accent-color: #0052cc;\n --accent-glow: rgba(0, 82, 204, 0.35);\n --brand-gradient: linear-gradient(135deg, #0052cc, #2684ff);\n\n font-family: \"Inter\", system-ui, sans-serif;\n width: 100%;\n max-width: 400px;\n background-color: var(--bg-color);\n border: 1px solid var(--card-border);\n border-radius: 16px;\n padding: 24px;\n position: relative;\n overflow: hidden;\n box-shadow: 0 4px 24px -1px rgba(0, 0, 0, 0.2);\n transition:\n transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),\n box-shadow 0.3s ease,\n border-color 0.3s ease;\n z-index: 1;\n}\n\n.nhost-card:hover {\n transform: translateY(-4px) scale(1.01);\n box-shadow:\n 0 20px 40px -5px rgba(0, 0, 0, 0.4),\n 0 0 0 1px rgba(38, 132, 255, 0.3);\n border-color: rgba(38, 132, 255, 0.5);\n}\n\n.card-grid {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: linear-gradient(\n rgba(255, 255, 255, 0.05) 1px,\n transparent 1px\n ),\n linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);\n background-size: 30px 30px;\n mask-image: linear-gradient(to bottom, black 40%, transparent 100%);\n pointer-events: none;\n z-index: -2;\n transition: opacity 0.5s ease;\n opacity: 0.5;\n}\n\n.nhost-card:hover .card-grid {\n animation: grid-move 20s linear infinite;\n opacity: 0.8;\n}\n\n.card-glow {\n position: absolute;\n top: -50px;\n right: -50px;\n width: 150px;\n height: 150px;\n background: radial-gradient(\n circle,\n var(--accent-glow) 0%,\n rgba(0, 0, 0, 0) 70%\n );\n filter: blur(40px);\n z-index: -1;\n transition: all 0.5s ease;\n}\n\n.nhost-card:hover .card-glow {\n transform: scale(1.5);\n background: radial-gradient(\n circle,\n rgba(38, 132, 255, 0.4) 0%,\n rgba(0, 0, 0, 0) 70%\n );\n}\n\n/* Header Section */\n.card-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 24px;\n}\n\n.brand-wrapper {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.logo-container {\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(255, 255, 255, 0.03);\n border-radius: 8px;\n border: 1px solid rgba(255, 255, 255, 0.1);\n transition: background 0.3s ease;\n}\n\n.nhost-logo {\n width: 24px;\n height: 24px;\n color: #fff;\n filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3));\n}\n\n.brand-text {\n font-size: 18px;\n font-weight: 700;\n letter-spacing: 0.5px;\n color: var(--text-primary);\n}\n\n/* Actions */\n.action-buttons {\n display: flex;\n gap: 8px;\n}\n\n.btn-icon {\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 8px;\n border-radius: 8px;\n color: var(--text-secondary);\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.btn-icon:hover {\n background: rgba(255, 255, 255, 0.1);\n color: #fff;\n transform: translateY(-2px);\n}\n\n.icon {\n width: 20px;\n height: 20px;\n fill: currentColor;\n}\n\n.icon.star {\n transition: color 0.2s;\n}\n\n.btn-icon:hover .icon.star {\n color: #fbbf24;\n filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.5));\n}\n\n/* Body Section */\n.card-body {\n position: relative;\n}\n\n.repo-title {\n font-family: \"JetBrains Mono\", monospace;\n font-size: 24px;\n font-weight: 500;\n color: var(--text-primary);\n margin: 0 0 12px 0;\n display: flex;\n align-items: center;\n}\n\n.blinking-cursor {\n display: inline-block;\n width: 10px;\n height: 3px;\n background-color: var(--accent-color);\n margin-left: 6px;\n animation: blink 1s step-end infinite;\n box-shadow: 0 0 8px var(--accent-color);\n}\n\n.repo-description {\n font-size: 15px;\n line-height: 1.6;\n color: var(--text-secondary);\n margin: 0 0 24px 0;\n}\n\n/* Tags */\n.tag-wrapper {\n display: flex;\n gap: 10px;\n}\n\n.badge {\n font-family: \"JetBrains Mono\", monospace;\n font-size: 12px;\n font-weight: 600;\n padding: 4px 10px;\n border-radius: 6px;\n transition: all 0.3s ease;\n cursor: default;\n position: relative;\n overflow: hidden;\n}\n\n/* JS Tag */\n.badge-js {\n background-color: rgba(247, 223, 30, 0.1);\n color: #f7df1e;\n border: 1px solid rgba(247, 223, 30, 0.2);\n}\n\n.badge-js:hover {\n background-color: rgba(247, 223, 30, 0.2);\n box-shadow: 0 0 12px rgba(247, 223, 30, 0.2);\n transform: translateY(-1px);\n}\n\n/* TS Tag */\n.badge-ts {\n background-color: rgba(49, 120, 198, 0.1);\n color: #3178c6;\n border: 1px solid rgba(49, 120, 198, 0.2);\n}\n\n.badge-ts:hover {\n background-color: rgba(49, 120, 198, 0.2);\n box-shadow: 0 0 12px rgba(49, 120, 198, 0.3);\n transform: translateY(-1px);\n}\n"}

tender-chipmunk-34

👁 实时预览

📝 源代码