mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2026-03-13 10:11:55 +08:00
Compare commits
1 Commits
feat/dashb
...
fix/count
| Author | SHA1 | Date | |
|---|---|---|---|
|
e3143cf68b |
@@ -3,6 +3,6 @@
|
||||
"enabled": false
|
||||
},
|
||||
"_variables": {
|
||||
"lastUpdateCheck": 1725962974592
|
||||
"lastUpdateCheck": 1724925726721
|
||||
}
|
||||
}
|
||||
206
package-lock.json
generated
206
package-lock.json
generated
@@ -18,7 +18,7 @@
|
||||
"@resvg/resvg-js": "^2.6.2",
|
||||
"@types/react": "^18.3.3",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"astro": "^4.15.4",
|
||||
"astro": "^4.14.6",
|
||||
"clsx": "^2.1.1",
|
||||
"dayjs": "^1.11.12",
|
||||
"dom-to-image": "^2.6.0",
|
||||
@@ -506,9 +506,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/types": {
|
||||
"version": "7.25.6",
|
||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.6.tgz",
|
||||
"integrity": "sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==",
|
||||
"version": "7.25.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.4.tgz",
|
||||
"integrity": "sha512-zQ1ijeeCXVEh+aNL0RlmkPkG8HUiDcU2pzQQFjtbntgAczRASFzj4H+6+bV+dy1ntKR14I/DypeuRG1uma98iQ==",
|
||||
"dependencies": {
|
||||
"@babel/helper-string-parser": "^7.24.8",
|
||||
"@babel/helper-validator-identifier": "^7.24.7",
|
||||
@@ -2266,21 +2266,13 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@shikijs/core": {
|
||||
"version": "1.16.3",
|
||||
"resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.16.3.tgz",
|
||||
"integrity": "sha512-yETIvrETCeC39gSPIiSADmjri9FwKmxz0QvONMtTIUYlKZe90CJkvcjPksayC2VQOtzOJonEiULUa8v8crUQvA==",
|
||||
"version": "1.14.1",
|
||||
"resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.14.1.tgz",
|
||||
"integrity": "sha512-KyHIIpKNaT20FtFPFjCQB5WVSTpLR/n+jQXhWHWVUMm9MaOaG9BGOG0MSyt7yA4+Lm+4c9rTc03tt3nYzeYSfw==",
|
||||
"dependencies": {
|
||||
"@shikijs/vscode-textmate": "^9.2.0",
|
||||
"@types/hast": "^3.0.4",
|
||||
"oniguruma-to-js": "0.3.3",
|
||||
"regex": "4.3.2"
|
||||
"@types/hast": "^3.0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@shikijs/vscode-textmate": {
|
||||
"version": "9.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-9.2.2.tgz",
|
||||
"integrity": "sha512-TMp15K+GGYrWlZM8+Lnj9EaHEFmOen0WJBrfa17hF7taDOYthuPPV0GWzfd/9iMij0akS/8Yw2ikquH7uVi/fg=="
|
||||
},
|
||||
"node_modules/@shuding/opentype.js": {
|
||||
"version": "1.4.0-beta.0",
|
||||
"resolved": "https://registry.npmjs.org/@shuding/opentype.js/-/opentype.js-1.4.0-beta.0.tgz",
|
||||
@@ -2908,17 +2900,20 @@
|
||||
}
|
||||
},
|
||||
"node_modules/astro": {
|
||||
"version": "4.15.4",
|
||||
"resolved": "https://registry.npmjs.org/astro/-/astro-4.15.4.tgz",
|
||||
"integrity": "sha512-wqy+m3qygt9DmCSqMsckxyK4ccCUFtti2d/WlLkEpAlqHgyDIg20zRTLHO2v/H4YeSlJ8sAcN0RW2FhOeYbINg==",
|
||||
"version": "4.14.6",
|
||||
"resolved": "https://registry.npmjs.org/astro/-/astro-4.14.6.tgz",
|
||||
"integrity": "sha512-MIDyNhtu3L4uakHvlTprh21eQPehYOtZSuSLtd+r6xZcl3lB+mlBz/hs1W3iHEQAORyJnKArWSY/aVOBKUyflA==",
|
||||
"dependencies": {
|
||||
"@astrojs/compiler": "^2.10.3",
|
||||
"@astrojs/internal-helpers": "0.4.1",
|
||||
"@astrojs/markdown-remark": "5.2.0",
|
||||
"@astrojs/telemetry": "3.1.0",
|
||||
"@babel/core": "^7.25.2",
|
||||
"@babel/generator": "^7.25.5",
|
||||
"@babel/parser": "^7.25.4",
|
||||
"@babel/plugin-transform-react-jsx": "^7.25.2",
|
||||
"@babel/types": "^7.25.6",
|
||||
"@babel/traverse": "^7.25.4",
|
||||
"@babel/types": "^7.25.4",
|
||||
"@oslojs/encoding": "^0.4.1",
|
||||
"@rollup/pluginutils": "^5.1.0",
|
||||
"@types/babel__core": "^7.20.5",
|
||||
@@ -2941,8 +2936,8 @@
|
||||
"es-module-lexer": "^1.5.4",
|
||||
"esbuild": "^0.21.5",
|
||||
"estree-walker": "^3.0.3",
|
||||
"execa": "^8.0.1",
|
||||
"fast-glob": "^3.3.2",
|
||||
"fastq": "^1.17.1",
|
||||
"flattie": "^1.1.1",
|
||||
"github-slugger": "^2.0.0",
|
||||
"gray-matter": "^4.0.3",
|
||||
@@ -2951,7 +2946,6 @@
|
||||
"js-yaml": "^4.1.0",
|
||||
"kleur": "^4.1.5",
|
||||
"magic-string": "^0.30.11",
|
||||
"magicast": "^0.3.5",
|
||||
"micromatch": "^4.0.8",
|
||||
"mrmime": "^2.0.0",
|
||||
"neotraverse": "^0.6.18",
|
||||
@@ -2963,15 +2957,14 @@
|
||||
"prompts": "^2.4.2",
|
||||
"rehype": "^13.0.1",
|
||||
"semver": "^7.6.3",
|
||||
"shiki": "^1.16.1",
|
||||
"shiki": "^1.14.1",
|
||||
"string-width": "^7.2.0",
|
||||
"strip-ansi": "^7.1.0",
|
||||
"tinyexec": "^0.3.0",
|
||||
"tsconfck": "^3.1.3",
|
||||
"tsconfck": "^3.1.1",
|
||||
"unist-util-visit": "^5.0.0",
|
||||
"vfile": "^6.0.3",
|
||||
"vite": "^5.4.2",
|
||||
"vitefu": "^1.0.2",
|
||||
"vitefu": "^0.2.5",
|
||||
"which-pm": "^3.0.0",
|
||||
"xxhash-wasm": "^1.0.2",
|
||||
"yargs-parser": "^21.1.1",
|
||||
@@ -4047,6 +4040,28 @@
|
||||
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
|
||||
"integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="
|
||||
},
|
||||
"node_modules/execa": {
|
||||
"version": "8.0.1",
|
||||
"resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz",
|
||||
"integrity": "sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==",
|
||||
"dependencies": {
|
||||
"cross-spawn": "^7.0.3",
|
||||
"get-stream": "^8.0.1",
|
||||
"human-signals": "^5.0.0",
|
||||
"is-stream": "^3.0.0",
|
||||
"merge-stream": "^2.0.0",
|
||||
"npm-run-path": "^5.1.0",
|
||||
"onetime": "^6.0.0",
|
||||
"signal-exit": "^4.1.0",
|
||||
"strip-final-newline": "^3.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16.17"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sindresorhus/execa?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/extend": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
|
||||
@@ -4310,6 +4325,17 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/get-stream": {
|
||||
"version": "8.0.1",
|
||||
"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz",
|
||||
"integrity": "sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==",
|
||||
"engines": {
|
||||
"node": ">=16"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/get-tsconfig": {
|
||||
"version": "4.7.6",
|
||||
"resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.7.6.tgz",
|
||||
@@ -4694,6 +4720,14 @@
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/human-signals": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz",
|
||||
"integrity": "sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==",
|
||||
"engines": {
|
||||
"node": ">=16.17.0"
|
||||
}
|
||||
},
|
||||
"node_modules/humanize-ms": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz",
|
||||
@@ -4893,6 +4927,17 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/is-stream": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
|
||||
"integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
|
||||
"engines": {
|
||||
"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/is-unicode-supported": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-2.0.0.tgz",
|
||||
@@ -5207,16 +5252,6 @@
|
||||
"@jridgewell/sourcemap-codec": "^1.5.0"
|
||||
}
|
||||
},
|
||||
"node_modules/magicast": {
|
||||
"version": "0.3.5",
|
||||
"resolved": "https://registry.npmjs.org/magicast/-/magicast-0.3.5.tgz",
|
||||
"integrity": "sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ==",
|
||||
"dependencies": {
|
||||
"@babel/parser": "^7.25.4",
|
||||
"@babel/types": "^7.25.4",
|
||||
"source-map-js": "^1.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/make-dir": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
|
||||
@@ -5491,6 +5526,11 @@
|
||||
"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
|
||||
"integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
|
||||
},
|
||||
"node_modules/merge-stream": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
|
||||
"integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="
|
||||
},
|
||||
"node_modules/merge2": {
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
|
||||
@@ -6078,6 +6118,17 @@
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/mimic-fn": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
|
||||
"integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/mimic-function": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/mimic-function/-/mimic-function-5.0.1.tgz",
|
||||
@@ -6274,6 +6325,31 @@
|
||||
"npm": ">=8.12.1"
|
||||
}
|
||||
},
|
||||
"node_modules/npm-run-path": {
|
||||
"version": "5.3.0",
|
||||
"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz",
|
||||
"integrity": "sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==",
|
||||
"dependencies": {
|
||||
"path-key": "^4.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/npm-run-path/node_modules/path-key": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
|
||||
"integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/nth-check": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
|
||||
@@ -6321,12 +6397,18 @@
|
||||
"wrappy": "1"
|
||||
}
|
||||
},
|
||||
"node_modules/oniguruma-to-js": {
|
||||
"version": "0.3.3",
|
||||
"resolved": "https://registry.npmjs.org/oniguruma-to-js/-/oniguruma-to-js-0.3.3.tgz",
|
||||
"integrity": "sha512-m90/WEhgs8g4BxG37+Nu3YrMfJDs2YXtYtIllhsEPR+wP3+K4EZk6dDUvy2v2K4MNFDDOYKL4/yqYPXDqyozTQ==",
|
||||
"node_modules/onetime": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
|
||||
"integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
|
||||
"dependencies": {
|
||||
"mimic-fn": "^4.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/openai": {
|
||||
@@ -7174,11 +7256,6 @@
|
||||
"node": ">=8.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/regex": {
|
||||
"version": "4.3.2",
|
||||
"resolved": "https://registry.npmjs.org/regex/-/regex-4.3.2.tgz",
|
||||
"integrity": "sha512-kK/AA3A9K6q2js89+VMymcboLOlF5lZRCYJv3gzszXFHBr6kO6qLGzbm+UIugBEV8SMMKCTR59txoY6ctRHYVw=="
|
||||
},
|
||||
"node_modules/rehype": {
|
||||
"version": "13.0.1",
|
||||
"resolved": "https://registry.npmjs.org/rehype/-/rehype-13.0.1.tgz",
|
||||
@@ -7715,12 +7792,11 @@
|
||||
}
|
||||
},
|
||||
"node_modules/shiki": {
|
||||
"version": "1.16.3",
|
||||
"resolved": "https://registry.npmjs.org/shiki/-/shiki-1.16.3.tgz",
|
||||
"integrity": "sha512-GypUE+fEd06FqDs63LSAVlmq7WsahhPQU62cgZxGF+TJT5LjD2k7HTxXj4/CKOVuMM3+wWQ1t4Y5oooeJFRRBQ==",
|
||||
"version": "1.14.1",
|
||||
"resolved": "https://registry.npmjs.org/shiki/-/shiki-1.14.1.tgz",
|
||||
"integrity": "sha512-FujAN40NEejeXdzPt+3sZ3F2dx1U24BY2XTY01+MG8mbxCiA2XukXdcbyMyLAHJ/1AUUnQd1tZlvIjefWWEJeA==",
|
||||
"dependencies": {
|
||||
"@shikijs/core": "1.16.3",
|
||||
"@shikijs/vscode-textmate": "^9.2.0",
|
||||
"@shikijs/core": "1.14.1",
|
||||
"@types/hast": "^3.0.4"
|
||||
}
|
||||
},
|
||||
@@ -7942,6 +8018,17 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/strip-final-newline": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
|
||||
"integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/strip-outer": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
|
||||
@@ -8163,11 +8250,6 @@
|
||||
"resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
|
||||
"integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw=="
|
||||
},
|
||||
"node_modules/tinyexec": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.0.tgz",
|
||||
"integrity": "sha512-tVGE0mVJPGb0chKhqmsoosjsS+qUnJVGJpZgsHYQcGoPlG3B51R3PouqTgEGH2Dc9jjFyOqOpix6ZHNMXp1FZg=="
|
||||
},
|
||||
"node_modules/to-fast-properties": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
|
||||
@@ -8237,9 +8319,9 @@
|
||||
"integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
|
||||
},
|
||||
"node_modules/tsconfck": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/tsconfck/-/tsconfck-3.1.3.tgz",
|
||||
"integrity": "sha512-ulNZP1SVpRDesxeMLON/LtWM8HIgAJEIVpVVhBM6gsmvQ8+Rh+ZG7FWGvHh7Ah3pRABwVJWklWCr/BTZSv0xnQ==",
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/tsconfck/-/tsconfck-3.1.1.tgz",
|
||||
"integrity": "sha512-00eoI6WY57SvZEVjm13stEVE90VkEdJAFGgpFLTsZbJyW/LwFQ7uQxJHWpZ2hzSWgCPKc9AnBnNP+0X7o3hAmQ==",
|
||||
"bin": {
|
||||
"tsconfck": "bin/tsconfck.js"
|
||||
},
|
||||
@@ -9029,9 +9111,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/vitefu": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/vitefu/-/vitefu-1.0.2.tgz",
|
||||
"integrity": "sha512-0/iAvbXyM3RiPPJ4lyD4w6Mjgtf4ejTK6TPvTNG3H32PLwuT0N/ZjJLiXug7ETE/LWtTeHw9WRv7uX/tIKYyKg==",
|
||||
"version": "0.2.5",
|
||||
"resolved": "https://registry.npmjs.org/vitefu/-/vitefu-0.2.5.tgz",
|
||||
"integrity": "sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==",
|
||||
"peerDependencies": {
|
||||
"vite": "^3.0.0 || ^4.0.0 || ^5.0.0"
|
||||
},
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
"@resvg/resvg-js": "^2.6.2",
|
||||
"@types/react": "^18.3.3",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"astro": "^4.15.4",
|
||||
"astro": "^4.14.6",
|
||||
"clsx": "^2.1.1",
|
||||
"dayjs": "^1.11.12",
|
||||
"dom-to-image": "^2.6.0",
|
||||
|
||||
@@ -184,36 +184,18 @@
|
||||
},
|
||||
"Dp2DOX10u2xJUjB8Okhzh": {
|
||||
"title": "Frame",
|
||||
"description": "**FrameLayout** is a simple ViewGroup subclass in Android that is designed to hold a single child view or a stack of overlapping child views. It positions each child in the top-left corner by default and allows them to overlap on top of each other, which makes it useful for situations where you need to layer views on top of one another.\n\nVisit the following resources to learn more:",
|
||||
"links": [
|
||||
{
|
||||
"title": "Android developers: Frame Layout",
|
||||
"url": "https://developer.android.com/reference/android/widget/FrameLayout",
|
||||
"type": "article"
|
||||
}
|
||||
]
|
||||
"description": "",
|
||||
"links": []
|
||||
},
|
||||
"U8iMGGOd2EgPxSuwSG39Z": {
|
||||
"title": "Linear",
|
||||
"description": "**LinearLayout** is a view group that aligns all children in a single directioni, vertically or horizontally. You can specify the layout direction with the `android:orientation` attribute.\n\n**LinearLayout** was commonly used in earlier Android development, but with the introduction of ConstraintLayout, it’s less frequently used in modern apps.\n\nVisit the following resources to learn more:",
|
||||
"links": [
|
||||
{
|
||||
"title": "Android developers: Linear Layout",
|
||||
"url": "https://developer.android.com/develop/ui/views/layout/linear",
|
||||
"type": "article"
|
||||
}
|
||||
]
|
||||
"description": "",
|
||||
"links": []
|
||||
},
|
||||
"yE0qAQZiEC9R8WvCdskpr": {
|
||||
"title": "Relative",
|
||||
"description": "A **RelativeLayout** in Android is a type of ViewGroup that allows you to position child views relative to each other or relative to the parent layout. It's a flexible layout where you can arrange the child views in relation to one another based on certain rules, making it suitable for creating complex UI designs.\n\n**RelativeLayout** was commonly used in earlier Android development, but with the introduction of `ConstraintLayout`, it's less frequently used in modern apps.\n\nVisit the following resources to learn more:",
|
||||
"links": [
|
||||
{
|
||||
"title": "Android developers: Relative Layout",
|
||||
"url": "https://developer.android.com/develop/ui/views/layout/relative",
|
||||
"type": "article"
|
||||
}
|
||||
]
|
||||
"description": "",
|
||||
"links": []
|
||||
},
|
||||
"3fFNMhQIuuh-NRzSXYpXO": {
|
||||
"title": "Constraint",
|
||||
|
||||
@@ -856,7 +856,7 @@
|
||||
"links": [
|
||||
{
|
||||
"title": "Understanding Pipes",
|
||||
"url": "https://angular.dev/tutorials/learn-angular/22-pipes",
|
||||
"url": "https://angular.dev/guide/pipes",
|
||||
"type": "article"
|
||||
},
|
||||
{
|
||||
|
||||
@@ -796,6 +796,11 @@
|
||||
"url": "https://en.wikipedia.org/wiki/Object%E2%80%93relational_mapping",
|
||||
"type": "article"
|
||||
},
|
||||
{
|
||||
"title": "What is an ORM and how should I use it?",
|
||||
"url": "https://stackoverflow.com/questions/1279613/what-is-an-orm-how-does-it-work-and-how-should-i-use-one",
|
||||
"type": "article"
|
||||
},
|
||||
{
|
||||
"title": "What is an ORM, how does it work, and how should I use one?",
|
||||
"url": "https://stackoverflow.com/a/1279678",
|
||||
@@ -922,11 +927,6 @@
|
||||
"title": "Database Indexes",
|
||||
"description": "An index is a data structure that you build and assign on top of an existing table that basically looks through your table and tries to analyze and summarize so that it can create shortcuts.\n\nVisit the following resources to learn more:",
|
||||
"links": [
|
||||
{
|
||||
"title": "Database index - Wikipedia",
|
||||
"url": "https://en.wikipedia.org/wiki/Database_index",
|
||||
"type": "article"
|
||||
},
|
||||
{
|
||||
"title": "Explore top posts about Database",
|
||||
"url": "https://app.daily.dev/tags/database?ref=roadmapsh",
|
||||
@@ -964,11 +964,6 @@
|
||||
"title": "Data Replication",
|
||||
"description": "Data replication is the process by which data residing on a physical/virtual server(s) or cloud instance (primary instance) is continuously replicated or copied to a secondary server(s) or cloud instance (standby instance). Organizations replicate data to support high availability, backup, and/or disaster recovery.\n\nVisit the following resources to learn more:",
|
||||
"links": [
|
||||
{
|
||||
"title": "What is data replication?",
|
||||
"url": "https://www.ibm.com/topics/data-replication",
|
||||
"type": "article"
|
||||
},
|
||||
{
|
||||
"title": "What is Data Replication?",
|
||||
"url": "https://youtu.be/fUrKt-AQYtE",
|
||||
|
||||
@@ -1735,19 +1735,8 @@
|
||||
},
|
||||
"iolsTC-63d_1wzKGul-cT": {
|
||||
"title": "DLP",
|
||||
"description": "Data Loss Prevention (DLP) refers to a set of strategies, tools, and processes used by organizations to ensure that sensitive data is not lost, accessed, or misused by unauthorized users. DLP solutions monitor, detect, and block the movement of critical information outside an organization’s network, helping to prevent data breaches, leaks, and other security incidents.\n\nVisit the following resources to learn more:",
|
||||
"links": [
|
||||
{
|
||||
"title": "What is data loss prevention (DLP)?",
|
||||
"url": "https://www.techtarget.com/whatis/definition/data-loss-prevention-DLP",
|
||||
"type": "article"
|
||||
},
|
||||
{
|
||||
"title": "What is DLP (data loss prevention)?",
|
||||
"url": "https://www.cloudflare.com/es-es/learning/access-management/what-is-dlp/",
|
||||
"type": "article"
|
||||
}
|
||||
]
|
||||
"description": "",
|
||||
"links": []
|
||||
},
|
||||
"35oCRzhzpVfitQPL4K9KC": {
|
||||
"title": "ACL",
|
||||
@@ -1761,35 +1750,13 @@
|
||||
},
|
||||
"l5EnhOCnkN-RKvgrS9ylH": {
|
||||
"title": "HIPS",
|
||||
"description": "A Host Intrusion Prevention System (HIPS) is a security solution designed to monitor and protect individual host devices, such as servers, workstations, or laptops, from malicious activities and security threats. HIPS actively monitors system activities and can detect, prevent, and respond to unauthorized or anomalous behavior by employing a combination of signature-based, behavior-based, and heuristic detection methods.\n\nHIPS operates at the host level, providing a last line of defense by securing the individual endpoints within a network. It is capable of preventing a wide range of attacks, including zero-day exploits, malware infections, unauthorized access attempts, and policy violations.\n\nVisit the following resources to learn more:",
|
||||
"links": [
|
||||
{
|
||||
"title": "What is an Intrusion Prevention System?",
|
||||
"url": "https://www.paloaltonetworks.com/cyberpedia/what-is-an-intrusion-prevention-system-ips",
|
||||
"type": "article"
|
||||
},
|
||||
{
|
||||
"title": "What is Host intrusion prevention system (HIPS)?",
|
||||
"url": "https://cyberpedia.reasonlabs.com/EN/host%20intrusion%20prevention%20system%20(hips).html",
|
||||
"type": "article"
|
||||
}
|
||||
]
|
||||
"description": "",
|
||||
"links": []
|
||||
},
|
||||
"LIPtxl_oKZRcbvXT4EdNf": {
|
||||
"title": "NIDS",
|
||||
"description": "A Network Intrusion Detection System (NIDS) is a security solution designed to monitor and analyze network traffic for signs of suspicious activity or potential threats. NIDS operates by inspecting the data packets that flow through a network, looking for patterns that match known attack signatures or anomalies that could indicate malicious behavior. Unlike a Host Intrusion Detection System (HIDS), which focuses on individual host devices, NIDS provides a broader view by monitoring network traffic across multiple systems and devices.\n\nVisit the following resources to learn more:",
|
||||
"links": [
|
||||
{
|
||||
"title": "What is an Intrusion Detection System?",
|
||||
"url": "https://www.paloaltonetworks.com/cyberpedia/what-is-an-intrusion-detection-system-ids",
|
||||
"type": "article"
|
||||
},
|
||||
{
|
||||
"title": "What is a Network Intrusion Detection system (NIDS)?",
|
||||
"url": "https://bunny.net/academy/security/what-is-network-intrusion-detection-nids/",
|
||||
"type": "article"
|
||||
}
|
||||
]
|
||||
"description": "",
|
||||
"links": []
|
||||
},
|
||||
"7w9qj16OD4pUzq-ItdxeK": {
|
||||
"title": "NIPS",
|
||||
@@ -1818,7 +1785,7 @@
|
||||
},
|
||||
"MBnDE0VyVh2u2p-r90jVk": {
|
||||
"title": "WPA vs WPA2 vs WPA3 vs WEP",
|
||||
"description": "WEP (Wired Equivalent Privacy): WEP is the oldest and least secure of the protocols listed. It uses a static 64-bit or 128-bit key for encryption, which is vulnerable to various attacks due to weak encryption and poor key management. It's considered obsolete and should not be used.\n\nWPA (Wi-Fi Protected Access): WPA improved upon WEP by introducing TKIP (Temporal Key Integrity Protocol), which dynamically changes encryption keys and provides better security. However, it still has vulnerabilities and is considered less secure compared to WPA2 and WPA3.\n\nWPA2 (Wi-Fi Protected Access 2): WPA2 introduced AES (Advanced Encryption Standard) for stronger encryption, replacing TKIP. It provides improved security compared to WPA by using more robust encryption and authentication methods. It is generally considered secure but has some known vulnerabilities, especially in implementation.\n\nWPA3 (Wi-Fi Protected Access 3): WPA3 is the most current standard and offers enhanced security features. It uses SAE (Simultaneous Authentication of Equals) for more secure password-based authentication and improved encryption. WPA3 provides stronger protection against brute-force attacks and ensures better security for both personal and enterprise networks. It also includes forward secrecy, which helps protect past communications from future compromises.\n\nVisit the following resources to learn more:\n\n* \\[@article@wep-vs-wpa-vs-wpa2-vs-wpa3\\][https://community.fs.com/article/wep-vs-wpa-vs-wpa2-vs-wpa3.html](https://community.fs.com/article/wep-vs-wpa-vs-wpa2-vs-wpa3.html)\n* \\[@article@Wifi Protected Access (WPA)\\][https://www.geeksforgeeks.org/wifi-protected-access-wpa/](https://www.geeksforgeeks.org/wifi-protected-access-wpa/)",
|
||||
"description": "",
|
||||
"links": []
|
||||
},
|
||||
"w6V4JOtXKCMPAkKIQxvMg": {
|
||||
@@ -2182,7 +2149,7 @@
|
||||
},
|
||||
"nOND14t7ISgSH3zNpV3F8": {
|
||||
"title": "Memory Leak",
|
||||
"description": "A Memory Leak occurs when a computer program consumes memory but fails to release it back to the operating system after it is no longer needed. Over time, this can lead to reduced system performance, increased memory usage, and, in severe cases, the program or system may crash due to the exhaustion of available memory.",
|
||||
"description": "",
|
||||
"links": []
|
||||
},
|
||||
"2jo1r9O_rCnDwRv1_4Wo-": {
|
||||
@@ -2235,19 +2202,8 @@
|
||||
},
|
||||
"sMuKqf27y4iG0GrCdF5DN": {
|
||||
"title": "Pass the Hash",
|
||||
"description": "Pass the Hash (PtH) is a hacking technique that allows an attacker to authenticate to a remote server or service using the hashed value of a user's password, without needing to know the actual plaintext password. This method exploits weaknesses in the way some authentication protocols handle hashed credentials, particularly in Windows-based systems.\n\nVisit the following resources to learn more:",
|
||||
"links": [
|
||||
{
|
||||
"title": "What is a pass-the-hash attack?",
|
||||
"url": "https://www.crowdstrike.com/cybersecurity-101/pass-the-hash/",
|
||||
"type": "article"
|
||||
},
|
||||
{
|
||||
"title": "Pass the Hash Attack",
|
||||
"url": "https://www.netwrix.com/pass_the_hash_attack_explained.html",
|
||||
"type": "article"
|
||||
}
|
||||
]
|
||||
"description": "",
|
||||
"links": []
|
||||
},
|
||||
"L0ROYh2DNlkybNDO2ezJY": {
|
||||
"title": "Directory Traversal",
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -2470,11 +2470,6 @@
|
||||
"url": "https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/",
|
||||
"type": "article"
|
||||
},
|
||||
{
|
||||
"title": "Building a simple offline-capable Notepad app ",
|
||||
"url": "https://www.amitmerchant.com/Building-Simple-Offline-Notepad-Using-Service-Worker/",
|
||||
"type": "article"
|
||||
},
|
||||
{
|
||||
"title": "Explore top posts about Web Development",
|
||||
"url": "https://app.daily.dev/tags/webdev?ref=roadmapsh",
|
||||
|
||||
@@ -429,11 +429,6 @@
|
||||
"title": "String",
|
||||
"url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String",
|
||||
"type": "article"
|
||||
},
|
||||
{
|
||||
"title": "JavaScript Strings",
|
||||
"url": "https://javascript.info/string",
|
||||
"type": "article"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@@ -2,13 +2,7 @@
|
||||
"lDIy56RyC1XM7IfORsSLD": {
|
||||
"title": "Introduction",
|
||||
"description": "PostgreSQL is a powerful, open-source Object-Relational Database Management System (ORDBMS) that is known for its robustness, extensibility, and SQL compliance. It was initially developed at the University of California, Berkeley, in the 1980s and has since become one of the most popular open-source databases in the world.",
|
||||
"links": [
|
||||
{
|
||||
"title": "History of POSTGRES to PostgreSQL",
|
||||
"url": "https://www.postgresql.org/docs/current/history.html",
|
||||
"type": "article"
|
||||
}
|
||||
]
|
||||
"links": []
|
||||
},
|
||||
"soar-NBWCr4xVKj7ttfnc": {
|
||||
"title": "What are Relational Databases?",
|
||||
@@ -312,7 +306,7 @@
|
||||
"description": "Multi-Version Concurrency Control (MVCC) is a technique used by PostgreSQL to allow multiple transactions to access the same data concurrently without conflicts or delays. It ensures that each transaction has a consistent snapshot of the database and can operate on its own version of the data.\n\nLearn more from the following resources:",
|
||||
"links": [
|
||||
{
|
||||
"title": "Multiversion concurrency control - Wikipedia",
|
||||
"title": "",
|
||||
"url": "https://en.wikipedia.org/wiki/Multiversion_concurrency_control",
|
||||
"type": "article"
|
||||
},
|
||||
|
||||
@@ -1437,29 +1437,8 @@
|
||||
},
|
||||
"PKqwKvoffm0unwcFwpojk": {
|
||||
"title": "Scrum",
|
||||
"description": "`Scrum` is a popular agile framework used for project management, particularly in software development. It emphasizes iterative development, collaboration, and flexibility to deliver high-quality products.\n\nKey elements of Scrum:\n\n* **Sprints**: Time-boxed iterations (usually 2-4 weeks) where teams work on specific goals.\n* **Product Backlog**: Prioritized list of features or requirements for the product.\n* **Sprint Backlog**: Selected items from the Product Backlog to be completed during a Sprint.\n* **Daily Scrum (Stand-up)**: Brief daily meeting where team members share progress, challenges, and plans for the day.\n* **Sprint Review**: Meeting at the end of a Sprint to demonstrate completed work and gather feedback.\n* **Sprint Retrospective**: Meeting to reflect on the Sprint, identify improvements, and adjust processes for the next Sprint.\n\nVisit the following resources to learn more:",
|
||||
"links": [
|
||||
{
|
||||
"title": "What is scrum and how to get started",
|
||||
"url": "https://www.atlassian.com/agile/scrum.",
|
||||
"type": "article"
|
||||
},
|
||||
{
|
||||
"title": "Scrum Methodology: The Complete Guide & Best Practices",
|
||||
"url": "https://thedigitalprojectmanager.com/projects/pm-methodology/scrum-methodology-complete-guide/",
|
||||
"type": "article"
|
||||
},
|
||||
{
|
||||
"title": "Essential Topics for the Scrum Product Owner",
|
||||
"url": "https://www.scrum.org/resources/blog/essential-topics-scrum-product-owner",
|
||||
"type": "article"
|
||||
},
|
||||
{
|
||||
"title": "Scrum • Topics - Thriving Technologist",
|
||||
"url": "https://thrivingtechnologist.com/topics/scrum/",
|
||||
"type": "article"
|
||||
}
|
||||
]
|
||||
"description": "",
|
||||
"links": []
|
||||
},
|
||||
"7fL9lSu4BD1wRjnZy9tM9": {
|
||||
"title": "XP",
|
||||
@@ -1500,24 +1479,8 @@
|
||||
},
|
||||
"UCCT7-E_QUKPg3jAsjobx": {
|
||||
"title": "TCP/IP Model",
|
||||
"description": "The `TCP/IP model` defines how devices should transmit data between them and enables communication over networks and large distances. The model represents how data is exchanged and organized over networks. It is split into four layers, which set the standards for data exchange and represent how data is handled and packaged when being delivered between applications, devices, and servers.\n\n* **Network Access Layer**: The network access layer is a group of applications requiring network communications. This layer is responsible for generating the data and requesting connections.\n \n* **Internet Layer**: The internet layer is responsible for sending packets from a network and controlling their movement across a network to ensure they reach their destination.\n \n* **Transport Layer**: The transport layer is responsible for providing a solid and reliable data connection between the original application or device and its intended destination.\n \n* **Application Layer**: The application layer refers to programs that need TCP/IP to help them communicate with each other.\n \n\nVisit the following resources to learn more:",
|
||||
"links": [
|
||||
{
|
||||
"title": "What is Transmission Control Protocol TCP/IP? - Fortinet",
|
||||
"url": "https://www.fortinet.com/resources/cyberglossary/tcp-ip#:~:text=The%20TCP%2FIP%20model%20defines,exchanged%20and%20organized%20over%20networks.",
|
||||
"type": "article"
|
||||
},
|
||||
{
|
||||
"title": "TCP/IP Model",
|
||||
"url": "https://www.geeksforgeeks.org/tcp-ip-model/",
|
||||
"type": "article"
|
||||
},
|
||||
{
|
||||
"title": "What is TCP/IP and How Does it Work?",
|
||||
"url": "https://www.techtarget.com/searchnetworking/definition/TCP-IP",
|
||||
"type": "article"
|
||||
}
|
||||
]
|
||||
"description": "",
|
||||
"links": []
|
||||
},
|
||||
"Nq6o6Ty8VyNRsvg-UWp7D": {
|
||||
"title": "HTTP, HTTPS",
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"R9DQNc0AyAQ2HLpP4HOk6": {
|
||||
"title": "What are Relational Databases?",
|
||||
"description": "Relational databases are a type of database management system (DBMS) that stores and provides access to data points that are related to one another. Based on the relational model introduced by E.F. Codd in 1970, they use a structure that allows data to be organized into tables with rows and columns. Key features include:\n\n* Use of SQL (Structured Query Language) for querying and managing data\n* Support for ACID transactions (Atomicity, Consistency, Isolation, Durability)\n* Enforcement of data integrity through constraints (e.g., primary keys, foreign keys)\n* Ability to establish relationships between tables, enabling complex queries and data retrieval\n* Scalability and support for multi-user environments\n\nExamples of popular relational database systems include MySQL, PostgreSQL, Oracle, and Microsoft SQL Server. They are widely used in various applications, from small-scale projects to large enterprise systems, due to their reliability, consistency, and powerful querying capabilities.\n\nLearn more from the following resources:",
|
||||
"description": "Relational databases are a type of database management system (DBMS) that stores and provides access to data points that are related to one another. Based on the relational model introduced by E.F. Codd in 1970, they use a structure that allows data to be organized into tables with rows and columns. Key features include:\n\n* Use of SQL (Structured Query Language) for querying and managing data\n* Support for ACID transactions (Atomicity, Consistency, Isolation, Durability)\n* Enforcement of data integrity through constraints (e.g., primary keys, foreign keys)\n* bility to establish relationships between tables, enabling complex queries and data retrieval\n* Scalability and support for multi-user environments\n\nExamples of popular relational database systems include MySQL, PostgreSQL, Oracle, and Microsoft SQL Server. They are widely used in various applications, from small-scale projects to large enterprise systems, due to their reliability, consistency, and powerful querying capabilities.\n\nLearn more from the following resources:",
|
||||
"links": [
|
||||
{
|
||||
"title": "What is a relational database - AWS",
|
||||
|
||||
@@ -24,6 +24,11 @@
|
||||
"url": "https://www.businessballs.com/improving-workplace-performance/nudge-theory/",
|
||||
"type": "article"
|
||||
},
|
||||
{
|
||||
"title": "Nudge Theory Explained with Examples (on YouTube)",
|
||||
"url": "https://www.youtube.com/watch?v=u3yxxteiyya&ab_channel=epm",
|
||||
"type": "video"
|
||||
},
|
||||
{
|
||||
"title": "Nudge Theory Explained in less than 10 minutes",
|
||||
"url": "https://youtu.be/fA5eGIMZTRQ",
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { type APIContext } from 'astro';
|
||||
import { api } from './api.ts';
|
||||
import type { RoadmapDocument } from '../components/CustomRoadmap/CreateRoadmap/CreateRoadmapModal.tsx';
|
||||
import type { PageType } from '../components/CommandMenu/CommandMenu.tsx';
|
||||
|
||||
export type ListShowcaseRoadmapResponse = {
|
||||
data: Pick<
|
||||
@@ -38,30 +37,3 @@ export function roadmapApi(context: APIContext) {
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export type ProjectPageType = {
|
||||
id: string;
|
||||
title: string;
|
||||
url: string;
|
||||
};
|
||||
|
||||
export async function getProjectList() {
|
||||
const baseUrl = import.meta.env.DEV
|
||||
? 'http://localhost:3000'
|
||||
: 'https://roadmap.sh';
|
||||
const pages = await fetch(`${baseUrl}/pages.json`).catch((err) => {
|
||||
console.error(err);
|
||||
return [];
|
||||
});
|
||||
|
||||
const pagesJson = await (pages as any).json();
|
||||
const projects: ProjectPageType[] = pagesJson
|
||||
.filter((page: any) => page?.group?.toLowerCase() === 'projects')
|
||||
.map((page: any) => ({
|
||||
id: page.id,
|
||||
title: page.title,
|
||||
url: page.url,
|
||||
}));
|
||||
|
||||
return projects;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { type APIContext } from 'astro';
|
||||
import { api } from './api.ts';
|
||||
import type { ResourceType } from '../lib/resource-progress.ts';
|
||||
import type { ProjectStatusDocument } from '../components/Projects/ListProjectSolutions.tsx';
|
||||
|
||||
export const allowedRoadmapVisibility = ['all', 'none', 'selected'] as const;
|
||||
export type AllowedRoadmapVisibility =
|
||||
@@ -100,7 +99,6 @@ export type GetPublicProfileResponse = Omit<
|
||||
> & {
|
||||
activity: UserActivityCount;
|
||||
roadmaps: ProgressResponse[];
|
||||
projects: ProjectStatusDocument[];
|
||||
isOwnProfile: boolean;
|
||||
};
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react';
|
||||
import { isLoggedIn } from '../../lib/jwt';
|
||||
import { httpGet } from '../../lib/http';
|
||||
import { useToast } from '../../hooks/use-toast';
|
||||
import { Flame, X, Zap, ZapOff } from 'lucide-react';
|
||||
import {Flame, X, Zap, ZapOff} from 'lucide-react';
|
||||
import { useOutsideClick } from '../../hooks/use-outside-click';
|
||||
import { StreakDay } from './StreakDay';
|
||||
import {
|
||||
@@ -11,7 +11,6 @@ import {
|
||||
} from '../../stores/page.ts';
|
||||
import { useStore } from '@nanostores/react';
|
||||
import { cn } from '../../lib/classname.ts';
|
||||
import { $accountStreak } from '../../stores/streak.ts';
|
||||
|
||||
type StreakResponse = {
|
||||
count: number;
|
||||
@@ -28,7 +27,12 @@ export function AccountStreak(props: AccountStreakProps) {
|
||||
const dropdownRef = useRef(null);
|
||||
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const accountStreak = useStore($accountStreak);
|
||||
const [accountStreak, setAccountStreak] = useState<StreakResponse>({
|
||||
count: 0,
|
||||
longestCount: 0,
|
||||
firstVisitAt: new Date(),
|
||||
lastVisitAt: new Date(),
|
||||
});
|
||||
const [showDropdown, setShowDropdown] = useState(false);
|
||||
|
||||
const $roadmapsDropdownOpen = useStore(roadmapsDropdownOpen);
|
||||
@@ -45,11 +49,6 @@ export function AccountStreak(props: AccountStreakProps) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (accountStreak) {
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
const { response, error } = await httpGet<StreakResponse>(
|
||||
`${import.meta.env.PUBLIC_API_URL}/v1-streak`,
|
||||
@@ -61,7 +60,7 @@ export function AccountStreak(props: AccountStreakProps) {
|
||||
return;
|
||||
}
|
||||
|
||||
$accountStreak.set(response);
|
||||
setAccountStreak(response);
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
@@ -77,7 +76,7 @@ export function AccountStreak(props: AccountStreakProps) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let { count: currentCount = 0 } = accountStreak || {};
|
||||
let { count: currentCount } = accountStreak;
|
||||
const previousCount =
|
||||
accountStreak?.previousCount || accountStreak?.count || 0;
|
||||
|
||||
@@ -111,7 +110,7 @@ export function AccountStreak(props: AccountStreakProps) {
|
||||
ref={dropdownRef}
|
||||
className="absolute right-0 top-full z-50 w-[335px] translate-y-1 rounded-lg bg-slate-800 shadow-xl"
|
||||
>
|
||||
<div className="py-3 pl-4 pr-5">
|
||||
<div className="pl-4 pr-5 py-3">
|
||||
<div className="flex items-center justify-between gap-2 text-sm text-slate-500">
|
||||
<p>
|
||||
Current Streak
|
||||
@@ -181,7 +180,7 @@ export function AccountStreak(props: AccountStreakProps) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="-mt-[0px] mb-[1.75px] text-center text-xs tracking-wide text-slate-600">
|
||||
<p className="text-center text-xs text-slate-600 tracking-wide mb-[1.75px] -mt-[0px]">
|
||||
Visit every day to keep your streak alive!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -5,10 +5,6 @@ import { ResourceProgress } from './ResourceProgress';
|
||||
import { pageProgressMessage } from '../../stores/page';
|
||||
import { EmptyActivity } from './EmptyActivity';
|
||||
import { ActivityStream, type UserStreamActivity } from './ActivityStream';
|
||||
import type { ProjectStatusDocument } from '../Projects/ListProjectSolutions';
|
||||
import type { PageType } from '../CommandMenu/CommandMenu';
|
||||
import { useToast } from '../../hooks/use-toast';
|
||||
import { ProjectProgress } from './ProjectProgress';
|
||||
|
||||
type ProgressResponse = {
|
||||
updatedAt: string;
|
||||
@@ -51,14 +47,11 @@ export type ActivityResponse = {
|
||||
};
|
||||
}[];
|
||||
activities: UserStreamActivity[];
|
||||
projects: ProjectStatusDocument[];
|
||||
};
|
||||
|
||||
export function ActivityPage() {
|
||||
const toast = useToast();
|
||||
const [activity, setActivity] = useState<ActivityResponse>();
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [projectDetails, setProjectDetails] = useState<PageType[]>([]);
|
||||
|
||||
async function loadActivity() {
|
||||
const { error, response } = await httpGet<ActivityResponse>(
|
||||
@@ -75,29 +68,11 @@ export function ActivityPage() {
|
||||
setActivity(response);
|
||||
}
|
||||
|
||||
async function loadAllProjectDetails() {
|
||||
const { error, response } = await httpGet<PageType[]>(`/pages.json`);
|
||||
|
||||
if (error) {
|
||||
toast.error(error.message || 'Something went wrong');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!response) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const allProjects = response.filter((page) => page.group === 'Projects');
|
||||
setProjectDetails(allProjects);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
Promise.allSettled([loadActivity(), loadAllProjectDetails()]).finally(
|
||||
() => {
|
||||
pageProgressMessage.set('');
|
||||
setIsLoading(false);
|
||||
},
|
||||
);
|
||||
loadActivity().finally(() => {
|
||||
pageProgressMessage.set('');
|
||||
setIsLoading(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const learningRoadmaps = activity?.learning.roadmaps || [];
|
||||
@@ -131,17 +106,6 @@ export function ActivityPage() {
|
||||
learningRoadmapsToShow.length !== 0 ||
|
||||
learningBestPracticesToShow.length !== 0;
|
||||
|
||||
const enrichedProjects = activity?.projects.map((project) => {
|
||||
const projectDetail = projectDetails.find(
|
||||
(page) => page.id === project.projectId,
|
||||
);
|
||||
|
||||
return {
|
||||
...project,
|
||||
title: projectDetail?.title || 'N/A',
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<ActivityCounters
|
||||
@@ -237,19 +201,6 @@ export function ActivityPage() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{enrichedProjects && enrichedProjects?.length > 0 && (
|
||||
<div className="mx-0 px-0 py-5 pb-0 md:-mx-10 md:px-8 md:py-8 md:pb-0">
|
||||
<h2 className="mb-3 text-xs uppercase text-gray-400">
|
||||
Your Projects
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 gap-1.5 sm:grid-cols-2">
|
||||
{enrichedProjects.map((project) => (
|
||||
<ProjectProgress key={project._id} projectStatus={project} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{hasProgress && (
|
||||
<ActivityStream activities={activity?.activities || []} />
|
||||
)}
|
||||
|
||||
@@ -1,57 +0,0 @@
|
||||
import { getUser } from '../../lib/jwt';
|
||||
import { getPercentage } from '../../helper/number';
|
||||
import { ProjectProgressActions } from './ProjectProgressActions';
|
||||
import { cn } from '../../lib/classname';
|
||||
import type { ProjectStatusDocument } from '../Projects/ListProjectSolutions';
|
||||
import { ProjectStatus } from './ProjectStatus';
|
||||
import { ThumbsUp } from 'lucide-react';
|
||||
|
||||
type ProjectProgressType = {
|
||||
projectStatus: ProjectStatusDocument & {
|
||||
title: string;
|
||||
};
|
||||
showActions?: boolean;
|
||||
userId?: string;
|
||||
};
|
||||
|
||||
export function ProjectProgress(props: ProjectProgressType) {
|
||||
const {
|
||||
projectStatus,
|
||||
showActions = true,
|
||||
userId: defaultUserId = getUser()?.id,
|
||||
} = props;
|
||||
|
||||
const shouldShowActions =
|
||||
projectStatus.submittedAt &&
|
||||
projectStatus.submittedAt !== null &&
|
||||
showActions;
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<a
|
||||
className={cn(
|
||||
'group relative flex w-full items-center justify-between overflow-hidden rounded-md border border-gray-300 bg-white px-3 py-2 pr-7 text-left text-sm transition-all hover:border-gray-400',
|
||||
shouldShowActions ? '' : 'pr-3',
|
||||
)}
|
||||
href={`/projects/${projectStatus.projectId}`}
|
||||
target="_blank"
|
||||
>
|
||||
<ProjectStatus projectStatus={projectStatus} />
|
||||
<span className="ml-2 flex-grow truncate">{projectStatus?.title}</span>
|
||||
<span className="inline-flex items-center gap-1 text-xs text-gray-400">
|
||||
{projectStatus.upvotes}
|
||||
<ThumbsUp className="size-2.5 stroke-[2.5px]" />
|
||||
</span>
|
||||
</a>
|
||||
|
||||
{shouldShowActions && (
|
||||
<div className="absolute right-2 top-0 flex h-full items-center">
|
||||
<ProjectProgressActions
|
||||
userId={defaultUserId!}
|
||||
projectId={projectStatus.projectId}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,68 +0,0 @@
|
||||
import { MoreVertical, X } from 'lucide-react';
|
||||
import { useRef, useState } from 'react';
|
||||
import { useOutsideClick } from '../../hooks/use-outside-click';
|
||||
import { useKeydown } from '../../hooks/use-keydown';
|
||||
import { cn } from '../../lib/classname';
|
||||
import { useCopyText } from '../../hooks/use-copy-text';
|
||||
import { CheckIcon } from '../ReactIcons/CheckIcon';
|
||||
import { ShareIcon } from '../ReactIcons/ShareIcon';
|
||||
|
||||
type ProjectProgressActionsType = {
|
||||
userId: string;
|
||||
projectId: string;
|
||||
};
|
||||
|
||||
export function ProjectProgressActions(props: ProjectProgressActionsType) {
|
||||
const { userId, projectId } = props;
|
||||
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const { copyText, isCopied } = useCopyText();
|
||||
|
||||
const projectSolutionUrl = `${import.meta.env.DEV ? 'http://localhost:3000' : 'https://roadmap.sh'}/projects/${projectId}/solutions?u=${userId}`;
|
||||
|
||||
useOutsideClick(dropdownRef, () => {
|
||||
setIsOpen(false);
|
||||
});
|
||||
|
||||
useKeydown('Escape', () => {
|
||||
setIsOpen(false);
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="relative h-full" ref={dropdownRef}>
|
||||
<button
|
||||
className="h-full text-gray-400 hover:text-gray-700"
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
>
|
||||
<MoreVertical size={16} />
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
<div className="absolute right-0 top-8 z-10 w-48 overflow-hidden rounded-md border border-gray-200 bg-white shadow-lg">
|
||||
<button
|
||||
className={cn(
|
||||
'flex w-full items-center gap-1.5 p-2 text-xs font-medium hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-70 sm:text-sm',
|
||||
isCopied ? 'text-green-500' : 'text-gray-500 hover:text-black',
|
||||
)}
|
||||
onClick={() => {
|
||||
copyText(projectSolutionUrl);
|
||||
}}
|
||||
>
|
||||
{isCopied ? (
|
||||
<>
|
||||
<CheckIcon additionalClasses="h-3.5 w-3.5" /> Link Copied
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ShareIcon className="h-3.5 w-3.5 stroke-[2.5px]" /> Share
|
||||
Solution
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
import { CircleDashed } from 'lucide-react';
|
||||
import type { ProjectStatusDocument } from '../Projects/ListProjectSolutions';
|
||||
import { CheckIcon } from '../ReactIcons/CheckIcon';
|
||||
|
||||
type ProjectStatusType = {
|
||||
projectStatus: ProjectStatusDocument & {
|
||||
title: string;
|
||||
};
|
||||
};
|
||||
|
||||
export function ProjectStatus(props: ProjectStatusType) {
|
||||
const { projectStatus } = props;
|
||||
|
||||
const { submittedAt, repositoryUrl } = projectStatus;
|
||||
const status = submittedAt && repositoryUrl ? 'submitted' : 'started';
|
||||
|
||||
if (status === 'submitted') {
|
||||
return <CheckIcon additionalClasses="size-3 text-gray-500 shrink-0" />;
|
||||
}
|
||||
|
||||
return (
|
||||
<CircleDashed className="size-3 shrink-0 stroke-[2.5px] text-gray-400" />
|
||||
);
|
||||
}
|
||||
@@ -48,7 +48,6 @@ function handleGuest() {
|
||||
'/team/members',
|
||||
'/team/member',
|
||||
'/team/settings',
|
||||
'/dashboard',
|
||||
];
|
||||
|
||||
showHideAuthElements('hide');
|
||||
|
||||
@@ -1,78 +0,0 @@
|
||||
import type { UserProgress } from '../TeamProgress/TeamProgressPage';
|
||||
import { DashboardCustomProgressCard } from './DashboardCustomProgressCard';
|
||||
import { DashboardCardLink } from './DashboardCardLink';
|
||||
import { useState } from 'react';
|
||||
import { CreateRoadmapModal } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal';
|
||||
import { Simulate } from 'react-dom/test-utils';
|
||||
import { Bot, BrainCircuit, Map, PencilRuler } from 'lucide-react';
|
||||
|
||||
type DashboardAiRoadmapsProps = {
|
||||
roadmaps: {
|
||||
id: string;
|
||||
title: string;
|
||||
slug: string;
|
||||
}[];
|
||||
isLoading?: boolean;
|
||||
};
|
||||
|
||||
export function DashboardAiRoadmaps(props: DashboardAiRoadmapsProps) {
|
||||
const { roadmaps, isLoading = false } = props;
|
||||
|
||||
return (
|
||||
<>
|
||||
<h2 className="mb-2 mt-6 text-xs uppercase text-gray-400">
|
||||
AI Generated Roadmaps
|
||||
</h2>
|
||||
|
||||
{!isLoading && roadmaps.length === 0 && (
|
||||
<DashboardCardLink
|
||||
className="mt-0"
|
||||
icon={BrainCircuit}
|
||||
href="/ai"
|
||||
title="Generate Roadmaps with AI"
|
||||
description="You can generate your own roadmap with AI"
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-3">
|
||||
{isLoading && (
|
||||
<>
|
||||
{Array.from({ length: 9 }).map((_, index) => (
|
||||
<RoadmapCardSkeleton key={index} />
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
{!isLoading && roadmaps.length > 0 && (
|
||||
<>
|
||||
{roadmaps.map((roadmap) => (
|
||||
<a
|
||||
href={`/r/${roadmap.slug}`}
|
||||
className="relative rounded-md border bg-white p-2.5 text-left text-sm shadow-sm truncate hover:border-gray-400 hover:bg-gray-50"
|
||||
>
|
||||
{roadmap.title}
|
||||
</a>
|
||||
))}
|
||||
|
||||
<a
|
||||
className="flex items-center justify-center rounded-lg border border-dashed border-gray-300 bg-white p-2.5 text-sm font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-600"
|
||||
href={'/ai'}
|
||||
>
|
||||
+ Generate New
|
||||
</a>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
type CustomProgressCardSkeletonProps = {};
|
||||
|
||||
function RoadmapCardSkeleton(
|
||||
props: CustomProgressCardSkeletonProps,
|
||||
) {
|
||||
return (
|
||||
<div className="h-[42px] w-full animate-pulse rounded-md bg-gray-200" />
|
||||
);
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
import { Bookmark } from 'lucide-react';
|
||||
import type { UserProgress } from '../TeamProgress/TeamProgressPage';
|
||||
|
||||
type DashboardBookmarkCardProps = {
|
||||
bookmark: UserProgress;
|
||||
};
|
||||
|
||||
export function DashboardBookmarkCard(props: DashboardBookmarkCardProps) {
|
||||
const {
|
||||
resourceType,
|
||||
resourceId,
|
||||
resourceTitle,
|
||||
roadmapSlug,
|
||||
isCustomResource,
|
||||
} = props.bookmark;
|
||||
|
||||
let url =
|
||||
resourceType === 'roadmap'
|
||||
? `/${resourceId}`
|
||||
: `/best-practices/${resourceId}`;
|
||||
|
||||
if (isCustomResource) {
|
||||
url = `/r/${roadmapSlug}`;
|
||||
}
|
||||
|
||||
return (
|
||||
<a
|
||||
href={url}
|
||||
key={resourceId}
|
||||
className="group relative flex w-full items-center gap-2 text-left text-sm hover:text-black hover:underline"
|
||||
>
|
||||
<Bookmark className="size-4 fill-current text-gray-400" />
|
||||
<h4 className="truncate font-medium text-gray-900">{resourceTitle}</h4>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
import { ArrowUpRight, type LucideIcon } from 'lucide-react';
|
||||
import { cn } from '../../lib/classname';
|
||||
|
||||
type DashboardCardLinkProps = {
|
||||
href: string;
|
||||
title: string;
|
||||
icon: LucideIcon;
|
||||
description: string;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export function DashboardCardLink(props: DashboardCardLinkProps) {
|
||||
const { href, title, description, icon: Icon, className } = props;
|
||||
|
||||
return (
|
||||
<a
|
||||
className={cn(
|
||||
'relative mt-4 flex min-h-[220px] flex-col justify-end rounded-lg border border-gray-300 bg-gradient-to-br from-white to-gray-50 py-5 px-6 hover:border-gray-400 hover:from-white hover:to-gray-100',
|
||||
className,
|
||||
)}
|
||||
href={href}
|
||||
target="_blank"
|
||||
>
|
||||
<Icon className="mb-4 size-10 text-gray-300" strokeWidth={1.25} />
|
||||
<h4 className="text-xl font-semibold tracking-wide">{title}</h4>
|
||||
<p className="mt-1 text-gray-500">{description}</p>
|
||||
<ArrowUpRight className="absolute right-3 top-3 size-4" />
|
||||
</a>
|
||||
);
|
||||
}
|
||||
@@ -1,64 +0,0 @@
|
||||
import { getPercentage } from '../../helper/number';
|
||||
import { getRelativeTimeString } from '../../lib/date';
|
||||
import type { UserProgress } from '../TeamProgress/TeamProgressPage';
|
||||
|
||||
type DashboardCustomProgressCardProps = {
|
||||
progress: UserProgress;
|
||||
};
|
||||
|
||||
export function DashboardCustomProgressCard(props: DashboardCustomProgressCardProps) {
|
||||
const { progress } = props;
|
||||
|
||||
const {
|
||||
resourceType,
|
||||
resourceId,
|
||||
resourceTitle,
|
||||
total: totalCount,
|
||||
done: doneCount,
|
||||
skipped: skippedCount,
|
||||
roadmapSlug,
|
||||
isCustomResource,
|
||||
updatedAt,
|
||||
} = progress;
|
||||
|
||||
let url =
|
||||
resourceType === 'roadmap'
|
||||
? `/${resourceId}`
|
||||
: `/best-practices/${resourceId}`;
|
||||
|
||||
if (isCustomResource) {
|
||||
url = `/r/${roadmapSlug}`;
|
||||
}
|
||||
|
||||
const totalMarked = doneCount + skippedCount;
|
||||
const progressPercentage = getPercentage(totalMarked, totalCount);
|
||||
|
||||
return (
|
||||
<a
|
||||
href={url}
|
||||
className="group relative flex min-h-[80px] w-full flex-col justify-between overflow-hidden rounded-md border bg-white p-3 text-left text-sm shadow-sm transition-all hover:border-gray-400 hover:bg-gray-50"
|
||||
>
|
||||
<h4 className="truncate font-medium text-gray-900">{resourceTitle}</h4>
|
||||
|
||||
<div className="mt-6 flex items-center gap-2">
|
||||
<div className="h-2 w-full overflow-hidden rounded-md bg-black/10">
|
||||
<div
|
||||
className="h-full bg-black/20"
|
||||
style={{ width: `${progressPercentage}%` }}
|
||||
></div>
|
||||
</div>
|
||||
<span className="text-xs text-gray-500">
|
||||
{Math.floor(+progressPercentage)}%
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p className="mt-1 text-xs text-gray-400">
|
||||
{isCustomResource ? (
|
||||
<>Last updated {getRelativeTimeString(updatedAt)}</>
|
||||
) : (
|
||||
<>Last practiced {getRelativeTimeString(updatedAt)}</>
|
||||
)}
|
||||
</p>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
@@ -1,124 +0,0 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { httpGet } from '../../lib/http';
|
||||
import { useToast } from '../../hooks/use-toast';
|
||||
import { useStore } from '@nanostores/react';
|
||||
import { $teamList } from '../../stores/team';
|
||||
import type { TeamListResponse } from '../TeamDropdown/TeamDropdown';
|
||||
import { DashboardTab } from './DashboardTab';
|
||||
import { PersonalDashboard, type BuiltInRoadmap } from './PersonalDashboard';
|
||||
import { TeamDashboard } from './TeamDashboard';
|
||||
import { getUser } from '../../lib/jwt';
|
||||
|
||||
type DashboardPageProps = {
|
||||
builtInRoleRoadmaps?: BuiltInRoadmap[];
|
||||
builtInSkillRoadmaps?: BuiltInRoadmap[];
|
||||
builtInBestPractices?: BuiltInRoadmap[];
|
||||
};
|
||||
|
||||
export function DashboardPage(props: DashboardPageProps) {
|
||||
const { builtInRoleRoadmaps, builtInBestPractices, builtInSkillRoadmaps } =
|
||||
props;
|
||||
|
||||
const currentUser = getUser();
|
||||
const toast = useToast();
|
||||
const teamList = useStore($teamList);
|
||||
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [selectedTeamId, setSelectedTeamId] = useState<string>();
|
||||
|
||||
async function getAllTeams() {
|
||||
if (teamList.length > 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { response, error } = await httpGet<TeamListResponse>(
|
||||
`${import.meta.env.PUBLIC_API_URL}/v1-get-user-teams`,
|
||||
);
|
||||
if (error || !response) {
|
||||
toast.error(error?.message || 'Something went wrong');
|
||||
return;
|
||||
}
|
||||
|
||||
$teamList.set(response);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getAllTeams().finally(() => setIsLoading(false));
|
||||
}, []);
|
||||
|
||||
const userAvatar =
|
||||
currentUser?.avatar && !isLoading
|
||||
? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${currentUser.avatar}`
|
||||
: '/images/default-avatar.png';
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 pb-20 pt-8">
|
||||
<div className="container">
|
||||
<div className="mb-8 flex flex-wrap items-center gap-1.5">
|
||||
<DashboardTab
|
||||
label="Personal"
|
||||
isActive={!selectedTeamId}
|
||||
onClick={() => setSelectedTeamId(undefined)}
|
||||
avatar={userAvatar}
|
||||
/>
|
||||
{isLoading && (
|
||||
<>
|
||||
<DashboardTabSkeleton />
|
||||
<DashboardTabSkeleton />
|
||||
</>
|
||||
)}
|
||||
|
||||
{!isLoading && (
|
||||
<>
|
||||
{teamList.map((team) => {
|
||||
const { avatar } = team;
|
||||
const avatarUrl = avatar
|
||||
? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${avatar}`
|
||||
: '/images/default-avatar.png';
|
||||
return (
|
||||
<DashboardTab
|
||||
key={team._id}
|
||||
label={team.name}
|
||||
isActive={team._id === selectedTeamId}
|
||||
{...(team.status === 'invited'
|
||||
? {
|
||||
href: `/respond-invite?i=${team.memberId}`,
|
||||
}
|
||||
: {
|
||||
href: `/team/activity?t=${team._id}`,
|
||||
// onClick: () => {
|
||||
// setSelectedTeamId(team._id);
|
||||
// },
|
||||
})}
|
||||
avatar={avatarUrl}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
<DashboardTab
|
||||
label="+ Create Team"
|
||||
isActive={false}
|
||||
href="/team/new"
|
||||
className="border border-dashed border-gray-300 bg-transparent px-3 text-[13px] text-sm text-gray-500 hover:border-gray-600 hover:text-black"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!selectedTeamId && (
|
||||
<PersonalDashboard
|
||||
builtInRoleRoadmaps={builtInRoleRoadmaps}
|
||||
builtInSkillRoadmaps={builtInSkillRoadmaps}
|
||||
builtInBestPractices={builtInBestPractices}
|
||||
/>
|
||||
)}
|
||||
{selectedTeamId && <TeamDashboard teamId={selectedTeamId} />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DashboardTabSkeleton() {
|
||||
return (
|
||||
<div className="h-[30px] w-[114px] animate-pulse rounded-md border bg-white"></div>
|
||||
);
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
import { getPercentage } from '../../helper/number';
|
||||
import type { UserProgress } from '../TeamProgress/TeamProgressPage';
|
||||
import { ArrowUpRight, ExternalLink } from 'lucide-react';
|
||||
|
||||
type DashboardProgressCardProps = {
|
||||
progress: UserProgress;
|
||||
};
|
||||
|
||||
export function DashboardProgressCard(props: DashboardProgressCardProps) {
|
||||
const { progress } = props;
|
||||
const {
|
||||
resourceType,
|
||||
resourceId,
|
||||
resourceTitle,
|
||||
total: totalCount,
|
||||
done: doneCount,
|
||||
skipped: skippedCount,
|
||||
roadmapSlug,
|
||||
isCustomResource,
|
||||
updatedAt,
|
||||
} = progress;
|
||||
|
||||
let url =
|
||||
resourceType === 'roadmap'
|
||||
? `/${resourceId}`
|
||||
: `/best-practices/${resourceId}`;
|
||||
|
||||
if (isCustomResource) {
|
||||
url = `/r/${roadmapSlug}`;
|
||||
}
|
||||
|
||||
const totalMarked = doneCount + skippedCount;
|
||||
const progressPercentage = getPercentage(totalMarked, totalCount);
|
||||
|
||||
return (
|
||||
<a
|
||||
href={url}
|
||||
key={resourceId}
|
||||
className="group relative flex w-full items-center justify-between overflow-hidden rounded-md border border-gray-300 bg-white px-3 py-2 text-left text-sm transition-all hover:border-gray-400"
|
||||
>
|
||||
<span className="flex-grow truncate">{resourceTitle}</span>
|
||||
<span className="text-xs text-gray-400">
|
||||
{parseInt(progressPercentage, 10)}%
|
||||
</span>
|
||||
|
||||
<span
|
||||
className="absolute left-0 top-0 block h-full cursor-pointer rounded-tl-md bg-black/5 transition-colors group-hover:bg-black/10"
|
||||
style={{
|
||||
width: `${progressPercentage}%`,
|
||||
}}
|
||||
/>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
@@ -1,55 +0,0 @@
|
||||
import { Check, CircleCheck, CircleDashed } from 'lucide-react';
|
||||
import type { ProjectStatusDocument } from '../Projects/ListProjectSolutions';
|
||||
import { cn } from '../../lib/classname.ts';
|
||||
import { getRelativeTimeString } from '../../lib/date.ts';
|
||||
|
||||
type DashboardProjectCardProps = {
|
||||
project: ProjectStatusDocument & {
|
||||
title: string;
|
||||
};
|
||||
};
|
||||
|
||||
export function DashboardProjectCard(props: DashboardProjectCardProps) {
|
||||
const { project } = props;
|
||||
|
||||
const { title, projectId, submittedAt, startedAt, repositoryUrl } = project;
|
||||
|
||||
const url = `/projects/${projectId}`;
|
||||
const status = submittedAt && repositoryUrl ? 'submitted' : 'started';
|
||||
|
||||
return (
|
||||
<a
|
||||
href={url}
|
||||
key={projectId}
|
||||
className="group relative flex w-full items-center gap-2 text-left text-sm underline-offset-2"
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
'flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full',
|
||||
{
|
||||
'border border-green-500 bg-green-500 group-hover:border-green-600 group-hover:bg-green-600':
|
||||
status === 'submitted',
|
||||
'border border-dashed border-gray-400 bg-transparent group-hover:border-gray-500':
|
||||
status === 'started',
|
||||
},
|
||||
)}
|
||||
>
|
||||
{status === 'submitted' && (
|
||||
<Check
|
||||
className="relative top-[0.5px] size-3 text-white"
|
||||
strokeWidth={3}
|
||||
/>
|
||||
)}
|
||||
</span>
|
||||
<span className="flex-grow truncate group-hover:underline">{title.replace(/(System)|(Service)/, '')}</span>
|
||||
<span className="flex-shrink-0 bg-transparent text-xs text-gray-400 no-underline">
|
||||
{!!startedAt &&
|
||||
status === 'started' &&
|
||||
getRelativeTimeString(startedAt)}
|
||||
{!!submittedAt &&
|
||||
status === 'submitted' &&
|
||||
getRelativeTimeString(submittedAt)}
|
||||
</span>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import { cn } from '../../lib/classname';
|
||||
|
||||
type DashboardTabProps = {
|
||||
label: string | ReactNode;
|
||||
isActive: boolean;
|
||||
onClick?: () => void;
|
||||
className?: string;
|
||||
href?: string;
|
||||
avatar?: string;
|
||||
icon?: ReactNode;
|
||||
};
|
||||
|
||||
export function DashboardTab(props: DashboardTabProps) {
|
||||
const { isActive, onClick, label, className, href, avatar, icon } = props;
|
||||
|
||||
const Slot = href ? 'a' : 'button';
|
||||
|
||||
return (
|
||||
<Slot
|
||||
onClick={onClick}
|
||||
className={cn(
|
||||
'flex h-[30px] shrink-0 items-center gap-1 rounded-md border bg-white p-1.5 px-2 text-sm leading-none text-gray-600',
|
||||
isActive ? 'border-gray-500 bg-gray-200 text-gray-900' : '',
|
||||
className,
|
||||
)}
|
||||
{...(href ? { href } : {})}
|
||||
>
|
||||
{avatar && (
|
||||
<img
|
||||
src={avatar}
|
||||
alt="avatar"
|
||||
className="h-4 w-4 mr-0.5 rounded-full object-cover"
|
||||
/>
|
||||
)}
|
||||
{icon}
|
||||
{label}
|
||||
</Slot>
|
||||
);
|
||||
}
|
||||
@@ -1,112 +0,0 @@
|
||||
import type { UserProgress } from '../TeamProgress/TeamProgressPage';
|
||||
import { DashboardCustomProgressCard } from './DashboardCustomProgressCard';
|
||||
import { DashboardCardLink } from './DashboardCardLink';
|
||||
import { useState } from 'react';
|
||||
import { CreateRoadmapModal } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal';
|
||||
import { Simulate } from 'react-dom/test-utils';
|
||||
import {Bot, BrainCircuit, Map, PencilRuler} from 'lucide-react';
|
||||
|
||||
type ListDashboardCustomProgressProps = {
|
||||
progresses: UserProgress[];
|
||||
isLoading?: boolean;
|
||||
isCustomResources?: boolean;
|
||||
isAIGeneratedRoadmaps?: boolean;
|
||||
};
|
||||
|
||||
export function ListDashboardCustomProgress(
|
||||
props: ListDashboardCustomProgressProps,
|
||||
) {
|
||||
const {
|
||||
progresses,
|
||||
isLoading = false,
|
||||
isAIGeneratedRoadmaps = false,
|
||||
} = props;
|
||||
const [isCreateCustomRoadmapModalOpen, setIsCreateCustomRoadmapModalOpen] =
|
||||
useState(false);
|
||||
|
||||
const customRoadmapModal = isCreateCustomRoadmapModalOpen ? (
|
||||
<CreateRoadmapModal
|
||||
onClose={() => setIsCreateCustomRoadmapModalOpen(false)}
|
||||
onCreated={(roadmap) => {
|
||||
window.location.href = `${
|
||||
import.meta.env.PUBLIC_EDITOR_APP_URL
|
||||
}/${roadmap?._id}`;
|
||||
return;
|
||||
}}
|
||||
/>
|
||||
) : null;
|
||||
|
||||
return (
|
||||
<>
|
||||
{customRoadmapModal}
|
||||
|
||||
<h2 className="mb-2 mt-6 text-xs uppercase text-gray-400">
|
||||
{isAIGeneratedRoadmaps ? 'AI Generated Roadmaps' : 'Custom Roadmaps'}
|
||||
</h2>
|
||||
|
||||
{!isLoading && progresses.length === 0 && isAIGeneratedRoadmaps && (
|
||||
<DashboardCardLink
|
||||
className="mt-0"
|
||||
icon={BrainCircuit}
|
||||
href="/ai"
|
||||
title="Generate Roadmaps with AI"
|
||||
description="You can generate your own roadmap with AI"
|
||||
/>
|
||||
)}
|
||||
|
||||
{!isLoading && progresses.length === 0 && !isAIGeneratedRoadmaps && (
|
||||
<DashboardCardLink
|
||||
className="mt-0"
|
||||
icon={PencilRuler}
|
||||
href="https://draw.roadmap.sh"
|
||||
title="Draw your own Roadmap"
|
||||
description="Use our editor to draw your own roadmap"
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-4">
|
||||
{isLoading && (
|
||||
<>
|
||||
{Array.from({ length: 8 }).map((_, index) => (
|
||||
<CustomProgressCardSkeleton key={index} />
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
{!isLoading && progresses.length > 0 && (
|
||||
<>
|
||||
{progresses.map((progress) => (
|
||||
<DashboardCustomProgressCard
|
||||
key={progress.resourceId}
|
||||
progress={progress}
|
||||
/>
|
||||
))}
|
||||
|
||||
<a
|
||||
className="flex min-h-[80px] items-center justify-center rounded-lg border border-dashed border-gray-300 bg-white p-4 text-sm font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-600"
|
||||
href={'/ai'}
|
||||
onClick={(e) => {
|
||||
if (!isAIGeneratedRoadmaps) {
|
||||
e.preventDefault();
|
||||
setIsCreateCustomRoadmapModalOpen(true);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{isAIGeneratedRoadmaps ? '+ Generate New' : '+ Create New'}
|
||||
</a>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
type CustomProgressCardSkeletonProps = {};
|
||||
|
||||
export function CustomProgressCardSkeleton(
|
||||
props: CustomProgressCardSkeletonProps,
|
||||
) {
|
||||
return (
|
||||
<div className="h-[106px] w-full animate-pulse rounded-md bg-gray-200" />
|
||||
);
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
type LoadingProgressProps = {};
|
||||
|
||||
export function LoadingProgress(props: LoadingProgressProps) {
|
||||
return (
|
||||
<div className="grid grid-cols-1 gap-1.5 sm:grid-cols-3">
|
||||
{Array.from({ length: 6 }).map((_, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="h-[38px] w-full animate-pulse rounded-md border border-gray-300 bg-gray-100"
|
||||
></div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,340 +0,0 @@
|
||||
import { type JSXElementConstructor, useEffect, useState } from 'react';
|
||||
import { httpGet } from '../../lib/http';
|
||||
import type { UserProgress } from '../TeamProgress/TeamProgressPage';
|
||||
import type { ProjectStatusDocument } from '../Projects/ListProjectSolutions';
|
||||
import type { PageType } from '../CommandMenu/CommandMenu';
|
||||
import { useToast } from '../../hooks/use-toast';
|
||||
import { getCurrentPeriod } from '../../lib/date';
|
||||
import { ListDashboardCustomProgress } from './ListDashboardCustomProgress';
|
||||
import { RecommendedRoadmaps } from './RecommendedRoadmaps';
|
||||
import { ProgressStack } from './ProgressStack';
|
||||
import { useStore } from '@nanostores/react';
|
||||
import { $accountStreak, type StreakResponse } from '../../stores/streak';
|
||||
import { CheckEmoji } from '../ReactIcons/CheckEmoji.tsx';
|
||||
import { ConstructionEmoji } from '../ReactIcons/ConstructionEmoji.tsx';
|
||||
import { BookEmoji } from '../ReactIcons/BookEmoji.tsx';
|
||||
import { DashboardAiRoadmaps } from './DashboardAiRoadmaps.tsx';
|
||||
|
||||
type UserDashboardResponse = {
|
||||
name: string;
|
||||
email: string;
|
||||
avatar: string;
|
||||
headline: string;
|
||||
username: string;
|
||||
progresses: UserProgress[];
|
||||
projects: ProjectStatusDocument[];
|
||||
aiRoadmaps: {
|
||||
id: string;
|
||||
title: string;
|
||||
slug: string;
|
||||
}[];
|
||||
topicDoneToday: number;
|
||||
};
|
||||
|
||||
export type BuiltInRoadmap = {
|
||||
id: string;
|
||||
url: string;
|
||||
title: string;
|
||||
description: string;
|
||||
isFavorite?: boolean;
|
||||
relatedRoadmapIds?: string[];
|
||||
};
|
||||
|
||||
type PersonalDashboardProps = {
|
||||
builtInRoleRoadmaps?: BuiltInRoadmap[];
|
||||
builtInSkillRoadmaps?: BuiltInRoadmap[];
|
||||
builtInBestPractices?: BuiltInRoadmap[];
|
||||
};
|
||||
|
||||
export function PersonalDashboard(props: PersonalDashboardProps) {
|
||||
const {
|
||||
builtInRoleRoadmaps = [],
|
||||
builtInBestPractices = [],
|
||||
builtInSkillRoadmaps = [],
|
||||
} = props;
|
||||
|
||||
const toast = useToast();
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [personalDashboardDetails, setPersonalDashboardDetails] =
|
||||
useState<UserDashboardResponse>();
|
||||
const [projectDetails, setProjectDetails] = useState<PageType[]>([]);
|
||||
const accountStreak = useStore($accountStreak);
|
||||
|
||||
const loadAccountStreak = async () => {
|
||||
if (accountStreak) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
const { response, error } = await httpGet<StreakResponse>(
|
||||
`${import.meta.env.PUBLIC_API_URL}/v1-streak`,
|
||||
);
|
||||
|
||||
if (error || !response) {
|
||||
toast.error(error?.message || 'Failed to load account streak');
|
||||
return;
|
||||
}
|
||||
|
||||
$accountStreak.set(response);
|
||||
};
|
||||
|
||||
async function loadProgress() {
|
||||
const { response: progressList, error } =
|
||||
await httpGet<UserDashboardResponse>(
|
||||
`${import.meta.env.PUBLIC_API_URL}/v1-user-dashboard`,
|
||||
);
|
||||
|
||||
if (error || !progressList) {
|
||||
return;
|
||||
}
|
||||
|
||||
progressList?.progresses?.forEach((progress) => {
|
||||
window.dispatchEvent(
|
||||
new CustomEvent('mark-favorite', {
|
||||
detail: {
|
||||
resourceId: progress.resourceId,
|
||||
resourceType: progress.resourceType,
|
||||
isFavorite: progress.isFavorite,
|
||||
},
|
||||
}),
|
||||
);
|
||||
});
|
||||
setPersonalDashboardDetails(progressList);
|
||||
}
|
||||
|
||||
async function loadAllProjectDetails() {
|
||||
const { error, response } = await httpGet<PageType[]>(`/pages.json`);
|
||||
|
||||
if (error) {
|
||||
toast.error(error.message || 'Something went wrong');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!response) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const allProjects = response.filter((page) => page.group === 'Projects');
|
||||
setProjectDetails(allProjects);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
Promise.allSettled([
|
||||
loadProgress(),
|
||||
loadAllProjectDetails(),
|
||||
loadAccountStreak(),
|
||||
]).finally(() => setIsLoading(false));
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener('refresh-favorites', loadProgress);
|
||||
return () => window.removeEventListener('refresh-favorites', loadProgress);
|
||||
}, []);
|
||||
|
||||
const learningRoadmapsToShow = (personalDashboardDetails?.progresses || [])
|
||||
.filter((progress) => !progress.isCustomResource)
|
||||
.sort((a, b) => {
|
||||
const updatedAtA = new Date(a.updatedAt);
|
||||
const updatedAtB = new Date(b.updatedAt);
|
||||
|
||||
if (a.isFavorite && !b.isFavorite) {
|
||||
return -1;
|
||||
}
|
||||
|
||||
if (!a.isFavorite && b.isFavorite) {
|
||||
return 1;
|
||||
}
|
||||
|
||||
return updatedAtB.getTime() - updatedAtA.getTime();
|
||||
});
|
||||
|
||||
const aiGeneratedRoadmaps = personalDashboardDetails?.aiRoadmaps || [];
|
||||
const customRoadmaps = (personalDashboardDetails?.progresses || [])
|
||||
.filter((progress) => progress.isCustomResource)
|
||||
.sort((a, b) => {
|
||||
const updatedAtA = new Date(a.updatedAt);
|
||||
const updatedAtB = new Date(b.updatedAt);
|
||||
return updatedAtB.getTime() - updatedAtA.getTime();
|
||||
});
|
||||
|
||||
const { avatar, name } = personalDashboardDetails || {};
|
||||
const avatarLink = avatar
|
||||
? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${avatar}`
|
||||
: '/images/default-avatar.png';
|
||||
|
||||
const allRoadmapsAndBestPractices = [
|
||||
...builtInRoleRoadmaps,
|
||||
...builtInSkillRoadmaps,
|
||||
...builtInBestPractices,
|
||||
];
|
||||
|
||||
const relatedRoadmapIds = allRoadmapsAndBestPractices
|
||||
.filter((roadmap) =>
|
||||
learningRoadmapsToShow?.some(
|
||||
(learningRoadmap) => learningRoadmap.resourceId === roadmap.id,
|
||||
),
|
||||
)
|
||||
.flatMap((roadmap) => roadmap.relatedRoadmapIds)
|
||||
.filter(
|
||||
(roadmapId) =>
|
||||
!learningRoadmapsToShow.some((lr) => lr.resourceId === roadmapId),
|
||||
);
|
||||
|
||||
const recommendedRoadmapIds = new Set(
|
||||
relatedRoadmapIds.length === 0
|
||||
? [
|
||||
'frontend',
|
||||
'backend',
|
||||
'devops',
|
||||
'ai-data-scientist',
|
||||
'full-stack',
|
||||
'api-design',
|
||||
]
|
||||
: relatedRoadmapIds,
|
||||
);
|
||||
|
||||
const recommendedRoadmaps = allRoadmapsAndBestPractices.filter((roadmap) =>
|
||||
recommendedRoadmapIds.has(roadmap.id),
|
||||
);
|
||||
|
||||
const enrichedProjects = personalDashboardDetails?.projects
|
||||
.map((project) => {
|
||||
const projectDetail = projectDetails.find(
|
||||
(page) => page.id === project.projectId,
|
||||
);
|
||||
|
||||
return {
|
||||
...project,
|
||||
title: projectDetail?.title || 'N/A',
|
||||
};
|
||||
})
|
||||
.sort((a, b) => {
|
||||
if (a.repositoryUrl && !b.repositoryUrl) {
|
||||
return 1;
|
||||
}
|
||||
|
||||
if (!a.repositoryUrl && b.repositoryUrl) {
|
||||
return -1;
|
||||
}
|
||||
|
||||
return 0;
|
||||
});
|
||||
|
||||
return (
|
||||
<section>
|
||||
{isLoading ? (
|
||||
<div className="h-7 w-1/4 animate-pulse rounded-lg bg-gray-200"></div>
|
||||
) : (
|
||||
<h2 className="text-lg font-medium">
|
||||
Hi {name}, good {getCurrentPeriod()}!
|
||||
</h2>
|
||||
)}
|
||||
|
||||
<div className="mt-4 grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-4">
|
||||
{isLoading ? (
|
||||
<>
|
||||
<DashboardCardSkeleton />
|
||||
<DashboardCardSkeleton />
|
||||
<DashboardCardSkeleton />
|
||||
<DashboardCardSkeleton />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<DashboardCard
|
||||
imgUrl={avatarLink}
|
||||
title={name!}
|
||||
description="Setup your profile"
|
||||
href="/account/update-profile"
|
||||
/>
|
||||
|
||||
<DashboardCard
|
||||
icon={BookEmoji}
|
||||
title="Visit Roadmaps"
|
||||
description="Learn new skills"
|
||||
href="/roadmaps"
|
||||
/>
|
||||
|
||||
<DashboardCard
|
||||
icon={ConstructionEmoji}
|
||||
title="Build Projects"
|
||||
description="Practice what you learn"
|
||||
href="/backend/projects"
|
||||
/>
|
||||
<DashboardCard
|
||||
icon={CheckEmoji}
|
||||
title="Best Practices"
|
||||
description="Do things right way"
|
||||
href="/best-practices"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ProgressStack
|
||||
progresses={learningRoadmapsToShow}
|
||||
projects={enrichedProjects || []}
|
||||
isLoading={isLoading}
|
||||
accountStreak={accountStreak}
|
||||
topicDoneToday={personalDashboardDetails?.topicDoneToday || 0}
|
||||
/>
|
||||
|
||||
<ListDashboardCustomProgress
|
||||
progresses={customRoadmaps}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
|
||||
<DashboardAiRoadmaps
|
||||
roadmaps={aiGeneratedRoadmaps}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
|
||||
<RecommendedRoadmaps
|
||||
roadmaps={recommendedRoadmaps}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
type DashboardCardProps = {
|
||||
icon?: JSXElementConstructor<any>;
|
||||
imgUrl?: string;
|
||||
title: string;
|
||||
description: string;
|
||||
href: string;
|
||||
};
|
||||
|
||||
function DashboardCard(props: DashboardCardProps) {
|
||||
const { icon: Icon, imgUrl, title, description, href } = props;
|
||||
|
||||
return (
|
||||
<a
|
||||
href={href}
|
||||
target="_blank"
|
||||
className="flex flex-col overflow-hidden rounded-lg border border-gray-300 bg-white hover:border-gray-400 hover:bg-gray-50"
|
||||
>
|
||||
{Icon && (
|
||||
<div className="px-4 pb-3 pt-4">
|
||||
<Icon className="size-6" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{imgUrl && (
|
||||
<div className="px-4 pb-1.5 pt-3.5">
|
||||
<img src={imgUrl} alt={title} className="size-8 rounded-full" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex grow flex-col justify-center gap-0.5 p-4">
|
||||
<h3 className="truncate font-medium text-black">{title}</h3>
|
||||
<p className="text-xs text-black">{description}</p>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
function DashboardCardSkeleton() {
|
||||
return (
|
||||
<div className="h-[128px] animate-pulse rounded-lg border border-gray-300 bg-white"></div>
|
||||
);
|
||||
}
|
||||
@@ -1,328 +0,0 @@
|
||||
import {
|
||||
ArrowUpRight,
|
||||
Bookmark,
|
||||
FolderKanban,
|
||||
type LucideIcon,
|
||||
Map,
|
||||
} from 'lucide-react';
|
||||
import type { UserProgress } from '../TeamProgress/TeamProgressPage';
|
||||
import type { ProjectStatusDocument } from '../Projects/ListProjectSolutions';
|
||||
import { DashboardBookmarkCard } from './DashboardBookmarkCard';
|
||||
import { DashboardProjectCard } from './DashboardProjectCard';
|
||||
import { useState } from 'react';
|
||||
import { cn } from '../../lib/classname';
|
||||
import { DashboardProgressCard } from './DashboardProgressCard';
|
||||
import { useStore } from '@nanostores/react';
|
||||
import { $accountStreak, type StreakResponse } from '../../stores/streak';
|
||||
|
||||
type ProgressStackProps = {
|
||||
progresses: UserProgress[];
|
||||
projects: (ProjectStatusDocument & {
|
||||
title: string;
|
||||
})[];
|
||||
accountStreak?: StreakResponse;
|
||||
isLoading: boolean;
|
||||
topicDoneToday: number;
|
||||
};
|
||||
|
||||
const MAX_PROGRESS_TO_SHOW = 5;
|
||||
const MAX_PROJECTS_TO_SHOW = 8;
|
||||
const MAX_BOOKMARKS_TO_SHOW = 8;
|
||||
|
||||
type ProgressLaneProps = {
|
||||
title: string;
|
||||
linkText?: string;
|
||||
linkHref?: string;
|
||||
isLoading?: boolean;
|
||||
isEmpty?: boolean;
|
||||
loadingSkeletonCount?: number;
|
||||
loadingSkeletonClassName?: string;
|
||||
children: React.ReactNode;
|
||||
emptyMessage?: string;
|
||||
emptyIcon?: LucideIcon;
|
||||
emptyLinkText?: string;
|
||||
emptyLinkHref?: string;
|
||||
};
|
||||
|
||||
function ProgressLane(props: ProgressLaneProps) {
|
||||
const {
|
||||
title,
|
||||
linkText,
|
||||
linkHref,
|
||||
isLoading = false,
|
||||
loadingSkeletonCount = 4,
|
||||
loadingSkeletonClassName = '',
|
||||
children,
|
||||
isEmpty = false,
|
||||
emptyIcon: EmptyIcon = Map,
|
||||
emptyMessage = `No ${title.toLowerCase()} to show`,
|
||||
emptyLinkHref = '/roadmaps',
|
||||
emptyLinkText = 'Explore',
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col rounded-md border bg-white px-4 py-3 shadow-sm">
|
||||
{isLoading && (
|
||||
<div className={'flex flex-row justify-between'}>
|
||||
<div className="h-[16px] w-[75px] animate-pulse rounded-md bg-gray-100"></div>
|
||||
</div>
|
||||
)}
|
||||
{!isLoading && !isEmpty && (
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<h3 className="text-xs uppercase text-gray-500">{title}</h3>
|
||||
|
||||
{linkText && linkHref && (
|
||||
<a
|
||||
href={linkHref}
|
||||
className="flex items-center gap-1 text-xs text-gray-500"
|
||||
>
|
||||
<ArrowUpRight size={12} />
|
||||
{linkText}
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-4 flex flex-grow flex-col gap-2">
|
||||
{isLoading && (
|
||||
<>
|
||||
{Array.from({ length: loadingSkeletonCount }).map((_, index) => (
|
||||
<CardSkeleton key={index} className={loadingSkeletonClassName} />
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
{!isLoading && children}
|
||||
|
||||
{!isLoading && isEmpty && (
|
||||
<div className="flex flex-grow flex-col items-center justify-center text-gray-500">
|
||||
<EmptyIcon
|
||||
size={37}
|
||||
strokeWidth={1.5}
|
||||
className={'mb-3 text-gray-200'}
|
||||
/>
|
||||
<span className="mb-0.5 text-sm">{emptyMessage}</span>
|
||||
<a
|
||||
href={emptyLinkHref}
|
||||
className="text-xs font-medium text-gray-600 underline-offset-2 hover:underline"
|
||||
>
|
||||
{emptyLinkText}
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ProgressStack(props: ProgressStackProps) {
|
||||
const { progresses, projects, isLoading, accountStreak, topicDoneToday } =
|
||||
props;
|
||||
|
||||
const bookmarkedProgresses = progresses.filter(
|
||||
(progress) => progress?.isFavorite,
|
||||
);
|
||||
|
||||
const userProgresses = progresses.filter(
|
||||
(progress) => !progress?.isFavorite || progress?.done > 0,
|
||||
);
|
||||
|
||||
const [showAllProgresses, setShowAllProgresses] = useState(false);
|
||||
const userProgressesToShow = showAllProgresses
|
||||
? userProgresses
|
||||
: userProgresses.slice(0, MAX_PROGRESS_TO_SHOW);
|
||||
|
||||
const [showAllProjects, setShowAllProjects] = useState(false);
|
||||
const projectsToShow = showAllProjects
|
||||
? projects
|
||||
: projects.slice(0, MAX_PROJECTS_TO_SHOW);
|
||||
|
||||
const [showAllBookmarks, setShowAllBookmarks] = useState(false);
|
||||
const bookmarksToShow = showAllBookmarks
|
||||
? bookmarkedProgresses
|
||||
: bookmarkedProgresses.slice(0, MAX_BOOKMARKS_TO_SHOW);
|
||||
|
||||
const totalProjectFinished = projects.filter(
|
||||
(project) => project.repositoryUrl,
|
||||
).length;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mt-2 grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-3">
|
||||
<StatsCard
|
||||
title="Current Streak"
|
||||
value={accountStreak?.count || 0}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
<StatsCard
|
||||
title="Topics Done Today"
|
||||
value={topicDoneToday}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
<StatsCard
|
||||
title="Projects Finished"
|
||||
value={totalProjectFinished}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-2 grid min-h-[330px] grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-3">
|
||||
<ProgressLane
|
||||
title={'Your Progress'}
|
||||
isLoading={isLoading}
|
||||
loadingSkeletonCount={5}
|
||||
isEmpty={userProgressesToShow.length === 0}
|
||||
emptyMessage={'Update your Progress'}
|
||||
emptyIcon={Map}
|
||||
emptyLinkText={'Explore Roadmaps'}
|
||||
>
|
||||
{userProgressesToShow.length > 0 && (
|
||||
<>
|
||||
{userProgressesToShow.map((progress) => {
|
||||
return (
|
||||
<DashboardProgressCard
|
||||
key={progress.resourceId}
|
||||
progress={progress}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
|
||||
{userProgresses.length > MAX_PROGRESS_TO_SHOW && (
|
||||
<ShowAllButton
|
||||
showAll={showAllProgresses}
|
||||
setShowAll={setShowAllProgresses}
|
||||
count={userProgresses.length}
|
||||
maxCount={MAX_PROGRESS_TO_SHOW}
|
||||
className="mb-0.5 mt-3"
|
||||
/>
|
||||
)}
|
||||
</ProgressLane>
|
||||
|
||||
<ProgressLane
|
||||
title={'Projects'}
|
||||
isLoading={isLoading}
|
||||
loadingSkeletonClassName={'h-5'}
|
||||
loadingSkeletonCount={8}
|
||||
isEmpty={projectsToShow.length === 0}
|
||||
emptyMessage={'No projects started'}
|
||||
emptyIcon={FolderKanban}
|
||||
emptyLinkText={'Explore Projects'}
|
||||
emptyLinkHref={'/backend/projects'}
|
||||
>
|
||||
{projectsToShow.map((project) => {
|
||||
return (
|
||||
<DashboardProjectCard key={project.projectId} project={project} />
|
||||
);
|
||||
})}
|
||||
|
||||
{projects.length > MAX_PROJECTS_TO_SHOW && (
|
||||
<ShowAllButton
|
||||
showAll={showAllProjects}
|
||||
setShowAll={setShowAllProjects}
|
||||
count={projects.length}
|
||||
maxCount={MAX_PROJECTS_TO_SHOW}
|
||||
className="mb-0.5 mt-3"
|
||||
/>
|
||||
)}
|
||||
</ProgressLane>
|
||||
|
||||
<ProgressLane
|
||||
title={'Bookmarks'}
|
||||
isLoading={isLoading}
|
||||
loadingSkeletonClassName={'h-5'}
|
||||
loadingSkeletonCount={8}
|
||||
linkHref={'/roadmaps'}
|
||||
linkText={'Explore'}
|
||||
isEmpty={bookmarksToShow.length === 0}
|
||||
emptyIcon={Bookmark}
|
||||
emptyMessage={'No bookmarks to show'}
|
||||
emptyLinkHref={'/roadmaps'}
|
||||
emptyLinkText={'Explore Roadmaps'}
|
||||
>
|
||||
{bookmarksToShow.map((progress) => {
|
||||
return (
|
||||
<DashboardBookmarkCard
|
||||
key={progress.resourceId}
|
||||
bookmark={progress}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
{bookmarkedProgresses.length > MAX_BOOKMARKS_TO_SHOW && (
|
||||
<ShowAllButton
|
||||
showAll={showAllBookmarks}
|
||||
setShowAll={setShowAllBookmarks}
|
||||
count={bookmarkedProgresses.length}
|
||||
maxCount={MAX_BOOKMARKS_TO_SHOW}
|
||||
className="mb-0.5 mt-3"
|
||||
/>
|
||||
)}
|
||||
</ProgressLane>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
type ShowAllButtonProps = {
|
||||
showAll: boolean;
|
||||
setShowAll: (showAll: boolean) => void;
|
||||
count: number;
|
||||
maxCount: number;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
function ShowAllButton(props: ShowAllButtonProps) {
|
||||
const { showAll, setShowAll, count, maxCount, className } = props;
|
||||
|
||||
return (
|
||||
<span className="flex flex-grow items-end">
|
||||
<button
|
||||
className={cn(
|
||||
'flex w-full items-center justify-center text-sm text-gray-500 hover:text-gray-700',
|
||||
className,
|
||||
)}
|
||||
onClick={() => setShowAll(!showAll)}
|
||||
>
|
||||
{!showAll ? <>+ show {count - maxCount} more</> : <>- show less</>}
|
||||
</button>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
type CardSkeletonProps = {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
function CardSkeleton(props: CardSkeletonProps) {
|
||||
const { className } = props;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'h-10 w-full animate-pulse rounded-md bg-gray-100',
|
||||
className,
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
type StatsCardProps = {
|
||||
title: string;
|
||||
value: number;
|
||||
isLoading?: boolean;
|
||||
};
|
||||
|
||||
function StatsCard(props: StatsCardProps) {
|
||||
const { title, value, isLoading = false } = props;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-1 rounded-md border bg-white p-4 shadow-sm">
|
||||
<h3 className="mb-1 text-xs uppercase text-gray-500">{title}</h3>
|
||||
{isLoading ? (
|
||||
<CardSkeleton className="h-8" />
|
||||
) : (
|
||||
<span className="text-2xl font-medium text-black">{value}</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,73 +0,0 @@
|
||||
import type { BuiltInRoadmap } from './PersonalDashboard';
|
||||
import { ArrowUpRight } from 'lucide-react';
|
||||
import { MarkFavorite } from '../FeaturedItems/MarkFavorite.tsx';
|
||||
|
||||
type RecommendedRoadmapsProps = {
|
||||
roadmaps: BuiltInRoadmap[];
|
||||
isLoading: boolean;
|
||||
};
|
||||
|
||||
export function RecommendedRoadmaps(props: RecommendedRoadmapsProps) {
|
||||
const { roadmaps: roadmapsToShow, isLoading } = props;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mb-2 mt-8 flex items-center justify-between gap-2">
|
||||
<h2 className="text-xs uppercase text-gray-400">
|
||||
Recommended Roadmaps
|
||||
</h2>
|
||||
|
||||
<a
|
||||
href="/roadmaps"
|
||||
className="flex items-center gap-1 rounded-full bg-gray-500 px-2 py-0.5 text-xs font-medium text-white transition-colors hover:bg-black"
|
||||
>
|
||||
<ArrowUpRight size={12} strokeWidth={2.5} />
|
||||
All Roadmaps
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="grid grid-cols-1 gap-1.5 sm:grid-cols-2 md:grid-cols-3">
|
||||
{Array.from({ length: 9 }).map((_, index) => (
|
||||
<RecommendedCardSkeleton key={index} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-1.5 sm:grid-cols-2 md:grid-cols-3">
|
||||
{roadmapsToShow.map((roadmap) => (
|
||||
<RecommendedRoadmapCard key={roadmap.id} roadmap={roadmap} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-6 text-sm text-gray-500">
|
||||
Need some help getting started? Check out our{' '}<a href="/get-started" className="text-blue-600 underline">Getting Started Guide</a>.
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
type RecommendedRoadmapCardProps = {
|
||||
roadmap: BuiltInRoadmap;
|
||||
};
|
||||
|
||||
export function RecommendedRoadmapCard(props: RecommendedRoadmapCardProps) {
|
||||
const { roadmap } = props;
|
||||
const { title, url, description } = roadmap;
|
||||
|
||||
return (
|
||||
<a
|
||||
href={url}
|
||||
className="font-regular text-sm sm:text-sm group relative block rounded-lg border border-gray-200 bg-white px-2.5 py-2 text-black no-underline hover:border-gray-400 hover:bg-gray-50"
|
||||
>
|
||||
<MarkFavorite className={'opacity-30'} resourceType={'roadmap'} resourceId={roadmap.id} />
|
||||
{title}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
function RecommendedCardSkeleton() {
|
||||
return (
|
||||
<div className="h-[42px] w-full animate-pulse rounded-md bg-gray-200" />
|
||||
);
|
||||
}
|
||||
@@ -1,165 +0,0 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import type { TeamMember } from '../TeamProgress/TeamProgressPage';
|
||||
import { httpGet } from '../../lib/http';
|
||||
import { useToast } from '../../hooks/use-toast';
|
||||
import { getUser } from '../../lib/jwt';
|
||||
import { LoadingProgress } from './LoadingProgress';
|
||||
import { ResourceProgress } from '../Activity/ResourceProgress';
|
||||
import { TeamActivityPage } from '../TeamActivity/TeamActivityPage';
|
||||
import { cn } from '../../lib/classname';
|
||||
import { Tooltip } from '../Tooltip';
|
||||
|
||||
type TeamDashboardProps = {
|
||||
teamId: string;
|
||||
};
|
||||
|
||||
export function TeamDashboard(props: TeamDashboardProps) {
|
||||
const { teamId } = props;
|
||||
|
||||
const toast = useToast();
|
||||
const currentUser = getUser();
|
||||
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [teamMembers, setTeamMembers] = useState<TeamMember[]>([]);
|
||||
|
||||
async function getTeamProgress() {
|
||||
const { response, error } = await httpGet<TeamMember[]>(
|
||||
`${import.meta.env.PUBLIC_API_URL}/v1-get-team-progress/${teamId}`,
|
||||
);
|
||||
if (error || !response) {
|
||||
toast.error(error?.message || 'Failed to get team progress');
|
||||
return;
|
||||
}
|
||||
|
||||
setTeamMembers(
|
||||
response.sort((a, b) => {
|
||||
if (a.email === currentUser?.email) {
|
||||
return -1;
|
||||
}
|
||||
if (b.email === currentUser?.email) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!teamId) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
setTeamMembers([]);
|
||||
getTeamProgress().finally(() => setIsLoading(false));
|
||||
}, [teamId]);
|
||||
|
||||
if (!currentUser) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const currentMember = teamMembers.find(
|
||||
(member) => member.email === currentUser.email,
|
||||
);
|
||||
const learningRoadmapsToShow =
|
||||
currentMember?.progress?.filter(
|
||||
(progress) => progress.resourceType === 'roadmap',
|
||||
) || [];
|
||||
|
||||
const allMembersWithoutCurrentUser = teamMembers.sort((a, b) => {
|
||||
if (a.email === currentUser.email) {
|
||||
return -1;
|
||||
}
|
||||
|
||||
if (b.email === currentUser.email) {
|
||||
return 1;
|
||||
}
|
||||
|
||||
return 0;
|
||||
});
|
||||
|
||||
return (
|
||||
<section className="mt-8">
|
||||
<h2 className="mb-3 text-xs uppercase text-gray-400">Roadmaps</h2>
|
||||
{isLoading && <LoadingProgress />}
|
||||
{!isLoading && learningRoadmapsToShow.length > 0 && (
|
||||
<div className="grid grid-cols-1 gap-1.5 sm:grid-cols-3">
|
||||
{learningRoadmapsToShow.map((roadmap) => {
|
||||
const learningCount = roadmap.learning || 0;
|
||||
const doneCount = roadmap.done || 0;
|
||||
const totalCount = roadmap.total || 0;
|
||||
const skippedCount = roadmap.skipped || 0;
|
||||
|
||||
return (
|
||||
<ResourceProgress
|
||||
key={roadmap.resourceId}
|
||||
isCustomResource={roadmap?.isCustomResource || false}
|
||||
doneCount={doneCount > totalCount ? totalCount : doneCount}
|
||||
learningCount={
|
||||
learningCount > totalCount ? totalCount : learningCount
|
||||
}
|
||||
totalCount={totalCount}
|
||||
skippedCount={skippedCount}
|
||||
resourceId={roadmap.resourceId}
|
||||
resourceType="roadmap"
|
||||
updatedAt={roadmap.updatedAt}
|
||||
title={roadmap.resourceTitle}
|
||||
showActions={false}
|
||||
roadmapSlug={roadmap.roadmapSlug}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<h2 className="mb-3 mt-6 text-xs uppercase text-gray-400">
|
||||
Team Members
|
||||
</h2>
|
||||
{isLoading && <TeamMemberLoading className="mb-6" />}
|
||||
{!isLoading && (
|
||||
<div className="mb-6 flex flex-wrap gap-2">
|
||||
{allMembersWithoutCurrentUser.map((member) => {
|
||||
const avatar = member?.avatar
|
||||
? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${member.avatar}`
|
||||
: '/images/default-avatar.png';
|
||||
return (
|
||||
<span className="group relative" key={member.email}>
|
||||
<figure className="relative aspect-square size-8 overflow-hidden rounded-md bg-gray-100">
|
||||
<img
|
||||
src={avatar}
|
||||
alt={member.name || ''}
|
||||
className="absolute inset-0 h-full w-full object-cover"
|
||||
/>
|
||||
</figure>
|
||||
<Tooltip position="top-center" additionalClass="text-sm">
|
||||
{member.name}
|
||||
</Tooltip>
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<TeamActivityPage teamId={teamId} />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
type TeamMemberLoadingProps = {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
function TeamMemberLoading(props: TeamMemberLoadingProps) {
|
||||
const { className } = props;
|
||||
|
||||
return (
|
||||
<div className={cn('flex flex-wrap gap-2', className)}>
|
||||
{Array.from({ length: 15 }).map((_, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="size-8 animate-pulse rounded-md bg-gray-200"
|
||||
></div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import type { MouseEvent } from 'react';
|
||||
import type { MouseEvent } from "react";
|
||||
import { httpPatch } from '../../lib/http';
|
||||
import type { ResourceType } from '../../lib/resource-progress';
|
||||
import { isLoggedIn } from '../../lib/jwt';
|
||||
@@ -7,7 +7,6 @@ import { showLoginPopup } from '../../lib/popup';
|
||||
import { FavoriteIcon } from './FavoriteIcon';
|
||||
import { Spinner } from '../ReactIcons/Spinner';
|
||||
import { useToast } from '../../hooks/use-toast';
|
||||
import { cn } from '../../lib/classname';
|
||||
|
||||
type MarkFavoriteType = {
|
||||
resourceType: ResourceType;
|
||||
@@ -28,9 +27,7 @@ export function MarkFavorite({
|
||||
const toast = useToast();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isFavorite, setIsFavorite] = useState(
|
||||
isAuthenticated
|
||||
? (favorite ?? localStorage.getItem(localStorageKey) === '1')
|
||||
: false,
|
||||
isAuthenticated ? (favorite ?? localStorage.getItem(localStorageKey) === '1') : false
|
||||
);
|
||||
|
||||
async function toggleFavoriteHandler(e: MouseEvent<HTMLButtonElement>) {
|
||||
@@ -51,7 +48,7 @@ export function MarkFavorite({
|
||||
{
|
||||
resourceType,
|
||||
resourceId,
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
if (error) {
|
||||
@@ -71,7 +68,7 @@ export function MarkFavorite({
|
||||
resourceType,
|
||||
isFavorite: !isFavorite,
|
||||
},
|
||||
}),
|
||||
})
|
||||
);
|
||||
|
||||
window.dispatchEvent(new CustomEvent('refresh-favorites', {}));
|
||||
@@ -102,18 +99,11 @@ export function MarkFavorite({
|
||||
aria-label={isFavorite ? 'Remove from favorites' : 'Add to favorites'}
|
||||
onClick={toggleFavoriteHandler}
|
||||
tabIndex={-1}
|
||||
className={cn(
|
||||
'absolute right-1.5 top-1.5 z-30 focus:outline-0',
|
||||
isFavorite ? '' : 'opacity-30 hover:opacity-100',
|
||||
className,
|
||||
)}
|
||||
data-is-favorite={isFavorite}
|
||||
className={`${isFavorite ? '' : 'opacity-30 hover:opacity-100'} ${
|
||||
className || 'absolute right-1.5 top-1.5 z-30 focus:outline-0'
|
||||
}`}
|
||||
>
|
||||
{isLoading ? (
|
||||
<Spinner isDualRing={false} />
|
||||
) : (
|
||||
<FavoriteIcon isFavorite={isFavorite} />
|
||||
)}
|
||||
{isLoading ? <Spinner isDualRing={false} /> : <FavoriteIcon isFavorite={isFavorite} />}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -33,7 +33,7 @@ export interface ProjectStatusDocument {
|
||||
|
||||
isVisible?: boolean;
|
||||
|
||||
updatedAt: Date;
|
||||
updated1t: Date;
|
||||
}
|
||||
|
||||
const allowedVoteType = ['upvote', 'downvote'] as const;
|
||||
|
||||
@@ -1,39 +0,0 @@
|
||||
import type { SVGProps } from 'react';
|
||||
import React from 'react';
|
||||
|
||||
export function BookEmoji(props: SVGProps<SVGSVGElement>) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 36 36"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill="#3e721d"
|
||||
d="M35 26a4 4 0 0 1-4 4H5a4 4 0 0 1-4-4V6.313C1 4.104 6.791 0 9 0h20.625C32.719 0 35 2.312 35 5.375z"
|
||||
></path>
|
||||
<path
|
||||
fill="#ccd6dd"
|
||||
d="M33 30a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V6c0-4.119-.021-4 5-4h21a4 4 0 0 1 4 4z"
|
||||
></path>
|
||||
<path
|
||||
fill="#e1e8ed"
|
||||
d="M31 31a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h24a3 3 0 0 1 3 3z"
|
||||
></path>
|
||||
<path
|
||||
fill="#5c913b"
|
||||
d="M31 32a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V10a4 4 0 0 1 4-4h21a4 4 0 0 1 4 4z"
|
||||
></path>
|
||||
<path
|
||||
fill="#77b255"
|
||||
d="M29 32a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V12a4 4 0 0 1 4-4h19.335C27.544 8 29 9.456 29 11.665z"
|
||||
></path>
|
||||
<path
|
||||
fill="#3e721d"
|
||||
d="M6 6C4.312 6 4.269 4.078 5 3.25C5.832 2.309 7.125 2 9.438 2H11V0H8.281C4.312 0 1 2.5 1 5.375V32a4 4 0 0 0 4 4h2V6z"
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
import React from 'react';
|
||||
import type { SVGProps } from 'react';
|
||||
|
||||
export function BuildEmoji(props: SVGProps<SVGSVGElement>) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 36 36"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill="#66757f"
|
||||
d="M28.25 8.513a.263.263 0 0 0-.263-.263h-.475a.263.263 0 0 0-.263.263v11.475c0 .145.117.263.263.263h.475a.263.263 0 0 0 .263-.263z"
|
||||
></path>
|
||||
<g fill="#f19020">
|
||||
<circle cx={27.75} cy={19.75} r={1.5}></circle>
|
||||
<circle cx={27.75} cy={22.25} r={1}></circle>
|
||||
</g>
|
||||
<path
|
||||
fill="#bd2032"
|
||||
d="M33.25 8.25h-4.129L9.946.29L9.944.289h-.001c-.016-.007-.032-.005-.047-.01C9.849.265 9.802.25 9.75.25h-.002a.5.5 0 0 0-.19.038a.5.5 0 0 0-.122.082c-.012.009-.026.014-.037.025a.5.5 0 0 0-.11.164V.56c-.004.009-.003.02-.006.029l-5.541 7.81l-.006.014a.99.99 0 0 0-.486.837v2a1 1 0 0 0 1 1h1.495L2.031 34H.25v2h18.958v-2h-1.74l-3.713-21.75H33.25a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1m-21.769 4L9.75 13.639L8.02 12.25zM9.75 21.3l3.667 2.404l-3.667 2l-3.667-2zm-3.639.71l.474-2.784l1.866 1.223zm4.938-1.561l1.87-1.225l.477 2.789zm-1.299-.866l-2.828-1.885l2.828-2.322l2.828 2.322zm-2.563-3.887l.362-2.127l1.131.928zm3.633-1.198l1.132-.929l.364 2.13zM5.073 8.25L9.25 2.362V6.25h-2a1 1 0 0 0-1 1v1zm.53 16.738l2.73 1.489l-3.29 1.794zM15.443 34H4.067l.686-4.024L9.75 27.25l5.006 2.731zm-1.54-9.015l.562 3.291l-3.298-1.799zM13.25 8.25v-1a1 1 0 0 0-1-1h-2V1.499L26.513 8.25zm2 3h-1.16v-2h1.16zm3 0h-2v-2h2zm3 0h-2v-2h2zm3 0h-2v-2h2zm3 0h-2v-2h2zm3 0h-2v-2h2zm3-.5a.5.5 0 0 1-.5.5h-1.5v-2h1.5a.5.5 0 0 1 .5.5z"
|
||||
></path>
|
||||
<path
|
||||
fill="#4b545d"
|
||||
d="M12.25 7.25h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h3v-4z"
|
||||
></path>
|
||||
<path fill="#cdd7df" d="M11.25 7.25h2v4h-2z"></path>
|
||||
<path
|
||||
fill="#66757f"
|
||||
d="M34.844 24v-1H20.656v1h.844v2.469h-.844v1h14.188v-1H34V24z"
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -1,37 +0,0 @@
|
||||
// twitter bulb emoji
|
||||
import type { SVGProps } from 'react';
|
||||
|
||||
type BulbEmojiProps = SVGProps<SVGSVGElement>;
|
||||
|
||||
export function BulbEmoji(props: BulbEmojiProps) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 36 36"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill="#FFD983"
|
||||
d="M29 11.06c0 6.439-5 7.439-5 13.44c0 3.098-3.123 3.359-5.5 3.359c-2.053 0-6.586-.779-6.586-3.361C11.914 18.5 7 17.5 7 11.06C7 5.029 12.285.14 18.083.14C23.883.14 29 5.029 29 11.06"
|
||||
></path>
|
||||
<path
|
||||
fill="#CCD6DD"
|
||||
d="M22.167 32.5c0 .828-2.234 2.5-4.167 2.5s-4.167-1.672-4.167-2.5S16.066 32 18 32s4.167-.328 4.167.5"
|
||||
></path>
|
||||
<path
|
||||
fill="#FFCC4D"
|
||||
d="M22.707 10.293a1 1 0 0 0-1.414 0L18 13.586l-3.293-3.293a.999.999 0 1 0-1.414 1.414L17 15.414V26a1 1 0 1 0 2 0V15.414l3.707-3.707a1 1 0 0 0 0-1.414"
|
||||
></path>
|
||||
<path
|
||||
fill="#99AAB5"
|
||||
d="M24 31a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-6h12z"
|
||||
></path>
|
||||
<path
|
||||
fill="#CCD6DD"
|
||||
d="M11.999 32a1 1 0 0 1-.163-1.986l12-2a.994.994 0 0 1 1.15.822a1 1 0 0 1-.822 1.15l-12 2a1 1 0 0 1-.165.014m0-4a1 1 0 0 1-.163-1.986l12-2a.995.995 0 0 1 1.15.822a1 1 0 0 1-.822 1.15l-12 2a1 1 0 0 1-.165.014"
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
import React from 'react';
|
||||
import type { SVGProps } from 'react';
|
||||
|
||||
export function CheckEmoji(props: SVGProps<SVGSVGElement>) {
|
||||
return (<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36" {...props}><path fill="#77b255" d="M36 32a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h28a4 4 0 0 1 4 4z"></path><path fill="#fff" d="M29.28 6.362a2.5 2.5 0 0 0-3.458.736L14.936 23.877l-5.029-4.65a2.5 2.5 0 1 0-3.394 3.671l7.209 6.666c.48.445 1.09.665 1.696.665c.673 0 1.534-.282 2.099-1.139c.332-.506 12.5-19.27 12.5-19.27a2.5 2.5 0 0 0-.737-3.458"></path></svg>);
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
import type { SVGProps } from 'react';
|
||||
import React from 'react';
|
||||
|
||||
export function ConstructionEmoji(props: SVGProps<SVGSVGElement>) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 36 36"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill="#ffcc4d"
|
||||
d="M36 15a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4h28a4 4 0 0 1 4 4z"
|
||||
></path>
|
||||
<path
|
||||
fill="#292f33"
|
||||
d="M6 3H4a4 4 0 0 0-4 4v2zm6 0L0 15c0 1.36.682 2.558 1.72 3.28L17 3zM7 19h5L28 3h-5zm16 0L35.892 6.108A4 4 0 0 0 33.64 3.36L18 19zm13-4v-3l-7 7h3a4 4 0 0 0 4-4"
|
||||
></path>
|
||||
<path fill="#99aab5" d="M4 19h5v14H4zm23 0h5v14h-5z"></path>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -1,11 +1,9 @@
|
||||
interface TwitterIconProps {
|
||||
className?: string;
|
||||
boxColor?: string;
|
||||
}
|
||||
|
||||
export function TwitterIcon(props: TwitterIconProps) {
|
||||
const { className, boxColor = 'transparent' } = props;
|
||||
|
||||
const { className } = props;
|
||||
return (
|
||||
<svg
|
||||
width="23"
|
||||
@@ -15,10 +13,10 @@ export function TwitterIcon(props: TwitterIconProps) {
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className}
|
||||
>
|
||||
<rect width="23" height="23" rx="3" fill={boxColor} />
|
||||
<rect width="23" height="23" rx="3" fill="currentColor" />
|
||||
<path
|
||||
d="M12.9285 10.3522L18.5135 4H17.1905L12.339 9.5144L8.467 4H4L9.8565 12.3395L4 19H5.323L10.443 13.1754L14.533 19H19M5.8005 4.97619H7.833L17.1895 18.0718H15.1565"
|
||||
fill='currentColor'
|
||||
fill="#E5E5E5"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
@@ -3,11 +3,6 @@ import { cn } from '../../lib/classname.ts';
|
||||
import { Filter, X } from 'lucide-react';
|
||||
import { CategoryFilterButton } from './CategoryFilterButton.tsx';
|
||||
import { useOutsideClick } from '../../hooks/use-outside-click.ts';
|
||||
import {
|
||||
deleteUrlParam,
|
||||
getUrlParams,
|
||||
setUrlParams,
|
||||
} from '../../lib/browser.ts';
|
||||
|
||||
const groupNames = [
|
||||
'Absolute Beginners',
|
||||
@@ -473,15 +468,6 @@ export function RoadmapsPage() {
|
||||
]);
|
||||
}, [activeGroup]);
|
||||
|
||||
useEffect(() => {
|
||||
const { g } = getUrlParams() as { g: AllowGroupNames };
|
||||
if (!g) {
|
||||
return;
|
||||
}
|
||||
|
||||
setActiveGroup(g);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="border-t bg-gray-100">
|
||||
<button
|
||||
@@ -516,7 +502,6 @@ export function RoadmapsPage() {
|
||||
onClick={() => {
|
||||
setActiveGroup('');
|
||||
setIsFilterOpen(false);
|
||||
deleteUrlParam('g');
|
||||
}}
|
||||
category={'All Roadmaps'}
|
||||
selected={activeGroup === ''}
|
||||
@@ -529,7 +514,6 @@ export function RoadmapsPage() {
|
||||
setActiveGroup(group.group);
|
||||
setIsFilterOpen(false);
|
||||
document?.getElementById('filter-button')?.scrollIntoView();
|
||||
setUrlParams({ g: group.group });
|
||||
}}
|
||||
category={group.group}
|
||||
selected={activeGroup === group.group}
|
||||
|
||||
@@ -70,7 +70,7 @@ export function ShareRoadmapButton(props: ShareRoadmapButtonProps) {
|
||||
</button>
|
||||
|
||||
{isDropdownOpen && (
|
||||
<div className="absolute right-0 z-[999] mt-1 w-40 rounded-md bg-slate-800 text-sm text-white shadow-lg ring-1 ring-black ring-opacity-5 w-[175px]">
|
||||
<div className="absolute right-0 z-[999] mt-1 w-40 rounded-md bg-slate-800 text-sm text-white shadow-lg ring-1 ring-black ring-opacity-5">
|
||||
<div className="flex flex-col px-1 py-1">
|
||||
<button
|
||||
onClick={() => {
|
||||
@@ -103,7 +103,7 @@ export function ShareRoadmapButton(props: ShareRoadmapButtonProps) {
|
||||
target={'_blank'}
|
||||
className="mt-1 flex w-full items-center gap-2 rounded-sm px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
|
||||
>
|
||||
<div className="flex w-[20px] flex-shrink-0 items-center justify-center">
|
||||
<div className="flex w-[20px] items-center justify-center">
|
||||
<TwitterIcon className="h-[16px] text-slate-400" />
|
||||
</div>
|
||||
Twitter
|
||||
|
||||
@@ -49,13 +49,8 @@ type GetTeamActivityResponse = {
|
||||
perPage: number;
|
||||
};
|
||||
|
||||
type TeamActivityPageProps = {
|
||||
teamId?: string;
|
||||
};
|
||||
|
||||
export function TeamActivityPage(props: TeamActivityPageProps) {
|
||||
const { teamId: defaultTeamId } = props;
|
||||
const { t: teamId = defaultTeamId } = getUrlParams();
|
||||
export function TeamActivityPage() {
|
||||
const { t: teamId } = getUrlParams();
|
||||
|
||||
const toast = useToast();
|
||||
|
||||
@@ -97,18 +92,6 @@ export function TeamActivityPage(props: TeamActivityPageProps) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
setTeamActivities({
|
||||
data: {
|
||||
users: [],
|
||||
activities: [],
|
||||
},
|
||||
totalCount: 0,
|
||||
totalPages: 0,
|
||||
currPage: 1,
|
||||
perPage: 21,
|
||||
});
|
||||
setCurrPage(1);
|
||||
getTeamProgress().then(() => {
|
||||
pageProgressMessage.set('');
|
||||
setIsLoading(false);
|
||||
|
||||
@@ -23,7 +23,6 @@ export type UserProgress = {
|
||||
updatedAt: string;
|
||||
isCustomResource?: boolean;
|
||||
roadmapSlug?: string;
|
||||
aiRoadmapId?: string;
|
||||
};
|
||||
|
||||
export type TeamMember = {
|
||||
@@ -192,7 +191,7 @@ export function TeamProgressPage() {
|
||||
key={grouping.value}
|
||||
className={`rounded-md border p-1 px-2 text-sm ${
|
||||
selectedGrouping === grouping.value
|
||||
? 'border-gray-400 bg-gray-200'
|
||||
? ' border-gray-400 bg-gray-200 '
|
||||
: ''
|
||||
}`}
|
||||
onClick={() => setSelectedGrouping(grouping.value)}
|
||||
|
||||
@@ -307,7 +307,6 @@ export function TeamRoadmaps() {
|
||||
{pickRoadmapOptionModal}
|
||||
{addRoadmapModal}
|
||||
{createRoadmapModal}
|
||||
{confirmationContentIdModal}
|
||||
|
||||
<RoadmapIcon className="mb-4 h-24 w-24 opacity-10" />
|
||||
|
||||
|
||||
@@ -1,14 +1,10 @@
|
||||
import type { ProjectPageType } from '../../api/roadmap';
|
||||
import type { GetPublicProfileResponse } from '../../api/user';
|
||||
import { PrivateProfileBanner } from './PrivateProfileBanner';
|
||||
import { UserActivityHeatmap } from './UserPublicActivityHeatmap';
|
||||
import { UserPublicProfileHeader } from './UserPublicProfileHeader';
|
||||
import { UserPublicProgresses } from './UserPublicProgresses';
|
||||
import { UserPublicProjects } from './UserPublicProjects';
|
||||
|
||||
type UserPublicProfilePageProps = GetPublicProfileResponse & {
|
||||
projectDetails: ProjectPageType[];
|
||||
};
|
||||
type UserPublicProfilePageProps = GetPublicProfileResponse;
|
||||
|
||||
export function UserPublicProfilePage(props: UserPublicProfilePageProps) {
|
||||
const {
|
||||
@@ -18,11 +14,10 @@ export function UserPublicProfilePage(props: UserPublicProfilePageProps) {
|
||||
profileVisibility,
|
||||
_id: userId,
|
||||
createdAt,
|
||||
projectDetails,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<div className="min-h-full flex-grow bg-gray-200/40 pb-36 pt-10">
|
||||
<div className="bg-gray-200/40 min-h-full flex-grow pt-10 pb-36">
|
||||
<div className="container flex flex-col gap-8">
|
||||
<PrivateProfileBanner
|
||||
isOwnProfile={isOwnProfile}
|
||||
@@ -32,19 +27,12 @@ export function UserPublicProfilePage(props: UserPublicProfilePageProps) {
|
||||
<UserPublicProfileHeader userDetails={props!} />
|
||||
|
||||
<UserActivityHeatmap joinedAt={createdAt} activity={activity!} />
|
||||
<div>
|
||||
<UserPublicProgresses
|
||||
username={username!}
|
||||
userId={userId!}
|
||||
roadmaps={props.roadmaps}
|
||||
publicConfig={props.publicConfig}
|
||||
/>
|
||||
<UserPublicProjects
|
||||
userId={userId!}
|
||||
projects={props.projects}
|
||||
projectDetails={projectDetails}
|
||||
/>
|
||||
</div>
|
||||
<UserPublicProgresses
|
||||
username={username!}
|
||||
userId={userId!}
|
||||
roadmaps={props.roadmaps}
|
||||
publicConfig={props.publicConfig}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,57 +0,0 @@
|
||||
import type { ProjectPageType } from '../../api/roadmap';
|
||||
import { ProjectProgress } from '../Activity/ProjectProgress';
|
||||
import type { ProjectStatusDocument } from '../Projects/ListProjectSolutions';
|
||||
|
||||
type UserPublicProjectsProps = {
|
||||
userId: string;
|
||||
projects: ProjectStatusDocument[];
|
||||
projectDetails: ProjectPageType[];
|
||||
};
|
||||
|
||||
export function UserPublicProjects(props: UserPublicProjectsProps) {
|
||||
const { projects, projectDetails } = props;
|
||||
|
||||
const enrichedProjects =
|
||||
projects
|
||||
.map((project) => {
|
||||
const projectDetail = projectDetails.find(
|
||||
(projectDetail) => projectDetail.id === project.projectId,
|
||||
);
|
||||
|
||||
return {
|
||||
...project,
|
||||
title: projectDetail?.title || 'N/A',
|
||||
};
|
||||
})
|
||||
?.sort((a, b) => {
|
||||
const isPendingA = !a.repositoryUrl && !a.submittedAt;
|
||||
const isPendingB = !b.repositoryUrl && !b.submittedAt;
|
||||
|
||||
if (isPendingA && !isPendingB) {
|
||||
return -1;
|
||||
}
|
||||
|
||||
if (!isPendingA && isPendingB) {
|
||||
return 1;
|
||||
}
|
||||
|
||||
return 0;
|
||||
}) || [];
|
||||
|
||||
return (
|
||||
<div className="mt-5">
|
||||
<h2 className="mb-2 text-xs uppercase tracking-wide text-gray-400">
|
||||
Projects I have worked on
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 gap-1.5 sm:grid-cols-2 md:grid-cols-3">
|
||||
{enrichedProjects.map((project) => (
|
||||
<ProjectProgress
|
||||
key={project._id}
|
||||
projectStatus={project}
|
||||
showActions={false}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
36
src/data/projects/basic-github-actions.md
Normal file
36
src/data/projects/basic-github-actions.md
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
title: 'Github Actions Workflow'
|
||||
description: 'Write GitHub Actions workflow to deploy a simple GitHub Pages site.'
|
||||
isNew: true
|
||||
sort: 3
|
||||
difficulty: 'beginner'
|
||||
nature: 'CI/CD'
|
||||
skills:
|
||||
- 'devops'
|
||||
- 'github actions'
|
||||
- 'ci/cd'
|
||||
seo:
|
||||
title: 'Github Actions Workflow'
|
||||
description: 'Write GitHub Actions workflow to deploy a simple GitHub Pages site.'
|
||||
keywords:
|
||||
- 'basic ci/cd'
|
||||
- 'devops'
|
||||
- 'devops projects'
|
||||
roadmapIds:
|
||||
- 'git-github'
|
||||
- 'devops'
|
||||
---
|
||||
|
||||
In this project, you will write a basic HTML file and setup a GitHub Actions workflow to test, build & deploy it to GitHub Pages.
|
||||
|
||||
## Requirements
|
||||
|
||||
- Create a simple HTML file (the content is up to you)
|
||||
- Create a GitHub Actions workflow that will test, build & deploy the website to [GitHub Pages](https://pages.github.com/).
|
||||
- Failures in the workflow should be clearly indicated and failures will halt the workflow
|
||||
- The workflow should be in the `.github/workflows` directory
|
||||
- The workflow file should be named `main.yml`
|
||||
|
||||
<hr />
|
||||
|
||||
If you are looking to build a more advanced version of this project, you can either create a more advanced Astro website or you can build a more advanced GitHub Actions workflow.
|
||||
42
src/data/projects/basic-iac-with-terraform.md
Normal file
42
src/data/projects/basic-iac-with-terraform.md
Normal file
@@ -0,0 +1,42 @@
|
||||
---
|
||||
title: 'Basic Infrastructure as Code with Terraform'
|
||||
description: 'Provision a simple cloud infrastructure using Terraform'
|
||||
isNew: false
|
||||
sort: 4
|
||||
difficulty: 'beginner'
|
||||
nature: 'CLI'
|
||||
skills:
|
||||
- 'terraform'
|
||||
- 'devops'
|
||||
- 'iac'
|
||||
- 'cloud'
|
||||
seo:
|
||||
title: 'Basic Infrastructure as Code with Terraform'
|
||||
description: 'Learn to provision cloud resources using Terraform'
|
||||
keywords:
|
||||
- 'terraform'
|
||||
- 'infrastructure as code'
|
||||
- 'cloud provisioning'
|
||||
- 'devops'
|
||||
roadmapIds:
|
||||
- 'devops'
|
||||
- 'terraform'
|
||||
- 'aws'
|
||||
---
|
||||
|
||||
In this project, you will use Terraform to provision a virtual machine in AWS.
|
||||
|
||||
## Requirements
|
||||
|
||||
- Install Terraform on your local machine.
|
||||
- Set up an account with a AWS and obtain necessary credentials.
|
||||
- Create a `main.tf` file in the root directory of your project.
|
||||
- Write Terraform configuration to provision a basic resource (e.g., an EC2 instance on AWS or a VM on Azure).
|
||||
- Use Terraform commands to initialize, plan, apply, and destroy your infrastructure.
|
||||
- The provisioned resource should be accessible and verifiable in your cloud provider's console.
|
||||
|
||||
You can learn more about Terraform basics [here](https://learn.hashicorp.com/terraform).
|
||||
|
||||
<hr />
|
||||
|
||||
For a more advanced version of this project, consider adding multiple resources, using variables and outputs, or implementing a modular structure for your Terraform configuration.
|
||||
39
src/data/projects/docker-webserver.md
Normal file
39
src/data/projects/docker-webserver.md
Normal file
@@ -0,0 +1,39 @@
|
||||
---
|
||||
title: 'Docker Web Server'
|
||||
description: 'Create a Web Server using Docker & NGINX'
|
||||
isNew: false
|
||||
sort: 3
|
||||
difficulty: 'beginner'
|
||||
nature: 'CLI'
|
||||
skills:
|
||||
- 'docker'
|
||||
- 'devops'
|
||||
- 'nginx'
|
||||
- 'web'
|
||||
seo:
|
||||
title: 'Docker Web Server'
|
||||
description: 'Create a Web Server using Docker & NGINX'
|
||||
keywords:
|
||||
- 'docker web server'
|
||||
- 'docker'
|
||||
- 'system administration'
|
||||
- 'web server'
|
||||
roadmapIds:
|
||||
- 'devops'
|
||||
- 'docker'
|
||||
---
|
||||
|
||||
In this project, you will create an NGINX web server that will serve a simple HTML page using Docker.
|
||||
|
||||
## Requirements
|
||||
|
||||
- The Dockerfile should be named `Dockerfile`.
|
||||
- The Dockerfile should be in the root directory of the project.
|
||||
- The build process will add a local HTML file to the container, which will be accessible to NGINX.
|
||||
- The simple HTML page will be accessible to you from `localhost:8080`
|
||||
|
||||
You can learn more about writing a Dockerfile [here](https://docs.docker.com/engine/reference/builder/).
|
||||
|
||||
<hr />
|
||||
|
||||
If you are looking to build a more advanced version of this project, you can consider using the `alpine:latest` image and setting up NGINX yourself rather than using the official NGINX image.
|
||||
57
src/data/projects/local-monitoring-stack.md
Normal file
57
src/data/projects/local-monitoring-stack.md
Normal file
@@ -0,0 +1,57 @@
|
||||
---
|
||||
title: 'Local Monitoring System with Docker'
|
||||
description: 'Set up a local monitoring system using Docker with Grafana and Prometheus'
|
||||
isNew: false
|
||||
sort: 1
|
||||
difficulty: 'intermediate'
|
||||
nature: 'CLI'
|
||||
skills:
|
||||
- 'docker'
|
||||
- 'devops'
|
||||
- 'monitoring'
|
||||
- 'grafana'
|
||||
- 'prometheus'
|
||||
seo:
|
||||
title: 'Local Monitoring System with Docker, Grafana, and Prometheus'
|
||||
description: 'Learn to set up a local monitoring system using Docker with Grafana and Prometheus'
|
||||
keywords:
|
||||
- 'docker'
|
||||
- 'monitoring'
|
||||
- 'grafana'
|
||||
- 'prometheus'
|
||||
- 'devops'
|
||||
roadmapIds:
|
||||
- 'devops'
|
||||
- 'docker'
|
||||
---
|
||||
|
||||
In this project, you will set up a local monitoring system using Docker, Grafana, and Prometheus. This setup will allow you to collect metrics and visualize them in a dashboard.
|
||||
|
||||
## Requirements
|
||||
|
||||
- Docker and Docker Compose installed on your local machine.
|
||||
- Create a `docker-compose.yml` file in the root directory of your project.
|
||||
- Set up Prometheus as the metrics collection system.
|
||||
- Configure Grafana as the visualization tool.
|
||||
- Create a simple dashboard in Grafana to display system metrics.
|
||||
- Add a sample application to monitor, such as a simple web server.
|
||||
|
||||
Your `docker-compose.yml` file should define services for:
|
||||
1. Prometheus
|
||||
2. Grafana
|
||||
3. A sample application to monitor
|
||||
|
||||
## Steps
|
||||
|
||||
1. Create the `docker-compose.yml` file with services for Prometheus and Grafana.
|
||||
2. Configure Prometheus to scrape metrics (you'll need a `prometheus.yml` configuration file).
|
||||
3. Set up Grafana to use Prometheus as a data source.
|
||||
4. Create a simple dashboard in Grafana to display metrics.
|
||||
5. Use `docker-compose up` to start your monitoring stack.
|
||||
6. Access Grafana through your web browser and verify that metrics are being collected and displayed.
|
||||
|
||||
You can learn more about Prometheus [here](https://prometheus.io/docs/introduction/overview/) and Grafana [here](https://grafana.com/docs/grafana/latest/).
|
||||
|
||||
<hr />
|
||||
|
||||
For a more advanced version of this project, consider adding alerting rules in Prometheus, setting up additional exporters to collect more diverse metrics, or monitoring a multi-container application.
|
||||
@@ -1,7 +0,0 @@
|
||||
# Frame Layout
|
||||
|
||||
**FrameLayout** is a simple ViewGroup subclass in Android that is designed to hold a single child view or a stack of overlapping child views. It positions each child in the top-left corner by default and allows them to overlap on top of each other, which makes it useful for situations where you need to layer views on top of one another.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Android developers: Frame Layout](https://developer.android.com/reference/android/widget/FrameLayout)
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
# LinearLayout
|
||||
|
||||
**LinearLayout** is a view group that aligns all children in a single directioni, vertically or horizontally. You can specify the layout direction with the `android:orientation` attribute.
|
||||
|
||||
**LinearLayout** was commonly used in earlier Android development, but with the introduction of ConstraintLayout, it’s less frequently used in modern apps.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Android developers: Linear Layout](https://developer.android.com/develop/ui/views/layout/linear)
|
||||
|
||||
@@ -6,5 +6,5 @@ Use pipes to transform strings, currency amounts, dates, and other data for disp
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Understanding Pipes](https://angular.dev/tutorials/learn-angular/22-pipes)
|
||||
- [@official@Understanding Pipes](https://angular.dev/guide/pipes)
|
||||
- [@article@BuiltIn Pipes - examples](https://codecraft.tv/courses/angular/pipes/built-in-pipes/)
|
||||
|
||||
@@ -4,7 +4,6 @@ AWS (Amazon Web Services) offers a broad set of global cloud-based products incl
|
||||
|
||||
Learn more from the following links:
|
||||
|
||||
- [@article@How to create an AWS Account](https://grapplingdev.com/tutorials/how-to-create-aws-account)
|
||||
- [@article@AWS Documentation](https://docs.aws.amazon.com/)
|
||||
- [@article@Introduction of AWS](https://docs.aws.amazon.com/whitepapers/latest/aws-overview/introduction.html)
|
||||
- [@video@AWS Tutorial for Beginners](https://www.youtube.com/watch?v=zA8guDqfv40)
|
||||
- [@video@AWS Tutorial for Beginners](https://www.youtube.com/watch?v=zA8guDqfv40)
|
||||
@@ -4,5 +4,4 @@ Data replication is the process by which data residing on a physical/virtual ser
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@What is data replication?](https://www.ibm.com/topics/data-replication)
|
||||
- [@video@What is Data Replication?](https://youtu.be/fUrKt-AQYtE)
|
||||
|
||||
@@ -4,6 +4,5 @@ An index is a data structure that you build and assign on top of an existing tab
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Database index - Wikipedia](https://en.wikipedia.org/wiki/Database_index)
|
||||
- [@video@Database Indexing Explained](https://www.youtube.com/watch?v=-qNSXK7s7_w)
|
||||
- [@feed@Explore top posts about Database](https://app.daily.dev/tags/database?ref=roadmapsh)
|
||||
|
||||
@@ -5,5 +5,6 @@ Object-Relational Mapping (ORM) is a technique that lets you query and manipulat
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Object Relational Mapping - Wikipedia](https://en.wikipedia.org/wiki/Object–relational_mapping)
|
||||
- [@article@What is an ORM and how should I use it?](https://stackoverflow.com/questions/1279613/what-is-an-orm-how-does-it-work-and-how-should-i-use-one)
|
||||
- [@article@What is an ORM, how does it work, and how should I use one?](https://stackoverflow.com/a/1279678)
|
||||
- [@feed@Explore top posts about Backend Development](https://app.daily.dev/tags/backend?ref=roadmapsh)
|
||||
|
||||
@@ -1,8 +0,0 @@
|
||||
# ACL
|
||||
|
||||
An Access Control List (ACL) is a security mechanism used to define which users or system processes are granted access to objects, such as files, directories, or network resources, and what operations they can perform on those objects. ACLs function by maintaining a list of permissions attached to each object, specifying the access rights of various entities—like users, groups, or network traffic—thereby providing fine-grained control over who can read, write, execute, or modify the resources. This method is essential in enforcing security policies, reducing unauthorized access, and ensuring that only legitimate users can interact with sensitive data or systems.
|
||||
|
||||
Learn more from the following resources:
|
||||
|
||||
- [@article@Access Control List: Definition, Types & Usages](https://www.okta.com/uk/identity-101/access-control-list/)
|
||||
- [@video@Access Control Lists](https://www.youtube.com/watch?v=IwLyr0mKK1w)
|
||||
@@ -1,8 +1,39 @@
|
||||
# ACLs
|
||||
|
||||
An Access Control List (ACL) is a security mechanism used to define which users or system processes are granted access to objects, such as files, directories, or network resources, and what operations they can perform on those objects. ACLs function by maintaining a list of permissions attached to each object, specifying the access rights of various entities—like users, groups, or network traffic—thereby providing fine-grained control over who can read, write, execute, or modify the resources. This method is essential in enforcing security policies, reducing unauthorized access, and ensuring that only legitimate users can interact with sensitive data or systems.
|
||||
Access Control Lists (ACLs) act as an essential part of an organization's security infrastructure by helping to manage access rights to resources and maintain security between users, groups, and systems.
|
||||
|
||||
Learn more from the following resources:
|
||||
In this section, we will discuss the following:
|
||||
|
||||
- [@article@Access Control List: Definition, Types & Usages](https://www.okta.com/uk/identity-101/access-control-list/)
|
||||
- [@video@Access Control Lists](https://www.youtube.com/watch?v=IwLyr0mKK1w)
|
||||
- What are Access Control Lists
|
||||
- Types of ACLs
|
||||
- How to implement and administer ACLs
|
||||
|
||||
## What are Access Control Lists
|
||||
|
||||
Access Control Lists are rule sets that define which user, group, or system has access to specific resources and determine what type of access they have (e.g., read or write). ACLs act as a barrier to prevent unauthorized access to sensitive data and systems; this can help maintain confidentiality, integrity, and availability of your organization's critical assets.
|
||||
|
||||
## Types of ACLs
|
||||
|
||||
There are two primary types of ACLs: Discretionary and Mandatory.
|
||||
|
||||
- **Discretionary Access Control Lists (DACLs)**
|
||||
DACLs allow the owner of a resource to determine who can gain access to the resource, and the level of access they can have. For example, a user or a group of users may have read access rights to a particular file, whereas another group may have full control over the file.
|
||||
|
||||
- **Mandatory Access Control Lists (MACLs)**
|
||||
MACLs rely on predefined security labels or classifications to enforce access control. In this case, resources are assigned security labels, and users or systems are given security clearances. Access is granted only if the user's security clearance level matches the resource label.
|
||||
|
||||
## Implementing and Administering ACLs
|
||||
|
||||
Here are some best practices you can follow when implementing and administering Access Control Lists:
|
||||
|
||||
- **Define clear access policies**: Establish clear rules and guidelines for accessing resources, such as who can access specific resources and what type of access they can have.
|
||||
|
||||
- **Use Role-Based Access Control (RBAC)**: Assign permissions to roles instead of individual users. This will help simplify the ACL management process.
|
||||
|
||||
- **Regular audits and reviews**: Periodically review and update the ACLs to ensure that access permissions are aligned with business requirements and security policies.
|
||||
|
||||
- **Apply the principle of least privilege**: Grant users the minimum privileges they need to perform their tasks.
|
||||
|
||||
- **Maintain a change management process**: Document all changes to ACLs, including the date of change, the reason for the change, and the individual responsible for executing the change.
|
||||
|
||||
Remember that a well-implemented and maintained ACL system can significantly reduce the risks associated with unauthorized access to your organization's critical assets.
|
||||
|
||||
@@ -1,8 +0,0 @@
|
||||
# Anti-malware
|
||||
|
||||
Anti-malware is a type of software designed to detect, prevent, and remove malicious software, such as viruses, worms, trojans, ransomware, and spyware, from computer systems. By continuously scanning files, applications, and incoming data, anti-malware solutions protect devices from a wide range of threats that can compromise system integrity, steal sensitive information, or disrupt operations. Advanced anti-malware programs utilize real-time monitoring, heuristic analysis, and behavioral detection techniques to identify and neutralize both known and emerging threats, ensuring that systems remain secure against evolving cyber attacks.
|
||||
|
||||
Learn more from the following resources:
|
||||
|
||||
- [@video@How Does Antivirus and Antimalware Software Work?](https://www.youtube.com/watch?v=bTU1jbVXlmM)
|
||||
- [@article@What is antimalware?](https://riskxchange.co/1006974/cybersecurity-what-is-anti-malware/)
|
||||
@@ -1,8 +0,0 @@
|
||||
# Antivirus
|
||||
|
||||
Antivirus software is a specialized program designed to detect, prevent, and remove malicious software, such as viruses, worms, and trojans, from computer systems. It works by scanning files and programs for known malware signatures, monitoring system behavior for suspicious activity, and providing real-time protection against potential threats. Regular updates are essential for antivirus software to recognize and defend against the latest threats. While it is a critical component of cybersecurity, antivirus solutions are often part of a broader security strategy that includes firewalls, anti-malware tools, and user education to protect against a wide range of cyber threats.
|
||||
|
||||
Learn more from the following resources:
|
||||
|
||||
- [@video@What is an antivirus and how does it keep us safe?](https://www.youtube.com/watch?v=jW626WMWNAE)
|
||||
- [@article@What is antivirus software?](https://www.webroot.com/gb/en/resources/tips-articles/what-is-anti-virus-software)
|
||||
@@ -1,8 +0,0 @@
|
||||
# ANY.RUN
|
||||
|
||||
ANY.RUN is an interactive online malware analysis platform that allows users to safely execute and analyze suspicious files and URLs in a controlled, virtualized environment. This sandbox service provides real-time insights into the behavior of potentially malicious software, such as how it interacts with the system, what files it modifies, and what network connections it attempts to make. Users can observe and control the analysis process, making it a valuable tool for cybersecurity professionals to identify and understand new threats, assess their impact, and develop appropriate countermeasures. ANY.RUN is particularly useful for dynamic analysis, enabling a deeper understanding of malware behavior in real-time.
|
||||
|
||||
Learn more from the following resources:
|
||||
|
||||
- [@official@ANY.RUN Website](https://any.run/)
|
||||
- [@video@Malware analysis with ANY.RUN](https://www.youtube.com/watch?v=QH_u7DHKzzI)
|
||||
@@ -2,7 +2,26 @@
|
||||
|
||||
Advanced Persistent Threats, or APTs, are a class of cyber threats characterized by their persistence over a long period, extensive resources, and high level of sophistication. Often associated with nation-state actors, organized cybercrime groups, and well-funded hackers, APTs are primarily focused on targeting high-value assets, such as critical infrastructure, financial systems, and government agencies.
|
||||
|
||||
## Key Aspects of APT
|
||||
|
||||
- **Persistence**: APTs are designed to maintain a low profile and operate under the radar for extended periods. Hackers use advanced techniques to maintain access and control over their targets, and continually adapt and evolve in order to avoid being discovered.
|
||||
|
||||
- **Sophistication**: APTs are known for employing a wide range of techniques and tactics to infiltrate and exploit their targets, including zero-day vulnerabilities, spear-phishing, social engineering, and advanced malware. The level of expertise behind APTs is typically higher than your average cybercriminal.
|
||||
|
||||
- **Motivation**: APTs often have significant resources behind them, which allows for sustained cyber campaigns against specific targets. The motivation can be monetary gain, espionage, or even maintaining a competitive edge in the marketplace. APTs can also be used to sow chaos and destabilize geopolitical rivals.
|
||||
|
||||
## Detecting and Mitigating APTs
|
||||
|
||||
Due to the sophisticated and persistent nature of APTs, they can be challenging to detect and protect against. However, implementing several best practices can help organizations mitigate the risk and impact of APTs:
|
||||
|
||||
- Adopt a proactive approach to cyber security, including continuous network monitoring, threat hunting, and regular assessments.
|
||||
- Implement a robust set of defense-in-depth security measures, including intrusion detection systems (IDS), firewalls, and access controls.
|
||||
- Train employees on cybersecurity awareness and how to spot and respond to cyber threats.
|
||||
- Keep systems updated and patched to prevent exploitation of known vulnerabilities.
|
||||
- Employ advanced threat intelligence solutions to identify and anticipate potential APT campaigns.
|
||||
|
||||
APT attacks can be damaging and disruptive to organizations, but understanding the nature of these threats and implementing a comprehensive security strategy can help minimize the risk and protect valuable assets. Remember, APTs are not just a concern for large enterprises and governments; organizations of all sizes can be targeted. Staying vigilant and proactive is key to staying safe from these advanced threats.
|
||||
|
||||
Learn more from the following resources:
|
||||
|
||||
- [@video@What is an Advanced Persistent Threat?](https://www.youtube.com/watch?v=sGthMsDlqew)
|
||||
- [@article@Advanced Persistent Threat (APT)](https://www.crowdstrike.com/cybersecurity-101/advanced-persistent-threat-apt/)
|
||||
- [@article@What Are Advanced Persistent Threats? - IBM](https://www.ibm.com/topics/advanced-persistent-threats)
|
||||
|
||||
@@ -2,11 +2,18 @@
|
||||
|
||||
ARP is a protocol used by the Internet Protocol (IP) to map an IP address to a physical address, also known as a Media Access Control (MAC) address. ARP is essential for routing data between devices in a Local Area Network (LAN) as it allows for the translation of IP addresses to specific hardware on the network.
|
||||
|
||||
## How It Works
|
||||
|
||||
When a device wants to communicate with another device on the same LAN, it needs to determine the corresponding MAC address for the target IP address. ARP helps in this process by broadcasting an ARP request containing the target IP address. All devices within the broadcast domain receive this ARP request and compare the target IP address with their own IP address. If a match is found, the device with the matching IP address sends an ARP reply which contains its MAC address.
|
||||
|
||||
The device that initiated the ARP request can now update its ARP cache (a table that stores IP-to-MAC mappings) with the new information, and then proceed to send data to the target's MAC address.
|
||||
|
||||
Learn more from the following resources:
|
||||
## Security Concerns
|
||||
|
||||
- [@video@ARP Explained](https://www.youtube.com/watch?v=cn8Zxh9bPio)
|
||||
- [@article@What is Address Resolution Protocol?](https://www.fortinet.com/resources/cyberglossary/what-is-arp)
|
||||
While ARP is crucial for the functioning of most networks, it also presents certain security risks. ARP poisoning, for example, occurs when an attacker sends fake ARP messages with the goal to associate their MAC address with the IP address of a target device. This can lead to Man-in-the-Middle (MITM) attacks where the attacker can intercept, modify, or block traffic intended for the target device.
|
||||
|
||||
To mitigate ARP poisoning attacks, organizations can implement security measures such as static ARP entries, dynamic ARP inspection, and ensuring that their network devices are updated with the latest security patches.
|
||||
|
||||
By understanding ARP and the potential security risks it presents, you can help protect your network by incorporating appropriate security solutions and staying vigilant against potential threats.
|
||||
|
||||
- [@video@ARP Explained - Address Resolution Protocol](https://www.youtube.com/watch?v=cn8Zxh9bPio)
|
||||
@@ -2,11 +2,18 @@
|
||||
|
||||
ARP is a protocol used by the Internet Protocol (IP) to map an IP address to a physical address, also known as a Media Access Control (MAC) address. ARP is essential for routing data between devices in a Local Area Network (LAN) as it allows for the translation of IP addresses to specific hardware on the network.
|
||||
|
||||
## How It Works
|
||||
|
||||
When a device wants to communicate with another device on the same LAN, it needs to determine the corresponding MAC address for the target IP address. ARP helps in this process by broadcasting an ARP request containing the target IP address. All devices within the broadcast domain receive this ARP request and compare the target IP address with their own IP address. If a match is found, the device with the matching IP address sends an ARP reply which contains its MAC address.
|
||||
|
||||
The device that initiated the ARP request can now update its ARP cache (a table that stores IP-to-MAC mappings) with the new information, and then proceed to send data to the target's MAC address.
|
||||
|
||||
Learn more from the following resources:
|
||||
## Security Concerns
|
||||
|
||||
- [@video@ARP Explained](https://www.youtube.com/watch?v=cn8Zxh9bPio)
|
||||
- [@article@What is Address Resolution Protocol?](https://www.fortinet.com/resources/cyberglossary/what-is-arp)
|
||||
While ARP is crucial for the functioning of most networks, it also presents certain security risks. ARP poisoning, for example, occurs when an attacker sends fake ARP messages with the goal to associate their MAC address with the IP address of a target device. This can lead to Man-in-the-Middle (MITM) attacks where the attacker can intercept, modify, or block traffic intended for the target device.
|
||||
|
||||
To mitigate ARP poisoning attacks, organizations can implement security measures such as static ARP entries, dynamic ARP inspection, and ensuring that their network devices are updated with the latest security patches.
|
||||
|
||||
By understanding ARP and the potential security risks it presents, you can help protect your network by incorporating appropriate security solutions and staying vigilant against potential threats.
|
||||
|
||||
- [@video@ARP Explained - Address Resolution Protocol](https://www.youtube.com/watch?v=cn8Zxh9bPio)
|
||||
@@ -1,12 +1,32 @@
|
||||
# ARP
|
||||
# arp
|
||||
|
||||
ARP is a protocol used by the Internet Protocol (IP) to map an IP address to a physical address, also known as a Media Access Control (MAC) address. ARP is essential for routing data between devices in a Local Area Network (LAN) as it allows for the translation of IP addresses to specific hardware on the network.
|
||||
ARP is a crucial network protocol used to map IP addresses to their corresponding MAC (Media Access Control) addresses. This mapping is crucial, as devices on a network use MAC addresses to communicate with one another. As IP addresses are easier to remember and utilize for humans, ARP helps in converting these logical addresses to physical addresses that devices can understand.
|
||||
|
||||
When a device wants to communicate with another device on the same LAN, it needs to determine the corresponding MAC address for the target IP address. ARP helps in this process by broadcasting an ARP request containing the target IP address. All devices within the broadcast domain receive this ARP request and compare the target IP address with their own IP address. If a match is found, the device with the matching IP address sends an ARP reply which contains its MAC address.
|
||||
## Why ARP is important
|
||||
|
||||
The device that initiated the ARP request can now update its ARP cache (a table that stores IP-to-MAC mappings) with the new information, and then proceed to send data to the target's MAC address.
|
||||
In a network, when a device wants to send data to another device, it needs to know the recipient's MAC address. If the sender only knows the IP address, it can use ARP to determine the corresponding MAC address. The mapping is stored in the device's ARP cache, which holds a record of both the IP and MAC addresses. This allows devices to quickly identify and communicate with others on the network.
|
||||
|
||||
Learn more from the following resources:
|
||||
## ARP Request and Reply
|
||||
|
||||
- [@video@ARP Explained](https://www.youtube.com/watch?v=cn8Zxh9bPio)
|
||||
- [@article@What is Address Resolution Protocol?](https://www.fortinet.com/resources/cyberglossary/what-is-arp)
|
||||
Here are the basic steps involved in the ARP process:
|
||||
|
||||
- The sender creates an ARP request packet with its own IP and MAC addresses, and the recipient's IP address. The packet is broadcast to all devices on the local network.
|
||||
- Each device on the network receives the ARP request, checks if the IP address is its own, and replies to the sender as needed.
|
||||
- The sender receives the ARP reply containing the recipient's MAC address and updates its ARP cache with the new information.
|
||||
- Finally, the sender uses the MAC address to transmit data packets to the intended recipient.
|
||||
|
||||
## Troubleshooting with ARP
|
||||
|
||||
If you're having issues with network communication or want to investigate your network, the ARP table can be a helpful tool. You can view your device's ARP cache using commands specific to your operating system:
|
||||
|
||||
- **Windows**: Open Command Prompt and type `arp -a`
|
||||
- **Linux**: Open Terminal and type `arp`
|
||||
- **macOS**: Open Terminal and type `arp -a`
|
||||
|
||||
The output will display the IP and MAC addresses of devices on the network that the system has interacted with.
|
||||
|
||||
## ARP Spoofing and Security Concerns
|
||||
|
||||
As crucial as ARP is, it can be exploited by attackers for malicious purposes. ARP spoofing, also known as ARP poisoning, is a form of cyberattack in which an attacker sends fake ARP requests to a network to link their MAC address with an IP address that legitimately belongs to another device. This enables the attacker to intercept and manipulate network traffic or launch denial-of-service (DoS) attacks.
|
||||
|
||||
To mitigate ARP spoofing, consider implementing security measures such as monitoring ARP traffic, using a static ARP table, or employing security solutions like intrusion detection and prevention systems. Additionally, maintaining a secure and up-to-date network infrastructure can help reduce potential vulnerabilities.
|
||||
|
||||
@@ -2,7 +2,35 @@
|
||||
|
||||
Autopsy is a versatile and powerful open-source digital forensics platform that is primarily used for incident response, cyber security investigations, and data recovery. As an investigator, you can utilize Autopsy to quickly and efficiently analyze a compromised system, extract crucial artifacts, and generate comprehensive reports. Integrated with The Sleuth Kit and other plug-ins, Autopsy allows examiners to automate tasks and dig deep into a system's structure to discover the root cause of an incident.
|
||||
|
||||
Learn more from the following resources:
|
||||
## Features of Autopsy
|
||||
|
||||
- [@official@Autopsy Website](https://www.autopsy.com/)
|
||||
- [@video@Disk analysis with Autopsy](https://www.youtube.com/watch?v=o6boK9dG-Lc&t=236s)
|
||||
- **Central Repository**: Autopsy features a central repository that allows analysts to store and manage case data, ingest modules, and collaborate with other team members. This functionality streamlines the investigation process with effective communication, data sharing, and collaborative analysis.
|
||||
|
||||
- **Intuitive Interface**: Autopsy's graphical user interface (GUI) is user-friendly and well organized. It presents the results in a structured and easy-to-navigate layout, showcasing file systems, metadata, and text strings from binary files.
|
||||
|
||||
- **File System Support**: Autopsy natively supports multiple file systems like FAT12, FAT16, FAT32, NTFS, ext2, ext3, ext4, UFS1, UFS2, and more, making it an ideal solution for analyzing different storage devices.
|
||||
|
||||
- **Timeline Analysis**: The Timeline feature in Autopsy allows analysts to visualize and explore the chronological sequence of file system events. This can be essential in understanding the chain of events during an incident and identifying suspicious activities or anomalies.
|
||||
|
||||
- **Keyword Search**: Autopsy's keyword search function is an invaluable tool for locating artifacts of interest using keywords or regular expressions. Investigators can identify incriminating documents, emails or other files by searching for specific terms, phrases, or patterns.
|
||||
|
||||
- **Integration with Other Tools**: Autopsy's modular design enables seamless integration with various digital forensics tools, facilitating the analysis with specialized features and functions, such as Volatility for memory analysis or PLASO for log parsing.
|
||||
|
||||
## Installation and Usage
|
||||
|
||||
Autopsy is available for download from its official website, [www.autopsy.com/download/](https://www.autopsy.com/download/), and can be installed on Windows, Linux, and macOS platforms.
|
||||
|
||||
Once installed, creating a new case is easy. Follow these basic steps:
|
||||
|
||||
- Launch Autopsy.
|
||||
- Click on the "New Case" button.
|
||||
- Provide a case name, case number, examiner, and case directory.
|
||||
- Add a data source (e.g., a disk image, local folder, or cloud storage) to the case.
|
||||
- Configure data ingestion options and select specific modules of interest.
|
||||
- Click on "Finish" to begin the data analysis.
|
||||
|
||||
As Autopsy completes its analysis, it will generate a comprehensive report that can be utilized for internal reporting, maintaining case records, or presenting evidence in legal proceedings.
|
||||
|
||||
## Conclusion
|
||||
|
||||
In conclusion, Autopsy is a valuable tool for incident response and digital forensics professionals. By mastering its functions and capabilities, you can enhance your capabilities in incident investigations, data recovery, and threat attribution.
|
||||
@@ -2,6 +2,56 @@
|
||||
|
||||
Amazon Web Services (AWS) is a leading cloud computing platform provided by Amazon. Launched in 2006, AWS offers an extensive range of on-demand IT services, such as computing power, storage, databases, networking, and security, which enable organizations to develop, deploy, and scale applications and infrastructure quickly and cost-effectively.
|
||||
|
||||
Learn more from the following resources:
|
||||
## Key AWS Services
|
||||
|
||||
- [@course@AWS Complete Tutorial](https://www.youtube.com/watch?v=B8i49C8fC3E)
|
||||
AWS provides over 200 different services, with new ones being added regularly. Some of the most important and commonly used services include:
|
||||
|
||||
## Compute
|
||||
|
||||
- **EC2 (Elastic Compute Cloud):** A virtual server that can be customized to suit various workloads and applications. Instances can be scaled up or down as needed.
|
||||
|
||||
- **Lambda:** A serverless computing service that enables you to run your code in response to events or HTTP requests without provisioning or managing servers.
|
||||
|
||||
## Storage
|
||||
|
||||
- **S3 (Simple Storage Service):** A scalable object storage service that allows you to store and retrieve files, such as documents, images, and videos.
|
||||
|
||||
- **EBS (Elastic Block Store):** A block storage solution used with EC2 instances for persistent storage.
|
||||
|
||||
- **Glacier:** A low-cost archiving solution used for long-term storage and data backup.
|
||||
|
||||
## Databases
|
||||
|
||||
- **RDS (Relational Database Service):** A managed service for hosting, scaling, and backing up relational databases, such as MySQL, PostgreSQL, and Oracle.
|
||||
|
||||
- **DynamoDB:** A managed NoSQL database service, designed for applications that need fast, consistent performance at any scale.
|
||||
|
||||
## Networking
|
||||
|
||||
- **VPC (Virtual Private Cloud):** Provides a virtual network for your AWS resources, enabling you to control and isolate your cloud environment.
|
||||
|
||||
- **Route 53:** A Domain Name System (DNS) web service that allows you to manage domain registration and routing policies.
|
||||
|
||||
## Security, Identity, and Compliance
|
||||
|
||||
- **IAM (Identity and Access Management):** Provides centralized control over AWS resource access and user permissions, enabling secure access management for your resources.
|
||||
|
||||
- **Cognito:** A user identity and data synchronization service that allows you to authenticate and manage users in your applications.
|
||||
|
||||
## Benefits of AWS
|
||||
|
||||
There are several reasons why AWS is widely used and trusted:
|
||||
|
||||
- **Scalability:** AWS services are designed to scale with the growing needs of your business. You can adjust resources as needed without any upfront investment.
|
||||
|
||||
- **Flexibility:** AWS supports a wide array of operating systems, programming languages, and tools, making it easy to migrate existing applications or develop new ones.
|
||||
|
||||
- **Cost-effective:** AWS follows a pay-as-you-go model, allowing you to pay only for the services and resources you use, eliminating upfront expenses.
|
||||
|
||||
- **Security:** AWS has robust security features, such as data encryption, multi-factor authentication, and infrastructure security measures, ensuring that your data and applications remain secure.
|
||||
|
||||
- **Global Presence:** With data centers across the globe, AWS enables you to serve your customers with low latency and maintain business continuity.
|
||||
|
||||
As a part of your cybersecurity strategy, it’s crucial to understand and securely configure your AWS environment. Secure your cloud infrastructure by adhering to AWS best practices, implementing access controls, and regularly monitoring for vulnerabilities.
|
||||
|
||||
For more information on securing your AWS environment, refer to the [AWS Well-Architected Framework](https://aws.amazon.com/architecture/well-architected/) and the [AWS Security Best Practices](https://d1.awsstatic.com/whitepapers/Security/AWS_Security_Best_Practices.pdf) whitepapers.
|
||||
|
||||
@@ -1,9 +1,41 @@
|
||||
# Bash
|
||||
|
||||
Bash (Bourne Again Shell) is a widely-used Unix shell and scripting language that acts as a command-line interface for executing commands and organizing files on your computer. It allows users to interact with the system's operating system by typing text commands, serving as an alternative to the graphical user interface (GUI). Bash, created as a free and improved version of the original Bourne Shell (`sh`), is the default shell in many Unix-based systems, including Linux, macOS, and the Windows Subsystem for Linux (WSL).
|
||||
Bash (**B**ourne **A**gain **Sh**ell) is a widely-used Unix shell and scripting language that acts as a command-line interface for executing commands and organizing files on your computer. It allows users to interact with the system's operating system by typing text commands, serving as an alternative to the graphical user interface (GUI). Bash, created as a free and improved version of the original Bourne Shell (`sh`), is the default shell in many Unix-based systems, including Linux, macOS, and the Windows Subsystem for Linux (WSL).
|
||||
|
||||
Learn more from the following resources:
|
||||
## Bash Scripting
|
||||
|
||||
- [@video@Bash in 100 Seconds](https://www.youtube.com/watch?v=I4EWvMFj37g)
|
||||
- [@course@Beginners Guide To The Bash Terminal](https://www.youtube.com/watch?v=oxuRxtrO2Ag)
|
||||
- [@course@Start learning bash](https://linuxhandbook.com/bash/)
|
||||
Bash scripting is an essential skill for anyone engaged in cyber security. It allows you to automate simple tasks, monitor system activities, and manage multiple files and directories with ease. With Bash scripts, you can develop tools, automate repetitive tasks, or even develop security testing tools.
|
||||
|
||||
## Key Features
|
||||
|
||||
- **Variables**: Variables can store data in the form of strings or numbers, which can be used and manipulated throughout your script.
|
||||
|
||||
- **Control Structures**: Bash supports loops (`for`, `while`) and conditional statements (`if`, `case`) to build more robust scripts with decision-making capabilities.
|
||||
|
||||
- **Functions**: Create reusable code blocks that can be called with specified parameters, making your script more modular and easier to maintain.
|
||||
|
||||
- **User Input**: Bash scripts allow you to interact with the user by accepting input or choosing options.
|
||||
|
||||
- **File Management**: Create, modify, or analyze files using built-in commands such as `ls`, `cp`, `mkdir`, and `grep`.
|
||||
|
||||
## Learning Bash
|
||||
|
||||
As a cyber security expert, having a strong foundation in Bash can save you time and help you better understand the inner workings of a system. Invest time in learning Bash essentials, such as basic commands, file manipulation, scripting, and processing text data.
|
||||
|
||||
- Basic Commands: Start by learning some of the most commonly used Bash commands: `cd`, `mv`, `cp`, `rm`, `grep`, `find`, `sort`, etc.
|
||||
|
||||
- File and Directory Management: Explore the use of commands, like `mkdir`, `rmdir`, `touch`, `chmod`, `chown`, and `ln`, to create, modify, and delete files and directories.
|
||||
|
||||
- Text Processing: Learn to use commands like `cat`, `less`, `head`, `tail`, and `awk` to analyze and manipulate text data.
|
||||
|
||||
- Scripting: Start by understanding the syntax and structure of Bash scripts, and learn how to create, debug, and execute scripts.
|
||||
|
||||
Some resources to begin your journey with Bash are:
|
||||
|
||||
- [@article@GNU Bash Manual](https://www.gnu.org/software/bash/manual/bash.html): A comprehensive guide to Bash, provided by the GNU project.
|
||||
- [@article@Bash Beginner's Guide](http://www.tldp.org/LDP/Bash-Beginners-Guide/html/): A beginner-friendly guide that covers the basics of Bash scripting.
|
||||
- [@official@Bash Academy](https://www.bash.academy/): An interactive platform to start learning Bash from scratch.
|
||||
- [@article@Learn Shell](https://www.learnshell.org/): An online resource with tutorials and exercises to help you practice your Bash skills.
|
||||
- [@feed@Explore top posts about Bash](https://app.daily.dev/tags/bash?ref=roadmapsh)
|
||||
|
||||
Bash scripting is a versatile tool in the cybersecurity toolkit, and mastering it will provide you with greater control over the systems you protect.
|
||||
|
||||
@@ -1,12 +1,39 @@
|
||||
# Basics and Concepts of Threat Hunting
|
||||
|
||||
Threat hunting is a proactive approach to cybersecurity where security professionals actively search for hidden threats or adversaries that may have bypassed traditional security measures, such as firewalls and intrusion detection systems. Rather than waiting for automated tools to flag suspicious activity, threat hunters use a combination of human intuition, threat intelligence, and advanced analysis techniques to identify indicators of compromise (IoCs) and potential threats within a network or system.
|
||||
Threat hunting is the proactive process of identifying and mitigating potential threats and vulnerabilities within a network, before they can be exploited by an attacker. To perform effective threat hunting, security professionals must use their knowledge, skills, and the latest threat intelligence to actively search for previously undetected adversaries and suspicious activities within a network.
|
||||
|
||||
The process involves several key concepts, starting with a **hypothesis**, where a hunter develops a theory about potential vulnerabilities or attack vectors that could be exploited. They then conduct a **search** through logs, traffic data, or endpoint activity to look for anomalies or patterns that may indicate malicious behavior. **Data analysis** is central to threat hunting, as hunters analyze vast amounts of network and system data to uncover subtle signs of attacks or compromises. If threats are found, the findings lead to **detection and mitigation**, allowing the security team to contain the threat, remove malicious entities, and prevent similar incidents in the future.
|
||||
## Key Objectives of Threat Hunting
|
||||
|
||||
Threat hunting also involves **continuous learning** and adapting, as hunters refine their techniques based on evolving attack methods and the latest threat intelligence. This approach improves an organization’s overall security posture by identifying sophisticated or previously unknown threats that might evade conventional security measures.
|
||||
- **Detect**: Identify unknown threats and suspicious behavior that traditional security tools may miss.
|
||||
- **Contain**: Quickly isolate and remediate threats before they can cause significant damage.
|
||||
- **Learn**: Gather valuable insights about the adversary, their techniques, and the effectiveness of existing security measures.
|
||||
|
||||
Learn more from the following resources:
|
||||
## Threat Hunting Techniques
|
||||
|
||||
- [@article@What is Threat Hunting](https://www.ibm.com/topics/threat-hunting)
|
||||
- [@video@Cyber Security Threat Hunting explained](https://www.youtube.com/watch?v=VNp35Uw_bSM)
|
||||
There are several practical approaches to threat hunting, such as:
|
||||
|
||||
- **Hypothesis-driven hunting**: Develop hypotheses about potential threats and validate them through data analysis and investigation.
|
||||
- **Indicator of Compromise (IoC) hunting**: Leverage existing threat intelligence and IoCs to search for matches within your environment.
|
||||
- **Machine learning-driven hunting**: Utilize algorithms and advanced analytics tools to automatically detect anomalies and other suspicious patterns of behavior.
|
||||
- **Situational awareness hunting**: Understand the normal behavior and baseline of the environment and look for deviations that may indicate malicious activity.
|
||||
|
||||
## Tools & Technologies for Threat Hunting
|
||||
|
||||
Some common tools and technologies used for threat hunting include:
|
||||
|
||||
- **Security information and event management (SIEM) systems**: Provide a centralized platform for detecting, alerting, and investigating security incidents and events.
|
||||
- **Endpoint detection and response (EDR) solutions**: Deliver real-time monitoring, analysis, and remediation capabilities for endpoints.
|
||||
- **Threat intelligence platforms (TIPs)**: Aggregate and analyze global threat data and indicators of compromise (IoC) to provide actionable intelligence.
|
||||
- **User and entity behavior analytics (UEBA) tools**: Apply advanced analytics algorithms to detect potential threats by analyzing the behavior of users, devices, and applications.
|
||||
|
||||
## Essential Skills for Threat Hunters
|
||||
|
||||
Successful threat hunters should possess a strong combination of technical skills, critical thinking, and situational awareness. Some essential skills include:
|
||||
|
||||
- **Understanding of networks and protocols**: Deep knowledge of network architecture, protocols, and communication patterns.
|
||||
- **Familiarity with operating systems**: Ability to navigate, investigate, and analyze various operating systems, including Windows, Linux, and macOS.
|
||||
- **Scripting and programming**: Proficiency in scripting languages (e.g., Python, PowerShell) and automation tools to streamline the threat hunting process.
|
||||
- **Knowledge of common attacker tactics, techniques, and procedures (TTPs)**: Awareness of the latest TTPs, ensuring that you stay ahead of potential threats.
|
||||
- **Critical thinking and problem-solving**: Ability to analyze complex scenarios and think creatively to identify potential threats and vulnerabilities.
|
||||
|
||||
By developing a strong foundation in threat hunting concepts and techniques, security professionals are better equipped to proactively identify and mitigate potential attacks, thereby strengthening their organization's overall cybersecurity posture.
|
||||
|
||||
@@ -1,17 +1,56 @@
|
||||
# Basics of Computer Networking
|
||||
|
||||
Computer networking involves connecting multiple computers and devices to share resources, such as data, applications, and internet connections. Networks can range from small local area networks (LANs) to large-scale wide area networks (WANs), such as the internet. The basic components of a network include devices (computers, servers, routers), transmission media (wired or wireless), and network protocols, which govern communication between devices.
|
||||
Computer networking refers to the practice of connecting two or more computing devices, creating an infrastructure in which they can exchange data, resources, and software. It is a fundamental part of cyber security and IT skills. In this chapter, we will cover five aspects of computer networking, including networking devices, network types, network protocols, IP addresses, and the OSI model.
|
||||
|
||||
Key concepts in networking include:
|
||||
## Networking Devices
|
||||
|
||||
1. **IP Addressing**: Every device on a network has a unique Internet Protocol (IP) address, which allows it to be identified and communicate with other devices.
|
||||
2. **Subnetting**: This involves dividing a network into smaller, manageable sections to optimize performance and security.
|
||||
3. **Routing**: Routers are used to forward data between different networks, ensuring that information reaches the correct destination.
|
||||
4. **DNS**: The Domain Name System translates human-readable domain names into IP addresses, enabling easier navigation and communication on the internet.
|
||||
5. **TCP/IP Protocol**: The Transmission Control Protocol/Internet Protocol (TCP/IP) suite is the foundation of most networks, handling how data is broken into packets, transmitted, and reassembled.
|
||||
Several devices enable and facilitate communication between different devices. Common networking devices include:
|
||||
|
||||
Learn more from the following resources:
|
||||
- **Hubs**: Devices that connect different devices together, transmitting data packets to all devices on the network.
|
||||
- **Switches**: Similar to hubs, but transmit data packets only to specific devices instead of broadcasting to all.
|
||||
- **Routers**: Devices that direct data packets between networks and provide the best path for data packets to reach their destination.
|
||||
- **Firewalls**: Devices or software that monitor and filter incoming and outgoing network traffic, allowing only authorized data to pass through.
|
||||
|
||||
- [@article@Networking basics - What you need to know](https://www.cisco.com/c/en/us/solutions/small-business/resource-center/networking/networking-basics.html)
|
||||
- [@video@Computer Networking in 100 seconds](https://www.youtube.com/watch?v=keeqnciDVOo)
|
||||
- [@video@Computer Networks: Crash Course Computer Science #28](https://www.youtube.com/watch?v=3QhU9jd03a0)
|
||||
## Network Types
|
||||
|
||||
There are various types of networks based on the distance they cover, and the number of devices they connect. A few common network types are:
|
||||
|
||||
- **Personal Area Network (PAN)**: Connects devices within an individual workspace, typically within a range of 10 meters.
|
||||
- **Local Area Network (LAN)**: Covers a small geographical area, such as a home or office, connecting multiple computers and other devices.
|
||||
- **Wide Area Network (WAN)**: Covers a larger geographical area, interconnecting different LANs, often using leased telecommunication lines or wireless links.
|
||||
- **Virtual Private Network (VPN)**: A secure network established over the public internet, encrypting the data transferred and restricting access to authorized users only.
|
||||
|
||||
## Network Protocols
|
||||
|
||||
Protocols are sets of rules that govern the communication between devices within a network. Some of the most common protocols include:
|
||||
|
||||
- **Transmission Control Protocol (TCP)**: Ensures the reliable transmission of data and establishes connections between devices.
|
||||
- **Internet Protocol (IP)**: Facilitates the transmission of data packets, assigning unique IP addresses to identify devices.
|
||||
- **User Datagram Protocol (UDP)**: A lightweight, fast, but less reliable protocol compared to TCP, often used for streaming and gaming applications.
|
||||
|
||||
## IP Addresses
|
||||
|
||||
An IP address is a unique identifier assigned to every device in a network. There are two types of IP addresses:
|
||||
|
||||
- **IPv4**: Uses a 32-bit addressing system, allowing for approximately 4.3 billion unique IP addresses.
|
||||
- **IPv6**: Uses a 128-bit addressing system, providing a significantly larger number of available IP addresses.
|
||||
|
||||
IP addresses can also be categorized as dynamic or static, depending on whether they change over time or remain constant for a device.
|
||||
|
||||
## OSI Model
|
||||
|
||||
The Open Systems Interconnection (OSI) model is a conceptual framework used to understand and describe how different network protocols interact. It divides networking functions into seven distinct layers:
|
||||
|
||||
- **Physical Layer**: Deals with the physical connection between devices, including cabling and hardware.
|
||||
- **Data Link Layer**: Handles the communication between adjacent devices on the same network.
|
||||
- **Network Layer**: Identifies the best route for data packets and manages IP addresses.
|
||||
- **Transport Layer**: Ensures the reliable transmission of data, including error checking and flow control.
|
||||
- **Session Layer**: Establishes, maintains, and terminates connections between applications on different devices.
|
||||
- **Presentation Layer**: Translates data into a format that is suitable for transmission between devices.
|
||||
- **Application Layer**: Represents the user interface with which applications interact.
|
||||
|
||||
Mastering the basics of computer networking is key to understanding and implementing effective cyber security measures. This chapter has covered essential networking concepts, but it is important to continually expand your knowledge in this ever-evolving field.
|
||||
|
||||
- [@article@What is Computer Networking?](https://tryhackme.com/room/whatisnetworking)
|
||||
- [@video@Learn Networking in 3 hours (basics for cybersecurity and DevOps)](https://www.youtube.com/watch?v=iSOfkw_YyOU\&t=1549s)
|
||||
- [@feed@Explore top posts about Networking](https://app.daily.dev/tags/networking?ref=roadmapsh)
|
||||
|
||||
@@ -6,10 +6,31 @@ When it comes to cybersecurity, detecting and preventing intrusions is crucial f
|
||||
|
||||
An Intrusion Detection System (IDS) is a critical security tool designed to monitor and analyze network traffic or host activities for any signs of malicious activity, policy violations, or unauthorized access attempts. Once a threat or anomaly is identified, the IDS raises an alert to the security administrator for further investigation and possible actions.
|
||||
|
||||
There are two types of IDS:
|
||||
|
||||
- **Network-Based Intrusion Detection System (NIDS)**: This type of IDS is deployed on network devices such as routers, switches, or firewalls to monitor and analyze the traffic between hosts within the network.
|
||||
|
||||
- **Host-Based Intrusion Detection System (HIDS)**: This type of IDS is installed on individual hosts, such as servers or workstations, to monitor and analyze the activities on that specific host.
|
||||
|
||||
## What is Intrusion Prevention System (IPS)?
|
||||
|
||||
An Intrusion Prevention System (IPS) is an advanced security solution closely related to IDS. While an IDS mainly focuses on detecting and alerting about intrusions, an IPS takes it a step further and actively works to prevent the attacks. It monitors, analyzes, and takes pre-configured automatic actions based on suspicious activities, such as blocking malicious traffic, reseting connections, or dropping malicious packets.
|
||||
|
||||
There are two types of IPS:
|
||||
|
||||
- **Network-Based Intrusion Prevention System (NIPS)**: This type of IPS is deployed in-line with network devices and closely monitors network traffic, making it possible to take actions in real-time.
|
||||
|
||||
- **Host-Based Intrusion Prevention System (HIPS)**: This type of IPS is installed on individual hosts and actively prevents attacks by controlling inputs and outputs on the host, restricting access to resources, and making use of application-level controls.
|
||||
|
||||
## Key Takeaways
|
||||
|
||||
- IDS and IPS are essential components of a robust cybersecurity strategy.
|
||||
- IDS focuses on detecting and alerting about potential intrusions, while IPS takes it further by actively preventing and mitigating attacks.
|
||||
- Network-based systems protect networks, while host-based systems protect individual hosts within a network.
|
||||
- Regularly updating and configuring IDS/IPS is necessary to continually defend against evolving threats.
|
||||
|
||||
By understanding the basics of IDS and IPS, you can better evaluate your security needs and take the right steps to protect your network and hosts from potential intruders.
|
||||
|
||||
Learn more from the following resources:
|
||||
|
||||
- [@video@Intrusion Prevention System (IPS)](https://www.youtube.com/watch?v=7QuYupuic3Q)
|
||||
|
||||
@@ -1,11 +1,36 @@
|
||||
# Basics of NAS and SAN
|
||||
|
||||
Network Attached Storage (NAS) and Storage Area Network (SAN) are both technologies used for storing and managing data, but they operate in different ways and serve different purposes. NAS is a dedicated file storage device that connects to a network, allowing multiple users and devices to access files over a shared network. It operates at the file level and uses standard networking protocols such as NFS or SMB/CIFS, making it easy to set up and manage, especially for small to medium-sized businesses. NAS devices are ideal for sharing files, providing backups, and enabling centralized data access across multiple users in a local network.
|
||||
Network Attached Storage (NAS) and Storage Area Network (SAN) technologies play a crucial role in managing data within an organization and serve as the building blocks for a more comprehensive IT infrastructure.
|
||||
|
||||
SAN, on the other hand, is a high-performance, specialized network designed to provide block-level storage, which means it acts as a direct-attached storage device to servers. SAN uses protocols such as Fibre Channel or iSCSI and is typically employed in large enterprise environments where fast, high-capacity, and low-latency storage is critical for applications like databases and virtualized systems. While NAS focuses on file sharing across a network, SAN is designed for more complex, high-speed data management, enabling servers to access storage as if it were directly connected to them. Both NAS and SAN are vital components of modern data storage infrastructure but are chosen based on the specific performance, scalability, and management needs of the organization.
|
||||
## Network Attached Storage (NAS)
|
||||
|
||||
Learn more from the following resources:
|
||||
NAS is a high-capacity storage solution that operates on a data file level, allowing multiple users and clients to access, store, and retrieve data from a centralized location over a network. NAS devices are generally connected to a local area network (LAN) and use various file-sharing protocols, such as NFS (Network File System), SMB/CIFS (Server Message Block/Common Internet File System), or AFP (Apple Filing Protocol).
|
||||
|
||||
- [@video@What is a NAS](https://www.youtube.com/watch?v=ZwhT-KI16jo)
|
||||
- [@video@What is a Storage Area Network](https://www.youtube.com/watch?v=7eGw4vhyeTA)
|
||||
- [@article@NAS vs SAN - What are the differences?](https://www.backblaze.com/blog/whats-the-diff-nas-vs-san/)
|
||||
Some key features of a NAS system include:
|
||||
|
||||
- **Ease of Deployment**: NAS devices are simple to install and configure, facilitating quick integration into existing network infrastructures.
|
||||
- **Scalability**: NAS systems can be easily expanded to accommodate growing storage needs by adding more drives or units.
|
||||
- **Data Protection**: Most NAS devices offer data protection features such as RAID (Redundant Array of Independent Disks), data backup, and data encryption.
|
||||
|
||||
## Storage Area Network (SAN)
|
||||
|
||||
SAN is a high-performance, dedicated storage network designed to provide block-level data storage for applications and servers. Unlike NAS, which uses file-sharing protocols, SANs utilize block-based protocols such as Fibre Channel (FC) and iSCSI (Internet Small Computer System Interface) to handle storage requests.
|
||||
|
||||
SANs offer several advantages in terms of performance, reliability, and scalability:
|
||||
|
||||
- **Performance**: SANs can handle low-latency, high-speed data transfers, providing optimal performance for mission-critical applications and large-scale virtualization.
|
||||
- **Fault Tolerance**: SANs are designed to provide redundancy and failover capabilities, ensuring continued access to data in the event of hardware failures.
|
||||
- **Scalability**: SANs can be easily scaled by adding more disk arrays, switches, or connections to meet growing storage demands.
|
||||
|
||||
## NAS vs. SAN: Choosing the Right Solution
|
||||
|
||||
When it comes to deciding between NAS and SAN, there are several factors to consider:
|
||||
|
||||
- **Cost**: NAS devices are generally more affordable than SANs, making them an attractive option for smaller organizations or environments with limited budgets.
|
||||
- **Infrastructure**: NAS solutions can be more easily integrated into existing network infrastructures, whereas SANs may require dedicated hardware, connections, and management tools.
|
||||
- **Performance Requirements**: If you need high-performance storage for intensive applications, SANs may be a more appropriate choice than NAS.
|
||||
- **Data Management**: While NAS solutions excel in handling file-based storage, SANs provide better support for block-level storage and can deliver improved performance for virtualized environments and database applications.
|
||||
|
||||
It's essential to evaluate your organization's specific needs and requirements to determine which storage solution is the most appropriate fit. As you expand your knowledge in cyber security, a solid understanding of both NAS and SAN technologies will prove invaluable in implementing secure and efficient data storage systems.
|
||||
|
||||
- [@video@NAS vs SAN](https://youtu.be/3yZDDr0JKVc)
|
||||
@@ -1,10 +1,48 @@
|
||||
# Basics of Reverse Engineering
|
||||
|
||||
Reverse engineering is the process of deconstructing a system, software, or hardware to understand its internal workings, design, and functionality without having access to its source code or original documentation. In cybersecurity, reverse engineering is often used to analyze malware or software vulnerabilities to uncover how they operate, allowing security professionals to develop defenses, patches, or detection methods. This involves breaking down the binary code, disassembling it into machine code, and then interpreting it to understand the logic, behavior, and intent behind the program.
|
||||
Reverse engineering is the process of analyzing a system, component, or software to understand how it works and deduce its design, architecture, or functionality. It is a critical skill in cybersecurity, as it helps security professionals uncover the potential attack vectors, hidden vulnerabilities, and underlying intentions of a piece of software or hardware.
|
||||
|
||||
Reverse engineering can also be used in hardware to investigate a device's design or performance, or in software development for compatibility, debugging, or enhancing legacy systems. The process typically includes static analysis, where the code is examined without execution, and dynamic analysis, where the program is executed in a controlled environment to observe its runtime behavior. The insights gained through reverse engineering are valuable for improving security, fixing bugs, or adapting systems for different uses. However, it’s important to be aware of the legal and ethical boundaries, as reverse engineering certain software or hardware can violate intellectual property rights.
|
||||
In this section, we will cover the basic concepts and techniques of reverse engineering that every cybersecurity professional should be familiar with.
|
||||
|
||||
Learn more from the following resources:
|
||||
## Static Analysis Vs. Dynamic Analysis
|
||||
|
||||
- [@course@Reverse Engineering for Everyone!](https://0xinfection.github.io/reversing/)
|
||||
- [@video@What is reverse engineering?](https://www.youtube.com/watch?v=gh2RXE9BIN8)
|
||||
There are two main approaches to reverse engineering: static analysis and dynamic analysis. Static analysis involves examining the code and structure of a software without executing it. This includes analyzing the source code, if available, or examining the binary executable using disassemblers or decompilers.
|
||||
|
||||
Dynamic analysis, on the other hand, involves executing the software while observing and monitoring its behaviors and interactions with other components or systems. This analysis is typically performed in controlled environments, such as virtual machines or sandbox environments, to minimize potential risks.
|
||||
|
||||
Both approaches have their merits and limitations, and combining them is often the most effective way to gain a comprehensive understanding of the target system.
|
||||
|
||||
## Disassemblers and Decompilers
|
||||
|
||||
Disassemblers and decompilers are essential tools in reverse engineering, as they help transform binary executables into a more human-readable format.
|
||||
|
||||
- **Disassemblers** convert machine code (binary executable) into assembly language, a low-level programming language that is more human-readable than raw machine code. Assembly languages are specific to the CPU architectures, such as x86, ARM, or MIPS.
|
||||
- **Decompilers** attempt to reverse-engineer binary executables into high-level programming languages, such as C or C++, by interpreting the structures and patterns in the assembly code. Decompilation, however, is not always perfect and may generate code that is more difficult to understand than assembly.
|
||||
|
||||
Some popular disassemblers and decompilers are:
|
||||
|
||||
- [@article@IDA Pro](https://www.hex-rays.com/products/ida/)
|
||||
- [@article@Ghidra](https://ghidra-sre.org/)
|
||||
- [@article@Hopper](https://www.hopperapp.com/)
|
||||
|
||||
## Debuggers
|
||||
|
||||
Debuggers are another essential tool for reverse engineering, as they allow you to execute a program and closely monitor its behavior during runtime. Debuggers provide features such as setting breakpoints, stepping through code, and examining memory contents.
|
||||
|
||||
Some popular debuggers include:
|
||||
|
||||
- [@article@OllyDbg](http://www.ollydbg.de/)
|
||||
- [@article@GDB](https://www.gnu.org/software/gdb/)
|
||||
- [@article@x64dbg](https://x64dbg.com/)
|
||||
|
||||
## Common Reverse Engineering Techniques
|
||||
|
||||
Here are some basic reverse engineering techniques:
|
||||
|
||||
- **Control flow analysis:** Understanding the execution flow of a program, such as loops, branches, and conditional statements, to determine how the program behaves under certain conditions.
|
||||
- **Data flow analysis:** Analyzing how data is passed between different parts of a program and tracing the origin and destination of data.
|
||||
- **System call analysis:** Examining system calls made by a program to understand how it interacts with the operating system, hardware, or external resources.
|
||||
- **Cryptographic analysis:** Identifying and analyzing encryption and decryption algorithms used within a program or analyzing any cryptographic keys or certificates that may be present.
|
||||
- **Pattern recognition:** Identifying common patterns, structures, or routines in code that may indicate the use of known algorithms or frameworks.
|
||||
|
||||
Remember that mastering the art of reverse engineering takes time and practice. As you delve deeper into the world of reverse engineering, you will develop the ability to recognize patterns, understand complex systems, and ultimately, better defend against cyber threats.
|
||||
|
||||
@@ -1,11 +1,53 @@
|
||||
# Basics of Subnetting
|
||||
|
||||
Subnetting is a technique used in computer networking to divide a large network into smaller, more manageable sub-networks, or "subnets." It enhances network performance and security by reducing broadcast traffic and enabling better control over IP address allocation. Each subnet has its own range of IP addresses, which allows network administrators to optimize network traffic and reduce congestion by isolating different sections of a network.
|
||||
Subnetting is the process of dividing an IP network into smaller sub-networks called subnets. It allows better allocation of IP addresses and provides better organization, control, and security for the network. Here we go through some of the basic concepts of subnetting and why it's crucial for cybersecurity.
|
||||
|
||||
In subnetting, an IP address is split into two parts: the network portion and the host portion. The network portion identifies the overall network, while the host portion identifies individual devices within that network. Subnet masks are used to define how much of the IP address belongs to the network and how much is reserved for hosts. By adjusting the subnet mask, administrators can create multiple subnets from a single network, with each subnet having a limited number of devices. Subnetting is particularly useful for large organizations, allowing them to efficiently manage IP addresses, improve security by segmenting different parts of the network, and control traffic flow by minimizing unnecessary data transmissions between segments.
|
||||
## IP Addresses and Subnet Masks
|
||||
|
||||
Learn more from the following resources:
|
||||
An IP address is a unique identifier for devices on a network. It consists of two parts: the network address and the host address. The network address indicates the network to which a device belongs, while the host address identifies the specific device within that network.
|
||||
|
||||
- [@article@Networking Basics: What is IPv4 Subnetting?](https://www.cbtnuggets.com/blog/technology/networking/networking-basics-what-is-ipv4-subnetting)
|
||||
- [@video@Lets subnet your home network!](https://www.youtube.com/watch?v=mJ_5qeqGOaI&list=PLIhvC56v63IKrRHh3gvZZBAGvsvOhwrRF&index=6)
|
||||
- [@video@Subnetting for hackers](https://www.youtube.com/watch?v=o0dZFcIFIAw)
|
||||
Subnet masks are used to define which portion of an IP address is the network address and which is the host address. For example, in the IP address `192.168.1.5`, and subnet mask `255.255.255.0`, the network address is `192.168.1.0`, and the host address is `5`.
|
||||
|
||||
## Why Subnetting?
|
||||
|
||||
Subnetting has several advantages, including:
|
||||
|
||||
- **Improved Network Performance**: Breaking a large network into smaller subnets helps reduce congestion and improve overall performance.
|
||||
- **Enhanced Security**: By isolating different parts of a network, you can control access and limit the spread of potential threats.
|
||||
- **Easier Administration**: Smaller networks are easier to manage and maintain, as it's simpler to track issues and allocate resources.
|
||||
|
||||
## Subnetting Process
|
||||
|
||||
The process of subnetting involves the following steps:
|
||||
|
||||
- **Choose the Appropriate Subnet Mask**: Determine the right subnet mask for your network based on the number of required subnets and hosts. The more subnets you need, the more bits you will "borrow" from the host portion of the IP address.
|
||||
|
||||
- **Divide the Network into Subnets**: Calculate the subnet addresses by incrementing the network portion of the IP address by the value of the borrowed bits.
|
||||
|
||||
- **Determine Host Ranges**: Calculate the valid host addresses within each subnet by identifying the first and last usable IP addresses. Remember that the first address in a subnet is the network address, and the last address is used for broadcasting.
|
||||
|
||||
- **Assign IP Addresses**: Allocate IP addresses to devices within their respective subnets, and configure devices with the correct subnet mask.
|
||||
|
||||
## Example
|
||||
|
||||
Let's suppose we have the network `192.168.1.0` with a subnet mask of `255.255.255.0`. We want to create four smaller subnets. Here's how we can do it:
|
||||
|
||||
- `255.255.255.0` in binary is `11111111.11111111.11111111.00000000`. We can borrow 2 bits from the host portion to create four subnets: `11111111.11111111.11111111.11000000`, which is `255.255.255.192` in decimal format.
|
||||
|
||||
- Our subnets will have the following network addresses:
|
||||
|
||||
- `192.168.1.0`
|
||||
- `192.168.1.64`
|
||||
- `192.168.1.128`
|
||||
- `192.168.1.192`
|
||||
|
||||
- The valid host ranges within each subnet are:
|
||||
|
||||
- `192.168.1.1 - 192.168.1.62`
|
||||
- `192.168.1.65 - 192.168.1.126`
|
||||
- `192.168.1.129 - 192.168.1.190`
|
||||
- `192.168.1.193 - 192.168.1.254`
|
||||
|
||||
- Allocate IP addresses from these host ranges to devices within their respective subnets, and configure devices with the correct subnet mask (`255.255.255.192`).
|
||||
|
||||
Understanding the basics of subnetting is essential to properly configuring and securing your network. By efficiently dividing your network into smaller subnets, you can optimize performance, organization, and security.
|
||||
|
||||
@@ -1,10 +1,42 @@
|
||||
# Basics of Threat Intel, OSINT
|
||||
|
||||
Threat Intelligence (Threat Intel) and Open-Source Intelligence (OSINT) are both critical components in cybersecurity that help organizations stay ahead of potential threats. Threat Intelligence refers to the collection, analysis, and dissemination of information about potential or current attacks targeting an organization. This intelligence typically includes details on emerging threats, attack patterns, malicious IP addresses, and indicators of compromise (IoCs), helping security teams anticipate, prevent, or mitigate cyberattacks. Threat Intel can be sourced from both internal data (such as logs or past incidents) and external feeds, and it helps in understanding the tactics, techniques, and procedures (TTPs) of adversaries.
|
||||
Open Source Intelligence (OSINT) is a crucial part of cyber threat intelligence (CTI). It refers to the collection and analysis of publicly available information from various sources to identify potential threats to an organization's information security.
|
||||
|
||||
OSINT, a subset of Threat Intel, involves gathering publicly available information from open sources to assess and monitor threats. These sources include websites, social media, forums, news articles, and other publicly accessible platforms. OSINT is often used for reconnaissance to identify potential attack vectors, compromised credentials, or leaks of sensitive data. It’s also a valuable tool in tracking threat actors, as they may leave traces in forums or other public spaces. Both Threat Intel and OSINT enable organizations to be more proactive in their cybersecurity strategies by identifying vulnerabilities, understanding attacker behavior, and implementing timely defenses based on actionable insights.
|
||||
## Why is OSINT important for threat intelligence?
|
||||
|
||||
Learn more from the following resources:
|
||||
OSINT plays a significant role in achieving comprehensive threat intelligence by offering valuable insights into various threat actors, their tactics, techniques, and procedures (TTPs). By leveraging OSINT, security teams can:
|
||||
|
||||
- [@article@OSINT Framework](https://osintframework.com/)
|
||||
- [@course@Open-Source Intelligence (OSINT) in 5 Hours](https://www.youtube.com/watch?v=qwA6MmbeGNo&t=457s)
|
||||
- Identify and track adversaries targeting their organization
|
||||
- Gain knowledge about the latest attack strategies and trends
|
||||
- Evaluate the effectiveness of existing security measures
|
||||
- Develop proactive defense strategies to mitigate potential threats
|
||||
|
||||
## Key OSINT Sources
|
||||
|
||||
There are numerous sources of OSINT data that can be valuable for threat intelligence. Some of the main sources include:
|
||||
|
||||
- **Publicly accessible websites and blogs**: Security researchers, hackers, and threat actors frequently share information about their findings, tools, and techniques in their blogs and websites.
|
||||
|
||||
- **Social media platforms**: Social media platforms like Twitter, Reddit, and LinkedIn offer a wealth of information about threat actors' activities and can act as a valuable resource for threat intelligence.
|
||||
|
||||
- **Security-related conference materials**: Many industry conferences and workshops publish their research papers, video recordings, and presentations online, allowing you to gather valuable insights from experts in the field.
|
||||
|
||||
- **Online forums and chat rooms**: Hacker forums, online chat rooms, and bulletin boards often contain discussions related to the latest vulnerabilities, exploits, and attack techniques.
|
||||
|
||||
- **Pastebin and GitHub**: These platforms offer code snippets and repositories that may contain working hacking tools or proof-of-concept exploits, making them valuable sources of OSINT.
|
||||
|
||||
## Best Practices for OSINT Collection
|
||||
|
||||
Collecting and analyzing OSINT for threat intelligence may seem like a daunting task, but by following these best practices, you can effectively incorporate it into your cyber defense strategies:
|
||||
|
||||
- **Set clear goals and objectives**: Define what you want to achieve with your OSINT collection efforts and how it contributes to your organization's threat intelligence initiatives.
|
||||
|
||||
- **Establish a methodology**: Develop a structured approach and process for searching, collecting, and analyzing OSINT data.
|
||||
|
||||
- **Filter your data**: As the volume of data available from OSINT sources can be overwhelming, it's essential to filter the data gathered effectively. Prioritize information that is relevant to your organizational context and specific intelligence requirements.
|
||||
|
||||
- **Maintain up-to-date knowledge**: Regularly review newly available OSINT and stay current with the latest tactics, techniques, and procedures utilized by threat actors.
|
||||
|
||||
- **Collaborate and share with peers**: The security community is known for collaboration and knowledge sharing. Engage with other security professionals to benefit from their knowledge and experience.
|
||||
|
||||
In conclusion, OSINT is a significant aspect of threat intelligence that helps organizations identify and mitigate potential security threats. By effectively collecting and analyzing OSINT, you can gain a better understanding of the ever-evolving threat landscape and develop more effective strategies to protect your organization.
|
||||
|
||||
@@ -1,12 +1,24 @@
|
||||
# Basics of Vulnerability Management
|
||||
|
||||
Vulnerability management is the process of identifying, evaluating, prioritizing, and mitigating security vulnerabilities in an organization's systems, applications, and networks. It is a continuous, proactive approach to safeguarding digital assets by addressing potential weaknesses that could be exploited by attackers. The process begins with **vulnerability scanning**, where tools are used to detect known vulnerabilities by analyzing software, configurations, and devices.
|
||||
Vulnerability management is a crucial aspect of cybersecurity, as it helps organizations to identify, prioritize, and remediate potential risks in their networks, systems, and applications. It involves continuous processes and practices designed to protect sensitive data by reducing the attack surface and minimizing the likelihood of a breach.
|
||||
|
||||
Once vulnerabilities are identified, they are **assessed and prioritized** based on factors such as severity, potential impact, and exploitability. Organizations typically use frameworks like CVSS (Common Vulnerability Scoring System) to assign risk scores to vulnerabilities, helping them focus on the most critical ones first.
|
||||
## Importance of Vulnerability Management
|
||||
|
||||
Next, **remediation** is carried out through patching, configuration changes, or other fixes. In some cases, mitigation may involve applying temporary workarounds until a full patch is available. Finally, continuous **monitoring and reporting** ensure that new vulnerabilities are swiftly identified and addressed, maintaining the organization's security posture. Vulnerability management is key to reducing the risk of exploitation and minimizing the attack surface in today's complex IT environments.
|
||||
- **Prevent cyberattacks**: By addressing vulnerabilities before they can be exploited, organizations reduce the chances of successful attacks and protect their critical assets.
|
||||
- **Comply with regulations**: Organizations must adhere to various data protection standards and regulations, such as GDPR, HIPAA, or PCI DSS. A robust vulnerability management program can help meet these requirements.
|
||||
- **Maintain customer trust**: Frequent security breaches can lead to reputational damages, making it vital to prioritize vulnerability management as a means to safeguard customer data.
|
||||
- **Save costs**: Proactively identifying and mitigating vulnerabilities reduces the financial implications of dealing with a security breach, including the costs of incident response, legal liabilities, and penalties.
|
||||
|
||||
Learn more from the following resources:
|
||||
## Components of Vulnerability Management
|
||||
|
||||
- [@article@What is vulnerability management?](https://www.rapid7.com/fundamentals/vulnerability-management-and-scanning/)
|
||||
- [@video@Vulnerability Management explained by experts](https://www.youtube.com/watch?v=RE6_Lo2wSIg)
|
||||
- **Vulnerability Assessment**: Regular vulnerability assessments are essential to identify security weaknesses. This includes scanning networks, system components, software, and applications to identify existing vulnerabilities.
|
||||
|
||||
- **Risk Analysis**: After identifying vulnerabilities, it is essential to assess their potential risks. This involves determining the likelihood and impact of each vulnerability, prioritizing them based on severity, and deciding which vulnerabilities to address first.
|
||||
|
||||
- **Remediation**: The remediation process involves implementing patches, updates, or configuration changes to address the identified vulnerabilities. It is crucial to regularly review and ensure that patches have been applied effectively to prevent further exploitation.
|
||||
|
||||
- **Verification**: After remediation, organizations must verify that the implemented solutions have effectively eliminated the risk posed by the vulnerability. Verification processes may include re-scanning and penetration testing.
|
||||
|
||||
- **Reporting**: Maintaining comprehensive and accurate records of vulnerability management activities is essential for regulatory compliance and informing key stakeholders about the organization's security posture. Regular reporting can also aid in identifying problem areas and trends, allowing decision-makers to allocate resources and plan accordingly.
|
||||
|
||||
By implementing a thorough vulnerability management program, organizations can significantly reduce their risk exposure and improve their overall cybersecurity posture. In today's digital landscape, proactively managing vulnerabilities is a critical step in safeguarding sensitive information and maintaining customer trust.
|
||||
|
||||
@@ -2,10 +2,43 @@
|
||||
|
||||
In the context of cybersecurity, Blue Team, Red Team, and Purple Team are terms used to describe different roles and methodologies employed to ensure the security of an organization or system. Let's explore each one in detail.
|
||||
|
||||
In cybersecurity, Blue Team and Red Team refer to opposing groups that work together to improve an organization's security posture. The Blue Team represents defensive security personnel who protect systems and networks from attacks, while the Red Team simulates real-world adversaries to test the Blue Team's defenses. Purple Team bridges the gap between the two, facilitating collaboration and knowledge sharing to enhance overall security effectiveness. This approach combines the defensive strategies of the Blue Team with the offensive tactics of the Red Team, creating a more comprehensive and dynamic security framework that continuously evolves to address emerging threats and vulnerabilities.
|
||||
## Blue Team
|
||||
|
||||
Learn more from the following resources:
|
||||
The Blue Team is responsible for defending an organization's information systems, networks, and critical assets from security threats. They are tasked with the ongoing monitoring of systems, detecting and responding to potential security incidents, and implementing protective measures.
|
||||
|
||||
- [@article@What is a blue team?](https://www.checkpoint.com/cyber-hub/cyber-security/what-is-a-blue-team/)
|
||||
- [@article@What is red teaming?](https://www.ibm.com/think/topics/red-teaming)
|
||||
- [@article@Purple teaming explained](https://www.crowdstrike.com/cybersecurity-101/purple-teaming/)
|
||||
**Key activities of the Blue Team:**
|
||||
|
||||
- Develop and implement security policies and procedures
|
||||
- Perform vulnerability assessments and risk assessments
|
||||
- Deploy security tools and technologies (e.g., firewalls, intrusion detection systems, etc.)
|
||||
- Monitor logs and analyze security events for potential threats
|
||||
- Respond to and investigate security incidents
|
||||
- Conduct security awareness and training programs
|
||||
|
||||
## Red Team
|
||||
|
||||
The Red Team's primary goal is to simulate real-world attacks, identify vulnerabilities, and test the effectiveness of the Blue Team's defensive strategies. They are external or internal team members that act like adversaries, using creativity, and advanced techniques to test an organization's cybersecurity defenses.
|
||||
|
||||
**Key activities of the Red Team:**
|
||||
|
||||
- Perform regular penetration testing and security assessments
|
||||
- Use social engineering techniques to exploit human weaknesses
|
||||
- Analyze and exploit vulnerabilities in systems, networks, and applications
|
||||
- Emulate advanced persistent threats and attack scenarios
|
||||
- Provide actionable insights to improve the organization's security posture
|
||||
|
||||
## Purple Team
|
||||
|
||||
The Purple Team bridges the gap between the Blue Team and Red Team, helping to create a more collaborative environment. They facilitate communication and information sharing between the two teams, ultimately aiming to improve the overall effectiveness of a security program.
|
||||
|
||||
**Key activities of the Purple Team:**
|
||||
|
||||
- Coordinate and plan joint exercises between Blue Team and Red Team
|
||||
- Share knowledge, techniques, and findings between the teams
|
||||
- Assist with the implementation of identified security improvements
|
||||
- Evaluate and measure the effectiveness of security controls
|
||||
- Foster a culture of continuous improvement and collaboration
|
||||
|
||||
By investing in Blue, Red, and Purple Team efforts, organizations can achieve a more robust and resilient security posture, capable of withstanding and adapting to ever-evolving threats.
|
||||
|
||||
- [@article@Red Team Fundamentals (TryHackMe)](https://tryhackme.com/room/redteamfundamentals)
|
||||
@@ -1,8 +1,21 @@
|
||||
# Bluetooth
|
||||
|
||||
Bluetooth is a short-range wireless technology standard used for exchanging data between fixed and mobile devices over short distances. While it offers convenience for connecting peripherals and transferring information, it also presents several security concerns in the cybersecurity landscape. Bluetooth vulnerabilities can potentially allow attackers to intercept communications, execute malicious code, or gain unauthorized access to devices. Common attacks include bluejacking, bluesnarfing, and bluebugging. To mitigate these risks, cybersecurity professionals recommend regularly updating device firmware, using the latest Bluetooth protocols, enabling encryption, and turning off Bluetooth when not in use. Despite ongoing security improvements, Bluetooth remains an attack vector that requires vigilant monitoring and protection in both personal and enterprise environments.
|
||||
**Bluetooth** is a wireless technology used to transfer data between devices over short distances. It operates in the 2.4 GHz frequency band and offers a reasonably secure means of communication between devices like smartphones, computers, headphones, and more.
|
||||
|
||||
Learn more from the following resources:
|
||||
Below are some key points about Bluetooth:
|
||||
|
||||
- [@article@Bluetooth in Cyber Security](https://www.zenarmor.com/docs/network-basics/what-is-bluetooth)
|
||||
- [@video@Everything about Bluetooth Security](https://www.youtube.com/watch?v=i9mzl51ammA)
|
||||
- **Short-range communication**: Bluetooth typically works within a radius of 10 meters (33 feet), giving it a significant advantage in terms of power consumption when compared to other wireless technologies such as Wi-Fi. The short range also reduces the chances of interference between devices.
|
||||
|
||||
- **Low power consumption**: Bluetooth devices are designed to use relatively low power compared to other wireless technologies. This aspect contributes to their widespread adoption in battery-powered devices like wearable gadgets and IoT sensors.
|
||||
|
||||
- **Convenience**: Bluetooth allows for easy, automatic connection between devices once they have been paired. This 'pair and play' functionality ensures users can quickly establish connectivity between their devices with minimal effort.
|
||||
|
||||
- **Security**: Bluetooth includes security features like encryption and authentication, which ensure secure communication between paired devices. However, users must remain vigilant in terms of keeping their devices up-to-date with the latest Bluetooth security patches and protocols.
|
||||
|
||||
- **Potential vulnerabilities**: Despite its built-in security measures, Bluetooth is not immune to cyber attacks. Some common risks include "bluejacking" (unauthorized sending of messages or files), "bluesnarfing" (unauthorized access to device data), and "BlueBorne" (an attack vector that exploits Bluetooth connections to infiltrate devices and spread malware). Users should be cautious in their usage of Bluetooth and follow best practices like not accepting unknown connection requests and turning off Bluetooth when not in use.
|
||||
|
||||
In conclusion, Bluetooth offers a convenient means of connecting devices wirelessly. While it provides reasonably secure communication, users must stay informed about potential vulnerabilities and follow good security practices to safeguard their devices.
|
||||
|
||||
- [@article@Bluetooth security risks to know (and how to avoid them)](https://us.norton.com/blog/mobile/bluetooth-security)
|
||||
- [@official@Bluetooth security best practices from official website](https://www.bluetooth.com/learn-about-bluetooth/key-attributes/bluetooth-security/)
|
||||
- [@feed@Explore top posts about Bluetooth](https://app.daily.dev/tags/bluetooth?ref=roadmapsh)
|
||||
|
||||
@@ -1,7 +1,24 @@
|
||||
# Box
|
||||
|
||||
Box is a popular cloud storage service that provides individuals and businesses with a platform to securely store, share, and access files and documents from any device. Box is known for its emphasis on security and collaboration features, making it an ideal choice for businesses who want a secure way to share and collaborate on files with their teams.
|
||||
[Box](https://www.box.com/) is a popular cloud storage service that provides individuals and businesses with a platform to securely store, share, and access files and documents from any device. Box is known for its emphasis on security and collaboration features, making it an ideal choice for businesses who want a secure way to share and collaborate on files with their teams.
|
||||
|
||||
Learn more from the following resources:
|
||||
## Features
|
||||
|
||||
- [@official@Box Website](https://www.box.com/en-gb/home)
|
||||
- **Security:** Box ensures the data stored within their platform is secure by implementing various security measures, such as encryption (in-transit and at-rest), multi-factor authentication, and granular access controls.
|
||||
- **Collaboration:** Users can easily invite collaborators, assign permissions, and share files via secure links within Box. It also features real-time document editing and file version history.
|
||||
- **Integrations:** Box integrates with several other applications and services, such as Microsoft Office 365, Google Workspace, Salesforce, Slack, and more.
|
||||
- **Box Drive:** With Box Drive, users can access and work on their files directly from the desktop, without downloading them locally, making it easy to keep files up-to-date.
|
||||
|
||||
## Pricing
|
||||
|
||||
Box offers a [variety of pricing plans](https://www.box.com/pricing), catering to different user requirements. These include:
|
||||
|
||||
- **Individual Plan:** Free, with limited storage and features.
|
||||
- **Personal Pro Plan:** $10/month, includes 100GB storage, larger file size support, and additional features.
|
||||
- **Business Plans:** Starting at $5/user/month, tailored to meet the needs of small to enterprise-level businesses, with increased storage, advanced security, and much more.
|
||||
|
||||
## Privacy & Compliance
|
||||
|
||||
Box is compliant with various international privacy laws and regulations, such as GDPR, HIPAA, and FedRAMP. It also undergoes third-party audits and assessments to verify the efficacy of their security measures.
|
||||
|
||||
In conclusion, Box is a highly secure and feature-rich cloud storage service that is specifically designed for businesses and individuals who require advanced security and collaboration functionality.
|
||||
|
||||
@@ -11,5 +11,3 @@ Password Spray is a more targeted and stealthy method of password cracking where
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Brute force vs. Password Spray attack](https://www.inspark.nl/brute-force-vs-password-spray-attack-in-azure-sentinel/)
|
||||
- [@article@What is password praying?](https://www.techtarget.com/whatis/definition/password-spraying)
|
||||
- [@article@What is a brute force attack?](https://www.fortinet.com/resources/cyberglossary/brute-force-attack)
|
||||
|
||||
@@ -5,4 +5,5 @@ A Buffer Overflow is a type of vulnerability that occurs when a program or proce
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@What Is Buffer Overflow?](https://www.fortinet.com/resources/cyberglossary/buffer-overflow)
|
||||
|
||||
- [@article@Buffer Overflow Attack](https://www.imperva.com/learn/application-security/buffer-overflow/)
|
||||
|
||||
@@ -1,8 +1,21 @@
|
||||
# Bus
|
||||
|
||||
In the context of cybersecurity, a bus refers to a communication system that transfers data between components inside a computer or between computers. It's a critical part of computer architecture that can be vulnerable to various security threats. Attackers may attempt to exploit bus systems to intercept sensitive data, inject malicious code, or perform side-channel attacks. These vulnerabilities can exist at different levels, from the system bus connecting major computer components to expansion buses for peripheral devices. Securing bus communications involves implementing encryption, access controls, and monitoring for unusual activity. As buses play a crucial role in data transfer, protecting them is essential for maintaining the overall security and integrity of computer systems and networks.
|
||||
A **bus topology** is a type of network configuration where all the devices or nodes in the network are connected to a single, central cable known as the bus, backbone or trunk. This common shared path serves as the medium for data transmission and communication amongst the nodes.
|
||||
|
||||
Learn more from the following resources:
|
||||
## How Bus Topology Works
|
||||
|
||||
- [@article@What is a bus?](https://www.lenovo.com/gb/en/glossary/bus/?srsltid=AfmBOoocoXVvqdupLu13XAm0FZMOHjRtjnnCCFxa59tEa-bQwhiVhac2)
|
||||
- [@video@Computer buses](https://www.youtube.com/watch?v=aBCaCrC3z0k)
|
||||
In a bus topology, every node has a unique address that identifies it on the network. When a node wants to communicate with another node in the network, it broadcasts a message containing the destination node's address as well as its own address. All the nodes connected to the bus receive the message, but only the intended recipient with the matching address responds.
|
||||
|
||||
## Advantages of Bus Topology
|
||||
|
||||
- **Easy to set up**: Bus topology is relatively simple in terms of installation, as it requires less cable and minimal hardware.
|
||||
- **Cost-effective**: Due to its simplicity and reduced cabling requirements, it's typically more affordable to implement than other topologies.
|
||||
- **Expandable**: New nodes can be easily added to the network by connecting them to the bus.
|
||||
|
||||
## Disadvantages of Bus Topology
|
||||
|
||||
- **Limited Scalability**: As the number of nodes increases, network performance may decrease due to increased collisions and data transmission time.
|
||||
- **Single point of failure**: If the central cable (bus) fails or gets damaged, the entire network will be affected and may result in a complete breakdown.
|
||||
- **Maintenance difficulty**: Troubleshooting and identifying issues within the network can be challenging due to the shared path for data transmission.
|
||||
|
||||
Bus topology can be an effective solution for small networks with minimal devices. However, as network size and complexity increase, other topologies such as star, ring, or mesh may be more suitable for maintaining efficiency and reliability.
|
||||
|
||||
@@ -2,7 +2,44 @@
|
||||
|
||||
C++ is a widely-used, high-level programming language that evolved from the earlier C programming language. Developed by Bjarne Stroustrup in 1985 at Bell Labs, C++ provides object-oriented features and low-level memory manipulation, making it an essential language for many fields, including game development, high-performance systems, and cybersecurity.
|
||||
|
||||
Learn more form the following resources:
|
||||
## Key Features of C++:
|
||||
|
||||
- [@course@C++ Full Course - BroCode](https://www.youtube.com/watch?v=-TkoO8Z07hI)
|
||||
- [@article@C++ Introduction](https://www.w3schools.com/cpp/cpp_intro.asp)
|
||||
## Object-Oriented Programming (OOP)
|
||||
|
||||
C++ is one of the first programming languages to support Object-Oriented Programming (OOP). It allows code to be modular and reusable through the use of classes and objects.
|
||||
|
||||
## Performance
|
||||
|
||||
C++ provides high performance, as it allows low-level access to memory and fine-grained control over system resources. This makes C++ suitable for performance-critical applications like network security systems and firewalls.
|
||||
|
||||
## Compatibility
|
||||
|
||||
C++ is highly compatible with the C programming language, which makes it easier for programmers to transition from C to C++. Many system-level libraries and applications written in C can be easily extended or integrated with C++ code.
|
||||
|
||||
## Standard Template Library (STL)
|
||||
|
||||
C++ comes with a rich library called the Standard Template Library (STL). The STL contains efficient templated data structures and algorithms, which can improve development speed and code quality.
|
||||
|
||||
## Importance of C++ in Cybersecurity
|
||||
|
||||
C++ is widely used in the development of cybersecurity tools and applications due to its efficiency, low-level access, and compatibility with existing systems. Some reasons for its importance in cybersecurity include:
|
||||
|
||||
- **Developing Security Software:** C++ is commonly used in developing antivirus software, firewalls, intrusion detection systems, and other security tools due to its strong performance capabilities.
|
||||
|
||||
- **Reverse Engineering and Exploit Development:** Cybersecurity professionals often use C++ to reverse-engineer malware, study their behavior, and develop countermeasures to stop them.
|
||||
|
||||
- **Vulnerability Analysis:** Since many applications are developed in C++, understanding the language helps cybersecurity professionals assess the code for vulnerabilities and potential exploits.
|
||||
|
||||
- **Secure Code Development:** Developing secure applications is vital to prevent security breaches. With its powerful features, C++ enables developers to write efficient, maintainable, and secure code.
|
||||
|
||||
## Resources for Learning C++
|
||||
|
||||
To advance your programming skills in C++ and leverage its power for cybersecurity tasks, consider the following resources:
|
||||
|
||||
- [@article@Cplusplus.com](http://www.cplusplus.com/)
|
||||
- [@article@CPPReference.com](https://en.cppreference.com/)
|
||||
- [@course@Coursera: C++ For C Programmers](https://www.coursera.org/specializations/c-plus-plus-programming)
|
||||
- [@article@A Tour of C++](https://www.amazon.com/Tour-C-Depth/dp/0134997832) (book) by Bjarne Stroustrup.
|
||||
- [@feed@Explore top posts about C++](https://app.daily.dev/tags/c++?ref=roadmapsh)
|
||||
|
||||
By mastering C++, you'll be well-equipped to develop and secure applications, analyze cybersecurity threats, and effectively contribute to the broader cybersecurity community.
|
||||
|
||||
@@ -2,7 +2,50 @@
|
||||
|
||||
`cat` is a widely used command-line utility in UNIX and UNIX-like systems. It stands for "concatenate" which, as the name suggests, can be used to concatenate files, display file contents, or combine files. In the context of incident response and discovery tools, `cat` plays an essential role in quickly accessing and assessing the contents of various files that inform on security incidents and help users understand system data as well as potential threats.
|
||||
|
||||
Learn more from the following resources:
|
||||
## Usage
|
||||
|
||||
- [@article@Linux cat command](https://phoenixnap.com/kb/linux-cat-command)
|
||||
- [@video@The cat command](https://www.youtube.com/shorts/lTOje2weu_o?app=desktop)
|
||||
The default syntax for `cat` is as follows:
|
||||
|
||||
```sh
|
||||
cat [options] [file(s)]
|
||||
```
|
||||
|
||||
where `options` are command flags to modify the behavior of `cat` and `file(s)` are the input file(s) to be processed. If no file is specified, `cat` reads input from the standard input, which allows it to interact with output from other utilities or commands.
|
||||
|
||||
## Key Features
|
||||
|
||||
Here are some of the useful features of `cat` in incident response and discovery:
|
||||
|
||||
- **Display file contents**: Quickly view file content, which is useful for examining logs and configuration files.
|
||||
|
||||
```sh
|
||||
cat file.txt
|
||||
```
|
||||
|
||||
- **Combine multiple files**: Combine contents of multiple files that can be useful while investigating related logs.
|
||||
|
||||
```sh
|
||||
cat file1.txt file2.txt > combined.txt
|
||||
```
|
||||
|
||||
- **Number lines while displaying**: Use the `-n` flag to show line numbers in the output, assisting in pinpointing specific entries in large files.
|
||||
|
||||
```sh
|
||||
cat -n file.txt
|
||||
```
|
||||
|
||||
- **Display non-printable characters**: The `-v` flag allows viewing non-printable characters that might be hidden in a file.
|
||||
|
||||
```sh
|
||||
cat -v file.txt
|
||||
```
|
||||
|
||||
- **Piping and Archiving**: The `cat` command can interface seamlessly with other command-line utilities, allowing complex operations to be performed with ease.
|
||||
|
||||
```sh
|
||||
cat logs.txt | grep 'ERROR' > error_logs.txt
|
||||
```
|
||||
|
||||
## Wrapping Up
|
||||
|
||||
In summary, `cat` is a versatile and indispensable tool in cybersecurity for simplifying the process of navigating through files, logs, and data during an incident response. Its compatibility with various other Unix utilities and commands makes it a powerful tool in the hands of cyber professionals.
|
||||
@@ -2,7 +2,24 @@
|
||||
|
||||
The Cisco Certified Network Associate (CCNA) certification is an entry-level certification for IT professionals who want to specialize in networking, specifically within the realm of Cisco products. This certification validates an individual's ability to install, configure, operate, and troubleshoot medium-sized routed and switched networks. It also covers the essentials of network security and management.
|
||||
|
||||
Learn more from the following resources:
|
||||
## Key Concepts
|
||||
|
||||
- [@Network Chuck Free CCNA Course](https://www.youtube.com/playlist?list=PLIhvC56v63IJVXv0GJcl9vO5Z6znCVb1P)
|
||||
- [@official@CCNA Certification Website](https://www.cisco.com/site/us/en/learn/training-certifications/certifications/enterprise/ccna/index.html)
|
||||
As a CCNA candidate, you will learn the following concepts:
|
||||
|
||||
- Network fundamentals: understanding the basics of networking technologies, such as how devices communicate and how data is transmitted
|
||||
- LAN switching technologies: understanding how switches work and how to configure them for optimal performance
|
||||
- IPv4 and IPv6 routing technologies: learning how routers process packets and route data between networks
|
||||
- WAN technologies: understanding Wide Area Networks (WANs) and how they are used to connect geographically dispersed networks
|
||||
- Infrastructure services: learning about DHCP, DNS, and other essential network services
|
||||
- Infrastructure security: understanding how to secure network devices and implement basic security measures
|
||||
- Infrastructure management: learning about SNMP, Syslog, and other tools for network monitoring and management
|
||||
|
||||
## CCNA Exam
|
||||
|
||||
To obtain the CCNA certification, you will need to pass a single exam, currently the "200-301 CCNA" exam. This exam tests your knowledge and skills in the aforementioned key concepts. The exam consists of multiple-choice, drag-and-drop, and simulation questions that assess your understanding of networking theory, as well as your ability to perform practical tasks.
|
||||
|
||||
## Why CCNA?
|
||||
|
||||
A CCNA certification can provide you with a solid foundation in networking and open doors to various career opportunities, such as network administrator, network engineer, or security specialist roles. Many employers value CCNA-certified professionals for their validated skills in working with Cisco networking products and their understanding of networking fundamentals. Additionally, attaining a CCNA certification can serve as a stepping stone towards more advanced Cisco certifications, such as the Cisco Certified Network Professional (CCNP) and the Cisco Certified Internetwork Expert (CCIE).
|
||||
|
||||
- [@video@Free CCNA 200-301 | Complete Course 2023 by Jeremy's IT Lab](https://www.youtube.com/playlist?list=PLxbwE86jKRgMpuZuLBivzlM8s2Dk5lXBQ)
|
||||
@@ -2,6 +2,41 @@
|
||||
|
||||
**Certified Ethical Hacker (CEH)** is an advanced certification focused on equipping cybersecurity professionals with the knowledge and skills required to defend against the continuously evolving landscape of cyber threats. This certification is facilitated by the EC-Council, an internationally recognized organization for information security certifications.
|
||||
|
||||
Learn more from the following resources:
|
||||
## Objectives
|
||||
|
||||
- [@official@CEH Website](https://www.eccouncil.org/train-certify/certified-ethical-hacker-ceh/)
|
||||
The CEH certification aims to provide professionals with the following skills:
|
||||
|
||||
- Understand the ethics and legal requirements of ethical hacking
|
||||
- Identify and analyze common cyber threats, including malware, social engineering, and various network attacks
|
||||
- Utilize the latest penetration testing tools and methodologies to uncover vulnerabilities in systems, networks, and applications
|
||||
- Implement defensive countermeasures to protect against cyber attacks
|
||||
|
||||
## Target Audience
|
||||
|
||||
The CEH certification is ideal for:
|
||||
|
||||
- Cybersecurity professionals seeking to expand their skill set
|
||||
- IT administrators responsible for securing their organization's systems and network
|
||||
- Penetration testers looking to demonstrate their ethical hacking capabilities
|
||||
- Security consultants who want a recognized certification in the IT security field
|
||||
|
||||
## Exam Details
|
||||
|
||||
To become a Certified Ethical Hacker, you must pass the CEH exam, which consists of the following:
|
||||
|
||||
- Number of Questions: 125
|
||||
- Exam Type: Multiple choice questions
|
||||
- Duration: 4 hours
|
||||
- Passing Score: 70%
|
||||
|
||||
## Preparation
|
||||
|
||||
To prepare for the CEH exam, candidates can follow the EC-Council's official training course or opt for self-study. The recommended resources include:
|
||||
|
||||
- EC-Council's [_CEH v11: Certified Ethical Hacker_](https://www.eccouncil.org/programs/certified-ethical-hacker-ceh/) training course
|
||||
- Official CEH study guide and practice exams
|
||||
- CEH-related books, articles, and online resources
|
||||
|
||||
## Recertification
|
||||
|
||||
CEH holders need to earn 120 ECE (Education Credits) within three years of obtaining their certification to retain their credentials. These credits can be obtained through training, workshops, conferences, and other continuous learning opportunities in the field of information security.
|
||||
@@ -2,9 +2,39 @@
|
||||
|
||||
Certificates, also known as digital certificates or SSL/TLS certificates, play a crucial role in the world of cybersecurity. They help secure communications between clients and servers over the internet, ensuring that sensitive data remains confidential and protected from prying eyes.
|
||||
|
||||
## What is a Certificate?
|
||||
|
||||
A digital certificate is an electronic document that uses a digital signature to bind a public key with a specific identity, such as a website domain or an organization. It contains information about the certificate holder, the certificate's validity period, and the public key of the entity that the certificate represents.
|
||||
|
||||
## Certificate Authorities (CAs)
|
||||
|
||||
Certificates are issued and signed by trusted third-party organizations called Certificate Authorities (CAs). CAs are responsible for verifying the authenticity of organizations or individuals making the request and ensuring that they, indeed, own the domain for which the certificate is issued.
|
||||
|
||||
Some well-known CAs include:
|
||||
|
||||
- DigiCert
|
||||
- Let's Encrypt
|
||||
- GlobalSign
|
||||
- Sectigo (formerly Comodo)
|
||||
- Entrust
|
||||
|
||||
## Types of Certificates
|
||||
|
||||
Different types of certificates serve different purposes and offer varying levels of validation:
|
||||
|
||||
- **Domain Validation (DV)**: These certificates validate the ownership of the domain but do not contain any information about the organization that owns it. DV certificates offer a basic level of security and are suitable for websites that don't process sensitive data, such as blogs or portfolio sites.
|
||||
- **Organization Validation (OV)**: OV certificates verify the ownership of the domain and contain information about the organization that owns it. This type of certificate provides an enhanced level of trust and is recommended for business websites where users need to know the identity of the organization they are dealing with.
|
||||
- **Extended Validation (EV)**: EV certificates provide the highest level of identity validation by conducting a rigorous verification process that involves checking the organization's legal status, physical presence, and domain ownership. Websites with an EV certificate display a green padlock or bar in the browser address bar, increasing user trust and confidence.
|
||||
|
||||
## Importance of Certificates
|
||||
|
||||
Digital certificates offer various benefits in the realm of cybersecurity, such as:
|
||||
|
||||
- **Authentication**: Certificates help to establish the authenticity of a domain or an organization, allowing users to trust that they are communicating with a legitimate entity.
|
||||
- **Encryption**: By using public key encryption, certificates enable secure communication between clients and servers, protecting sensitive data from being intercepted by malicious actors.
|
||||
- **Integrity**: Certificates ensure that the data transferred between parties remains intact and unaltered during transmission, preventing tampering or manipulation by malicious actors.
|
||||
- **Trust**: With the assurance that a website has a valid certificate from a trusted CA, users are more likely to trust and engage with the site, leading to increased conversion rates and customer loyalty.
|
||||
|
||||
## Conclusion
|
||||
|
||||
Digital certificates provide a crucial layer of security and trust for online communications. Understanding their role in cybersecurity, the different types of certificates, and the importance of acquiring certificates from trusted CAs can greatly enhance your organization's online security posture and reputation.
|
||||
|
||||
Learn more from the following resources:
|
||||
|
||||
- [@article@What is an SSL certificate?](https://www.cloudflare.com/en-gb/learning/ssl/what-is-an-ssl-certificate/)
|
||||
- [@article@What is a certificate authority](https://www.ssl.com/article/what-is-a-certificate-authority-ca/)
|
||||
@@ -2,11 +2,22 @@
|
||||
|
||||
CIDR, or Classless Inter-Domain Routing, is a method of allocating IP addresses and routing Internet Protocol packets in a more flexible and efficient way, compared to the older method of Classful IP addressing. Developed in the early 1990s, CIDR helps to slow down the depletion of IPv4 addresses and reduce the size of routing tables, resulting in better performance and scalability of the Internet.
|
||||
|
||||
## How CIDR works
|
||||
|
||||
CIDR achieves its goals by replacing the traditional Class A, B, and C addressing schemes with a system that allows for variable-length subnet masking (VLSM). In CIDR, an IP address and its subnet mask are written together as a single entity, referred to as a _CIDR notation_.
|
||||
|
||||
A CIDR notation looks like this: `192.168.1.0/24`. Here, `192.168.1.0` is the IP address, and `/24` represents the subnet mask. The number after the slash (/) is called the _prefix length_, which indicates how many bits of the subnet mask should be set to 1 (bitmask). The remaining bits of the subnet mask are set to 0.
|
||||
|
||||
Learn more from the following resources:
|
||||
For example, a `/24` prefix length corresponds to a subnet mask of `255.255.255.0`, because the first 24 bits are set to 1. This allows for 256 total IP addresses in the subnet, with 254 of these IPs available for devices (The first and last IP are reserved for the network address and broadcast address, respectively).
|
||||
|
||||
- [@article@What is CIDR?](https://aws.amazon.com/what-is/cidr/)
|
||||
- [@video@What is Network CIDR Notation?](https://www.youtube.com/watch?v=tpa9QSiiiUo)
|
||||
## Advantages of CIDR
|
||||
|
||||
- **Efficient IP allocation:** CIDR allows for more granular allocation of IPv4 addresses, reducing wasted IP space.
|
||||
- **Reduction of routing table size:** CIDR enables route aggregation (route summarization), which combines multiple network routes to a single routing table entry.
|
||||
- **Decreased routing updates:** By allowing routers to share more generalized routing information, the number of routing updates gets significantly reduced, improving network stability and reducing router workload.
|
||||
|
||||
## CIDR in IPv6
|
||||
|
||||
CIDR also plays a crucial role in the IPv6 addressing system, where the use of CIDR notation and address aggregation has become even more critical in managing the immense address space of IPv6 efficiently.
|
||||
|
||||
In conclusion, CIDR is an essential component of modern IP networking systems, enabling better utilization of IP address space and improving the overall scalability and performance of the Internet. It's crucial for network administrators and security professionals to have a solid understanding of CIDR, as it plays a significant role in configuring, managing, and securing IP networks.
|
||||
|
||||
@@ -2,7 +2,32 @@
|
||||
|
||||
The **Center for Internet Security (CIS)** is a non-profit organization that focuses on enhancing the cybersecurity posture of individuals, organizations, and governments around the world. CIS offers various tools, best practices, guidelines, and frameworks that help in defending against common cyber threats.
|
||||
|
||||
Learn more from the following resources:
|
||||
## CIS Critical Security Controls
|
||||
|
||||
- [@video@CIS Overview](https://www.youtube.com/watch?v=f-Z7h5dI6uQ)
|
||||
- [@official@CIS Website](https://www.cisecurity.org/)
|
||||
One of the most significant contributions of CIS is the **CIS Critical Security Controls (CSC)**, which are a set of prioritized actions that aim to improve cyber defense. These controls have been developed by a community of IT security experts and are regularly updated to remain relevant in the ever-evolving threat landscape.
|
||||
|
||||
The CIS Critical Security Controls are divided into three categories:
|
||||
|
||||
- Basic Controls: Foundational security measures that every organization should implement.
|
||||
- Foundational Controls: Additional security measures providing a more robust defense.
|
||||
- Organizational Controls: Governance and management-related processes, ensuring the continuity and effectiveness of the security program.
|
||||
|
||||
The following are the key objectives of implementing CIS Critical Security Controls:
|
||||
|
||||
- Strengthen the security posture of an organization.
|
||||
- Protect sensitive information and valuable assets.
|
||||
- Identify and prioritize the most critical vulnerabilities.
|
||||
- Reduce the attack surface and risks associated with cyber threats.
|
||||
|
||||
## CIS Benchmarks
|
||||
|
||||
CIS also provides **CIS Benchmarks**, which are a set of configuration guidelines for various technologies, including operating systems, cloud providers, and applications. These benchmarks offer practical guidance for securing systems and improving overall cybersecurity posture.
|
||||
|
||||
CIS Benchmarks provide the following benefits:
|
||||
|
||||
- Improve system security by reducing the attack surface.
|
||||
- Assist in meeting compliance requirements such as HIPAA, PCI DSS, and GDPR.
|
||||
- Enable organizations to adopt best practices in configuration management.
|
||||
- Facilitate audit preparation and maintaining system documentation.
|
||||
|
||||
In summary, the Center for Internet Security (CIS) offers valuable resources that can help organizations bolster their security posture. The CIS Critical Security Controls and CIS Benchmarks are practical tools that provide guidance on implementing security measures to mitigate cyber threats effectively. By following these guidelines, organizations can improve their resilience and better protect themselves in the rapidly evolving digital landscape.
|
||||
@@ -2,9 +2,44 @@
|
||||
|
||||
The **Certified Information Systems Auditor (CISA)** is a globally recognized certification for professionals who audit, control, monitor, and assess an organization's information technology and business systems.
|
||||
|
||||
## Overview
|
||||
|
||||
CISA was established by the Information Systems Audit and Control Association (ISACA) and is designed to demonstrate an individual's expertise in managing vulnerabilities, ensuring compliance with industry regulations, and instituting controls within the business environment.
|
||||
|
||||
Learn more from the following resources:
|
||||
## Who Should Pursue CISA?
|
||||
|
||||
- [@official@CISA Website](https://www.isaca.org/credentialing/cisa)
|
||||
- [@article@What is a Certified Information Systems Auditor?](https://www.investopedia.com/terms/c/certified-information-systems-auditor.asp)
|
||||
CISA is most suitable for professionals with roles such as:
|
||||
|
||||
- IT auditors
|
||||
- IT security professionals
|
||||
- IT risk analysts
|
||||
- IT compliance analysts
|
||||
- Security consultants
|
||||
|
||||
## Exam and Prerequisites
|
||||
|
||||
To earn the CISA certification, candidates must pass a comprehensive exam. The prerequisites for the CISA certification include:
|
||||
|
||||
- Five years of professional experience in information systems auditing, control, assurance, or security work. Some substitutions and waivers can be made for education, but a minimum of two years of experience in information systems audit or control is required.
|
||||
- Agree to the ISACA Code of Professional Ethics.
|
||||
- Adherence to the CISA Continuing Professional Education (CPE) Program, which requires a minimum of 20 CPE hours annually and 120 hours of CPE in a 3-year period.
|
||||
|
||||
The exam itself has a duration of four hours and consists of 150 multiple-choice questions. It covers five domains:
|
||||
|
||||
- The Process of Auditing Information Systems (21%)
|
||||
- Governance and Management of IT (16%)
|
||||
- Information Systems Acquisition, Development, and Implementation (18%)
|
||||
- Information Systems Operations, Maintenance, and Service Management (20%)
|
||||
- Protection of Information Assets (25%)
|
||||
|
||||
## Benefits of CISA Certification
|
||||
|
||||
Upon obtaining the CISA certification, some of the benefits include:
|
||||
|
||||
- Increased credibility and recognition in the industry
|
||||
- Enhanced career prospects and job security
|
||||
- A competitive edge over non-certified professionals
|
||||
- The potential for salary increase and promotions
|
||||
- Access to a global community of certified professionals and resources
|
||||
|
||||
Overall, the CISA certification can be a valuable asset for those looking to advance their careers in cybersecurity, particularly in the area of auditing and controlling information systems.
|
||||
@@ -1,10 +1,31 @@
|
||||
# CISM
|
||||
|
||||
The Certified Information Security Manager (CISM) is an advanced cybersecurity certification offered by ISACA that focuses on information security management. It is designed for professionals who have a strong understanding of information security and are responsible for overseeing, designing, and managing an organization's information security programs.
|
||||
The [Certified Information Security Manager (CISM)](https://www.isaca.org/credentialing/cism) is an advanced cybersecurity certification offered by ISACA that focuses on information security management. It is designed for professionals who have a strong understanding of information security and are responsible for overseeing, designing, and managing an organization's information security programs.
|
||||
|
||||
Common ports are standardized communication endpoints used by various network protocols and services. In cybersecurity, understanding these ports is crucial for configuring firewalls, detecting potential threats, and managing network traffic. Some widely used ports include 80 and 443 for HTTP and HTTPS web traffic, 22 for SSH secure remote access, 25 for SMTP email transmission, and 53 for DNS name resolution. FTP typically uses port 21 for control and 20 for data transfer, while ports 137-139 and 445 are associated with SMB file sharing. Database services often use specific ports, such as 3306 for MySQL and 1433 for Microsoft SQL Server. Cybersecurity professionals must be familiar with these common ports and their expected behaviors to effectively monitor network activities, identify anomalies, and secure systems against potential attacks targeting specific services.
|
||||
## Who Should Pursue CISM Certification?
|
||||
|
||||
Learn more from the following resources:
|
||||
The CISM certification is ideal for:
|
||||
|
||||
- [@official@CISM Website](https://www.isaca.org/credentialing/cism)
|
||||
- [@article@Certified Information Security Manager (CISM)](https://www.techtarget.com/searchsecurity/definition/certified-information-security-manager-CISM)
|
||||
- Information security managers
|
||||
- IT consultants
|
||||
- IT auditors
|
||||
- Senior IT professionals responsible for information security
|
||||
- Security architects and engineers
|
||||
|
||||
## Exam Requirements and Process
|
||||
|
||||
To obtain the CISM certification, candidates must:
|
||||
|
||||
- **Register for the CISM Exam**: You must [register](https://www.isaca.org/exams) for the exam, pay the registration fee, and select an exam date during one of the three annual exam windows.
|
||||
- **Meet the Experience Requirements**: You must have at least five years of experience in information security management across at least three of the four CISM domains. There is the option to waive up to two years of experience based on your education or other certifications.
|
||||
- **Study for the Exam**: Thorough exam preparation is essential for success. ISACA provides a range of study materials, including the [CISM Review Manual](https://www.isaca.org/bookstore), online question banks, and instructor-led courses.
|
||||
- **Take the Exam**: The CISM exam consists of 150 multiple-choice questions, and you have four hours to complete it. It covers four main domains:
|
||||
|
||||
- Information Security Governance
|
||||
- Information Risk Management
|
||||
- Information Security Program Development and Management
|
||||
- Information Security Incident Management
|
||||
|
||||
- **Maintain Your Certification**: Once you pass the exam and meet the experience requirements, you need to [apply for certification](https://www.isaca.org/credentialing/certified-information-security-manager/get-cism-certified). To maintain your CISM credential, you must earn Continuing Professional Education (CPE) hours and renew your certification every three years.
|
||||
|
||||
The CISM certification is globally recognized for its emphasis on the strategic and managerial aspects of information security. Professionals with this certification are in high demand, as they possess the knowledge and skills to develop and manage comprehensive information security programs in various organizations.
|
||||
@@ -2,7 +2,45 @@
|
||||
|
||||
The Certified Information Systems Security Professional (CISSP) is a globally recognized certification offered by the International Information System Security Certification Consortium (ISC)². It is designed for experienced security professionals to validate their knowledge and expertise in the field of information security.
|
||||
|
||||
Learn more from the following resources:
|
||||
## Who Should Obtain the CISSP Certification?
|
||||
|
||||
- [@official@CISSP Certification Website](https://www.isc2.org/certifications/cissp)
|
||||
- [@course@CISSP Certification course](https://www.youtube.com/watch?v=M1_v5HBVHWo)
|
||||
The CISSP certification is ideal for security consultants, managers, IT directors, security auditors, security analysts, and other professionals who are responsible for designing, implementing, and managing security for their organization. This certification is aimed at professionals with at least five years of full-time experience in two or more of the eight CISSP domains:
|
||||
|
||||
- Security and Risk Management
|
||||
- Asset Security
|
||||
- Security Architecture and Engineering
|
||||
- Communication and Network Security
|
||||
- Identity and Access Management (IAM)
|
||||
- Security Assessment and Testing
|
||||
- Security Operations
|
||||
- Software Development Security
|
||||
|
||||
## Certification Process
|
||||
|
||||
To obtain the CISSP certification, candidates must meet the following requirements:
|
||||
|
||||
- **Experience:** Possess a minimum of five years of cumulative, paid, full-time work experience in two or more of the eight domains of the CISSP Common Body of Knowledge (CBK).
|
||||
|
||||
- **Exam:** Pass the CISSP examination with a minimum scaled score of 700 out of 1000 points. The exam consists of 100 to 150 multiple-choice and advanced innovative questions that must be completed within three hours.
|
||||
|
||||
- **Endorsement:** After passing the exam, candidates must submit an endorsement application to be reviewed and endorsed by an (ISC)² CISSP holder within nine months of passing the exam.
|
||||
|
||||
- **Continuing Professional Education (CPE):** To maintain the CISSP certification, professionals must earn 120 CPE credits every three years, with a minimum of 40 credits earned each year, and pay an annual maintenance fee.
|
||||
|
||||
## Benefits of CISSP Certification
|
||||
|
||||
Obtaining the CISSP certification comes with numerous benefits, such as:
|
||||
|
||||
- Enhanced credibility, as the CISSP is often considered the gold standard in information security certifications.
|
||||
- Increased job opportunities, as many organizations and government agencies require or prefer CISSP-certified professionals.
|
||||
- Improved knowledge and skills, as the certification covers a broad range of security topics and best practices.
|
||||
- Higher salary potential, as CISSP-certified professionals often command higher salaries compared to their non-certified counterparts.
|
||||
- Access to a network of other CISSP-certified professionals and resources, enabling continuous learning and professional development.
|
||||
|
||||
Learn more from the following resources
|
||||
|
||||
- [@official@ISC2 CISSP](https://www.isc2.org/certifications/cissp)
|
||||
- [@official@ISC2 CISSP - Official Study Guide](https://www.wiley.com/en-us/ISC2+CISSP+Certified+Information+Systems+Security+Professional+Official+Study+Guide%2C+10th+Edition-p-9781394254699)
|
||||
- [@article@Destcert - CISSP Free Resources](https://destcert.com/resources/)
|
||||
- [@video@CISSP Exam Cram 2024](https://youtube.com/playlist?list=PL7XJSuT7Dq_XPK_qmYMqfiBjbtHJRWigD&si=_wSeCkvj-1rzv0ZF)
|
||||
- [@video@CISSP Prep (Coffee Shots)](https://youtube.com/playlist?list=PL0hT6hgexlYxKzBmiCD6SXW0qO5ucFO-J&si=9ICs373Vl1ce3s0H)
|
||||
|
||||
@@ -1,10 +1,48 @@
|
||||
# Cloud Skills and Knowledge
|
||||
|
||||
Cloud skills and knowledge are essential for working effectively with cloud computing technologies and services, which provide scalable, on-demand resources over the internet. Core cloud skills include understanding the architecture and types of cloud deployments, such as public, private, and hybrid clouds, as well as the major service models: Infrastructure as a Service (IaaS), Platform as a Service (PaaS), and Software as a Service (SaaS). Knowledge of cloud platforms like AWS, Microsoft Azure, and Google Cloud is crucial, along with the ability to manage virtual machines, storage, networking, and databases in a cloud environment.
|
||||
In the realm of cyber security, cloud skills and knowledge are indispensable for professionals who work with cloud-based infrastructure and services. As more organizations migrate to the cloud, the demand for cloud security expertise continues to rise. This chapter focuses on the essential cloud skills and knowledge a cyber security specialist should possess.
|
||||
|
||||
Security in the cloud is a vital skill, encompassing encryption, identity and access management (IAM), compliance, and disaster recovery. Understanding DevOps practices, containerization (using tools like Docker and Kubernetes), and serverless computing also plays a significant role in cloud operations. Additionally, familiarity with cloud-native tools for automation, monitoring, and orchestration, as well as knowledge of cloud cost optimization and performance tuning, are important for maximizing cloud efficiency and ensuring a secure, scalable infrastructure.
|
||||
## Understanding Cloud Models
|
||||
|
||||
Learn more from the following resources:
|
||||
It is fundamental for a cyber security professional to be acquainted with the different cloud service models, including:
|
||||
|
||||
- [@article@7 Cloud Computing skills to know](https://www.coursera.org/articles/cloud-computing-skills)
|
||||
- [@video@What cloud skills are essential?](https://www.youtube.com/watch?v=udKBDRcj178)
|
||||
- **IaaS (Infrastructure as a Service):** Offers virtualized computing resources over the Internet (e.g., Amazon Web Services, Microsoft Azure).
|
||||
- **PaaS (Platform as a Service):** Provides a platform for developers to build, test, and deploy applications (e.g., Google App Engine, Heroku).
|
||||
- **SaaS (Software as a Service):** Offers on-demand access to software applications over the Internet (e.g., Salesforce, Microsoft 365).
|
||||
|
||||
## Familiarity with Cloud Security Architecture
|
||||
|
||||
A comprehensive understanding of cloud security architecture enables professionals to design and implement secure cloud environments. Key aspects include:
|
||||
|
||||
- Identifying and managing risks in cloud deployments
|
||||
- Configuring and managing cloud security services
|
||||
- Applying best practices for data storage, access control, and encryption in the cloud
|
||||
|
||||
## Compliance and Legal Issues
|
||||
|
||||
Cloud security specialists must be aware of various compliance and legal requirements related to cloud data storage and processing, such as GDPR, HIPAA, and PCI-DSS.
|
||||
|
||||
## Cloud Security Tools and Technologies
|
||||
|
||||
Cyber security professionals should be proficient in using various security tools and technologies specifically designed for the cloud, including:
|
||||
|
||||
- Cloud security monitoring and management tools (e.g., AWS Security Hub, Azure Security Center)
|
||||
- Cloud-native security platforms (e.g., Palo Alto Networks Prisma, Check Point CloudGuard)
|
||||
- API security and management tools (e.g., Postman, Swagger)
|
||||
|
||||
## Cloud Identity and Access Management
|
||||
|
||||
A strong grasp of identity and access management (IAM) concepts in the cloud is crucial. This entails understanding:
|
||||
|
||||
- How to create and manage user identities and permissions
|
||||
- Implementing multi-factor authentication (MFA)
|
||||
- Understanding the differences between cloud-based and traditional IAM systems
|
||||
|
||||
## Securing Cloud Networks
|
||||
|
||||
Professionals should know the fundamentals of securing cloud networks, including:
|
||||
|
||||
- Implementing network security features such as firewalls, virtual private networks (VPNs), and intrusion detection systems
|
||||
- Segmenting cloud networks for better security
|
||||
|
||||
Overall, possessing cloud skills and knowledge prepares cyber security professionals to effectively protect and manage cloud infrastructure and applications in today's fast-paced digital landscape.
|
||||
|
||||
@@ -1,30 +1,83 @@
|
||||
# Common Commands
|
||||
|
||||
Common operating system (OS) commands are essential for interacting with a system's shell or command-line interface (CLI). These commands allow users to perform a wide range of tasks, such as navigating the file system, managing files and directories, checking system status, and administering processes. Below are some commonly used commands across Unix/Linux and Windows operating systems:
|
||||
In this guide, we will cover essential common commands you need to know when starting your journey in cyber security. By becoming proficient in these commands, you will be able to navigate, analyze, and manage different aspects of systems and networks. The list will cover command prompts, shell commands, and other tools.
|
||||
|
||||
1. **Navigating the File System:**
|
||||
- Unix/Linux: `ls` (list files), `cd` (change directory), `pwd` (print working directory)
|
||||
- Windows: `dir` (list files), `cd` (change directory), `echo %cd%` (print working directory)
|
||||
_Please note this guide assumes you already have basic knowledge of command line interfaces (CLI)_
|
||||
|
||||
2. **File and Directory Management:**
|
||||
- Unix/Linux: `cp` (copy files), `mv` (move/rename files), `rm` (remove files), `mkdir` (create directory)
|
||||
- Windows: `copy` (copy files), `move` (move/rename files), `del` (delete files), `mkdir` (create directory)
|
||||
## Operating System Commands
|
||||
|
||||
3. **System Information and Processes:**
|
||||
- Unix/Linux: `top` or `htop` (view running processes), `ps` (list processes), `df` (disk usage), `uname` (system info)
|
||||
- Windows: `tasklist` (list processes), `taskkill` (kill process), `systeminfo` (system details)
|
||||
These commands are useful for managing and understanding your operating system and its components.
|
||||
|
||||
4. **File Permissions and Ownership:**
|
||||
- Unix/Linux: `chmod` (change file permissions), `chown` (change file ownership)
|
||||
- Windows: `icacls` (modify access control lists), `attrib` (change file attributes)
|
||||
## Windows
|
||||
|
||||
5. **Network Commands:**
|
||||
- Unix/Linux: `ping` (test network connection), `ifconfig` or `ip` (network interface configuration), `netstat` (network statistics)
|
||||
- Windows: `ping` (test network connection), `ipconfig` (network configuration), `netstat` (network statistics)
|
||||
- `ipconfig`: Display the IP configuration for all network interfaces on the device.
|
||||
|
||||
These commands form the foundation of interacting with and managing an OS via the command line, providing greater control over system operations compared to graphical interfaces.
|
||||
- `netstat`: Display active network connections, listening ports, and routing tables.
|
||||
|
||||
Learn more from the following resources:
|
||||
- `systeminfo`: Display detailed information about the computer's hardware and software configuration.
|
||||
|
||||
- [@video@60 Linux commands you must know](https://www.youtube.com/watch?v=gd7BXuUQ91w)
|
||||
- [@video@Top 40 Windows commands to know](https://www.youtube.com/watch?v=Jfvg3CS1X3A)
|
||||
- `nslookup`: Look up the IP address of a domain or host.
|
||||
|
||||
- `ping`: Send a series of network packets to test network connectivity.
|
||||
|
||||
## Linux/Unix/MacOS
|
||||
|
||||
- `ifconfig`: Display the IP configuration for all network interfaces on the device.
|
||||
|
||||
- `netstat`: Display active network connections, listening ports, and routing tables.
|
||||
|
||||
- `uname -a`: Display detailed information about the operating system.
|
||||
|
||||
- `dig`: Look up the IP address of a domain or host.
|
||||
|
||||
- `ping`: Send a series of network packets to test network connectivity.
|
||||
|
||||
## File System Commands
|
||||
|
||||
These commands are useful for navigating and managing file systems on your device.
|
||||
|
||||
## Windows
|
||||
|
||||
- `dir`: List files and directories in the current directory.
|
||||
|
||||
- `cd`: Change the current directory.
|
||||
|
||||
- `copy`: Copy files from one location to another.
|
||||
|
||||
- `move`: Move files from one location to another.
|
||||
|
||||
- `del`: Delete specified files.
|
||||
|
||||
## Linux/Unix/MacOS
|
||||
|
||||
- `ls`: List files and directories in the current directory.
|
||||
|
||||
- `cd`: Change the current directory.
|
||||
|
||||
- `cp`: Copy files from one location to another.
|
||||
|
||||
- `mv`: Move files from one location to another.
|
||||
|
||||
- `rm`: Delete specified files.
|
||||
|
||||
## Network Analysis Commands
|
||||
|
||||
These commands are useful for analyzing and troubleshooting network connections.
|
||||
|
||||
- `traceroute` (Linux/Unix/MacOS) / `tracert` (Windows): Display the route and transit delay of packets across a network.
|
||||
|
||||
- `tcpdump` (Linux/Unix/MacOS) / `Wireshark` (Windows): Capture and analyze network traffic.
|
||||
|
||||
## Cyber Security Tools
|
||||
|
||||
- `nmap`: Scan networks and hosts for open ports and network services.
|
||||
|
||||
- `Metasploit`: A penetration testing framework that simplifies the discovery and exploitation of vulnerabilities.
|
||||
|
||||
- `John the Ripper`: A password-cracking tool that automatically detects and cracks multiple password formats.
|
||||
|
||||
- `Wireshark`: A network protocol analyzer that captures and analyzes network traffic.
|
||||
|
||||
- `Aircrack-ng`: A suite of tools for auditing wireless networks.
|
||||
|
||||
By familiarizing yourself with these common commands and tools, you'll have a solid foundation to build upon in your cyber security journey. As you progress, you will encounter more advanced tools and techniques, so keep learning and stay curious!
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user