Merge pull request #129 from kamranahmedse/master

Create a new pull request by comparing changes across two branches

Author: GulajavaMinistudio

.astro/settings.json

@@ -0,0 +1,5 @@
+{
+	"devToolbar": {
+		"enabled": false
+	}
+}

astro.config.mjs

@@ -29,7 +29,7 @@ export default defineConfig({
               'mailto:',
               'https://github.com/kamranahmedse',
               'https://thenewstack.io',
-              'https://cs.fyi',
+              'https://kamranahmed.info',
               'https://roadmap.sh',
             ];
             if (whiteListedStarts.some((start) => href.startsWith(start))) {

public/best-practices/backend-performance.png

@@ -74,8 +74,9 @@ Here is the list of available roadmaps with more being actively worked upon.
 
 There are also interactive best practices:
 
-- [Code Review Best Practices](https://roadmap.sh/best-practices/code-review)
+- [Backend Performance Best Practices](https://roadmap.sh/best-practices/backend-performance)
 - [Frontend Performance Best Practices](https://roadmap.sh/best-practices/frontend-performance)
+- [Code Review Best Practices](https://roadmap.sh/best-practices/code-review)
 - [API Security Best Practices](https://roadmap.sh/best-practices/api-security)
 - [AWS Best Practices](https://roadmap.sh/best-practices/aws)
 

public/og-images/best-practices/backend-performance.png

@@ -4,11 +4,7 @@ const path = require('path');
 const OPEN_AI_API_KEY = process.env.OPEN_AI_API_KEY;
 const ALL_BEST_PRACTICES_DIR = path.join(
   __dirname,
-  '../src/data/best-practices'
-);
-const BEST_PRACTICE_JSON_DIR = path.join(
-  __dirname,
-  '../public/jsons/best-practices'
+  '../src/data/best-practices',
 );
 
 const bestPracticeId = process.argv[2];
@@ -29,15 +25,14 @@ if (!allowedBestPracticeIds.includes(bestPracticeId)) {
 const BEST_PRACTICE_CONTENT_DIR = path.join(
   ALL_BEST_PRACTICES_DIR,
   bestPracticeId,
-  'content'
+  'content',
 );
-const { Configuration, OpenAIApi } = require('openai');
-const configuration = new Configuration({
+const OpenAI = require('openai');
+
+const openai = new OpenAI({
   apiKey: OPEN_AI_API_KEY,
 });
 
-const openai = new OpenAIApi(configuration);
-
 function getFilesInFolder(folderPath, fileList = {}) {
   const files = fs.readdirSync(folderPath);
 
@@ -62,13 +57,19 @@ function getFilesInFolder(folderPath, fileList = {}) {
 }
 
 function writeTopicContent(topicTitle) {
-  let prompt = `I am reading a guide that has best practices about "${bestPracticeTitle}". I want to know more about "${topicTitle}". Write me a brief introductory paragraph about this and some tips on how I make sure of this? Behave as if you are the author of the guide.`;
+  let prompt = `I will give you a topic and you need to write a brief paragraph with examples (if possible) about why it is important for the "${bestPracticeTitle}". Just reply to the question without adding any other information about the prompt and use simple language. Also do not start your sentences with "XYZ is important because..". Your format should be as follows:
+
+# (Put a heading for the topic)
+
+(Write a brief paragraph about why it is important for the "${bestPracticeTitle})
+ 
+First topic is: ${topicTitle}`;
 
   console.log(`Generating '${topicTitle}'...`);
 
   return new Promise((resolve, reject) => {
-    openai
-      .createChatCompletion({
+    openai.chat.completions
+      .create({
         model: 'gpt-4',
         messages: [
           {
@@ -78,7 +79,7 @@ function writeTopicContent(topicTitle) {
         ],
       })
       .then((response) => {
-        const article = response.data.choices[0].message.content;
+        const article = response.choices[0].message.content;
 
         resolve(article);
       })
@@ -90,9 +91,12 @@ function writeTopicContent(topicTitle) {
 
 async function writeFileForGroup(group, topicUrlToPathMapping) {
   const topicId = group?.properties?.controlName;
-  const topicTitle = group?.children?.controls?.control?.find(
-    (control) => control?.typeID === 'Label'
-  )?.properties?.text;
+  const topicTitle = group?.children?.controls?.control
+    ?.filter((control) => control?.typeID === 'Label')
+    .map((control) => control?.properties?.text)
+    .join(' ')
+    .toLowerCase();
+
   const currTopicUrl = `/${topicId}`;
   if (currTopicUrl.startsWith('/check:')) {
     return;
@@ -102,7 +106,6 @@ async function writeFileForGroup(group, topicUrlToPathMapping) {
 
   if (!contentFilePath) {
     console.log(`Missing file for: ${currTopicUrl}`);
-    process.exit(0);
     return;
   }
 
@@ -123,8 +126,13 @@ async function writeFileForGroup(group, topicUrlToPathMapping) {
     return;
   }
 
+  if (!topicTitle) {
+    console.log(`Skipping ${topicId}. No title.`);
+    return;
+  }
+
   const topicContent = await writeTopicContent(topicTitle);
-  newFileContent += `\n\n${topicContent}`;
+  newFileContent = `${topicContent}`;
 
   console.log(`Writing ${topicId}..`);
   fs.writeFileSync(contentFilePath, newFileContent, 'utf8');
@@ -138,14 +146,14 @@ async function writeFileForGroup(group, topicUrlToPathMapping) {
 async function run() {
   const topicUrlToPathMapping = getFilesInFolder(BEST_PRACTICE_CONTENT_DIR);
 
-  const bestPracticeJson = require(path.join(
-    BEST_PRACTICE_JSON_DIR,
-    `${bestPracticeId}.json`
-  ));
+  const bestPracticeJson = require(
+    path.join(ALL_BEST_PRACTICES_DIR, `${bestPracticeId}/${bestPracticeId}`),
+  );
+
   const groups = bestPracticeJson?.mockup?.controls?.control?.filter(
     (control) =>
       control.typeID === '__group__' &&
-      !control.properties?.controlName?.startsWith('ext_link')
+      !control.properties?.controlName?.startsWith('ext_link'),
   );
 
   if (!OPEN_AI_API_KEY) {

public/pdfs/best-practices/backend-performance.pdf

@@ -5,7 +5,7 @@ const CONTENT_DIR = path.join(__dirname, '../content');
 // Directory containing the best-practices
 const BEST_PRACTICE_CONTENT_DIR = path.join(
   __dirname,
-  '../src/data/best-practices'
+  '../src/data/best-practices',
 );
 const bestPracticeId = process.argv[2];
 
@@ -33,18 +33,18 @@ if (!bestPracticeDirName) {
 
 const bestPracticeDirPath = path.join(
   BEST_PRACTICE_CONTENT_DIR,
-  bestPracticeDirName
+  bestPracticeDirName,
 );
 const bestPracticeContentDirPath = path.join(
   BEST_PRACTICE_CONTENT_DIR,
   bestPracticeDirName,
-  'content'
+  'content',
 );
 
 // If best practice content already exists do not proceed as it would override the files
 if (fs.existsSync(bestPracticeContentDirPath)) {
   console.error(
-    `Best Practice content already exists @ ${bestPracticeContentDirPath}`
+    `Best Practice content already exists @ ${bestPracticeContentDirPath}`,
   );
   process.exit(1);
 }
@@ -88,10 +88,12 @@ function prepareDirTree(control, dirTree) {
   return { dirTree };
 }
 
-const bestPractice = require(path.join(
-  __dirname,
-  `../public/jsons/best-practices/${bestPracticeId}`
-));
+const bestPractice = require(
+  path.join(
+    __dirname,
+    `../src/data/best-practices/${bestPracticeId}/${bestPracticeId}`,
+  ),
+);
 const controls = bestPractice.mockup.controls.control;
 
 // Prepare the dir tree that we will be creating

readme.md

@@ -52,7 +52,7 @@ export function ActivityPage() {
 
   async function loadActivity() {
     const { error, response } = await httpGet<ActivityResponse>(
-      `${import.meta.env.PUBLIC_API_URL}/v1-get-user-stats`
+      `${import.meta.env.PUBLIC_API_URL}/v1-get-user-stats`,
     );
 
     if (!response || error) {
@@ -79,6 +79,25 @@ export function ActivityPage() {
     return null;
   }
 
+  const learningRoadmapsToShow = learningRoadmaps
+    .sort((a, b) => {
+      const updatedAtA = new Date(a.updatedAt);
+      const updatedAtB = new Date(b.updatedAt);
+
+      return updatedAtB.getTime() - updatedAtA.getTime();
+    })
+    .filter((roadmap) => roadmap.learning > 0 || roadmap.done > 0);
+
+  const learningBestPracticesToShow = learningBestPractices
+    .sort((a, b) => {
+      const updatedAtA = new Date(a.updatedAt);
+      const updatedAtB = new Date(b.updatedAt);
+
+      return updatedAtB.getTime() - updatedAtA.getTime();
+    })
+    .filter((bestPractice) => bestPractice.learning > 0 || bestPractice.done > 0);
+
+
   return (
     <>
       <ActivityCounters
@@ -88,10 +107,10 @@ export function ActivityPage() {
       />
 
       <div className="mx-0 px-0 py-5 md:-mx-10 md:px-8 md:py-8">
-        {learningRoadmaps.length === 0 &&
-          learningBestPractices.length === 0 && <EmptyActivity />}
+        {learningRoadmapsToShow.length === 0 &&
+          learningBestPracticesToShow.length === 0 && <EmptyActivity />}
 
-        {(learningRoadmaps.length > 0 || learningBestPractices.length > 0) && (
+        {(learningRoadmapsToShow.length > 0 || learningBestPracticesToShow.length > 0) && (
           <>
             <h2 className="mb-3 text-xs uppercase text-gray-400">
               Continue Following
@@ -104,26 +123,38 @@ export function ActivityPage() {
 
                   return updatedAtB.getTime() - updatedAtA.getTime();
                 })
-                .map((roadmap) => (
-                  <ResourceProgress
-                    key={roadmap.id}
-                    isCustomResource={roadmap.isCustomResource}
-                    doneCount={roadmap.done || 0}
-                    learningCount={roadmap.learning || 0}
-                    totalCount={roadmap.total || 0}
-                    skippedCount={roadmap.skipped || 0}
-                    resourceId={roadmap.id}
-                    resourceType={'roadmap'}
-                    updatedAt={roadmap.updatedAt}
-                    title={roadmap.title}
-                    onCleared={() => {
-                      pageProgressMessage.set('Updating activity');
-                      loadActivity().finally(() => {
-                        pageProgressMessage.set('');
-                      });
-                    }}
-                  />
-                ))}
+                .filter((roadmap) => roadmap.learning > 0 || roadmap.done > 0)
+                .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.id}
+                      isCustomResource={roadmap.isCustomResource}
+                      doneCount={
+                        doneCount > totalCount ? totalCount : doneCount
+                      }
+                      learningCount={
+                        learningCount > totalCount ? totalCount : learningCount
+                      }
+                      totalCount={totalCount}
+                      skippedCount={skippedCount}
+                      resourceId={roadmap.id}
+                      resourceType={'roadmap'}
+                      updatedAt={roadmap.updatedAt}
+                      title={roadmap.title}
+                      onCleared={() => {
+                        pageProgressMessage.set('Updating activity');
+                        loadActivity().finally(() => {
+                          pageProgressMessage.set('');
+                        });
+                      }}
+                    />
+                  );
+                })}
 
               {learningBestPractices
                 .sort((a, b) => {
@@ -132,6 +163,10 @@ export function ActivityPage() {
 
                   return updatedAtB.getTime() - updatedAtA.getTime();
                 })
+                .filter(
+                  (bestPractice) =>
+                    bestPractice.learning > 0 || bestPractice.done > 0,
+                )
                 .map((bestPractice) => (
                   <ResourceProgress
                     isCustomResource={bestPractice.isCustomResource}

scripts/best-practice-content.cjs

@@ -48,10 +48,11 @@ const {
   {
     isNew && (
       <span class='absolute bottom-1.5 right-2 flex items-center rounded-br rounded-tl text-xs font-medium text-purple-300'>
-        <span class='flex h-2 w-2'>
+        <span class='mr-1.5 flex h-2 w-2'>
           <span class='absolute inline-flex h-2 w-2 animate-ping rounded-full bg-purple-400 opacity-75' />
           <span class='relative inline-flex h-2 w-2 rounded-full bg-purple-500' />
         </span>
+        New
       </span>
     )
   }