From 5dfd43b1e498d0cff4f59efff82d481b471a0e89 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Wed, 4 Jan 2023 20:16:09 +0400
Subject: [PATCH] Update android roadmap

---
 src/components/ResourcesAlert.astro | 64 +++++++++++++++++++++--------
 src/roadmaps/android/android.md     | 12 +++---
 2 files changed, 52 insertions(+), 24 deletions(-)

diff --git a/src/components/ResourcesAlert.astro b/src/components/ResourcesAlert.astro
index bc1e6f460..f9d5a2494 100644
--- a/src/components/ResourcesAlert.astro
+++ b/src/components/ResourcesAlert.astro
@@ -1,5 +1,5 @@
 ---
-import Icon from "./Icon.astro";
+import Icon from './Icon.astro';
 
 export interface Props {
   roadmapPermalink: string;
@@ -8,40 +8,68 @@ export interface Props {
 const { roadmapPermalink } = Astro.props;
 
 const roadmapId = roadmapPermalink.replace(/\//, '');
-const roadmapTitle = roadmapId === 'devops' ? 'DevOps' : `${roadmapId.charAt(0).toUpperCase()} ${roadmapId.slice(1)}`;
+const hasTNSBanner = ['frontend', 'backend', 'devops'].includes(roadmapId);
+const roadmapTitle =
+  roadmapId === 'devops'
+    ? 'DevOps'
+    : `${roadmapId.charAt(0).toUpperCase()}${roadmapId.slice(1)}`;
 ---
 
-<div class="mt-4 sm:mt-7 border rounded-md mb-0 sm:-mb-[82px]">
-  <!-- Alert for the Sister Site -->
-  <div class="px-2 py-1.5 border-b bg-gray-100 hidden sm:block">
-    <p class="text-sm">Get the latest {roadmapTitle} news from our sister site <a href="#" class="font-semibold underline">TheNewStack.io</a></p>
-  </div>
+<div
+  class:list={[
+    'mt-4 sm:mt-7 border rounded-md mb-0',
+    {
+      'sm:-mb-[82px]': hasTNSBanner,
+      'sm:-mb-[65px]': !hasTNSBanner,
+    },
+  ]}
+>
+  {
+    hasTNSBanner && (
+      <div class='px-2 py-1.5 border-b bg-gray-100 hidden sm:block'>
+        <p class='text-sm'>
+          Get the latest {roadmapTitle} news from our sister site{' '}
+          <a href='#' class='font-semibold underline'>
+            TheNewStack.io
+          </a>
+        </p>
+      </div>
+    )
+  }
 
   <!-- Desktop: Roadmap Resources - Alert -->
-  <div class="hidden sm:flex justify-between px-2 bg-white items-center rounded-bl-md rounded-br-md">
-    <p class="text-sm">
+  <div
+    class:list={[
+      'hidden sm:flex justify-between px-2 bg-white items-center',
+      {
+        'rounded-bl-md rounded-br-md': hasTNSBanner,
+        'rounded-md': !hasTNSBanner,
+      },
+    ]}
+  >
+    <p class='text-sm'>
       <span
-        class="text-yellow-900 bg-yellow-200 py-0.5 px-1 text-xs rounded-sm font-medium uppercase mr-0.5"
+        class='text-yellow-900 bg-yellow-200 py-0.5 px-1 text-xs rounded-sm font-medium uppercase mr-0.5'
         >New</span
       >
       Resources are here, try clicking nodes
     </p>
-  
+
     <a
       href={`${roadmapPermalink}/topics`}
-      class="inline-flex items-center justify-center py-1.5 text-sm font-medium rounded-md hover:text-black text-gray-500 px-1"
+      class='inline-flex items-center justify-center py-1.5 text-sm font-medium rounded-md hover:text-black text-gray-500 px-1'
     >
-      <Icon icon="search" />
-      <span class="ml-2">Search Topics</span>
+      <Icon icon='search' />
+      <span class='ml-2'>Search Topics</span>
     </a>
   </div>
-  
+
   <!-- Mobile - Roadmap resources alert -->
   <p
-    class="block sm:hidden text-sm border border-yellow-500 text-yellow-700 rounded-md py-1.5 px-2 bg-white relative"
+    class='block sm:hidden text-sm border border-yellow-500 text-yellow-700 rounded-md py-1.5 px-2 bg-white relative'
   >
-    Click roadmap items for resources or visit{" "}
-    <a href={`${roadmapPermalink}/topics`} class="text-blue-700 underline">
+    Click roadmap items for resources or visit{' '}
+    <a href={`${roadmapPermalink}/topics`} class='text-blue-700 underline'>
       resources list
     </a>
     .
diff --git a/src/roadmaps/android/android.md b/src/roadmaps/android/android.md
index 9e4aa4a01..f296f13cd 100644
--- a/src/roadmaps/android/android.md
+++ b/src/roadmaps/android/android.md
@@ -1,5 +1,5 @@
 ---
-jsonUrl: "/jsons/android.json"
+# jsonUrl: "/jsons/android.json"
 pdfUrl: "/pdfs/android.pdf"
 order: 4
 featuredTitle: "Android"
@@ -44,7 +44,7 @@ There are multiple ways to develop applications for Android; you can go down the
 
 Here is the full version of the roadmap in a single image and after that we have the broken down version with the resources and links to learn more about each of the boxes.
 
-[![](/assets/roadmaps/android/roadmap.svg)](/assets/roadmaps/android/roadmap.png)
+[![](/roadmaps/android/roadmap.svg)](/roadmaps/android/roadmap.png)
 
 ## Broken Down Version
 Below is the broken down version of the roadmap with links and resources to learn more about each of the items listed in the complete roadmap above.
@@ -52,14 +52,14 @@ Below is the broken down version of the roadmap with links and resources to lear
 ## Pick a Language
 For the languages, you can develop Android apps either by using Kotlin or Java.
 
-[![](/assets/roadmaps/android/pick-language.svg)](/assets/roadmaps/android/pick-language.svg)
+[![](/roadmaps/android/pick-language.svg)](/roadmaps/android/pick-language.svg)
 
 Although, you can use both [Kotlin](https://en.wikipedia.org/wiki/Kotlin_(programming_language)) and [Java](https://en.wikipedia.org/wiki/Java_(programming_language)) to develop native Android apps, [Google announced in 2019](https://android-developers.googleblog.com/2019/05/google-io-2019-empowering-developers-to-build-experiences-on-Android-Play.html) to make Kotlin the preferred way of developing Android applications. If you were to start learning Android development today, Kotlin should be your language of choice.
 
 ## The Fundamentals
 Install [Android Studio](https://developer.android.com/studio) and learn the basics of Kotlin to get started. 
 
-[![](/assets/roadmaps/android/the-fundamentals.png)](/assets/roadmaps/android/the-fundamentals.png)
+[![](/roadmaps/android/the-fundamentals.png)](/roadmaps/android/the-fundamentals.png)
 
 We have also listed down some free resources which you can use for the items listed in the image above. If you have some better ones, please do suggest. Also, you don't need to go through all of them, just go through them and pick what you like.
 
@@ -75,7 +75,7 @@ Note: Android Studio comes with a working installation of Gradle, so you don’t
 ## Version Control Systems
 Version Control Systems record your changes to the codebase and allow you to recall specific versions later. There are multiple Version Control Systems available, but [Git](https://git-scm.com/) is the most common one these days.
 
-[![](/assets/roadmaps/android/git-github.png)](/assets/roadmaps/android/git-github.png)
+[![](/roadmaps/android/git-github.png)](/roadmaps/android/git-github.png)
 
 Here are some of the resources to get you started. Feel free to google and find something else that you find easier.
 
@@ -86,7 +86,7 @@ Here are some of the resources to get you started. Feel free to google and find
 
 Here is the list of items that you are going to need when developing Android applications. Please note that this is an exhaustive list, and you don't need to know it all from the get-go. Get an idea of the items listed, and just start building some apps and keep the items listed in the back of your mind and have a deep dive when using them. 
 
-[![](/assets/roadmaps/android/build-an-application.png)](/assets/roadmaps/android/build-an-application.png)
+[![](/roadmaps/android/build-an-application.png)](/roadmaps/android/build-an-application.png)
 
 To learn more about the items listed in the image above, here are the links to the relevant docs.