fix(featured): updating featured scripts

apps/scriptkit/featured.json

@@ -1,26 +1,26 @@
 [
   {
-    "user": "johnlindquist",
-    "command": "giphy-search"
+    "user": "kentcdodds",
+    "command": "new-post"
   },
   {
     "user": "johnlindquist",
-    "command": "image-resize"
+    "command": "giphy-search"
   },
   {
-    "user": "johnlindquist",
-    "command": "center-app"
+    "user": "laura-ok",
+    "command": "natural-language-shell-command"
   },
   {
-    "user": "johnlindquist",
-    "command": "reddit"
+    "user": "mabry1985",
+    "command": "prompt-anywhere-v2"
   },
   {
-    "user": "johnlindquist",
-    "command": "book-search"
+    "user": "kentcdodds",
+    "command": "extract-text-from-images"
   },
   {
     "user": "johnlindquist",
-    "command": "app-launcher"
+    "command": "image-resize"
   }
 ]

apps/scriptkit/src/components/scripts/card.tsx

@@ -29,7 +29,7 @@ const ScriptCard: FunctionComponent<
             <div className="flex items-start px-6 pt-6">
               <div className="flex-grow">
                 <h2 className="md:text-2xl text-xl font-bold leading-tight">
-                  {script.command}
+                  {script.title}
                 </h2>
                 {withAuthor && (
                   <div className="flex space-x-2 font-xs text-sm opacity-70">

apps/scriptkit/src/pages/index.tsx

@@ -186,6 +186,10 @@ const Home: FunctionComponent<React.PropsWithChildren<HomeProps>> = ({
             <div className="pt-10">
               <h3 className="text-3xl font-bold">Key Features</h3>
               <ul>
+                <li className="pt-3">
+                  <span className="pr-3 text-yellow-300 text-lg">▪︎</span>
+                  Write your scripts in TypeScript with our SDK. Zero config.
+                </li>
                 <li className="pt-3">
                   <span className="pr-3 text-yellow-300 text-lg">▪︎</span>
                   Launch the prompt from anywhere as part of your flow
@@ -214,9 +218,9 @@ const Home: FunctionComponent<React.PropsWithChildren<HomeProps>> = ({
                 </li>
                 <li className="pt-3">
                   <span className="pr-3 text-yellow-300 text-lg">▪︎</span>
-                  Load npm libraries:{''}
+                  Watches your scripts and prompts to install npm libraries:{''}
                   <code className="whitespace-nowrap font-mono text-sm bg-yellow-500 bg-opacity-10 py-1 rounded-md text-yellow-300 px-2 ml-2">
-                    await npm("sharp")
+                    import express from "express"
                   </code>
                 </li>
                 <li className="pt-3">
@@ -337,10 +341,27 @@ export async function getStaticProps(context: any) {
 
   const scripts = await getAllScripts()
 
-  const featuredScripts = scripts.filter((s) => {
-    return selectedScripts.find(
-      (ss) => ss.user === s.user && ss.command === s.command,
+  const featuredScriptsSet = new Set(
+    selectedScripts.map((ss) => `${ss.user}/${ss.command}`),
+  )
+  const featuredScripts = []
+  for (const script of scripts) {
+    const scriptIdentifier = `${script.user}/${script.command}`
+    if (featuredScriptsSet.has(scriptIdentifier)) {
+      featuredScripts.push(script)
+      featuredScriptsSet.delete(scriptIdentifier) // Ensure uniqueness
+    }
+  }
+
+  // Sort featuredScripts by order in selectedScripts
+  featuredScripts.sort((a, b) => {
+    const aIndex = selectedScripts.findIndex(
+      (ss) => ss.user === a.user && ss.command === a.command,
+    )
+    const bIndex = selectedScripts.findIndex(
+      (ss) => ss.user === b.user && ss.command === b.command,
     )
+    return aIndex - bIndex
   })
 
   const testimonials = await getTestimonials()