From c47e685e37f1150edb3cce814eb3e99e5d73f226 Mon Sep 17 00:00:00 2001 From: obvTiger Date: Tue, 21 Jan 2025 20:16:44 +0100 Subject: [PATCH 1/3] feat: web demo --- src/about.bp | 57 +++++++++++++++++ src/components.bp | 152 ++++++++++++++++++++++++++++++++++++++++++++++ src/contact.bp | 54 ++++++++++++++++ src/index.bp | 51 +++++++++++++--- 4 files changed, 306 insertions(+), 8 deletions(-) create mode 100644 src/about.bp create mode 100644 src/components.bp create mode 100644 src/contact.bp diff --git a/src/about.bp b/src/about.bp new file mode 100644 index 0000000..74809bd --- /dev/null +++ b/src/about.bp @@ -0,0 +1,57 @@ +page(favicon:"/favicon.ico") { + title { "Blueprint - About" } + description { "A modern, declarative UI framework for building beautiful web interfaces" } + keywords { "blueprint, ui, framework, web development" } + author { "Blueprint Team" } +} + +navbar { + horizontal { + link(href:index) { text(bold) { "Blueprint Live" } } + links { + link(href:index) { "Home" } + link(href:components) { "Components" } + link(href:about) { "About" } + link(href:contact) { "Contact" } + } + } +} + +section(wide) { + title { "About Blueprint" } + text(subtle) { "A modern UI compiler with live reload support" } + + vertical { + card { + title { "Our Story" } + text { "Blueprint was created to make UI development faster and more enjoyable. With live reload support, you can see your changes instantly without manual refreshing." } + } + + card { + title { "Features" } + vertical { + horizontal { + badge { "New" } + text { "Live Reload Support" } + } + horizontal { + badge { "✨" } + text { "Modern Dark Theme" } + } + horizontal { + badge { "🚀" } + text { "Fast Development" } + } + } + } + + card { + title { "Get Started" } + text { "Try Blueprint now with our development server:" } + codeblock { + "bun dev" + } + link(text:"Get Help") { "Contact" } + } + } +} \ No newline at end of file diff --git a/src/components.bp b/src/components.bp new file mode 100644 index 0000000..4867679 --- /dev/null +++ b/src/components.bp @@ -0,0 +1,152 @@ +page(favicon:"/favicon.ico") { + title { "Blueprint - Components" } + description { "A modern, declarative UI framework for building beautiful web interfaces" } + keywords { "blueprint, ui, framework, web development" } + author { "Blueprint Team" } +} + +navbar { + horizontal { + link(href:index) { text(bold) { "Blueprint Live" } } + links { + link(href:index) { "Home" } + link(href:components) { "Components" } + link(href:about) { "About" } + link(href:contact) { "Contact" } + } + } +} + +section(wide, centered) { + title(huge) { "Modern UI Components" } + text(large, subtle) { "A showcase of beautiful, dark-themed UI elements" } +} + +section(wide) { + title { "Form Elements" } + + grid(columns:2) { + card { + title { "Text Inputs" } + vertical { + text(subtle) { "Regular input:" } + input { "Type something..." } + + text(subtle) { "Textarea:" } + textarea { "Multiple lines of text..." } + + text(subtle) { "Select dropdown:" } + select { + "Option 1" + "Option 2" + "Option 3" + } + } + } + + card { + title { "Toggle Controls" } + vertical { + horizontal { + checkbox { } + text { "Enable notifications" } + } + + horizontal { + radio { } + text { "Light theme" } + } + + horizontal { + radio { } + text { "Dark theme" } + } + + horizontal { + switch { } + text { "Airplane mode" } + } + } + } + } +} + +section(wide) { + title { "Progress Elements" } + + grid(columns:2) { + card { + title { "Progress Indicators" } + vertical { + text(subtle) { "Download progress:" } + progress(value:75, max:100) { } + + text(subtle) { "Volume control:" } + slider(value:50, min:0, max:100) { } + } + } + + card { + title { "Status Indicators" } + vertical { + horizontal(spaced) { + badge { "New" } + badge { "Updated" } + badge { "Popular" } + } + + alert { "✨ Welcome to the new UI Kit!" } + + horizontal { + tooltip(data-tooltip:"Click to learn more") { + text { "Hover me" } + } + } + } + } + } +} + +section(wide) { + title { "Button Variations" } + + grid(columns:3) { + card { + title { "Primary Actions" } + vertical { + button(prominent) { "Save Changes" } + button { "Cancel" } + } + } + + card { + title { "Button Groups" } + horizontal { + button(prominent) { "Previous" } + button(prominent) { "Next" } + } + } + + card { + title { "Icon Buttons" } + horizontal { + button(compact) { "👍" } + button(compact) { "❤️" } + button(compact) { "🔔" } + } + } + } +} + +section(wide, alternate) { + title(centered) { "Ready to Build?" } + + vertical(centered) { + text(large, subtle) { "Start creating your own modern UI today" } + + horizontal(centered, spaced) { + button(prominent) { "Get Started" } + button(prominent) { "View Documentation" } + } + } +} \ No newline at end of file diff --git a/src/contact.bp b/src/contact.bp new file mode 100644 index 0000000..4503613 --- /dev/null +++ b/src/contact.bp @@ -0,0 +1,54 @@ +page(favicon:"/favicon.ico") { + title { "Blueprint - Contact" } + description { "A modern, declarative UI framework for building beautiful web interfaces" } + keywords { "blueprint, ui, framework, web development" } + author { "Blueprint Team" } +} + +navbar { + horizontal { + link(href:index) { text(bold) { "Blueprint Live" } } + links { + link(href:index) { "Home" } + link(href:components) { "Components" } + link(href:about) { "About" } + link(href:contact) { "Contact" } + } + } +} + +section(vertical, centered) { + card(width:100) { + title { "Contact Us" } + text(subtle) { "Get in touch with the Blueprint team" } + + vertical { + text(subtle) { "Name" } + input { "Your name" } + + text(subtle) { "Email" } + input { "you@example.com" } + + text(subtle) { "Message" } + textarea { "Type your message here..." } + + horizontal { + checkbox { } + text { "Subscribe to updates" } + } + + link(href:submit) { button { "Send Message (this does not do anything)" } } + } + } + + horizontal(centered) { + text(subtle) { "Or connect with us on social media:" } + } + + horizontal(centered) { + link(href:twitter) { button-compact { "𝕏" } } + link(href:facebook) { button-compact { "📘" } } + link(href:linkedin) { button-compact { "💼" } } + link(href:instagram) { button-compact { "📱" } } + } +} \ No newline at end of file diff --git a/src/index.bp b/src/index.bp index 4c5cd79..22a0dae 100644 --- a/src/index.bp +++ b/src/index.bp @@ -1,15 +1,50 @@ - page(favicon:"/favicon.ico") { - title { "Blueprint - Modern Web UI Language" } - description { "It works!" } - keywords { "blueprint, language, web, ui, modern" } - author { "Epilogue Team" } +page(favicon:"/favicon.ico") { + title { "Blueprint - Modern UI Framework" } + description { "A modern, declarative UI framework for building beautiful web interfaces" } + keywords { "blueprint, ui, framework, web development" } + author { "Blueprint Team" } } +navbar { + horizontal { + link(href:index) { text(bold) { "Blueprint Live" } } + links { + link(href:index) { "Home" } + link(href:components) { "Components" } + link(href:about) { "About" } + link(href:contact) { "Contact" } + } + } +} section(wide, centered) { vertical(centered,wide) { - title(huge) { "It works!" } - text(subtle, large) { "Start using Blueprint at src/" } - text(small) { "Find examples at examples/" } + title(huge) { "Welcome to blueprint" } + text(subtle) { "You can now edit files in the src/ directory" } + } + + horizontal(centered) { + link(href:index) { button { "Get started" } } + link(href:about) { button-light { "About" } } } } + +section(wide) { + grid(columns:3) { + card { + title { "Live Reloads" } + text { "Changes appear instantly in your browser" } + link(href:https://github.com/epilogueteam/blueprint) { button-secondary { "Try Blueprint" } } + } + card { + title { "Modern Design" } + text { "Beautiful dark theme with consistent styling" } + link(href:about) { button-secondary { "About" } } + } + card { + title { "Easy to Use" } + text { "Simple, declarative syntax for building UIs" } + link(href:contact) { button-secondary { "Contact" } } + } + } +} \ No newline at end of file From be9b30fbdc4f2164bf01183a4d88b87ff7dedc94 Mon Sep 17 00:00:00 2001 From: obvTiger Date: Tue, 21 Jan 2025 20:21:02 +0100 Subject: [PATCH 2/3] fix: remove debug from build --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 98e9ac1..8346fe0 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "description": "A modern UI component compiler with live reload support", "main": "lib/BlueprintBuilder.js", "scripts": { - "build": "node lib/build.js --debug && echo \"Built successfully! You can now deploy the dist folder.\" && exit 0", + "build": "node lib/build.js && echo \"Built successfully! You can now deploy the dist folder.\" && exit 0", "dev": "node lib/dev-server.js --live" }, "dependencies": { From 6a9f9073253dd317e7972ab5db72c8ec290632aa Mon Sep 17 00:00:00 2001 From: obvtiger Date: Thu, 3 Apr 2025 17:22:19 +0200 Subject: [PATCH 3/3] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 560f069..5abc12b 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,7 @@ npm run build # Generates production files ## Roadmap 🛣️ -- [ ] Blueprint server blocks +- [x] Blueprint server blocks - [ ] Blueprint live editor - [ ] Blueprint components