UI changes on progress

.astro/settings.json

@@ -1,8 +0,0 @@
-{
-	"devToolbar": {
-		"enabled": false
-	},
-	"_variables": {
-		"lastUpdateCheck": 1714413381505
-	}
-}

.env.example

@@ -1,3 +1,2 @@
-PUBLIC_API_URL=https://api.roadmap.sh
+PUBLIC_API_URL=http://api.roadmap.sh
 PUBLIC_AVATAR_BASE_URL=https://dodrc8eu8m09s.cloudfront.net/avatars
-PUBLIC_EDITOR_APP_URL=https://draw.roadmap.sh

.github/ISSUE_TEMPLATE/04-roadmap-contribution.yml

@@ -14,12 +14,24 @@ body:
       placeholder: e.g. Roadmap to learn Data Science
     validations:
       required: true
+  - type: dropdown
+    id: browsers
+    attributes:
+      label: Is this roadmap prepared by you or someone else?
+      options:
+        - I prepared this roadmap
+        - I found this roadmap online (please provide a link below)
   - type: textarea
     id: roadmap-description
     attributes:
-      label: Roadmap Link
-      description: Please create the roadmap [using our roadmap editor](https://twitter.com/kamrify/status/1708293162693767426) and submit the roadmap link.
+      label: Roadmap Items
+      description: Please submit a nested list of items which we can convert into the visual. Here is an [example of roadmap items list.](https://gist.github.com/kamranahmedse/98758d2c73799b3a6ce17385e4c548a5).
       placeholder: |
-          https://roadmap.sh/xyz
+          - Item 1
+            - Subitem 1
+            - Subitem 2
+          - Item 2
+            - Subitem 1
+            - Subitem 2
     validations:
-      required: true
+      required: true

.github/workflows/cloudfront-cache.yml

@@ -1,20 +0,0 @@
-name: Clears Cloudfront Cache
-on:
-  # Allow manual Run
-  workflow_dispatch:
-  # Run at midnight utc
-  schedule:
-    - cron: '0 0 * * *'
-jobs:
-  aws_costs:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Clear Cloudfront Caching
-        run: |
-          curl -L \
-            -X POST \
-            -H "Accept: application/vnd.github+json" \
-            -H "Authorization: Bearer ${{ secrets.GH_PAT }}" \
-            -H "X-GitHub-Api-Version: 2022-11-28" \
-            https://api.github.com/repos/roadmapsh/infra-ansible/actions/workflows/playbook.yml/dispatches \
-            -d '{ "ref":"master", "inputs": { "playbook": "roadmap_web.yml", "tags": "cloudfront", "is_verbose": false } }'

.github/workflows/deploy.yml

@@ -0,0 +1,38 @@
+name: Deployment to GH Pages
+on:
+  push:
+    branches: [ master ]
+env:
+  PUBLIC_API_URL: "https://api.roadmap.sh"
+  PUBLIC_AVATAR_BASE_URL: "https://dodrc8eu8m09s.cloudfront.net/avatars"
+  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+  PAT: ${{ secrets.PAT }}
+  CI: true
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+      with:
+        persist-credentials: false
+    - uses: actions/setup-node@v1
+      with:
+        node-version: 18
+    - run: git config --global url."https://${{ secrets.PAT }}@github.com/".insteadOf ssh://git@github.com/
+    - uses: pnpm/action-setup@v2.2.2
+      with:
+        version: 7.13.4
+    - name: Setup Environment
+      run: |
+        pnpm install
+    - name: Generate meta and build
+      run: |
+        npm run build
+        touch ./dist/.nojekyll
+        echo 'roadmap.sh' > ./dist/CNAME
+    - name: Deploy to GH Pages
+      run: |
+        git config user.email "kamranahmed.se@gmail.com"
+        git config user.name "Kamran Ahmed"
+        git remote set-url origin https://x-access-token:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
+        npm run deploy

.github/workflows/deployment.yml

@@ -1,62 +0,0 @@
-name: Deploy to EC2
-on:
-  workflow_dispatch: # allow manual run
-  push:
-    branches:
-      - master
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v2
-        with:
-          fetch-depth: 2
-      - uses: actions/setup-node@v1
-        with:
-          node-version: 20
-      - uses: pnpm/action-setup@v3.0.0
-        with:
-          version: 8.15.6
-
-      # --------------------
-      # Setup configuration
-      # --------------------
-      - name: Prepare configuration files
-        run: |
-          git clone https://${{ secrets.GH_PAT }}@github.com/roadmapsh/infra-config.git configuration --depth 1
-      - name: Copy configuration files
-        run: |
-          cp configuration/dist/github/developer-roadmap.env .env
-
-      # --------------------
-      # Prepare the build
-      # --------------------
-      - name: Install dependencies
-        run: |
-          pnpm install
-      - name: Generate build
-        run: |
-          git clone https://${{ secrets.GH_PAT }}@github.com/roadmapsh/web-draw.git .temp/web-draw --depth 1
-          npm run generate-renderer
-          npm run compress:images
-          npm run build
-
-      # --------------------
-      # Deploy to EC2
-      # --------------------
-      - uses: webfactory/ssh-agent@v0.7.0
-        with:
-          ssh-private-key: ${{ secrets.EC2_PRIVATE_KEY }}
-      - name: Deploy app to EC2
-        run: |
-          rsync -apvz --delete --no-times --exclude "configuration" -e "ssh -o StrictHostKeyChecking=no" -p ./ ${{ secrets.EC2_USERNAME }}@${{ secrets.EC2_HOST }}:/var/www/roadmap.sh/
-      - name: Restart PM2
-        uses: appleboy/ssh-action@master
-        with:
-          host: ${{ secrets.EC2_HOST }}
-          username: ${{ secrets.EC2_USERNAME }}
-          key: ${{ secrets.EC2_PRIVATE_KEY }}
-          script: |
-            cd /var/www/roadmap.sh
-            sudo pm2 restart web-roadmap

.github/workflows/update-deps.yml

@@ -9,7 +9,7 @@ jobs:
   upgrade-deps:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v2
       - uses: actions/setup-node@v3
         with:
           node-version: 18

.gitignore

@@ -1,5 +1,4 @@
 .idea
-.temp
 
 # build output
 dist/
@@ -28,6 +27,3 @@ pnpm-debug.log*
 /playwright/.cache/
 tests-examples
 *.csv
-
-/editor/*
-!/editor/readonly-editor.tsx

.npmrc

@@ -1,2 +0,0 @@
-auto-install-peers=true
-strict-peer-dependencies=false

.prettierrc.cjs

@@ -13,6 +13,6 @@ module.exports = {
   ],
   plugins: [
     require.resolve('prettier-plugin-astro'),
-    'prettier-plugin-tailwindcss',
+    require('prettier-plugin-tailwindcss'),
   ],
 };

astro.config.mjs

@@ -1,13 +1,13 @@
 // https://astro.build/config
+import preact from '@astrojs/preact';
 import sitemap from '@astrojs/sitemap';
 import tailwind from '@astrojs/tailwind';
-import node from '@astrojs/node';
+import compress from 'astro-compress';
 import { defineConfig } from 'astro/config';
 import rehypeExternalLinks from 'rehype-external-links';
+import { fileURLToPath } from 'node:url';
 import { serializeSitemap, shouldIndexPage } from './sitemap.mjs';
 
-import react from '@astrojs/react';
-
 // https://astro.build/config
 export default defineConfig({
   site: 'https://roadmap.sh/',
@@ -28,24 +28,40 @@ export default defineConfig({
               'mailto:',
               'https://github.com/kamranahmedse',
               'https://thenewstack.io',
-              'https://kamranahmed.info',
+              'https://cs.fyi',
               'https://roadmap.sh',
             ];
+
             if (whiteListedStarts.some((start) => href.startsWith(start))) {
               return [];
             }
+
             return 'noopener noreferrer nofollow';
           },
         },
       ],
     ],
   },
-  output: 'hybrid',
-  adapter: node({
-    mode: 'standalone',
-  }),
-  trailingSlash: 'never',
+  build: {
+    format: 'file',
+  },
   integrations: [
+    {
+      name: 'client-authenticated',
+      hooks: {
+        'astro:config:setup'(options) {
+          options.addClientDirective({
+            name: 'authenticated',
+            entrypoint: fileURLToPath(
+              new URL(
+                './src/directives/client-authenticated.mjs',
+                import.meta.url
+              )
+            ),
+          });
+        },
+      },
+    },
     tailwind({
       config: {
         applyBaseStyles: false,
@@ -55,6 +71,10 @@ export default defineConfig({
       filter: shouldIndexPage,
       serialize: serializeSitemap,
     }),
-    react(),
+    compress({
+      css: false,
+      js: false,
+    }),
+    preact(),
   ],
 });

contributing.md

@@ -30,12 +30,11 @@ Find [the content directory inside the relevant roadmap](https://github.com/kamr
 
 ## Guidelines
 
-- <p><strong>Adding everything available out there is not the goal!</strong><br />
+- <p><strong>Adding everything available out there is not the goal!</strong><br /> 
   The roadmaps represent the skillset most valuable today, i.e., if you were to enter any of the listed fields today, what would you learn?! There might be things that are of-course being used today but prioritize the things that are most in demand today, e.g., agreed that lots of people are using angular.js today but you wouldn't want to learn that instead of React, Angular, or Vue. Use your critical thinking to filter out non-essential stuff. Give honest arguments for why the resource should be included.</p>
-- <p><strong>Do not add things you have not evaluated personally!</strong><br />
+- <p><strong>Do not add things you have not evaluated personally!</strong><br /> 
   Use your critical thinking to filter out non-essential stuff. Give honest arguments for why the resource should be included. Have you read this book? Can you give a short article?</p>
 - <p><strong>Create a Single PR for Content Additions</strong></p>
-
-  If you are planning to contribute by adding content to the roadmaps, I recommend you to clone the repository, add content to the [content directory of the roadmap](./src/data/roadmaps/) and create a single PR to make it easier for me to review and merge the PR.
+  If you are planning to contribute by adding content to the roadmaps, I recommend you to clone the repository, add content to the [content directory of the roadmap](./content/roadmaps/) and create a single PR to make it easier for me to review and merge the PR.
 - Write meaningful commit messages
 - Look at the existing issues/pull requests before opening new ones

editor/readonly-editor.tsx

@@ -1,14 +0,0 @@
-export function ReadonlyEditor(props: any) {
-  return (
-    <div className="fixed bottom-0 left-0 right-0 top-0 z-[9999] border bg-white p-5 text-black">
-      <h2 className="mb-2 text-xl font-semibold">Private Component</h2>
-      <p className="mb-4">
-        Renderer is a private component. If you are a collaborator and have
-        access to it. Run the following command:
-      </p>
-      <code className="mt-5 rounded-md bg-gray-800 p-2 text-white">
-        npm run generate-renderer
-      </code>
-    </div>
-  );
-}

package.json

@@ -1,86 +1,55 @@
 {
   "name": "roadmap.sh",
   "type": "module",
-  "version": "1.0.0",
+  "version": "0.0.1",
   "private": true,
   "scripts": {
-    "dev": "astro dev --port 3000",
+    "dev": "astro dev",
     "start": "astro dev",
     "build": "astro build",
     "preview": "astro preview",
     "format": "prettier --write .",
     "astro": "astro",
     "deploy": "NODE_DEBUG=gh-pages gh-pages -d dist -t",
+    "compress:jsons": "node scripts/compress-jsons.cjs",
     "upgrade": "ncu -u",
     "roadmap-links": "node scripts/roadmap-links.cjs",
     "roadmap-dirs": "node scripts/roadmap-dirs.cjs",
     "roadmap-content": "node scripts/roadmap-content.cjs",
-    "generate-renderer": "sh scripts/generate-renderer.sh",
     "best-practice-dirs": "node scripts/best-practice-dirs.cjs",
     "best-practice-content": "node scripts/best-practice-content.cjs",
-    "generate:og": "node ./scripts/generate-og-images.mjs",
-    "compress:images": "tsx ./scripts/compress-images.ts",
     "test:e2e": "playwright test"
   },
   "dependencies": {
-    "@astrojs/node": "^8.2.5",
-    "@astrojs/react": "^3.3.1",
-    "@astrojs/sitemap": "^3.1.4",
-    "@astrojs/tailwind": "^5.1.0",
-    "@fingerprintjs/fingerprintjs": "^4.3.0",
-    "@nanostores/react": "^0.7.2",
-    "@resvg/resvg-js": "^2.6.2",
-    "@types/react": "^18.3.1",
-    "@types/react-dom": "^18.3.0",
-    "astro": "^4.7.0",
-    "clsx": "^2.1.1",
-    "dayjs": "^1.11.11",
-    "dom-to-image": "^2.6.0",
-    "dracula-prism": "^2.1.16",
-    "gray-matter": "^4.0.3",
-    "htm": "^3.1.1",
-    "image-size": "^1.1.1",
-    "jose": "^5.2.4",
+    "@astrojs/preact": "^2.2.1",
+    "@astrojs/sitemap": "^1.3.3",
+    "@astrojs/tailwind": "^3.1.3",
+    "@fingerprintjs/fingerprintjs": "^3.4.1",
+    "@nanostores/preact": "^0.5.0",
+    "astro": "^2.6.6",
+    "astro-compress": "^1.1.47",
+    "jose": "^4.14.4",
     "js-cookie": "^3.0.5",
-    "lucide-react": "^0.376.0",
-    "nanoid": "^5.0.7",
-    "nanostores": "^0.10.3",
-    "node-html-parser": "^6.1.13",
-    "npm-check-updates": "^16.14.20",
-    "prismjs": "^1.29.0",
-    "react": "^18.3.1",
-    "react-calendar-heatmap": "^1.9.0",
-    "react-confetti": "^6.1.0",
-    "react-dom": "^18.3.1",
-    "react-tooltip": "^5.26.4",
-    "reactflow": "^11.11.2",
-    "rehype-external-links": "^3.0.0",
-    "remark-parse": "^11.0.0",
+    "nanostores": "^0.9.2",
+    "node-html-parser": "^6.1.5",
+    "npm-check-updates": "^16.10.12",
+    "preact": "^10.15.1",
+    "rehype-external-links": "^2.1.0",
     "roadmap-renderer": "^1.0.6",
-    "satori": "^0.10.13",
-    "satori-html": "^0.3.2",
-    "sharp": "^0.33.3",
     "slugify": "^1.6.6",
-    "tailwind-merge": "^2.3.0",
-    "tailwindcss": "^3.4.3",
-    "unified": "^11.0.4",
-    "zustand": "^4.5.2"
+    "tailwindcss": "^3.3.2"
   },
   "devDependencies": {
-    "@playwright/test": "^1.43.1",
-    "@tailwindcss/typography": "^0.5.13",
-    "@types/dom-to-image": "^2.6.7",
-    "@types/js-cookie": "^3.0.6",
-    "@types/prismjs": "^1.26.3",
-    "@types/react-calendar-heatmap": "^1.6.7",
+    "@playwright/test": "^1.35.1",
+    "@tailwindcss/typography": "^0.5.9",
+    "@types/js-cookie": "^3.0.3",
     "csv-parser": "^3.0.0",
-    "gh-pages": "^6.1.1",
+    "gh-pages": "^5.0.0",
     "js-yaml": "^4.1.0",
-    "markdown-it": "^14.1.0",
-    "openai": "^4.38.5",
-    "prettier": "^3.2.5",
-    "prettier-plugin-astro": "^0.13.0",
-    "prettier-plugin-tailwindcss": "^0.5.14",
-    "tsx": "^4.7.3"
+    "markdown-it": "^13.0.1",
+    "openai": "^3.3.0",
+    "prettier": "^2.8.8",
+    "prettier-plugin-astro": "^0.10.0",
+    "prettier-plugin-tailwindcss": "^0.3.0"
   }
 }

public/images/graph.svg

@@ -1,3 +0,0 @@
- <svg width="46" height="27" viewBox="0 0 46 27" fill="none" xmlns="http://www.w3.org/2000/svg">
-   <path d="M43.354 0.9C42.184 0.9 41.2371 1.84684 41.2371 3.01686C41.2371 3.30867 41.3062 3.57708 41.4117 3.82435L33.4085 15.0163C33.38 15.0161 33.3514 15.0167 33.3248 15.0172C33.3051 15.0176 33.2864 15.018 33.2697 15.018C32.8703 15.018 32.484 15.1223 32.161 15.3186L25.2976 11.9024C25.1995 10.8219 24.2903 9.97585 23.1854 9.97585C22.0154 9.97585 21.0686 10.9227 21.0686 12.0927C21.0686 12.1865 21.0799 12.2794 21.0925 12.3656L13.8077 18.1561C13.5852 18.0783 13.3472 18.0433 13.1011 18.0433C12.0622 18.0433 11.2066 18.7882 11.0265 19.7732L4.26122 22.5041C3.91213 22.2447 3.48642 22.077 3.01686 22.077C1.84684 22.077 0.9 23.0238 0.9 24.1938C0.9 25.3639 1.84684 26.3107 3.01686 26.3107C4.06426 26.3107 4.92372 25.5497 5.0923 24.5492L11.8566 21.8497C12.2057 22.1092 12.6315 22.277 13.1011 22.277C14.2711 22.277 15.218 21.3301 15.218 20.1601C15.218 20.0663 15.2067 19.9735 15.194 19.8873L22.4789 14.0968C22.7013 14.1746 22.9393 14.2096 23.1854 14.2096C23.5848 14.2096 23.9711 14.1053 24.2941 13.909L31.1575 17.3252C31.2556 18.4057 32.1649 19.2517 33.2697 19.2517C34.4397 19.2517 35.3866 18.3049 35.3866 17.1348C35.3866 16.843 35.3175 16.5746 35.2119 16.3273L43.2151 5.13536C43.2437 5.13561 43.2723 5.13503 43.2989 5.13449C43.3186 5.13409 43.3373 5.13371 43.354 5.13371C44.524 5.13371 45.4708 4.18687 45.4708 3.01686C45.4708 1.84684 44.524 0.9 43.354 0.9Z" fill="black" stroke="black" stroke-width="0.2" />
- </svg>

public/images/hackernews.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32">
-    <path fill="#94a3b8" d="M5 5v22h22V5zm2 2h18v18H7zm4.5 4l3.5 6v5h2v-5l3.5-6h-2L16 15.281L13.5 11z"></path>
-</svg>

public/images/reddit.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="#94a3b8" d="M288 568a56 56 0 1 0 112 0a56 56 0 1 0-112 0zm338.7 119.7c-23.1 18.2-68.9 37.8-114.7 37.8s-91.6-19.6-114.7-37.8c-14.4-11.3-35.3-8.9-46.7 5.5s-8.9 35.3 5.5 46.7C396.3 771.6 457.5 792 512 792s115.7-20.4 155.9-52.1a33.25 33.25 0 1 0-41.2-52.2zM960 456c0-61.9-50.1-112-112-112c-42.1 0-78.7 23.2-97.9 57.6c-57.6-31.5-127.7-51.8-204.1-56.5L612.9 195l127.9 36.9c11.5 32.6 42.6 56.1 79.2 56.1c46.4 0 84-37.6 84-84s-37.6-84-84-84c-32 0-59.8 17.9-74 44.2L603.5 123a33.2 33.2 0 0 0-39.6 18.4l-90.8 203.9c-74.5 5.2-142.9 25.4-199.2 56.2A111.94 111.94 0 0 0 176 344c-61.9 0-112 50.1-112 112c0 45.8 27.5 85.1 66.8 102.5c-7.1 21-10.8 43-10.8 65.5c0 154.6 175.5 280 392 280s392-125.4 392-280c0-22.6-3.8-44.5-10.8-65.5C932.5 541.1 960 501.8 960 456zM820 172.5a31.5 31.5 0 1 1 0 63a31.5 31.5 0 0 1 0-63zM120 456c0-30.9 25.1-56 56-56a56 56 0 0 1 50.6 32.1c-29.3 22.2-53.5 47.8-71.5 75.9a56.23 56.23 0 0 1-35.1-52zm392 381.5c-179.8 0-325.5-95.6-325.5-213.5S332.2 410.5 512 410.5S837.5 506.1 837.5 624S691.8 837.5 512 837.5zM868.8 508c-17.9-28.1-42.2-53.7-71.5-75.9c9-18.9 28.3-32.1 50.6-32.1c30.9 0 56 25.1 56 56c.1 23.5-14.5 43.7-35.1 52zM624 568a56 56 0 1 0 112 0a56 56 0 1 0-112 0z"></path></svg>