From c3af47bf7673b971d61de00b229a34dd19407d53 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aur=C3=A9lien=20Pereira?= Date: Sat, 25 Jan 2025 16:40:59 +0100 Subject: [PATCH 1/3] Add installation steps for Tailwind CSS v4.0 & Linux environments --- .../Layouts/InstallationLayout.razor | 9 ++ .../Pages/Getting Started/Installation.razor | 102 ++++++++++++++++-- .../installationConfigTailwindV4.html | 6 ++ .../installationTargetsLinux.html | 9 ++ .../installationTargetsWindows.html | 9 ++ 5 files changed, 125 insertions(+), 10 deletions(-) create mode 100644 docs/LumexUI.Docs.Client/Samples/Installation/installationConfigTailwindV4.html create mode 100644 docs/LumexUI.Docs.Client/Samples/Installation/installationTargetsLinux.html create mode 100644 docs/LumexUI.Docs.Client/Samples/Installation/installationTargetsWindows.html diff --git a/docs/LumexUI.Docs.Client/Components/Layouts/InstallationLayout.razor b/docs/LumexUI.Docs.Client/Components/Layouts/InstallationLayout.razor index 9d1cab9c..d7a14f3f 100644 --- a/docs/LumexUI.Docs.Client/Components/Layouts/InstallationLayout.razor +++ b/docs/LumexUI.Docs.Client/Components/Layouts/InstallationLayout.razor @@ -36,6 +36,15 @@ + + + Depending on the version of Tailwind CSS you plan on using, the instructions may differ slightly. + Make sure you pick the correct version before proceeding. + + diff --git a/docs/LumexUI.Docs.Client/Pages/Getting Started/Installation.razor b/docs/LumexUI.Docs.Client/Pages/Getting Started/Installation.razor index 727bde59..ce09adb7 100644 --- a/docs/LumexUI.Docs.Client/Pages/Getting Started/Installation.razor +++ b/docs/LumexUI.Docs.Client/Pages/Getting Started/Installation.razor @@ -1,10 +1,18 @@ @page "/docs/getting-started/installation" @layout InstallationLayout - + + + + + + + + + @code { - private Step[] _steps = new Step[] + private readonly Step[] _stepsForTailwindCssv3 = new Step[] { new Step() { @@ -14,16 +22,90 @@ }, new Step() { - Title = "Install Tailwind CSS", + Title = "Install Tailwind CSS (up to v3.*)", Code = new CodeBlock("tailwind.config.js", "installationConfig"), Body = @ -

- LumexUI is built on top of Tailwind CSS. To install, follow the official installation guide. Then, modify the tailwind.config.js file. -

- - Note: the PATH_TO_NUGET is the NuGet package path on the machine. - - +

+ LumexUI is built on top of Tailwind CSS. To install, follow the official installation guide. Then, modify the tailwind.config.js file. +

+ + Note: the PATH_TO_NUGET is the NuGet package path on the machine. + + + Note: if you are using Tailwind CSS v4.0, see /docs/getting-started/installation/tailwindcssv4 instead. + + + }, + new Step() + { + Title = "Configure startup file", + Code = new CodeBlock("Program.cs", "installationServices"), + Body = @

Inject the vital LumexUI services in the Program.cs.

+ }, + new Step() + { + Title = "Include CSS and JS", + Code = new CodeBlock("App.razor", "installationFiles"), + Body = @

Include the mandatory static files into the @("") and the @("").

+ }, + new Step() + { + Title = "Import library's namespace", + Code = new CodeBlock("_Imports.razor", "installationImport"), + Body = @

Modify _Imports.razor file to easily access components throughout your app.

+ }, + new Step() + { + Title = "Setup theme provider", + Code = new CodeBlock("MainLayout.razor", "installationThemeProvider"), + Body = @

Add the LumexThemeProvider into your MainLayout.razor file to enable theming.

+ }, + new Step() + { + Title = "Use the components", + Code = new CodeBlock("Index.razor", "installationUsage"), + Body = @

Now you are all set up to start using LumexUI components in your app!

+ } + }; + + private readonly Step[] _stepsForTailwindCssv4 = new Step[] + { + new Step() + { + Title = "Install LumexUI", + Code = new CodeBlock("Terminal", "installationPackage"), + Body = @

Install LumexUI via terminal using .NET CLI.

+ }, + new Step() + { + Title = "Install Tailwind CSS (Windows)", + Code = new CodeBlock("App.csproj", "installationTargetsWindows"), + Body = @

+ Modify the main .csproj file that serves your app. + This will download the Tailwind CSS standalone CLI if not found and run it when the app builds. +

+ }, + new Step() + { + Title = "Install Tailwind CSS (Linux)", + Code = new CodeBlock("App.csproj", "installationTargetsLinux"), + Body = @

+ Modify the main .csproj file that serves your app. + This will automatically download the Tailwind CSS standalone CLI if not found, give it execute permissions, and run it when the app builds. +

+ }, + new Step() + { + Title = "Import Tailwind CSS in your CSS file", + Code = new CodeBlock("app.css", "installationConfigTailwindV4"), + Body = @ +

+ Import and configure Tailwind CSS in the main .css file of your app. +

+ + Note: the PATH_TO_NUGET is the path to the folder that contains NuGet packages on your machine. + + }, new Step() { diff --git a/docs/LumexUI.Docs.Client/Samples/Installation/installationConfigTailwindV4.html b/docs/LumexUI.Docs.Client/Samples/Installation/installationConfigTailwindV4.html new file mode 100644 index 00000000..95c54489 --- /dev/null +++ b/docs/LumexUI.Docs.Client/Samples/Installation/installationConfigTailwindV4.html @@ -0,0 +1,6 @@ +
@import 'tailwindcss';
+
+@plugin '{PATH_TO_NUGET}/theme/plugin.js';
+
+@source '{PATH_TO_NUGET}/theme/components/*.cs';
+
diff --git a/docs/LumexUI.Docs.Client/Samples/Installation/installationTargetsLinux.html b/docs/LumexUI.Docs.Client/Samples/Installation/installationTargetsLinux.html new file mode 100644 index 00000000..7e7ae788 --- /dev/null +++ b/docs/LumexUI.Docs.Client/Samples/Installation/installationTargetsLinux.html @@ -0,0 +1,9 @@ +
<Target Name="InstallTailwind" AfterTargets="PostBuildEvent" Condition="!Exists('tailwindcss')"> 
+     <Exec Command="wget -O tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64" /> 
+     <Exec Command="chmod u+x tailwindcss" /> 
+ </Target> 
+
+ <Target Name="RunTailwind" AfterTargets="InstallTailwind"> 
+     <Exec Command="./tailwindcss -i ./wwwroot/app.css -o ./wwwroot/output.css --minify" /> 
+ </Target>
+
diff --git a/docs/LumexUI.Docs.Client/Samples/Installation/installationTargetsWindows.html b/docs/LumexUI.Docs.Client/Samples/Installation/installationTargetsWindows.html new file mode 100644 index 00000000..3c106346 --- /dev/null +++ b/docs/LumexUI.Docs.Client/Samples/Installation/installationTargetsWindows.html @@ -0,0 +1,9 @@ +
 <Target Name="InstallTailwind" AfterTargets="PostBuildEvent" Condition="!Exists('tailwindcss.exe')"> 
+     <Exec Command="curl -LO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-windows-x64.exe" />
+     <Exec Command="ren tailwindcss-windows-x64.exe tailwindcss.exe" />
+ </Target> 
+
+ <Target Name="RunTailwind" AfterTargets="InstallTailwind"> 
+     <Exec Command="tailwindcss -i ./wwwroot/app.css -o ./wwwroot/output.css --minify" /> 
+ </Target>
+
\ No newline at end of file From 7de62d9a55141ba802fbb04f768b11c6b15bba1b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aur=C3=A9lien=20Pereira?= Date: Sat, 25 Jan 2025 17:45:25 +0100 Subject: [PATCH 2/3] Correct typos and improve page formatting --- .../Layouts/InstallationLayout.razor | 12 ++++++++++-- .../Pages/Getting Started/Installation.razor | 18 +++++++++++------- 2 files changed, 21 insertions(+), 9 deletions(-) diff --git a/docs/LumexUI.Docs.Client/Components/Layouts/InstallationLayout.razor b/docs/LumexUI.Docs.Client/Components/Layouts/InstallationLayout.razor index d7a14f3f..53354519 100644 --- a/docs/LumexUI.Docs.Client/Components/Layouts/InstallationLayout.razor +++ b/docs/LumexUI.Docs.Client/Components/Layouts/InstallationLayout.razor @@ -42,8 +42,16 @@ Make sure you pick the correct version before proceeding.
    -
  • Install LumixUI with Tailwind CSS v3.*
    • -
  • Install LumixUI with Tailwind CSS v4.0
    • +
  • + Install LumexUI with Tailwind CSS v3.* + +
    • +
  • + Install LumexUI with Tailwind CSS v4.0 + +
diff --git a/docs/LumexUI.Docs.Client/Pages/Getting Started/Installation.razor b/docs/LumexUI.Docs.Client/Pages/Getting Started/Installation.razor index ce09adb7..58368a7b 100644 --- a/docs/LumexUI.Docs.Client/Pages/Getting Started/Installation.razor +++ b/docs/LumexUI.Docs.Client/Pages/Getting Started/Installation.razor @@ -1,15 +1,19 @@ @page "/docs/getting-started/installation" @layout InstallationLayout - - - +
+ + + - + +
- - - +
+ + + +
@code { private readonly Step[] _stepsForTailwindCssv3 = new Step[] From 0f243c40e084625551cba5990ab7c7dae2e69b5d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aur=C3=A9lien=20Pereira?= Date: Sat, 25 Jan 2025 17:53:13 +0100 Subject: [PATCH 3/3] Fix indentation in Targets files --- .../Installation/installationTargetsLinux.html | 12 ++++++------ .../Installation/installationTargetsWindows.html | 14 +++++++------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/docs/LumexUI.Docs.Client/Samples/Installation/installationTargetsLinux.html b/docs/LumexUI.Docs.Client/Samples/Installation/installationTargetsLinux.html index 7e7ae788..568bef93 100644 --- a/docs/LumexUI.Docs.Client/Samples/Installation/installationTargetsLinux.html +++ b/docs/LumexUI.Docs.Client/Samples/Installation/installationTargetsLinux.html @@ -1,9 +1,9 @@ 
<Target Name="InstallTailwind" AfterTargets="PostBuildEvent" Condition="!Exists('tailwindcss')"> 
-     <Exec Command="wget -O tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64" /> 
-     <Exec Command="chmod u+x tailwindcss" /> 
- </Target> 
+  <Exec Command="wget -O tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64" /> 
+  <Exec Command="chmod u+x tailwindcss" /> 
+</Target>
 
- <Target Name="RunTailwind" AfterTargets="InstallTailwind"> 
-     <Exec Command="./tailwindcss -i ./wwwroot/app.css -o ./wwwroot/output.css --minify" /> 
- </Target>
+<Target Name="RunTailwind" AfterTargets="InstallTailwind">
+  <Exec Command="./tailwindcss -i ./wwwroot/app.css -o ./wwwroot/output.css --minify" /> 
+</Target>
diff --git a/docs/LumexUI.Docs.Client/Samples/Installation/installationTargetsWindows.html b/docs/LumexUI.Docs.Client/Samples/Installation/installationTargetsWindows.html index 3c106346..b835a691 100644 --- a/docs/LumexUI.Docs.Client/Samples/Installation/installationTargetsWindows.html +++ b/docs/LumexUI.Docs.Client/Samples/Installation/installationTargetsWindows.html @@ -1,9 +1,9 @@ -
 <Target Name="InstallTailwind" AfterTargets="PostBuildEvent" Condition="!Exists('tailwindcss.exe')"> 
-     <Exec Command="curl -LO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-windows-x64.exe" />
-     <Exec Command="ren tailwindcss-windows-x64.exe tailwindcss.exe" />
- </Target> 
+
<Target Name="InstallTailwind" AfterTargets="PostBuildEvent" Condition="!Exists('tailwindcss.exe')"> 
+   <Exec Command="curl -LO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-windows-x64.exe" />
+   <Exec Command="ren tailwindcss-windows-x64.exe tailwindcss.exe" />
+</Target> 
 
- <Target Name="RunTailwind" AfterTargets="InstallTailwind"> 
-     <Exec Command="tailwindcss -i ./wwwroot/app.css -o ./wwwroot/output.css --minify" /> 
- </Target>
+<Target Name="RunTailwind" AfterTargets="InstallTailwind"> 
+  <Exec Command="tailwindcss -i ./wwwroot/app.css -o ./wwwroot/output.css --minify" /> 
+</Target>
 

\ No newline at end of file