diff --git a/.devcontainer/qrcoder/devcontainer.json b/.devcontainer/qrcoder/devcontainer.json new file mode 100644 index 00000000..5f92356e --- /dev/null +++ b/.devcontainer/qrcoder/devcontainer.json @@ -0,0 +1,27 @@ +{ + "name": "QR Code Generator", + "image": "mcr.microsoft.com/dotnet/sdk:9.0", + "features": {}, + "workspaceFolder": "/workspaces/Ivy-Examples/qrcoder", + "postCreateCommand": "dotnet tool install -g Ivy.Console", + "postStartCommand": "dotnet watch", + "forwardPorts": [5010], + "portsAttributes": { + "5010": { + "label": "QR Code Generator", + "onAutoForward": "openPreview" + } + }, + "customizations": { + "vscode": { + "extensions": [ + "ms-dotnettools.csharp", + "ms-vscode.powershell", + "ms-dotnettools.csdevkit" + ] + }, + "codespaces": { + "openFiles": ["Apps/ProfileApp.cs"] + } + } + } \ No newline at end of file diff --git a/qrcodeprofile/Program.cs b/qrcodeprofile/Program.cs deleted file mode 100644 index 41d042d0..00000000 --- a/qrcodeprofile/Program.cs +++ /dev/null @@ -1,12 +0,0 @@ -using IvyQrCodeProfileSharing.Apps; - -CultureInfo.DefaultThreadCurrentCulture = CultureInfo.DefaultThreadCurrentUICulture = new CultureInfo("en-US"); -var server = new Server(); -#if DEBUG -server.UseHotReload(); -#endif -server.AddAppsFromAssembly(); -server.AddConnectionsFromAssembly(); -var chromeSettings = new ChromeSettings().DefaultApp().UseTabs(preventDuplicates: true); -server.UseChrome(chromeSettings); -await server.RunAsync(); \ No newline at end of file diff --git a/qrcodeprofile/README.md b/qrcodeprofile/README.md deleted file mode 100644 index 37a05000..00000000 --- a/qrcodeprofile/README.md +++ /dev/null @@ -1,17 +0,0 @@ -# Hello - -Web application created using [Ivy](https://github.com/Ivy-Interactive/Ivy). - -Ivy is a web framework for building interactive web applications using C# and .NET. - -## Run - -``` -dotnet watch -``` - -## Deploy - -``` -ivy deploy -``` \ No newline at end of file diff --git a/qrcodeprofile/.dockerignore b/qrcoder/.dockerignore similarity index 100% rename from qrcodeprofile/.dockerignore rename to qrcoder/.dockerignore diff --git a/qrcodeprofile/.gitignore b/qrcoder/.gitignore similarity index 100% rename from qrcodeprofile/.gitignore rename to qrcoder/.gitignore diff --git a/qrcodeprofile/Apps/ProfileApp.cs b/qrcoder/Apps/ProfileApp.cs similarity index 94% rename from qrcodeprofile/Apps/ProfileApp.cs rename to qrcoder/Apps/ProfileApp.cs index b7274a95..01733d77 100644 --- a/qrcodeprofile/Apps/ProfileApp.cs +++ b/qrcoder/Apps/ProfileApp.cs @@ -68,12 +68,13 @@ async void HandleSubmit() Layout.Vertical().Gap(6).Padding(2) | Text.H2("Create Your Profile") | Text.Block("Fill in your information to create a shareable profile") - | new Separator() | formView | Layout.Horizontal() | new Button("Create Profile").HandleClick(new Action(HandleSubmit)) .Loading(loading).Disabled(loading) | validationView + | Text.Small("This demo uses QRCoder library to generate vCard QR codes for contact sharing.") + | Text.Markdown("Built with [Ivy Framework](https://github.com/Ivy-Interactive/Ivy-Framework) and [QRCoder](https://github.com/codebude/QRCoder)") ).Height(Size.Full()); // Main content - QR Code display diff --git a/qrcodeprofile/Dockerfile b/qrcoder/Dockerfile similarity index 62% rename from qrcodeprofile/Dockerfile rename to qrcoder/Dockerfile index 6d459687..01d596e7 100644 --- a/qrcodeprofile/Dockerfile +++ b/qrcoder/Dockerfile @@ -9,17 +9,17 @@ ARG BUILD_CONFIGURATION=Release WORKDIR /src # Copy and restore -COPY ["QrCodeProfile.csproj", "./"] -RUN dotnet restore "QrCodeProfile.csproj" +COPY ["QrCoderExample.csproj", "./"] +RUN dotnet restore "QrCoderExample.csproj" # Copy everything and build COPY . . -RUN dotnet build "QrCodeProfile.csproj" -c $BUILD_CONFIGURATION -o /app/build +RUN dotnet build "QrCoderExample.csproj" -c $BUILD_CONFIGURATION -o /app/build # Publish stage FROM build AS publish ARG BUILD_CONFIGURATION=Release -RUN dotnet publish "QrCodeProfile.csproj" -c $BUILD_CONFIGURATION -o /app/publish /p:UseAppHost=true +RUN dotnet publish "QrCoderExample.csproj" -c $BUILD_CONFIGURATION -o /app/publish /p:UseAppHost=true # Final runtime image FROM base AS final @@ -31,4 +31,4 @@ ENV PORT=80 ENV ASPNETCORE_URLS="http://+:80" # Run the executable -ENTRYPOINT ["dotnet","./QrCodeProfile.dll"] \ No newline at end of file +ENTRYPOINT ["dotnet","./QrCoderExample.dll"] \ No newline at end of file diff --git a/qrcodeprofile/GlobalUsings.cs b/qrcoder/GlobalUsings.cs similarity index 97% rename from qrcodeprofile/GlobalUsings.cs rename to qrcoder/GlobalUsings.cs index 9e8372aa..80ca324e 100644 --- a/qrcodeprofile/GlobalUsings.cs +++ b/qrcoder/GlobalUsings.cs @@ -25,4 +25,4 @@ global using System.Globalization; global using System.Reactive.Linq; -namespace QrCodeProfile; +namespace QrCodeExample; diff --git a/qrcoder/Program.cs b/qrcoder/Program.cs new file mode 100644 index 00000000..d9ea1d9d --- /dev/null +++ b/qrcoder/Program.cs @@ -0,0 +1,23 @@ +using IvyQrCodeProfileSharing.Apps; + +CultureInfo.DefaultThreadCurrentCulture = CultureInfo.DefaultThreadCurrentUICulture = new CultureInfo("en-US"); +var server = new Server(); +#if DEBUG +server.UseHotReload(); +#endif +server.AddAppsFromAssembly(); +server.AddConnectionsFromAssembly(); +var customHeader = Layout.Vertical().Gap(2) + | new Html(@" +
+ + + +
+ "); +var chromeSettings = new ChromeSettings() + .DefaultApp() + .UseTabs(preventDuplicates: true) + .Header(customHeader); +server.UseChrome(chromeSettings); +await server.RunAsync(); \ No newline at end of file diff --git a/qrcodeprofile/QrCodeProfile.csproj b/qrcoder/QrCoderExample.csproj similarity index 92% rename from qrcodeprofile/QrCodeProfile.csproj rename to qrcoder/QrCoderExample.csproj index 674f2266..d17b4f61 100644 --- a/qrcodeprofile/QrCodeProfile.csproj +++ b/qrcoder/QrCoderExample.csproj @@ -6,7 +6,7 @@ enable enable CS8618;CS8603;CS8602;CS8604;CS9113 - QrCodeProfile + QrCoderExample diff --git a/qrcodeprofile/QrCodeProfile.sln b/qrcoder/QrCoderExample.sln similarity index 87% rename from qrcodeprofile/QrCodeProfile.sln rename to qrcoder/QrCoderExample.sln index 1f26f9ec..35812682 100644 --- a/qrcodeprofile/QrCodeProfile.sln +++ b/qrcoder/QrCoderExample.sln @@ -2,7 +2,7 @@ Microsoft Visual Studio Solution File, Format Version 12.00 # Visual Studio Version 17 VisualStudioVersion = 17.5.2.0 MinimumVisualStudioVersion = 10.0.40219.1 -Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Hello", "QrCodeProfile.csproj", "{039638F3-A6D7-FB67-E733-27BD896EFDC4}" +Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "QrCodeExample", "QrCodeExample.csproj", "{039638F3-A6D7-FB67-E733-27BD896EFDC4}" EndProject Global GlobalSection(SolutionConfigurationPlatforms) = preSolution diff --git a/qrcoder/README.md b/qrcoder/README.md new file mode 100644 index 00000000..094d7828 --- /dev/null +++ b/qrcoder/README.md @@ -0,0 +1,78 @@ +# QR Code Generator + +image + + +## Created Using Ivy + +Web application created using [Ivy-Framework](https://github.com/Ivy-Interactive/Ivy-Framework). + +**Ivy** - The ultimate framework for building internal tools with LLM code generation by unifying front-end and back-end into a single C# codebase. With Ivy, you can build robust internal tools and dashboards using C# and AI assistance based on your existing database. + +Ivy is a web framework for building interactive web applications using C# and .NET. + +## Interactive Example For QR code generation + +This example demonstrates QR code generation using the [QRCoder library](https://github.com/codebude/QRCoder) integrated with Ivy. QRCoder is a pure C# Open Source. + +**What This Application Does:** + +This specific implementation creates a **Profile Creator** application that allows users to: + +- **Create User Profiles**: Fill out a form with personal information (name, email, phone, LinkedIn, GitHub) +- **Generate vCard QR Codes**: Automatically creates contact cards (vCard format) encoded in QR codes +- **Share Contact Information**: Users can scan the generated QR code to automatically add the contact to their phone +- **Real-time Form Validation**: Validates email format and URL patterns for LinkedIn/GitHub profiles +- **Interactive UI**: Split-panel layout with form on the left and QR code preview on the right + +**Technical Implementation:** + +- Uses QRCoder's vCard payload generator for structured contact data +- Generates Base64-encoded PNG images for web display +- Implements form validation with custom rules +- Creates resizable panel layout for optimal user experience +- Handles form submission with loading states and error display + +## One-Click Development Environment + +[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://github.com/codespaces/new?hide_repo_select=true&ref=main&repo=Ivy-Interactive%2FIvy-Examples&machine=standardLinux32gb&devcontainer_path=.devcontainer%2Fqrcoder%2Fdevcontainer.json&location=EuropeWest) + +Click the badge above to open Ivy Examples repository in GitHub Codespaces with: +- **.NET 9.0** SDK pre-installed +- **All Ivy Examples** available for exploration +- **Navigate to `qrcoder` folder** to run this QR Code Generator +- **Ready-to-run** development environment +- **No local setup** required + +## How to Run + +1. **Prerequisites**: .NET 8+ SDK +2. **Navigate to the example**: + ```bash + cd qrcoder + ``` +3. **Restore dependencies**: + ```bash + dotnet restore + ``` +4. **Run the application**: + ```bash + dotnet watch + ``` +5. **Open your browser** to the URL shown in the terminal (typically `http://localhost:5010`) + +## How to Deploy + +Deploy this example to Ivy's hosting platform: + +1. **Navigate to the example**: + ```bash + cd qrcoder + ``` +2. **Deploy to Ivy hosting**: + ```bash + ivy deploy + ``` +This will deploy your QR code generation application with a single command. + +## For more details, see the [Ivy Documentation](https://docs.ivy.app) \ No newline at end of file diff --git a/qrcodeprofile/Services/IQrCodeService.cs b/qrcoder/Services/IQrCodeService.cs similarity index 100% rename from qrcodeprofile/Services/IQrCodeService.cs rename to qrcoder/Services/IQrCodeService.cs diff --git a/qrcodeprofile/Services/QrCodeService.cs b/qrcoder/Services/QrCodeService.cs similarity index 100% rename from qrcodeprofile/Services/QrCodeService.cs rename to qrcoder/Services/QrCodeService.cs