From 3a984f27e51a00339b8e7b6001fdd4204c590d5d Mon Sep 17 00:00:00 2001 From: Rico Saupe <145867813+RicoSaupe@users.noreply.github.com> Date: Tue, 19 Dec 2023 17:10:51 +0100 Subject: [PATCH] removed not used md files and fixed links die point to new location in recipes --- docs/recipes/client-server/fable-remoting.md | 2 +- docs/recipes/ui/add-feliz.md | 2 +- docs/recipes/upgrading/v2-to-v3.md | 2 +- .../client-server/fable-remoting.md | 2 +- .../javascript/third-party-react-package.md | 2 +- .../add-npm-package-to-client.md | 18 -------- .../add-nuget-package-to-client.md | 11 ----- docs/v4-recipes/ui/add-bulma.md | 4 +- docs/v4-recipes/ui/add-fontawesome.md | 2 +- docs/v4-recipes/ui/add-style.md | 45 ------------------- docs/v4-recipes/ui/add-tailwind.md | 2 +- docs/v4-recipes/ui/cdn-to-npm.md | 4 +- 12 files changed, 11 insertions(+), 85 deletions(-) delete mode 100644 docs/v4-recipes/package-management/add-npm-package-to-client.md delete mode 100644 docs/v4-recipes/package-management/add-nuget-package-to-client.md delete mode 100644 docs/v4-recipes/ui/add-style.md diff --git a/docs/recipes/client-server/fable-remoting.md b/docs/recipes/client-server/fable-remoting.md index 51a21d71..b0495edb 100644 --- a/docs/recipes/client-server/fable-remoting.md +++ b/docs/recipes/client-server/fable-remoting.md @@ -7,7 +7,7 @@ Add [Fable.Remoting.Giraffe](https://www.nuget.org/packages/Fable.Remoting.Giraffe/) to the Server and [Fable.Remoting.Client](https://www.nuget.org/packages/Fable.Remoting.Client/) to the Client. > See [How Do I Add a NuGet Package to the Server](../package-management/add-nuget-package-to-server.md) -> and [How Do I Add a NuGet Package to the Client](../../v4-recipes/package-management/add-nuget-package-to-client.md). +> and [How Do I Add a NuGet Package to the Client](../../recipes/package-management/add-nuget-package-to-client.md). #### 2. Create the API protocol You now need to create the protocol, or contract, of the API we’ll be creating. Insert the following below the `Route` module in `Shared.fs`: diff --git a/docs/recipes/ui/add-feliz.md b/docs/recipes/ui/add-feliz.md index e784117b..7099608d 100644 --- a/docs/recipes/ui/add-feliz.md +++ b/docs/recipes/ui/add-feliz.md @@ -2,7 +2,7 @@ [Feliz](https://github.com/Zaid-Ajaj/Feliz) is a wrapper for the base [React](https://reactjs.org/) DSL library that emphasises consistency, lightweight formatting, discoverable attributes and full type-safety. The default SAFE Template already uses Feliz. ### Using Feliz -1. [Add Feliz to your project](./../../v4-recipes//package-management/add-nuget-package-to-client.md) +1. [Add Feliz to your project](./../../recipes/package-management/add-nuget-package-to-client.md) 1. Start using Feliz in your code. ```fsharp diff --git a/docs/recipes/upgrading/v2-to-v3.md b/docs/recipes/upgrading/v2-to-v3.md index 411a8b85..9e2c4158 100644 --- a/docs/recipes/upgrading/v2-to-v3.md +++ b/docs/recipes/upgrading/v2-to-v3.md @@ -83,7 +83,7 @@ dotnet paket install **Important** If you have made any modifications to the webpack file, you will need to apply them back in manually. -* If you were using CSS files, make sure to follow the [Stylesheet recipe](../../v4-recipes/ui/add-style.md) to add them back in. +* If you were using CSS files, make sure to follow the [Stylesheet recipe](../../recipes/ui/add-style.md) to add them back in. #### 11. Update TargetFramework in all projects * **Overwite** the `Client.fsproj` diff --git a/docs/v4-recipes/client-server/fable-remoting.md b/docs/v4-recipes/client-server/fable-remoting.md index 360d2df7..eb104338 100644 --- a/docs/v4-recipes/client-server/fable-remoting.md +++ b/docs/v4-recipes/client-server/fable-remoting.md @@ -7,7 +7,7 @@ Add [Fable.Remoting.Giraffe](https://www.nuget.org/packages/Fable.Remoting.Giraffe/) to the Server and [Fable.Remoting.Client](https://www.nuget.org/packages/Fable.Remoting.Client/) to the Client. > See [How Do I Add a NuGet Package to the Server](../../v4-recipes/package-management/add-nuget-package-to-server.md) -> and [How Do I Add a NuGet Package to the Client](../../v4-recipes/package-management/add-nuget-package-to-client.md). +> and [How Do I Add a NuGet Package to the Client](../../recipes/package-management/add-nuget-package-to-client.md). #### 2. Create the API protocol You now need to create the protocol, or contract, of the API we’ll be creating. Insert the following below the `Route` module in `Shared.fs`: diff --git a/docs/v4-recipes/javascript/third-party-react-package.md b/docs/v4-recipes/javascript/third-party-react-package.md index cfbb2d90..c8510334 100644 --- a/docs/v4-recipes/javascript/third-party-react-package.md +++ b/docs/v4-recipes/javascript/third-party-react-package.md @@ -1,7 +1,7 @@ To use a third-party React library in a SAFE application, you need to write an F# wrapper around it. There are two ways for doing this - using [Fable.React](https://www.nuget.org/packages/Fable.React/) or using [Feliz](https://zaid-ajaj.github.io/Feliz/). ## Prerequisites -This recipe uses the [react-d3-speedometer NPM package](https://www.npmjs.com/package/react-d3-speedometer) for demonstration purposes. [Add it to your Client](../package-management/add-npm-package-to-client.md) before continuing. +This recipe uses the [react-d3-speedometer NPM package](https://www.npmjs.com/package/react-d3-speedometer) for demonstration purposes. [Add it to your Client](../../recipes/package-management/add-npm-package-to-client.md) before continuing. ## Fable.React - Setup diff --git a/docs/v4-recipes/package-management/add-npm-package-to-client.md b/docs/v4-recipes/package-management/add-npm-package-to-client.md deleted file mode 100644 index 27647c50..00000000 --- a/docs/v4-recipes/package-management/add-npm-package-to-client.md +++ /dev/null @@ -1,18 +0,0 @@ -# How do I add an NPM package to the Client? - -When you want to call a JavaScript library from your Client, it is easy to import and reference it using [NPM](https://docs.npmjs.com/cli/npm). - -Run the following command: -```bash -npm install name-of-package -``` - -This will download the package into the solution's **node_modules** folder. - -You will also see a reference to the package in the Client's **package.json** file: -```json -"dependencies": { - "name-of-package": "^1.0.0" -} -``` - diff --git a/docs/v4-recipes/package-management/add-nuget-package-to-client.md b/docs/v4-recipes/package-management/add-nuget-package-to-client.md deleted file mode 100644 index bde37044..00000000 --- a/docs/v4-recipes/package-management/add-nuget-package-to-client.md +++ /dev/null @@ -1,11 +0,0 @@ -# How do I add a NuGet package to the Client? -Adding packages to the Client project is a very [similar process to the Server](add-nuget-package-to-server.md), with a few key differences: - -- Any references to the `Server` directory should be `Client` - -- Client code written in F# is converted into JavaScript using [Fable](https://fable.io/docs/index.html). Because of this, we must be careful to only reference libraries which are [Fable compatible](https://fable.io/docs/your-fable-project/use-a-fable-library.html). - -- If the NuGet package uses any JS libraries you must install them. - For simplicity, [use Femto to sync](./sync-nuget-and-npm-packages.md) - if the NuGet package is compatible - or [install via NPM](./add-npm-package-to-client.md) manually, if not. - -There are [lots of great libraries](../../awesome-safe-components.md) available to choose from. \ No newline at end of file diff --git a/docs/v4-recipes/ui/add-bulma.md b/docs/v4-recipes/ui/add-bulma.md index 8e30de5a..fd5b1375 100644 --- a/docs/v4-recipes/ui/add-bulma.md +++ b/docs/v4-recipes/ui/add-bulma.md @@ -8,7 +8,7 @@ By adding either of these to your SAFE project alongside the [Bulma stylesheet or the Bulma NPM package](https://bulma.io/documentation/overview/start/), you can take full advantage of Bulma. ### Using Feliz.Bulma -1. [Add the Feliz.Bulma NuGet package to the solution](./../package-management/add-nuget-package-to-client.md). +1. [Add the Feliz.Bulma NuGet package to the solution](../../recipes/package-management/add-nuget-package-to-client.md). 1. Start using Feliz.Bulma components in your F# files. ```fsharp open Feliz.Bulma @@ -19,7 +19,7 @@ Bulma.button.button [ ``` ### Using Fulma -1. [Add the Fulma NuGet package to the solution](./../package-management/add-nuget-package-to-client.md). +1. [Add the Fulma NuGet package to the solution](../../recipes/package-management/add-nuget-package-to-client.md). 1. Start using Fulma components in your F# files. ```fsharp open Fulma diff --git a/docs/v4-recipes/ui/add-fontawesome.md b/docs/v4-recipes/ui/add-fontawesome.md index 0fc784d2..d4e0b6ef 100644 --- a/docs/v4-recipes/ui/add-fontawesome.md +++ b/docs/v4-recipes/ui/add-fontawesome.md @@ -13,7 +13,7 @@ If you’re using the minimal template, there are a couple of things to do befor #### 1. The NuGet Package Add [Fable.FontAwesome.Free NuGet Package](https://www.nuget.org/packages/Fable.FontAwesome.Free/) to the Client project. -> See [How do I add a NuGet package to the Client?](../package-management/add-nuget-package-to-client.md). +> See [How do I add a NuGet package to the Client?](../../recipes/package-management/add-nuget-package-to-client.md). #### 2. The CDN Link Open the `index.html` file and add the following line to the `head` element: diff --git a/docs/v4-recipes/ui/add-style.md b/docs/v4-recipes/ui/add-style.md deleted file mode 100644 index 6a84ea21..00000000 --- a/docs/v4-recipes/ui/add-style.md +++ /dev/null @@ -1,45 +0,0 @@ -# How Do I Use stylesheets with SAFE? -If you wish to use your own CSS or SASS stylesheets with SAFE apps, you can embed either through webpack. The template already includes all required NPM packages you may need, so you will only need to configure webpack to reference your stylesheet and include in the outputs. - -## Adding the Stylesheet -First, create a CSS file in the `src/Client` folder of your solution e.g `style.css`. - -> The same approach can be taken for `.scss` files. - -## Configuring WebPack - -### I'm using the Standard Template -#### 1. Link to the stylesheet - -Inside the `webpack.config.js` file, add the following variable to the `CONFIG` object, which points to the style file you created previously. -```javascript -cssEntry: './src/Client/style.css', -``` - -#### 2. Embed CSS into outputs - Find the `entry` field in the `module.exports` object at the bottom of the file, and replace it with the following: -```javascript -entry: isProduction ? { - app: [resolve(CONFIG.fsharpEntry), resolve(CONFIG.cssEntry)] -} : { - app: resolve(CONFIG.fsharpEntry), - style: resolve(CONFIG.cssEntry) -}, -``` - -This combines the css and F# outputs into a single bundle for production, and separately for dev. - -### I'm using the Minimal Template -#### 1. Embed CSS into outputs -Find the `entry` field in the `module.exports` object at the bottom of the file, and replace it with the following: -```javascript -entry: { - app: [ - resolve('./src/Client/Client.fsproj'), - resolve('./src/Client/style.css') - ] -}, -``` - -## There you have it! -You can now style your app by writing to the `style.css` file. \ No newline at end of file diff --git a/docs/v4-recipes/ui/add-tailwind.md b/docs/v4-recipes/ui/add-tailwind.md index a66ba9fa..255a614b 100644 --- a/docs/v4-recipes/ui/add-tailwind.md +++ b/docs/v4-recipes/ui/add-tailwind.md @@ -2,7 +2,7 @@ [Tailwind](https://tailwindcss.com/) is a utility-first CSS framework packed that can be composed to build any design, directly in your markup. -1. [Add a stylesheet](add-style.md) to the project +1. [Add a stylesheet](../../recipes/ui/add-style.md) to the project 2. Install the required npm packages ```shell diff --git a/docs/v4-recipes/ui/cdn-to-npm.md b/docs/v4-recipes/ui/cdn-to-npm.md index 2246b201..5b5ac7fc 100644 --- a/docs/v4-recipes/ui/cdn-to-npm.md +++ b/docs/v4-recipes/ui/cdn-to-npm.md @@ -11,7 +11,7 @@ Find the following line in `src/Client/index.html` and delete it before moving o #### 2. Add the NPM Package Go ahead and add the [Bulma NPM package](https://www.npmjs.com/package/bulma) to your project. -> See: [How do I add an NPM package to the client?](../package-management/add-npm-package-to-client.md) +> See: [How do I add an NPM package to the client?](../../recipes/package-management/add-npm-package-to-client.md) #### 3. Load the Stylesheets There are two ways for loading the stylesheets: @@ -27,7 +27,7 @@ importAll "bulma/bulma.sass" > You can use this approach for any NPM package. ##### b. Using Sass -1. Add a Sass stylesheet to your project using [this recipe](add-style.md). +1. Add a Sass stylesheet to your project using [this recipe](../../recipes/ui/add-style.md). 2. Add the following line to your Sass file to bring in Bulma ```sass @import "~bulma/bulma.sass"