stobbsm/clustvirt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed list icons

Browse Source 
- instead of trying to change their colors in css, i created new svgs based on the ones I wanted
This commit is contained in:
Matthew Stobbs 2024-03-14 01:54:41 -06:00
parent c170739128
commit 6e0198de35
12 changed files with 2137 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1408
assets/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

2
assets/package.json
View File

@ -1,5 +1,7 @@
{
"devDependencies": {
"@tailwindcss/forms": "^0.5.7",
"tailwind-dracula": "^1.1.0",
"tailwindcss": "^3.4.1"
}
}

6
assets/src/style.css
View File

@ -1,4 +1,10 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;
@layer components {
.notimpl {
@apply italic font-light list-image-possible;
}
}

16
assets/tailwind.config.js
View File

@ -4,13 +4,19 @@ module.exports = {
theme: {
extend: {
listStyleImage: {
chevronRight: 'url("/static/icons/48-chevron-right.svg")',
xCircle: 'url("/static/icons/48-x-circle.svg")',
checkCircle: 'url("/static/icons/check-circle.svg")',
noSymbol: 'url("/static/icons/48-no-symbol.svg")',
never: 'url("/static/icons/list-never.svg")',
accepted: 'url("/static/icons/list-accepted.svg")',
possible: 'url("/static/icons/list-possible.svg")',
informational: 'url("/static/icons/list-informational.svg")',
},
content: {
link: 'url("/static/icons/link.svg")',
},
},
},
plugins: [],
plugins: [
require('@tailwindcss/forms'),
require('tailwind-dracula')(),
],
}

449
public/css/style.css
View File

