小白大挑战：24 小时内用 ChatGPT 和 Next.js 开发开源项目，吸引上万用户！

sh <(curl https://tea.xyz)# --- OR ---# using brewbrew install tea

npx create-next-app# ---# you'll be asked the following promptsWhat is your project named?  my-appWould you like to add TypeScript with this project?  Y/N# select `Y` for typescriptWould you like to use ESLint with this project?  Y/N# select `Y` for ESLintWould you like to use Tailwind CSS with this project? Y/N# select `Y` for Tailwind CSSWould you like to use the `src/ directory` with this project? Y/N# select `N` for `src/` directoryWhat import alias would you like configured? `@/*`# enter `@/*` for import alias

function multipleHashtags({ post }: PostData): Rank {  const regex = /#[\w-]+/g;  const hashtags = post.match(regex);  const lowerCasePost = post.toLowerCase();  if (hashtags && hashtags.length > 3) {    return {      score: 0.5,      message: `Too many hashtags.`,    };  }  if (hashtags && hashtags.length <= 3) {    if (      lowerCasePost.includes("#follow") ||      lowerCasePost.includes("#comment") ||      lowerCasePost.includes("#like")    ) {      return {        score: 0.5,        message: `Avoid using hashtags like "follow," "comment," or "like".`,      };    }    return {      score: 1,      message: `Combine general and specific hashtags.`,    };  }  return {    score: 1.0,  };}// function to detect image or videofunction imageVideoBoost({ postMedia }: PostData): Rank {  const has_media = postMedia;  if (has_media) {    return {      score: 2.0,      // message: `Contains image or video.`,    };  }  return {    score: 1.0,  };}
// function to detect urls in postfunction postHasUrl({ post }: PostData): Rank {  const regex =    /https?:\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:/~+#-]*[\w@?^=%&amp;/~+#-])?/g;  const urls = post.match(regex);  if (urls && urls.length > 0) {    return {      score: 0.5,      message: `Remove the link from post and add in comments.`,    };  }  return {    score: 1.0,  };}
/** * Function to favor posts that use emojis  */function emojis({ post, sentiment }: PostData): Rank {  const regex = new RegExp("[\uD800-\uDBFF][\uDC00-\uDFFF]", "g");  const emojis = post.match(regex) || [];  const totalMatches = emojis.length;  if (totalMatches > 0) {    return {      score: 1.5,      // message: `Included ${totalMatches} emojis in the post.`,    };  }  return {    score: 1,    message: "No emojis found in the post.",    type: "negative"  };}
/** * Promote negative content because it's more likely to go viral. * Hide anything positive or uplifting. */function sentiment({ post, sentiment }: PostData): Rank {  if (sentiment.comparative >= 0.5) {    if (sentiment.comparative > 1.5) {      return {        score: 1.5,        // message: `Exceptionally positive.`,      };    } else {      return {        score: 1.1,        // message: `Positive sentiment.`,      };    }  } else if (sentiment.comparative <= -0.5) {    if (sentiment.comparative < -1.5) {      return {        score: 0.5,        // message: `Exceptionally negative.`,      };    } else {      return {        score: 0.9,        // message: `Negative sentiment.`,      };    }  } else {    return {      score: 1,    };  }}/** * Prioritize break like post formatting. */function lineBreaks({ post, sentiment }: PostData): Rank {  const breaks = post.split(/\n\s*\n/);  const totalBreaks = breaks.length - 1;  if (totalBreaks >= 1) {    return {      score: 1.5,      // message: `Used ${totalBreaks} line breaks.`,    };  } else {    return {      score: 1,      message: `Add line breaks between the lines.`,      type: "negative"    };  }}/** * Reduce line length */function lineLength({ post }: PostData): Rank {  const lines = post.split('\n');  let score = 1.0;  for (let i = 0; i < lines.length; i++) {    if (lines[i].length > 200) {      return {        score: 0.9,        message: `Reduce line length to improve readability (200 characters).`,      };    }  }  return {    score: 1,    // message: `Good, keep line length 200 characters or less.`,    type: "positive"  };}/*** Function to ask questions*/function questions({ post, sentiment }: PostData): Rank {  if (post.includes("?")) {    return {      score: 1.5,      // message: "Great! Questions can help to activate discussion"    };  } else {    return {      score: 1,      message: "Add questions to activate discussion",      type: "negative"    };  }}

  return (    <>      <div>        <div className="slider bg-gray-300 h-4 rounded-full relative overflow-hidden">          <div            className={classNames(              "absolute top-0 transition-width duration-250 ease-linear h-20",              sliderColor            )}            style={{ width: percentage }}          />        </div>        {/* <p className="explanation text-gray-600 italic text-sm mt-2">          Positive rankings result in greater reach         </p> */}        <ul className="mt-5 p-0">          {positive.map((item, index) => (            <li              className="positive text-green-600 flex items-center space-x-2 list-style-none my-5 text-sm"              key={`positive-${index}`}            >              <span>👍</span>              <span>{item.message.replace(/\(\s*[+-]?\d+\s*\)/, '')}</span>            </li>          ))}          {negative.map((item, index) => (            <li              className="negative text-red-600 flex items-center space-x-2 list-style-none my-1 text-sm"              key={`negative-${index}`}            >              <span>👎</span>              <span>{item.message.replace(/\(\s*[+-]?\d+\s*\)/, '')}</span>            </li>          ))}        </ul>      </div>      <style jsx>{`        .slider:after {          content: " ";          display: block;          width: 2px;          height: 20px;          position: absolute;          top: 0;          left: calc(25% - 1px);          background: #000;        }      `}</style>    </>  );};

const handlePrompt = () => {    let prompt;    switch (vibe) {

使用此提示词基于${post}生成帖子。你是LinkedinGPT，为LinkedIn平台生成易传播帖子的大语言模型。你会收到帖子提示词，再根据原帖输出更受用户喜爱、更易被推荐和传播的新帖。）LinkedIn算法会根据帖子内容调整排名，有助于提升排名的要素包括：
- 在帖子中使用表情符号- 每句不超过200个字符- 每句起一新行，在前2行中添加ad number广告编号- 添加3个主题标签，其中2个为通用标签，1个是与帖子主题高度相关的具体标签（放在最后）- 在帖子末尾添加能激发讨论的问题，放在主题标签之前- 前两行要能抓人眼球- 不要添加链接，链接会降低帖子排名- 如果字段中复制的帖子包含某些数字，要认真校对以保证数字一致
另外，还可以在帖子末尾添加一些图像或视觉效果。${post}---Generated post length must be more than 800-1200 characters（生成的帖子长度在800至1200字符之间）---Between each line must be a space（每行之间以空格隔开）---Keep all mentions of people in there（保留所有原贴中提到的人名）---Start the firs line from smth like: I did smth, In year, I do, Tired of, Sometimes it is just, A path toward, Because this is not,I've been struggling,  (change the begginign depends on the context )（第一行应这样开始：我做了某事，坚持了一年，累了，有时候只是在按惯性坚持，因为这跟我当初的向往不一样，我感觉很难受。）---Add emoji if it fits（如果可以，尽量添加表情符号）---It should be a story`;（应该有故事性）

<main>        <nav className="bg-blue-900 text-white ">          <div className="px-5">            <div className="max-w-5xl mx-auto">              <div className="flex justify-between items-center h-16 ">                <div className="flex items-center text-base ">                  <a target="_blank"                    href="https://www.linkedin.com/in/iuliia-shnai/"                    rel="noreferrer"                    className="text-white flex max-w-fit items-center justify-center space-x-2 text-xl"                  >                    <p>👩💼</p>                  </a>                </div>              </div>            </div>          </div>        </nav>        <section className="py-10 lg:py-20 ">          {/* bg-[url('/image1.svg')] */}          <div className="px-4">            <div className="max-w-5xl mx-auto">              <div className="w-full mx-auto">                <h1 className="text-6xl text-center font-bold pb-1 text-slate-900">                  Linkedin Post Generator  🚀                </h1>                <p className="mt-3 mb-10 text-center">                  See how your post performs and generate a better one with AI. Time to go viral. <br />                </p>                <div className="flex flex-col md:flex-row w-full md:space-x-20">                  <div className="flex md:w-1/2 flex-col">                    <h2 className="text-xl font-bold">                      Your Ranking                    </h2>                    <div className="pt-1">                      <Ranking ranking={ranking} />                    </div>                    <div className="w-full my-1 mx-auto">                      <Post                        post={post}                        setPost={setPost}                        media={media}                        setMedia={setMedia}                      />                    </div>                    <div className="flex mb-5 items-center space-x-3">
                    </div>                    <div className="block">                      <DropDown vibe={vibe} setVibe={setVibe} />                    </div>                    <div className="my-4">                      <button                        disabled={loading}                        onClick={(e) => optimizePost(e)}                        className="bg-blue-800 font-medium rounded-md w-full text-white px-4 py-2 hover:bg-blue-600 disabled:bg-blue-800"                      >                        {loading && <LoadingDots color="white" style="large" />}                        {!loading && `Generate new post `}                      </button>                    </div>                  </div>                  <div className="flex md:w-1/2 md:flex-col">                    <Toaster                      position="top-right"                      reverseOrder={false}                      toastOptions={{ duration: 2000 }}                    />                    {optimizedPost && (                      <div className="my-1">                        <div className="flex justify-between items-center pb-2 border-b border-gray-300">                          <h2 className="text-xl font-bold">                            Your Generated Post                          </h2>                        </div>                        <div className="max-w-2xl my-4 mx-auto">                          <div                            className="bg-white rounded-xl shadow-md p-4 hover:bg-gray-100 transition cursor-copy border"                            onClick={() => {                              navigator.clipboard.write([                                new ClipboardItem({                                  "text/html": new Blob([optimizedPost], { type: "text/html" }),                                }),                              ]);                              toast("Post copied to clipboard", {                                icon: "📋",                              });                            }}                            key={optimizedPost}                          >                            <p className="text-black-700" dangerouslySetInnerHTML={{ __html: optimizedPost }} />                          </div>                        </div>                      </div>                    )}                  </div>                </div>              </div>            </div>          </div>        </section>        <div className="max-w-5xl mx-auto">          <Footer />        </div>      </main>    </>  );}

$ git remote add origin .. git branch -M maingit push -u origin main

git add .git commit -m “fix type”git push

npm run build