diff --git a/angular/angular.json b/angular/angular.json index 7a8bc836d6..0c10f326e6 100644 --- a/angular/angular.json +++ b/angular/angular.json @@ -22,7 +22,7 @@ "main": "demo/src/main.ts", "polyfills": "demo/src/polyfills.ts", "tsConfig": "demo/tsconfig.app.json", - "assets": ["demo/src/favicon.ico", "demo/src/assets"], + "assets": ["demo/src/agnosui-logo.svg", "demo/src/assets"], "styles": ["demo/src/styles.css", "../common/demo.scss"], "scripts": [], "inlineStyleLanguage": "scss", diff --git a/angular/demo/src/agnosui-logo.svg b/angular/demo/src/agnosui-logo.svg new file mode 100644 index 0000000000..4d0c3b280f --- /dev/null +++ b/angular/demo/src/agnosui-logo.svg @@ -0,0 +1,21 @@ + + + + asciitilde + + + + + + + + + + + + + asciitilde + + + + diff --git a/angular/demo/src/favicon.ico b/angular/demo/src/favicon.ico deleted file mode 100644 index 997406ad22..0000000000 Binary files a/angular/demo/src/favicon.ico and /dev/null differ diff --git a/angular/demo/src/index.html b/angular/demo/src/index.html index 60fb9f2daf..c56f2dcf84 100644 --- a/angular/demo/src/index.html +++ b/angular/demo/src/index.html @@ -5,7 +5,7 @@ Demo - +
diff --git a/common/_variables.scss b/common/_variables.scss index 189d90f907..818d777a4a 100644 --- a/common/_variables.scss +++ b/common/_variables.scss @@ -1,3 +1,15 @@ @import '../node_modules/bootstrap/scss/functions'; @import '../node_modules/bootstrap/scss/variables'; @import '../node_modules/bootstrap/scss/mixins/breakpoints'; + +$light-background: #f3f5fa; + +$gradient-top: #006dff; +$gradient-bottom: #0097fe; +$gradient-text-top: $gradient-top; +$gradient-text-bottom: #254a64; + +// $gradient-top: #bc0cf1; +// $gradient-bottom: #d40404; +// $gradient-text-top: #bc0cf1; +// $gradient-text-bottom: #d40404; diff --git a/demo/src/app.html b/demo/src/app.html index 383be57bb7..65403f63f3 100644 --- a/demo/src/app.html +++ b/demo/src/app.html @@ -4,7 +4,7 @@ - + %sveltekit.head% AgnosUI diff --git a/demo/src/lib/snippets/landing-page/LandingCard.svelte b/demo/src/lib/snippets/landing-page/LandingCard.svelte new file mode 100644 index 0000000000..867896ab04 --- /dev/null +++ b/demo/src/lib/snippets/landing-page/LandingCard.svelte @@ -0,0 +1,46 @@ + + +
+
+
+ {#if svg} +
+ +
+ {/if} +
+
+
{title}
+

+ +

+
+
+
+
+
+ + diff --git a/demo/src/resources/agnosui-logo.svg b/demo/src/resources/agnosui-logo.svg new file mode 100644 index 0000000000..4d0c3b280f --- /dev/null +++ b/demo/src/resources/agnosui-logo.svg @@ -0,0 +1,21 @@ + + + + asciitilde + + + + + + + + + + + + + asciitilde + + + + diff --git a/demo/src/routes/+layout.svelte b/demo/src/routes/+layout.svelte index 38e43d59b2..1ef2050c72 100644 --- a/demo/src/routes/+layout.svelte +++ b/demo/src/routes/+layout.svelte @@ -54,10 +54,8 @@
-
-
- -
+
+
diff --git a/demo/src/routes/+page.svelte b/demo/src/routes/+page.svelte index 9dafa5a59d..a90ba44d4c 100644 --- a/demo/src/routes/+page.svelte +++ b/demo/src/routes/+page.svelte @@ -1,9 +1,12 @@ @@ -11,64 +14,166 @@ -
-
-
-

Welcome to AgnosUI Demo!

-

- Experience the beginning stages of our exciting journey as we actively develop our library for CSS Bootstrap design. -
- Follow us on GitHub for the latest updates and be a part of - shaping the next-generation UI components! -

+
+
+
+ +
+
Making your webapps powerfull and consistent
+
Headless widgets library
+
Adapters for Angular, React and Svelte
+
+
+
+
+
+
Checkout the docs
+
+
+ + + Angular + +
+
+ + + React + +
+
+ + + Svelte + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ + Each widget is managed in pure typescript with a reactive model and an api to drive the data. + + + Widgets are provided for Angular, React and Svelte with the exact same markup and functionnalities. + + + Default values for all widget props are configurable at any point of the component subtree. + + Unit test for headless with Vitest. E2e tests for adapters with Playwright. + Widgets are tested with Axe.
-
- -
-

- AgnosUI is a powerful library of widgets designed specifically for Bootstrap. -

-

- Inspired by the success of - ng-bootstrap, AgnosUI takes the concept a step further by offering widgets that can seamlessly - integrate with any front-end framework of your choice. -

-

- With support for popular frameworks like Angular, - React, and Svelte, AgnosUI allows you to effortlessly create consistent and - visually appealing UI components across your projects. -

-
- -

For a comprehensive understanding of AgnosUI's features and usage,
feel free to explore our demo

-
- - - - - - - - -
diff --git a/demo/src/routes/[framework]/+layout.svelte b/demo/src/routes/[framework]/+layout.svelte index 1b34df6086..b7570a64e3 100644 --- a/demo/src/routes/[framework]/+layout.svelte +++ b/demo/src/routes/[framework]/+layout.svelte @@ -30,53 +30,55 @@ } -
- -
- -
-
- {#if $elements$.length} -
-
On this page
-
    - {#each $elements$ as element} - {@const isVisible = $visibleElements$.has(element)} - {@const {label, classname, href} = getElementProperties(element, isVisible)} -
  • - - {label} - +
    +
    +
    - {/if} + + +
    + +
    +
    + {#if $elements$.length} +
    +
    On this page
    +
      + {#each $elements$ as element} + {@const isVisible = $visibleElements$.has(element)} + {@const {label, classname, href} = getElementProperties(element, isVisible)} +
    • + + {label} + +
      • + {/each} +
    +
    + {/if} +
diff --git a/demo/src/routes/styles.scss b/demo/src/routes/styles.scss index e968e5c2e2..0d72c1639e 100644 --- a/demo/src/routes/styles.scss +++ b/demo/src/routes/styles.scss @@ -53,6 +53,11 @@ h3, } } +h5, +.h5 { + font-size: calc(0.8rem + 0.4vw); +} + header { &.title { margin-left: calc(var(--bs-gutter-x) * -0.5); diff --git a/demo/static/agnosui-logo.svg b/demo/static/agnosui-logo.svg new file mode 100644 index 0000000000..4d0c3b280f --- /dev/null +++ b/demo/static/agnosui-logo.svg @@ -0,0 +1,21 @@ + + + + asciitilde + + + + + + + + + + + + + asciitilde + + + + diff --git a/react/demo/agnosui-logo.svg b/react/demo/agnosui-logo.svg new file mode 100644 index 0000000000..4d0c3b280f --- /dev/null +++ b/react/demo/agnosui-logo.svg @@ -0,0 +1,21 @@ + + + + asciitilde + + + + + + + + + + + + + asciitilde + + + + diff --git a/react/demo/favicon.svg b/react/demo/favicon.svg deleted file mode 100644 index de4aeddc12..0000000000 --- a/react/demo/favicon.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/react/demo/index.html b/react/demo/index.html index 315dba6aca..fc274b3415 100644 --- a/react/demo/index.html +++ b/react/demo/index.html @@ -4,7 +4,7 @@ - + Vite App diff --git a/svelte/demo/agnosui-logo.svg b/svelte/demo/agnosui-logo.svg new file mode 100644 index 0000000000..4d0c3b280f --- /dev/null +++ b/svelte/demo/agnosui-logo.svg @@ -0,0 +1,21 @@ + + + + asciitilde + + + + + + + + + + + + + asciitilde + + + + diff --git a/svelte/demo/favicon.svg b/svelte/demo/favicon.svg deleted file mode 100644 index de4aeddc12..0000000000 --- a/svelte/demo/favicon.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/svelte/demo/index.html b/svelte/demo/index.html index 6739f3d2fb..01cf5bcd31 100644 --- a/svelte/demo/index.html +++ b/svelte/demo/index.html @@ -4,7 +4,7 @@ - + Svelte App