From 646a8f01928ddef4ecc93692b0031e8de4157b52 Mon Sep 17 00:00:00 2001 From: Alvin Bryan <107407814+alvinometric@users.noreply.github.com> Date: Tue, 19 Mar 2024 23:20:26 +0000 Subject: [PATCH] Made sure the slugs are consistent in the tutorials (#6604) Some of the slugs for the tutorials were handled in the config file with the other redirects, some were handled locally in the markdown file. This moves all the tutorial slugs to the markdown file, and fixes the slug of the SvelteKit tutorial so it's the same as the others. --------- Co-authored-by: Nnenna Ndukwe --- .../flutter/a-b-testing.md | 2 ++ .../nextjs/implementing-feature-flags.md | 2 ++ ...tekit.md => implementing-feature-flags.md} | 25 +++++++++--------- website/docusaurus.config.js | 12 --------- website/sidebars.js | 5 ++-- .../img/sveltekit-create-flag.png} | Bin .../img/sveltekit-create-project.png} | Bin .../img/sveltekit-tutorial-browser.png} | Bin 8 files changed, 20 insertions(+), 26 deletions(-) rename website/docs/feature-flag-tutorials/sveltekit/{feature-flags-sveltekit.md => implementing-feature-flags.md} (90%) rename website/{docs/feature-flag-tutorials/sveltekit/feat.png => static/img/sveltekit-create-flag.png} (100%) rename website/{docs/feature-flag-tutorials/sveltekit/proj.png => static/img/sveltekit-create-project.png} (100%) rename website/{docs/feature-flag-tutorials/sveltekit/20240202174256.png => static/img/sveltekit-tutorial-browser.png} (100%) diff --git a/website/docs/feature-flag-tutorials/flutter/a-b-testing.md b/website/docs/feature-flag-tutorials/flutter/a-b-testing.md index 3dcf4b87a99..210b2108b62 100644 --- a/website/docs/feature-flag-tutorials/flutter/a-b-testing.md +++ b/website/docs/feature-flag-tutorials/flutter/a-b-testing.md @@ -1,6 +1,8 @@ --- title: A/B Testing in Flutter using Unleash and Mixpanel +slug: '/feature-flag-tutorials/flutter/a-b-testing' --- + :::note This article is a contribution by **[Ayush Bherwani](https://www.linkedin.com/in/ayushbherwani/)** as a part of the **[Community Content Program](https://github.com/unleash/community-content)**. You can also suggest a topic by [opening an issue](https://github.com/Unleash/community-content/issues), or [Write for Unleash](https://www.getunleash.io/blog/get-published-through-unleashs-community-content-program) as a part of the Community Content Program. diff --git a/website/docs/feature-flag-tutorials/nextjs/implementing-feature-flags.md b/website/docs/feature-flag-tutorials/nextjs/implementing-feature-flags.md index 34f510fee74..4839fc9a4da 100644 --- a/website/docs/feature-flag-tutorials/nextjs/implementing-feature-flags.md +++ b/website/docs/feature-flag-tutorials/nextjs/implementing-feature-flags.md @@ -1,6 +1,8 @@ --- title: How to Implement Feature Flags in Next.js using Unleash +slug: /feature-flag-tutorials/nextjs --- + :::note This article is a contribution by **[Kafilat Adeleke](https://www.linkedin.com/in/kafilat-adeleke-650332222/)** as a part of the **[Community Content Program](https://github.com/unleash/community-content)**. You can also suggest a topic by [opening an issue](https://github.com/Unleash/community-content/issues), or [Write for Unleash](https://www.getunleash.io/blog/get-published-through-unleashs-community-content-program) as a part of the Community Content Program. diff --git a/website/docs/feature-flag-tutorials/sveltekit/feature-flags-sveltekit.md b/website/docs/feature-flag-tutorials/sveltekit/implementing-feature-flags.md similarity index 90% rename from website/docs/feature-flag-tutorials/sveltekit/feature-flags-sveltekit.md rename to website/docs/feature-flag-tutorials/sveltekit/implementing-feature-flags.md index 68ae753a9fe..3bb3a379dd2 100644 --- a/website/docs/feature-flag-tutorials/sveltekit/feature-flags-sveltekit.md +++ b/website/docs/feature-flag-tutorials/sveltekit/implementing-feature-flags.md @@ -1,6 +1,7 @@ --- title: How to Implement Feature Flags in SvelteKit description: "How to use Unleash feature flags with SvelteKit." +slug: /feature-flag-tutorials/sveltekit --- Hello and welcome to another tutorial. This is about adding feature flags to an app made with [SvelteKit](https://kit.svelte.dev/), [Unleash](https://www.getunleash.io/) and the official [Unleash Svelte SDK](https://docs.getunleash.io/reference/sdks/svelte). @@ -9,13 +10,13 @@ We'll make a paired-down habits app to keep track of your new year's resolutions While this is not meant to be a complete product, we can leverage feature flags using a full stack framework like Next.js or SvelteKit. The completed code for this implementation is available in [a Github repository](https://github.com/alvinometric/unleash-sveltekit). -- [Setup](#setup) -- [Create a basic habits app](#create-a-basic-habits-app) -- [Adding habits and premium features](#adding-habits-and-premium-features) -- [Showing a different component based on the feature flag](#showing-a-different-component-based-on-the-feature-flag) -- [Conclusion](#conclusion) +1. [Setup](#1-setup) +2. [Create a basic habits app](#2-create-a-basic-habits-app) +3. [Adding habits and premium features](#3-add-habits-and-premium-features) +4. [Showing a different component based on the feature flag](#4-show-a-different-component-based-on-the-feature-flag) +5. [Conclusion](#conclusion) -## Setup +## 1. Setup Create a skeleton SvelteKit project named "habits". @@ -29,7 +30,7 @@ We'll need a few more dependencies. You can install these in one command below: npm i date-fns @unleash/proxy-client-svelte ``` -## Create a basic habits app +## 2. Create a basic habits app We'll use Svelte stores to keep track of a global array of habits. For the sake of simplicity, we won't store these habits anywhere yet (feel free to add localStorage or a database). Our basic habit app will only consist of 3 files. @@ -148,9 +149,9 @@ To complete the basic setup of the app, add a component for each habit that be c Now we have a fully functioning Svelte app in all its glory! Essentially, it's a table with checkboxes. -![Our habits app, a table with each habit as a row](./20240202174256.png) +![Our habits app, a table with each habit as a row](/img/sveltekit-tutorial-browser.png) -## Adding habits and premium features +## 3. Add habits and premium features We have the basics of the app set up, but we could make it more user-friendly. Let's add some more functionality: @@ -218,16 +219,16 @@ What's happening here? A few things: src="/media/habits.mp4" controls> -## Showing a different component based on the feature flag +## 4. Show a different component based on the feature flag On to the main topic, adding feature flags. Go to your Unleash dashboard, and create new project (you're welcome to use the default project here). -![Create a new project in Unleash](./proj.png) +![Create a new project in Unleash](/img/sveltekit-create-project.png) Next, create a feature flag called `maxHabitsIncreased`. -![create a feature flag called "maxHabitsIncreased"](./feat.png) +![create a feature flag called "maxHabitsIncreased"](/img/sveltekit-create-flag.png) Based on whether this flag is enabled or not, we'll set the `maxHabits` value to either 6 or 2. You could set this directly in a flag value if you wanted as well. diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 93a771ceae1..e8c19a91867 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -615,18 +615,6 @@ module.exports = { from: ['/topics/feature-flags/tutorials', '/tutorials'], to: '/feature-flag-tutorials', }, - { - from: '/topics/feature-flags/tutorials/react/implementing-feature-flags', - to: '/feature-flag-tutorials/react', - }, - { - from: '/topics/feature-flags/tutorials/flutter/a-b-testing', - to: '/feature-flag-tutorials/flutter/a-b-testing', - }, - { - from: '/topics/feature-flags/tutorials/nextjs/implementing-feature-flags', - to: '/feature-flag-tutorials/nextjs/implementing-feature-flags', - }, { from: ['/tutorials/academy', '/unleash-academy'], to: '/unleash-academy/introduction', diff --git a/website/sidebars.js b/website/sidebars.js index f3d99fcf87c..cf55fc8d764 100644 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -147,14 +147,15 @@ module.exports = { id: 'feature-flag-tutorials/flutter/a-b-testing', }, { + type: 'doc', label: 'Next.js', id: 'feature-flag-tutorials/nextjs/implementing-feature-flags', }, { type: 'doc', - label: 'Sveltekit', - id: 'feature-flag-tutorials/sveltekit/feature-flags-sveltekit', + label: 'SvelteKit', + id: 'feature-flag-tutorials/sveltekit/implementing-feature-flags', }, ], }, diff --git a/website/docs/feature-flag-tutorials/sveltekit/feat.png b/website/static/img/sveltekit-create-flag.png similarity index 100% rename from website/docs/feature-flag-tutorials/sveltekit/feat.png rename to website/static/img/sveltekit-create-flag.png diff --git a/website/docs/feature-flag-tutorials/sveltekit/proj.png b/website/static/img/sveltekit-create-project.png similarity index 100% rename from website/docs/feature-flag-tutorials/sveltekit/proj.png rename to website/static/img/sveltekit-create-project.png diff --git a/website/docs/feature-flag-tutorials/sveltekit/20240202174256.png b/website/static/img/sveltekit-tutorial-browser.png similarity index 100% rename from website/docs/feature-flag-tutorials/sveltekit/20240202174256.png rename to website/static/img/sveltekit-tutorial-browser.png