diff --git a/CLAUDE.md b/CLAUDE.md index b7d1cd6..4c6e05a 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -39,6 +39,7 @@ The deploy script performs: - **Color Scheme:** "blowfish" with light default appearance - **Layout:** Custom homepage layout with basic header - **Custom Assets:** Wild Cloud logo and custom CSS in `/assets/` +- Uses tailwindcss for styling ### Content Structure - **Main Pages:** Homepage, About, Get Started, Contribute diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index 2f0a191..caa87dd 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -1,4 +1,4 @@ -/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */ +/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */ /*! Blowfish | MIT License | https://github.com/nunocoracao/blowfish */ @layer properties; #zen-mode-button { @@ -421,6 +421,9 @@ body.zen-mode-enable { ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { padding-block: 0; } + ::-webkit-calendar-picker-indicator { + line-height: 1; + } :-moz-ui-invalid { box-shadow: none; } @@ -460,7 +463,7 @@ body.zen-mode-enable { padding: 0; margin: -1px; overflow: hidden; - clip: rect(0, 0, 0, 0); + clip-path: inset(50%); white-space: nowrap; border-width: 0; } @@ -491,9 +494,6 @@ body.zen-mode-enable { .top-0 { top: calc(var(--spacing) * 0); } - .top-1 { - top: calc(var(--spacing) * 1); - } .top-1\/2 { top: calc(1/2 * 100%); } @@ -515,9 +515,6 @@ body.zen-mode-enable { .left-0 { left: calc(var(--spacing) * 0); } - .left-1 { - left: calc(var(--spacing) * 1); - } .left-1\/2 { left: calc(1/2 * 100%); } @@ -720,7 +717,7 @@ body.zen-mode-enable { } :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) { border-color: var(--tw-prose-hr); - border-top-width: 1; + border-top-width: 1px; margin-top: 3em; margin-bottom: 3em; } @@ -805,7 +802,7 @@ body.zen-mode-enable { font-weight: 600; font-family: inherit; color: var(--tw-prose-kbd); - box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%); + box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows); font-size: 0.9rem; border-radius: 0.25rem; padding-top: 0.1875em; @@ -951,7 +948,7 @@ body.zen-mode-enable { --tw-prose-quote-borders: rgba(var(--color-primary-200), 1); --tw-prose-captions: rgba(var(--color-neutral-500), 1); --tw-prose-kbd: oklch(21% 0.034 264.665); - --tw-prose-kbd-shadows: NaN NaN NaN; + --tw-prose-kbd-shadows: color-mix(in oklab, oklch(21% 0.034 264.665) 10%, transparent); --tw-prose-code: rgba(var(--color-secondary-700), 1); --tw-prose-pre-code: rgba(var(--color-neutral-700), 1); --tw-prose-pre-bg: rgba(var(--color-neutral-50), 1); @@ -969,7 +966,7 @@ body.zen-mode-enable { --tw-prose-invert-quote-borders: rgba(var(--color-primary-900), 1); --tw-prose-invert-captions: rgba(var(--color-neutral-400), 1); --tw-prose-invert-kbd: #fff; - --tw-prose-invert-kbd-shadows: 255 255 255; + --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%); --tw-prose-invert-code: rgba(var(--color-secondary-400), 1); --tw-prose-invert-pre-code: rgba(var(--color-neutral-200), 1); --tw-prose-invert-pre-bg: rgba(var(--color-neutral-700), 1); @@ -1317,9 +1314,6 @@ body.zen-mode-enable { .h-0 { height: calc(var(--spacing) * 0); } - .h-1 { - height: calc(var(--spacing) * 1); - } .h-1\/2 { height: calc(1/2 * 100%); } @@ -1512,9 +1506,6 @@ body.zen-mode-enable { .shrink-0 { flex-shrink: 0; } - .flex-grow { - flex-grow: 1; - } .grow { flex-grow: 1; } @@ -1527,10 +1518,6 @@ body.zen-mode-enable { .border-collapse { border-collapse: collapse; } - .-translate-x-1 { - --tw-translate-x: calc(var(--spacing) * -1); - translate: var(--tw-translate-x) var(--tw-translate-y); - } .-translate-x-1\/2 { --tw-translate-x: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); @@ -1543,10 +1530,6 @@ body.zen-mode-enable { --tw-translate-x: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); } - .-translate-y-1 { - --tw-translate-y: calc(var(--spacing) * -1); - translate: var(--tw-translate-x) var(--tw-translate-y); - } .-translate-y-1\/2 { --tw-translate-y: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); @@ -1604,6 +1587,9 @@ body.zen-mode-enable { .appearance-none { appearance: none; } + .grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } .flex-col { flex-direction: column; } @@ -1874,9 +1860,6 @@ body.zen-mode-enable { .bg-black { background-color: #000; } - .bg-cyan-100 { - background-color: oklch(95.6% 0.045 203.388); - } .bg-gray-100 { background-color: oklch(96.7% 0.003 264.542); } @@ -1901,9 +1884,6 @@ body.zen-mode-enable { .bg-neutral-300 { background-color: rgba(var(--color-neutral-300), 1); } - .bg-neutral-500 { - background-color: rgba(var(--color-neutral-500), 1); - } .bg-neutral-500\/50 { background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-500), 1), 1) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { @@ -1934,15 +1914,9 @@ body.zen-mode-enable { .bg-transparent { background-color: transparent; } - .bg-violet-100 { - background-color: oklch(94.3% 0.029 294.588); - } .bg-violet-200 { background-color: oklch(89.4% 0.057 293.283); } - .bg-violet-300 { - background-color: oklch(81.1% 0.111 293.571); - } .bg-white { background-color: #fff; } @@ -2010,15 +1984,9 @@ body.zen-mode-enable { .p-0 { padding: calc(var(--spacing) * 0); } - .p-1 { - padding: calc(var(--spacing) * 1); - } .p-1\.5 { padding: calc(var(--spacing) * 1.5); } - .p-2 { - padding: calc(var(--spacing) * 2); - } .p-2\.5 { padding: calc(var(--spacing) * 2.5); } @@ -2118,12 +2086,6 @@ body.zen-mode-enable { .pt-\[6px\] { padding-top: 6px; } - .pt-\[7px\] { - padding-top: 7px; - } - .pt-\[8px\] { - padding-top: 8px; - } .pr-0 { padding-right: calc(var(--spacing) * 0); } @@ -2291,15 +2253,9 @@ body.zen-mode-enable { .text-gray-500 { color: oklch(55.1% 0.027 264.364); } - .text-gray-900 { - color: oklch(21% 0.034 264.665); - } .text-green-400 { color: oklch(79.2% 0.209 151.711); } - .text-green-900 { - color: oklch(39.3% 0.095 152.535); - } .text-green-950 { color: oklch(26.6% 0.065 152.934); } @@ -2348,54 +2304,24 @@ body.zen-mode-enable { .text-primary-800 { color: rgba(var(--color-primary-800), 1); } - .text-sky-700 { - color: oklch(50% 0.134 242.749); - } - .text-sky-800 { - color: oklch(44.3% 0.11 240.79); - } .text-sky-900 { color: oklch(39.1% 0.09 240.876); } .text-transparent { color: transparent; } - .text-violet-50 { - color: oklch(96.9% 0.016 293.756); - } - .text-violet-100 { - color: oklch(94.3% 0.029 294.588); - } .text-violet-800 { color: oklch(43.2% 0.232 292.759); } .text-violet-900 { color: oklch(38% 0.189 293.745); } - .text-violet-950 { - color: oklch(28.3% 0.141 291.089); - } .text-white { color: #fff; } - .text-yellow-50 { - color: oklch(98.7% 0.026 102.212); - } - .text-yellow-100 { - color: oklch(97.3% 0.071 103.193); - } .text-yellow-200 { color: oklch(94.5% 0.129 101.54); } - .text-yellow-300 { - color: oklch(90.5% 0.182 98.111); - } - .text-yellow-400 { - color: oklch(85.2% 0.199 91.936); - } - .text-yellow-800 { - color: oklch(47.6% 0.114 61.907); - } .capitalize { text-transform: capitalize; } @@ -2529,12 +2455,8 @@ body.zen-mode-enable { -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } - .backdrop-filter { - -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - } .transition { - transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events; + transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } @@ -2764,7 +2686,6 @@ body.zen-mode-enable { } .after\:content-\[\'\'\] { &::after { - content: var(--tw-content); --tw-content: ''; content: var(--tw-content); } @@ -3622,26 +3543,11 @@ body.zen-mode-enable { } } } - .dark\:bg-cyan-900 { - &:is(.dark *) { - background-color: oklch(39.8% 0.07 227.392); - } - } .dark\:bg-green-700 { &:is(.dark *) { background-color: oklch(52.7% 0.154 150.069); } } - .dark\:bg-green-800 { - &:is(.dark *) { - background-color: oklch(44.8% 0.119 151.328); - } - } - .dark\:bg-green-900 { - &:is(.dark *) { - background-color: oklch(39.3% 0.095 152.535); - } - } .dark\:bg-neutral-400 { &:is(.dark *) { background-color: rgba(var(--color-neutral-400), 1); @@ -3703,16 +3609,6 @@ body.zen-mode-enable { background-color: oklch(68.5% 0.169 237.323); } } - .dark\:bg-sky-600 { - &:is(.dark *) { - background-color: oklch(58.8% 0.158 241.966); - } - } - .dark\:bg-sky-700 { - &:is(.dark *) { - background-color: oklch(50% 0.134 242.749); - } - } .dark\:bg-violet-700 { &:is(.dark *) { background-color: oklch(49.1% 0.27 292.581); @@ -3747,11 +3643,6 @@ body.zen-mode-enable { color: oklch(96.2% 0.044 156.743); } } - .dark\:text-green-300 { - &:is(.dark *) { - color: oklch(87.1% 0.15 154.449); - } - } .dark\:text-neutral { &:is(.dark *) { color: rgba(var(--color-neutral), 1); @@ -3807,16 +3698,6 @@ body.zen-mode-enable { color: oklch(97.7% 0.013 236.62); } } - .dark\:text-sky-100 { - &:is(.dark *) { - color: oklch(95.1% 0.026 236.824); - } - } - .dark\:text-sky-200 { - &:is(.dark *) { - color: oklch(90.1% 0.058 230.902); - } - } .dark\:text-violet-100 { &:is(.dark *) { color: oklch(94.3% 0.029 294.588); @@ -3827,11 +3708,6 @@ body.zen-mode-enable { color: oklch(89.4% 0.057 293.283); } } - .dark\:text-violet-300 { - &:is(.dark *) { - color: oklch(81.1% 0.111 293.571); - } - } .dark\:text-white { &:is(.dark *) { color: #fff; @@ -4056,9 +3932,7 @@ button, [role="button"] { z-index: 10; width: calc(var(--spacing) * 20); cursor: pointer; - overflow: hidden; text-overflow: ellipsis; - white-space: nowrap; overflow: hidden; border-top-right-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); @@ -4203,7 +4077,7 @@ pre { text-decoration: none !important; } @layer base { - [type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select { + input:where([type='text']),input:where(:not([type])),input:where([type='email']),input:where([type='url']),input:where([type='password']),input:where([type='number']),input:where([type='date']),input:where([type='datetime-local']),input:where([type='month']),input:where([type='search']),input:where([type='tel']),input:where([type='time']),input:where([type='week']),select:where([multiple]),textarea,select { appearance: none; background-color: #fff; border-color: oklch(55.1% 0.027 264.364); @@ -4257,7 +4131,7 @@ pre { padding-right: 2.5rem; print-color-adjust: exact; } - [multiple],[size]:where(select:not([size="1"])) { + select:where([multiple]),select:where([size]:not([size="1"])) { background-image: initial; background-position: initial; background-repeat: unset; @@ -4265,7 +4139,7 @@ pre { padding-right: 0.75rem; print-color-adjust: unset; } - [type='checkbox'],[type='radio'] { + input:where([type='checkbox']),input:where([type='radio']) { appearance: none; padding: 0; print-color-adjust: exact; @@ -4282,13 +4156,13 @@ pre { border-width: 1px; --tw-shadow: 0 0 #0000; } - [type='checkbox'] { + input:where([type='checkbox']) { border-radius: 0px; } - [type='radio'] { + input:where([type='radio']) { border-radius: 100%; } - [type='checkbox']:focus,[type='radio']:focus { + input:where([type='checkbox']):focus,input:where([type='radio']):focus { outline: 2px solid transparent; outline-offset: 2px; --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); @@ -4299,30 +4173,30 @@ pre { --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - [type='checkbox']:checked,[type='radio']:checked { + input:where([type='checkbox']):checked,input:where([type='radio']):checked { border-color: transparent; background-color: currentColor; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } - [type='checkbox']:checked { + input:where([type='checkbox']):checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); @media (forced-colors: active) { appearance: auto; } } - [type='radio']:checked { + input:where([type='radio']):checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); @media (forced-colors: active) { appearance: auto; } } - [type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus { + input:where([type='checkbox']):checked:hover,input:where([type='checkbox']):checked:focus,input:where([type='radio']):checked:hover,input:where([type='radio']):checked:focus { border-color: transparent; background-color: currentColor; } - [type='checkbox']:indeterminate { + input:where([type='checkbox']):indeterminate { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e"); border-color: transparent; background-color: currentColor; @@ -4333,11 +4207,11 @@ pre { appearance: auto; } } - [type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus { + input:where([type='checkbox']):indeterminate:hover,input:where([type='checkbox']):indeterminate:focus { border-color: transparent; background-color: currentColor; } - [type='file'] { + input:where([type='file']) { background: unset; border-color: inherit; border-width: 0; @@ -4346,7 +4220,7 @@ pre { font-size: unset; line-height: inherit; } - [type='file']:focus { + input:where([type='file']):focus { outline: 1px solid ButtonText; outline: 1px auto -webkit-focus-ring-color; } diff --git a/assets/css/custom.css b/assets/css/custom.css index e517987..b3b2120 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -6,3 +6,268 @@ html { font-family: font; } */ + +/* Grid layout for get-started hardware section */ +.grid { + display: grid; +} + +.grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); +} + +.gap-4 { + gap: 1rem; +} + +/* Responsive: stack on mobile */ +@media (max-width: 768px) { + .grid-cols-3 { + grid-template-columns: 1fr; + } +} + +/* App directory - filter buttons */ +.app-filters { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + justify-content: center; + margin: 1.5rem 0; + padding: 1rem; + background: var(--color-neutral-100); + border-radius: 0.75rem; +} + +.dark .app-filters { + background: var(--color-neutral-800); +} + +.filter-btn { + padding: 0.4rem 0.75rem; + font-size: 0.75rem; + font-weight: 500; + border: 1px solid var(--color-neutral-300); + border-radius: 1rem; + background: white; + color: var(--color-neutral-700); + cursor: pointer; + transition: all 0.15s ease; +} + +.dark .filter-btn { + border-color: var(--color-neutral-600); + background: var(--color-neutral-700); + color: var(--color-neutral-300); +} + +.filter-btn:hover { + background: var(--color-neutral-100); + border-color: var(--color-neutral-400); +} + +.dark .filter-btn:hover { + background: var(--color-neutral-600); + border-color: var(--color-neutral-500); +} + +.filter-btn.active { + background: #2563eb !important; + border-color: #2563eb !important; + color: #ffffff !important; + text-decoration: none !important; + border-bottom: none !important; + box-shadow: none !important; +} + +.dark .filter-btn.active { + background: #3b82f6 !important; + border-color: #3b82f6 !important; + color: #ffffff !important; + text-decoration: none !important; + border-bottom: none !important; + box-shadow: none !important; +} + +.filter-divider { + width: 1px; + height: 1.5rem; + background: var(--color-neutral-300); + margin: 0 0.25rem; + align-self: center; +} + +.dark .filter-divider { + background: var(--color-neutral-600); +} + +.app-count { + text-align: center; + font-size: 0.8rem; + color: var(--color-neutral-500); + margin-top: 1rem; +} + +/* App directory - icon grid */ +.app-showcase { + display: flex; + flex-wrap: wrap; + gap: 1rem; + justify-content: center; + padding: 1.5rem; + background: var(--color-neutral-50); + border-radius: 0.75rem; + margin: 1rem 0; + /* Scrollable container - shows ~3 rows */ + max-height: 420px; + overflow-y: auto; + align-content: flex-start; +} + +/* Custom scrollbar styling */ +.app-showcase::-webkit-scrollbar { + width: 8px; +} + +.app-showcase::-webkit-scrollbar-track { + background: var(--color-neutral-200); + border-radius: 4px; +} + +.app-showcase::-webkit-scrollbar-thumb { + background: var(--color-neutral-400); + border-radius: 4px; +} + +.app-showcase::-webkit-scrollbar-thumb:hover { + background: var(--color-neutral-500); +} + +.dark .app-showcase::-webkit-scrollbar-track { + background: var(--color-neutral-700); +} + +.dark .app-showcase::-webkit-scrollbar-thumb { + background: var(--color-neutral-500); +} + +.dark .app-showcase::-webkit-scrollbar-thumb:hover { + background: var(--color-neutral-400); +} + +.dark .app-showcase { + background: var(--color-neutral-800); +} + +.app-icon { + display: flex; + flex-direction: column; + align-items: center; + width: 110px; + padding: 1rem 0.75rem; + border-radius: 0.75rem; + text-decoration: none; + transition: all 0.15s ease; + background: white; + border: 1px solid #e5e7eb; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); +} + +.dark .app-icon { + background: #374151; + border-color: #4b5563; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); +} + +.app-icon:hover { + transform: translateY(-3px); + box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); + border-color: #93c5fd; +} + +.dark .app-icon:hover { + box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5); + border-color: #3b82f6; +} + +.app-icon img { + width: 56px; + height: 56px; + object-fit: contain; + margin-bottom: 0.5rem; +} + +.app-icon span { + font-size: 0.7rem; + font-weight: 500; + text-align: center; + color: #374151; + line-height: 1.2; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.dark .app-icon span { + color: #d1d5db; +} + +/* Infrastructure icons - slightly smaller */ +.app-showcase-infra { + gap: 0.75rem; + padding: 1rem; +} + +.app-showcase-infra .app-icon { + width: 75px; + padding: 0.5rem; +} + +.app-showcase-infra .app-icon img { + width: 32px; + height: 32px; +} + +.app-showcase-infra .app-icon span { + font-size: 0.6rem; +} + +/* Coming Soon diagonal corner ribbon */ +.app-icon.coming-soon { + position: relative; + overflow: hidden; +} + +.app-icon.coming-soon::before { + content: 'SOON'; + position: absolute; + top: 8px; + right: -32px; + width: 100px; + padding: 4px 0; + background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); + color: white; + font-size: 0.5rem; + font-weight: 800; + text-align: center; + letter-spacing: 0.1em; + text-transform: uppercase; + transform: rotate(45deg); + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); + z-index: 10; +} + +.dark .app-icon.coming-soon::before { + background: linear-gradient(135deg, #f87171 0%, #ef4444 100%); +} + +.app-icon.coming-soon img { + opacity: 0.6; + filter: grayscale(20%); +} + +.app-icon.coming-soon:hover img { + opacity: 1; + filter: grayscale(0%); +} diff --git a/content/_index.md b/content/_index.md index 404faa4..8964fe5 100644 --- a/content/_index.md +++ b/content/_index.md @@ -6,11 +6,11 @@ description: Wild Cloud is an Open Source, self-hosted, sovereign cloud platform ![Your Wild Cloud Logo](wild-cloud.svg) -Wild clouds are Open Source, self-hosted, independent platforms for hosting your applications and services. Your wild cloud is your own private data center where you can host your own applications. +Wild clouds are open source community-managed infrastructure for hosting applications and services. A wild cloud is a private data center run by communities for communities. -You can have your own wild cloud for the price of a smart phone and an Internet connection. You can scale your wild cloud as large as you like. +Wild clouds are made of multiple computers connected in a cluster running on your own network. Once set up, applications for your community can be deployed to it with a few clicks. We make the most popular and high-quality apps available in our app store, but communities can host any software they'd like for their members. A simple wild cloud can be had for the price of a smart phone and can scale to support communities of all sizes. -While not a consumer product (yet), Wild Cloud aims to make self-hosting accessible to every individual and organization. Wild Cloud is a non-profit, community-driven project, educational in nature, designed to empower society to directly control its own data and services. +Wild Cloud is an open source, forever free, non-profit, community-driven project, educational in nature, designed to empower society to directly control its own data and services. This is a wild cloud: @@ -22,12 +22,394 @@ This is also a wild cloud: ## Apps -In addition to helping you set up and manager your cloud, Wild Cloud gives you a set of Open Source applications you can run on your cloud. +Deploy applications to your Wild Cloud with just a few clicks. We curate an ever-growing collection of open-source, high-quality applications most used by communities. + +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + Akaunting + Akaunting + + + Alaveteli + Alaveteli + + + Baserow + Baserow + + + Belenios + Belenios + + + BigBlueButton + BigBlueButton + + + BookStack + BookStack + + + BookWyrm + BookWyrm + + + Chamilo + Chamilo + + + CiviCRM + CiviCRM + + + Consul + Consul + + + CryptPad + CryptPad + + + Decidim + Decidim + + + Discourse + Discourse + + + Etherpad + Etherpad + + + Eventyay + Eventyay + + + Firefly III + Firefly III + + + FixMyStreet + FixMyStreet + + + Formbricks + Formbricks + + + Gancio + Gancio + + + Ghost + Ghost + + + Gitea + Gitea + + + GnuCash + GnuCash + + + Helios + Helios Voting + + + Immich + Immich + + + Indico + Indico + + + Jitsi + Jitsi + + + Karrot + Karrot + + + Keila + Keila + + + Leihs + Leihs + + + Lemmy + Lemmy + + + LibreBooking + LibreBooking + + + LimeSurvey + LimeSurvey + + + LiquidFeedback + LiquidFeedback + + + Listmonk + Listmonk + + + Loomio + Loomio + + + MapComplete + MapComplete + + + Mastodon + Mastodon + + + Matrix + Matrix + + + Mattermost + Mattermost + + + Mautic + Mautic + + + MediaWiki + MediaWiki + + + Memcached + Memcached + + + Mobilizon + Mobilizon + + + Moodle + Moodle + + + MySQL + MySQL + + + Nextcloud + Nextcloud + + + NocoDB + NocoDB + + + Odoo + Odoo + + + OhMyForm + OhMyForm + + + Open Collective + Open Collective + + + Open edX + Open edX + + + Open Food Network + Open Food + + + Open WebUI + Open WebUI + + + OpenProject + OpenProject + + + Outline + Outline + + + PeerTube + PeerTube + + + Pixelfed + Pixelfed + + + Pol.is + Pol.is + + + PostgreSQL + PostgreSQL + + + Pretix + Pretix + + + Redis + Redis + + + Resonate + Resonate + + + Rocket.Chat + Rocket.Chat + + + Taiga + Taiga + + + Terrastories + Terrastories + + + Typebot + Typebot + + + uMap + uMap + + + Ushahidi + Ushahidi + + + vLLM + vLLM + + + Wekan + Wekan + + + Wiki.js + Wiki.js + + + WriteFreely + WriteFreely + + + Your Priorities + Your Priorities + + + Zulip + Zulip + +
+ +