@ -444,6 +444,201 @@ video {
display: none;
}
[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 {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #fff;
border-color: #6b7280;
border-width: 1px;
border-radius: 0px;
padding-top: 0.5rem;
padding-right: 0.75rem;
padding-bottom: 0.5rem;
padding-left: 0.75rem;
font-size: 1rem;
line-height: 1.5rem;
--tw-shadow: 0 0 #0000;
}
[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: #6272a4;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
border-color: #6272a4;
}
input::-moz-placeholder, textarea::-moz-placeholder {
color: #6b7280;
opacity: 1;
}
input::placeholder,textarea::placeholder {
color: #6b7280;
opacity: 1;
}
::-webkit-datetime-edit-fields-wrapper {
padding: 0;
}
::-webkit-date-and-time-value {
min-height: 1.5em;
text-align: inherit;
}
::-webkit-datetime-edit {
display: inline-flex;
}
::-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-top: 0;
padding-bottom: 0;
}
select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.5rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
padding-right: 2.5rem;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
[multiple],[size]:where(select:not([size="1"])) {
background-image: initial;
background-position: initial;
background-repeat: unset;
background-size: initial;
padding-right: 0.75rem;
-webkit-print-color-adjust: unset;
print-color-adjust: unset;
}
[type='checkbox'],[type='radio'] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
display: inline-block;
vertical-align: middle;
background-origin: border-box;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
flex-shrink: 0;
height: 1rem;
width: 1rem;
color: #6272a4;
background-color: #fff;
border-color: #6b7280;
border-width: 1px;
--tw-shadow: 0 0 #0000;
}
[type='checkbox'] {
border-radius: 0px;
}
[type='radio'] {
border-radius: 100%;
}
[type='checkbox']:focus,[type='radio']:focus {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
--tw-ring-offset-width: 2px;
--tw-ring-offset-color: #fff;
--tw-ring-color: #6272a4;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--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 {
border-color: transparent;
background-color: currentColor;
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
[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) {
[type='checkbox']:checked {
-webkit-appearance: auto;
-moz-appearance: auto;
appearance: auto;
}
}
[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) {
[type='radio']:checked {
-webkit-appearance: auto;
-moz-appearance: auto;
appearance: auto;
}
}
[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
border-color: transparent;
background-color: currentColor;
}
[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;
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
@media (forced-colors: active) {
[type='checkbox']:indeterminate {
-webkit-appearance: auto;
-moz-appearance: auto;
appearance: auto;
}
}
[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
border-color: transparent;
background-color: currentColor;
}
[type='file'] {
background: unset;
border-color: inherit;
border-width: 0;
border-radius: 0;
padding: 0;
font-size: unset;
line-height: inherit;
}
[type='file']:focus {
outline: 1px solid ButtonText;
outline: 1px auto -webkit-focus-ring-color;
}
*, ::before, ::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
@ -469,7 +664,7 @@ video {
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-color: rgb(120 134 180 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
@ -519,7 +714,7 @@ video {
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-color: rgb(120 134 180 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
@ -578,6 +773,12 @@ video {
}
}
.notimpl {
list-style-image: url("/static/icons/list-possible.svg");
font-weight: 300;
font-style: italic;
}
.m-2 {
margin: 0.5rem;
}
@ -602,119 +803,159 @@ video {
list-style-position: inside;
}
.list-image-checkCircle {
list-style-image: url("/static/icons/check-circle.svg");
.list-image-accepted {
list-style-image: url("/static/icons/list-accepted.svg");
}
.list-image-never {
list-style-image: url("/static/icons/list-never.svg");
}
.list-image-possible {
list-style-image: url("/static/icons/list-possible.svg");
}
.list-image-informational {
list-style-image: url("/static/icons/list-informational.svg");
}
.flex-col {
flex-direction: column;
}
.gap-4 {
gap: 1rem;
}
.divide-y-2 > :not([hidden]) ~ :not([hidden]) {
--tw-divide-y-reverse: 0;
border-top-width: calc(2px * calc(1 - var(--tw-divide-y-reverse)));
border-bottom-width: calc(2px * var(--tw-divide-y-reverse));
}
.divide-solid > :not([hidden]) ~ :not([hidden]) {
border-style: solid;
}
.divide-blade-800 > :not([hidden]) ~ :not([hidden]) {
--tw-divide-opacity: 1;
border-color: rgb(11 168 51 / var(--tw-divide-opacity));
}
.divide-cullen-800 > :not([hidden]) ~ :not([hidden]) {
--tw-divide-opacity: 1;
border-color: rgb(109 109 79 / var(--tw-divide-opacity));
}
.divide-dracula-800 > :not([hidden]) ~ :not([hidden]) {
--tw-divide-opacity: 1;
border-color: rgb(89 20 187 / var(--tw-divide-opacity));
}
.divide-marcelin-800 > :not([hidden]) ~ :not([hidden]) {
--tw-divide-opacity: 1;
border-color: rgb(183 7 7 / var(--tw-divide-opacity));
}
.divide-morbius-800 > :not([hidden]) ~ :not([hidden]) {
--tw-divide-opacity: 1;
border-color: rgb(167 90 8 / var(--tw-divide-opacity));
}
.rounded-2xl {
border-radius: 1rem;
}
.rounded-t-lg {
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
.border-2 {
border-width: 2px;
}
.border-8 {
border-width: 8px;
}
.border-b-2 {
border-bottom-width: 2px;
}
.border-double {
border-style: double;
}
.border-hidden {
border-style: hidden;
}
.border-blue-200 {
.border-blade-800 {
--tw-border-opacity: 1;
border-color: rgb(191 219 254 / var(--tw-border-opacity));
border-color: rgb(11 168 51 / var(--tw-border-opacity));
}
.border-green-200 {
.border-cullen-800 {
--tw-border-opacity: 1;
border-color: rgb(187 247 208 / var(--tw-border-opacity));
border-color: rgb(109 109 79 / var(--tw-border-opacity));
}
.bg-blue-100 {
.border-dracula-800 {
--tw-border-opacity: 1;
border-color: rgb(89 20 187 / var(--tw-border-opacity));
}
.border-marcelin-800 {
--tw-border-opacity: 1;
border-color: rgb(183 7 7 / var(--tw-border-opacity));
}
.border-morbius-800 {
--tw-border-opacity: 1;
border-color: rgb(167 90 8 / var(--tw-border-opacity));
}
.bg-blade-900 {
--tw-bg-opacity: 1;
background-color: rgb(219 234 254 / var(--tw-bg-opacity));
background-color: rgb(10 131 41 / var(--tw-bg-opacity));
}
.bg-blue-50 {
.bg-cullen-900 {
--tw-bg-opacity: 1;
background-color: rgb(239 246 255 / var(--tw-bg-opacity));
background-color: rgb(86 86 65 / var(--tw-bg-opacity));
}
.bg-blue-500 {
.bg-dracula-900 {
--tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
background-color: rgb(73 18 152 / var(--tw-bg-opacity));
}
.bg-green-100 {
.bg-marcelin-900 {
--tw-bg-opacity: 1;
background-color: rgb(220 252 231 / var(--tw-bg-opacity));
background-color: rgb(145 7 7 / var(--tw-bg-opacity));
}
.bg-green-50 {
.bg-morbius-900 {
--tw-bg-opacity: 1;
background-color: rgb(240 253 244 / var(--tw-bg-opacity));
background-color: rgb(130 71 7 / var(--tw-bg-opacity));
}
.bg-green-500 {
.bg-nosferatu-900 {
--tw-bg-opacity: 1;
background-color: rgb(34 197 94 / var(--tw-bg-opacity));
}
.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}
.bg-slate-200 {
--tw-bg-opacity: 1;
background-color: rgb(226 232 240 / var(--tw-bg-opacity));
}
.p-0 {
padding: 0px;
background-color: rgb(40 42 54 / var(--tw-bg-opacity));
}
.p-2 {
padding: 0.5rem;
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.pb-0 {
padding-bottom: 0px;
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.pt-2 {
padding-top: 0.5rem;
}
.indent-6 {
text-indent: 1.5rem;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.text-base {
font-size: 1rem;
line-height: 1.5rem;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
@ -741,6 +982,97 @@ video {
font-style: italic;
}
.leading-relaxed {
line-height: 1.625;
}
.text-blade-100 {
--tw-text-opacity: 1;
color: rgb(188 255 205 / var(--tw-text-opacity));
}
.text-cullen-100 {
--tw-text-opacity: 1;
color: rgb(234 234 218 / var(--tw-text-opacity));
}
.text-dracula-100 {
--tw-text-opacity: 1;
color: rgb(233 218 254 / var(--tw-text-opacity));
}
.text-marcelin-100 {
--tw-text-opacity: 1;
color: rgb(255 198 198 / var(--tw-text-opacity));
}
.text-morbius-100 {
--tw-text-opacity: 1;
color: rgb(255 220 183 / var(--tw-text-opacity));
}
.text-nosferatu-100 {
--tw-text-opacity: 1;
color: rgb(181 186 214 / var(--tw-text-opacity));
}
.shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-blade-900 {
--tw-shadow-color: #0a8329;
--tw-shadow: var(--tw-shadow-colored);
}
.shadow-cullen-900 {
--tw-shadow-color: #565641;
--tw-shadow: var(--tw-shadow-colored);
}
.shadow-dracula-900 {
--tw-shadow-color: #491298;
--tw-shadow: var(--tw-shadow-colored);
}
.shadow-marcelin-900 {
--tw-shadow-color: #910707;
--tw-shadow: var(--tw-shadow-colored);
}
.shadow-morbius-900 {
--tw-shadow-color: #824707;
--tw-shadow: var(--tw-shadow-colored);
}
.after\:inline-block::after {
content: var(--tw-content);
display: inline-block;
}
.after\:h-3::after {
content: var(--tw-content);
height: 0.75rem;
}
.after\:w-3::after {
content: var(--tw-content);
width: 0.75rem;
}
.after\:invert::after {
content: var(--tw-content);
--tw-invert: invert(100%);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.after\:content-link::after {
--tw-content: url("/static/icons/link.svg");
content: var(--tw-content);
}
@media (min-width: 640px) {
.sm\:gap-8 {
gap: 2rem;
@ -756,4 +1088,3 @@ video {
gap: 1.5rem;
}
}

44
public/icons/list-accepted.svg Normal file
View File

@ -0,0 +1,44 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
fill="none"
viewBox="0 0 23.999992 23.999996"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
version="1.1"
id="svg1"
sodipodi:docname="list-accepted.svg"
inkscape:version="1.3.2 (091e20e, 2023-11-25)"
width="23.999992"
height="23.999996"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1" />
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:zoom="9.8333333"
inkscape:cx="12"
inkscape:cy="12"
inkscape:window-width="1440"
inkscape:window-height="847"
inkscape:window-x="0"
inkscape:window-y="25"
inkscape:window-maximized="1"
inkscape:current-layer="svg1" />
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m 8.3076888,12.923076 2.7692302,2.769231 4.615384,-6.4615418 m 7.384614,2.7692328 a 11.076921,11.076928 0 1 1 -22.15384198,0 11.076921,11.076928 0 0 1 22.15384198,0 z"
id="path1"
style="stroke-width:1.84615;stroke:#d6d6d6;stroke-opacity:1" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

44
public/icons/list-informational.svg Normal file
View File

@ -0,0 +1,44 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
fill="none"
viewBox="0 0 23.999998 23.999996"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
version="1.1"
id="svg1"
sodipodi:docname="list-informational.svg"
width="23.999998"
height="23.999996"
inkscape:version="1.3.2 (091e20e, 2023-11-25)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1" />
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:zoom="9.8333333"
inkscape:cx="9.7627119"
inkscape:cy="9.7627119"
inkscape:window-width="1312"
inkscape:window-height="449"
inkscape:window-x="0"
inkscape:window-y="25"
inkscape:window-maximized="0"
inkscape:current-layer="svg1" />
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m 11.076927,11.076927 0.05046,-0.02462 a 0.92307691,0.9230774 0 0 1 1.308308,1.048616 l -0.871384,3.490464 a 0.92307691,0.9230774 0 0 0 1.308308,1.049846 l 0.05046,-0.02585 m 10.153842,-4.615384 a 11.076923,11.076929 0 1 1 -22.15384598,0 11.076923,11.076929 0 0 1 22.15384598,0 z M 12.000004,7.3846176 h 0.0098 v 0.00985 h -0.0098 z"
id="path1"
style="stroke:#d6d6d6;stroke-width:1.84615;stroke-opacity:1" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

44
public/icons/list-never.svg Normal file
View File

@ -0,0 +1,44 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
fill="none"
viewBox="0 0 23.994221 23.935944"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
version="1.1"
id="svg1"
sodipodi:docname="list-never.svg"
width="23.994221"
height="23.935944"
inkscape:version="1.3.2 (091e20e, 2023-11-25)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1" />
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:zoom="9.8333333"
inkscape:cx="12"
inkscape:cy="12"
inkscape:window-width="1440"
inkscape:window-height="847"
inkscape:window-x="0"
inkscape:window-y="25"
inkscape:window-maximized="1"
inkscape:current-layer="svg1" />
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M 19.833912,19.783417 A 11.082911,11.052709 0 0 0 4.1603098,4.1525257 M 19.833912,19.783417 A 11.082911,11.052709 0 0 1 4.1603098,4.1525257 M 19.833912,19.783417 4.1603098,4.1525257"
id="path1"
style="stroke:#d6d6d6;stroke-width:1.84462;stroke-opacity:1" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

44
public/icons/list-possible.svg Normal file
View File

@ -0,0 +1,44 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
fill="none"
viewBox="0 0 23.999998 23.999996"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
version="1.1"
id="svg1"
sodipodi:docname="list-possible.svg"
width="23.999998"
height="23.999996"
inkscape:version="1.3.2 (091e20e, 2023-11-25)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1" />
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:zoom="9.8333333"
inkscape:cx="9.7627119"
inkscape:cy="9.7627119"
inkscape:window-width="1440"
inkscape:window-height="847"
inkscape:window-x="0"
inkscape:window-y="25"
inkscape:window-maximized="1"
inkscape:current-layer="svg1" />
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M 15.692306,11.999999 H 8.3076904 m 14.7692306,0 a 11.076923,11.076929 0 1 1 -22.15384598,0 11.076923,11.076929 0 0 1 22.15384598,0 z"
id="path1"
style="stroke:#d6d6d6;stroke-width:1.84615;stroke-opacity:1" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

8
view/_footer.gohtml
View File

@ -1,7 +1,7 @@
{{ define "footer" }}
<div class="flex gap-4 md:gap-6 sm:gap-8">
<div id="footer_left" class="bg-red-500 flex-auto basis-1/4 md:basis-1/3 p-2">Left</div>
<div id="footer_middle" class="bg-green-500 flex-auto basis-1/2 md:basis-1/3 p-2">Middle</div>
<div id="footer_right" class="bg-blue-500 flex-auto basis-1/4 md:basis-1/3 p-2">Right</div>
<div class="flex gap-4 md:gap-6 sm:gap-8 divide divide-solid">
<div id="footer_left" class="flex-auto basis-1/4 md:basis-1/3 p-2">Left</div>
<div id="footer_middle" class="flex-auto basis-1/2 md:basis-1/3 p-2">Middle</div>
<div id="footer_right" class="flex-auto basis-1/4 md:basis-1/3 p-2">Right</div>
</div>
{{ end }}

2
view/_index.gohtml
View File

@ -1,6 +1,6 @@
{{ define "_index" }}
<!DOCTYPE html>
<html class="text-grey-900 bg-slate-200">
<html class="text-nosferatu-100 bg-nosferatu-900">
<head>
<title>Clustvirt</title>
<link href="/static/css/style.css" type="text/css" rel="stylesheet"/>

202
view/static/home.gohtml
View File

@ -1,47 +1,91 @@
{{ define "content" }}
<div class="bg-green-50 m-2 p-0 pt-2 rounded-2xl border-8 border-double border-green-200">
<h3 class="text-xl font-semibold indent-6">What is this?</h3>
<p class="bg-green-100 rounded-t-lg border-2 border-hidden px-6 pb-0">
Clustvirt (work in progress name) aims to be the agnostic cluster controller for libvirtd.
The server component is used to display both the WebUI and run the REST API used to control one to many
libvirtd hosts to manage virual machines, LXC containers (through libvirtd), gather information about
each host, and monitor each host.
</p>
<div class="m-2 px-4 pt-2 flex-col shadow-md
rounded-2xl border-8 border-double divide-solid divide-y-2
bg-dracula-900 text-dracula-100 shadow-dracula-900
divide-dracula-800 border-dracula-800">
<h3 class="text-xl font-semibold">What is this?</h3>
<p>Clustvirt (work in progress name) aims to be the agnostic
cluster controller for libvirtd. The server component is
used to display both the WebUI and run the REST API used to
control one to many libvirtd hosts to manage virual machines,
LXC containers (through libvirtd), gather information about
each host, and monitor each host.</p>
</div>
<div class="bg-blue-50 m-2 p-0 pt-2 rounded-2xl border-8 border-double border-blue-200">
<h3 class="text-xl font-semibold indent-6">Project Goals</h4>
<ul class="bg-blue-100 rounded-t-lg border-2 border-hidden px-6 text-light
list-image-checkCircle list-inside">
<li>Base OS Agnostic. If it can run libvirtd, this should be able to control it on some level</li>
<li>Open source, always</li>
<li class="notimpl">Control the Virtual Machine life cycle on one or more libvirtd hosts</li>
<li class="notimpl">Add clusting capabilities to libvirtd host, including;</li>
<div class="m-2 px-4 pt-2 flex-col shadow-md
rounded-2xl border-8 border-double divide-solid divide-y-2
bg-blade-900 text-blade-100 shadow-blade-900
divide-blade-800 border-blade-800">
<h3 class="text-xl font-semibold">Project Goals</h4>
<ul class="leading-relaxed list-image-accepted list-inside">
<li class="accepted">Open source, currently on the MIT license</li>
<li class="notimpl">Base OS Agnostic. If it can run libvirtd, this should be
able to control it on some level</li>
<li class="notimpl">Control the Virtual Machine life cycle
on one or more libvirtd hosts</li>
<li class="notimpl">Add clusting capabilities to libvirtd host,
including;</li>
<li class="notimpl">Migration of VMs</li>
<li class="notimpl">Syncronizing secrets</li>
<li class="notimpl">Syncronizing VLANs, bridges, host only networking</li>
<li class="notimpl">Syncronizing VLANs, bridges, host only
networking</li>
<li class="notimpl">Sharing HA storage availability</li>
<li class="notimpl">Locking shared resources like disks</li>
<li class="notimpl">Starting VMs marked for HA on another host when one goes down</li>
<li class="notimpl">Manage a library of Cloud-init resources and templates to build new VMs quickly</li>
<li class="notimpl">Local Storage management, including local directory, lvm, zfs (if installed)</li>
<li class="notimpl">Advanced Storage management, such as Ceph, glusterfs, drbd, iscsi, nfs</li>
<li class="notimpl">Storage syncronization of local disks between hosts (zfs snapshots, lvm snapshots, rsync)</li>
<li class="notimpl">Starting VMs marked for HA on another host
when one goes down</li>
<li class="notimpl">Manage a library of Cloud-init resources
and templates to build new VMs quickly</li>
<li class="notimpl">Local Storage management, including local
directory, lvm, zfs (if installed)</li>
<li class="notimpl">Advanced Storage management, such as Ceph,
glusterfs, drbd, iscsi, nfs</li>
<li class="notimpl">Storage syncronization of local disks
between hosts (zfs snapshots, lvm snapshots, rsync)</li>
<li class="notimpl">Backup scheduling, creation, restoration</li>
</ul>
</div>
<p>
What this project does not, but may someday do (future goals):
<ul>
<div class="m-2 px-4 pt-2 flex-col shadow-md
rounded-2xl border-8 border-double divide-solid divide-y-2
bg-cullen-900 text-cullen-100 shadow-cullen-900
divide-cullen-800 border-cullen-800">
<h3 class="text-xl font-semibold">Stretch Goals</h3>
<ul class="leading-relaxed list-image-possible list-inside">
<li>Install the OS which libvirtd is running on</li>
<li>Install/provision libvirtd on a host that does not have it installed</li>
<li>Install/provision libvirtd on a host that does not have
it installed</li>
<li>Tools to move from one vendor to clustvirt/libvirtd</li>
<li>VM templates for common aspects of VM creation and management, like appliances</li>
<li>External tool access that can be used to manage things that are not managed here (cephadm dashboard, for instance)</li>
<li>VM templates for common aspects of VM creation and management,
like appliances</li>
<li>External tool access that can be used to manage things that
are not managed here (cephadm dashboard, for instance)</li>
</ul>
</p>
<p>
What this project will NEVER do, even if asked really nicely:
<ul>
</div>
<div class="m-2 px-4 pt-2 flex-col shadow-md
rounded-2xl border-8 border-double divide-solid divide-y-2
bg-morbius-900 text-morbius-100 shadow-morbius-900
divide-morbius-800 border-morbius-800">
<h3 class="text-xl font-semibold">Reddit Requested Features</h3>
<ul class="list-image-possible list-inside leading-relaxed">
<li>Search/Filter on hosts/vms - @Lopsided_Speaker_553</li>
<li>Balance on resource usage per host/Automattically migrate to
least used host - @Lopsided_Speaker_553</li>
<li>Support inter-vm only commmunication (VxLAN style)
- @Lopsided_Speaker_553</li>
<li>Deploy VMs using only API - @Lopsided_Speaker_553</li>
<li>Well documented, first class API - @kasperlitheater</li>
<li>Bootstrap service to configure a new server - @phatpappa_</li>
<li>For the love of kitten, don't use XML as configuration files
- @pascalbrax</li>
<li>Expose the Cluster Manager functionalities as API - @raven2611</li>
<li>CPU architecture awareness for migrations - @raven2611</li>
<li>Inter VM Communications via VXLAN/EVPN - @raven2611</li>
</ul>
</div>
<div class="m-2 px-4 pt-2 flex-col shadow-md
rounded-2xl border-8 border-double divide-solid divide-y-2
bg-marcelin-900 text-marcelin-100 shadow-marcelin-900
divide-marcelin-800 border-marcelin-800">
<h3 class="text-xl font-semibold">Never Going to Happen</h3>
<ul class="list-image-never list-inside leading-relaxed">
<li>Kubernetes</li>
<li>Application container management (docker, podman, etc)</li>
<li>Become an OS</li>
@ -51,40 +95,72 @@
<li>Anything that does not have an Open Source standard behind it</li>
<li>Directly control a guest Operating System</li>
</ul>
</p>
<p>
Why does this even exist?
<ul>
<li>Broadcom buying VMWare, and VMWare losing a free teir for homelabbers pissed me off</li>
</div>
<div class="m-2 px-4 pt-2 flex-col shadow-md
rounded-2xl border-8 border-double divide-solid divide-y-2
bg-dracula-900 text-dracula-100 shadow-dracula-900
divide-dracula-800 border-dracula-800">
<h3 class="text-xl font-semibold">Why?</h3>
<ul class="list-image-informational list-inside leading-relaxed">
<li>Broadcom buying VMWare, and VMWare losing a free teir for
homelabbers pissed me off</li>
<li>Vendor lock-in pisses me off</li>
<li>Even good open source Hyperconverged systems (Proxmox, as an example) exhibit a form of vendor lock-in</li>
<li>Libvirt is terrific, has the functionality for everything those other providers do, but there really is not a
<li>Even good open source Hyperconverged systems (Proxmox, as
an example) exhibit a form of vendor lock-in</li>
<li>Libvirt is terrific, has the functionality for everything
those other providers do, but there really is not a
great option for those dipping their toes into Open Source</li>
<li>Its fun to build things that solve a need</li>
<li>I really want to do it</li>
</ul>
</p>
<p>I recently created a <a href="http://redd.it/1bct15z">post</a> on reddit announcing that I was building this,
and while the majority of responses were supportive, even offering features that may enhance what I originally
set out to do, many responded with "Why do we need another one??"</p>
<p>Besides the list above about why this exists, I wanted to clarify a few things those individuals did not seeem to
get: This is not a rebuild of Proxmox, Cloudstack, VMWare, Harvester or any of the other "Hyper-converged
Infrastructer Operating System" offerings out there. This will not take over your base operating system machine, just
act as a cluster manager and interface to access the existing libvirtd instances on those machines, nor will it
prescribe a set of requirements that make it hard to move your own infrastructure around.</p>
<p>At the heart of this project is that I hate the enshitifiation of Open Source that has been going on, where its
just another way to make money and control the eco system. RedHat tried to do it by locking down their source code,
Proxmox does it by making sure anything you do on Proxmox is tied to Proxmox (no offense to Proxmox), and even
Hashicorp, who I loved so dearly, changed from a pure Open Source licensing model to one that protects the business
over the community.</p>
<p>I will not let that happen here</p>
<p>This project will seek to use the Unix philosophy, of building off of existing standards, combining tools, and
having one tool do one job well. This does not mean there will be one application for each aspect of the job, but
that this application stack will manage Libvirtd well, and have individual and configurable paths to manage each
sub aspect of the libvirt stack. This stack will not create a Ceph cluster for you, it leaves you to do that. It
will not even talk to a ceph cluster. It will, however, let you add that cluster via configuration options to define
it as a storage pool that libvirt can use.</p>
<p>If you want something that will allow you to use a single interface to create all sub aspects that can be used by
libvirt (managing all firewall rules, creating a ceph cluster, etc.), use something like Proxmox which includes
that builtin functionality. This isn't the stack for you.<p>
</div>
<div class="m-2 px-4 pt-2 flex-col shadow-md
rounded-2xl border-8 border-double
bg-voncount-900 text-voncount-100 shadow-voncount-900
divide-voncount-800 border-voncount-800">
<h3 class="text-xl font-semibold border-b-2 border-voncount-800">Other notes</h3>
<p>I recently created a <a href="http://redd.it/1bct15z"
class="after:content-link after:w-3 after:h-3 after:inline-block
after:invert text-base text-morbius-100">post</a>
on reddit announcing that I was building this, and while the majority
of responses were supportive, even offering features that may enhance
what I originally set out to do, many responded with
"Why do we need another one??"</p>
<p>Besides the list above about why this exists, I wanted to clarify
a few things those individuals did not seeem to get: This is not
a rebuild of Proxmox, Cloudstack, VMWare, Harvester or any of
the other "Hyper-converged/Single-solution/turnkey/Operating System"
offerings out there. This will not take over your base operating system
on your machine, just act as a cluster manager and interface to access
the existing libvirtd instances on those machines, nor will it prescribe
a set of requirements that make it hard to move your own infrastructure
around.</p>
<p>At the heart of this project is that I hate the enshitifiation of
Open Source that has been going on, where its just another way to make
money and control the eco system. RedHat tried to do it by locking
down their source code, Proxmox does it by making sure anything you
do on Proxmox is tied to Proxmox (no offense to Proxmox), and even
Hashicorp, who I loved so dearly, changed from a pure Open Source
licensing model to one that protects the business over the community.</p>
<p>I will not let that happen here.</p>
<p>This project will seek to use the Unix philosophy, of building off
of existing standards, combining tools, and having one tool do one
job well. This does not mean there will be one application for each
aspect of the job, but that this application stack will manage Libvirtd
well, and have individual and configurable paths to manage each sub-aspect
of the libvirt stack. This stack will not create a Ceph cluster for you,
it leaves you to do that. It will not even talk to a ceph cluster.
It will, however, let you add that cluster via configuration options to
define it as a storage pool that libvirt can use.</p>
<p>If you want something that will allow you to use a single interface
to create all sub aspects that can be used by libvirt
(managing all firewall rules, creating a ceph cluster, etc.),
use something like Proxmox which includes that builtin
functionality. This isn't the stack for you.<p>
</div>
{{ end }}