github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Resolve merge conflicts

Browse Source
feat/roadcards
Kamran Ahmed 1 year ago
parent 3a9aaf0b92 af926002e9
commit c2a43acc97
14 changed files with 316 additions and 135 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 17
      astro.config.mjs
  2. 6
      package.json
  3. 85
      pnpm-lock.yaml
  4. 4
      src/components/Activity/EmptyActivity.tsx
  5. 20
      src/components/HeroSection/CheckIcon.tsx
  6. 23
      src/components/HeroSection/EmptyProgress.tsx
  7. 105
      src/components/HeroSection/FavoriteRoadmaps.tsx
  8. 28
      src/components/HeroSection/HeroSection.astro
  9. 46
      src/components/HeroSection/ProgressList.tsx
  10. 12
      src/components/PageSponsor.tsx
  11. 10
      src/data/roadmaps/cpp/content/115-compilers/100-stages.md
  12. 9
      src/directives/client-authenticated.mjs
  13. 58
      src/lib/home-progress.ts
  14. 28
      src/pages/index.astro

17
astro.config.mjs
Unescape View File

@ -5,6 +5,7 @@ import tailwind from '@astrojs/tailwind';
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';
// https://astro.build/config
@ -45,6 +46,22 @@ export default defineConfig({
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,

6
package.json
Unescape View File

@ -26,8 +26,8 @@
"@astrojs/tailwind": "^3.1.3",
"@fingerprintjs/fingerprintjs": "^3.4.1",
"@nanostores/preact": "^0.5.0",
"astro": "^2.5.7",
"astro-compress": "^1.1.46",
"astro": "^2.6.3",
"astro-compress": "^1.1.47",
"jose": "^4.14.4",
"js-cookie": "^3.0.5",
"nanostores": "^0.9.1",
@ -40,7 +40,7 @@
"tailwindcss": "^3.3.2"
},
"devDependencies": {
"@playwright/test": "^1.34.3",
"@playwright/test": "^1.35.0",
"@tailwindcss/typography": "^0.5.9",
"@types/js-cookie": "^3.0.3",
"csv-parser": "^3.0.0",

85
pnpm-lock.yaml
Unescape View File

@ -10,11 +10,11 @@ specifiers:
'@astrojs/tailwind': ^3.1.3
'@fingerprintjs/fingerprintjs': ^3.4.1
'@nanostores/preact': ^0.5.0
'@playwright/test': ^1.34.3
'@playwright/test': ^1.35.0
'@tailwindcss/typography': ^0.5.9
'@types/js-cookie': ^3.0.3
astro: ^2.5.7
astro-compress: ^1.1.46
astro: ^2.6.3
astro-compress: ^1.1.47
csv-parser: ^3.0.0
gh-pages: ^5.0.0
jose: ^4.14.4
@ -37,11 +37,11 @@ specifiers:
dependencies:
'@astrojs/preact': 2.2.1_preact@10.15.1
'@astrojs/sitemap': 1.3.3
'@astrojs/tailwind': 3.1.3_cyxi2rbbvaq22julk2hkhgjf7u
'@astrojs/tailwind': 3.1.3_v3vh2dd4sag23uewccz5c4ppyu
'@fingerprintjs/fingerprintjs': 3.4.1
'@nanostores/preact': 0.5.0_m2wbkjxz7237icvaxqi7ignbgm
astro: 2.5.7
astro-compress: 1.1.46
astro: 2.6.3
astro-compress: 1.1.47
jose: 4.14.4
js-cookie: 3.0.5
nanostores: 0.9.1
@ -54,7 +54,7 @@ dependencies:
tailwindcss: 3.3.2
devDependencies:
'@playwright/test': 1.34.3
'@playwright/test': 1.35.0
'@tailwindcss/typography': 0.5.9_tailwindcss@3.3.2
'@types/js-cookie': 3.0.3
csv-parser: 3.0.0
@ -80,13 +80,13 @@ packages:
'@jridgewell/trace-mapping': 0.3.18
dev: false
/@astrojs/compiler/1.4.2:
resolution: {integrity: sha512-xoRp7JpiMZPK/beUcZEM5kM44Z/h20wwwQcl54duPqQMyySG9vZ5xMM6dYiQmn7b3XzpZs0cT6TRDoJJ5gwHAQ==}
dev: false
/@astrojs/compiler/1.5.0:
resolution: {integrity: sha512-k04X/7nlMklU0HQUScxbCTf5n8/Vr+0U0bawb9QWulWxd6qJf3FmBrNATgTYiltjB4pc5HBqmmttAfFi7m4lLg==}
/@astrojs/internal-helpers/0.1.0:
resolution: {integrity: sha512-OSwvoFkTqVowiyP+codQeQZWoq/HOwY32x17NxDglWoCx2sdyXzplDZoVV4/3odmSEY6/A+48WMl5qkjmP1CXw==}
dev: false
/@astrojs/language-server/1.0.0:
resolution: {integrity: sha512-oEw7AwJmzjgy6HC9f5IdrphZ1GVgfV/+7xQuyf52cpTiRWd/tJISK3MsKP0cDkVlfodmNABNFnAaAWuLZEiiiA==}
hasBin: true
@ -107,13 +107,13 @@ packages:
vscode-uri: 3.0.7
dev: false
/@astrojs/markdown-remark/2.2.1_astro@2.5.7:
/@astrojs/markdown-remark/2.2.1_astro@2.6.3:
resolution: {integrity: sha512-VF0HRv4GpC1XEMLnsKf6jth7JSmlt9qpqP0josQgA2eSpCIAC/Et+y94mgdBIZVBYH/yFnMoIxgKVe93xfO2GA==}
peerDependencies:
astro: ^2.5.0
dependencies:
'@astrojs/prism': 2.1.2
astro: 2.5.7
astro: 2.6.3
github-slugger: 1.5.0
import-meta-resolve: 2.2.2
rehype-raw: 6.1.1
@ -160,14 +160,14 @@ packages:
zod: 3.21.4
dev: false
/@astrojs/tailwind/3.1.3_cyxi2rbbvaq22julk2hkhgjf7u:
/@astrojs/tailwind/3.1.3_v3vh2dd4sag23uewccz5c4ppyu:
resolution: {integrity: sha512-10S1omrv5K5HRVAZ0fBgN5vQykn2HRL332LAVFyBASMn1Ff6gDfSK+CPUeUu94eZUOEaPnECLK8EHAqZ8iY9CA==}
peerDependencies:
astro: ^2.5.0
tailwindcss: ^3.0.24
dependencies:
'@proload/core': 0.3.3
astro: 2.5.7
astro: 2.6.3
autoprefixer: 10.4.14_postcss@8.4.23
postcss: 8.4.23
postcss-load-config: 4.0.1_postcss@8.4.23
@ -1076,13 +1076,13 @@ packages:
tslib: 2.5.0
dev: false
/@playwright/test/1.34.3:
resolution: {integrity: sha512-zPLef6w9P6T/iT6XDYG3mvGOqOyb6eHaV9XtkunYs0+OzxBtrPAAaHotc0X+PJ00WPPnLfFBTl7mf45Mn8DBmw==}
engines: {node: '>=14'}
/@playwright/test/1.35.0:
resolution: {integrity: sha512-6qXdd5edCBynOwsz1YcNfgX8tNWeuS9fxy5o59D0rvHXxRtjXRebB4gE4vFVfEMXl/z8zTnAzfOs7aQDEs8G4Q==}
engines: {node: '>=16'}
hasBin: true
dependencies:
'@types/node': 18.16.3
playwright-core: 1.34.3
playwright-core: 1.35.0
optionalDependencies:
fsevents: 2.3.2
dev: true
@ -1464,21 +1464,21 @@ packages:
engines: {node: '>=0.10.0'}
dev: true
/astro-compress/1.1.46:
resolution: {integrity: sha512-5PiZsCOlYO04jATC/XlpdMT6869QLsbpSNoihutUxkdWpDpoXwNMyxxXsL7QljdXHyFg6XmTDpxOODxvqerVWA==}
/astro-compress/1.1.47:
resolution: {integrity: sha512-UBhhDfZffcPVdDFA4v42G68BdcNL6ZlYoXZdHTappiLWDvZPlhRmK6iuwya3SAGl4La4kqKCfNSqwKbG3agdBQ==}
dependencies:
'@types/csso': 5.0.0
'@types/html-minifier-terser': 7.0.0
csso: 5.0.5
files-pipe: 0.0.6
files-pipe: 0.0.7
html-minifier-terser: 7.2.0
sharp: 0.32.1
svgo: 3.0.2
terser: 5.17.6
terser: 5.17.7
dev: false
/astro/2.5.7:
resolution: {integrity: sha512-qYKMIN4tXAOAsm10vU4f+Q7LfC05JmEbQiJmSBqIEhp+wnQcEUFkGLrHMSsps3oBzMtjErUdDDW5tGJcn5eVlA==}
/astro/2.6.3:
resolution: {integrity: sha512-gJoBX+t11qAeYDjterGEaQZx7qqlGOigWhE0zkcEBv4zy7l4IpKx6nGGUNzD/l8x6WomZxkdZROsOsiEaWSJmQ==}
engines: {node: '>=16.12.0', npm: '>=6.14.0'}
hasBin: true
peerDependencies:
@ -1487,17 +1487,18 @@ packages:
sharp:
optional: true
dependencies:
'@astrojs/compiler': 1.4.2
'@astrojs/compiler': 1.5.0
'@astrojs/internal-helpers': 0.1.0
'@astrojs/language-server': 1.0.0
'@astrojs/markdown-remark': 2.2.1_astro@2.5.7
'@astrojs/markdown-remark': 2.2.1_astro@2.6.3
'@astrojs/telemetry': 2.1.1
'@astrojs/webapi': 2.2.0
'@babel/core': 7.22.1
'@babel/generator': 7.21.5
'@babel/parser': 7.21.5
'@babel/generator': 7.22.3
'@babel/parser': 7.22.4
'@babel/plugin-transform-react-jsx': 7.21.5_@babel+core@7.22.1
'@babel/traverse': 7.21.5
'@babel/types': 7.21.5
'@babel/traverse': 7.22.4
'@babel/types': 7.22.4
'@types/babel__core': 7.20.0
'@types/yargs-parser': 21.0.0
acorn: 8.8.2
@ -1508,7 +1509,7 @@ packages:
cookie: 0.5.0
debug: 4.3.4
deepmerge-ts: 4.3.0
devalue: 4.3.0
devalue: 4.3.2
diff: 5.1.0
es-module-lexer: 1.2.1
esbuild: 0.17.18
@ -2219,8 +2220,8 @@ packages:
engines: {node: '>=8'}
dev: false
/devalue/4.3.0:
resolution: {integrity: sha512-n94yQo4LI3w7erwf84mhRUkUJfhLoCZiLyoOZ/QFsDbcWNZePrLwbQpvZBUG2TNxwV3VjCKPxkiiQA6pe3TrTA==}
/devalue/4.3.2:
resolution: {integrity: sha512-KqFl6pOgOW+Y6wJgu80rHpo2/3H07vr8ntR9rkkFIRETewbf5GaYYcakYfiKz89K+sLsuPkQIZaXDMjUObZwWg==}
dev: false
/didyoumean/1.2.2:
@ -2497,8 +2498,8 @@ packages:
trim-repeated: 1.0.0
dev: true
/files-pipe/0.0.6:
resolution: {integrity: sha512-izHIHcqKEM0V2nw3FvzAqL0nx3IiZ2RC7k4eczIhlJ4X5JWJsxVl4c6b+Uid3zvNd6RiPxjFerbFcodFXMPHBw==}
/files-pipe/0.0.7:
resolution: {integrity: sha512-BkXQoAEo1X3RqmEucIBLL1ddc/LM3lqsf5ipIf/bRrUTn3SQZWhThgpIl1/ma2VNesB2hBoY+CB0rrZ3b1tQhA==}
dependencies:
deepmerge-ts: 5.1.0
fast-glob: 3.2.12
@ -2981,7 +2982,7 @@ packages:
entities: 4.5.0
param-case: 3.0.4
relateurl: 0.2.7
terser: 5.17.6
terser: 5.17.7
dev: false
/html-void-elements/2.0.1:
@ -4681,9 +4682,9 @@ packages:
find-up: 3.0.0
dev: false
/playwright-core/1.34.3:
resolution: {integrity: sha512-2pWd6G7OHKemc5x1r1rp8aQcpvDh7goMBZlJv6Co5vCNLVcQJdhxRL09SGaY6HcyHH9aT4tiynZabMofVasBYw==}
engines: {node: '>=14'}
/playwright-core/1.35.0:
resolution: {integrity: sha512-muMXyPmIx/2DPrCHOD1H1ePT01o7OdKxKj2ebmCAYvqhUy+Y1bpal7B0rdoxros7YrXI294JT/DWw2LqyiqTPA==}
engines: {node: '>=16'}
hasBin: true
dev: true
@ -5782,8 +5783,8 @@ packages:
yallist: 4.0.0
dev: false
/terser/5.17.6:
resolution: {integrity: sha512-V8QHcs8YuyLkLHsJO5ucyff1ykrLVsR4dNnS//L5Y3NiSXpbK1J+WMVUs67eI0KTxs9JtHhgEQpXQVHlHI92DQ==}
/terser/5.17.7:
resolution: {integrity: sha512-/bi0Zm2C6VAexlGgLlVxA0P2lru/sdLyfCVaRMfKVo9nWxbmz7f/sD8VPybPeSUJaJcwmCJis9pBIhcVcG1QcQ==}
engines: {node: '>=10'}
hasBin: true
dependencies:

4
src/components/Activity/EmptyActivity.tsx
Unescape View File

@ -1,4 +1,4 @@
import CheckIcon from '../../icons/roadmap.svg';
import RoadmapIcon from '../../icons/roadmap.svg';
export function EmptyActivity() {
return (
@ -6,7 +6,7 @@ export function EmptyActivity() {
<div class="flex flex-col items-center p-7 text-center">
<img
alt="no roadmaps"
src={CheckIcon}
src={RoadmapIcon}
class="mb-2 w-[60px] h-[60px] sm:h-[120px] sm:w-[120px] opacity-10"
/>
<h2 class="text-lg sm:text-xl font-bold">No Progress</h2>

20
src/components/HeroSection/CheckIcon.tsx
Unescape View File

@ -0,0 +1,20 @@
type CheckIconProps = {
additionalClasses?: string;
};
export function CheckIcon(props: CheckIconProps) {
const { additionalClasses = 'mr-2 top-[0.5px] w-[20px] h-[20px]' } = props;
return (
<svg
className={`relative ${additionalClasses}]`}
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"></path>
</svg>
);
}

23
src/components/HeroSection/EmptyProgress.tsx
Unescape View File

@ -0,0 +1,23 @@
import { CheckIcon } from './CheckIcon';
type EmptyProgressProps = {
title?: string;
message?: string;
};
export function EmptyProgress(props: EmptyProgressProps) {
const {
title = 'Start learning ..',
message = 'Your progress and favorite roadmaps will show up here.',
} = props;
return (
<div className="relative flex min-h-full flex-col items-start sm:items-center justify-center py-6">
<h2 className={'mb-1 flex items-center text-lg sm:text-2xl text-gray-200'}>
<CheckIcon additionalClasses='mr-2 top-[0.5px] w-[16px] h-[16px] sm:w-[20px] sm:h-[20px]' />
Start learning ..
</h2>
<p className={'text-gray-400 text-sm sm:text-base'}>{message}</p>
</div>
);
}

105
src/components/HeroSection/FavoriteRoadmaps.tsx
Unescape View File

@ -0,0 +1,105 @@
import { useEffect, useState } from 'preact/hooks';
import { EmptyProgress } from './EmptyProgress';
import { httpGet } from '../../lib/http';
import { ProgressList } from './ProgressList';
export type UserProgressResponse = {
resourceId: string;
resourceType: 'roadmap' | 'best-practice';
resourceTitle: string;
done: number;
learning: number;
skipped: number;
total: number;
updatedAt: Date;
}[];
function renderProgress(progressList: UserProgressResponse) {
progressList.forEach((progress) => {
const href =
progress.resourceType === 'best-practice'
? `/best-practices/${progress.resourceId}`
: `/${progress.resourceId}`;
const element = document.querySelector(`a[href="${href}"]`);
if (!element) {
return;
}
const totalDone = progress.done + progress.skipped;
const percentageDone = (totalDone / progress.total) * 100;
const progressBar: HTMLElement | null =
element.querySelector('[data-progress]');
if (progressBar) {
progressBar.style.width = `${percentageDone}%`;
}
});
}
export function FavoriteRoadmaps() {
const [isPreparing, setIsPreparing] = useState(true);
const [isLoading, setIsLoading] = useState(false);
const [progress, setProgress] = useState<UserProgressResponse>([]);
const [containerOpacity, setContainerOpacity] = useState(0);
function showProgressContainer() {
const heroEl = document.getElementById('hero-text')!;
if (!heroEl) {
return;
}
heroEl.classList.add('opacity-0');
setTimeout(() => {
heroEl.parentElement?.removeChild(heroEl);
setIsPreparing(false);
setTimeout(() => {
setContainerOpacity(100);
}, 50);
}, 300);
}
async function loadProgress() {
setIsLoading(true);
const { response: progressList, error } =
await httpGet<UserProgressResponse>(
`${import.meta.env.PUBLIC_API_URL}/v1-get-user-all-progress`
);
if (error || !progressList) {
return;
}
setProgress(progressList);
renderProgress(progressList);
}
useEffect(() => {
showProgressContainer();
loadProgress().finally(() => {
setIsLoading(false);
});
}, []);
if (isPreparing) {
return null;
}
const hasProgress = progress.length > 0;
return (
<div
class={`flex min-h-[192px] bg-gradient-to-b transition-opacity duration-500 sm:min-h-[280px] opacity-${containerOpacity} ${
hasProgress && `border-t border-t-[#1e293c]`
}`}
>
<div className="container min-h-full">
{!isLoading && progress.length == 0 && <EmptyProgress />}
{isLoading && <EmptyProgress title="Loading progress .." />}
{!isLoading && progress.length > 0 && (
<ProgressList progress={progress} />
)}
</div>
</div>
);
}

28
src/components/HeroSection/HeroSection.astro
Unescape View File

@ -0,0 +1,28 @@
---
import { FavoriteRoadmaps } from './FavoriteRoadmaps';
---
<div class='relative min-h-auto min-h-[192px] sm:min-h-[281px] border-b border-b-[#1e293c]'>
<div
class='container px-6 py-6 pb-14 text-left sm:px-0 sm:py-20 sm:text-center transition-opacity duration-300'
id='hero-text'
>
<h1
class='mb-2 bg-gradient-to-b from-amber-50 to-purple-500 bg-clip-text text-2xl font-bold text-transparent sm:mb-4 sm:text-5xl'
>
Developer Roadmaps
</h1>
<p class='hidden px-4 text-lg text-gray-400 sm:block'>
<span class='font-medium text-gray-400'>roadmap.sh</span> is a community effort
to create roadmaps, guides and other educational content to help guide developers
in picking up a path and guide their learnings.
</p>
<p class='text-md block px-0 text-gray-400 sm:hidden'>
Community created roadmaps, guides and articles to help developers grow in
their career.
</p>
</div>
<FavoriteRoadmaps client:only client:authenticated />
</div>

46
src/components/HeroSection/ProgressList.tsx
Unescape View File

@ -0,0 +1,46 @@
import type { UserProgressResponse } from './FavoriteRoadmaps';
import { CheckIcon } from './CheckIcon';
type ProgressListProps = {
progress: UserProgressResponse;
};
export function ProgressList(props: ProgressListProps) {
const { progress } = props;
return (
<div className="relative pt-4 sm:pt-7 pb-12">
<p className="mb-4 flex items-center text-sm text-gray-400">
<CheckIcon additionalClasses={'mr-1.5 w-[14px] h-[14px]'} />
<span className='hidden sm:inline'>Your progress and favorite roadmaps.</span>
<span className='inline sm:hidden'>Your progress and favorite roadmaps.</span>
</p>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2">
{progress.map((resource) => {
const url =
resource.resourceType === 'roadmap'
? `/${resource.resourceId}`
: `/best-practices/${resource.resourceId}`;
const percentageDone =
((resource.skipped + resource.done) / resource.total) * 100;
return (
<a
href={url}
className="relative flex flex-col rounded-md border border-slate-800 bg-slate-900 p-3 text-sm text-slate-400 hover:border-slate-600 hover:text-slate-300 overflow-hidden"
>
<span className='relative z-20'>{resource.resourceTitle}</span>
<span
class="absolute bottom-0 left-0 top-0 z-10 bg-[#172a3a]"
style={{ width: `${percentageDone}%` }}
></span>
</a>
);
})}
</div>
</div>
);
}

12
src/components/PageSponsor.tsx
Unescape View File

@ -29,6 +29,18 @@ export function PageSponsor(props: PageSponsorProps) {
const [sponsor, setSponsor] = useState<PageSponsorType>();
const loadSponsor = async () => {
const currentPath = window.location.pathname;
if (
currentPath === '/' ||
currentPath === '/best-practices' ||
currentPath === '/roadmaps' ||
currentPath.startsWith('/guides') ||
currentPath.startsWith('/videos') ||
currentPath.startsWith('/account')
) {
return;
}
const { response, error } = await httpGet<V1GetSponsorResponse>(
`${import.meta.env.PUBLIC_API_URL}/v1-get-sponsor`,
{

10
src/data/roadmaps/cpp/content/115-compilers/100-stages.md
Unescape View File

@ -39,10 +39,10 @@ The third stage is converting the compiler's intermediate representation into as
**Code Example (x86 Assembly):**
```assembly
mov eax, 10
mov ebx, 20
add eax, ebx
```
mov eax, 10
mov ebx, 20
add eax, ebx
```
## Linking
@ -55,4 +55,4 @@ The final stage is the linking of the object code with the necessary libraries a
$ g++ main.o -o main -lm
```
In summary, the compilation process in C++ involves four primary stages: preprocessing, compilation, assembly, and linking. Each stage plays a crucial role in transforming the source code into an executable program.
In summary, the compilation process in C++ involves four primary stages: preprocessing, compilation, assembly, and linking. Each stage plays a crucial role in transforming the source code into an executable program.

9
src/directives/client-authenticated.mjs
Unescape View File

@ -0,0 +1,9 @@
export default async (load, opts) => {
const isAuthenticated = document.cookie.toString().indexOf('__roadmapsh_jt__') !== -1;
if (isAuthenticated) {
console.log("loading");
const hydrate = await load();
await hydrate();
}
};

58
src/lib/home-progress.ts
Unescape View File

@ -1,58 +0,0 @@
import { httpGet } from './http';
import { isLoggedIn } from './jwt';
export type UserProgressResponse = {
resourceTitle: string;
resourceId: string;
resourceType: 'roadmap' | 'best-practice';
done: number;
learning: number;
skipped: number;
total: number;
updatedAt: Date;
}[];
async function renderProgress() {
if (!isLoggedIn()) {
return;
}
const { response: progressList, error } = await httpGet<UserProgressResponse>(
`${import.meta.env.PUBLIC_API_URL}/v1-get-user-all-progress`
);
if (error || !progressList) {
return;
}
progressList.forEach((progress) => {
const href =
progress.resourceType === 'best-practice'
? `/best-practices/${progress.resourceId}`
: `/${progress.resourceId}`;
const element = document.querySelector(`a[href="${href}"]`);
if (!element) {
return;
}
const totalDone = progress.done + progress.skipped;
const percentageDone = (totalDone / progress.total) * 100;
const progressBar = document.createElement('div');
progressBar.style.backgroundColor = 'rgb(23 42 58)';
progressBar.style.position = 'absolute';
progressBar.style.width = `${percentageDone}%`;
progressBar.style.height = '100%';
progressBar.style.bottom = '0';
progressBar.style.left = '0';
progressBar.style.top = '0';
progressBar.style.zIndex = '1';
element.appendChild(progressBar);
});
}
// on DOM load
window.addEventListener('DOMContentLoaded', () => {
window.setTimeout(renderProgress, 0);
});

28
src/pages/index.astro
Unescape View File

@ -1,7 +1,8 @@
---
import FeaturedVideos from '../components/FeaturedVideos.astro';
import FeaturedGuides from '../components/FeaturedGuides.astro';
import FeaturedItems from '../components/FeaturedItems/FeaturedItems.astro';
import FeaturedVideos from '../components/FeaturedVideos.astro';
import HeroSection from '../components/HeroSection/HeroSection.astro';
import BaseLayout from '../layouts/BaseLayout.astro';
import { getAllBestPractices } from '../lib/best-pratice';
import { getAllGuides } from '../lib/guide';
@ -22,28 +23,7 @@ const videos = await getAllVideos();
permalink={'/'}
>
<div class='bg-gradient-to-b from-slate-900 to-black'>
<div class='border-b border-b-[#1e293c]'>
<div
class='container px-6 py-6 pb-14 text-left sm:px-0 sm:py-20 sm:text-center'
>
<h1
class='mb-2 bg-gradient-to-b from-amber-50 to-purple-500 bg-clip-text text-2xl font-bold text-transparent sm:mb-4 sm:text-5xl'
>
Developer Roadmaps
</h1>
<p class='hidden px-4 text-lg text-gray-400 sm:block'>
<span class='font-medium text-gray-400'>roadmap.sh</span> is a community
effort to create roadmaps, guides and other educational content to help
guide developers in picking up the path and guide their learnings.
</p>
<p class='text-md block px-0 text-gray-400 sm:hidden'>
Community created roadmaps, guides and articles to help developers
grow in their career.
</p>
</div>
</div>
<HeroSection />
<FeaturedItems
heading='Role based Roadmaps'
@ -83,6 +63,4 @@ const videos = await getAllVideos();
<FeaturedVideos heading='Videos' videos={videos.slice(0, 7)} />
</div>
</div>
<script src='../lib/home-progress.ts'></script>
</BaseLayout>

Write Preview
Loading…
Cancel
Save