0 apps shown

+ +
+ View App Directory on Gitea +
+ + ## Get started -We're in the early days of the Wild Cloud project, yet we already have two functional "Proof of concept" clouds. In fact, all Wild Cloud and CSTF sites and services are running on our PoC wild cloud. The concept works. If you are an experienced developer, you can check out the software and start building your own wild cloud. Our next milestone is to continue ironing out the software and educational materials so that we can invite early adopters to start building their own wild clouds. +We're in the early days of the Wild Cloud project, yet we already have two functional "Proof of concept" clouds. In fact, all Wild Cloud and [CSTF](https://civilsociety.dev) sites and services are running on our PoC wild cloud. The concept works. If you are an experienced developer, you can check out the software and start building your own wild cloud. We are actively seeking active communites to pilot new wild cloud installations. -If you would like to get us to this next milestone, join our [developer community](https://git.civilsociety.dev/CSTF/wild-cloud). - -If you would like to help the project move forward in other ways, check out our parent org at [Civil Society Tech Foundation](https://civilsociety.dev) and consider supporting us with a donation or connecting us with interested partners. +If you would like to get us to this next milestone, join our [developer community](https://git.civilsociety.dev/wild-cloud/wild-cloud). \ No newline at end of file diff --git a/content/contribute/index.md b/content/contribute/index.md index 1268bd2..0d157b1 100644 --- a/content/contribute/index.md +++ b/content/contribute/index.md @@ -16,11 +16,11 @@ The [Civil Society Technology Foundation (CSTF)](https://civilsociety.dev) provi ## Hack -If you're ready to jump into development, join our project at https://git.civilsociety.dev/wild-cloud. In addition to source code, you'll find a list of our current [issues](https://git.civilsociety.dev/wild-cloud/issues). We accept community pull requests related to any of these issues. +If you're ready to jump into development, join our project at https://git.civilsociety.dev/wild-cloud. In addition to source code, you'll find a list of our current [issues](https://git.civilsociety.dev/wild-cloud/wild-cloud/issues). We accept community pull requests related to any of these issues. ## Propose -You can propose new issues in the forum. +You can propose new features in the [forum](https://forum.civilsociety.dev/c/wild-cloud/). ## Broader engagement diff --git a/content/get-started/flint2.jpg b/content/get-started/flint2.jpg new file mode 100644 index 0000000..64442a9 Binary files /dev/null and b/content/get-started/flint2.jpg differ diff --git a/content/get-started/index.md b/content/get-started/index.md index 1c97f55..fcac9fa 100644 --- a/content/get-started/index.md +++ b/content/get-started/index.md @@ -3,18 +3,96 @@ title: 🌩️ Get started date: 2026-01-04 --- +## Prepare a domain name + +Your wild cloud applications will be accessible on the internet through a domain name (like `mydomain.org`). When you install public applications on your wild cloud they will, by default, be made available on a subdomain of your domain (like `discourse.mydomain.org`). + +If you don't already have a domain name, we recommend registering one with [Cloudflare](https://www.cloudflare.com/). Currently, Wild Cloud requires Cloudflare features for automatic management of domain configuration and security certificates. You __can__ have your domain registered with any registrar, but you will need to use Cloudflare's DNS services for your domain. This is free and easy to set up. + +For now, just make sure you have a domain name ready and that your DNS is managed by Cloudflare. You will configure it in Wild Central later. + +## Gather your hardware + +To set up your wild cloud, you will need some basic hardware. Here are the minimum requirements: + +
+
+ {{< figure + src="./flint2.jpg" + title="LAN Router" + caption="Your LAN router connects your local network to the internet." + >}} +
+
+ {{< figure + src="./switch.jpg" + class="" + title="A network switch" + caption="A network switch is used to connect multiple devices on your local network." + >}} +
+
+ {{< figure + src="./wild-central.jpg" + title="Wild Central" + caption="Wild Central is the heart of your wild cloud, running on an inexpensive computer like a Raspberry Pi." + >}} +
+
+ {{< figure + src="./micro-pc.jpg" + title="Inexpensive computer" + caption="You'll need at least six additional computers (three control nodes and three worker nodes)." + >}} +
+
+ {{< figure + src="./ups.jpg" + title="An uninterruptible power supply (UPS)" + caption="A UPS helps keep your wild cloud running during short power outages." + >}} +
+
+ ## Set up Wild Central -- Set up your Wild Central - - Machine - - Wild Central softare install +The heart of your wild cloud is _Wild Central_, an inexpensive computer that runs on your local network that helps you set up and manage your wild cloud. Wild Central can be set up on an inexpensive computer (around $100USD), like a Raspberry Pi. My Wild Central looks like this: + +![Wild Central](./wild-central.jpg) + +Wild Central does several things for you: + +- Helps you set up one or more wild clouds on your network. +- Handles internal networking for your cloud. Wild Central allows computers on your network to find the internal apps deployed on your cloud. +- Handles external networking for your cloud. Traffic will be routed from the internet, through your LAN router, to Wild Central, and then to the appropriate app on your cloud. +- Allows you to install apps from the Wild Directory to your cloud with a few clicks. +- Monitors the health of your cloud and notifies you if something goes wrong. + +After you set up Wild Central, it runs on your network without a display or keyboard. You access it on your network through any web browser. Although you can install Wild Cloud on any computer, it is best to have a standalone device as Wild Central needs to be always on. + +Setting up Wild Central: + +- Prepare a machine for Wild Central. This can be a Raspberry Pi or any other inexpensive computer running Ubuntu Linux. +- Download and install the Wild Central software on your machine. +- Access Wild Central through your web browser. + +## Set up your networking + +Once Wild Central is set up, you need to instruct your LAN router (the device that connects your local network to the internet) to use Wild Central in two ways: + +- Forward incoming web traffic (HTTP and HTTPS) to Wild Central. This allows external users to access the public apps deployed on your wild cloud. +- Use Wild Central as the DNS server for your network. This allows devices on your network to find the internal apps deployed on your wild cloud. + +![LAN router-Flint 2](./flint2.jpg) + +![Network switch](./switch.jpg) ## Set up your cloud +![Nodes](./micro-pc.jpg) + + - Create your Wild Cloud instance - - Domain setup - - Get your domain name - - Wild Central DNS - Set up your control nodes - Set up your worker nodes - Install services diff --git a/content/get-started/micro-pc.jpg b/content/get-started/micro-pc.jpg new file mode 100644 index 0000000..465b140 Binary files /dev/null and b/content/get-started/micro-pc.jpg differ diff --git a/content/get-started/switch.jpg b/content/get-started/switch.jpg new file mode 100644 index 0000000..e651882 Binary files /dev/null and b/content/get-started/switch.jpg differ diff --git a/content/get-started/ups.jpg b/content/get-started/ups.jpg new file mode 100644 index 0000000..e541358 Binary files /dev/null and b/content/get-started/ups.jpg differ diff --git a/content/get-started/wild-central.jpg b/content/get-started/wild-central.jpg new file mode 100644 index 0000000..04f638d Binary files /dev/null and b/content/get-started/wild-central.jpg differ diff --git a/layouts/home.html b/layouts/home.html index 737e90b..7cbbe27 100644 --- a/layouts/home.html +++ b/layouts/home.html @@ -1,5 +1,5 @@ {{ define "main" }} -
+
{{ if .Params.showBreadcrumbs | default (.Site.Params.article.showBreadcrumbs | default false) }} {{ partial "breadcrumbs.html" . }} diff --git a/layouts/partials/home/custom.html b/layouts/partials/home/custom.html index ff5c378..bd890e9 100644 --- a/layouts/partials/home/custom.html +++ b/layouts/partials/home/custom.html @@ -1,4 +1,4 @@ -
+
{{ .Content }}