├── .env.example ├── .eslintrc.json ├── .github └── FUNDING.yml ├── .gitignore ├── .vscode └── settings.json ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── app ├── [...slug] │ └── page.tsx ├── api │ └── hello │ │ └── route.ts ├── favicon.ico ├── globals.css ├── layout.tsx ├── page.tsx └── posts │ └── [...slug] │ └── page.tsx ├── components ├── analytics.tsx ├── mdx-components.tsx ├── mode-toggle.tsx └── theme-provider.tsx ├── content ├── pages │ └── about.mdx └── posts │ ├── a-comprehensive-guide-to-creating-apps-with-nextjs.mdx │ ├── a-comprehensive-guide-to-react-essentials.mdx │ ├── getting-started-with-nextjs-a-guide-to-the-react-framework.mdx │ ├── getting-started-with-nextjs-an-easy-to-follow-guide.mdx │ ├── getting-started-with-nextjs-unleash-the-power-of-server-side-rendering.mdx │ ├── harness-the-power-of-nextjs-for-your-web-projects.mdx │ ├── introduction-to-python.mdx │ ├── mastering-the-basics-of-react-get-started-with-react-essentials.mdx │ ├── maximizing-your-nextjs-app-5-tips-to-get-the-most-out-of-the-framework.mdx │ ├── python-control-structures.mdx │ ├── python-data-types-and-variables.mdx │ ├── python-exception-handling.mdx │ ├── python-file-io.mdx │ ├── python-functions.mdx │ ├── python-libraries-and-frameworks.mdx │ ├── python-modules-and-packages.mdx │ ├── python-object-oriented-programming.mdx │ ├── python-project-best-practices.mdx │ └── the-beginners-guide-to-essential-react-practices.mdx ├── contentlayer.config.js ├── next.config.js ├── package-lock.json ├── package.json ├── pnpm-lock.yaml ├── postcss.config.js ├── public ├── next.svg └── vercel.svg ├── scripts └── generate.js ├── settings.json ├── tailwind.config.js └── tsconfig.json /.env.example: -------------------------------------------------------------------------------- 1 | OPENAI_API_KEY= 2 | VERCEL_TOKEN= 3 | UNSPLASH_ACCESS_KEY= -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: anis-marrouchi -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env*.local 29 | .env 30 | # vercel 31 | .vercel 32 | 33 | # typescript 34 | *.tsbuildinfo 35 | next-env.d.ts 36 | .contentlayer 37 | 38 | # custom 39 | content/archives -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "node_modules/.pnpm/typescript@5.0.4/node_modules/typescript/lib", 3 | "typescript.enablePromptUseWorkspaceTsdk": true 4 | } -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Code of Conduct for AI Prompt Builder 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open, welcoming, and inclusive environment, we, as contributors and maintainers, pledge to make participation in our project and our community a harassment-free experience for everyone. 6 | 7 | ## Our Standards 8 | 9 | Examples of behavior that contribute to creating a positive environment include: 10 | 11 | - Using welcoming and inclusive language 12 | - Being respectful of differing viewpoints and experiences 13 | - Gracefully accepting constructive criticism 14 | - Focusing on what is best for the community 15 | - Showing empathy towards other community members 16 | 17 | Examples of unacceptable behavior by participants include: 18 | 19 | - The use of sexualized language or imagery and unwelcome sexual attention or advances 20 | - Trolling, insulting or derogatory comments, and personal or political attacks 21 | - Public or private harassment 22 | - Publishing others' private information, such as a physical or electronic address, without explicit permission 23 | - Other conduct which could reasonably be considered inappropriate in a professional setting 24 | 25 | ## Our Responsibilities 26 | 27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. 28 | 29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned with this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. 30 | 31 | ## Scope 32 | 33 | This Code of Conduct applies to all project spaces, including the repository, issue tracker, and any other communication channels used by the project. It also applies when representing the project or its community in public spaces or events. 34 | 35 | ## Enforcement 36 | 37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at anismarrouchi@hotmail.com. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. 38 | 39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. 40 | 41 | ## Attribution 42 | 43 | This Code of Conduct is adapted from the [Contributor Covenant](https://www.contributor-covenant.org), version 1.4, available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html. 44 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to AI CONTENT 2 | 3 | Thank you for your interest in contributing to AI Content! We appreciate your efforts and welcome any improvements to the project. This document provides guidelines and instructions for contributing to the project. 4 | 5 | ## Code of Conduct 6 | 7 | Before you start contributing, please read and adhere to our [Code of Conduct](./CODE_OF_CONDUCT.md). We expect all contributors to follow these guidelines to ensure a positive and inclusive environment. 8 | 9 | ## How to Contribute 10 | 11 | 1. **Fork the repository:** Create a fork of the AI Prompt Builder repository on your own GitHub account. 12 | 13 | 2. **Clone the forked repository:** Clone the forked repository to your local machine. 14 | 15 | ``` 16 | git clone https://github.com/YOUR_USERNAME/ai-prompt-builder.git 17 | ``` 18 | 19 | 20 | 3. **Create a new branch:** Create a new branch for your changes. Use a descriptive name that reflects the changes you're making. 21 | 22 | ``` 23 | git checkout -b my-feature-branch 24 | ``` 25 | 26 | 27 | 4. **Make your changes:** Implement the changes, enhancements, or bug fixes you want to contribute to the project. 28 | 29 | 5. **Commit your changes:** Use clear and concise commit messages that describe the changes you've made. 30 | 31 | ``` 32 | git add . 33 | git commit -m "Add a brief description of your changes" 34 | ``` 35 | 36 | 6. **Pull the latest changes from the main repository:** Before submitting a pull request, ensure that your branch is up-to-date with the latest changes in the main repository. 37 | 38 | ``` 39 | git pull origin main 40 | 41 | ``` 42 | 43 | 7. **Push your changes to your forked repository:** Push your changes to your fork on GitHub. 44 | 45 | ``` 46 | git push origin my-feature-branch 47 | 48 | ``` 49 | 50 | 8. **Create a pull request:** Open a pull request from your forked repository to the main AI Prompt Builder repository. Provide a clear description of your changes and any additional context that might be helpful for reviewers. 51 | 52 | ## Coding Style 53 | 54 | - Follow the established coding style and best practices for the programming languages and frameworks used in the project. 55 | - Keep the code clean, modular, and well-documented. 56 | - Include comments where necessary to clarify complex or non-intuitive code. 57 | 58 | ## Reporting Bugs and Requesting Features 59 | 60 | Please use the GitHub issue tracker to report bugs or request new features. Provide as much information as possible, including steps to reproduce the issue and any relevant error messages or screenshots. 61 | 62 | ## Questions or Support 63 | 64 | If you have any questions or need support, please reach out to the maintainers via the project's communication channels (e.g., email, Slack, etc.). 65 | 66 | Thank you for your contributions, and we look forward to improving AI Prompt Builder together! 67 | 68 | 69 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) Anis Marrouchi 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # AI-CONTENT 3 | AI-Content is a AI-Powered Next.js Blog Generator and easy-to-use solution for creating dynamic, high-quality blog content using cutting-edge artificial intelligence technology. This project combines the flexibility and performance of the Next.js framework with advanced language models to provide users with an innovative way to generate blog articles tailored to their specific needs. 4 | 5 | ## Features: 6 | AI-driven content generation: Leverage the power of advanced language models to create engaging, relevant, and informative blog articles on a wide range of subjects. 7 | 8 | - Next.js blog template: A modern, responsive, and SEO-friendly blog template built using the Next.js framework, allowing for fast and scalable content delivery. 9 | 10 | - Customizable settings: Adjust various properties like tone, subject, type, and language to tailor the generated content to your specific requirements. 11 | 12 | - Predefined or custom content generation: Choose between selling the blog with a set number of AI-generated articles or providing customers with the AI script for generating their own content. 13 | 14 | ## Usage: 15 | This project is perfect for bloggers, content creators, digital marketers, and businesses looking for an innovative solution to generate high-quality blog content. By harnessing the power of AI and the Next.js framework, users can quickly and easily populate their blogs with engaging, relevant, and informative content, tailored to their unique audience and requirements. 16 | 17 | ## Getting Started 18 | Follow the steps below to get started with the AI-Powered Next.js Blog Generator: 19 | ### Prerequisites: 20 | - Node.js (v12 or higher) installed on your local machine 21 | 22 | - pnpm the Fast, disk space efficient package manage 23 | 24 | - An OpenAI API key for accessing the language model 25 | 26 | - Unsplash API key to generate the cover image 27 | 28 | To use Unsplash for generating cover images for your articles, you'll need to get an API key. 29 | 30 | ### Step 1: Clone the repository 31 | Clone the AI-Content repository to your local machine by running the following command in your terminal or command prompt: 32 | ``` 33 | git clone https://github.com/nooqta/ai-content.git 34 | ``` 35 | ### Step 2: Install dependencies 36 | Navigate to the project folder and install the necessary dependencies by running the following commands: 37 | ``` 38 | cd ai-content 39 | pnpm install 40 | ``` 41 | 42 | ### Step 3: Set up the environment 43 | Create a .env file in the project's root directory and add your OpenAI API key: 44 | ``` 45 | OPENAI_API_KEY=your_openai_api_key 46 | UNSPLASH_ACCESS_KEY=your_unsplash_access_key 47 | ``` 48 | ### Step 4: Configure settings 49 | 50 | Edit the `settings.json` file in the project folder to customize the properties for generating blog articles, such as the type, length, domain, tone, and language. 51 | Here's a list of properties with brief descriptions for can further customize to fine-tune the content of your article: 52 | 53 | 1. **domain** (required): The domain or field of expertise for the generated content, such as "AI," "Environmental Science," or "Healthcare." It helps the AI model generate content that is relevant and accurate to the chosen field. 54 | 2. **type** (optional): The type of content you want to generate, such as "Informative," "Persuasive," or "Entertaining." It helps the AI model understand the primary objective of the generated article. 55 | 56 | 3. **task** (optional): Specifies the writing task, like "Article Writing," "Blog Post Writing," or "Tutorial Writing." It guides the AI model in generating content that aligns with the desired format. 57 | 58 | 4. **tone** (optional): The tone of voice for the generated content, such as "Neutral," "Formal," "Friendly," or "Passionate." It instructs the AI model on how to convey the information in the article. 59 | 60 | 5. **length** (optional): Determines the approximate length of the generated content, like "Short," "Medium," or "Long." It assists the AI model in generating articles of the desired size. 61 | 6. **topic** (optional): The specific subject or theme of the generated content. It guides the AI model in generating content that focuses on the chosen topic. 62 | 7. **lang** (optional): The language in which the content should be generated, like "English," "Spanish," or "French." It ensures the AI model generates content in the desired language. 63 | 64 | 8. **skill** (optional): The skill level of the writer, such as "Beginner," "Intermediate," or "Advanced." It helps the AI model generate content that matches the expected skill level and style. 65 | 66 | 9. **numArticles** (optional): The number of articles you want to generate. It informs the script how many articles to create using the provided settings. 67 | 68 | ### Step 5: Generate blog articles 69 | Run the following command in the terminal or command prompt to start generating blog articles using the AI-powered script: 70 | ``` 71 | npm run generate 72 | ``` 73 | Remember, only the `domain` property is required. The other properties are optional and can be adjusted to meet your specific requirements. 74 | 75 | The generated articles will be saved in the content/posts folder with the article title as the file name and a .mdx extension. 76 | 77 | ### Step 6: Run the Next.js blog template 78 | To run the Next.js blog template locally, use the following command: 79 | ``` 80 | npm run dev 81 | ``` 82 | This will start the development server, and you can view your blog by opening http://localhost:3000 in your web browser. 83 | 84 | #### Step 7: Deploy your blog 85 | When you're ready to deploy your blog, follow the official Next.js deployment guide for your preferred hosting platform. 86 | 87 | And that's it! You now have a fully functional AI-Powered Next.js Blog Generator. Enjoy creating engaging, high-quality content with the power of artificial intelligence and the flexibility of the Next.js framework. 88 | 89 | ## Future Features 90 | 91 | Here are some exciting features we're planning to add to the project in the future: 92 | 93 | 1. **Automated Article Generation**: Implement a Vercel cron job to automate the process of creating articles on a timely basis. This feature will allow you to schedule article generation and automatically publish new content on your blog. 94 | 95 | 2. **Langchain Integration**: Harness the power of agents, chains, and tools from Langchain to expand the capabilities of the project, such as: 96 | 97 | - Generating drafts for research papers based on reference papers from arXiv.org. 98 | - Creating blog posts inspired by Wikipedia articles. 99 | - Exploring endless possibilities for generating unique and engaging content. 100 | 3. **Text-to-Speech Audio**: Integrate Elvenlab API to generate text-to-speech audio files for each article, providing an alternative way for users to consume content on your blog. This feature will improve the accessibility of your content and enhance the overall user experience. 101 | 102 | 103 | As the project evolves, we'll continue to explore new ways to make content generation more efficient, engaging, and versatile. Stay tuned for updates! 104 | ## Credits 105 | 106 | This project was made possible thanks to the invaluable contributions and tools provided by the following: 107 | 108 | - **[Vercel](https://nextjs.org/)**: For providing the wonderful Next.js framework and hosting the project. 109 | - **[OpenAI](https://openai.com/)**: For their powerful AI models that generate the content. 110 | - **[Next-ContentLayer](https://github.com/shadcn/next-contentlayer)**: for providing the theme. 111 | - **[ContentLayer](https://www.contentlayer.dev/)**: For streamlining the process of creating blog articles using .mdx. 112 | - **[MDX](https://mdxjs.com/)**: For allowing the seamless integration of React components, HTML, and Markdown in a single file. 113 | - **[Tailwind](https://tailwindcss.com/)**: An utility-first CSS framework that enables rapid building of beautiful and responsive designs. 114 | - **[Langchain](https://docs.langchain.com/docs/)**: For their support in helping build a project powered by advanced language models. 115 | - **[llElevenLabs](https://beta.elevenlabs.io/speech-synthesis)**: For simplifying the process generating speech audio from text (TTS). 116 | - **[Unsplash](https://unsplash.com/)**: For providing the beautiful cover images of the articles. 117 | We would like to express our gratitude to these organizations and projects for their significant contributions to the development and success of this project. 118 | 119 | ## Contributing 120 | 121 | We welcome contributions from the community to help improve and expand this project. If you're interested in contributing, please refer to the [CONTRIBUTION.md](CONTRIBUTION.md) file for guidelines on how to get started, including information on: 122 | 123 | - Reporting bugs and submitting feature requests 124 | - Setting up your development environment 125 | - Submitting pull requests 126 | - Adhering to the project's coding style and best practices 127 | 128 | Together, we can make this project even better and more useful for everyone. Thank you for considering to contribute! 129 | 130 | ## License 131 | 132 | This project is licensed under the MIT License. The MIT License is a permissive free software license, which means you have the freedom to use, modify, distribute, and even sell the software, as long as you provide attribution back to the original author. 133 | 134 | For more information on the terms and conditions of the MIT License, please see the [LICENSE](LICENSE) file in the project repository or visit [https://opensource.org/licenses/MIT](https://opensource.org/licenses/MIT). 135 | 136 | ## Sponsoring 137 | 138 | If you find this project helpful and would like to support its development and maintenance, please consider becoming a sponsor. Your sponsorship will help us continue to improve the project and add new features, benefiting the entire community. 139 | 140 | To become a sponsor, please visit the following link: [https://github.com/sponsors/anis-marrouchi](https://github.com/sponsors/anis-marrouchi) 141 | 142 | Your support is greatly appreciated, and it will have a significant impact on the project's future. Thank you for considering to sponsor this project! -------------------------------------------------------------------------------- /app/[...slug]/page.tsx: -------------------------------------------------------------------------------- 1 | import { notFound } from "next/navigation" 2 | import { Metadata } from "next" 3 | import { allPages } from "contentlayer/generated" 4 | 5 | import { Mdx } from "@/components/mdx-components" 6 | 7 | interface PageProps { 8 | params: { 9 | slug: string[] 10 | } 11 | } 12 | 13 | async function getPageFromParams(params: PageProps["params"]) { 14 | const slug = params?.slug?.join("/") 15 | const page = allPages.find((page) => page.slugAsParams === slug) 16 | 17 | if (!page) { 18 | null 19 | } 20 | 21 | return page 22 | } 23 | 24 | export async function generateMetadata({ 25 | params, 26 | }: PageProps): Promise { 27 | const page = await getPageFromParams(params) 28 | 29 | if (!page) { 30 | return {} 31 | } 32 | 33 | return { 34 | title: page.title, 35 | description: page.description, 36 | } 37 | } 38 | 39 | export async function generateStaticParams(): Promise { 40 | return allPages.map((page) => ({ 41 | slug: page.slugAsParams.split("/"), 42 | })) 43 | } 44 | 45 | export default async function PagePage({ params }: PageProps) { 46 | const page = await getPageFromParams(params) 47 | 48 | if (!page) { 49 | notFound() 50 | } 51 | 52 | return ( 53 |
54 |

{page.title}

55 | {page.description &&

{page.description}

} 56 |
57 | 58 |
59 | ) 60 | } 61 | -------------------------------------------------------------------------------- /app/api/hello/route.ts: -------------------------------------------------------------------------------- 1 | export async function GET(request: Request) { 2 | return new Response('Hello, Next.js!') 3 | } 4 | -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nooqta/ai-content/580ab19663e400d1612af5c6ad461d7847604000/app/favicon.ico -------------------------------------------------------------------------------- /app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /app/layout.tsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link" 2 | import "./globals.css" 3 | import { Inter } from "next/font/google" 4 | import { ThemeProvider } from "@/components/theme-provider" 5 | import { Analytics } from "@/components/analytics" 6 | import { ModeToggle } from "@/components/mode-toggle" 7 | 8 | const inter = Inter({ subsets: ["latin"] }) 9 | 10 | export const metadata = { 11 | title: "AI Generated Content", 12 | description: "Generated by create next app & content-ai", 13 | } 14 | 15 | interface RootLayoutProps { 16 | children: React.ReactNode 17 | } 18 | 19 | export default function RootLayout({ children }: RootLayoutProps) { 20 | return ( 21 | 22 | 25 | 26 |
27 |
28 |
29 | 30 | 34 |
35 |
36 |
{children}
37 |
38 | 39 | 40 | 41 | 42 | ) 43 | } 44 | -------------------------------------------------------------------------------- /app/page.tsx: -------------------------------------------------------------------------------- 1 | import { allPosts } from "@/.contentlayer/generated" 2 | import Link from "next/link" 3 | 4 | export default function Home() { 5 | return ( 6 |
7 | {allPosts.map((post) => ( 8 |
9 | 10 |

{post.title}

11 | 12 | {post.description &&

{post.description}

} 13 |
14 | ))} 15 |
16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /app/posts/[...slug]/page.tsx: -------------------------------------------------------------------------------- 1 | import { notFound } from "next/navigation" 2 | import { allPosts } from "contentlayer/generated" 3 | 4 | import { Metadata } from "next" 5 | import { Mdx } from "@/components/mdx-components" 6 | 7 | interface PostProps { 8 | params: { 9 | slug: string[] 10 | } 11 | } 12 | 13 | async function getPostFromParams(params: PostProps["params"]) { 14 | const slug = params?.slug?.join("/") 15 | const post = allPosts.find((post) => post.slugAsParams === slug) 16 | 17 | if (!post) { 18 | null 19 | } 20 | 21 | return post 22 | } 23 | 24 | export async function generateMetadata({ 25 | params, 26 | }: PostProps): Promise { 27 | const post = await getPostFromParams(params) 28 | 29 | if (!post) { 30 | return {} 31 | } 32 | 33 | return { 34 | title: post.title, 35 | description: post.description, 36 | } 37 | } 38 | 39 | export async function generateStaticParams(): Promise { 40 | return allPosts.map((post) => ({ 41 | slug: post.slugAsParams.split("/"), 42 | })) 43 | } 44 | 45 | export default async function PostPage({ params }: PostProps) { 46 | const post = await getPostFromParams(params) 47 | 48 | if (!post) { 49 | notFound() 50 | } 51 | 52 | return ( 53 |
54 |

{post.title}

55 | {post.description && ( 56 |

57 | {post.description} 58 |

59 | )} 60 |
61 | 62 |
63 | ) 64 | } 65 | -------------------------------------------------------------------------------- /components/analytics.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import { Analytics as VercelAnalytics } from "@vercel/analytics/react" 4 | 5 | export function Analytics() { 6 | return 7 | } 8 | -------------------------------------------------------------------------------- /components/mdx-components.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image" 2 | import { useMDXComponent } from "next-contentlayer/hooks" 3 | 4 | const components = { 5 | Image, 6 | } 7 | 8 | interface MdxProps { 9 | code: string 10 | } 11 | 12 | export function Mdx({ code }: MdxProps) { 13 | const Component = useMDXComponent(code) 14 | 15 | return 16 | } 17 | -------------------------------------------------------------------------------- /components/mode-toggle.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import { useTheme } from "next-themes" 4 | 5 | export function ModeToggle() { 6 | const { setTheme, theme } = useTheme() 7 | 8 | return ( 9 | 43 | ) 44 | } 45 | -------------------------------------------------------------------------------- /components/theme-provider.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import { ThemeProvider as NextThemesProvider } from "next-themes" 5 | import type { ThemeProviderProps } from "next-themes/dist/types" 6 | 7 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) { 8 | return {children} 9 | } 10 | -------------------------------------------------------------------------------- /content/pages/about.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: About 3 | description: About the site 4 | --- 5 | 6 | Blandit libero volutpat sed cras ornare arcu. Cursus sit amet dictum sit amet. Nunc vel risus commodo viverra maecenas accumsan. Libero id faucibus nisl tincidunt eget nullam non nisi est. Varius quam quisque id diam vel quam. Id donec ultrices tincidunt arcu non. 7 | 8 | ## Consent 9 | 10 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat sed cras ornare arcu. Nibh ipsum consequat nisl vel pretium lectus quam id leo. A arcu cursus vitae congue. Amet justo donec enim diam. Vel pharetra vel turpis nunc eget lorem. Gravida quis blandit turpis cursus in. Semper auctor neque vitae tempus. Elementum facilisis leo vel fringilla est ullamcorper eget nulla. Imperdiet nulla malesuada pellentesque elit eget. 11 | 12 | Felis donec et odio pellentesque diam volutpat commodo sed. 13 | 14 | Tortor consequat id porta nibh. Fames ac turpis egestas maecenas pharetra convallis posuere morbi leo. Scelerisque fermentum dui faucibus in. Tortor posuere ac ut consequat semper viverra. 15 | 16 | ## Information we collect 17 | 18 | Amet justo donec enim diam. In hendrerit gravida rutrum quisque non. Hac habitasse platea dictumst quisque sagittis purus sit. 19 | 20 | ## How we use your Information 21 | 22 | Ut sem nulla pharetra diam sit amet nisl suscipit adipiscing. Consectetur adipiscing elit pellentesque habitant. Ut tristique et egestas quis ipsum suspendisse ultrices gravida. 23 | -------------------------------------------------------------------------------- /content/posts/a-comprehensive-guide-to-creating-apps-with-nextjs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: "A Comprehensive Guide to Creating Apps with Next.js" 3 | date: "2023-05-07" 4 | domain: "nextjs" 5 | description: Unlocking the Full Potential of Next.js and React for Web Development 6 | --- 7 | # Getting Started with Next.js: A Beginner's Guide 8 | 9 | ![alt text](https://images.unsplash.com/photo-1584265728328-b242c3d05acc?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNTY3OTN8MHwxfHJhbmRvbXx8fHx8fHx8fHwxNjgzNDU1ODIy&ixlib=rb-4.0.3&q=80&w=1080) 10 | 11 | Next.js is a popular JavaScript framework for creating fast, reactive, and SEO-friendly web applications and websites. It is an open-source framework created by Vercel and is used by many large companies such as Uber, Twitter, and Airbnb. 12 | 13 | In this article, we'll go over the basics of Next.js and how to get started with it. We'll cover topics such as setting up your development environment, creating a basic Next.js application, and deploying your application. 14 | 15 | ## Setting Up Your Development Environment 16 | 17 | The first step in getting started with Next.js is to set up your development environment. You'll need to have Node.js and npm installed on your machine. You can install them from [nodejs.org](https://nodejs.org/en/). 18 | 19 | Once you have Node.js and npm installed, you'll need to install the Next.js CLI (command-line interface) tool. This tool will allow you to create and manage your Next.js projects. To install the CLI, run the following command in your terminal: 20 | 21 | ``` 22 | npm install -g next 23 | ``` 24 | 25 | ## Creating a Basic Next.js Application 26 | 27 | Now that you have your development environment set up, you can create a new Next.js application. To do this, run the following command in your terminal: 28 | 29 | ``` 30 | next init 31 | ``` 32 | 33 | This will create a new Next.js project in the current directory. The project will contain a `package.json` file, a `pages` directory, and a `public` directory. 34 | 35 | ## Deploying Your Application 36 | 37 | Next.js comes with built-in support for deploying your application to a variety of hosting providers. You can deploy your application to Vercel, Netlify, Heroku, and more. 38 | 39 | To deploy your application to Vercel, you'll need to create an account and log in. Once you're logged in, run the following command in your terminal: 40 | 41 | ``` 42 | vercel 43 | ``` 44 | 45 | This will deploy your application to Vercel and provide you with a URL where you can access your application. 46 | 47 | ## Conclusion 48 | 49 | In this article, we went over the basics of Next.js and how to get started with it. We covered topics such as setting up your development environment, creating a basic Next.js application, and deploying your application. 50 | 51 | Next.js is a powerful and popular JavaScript framework that can help you create fast, reactive, and SEO-friendly web applications and websites. With its easy-to-use CLI and built-in support for deploying to a variety of hosting providers, it is a great tool for web development. 52 | 53 | For more information on Next.js, check out the [official documentation](https://nextjs.org/docs/getting-started). -------------------------------------------------------------------------------- /content/posts/a-comprehensive-guide-to-react-essentials.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: "A Comprehensive Guide to React Essentials" 3 | date: "2023-05-07" 4 | domain: "learn react" 5 | description: A Comprehensive Guide to React Hooks 6 | --- 7 | # A Comprehensive Guide to React Hooks 8 | 9 | ![Cover Image](https://images.unsplash.com/photo-1650201776897-3ab1ac29c33a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNTY3OTN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODM0Njg1NDI&ixlib=rb-4.0.3&q=80&w=1080) 10 | 11 | React Hooks offer a much more powerful way to create and maintain React components than traditional class-based components. They provide developers with the ability to access and manipulate the React state, as well as access lifecycle methods without writing classes. In this article, we'll provide a comprehensive guide to React Hooks and explain how they can be used to create better components. 12 | 13 | ## What are React Hooks? 14 | 15 | React Hooks are functions that allow developers to access React features such as state and lifecycle methods without writing classes. Hooks provide a way to "hook" into React features and allow developers to use them with functional components instead of class-based components. 16 | 17 | ## Why Use React Hooks? 18 | 19 | React Hooks allow developers to write more concise and maintainable code by eliminating the need to write classes. This makes it easier to maintain and update React components, as well as create components that are more performant. Additionally, Hooks allow developers to write components that are more reusable and easily shared across projects. 20 | 21 | ## Using React Hooks 22 | 23 | React Hooks are used in the same way as traditional React classes. To use a Hook, you need to import the corresponding React library and call the Hook within a functional component. 24 | 25 | For example, to use the `useState` Hook, you would call it within a functional component like this: 26 | 27 | ```js 28 | import React, { useState } from 'react'; 29 | 30 | const ComponentName = () => { 31 | const [state, setState] = useState(initialState); 32 | // ... 33 | } 34 | ``` 35 | 36 | ## React Hooks Cheat Sheet 37 | 38 | There are a number of React Hooks available, and each has its own purpose. To help you get started, here is a cheat sheet of some of the most commonly used React Hooks: 39 | 40 | * `useState`: Allows you to add state to a functional component. 41 | * `useEffect`: Allows you to perform side effects in a functional component. 42 | * `useContext`: Allows you to access the React Context and subscribe to its changes. 43 | * `useReducer`: Allows you to pass state and a reducer function to a functional component. 44 | * `useCallback`: Allows you to create a memoized callback for use within a functional component. 45 | * `useMemo`: Allows you to create a memoized value for use within a functional component. 46 | 47 | ## Further Reading 48 | 49 | If you're looking for more information on React Hooks, the official React documentation has a [comprehensive guide](https://reactjs.org/docs/hooks-intro.html) that covers all of the React Hooks in detail. Additionally, there are a number of tutorials, guides, and blogs available that provide further information on React Hooks. 50 | 51 | ## Conclusion 52 | 53 | React Hooks provide developers with a powerful way to create and maintain React components. By eliminating the need to write classes, they make it easier to maintain and update components, as well as create components that are more performant. With this comprehensive guide, you should now have a better understanding of React Hooks and how they can be used to create better components. -------------------------------------------------------------------------------- /content/posts/getting-started-with-nextjs-a-guide-to-the-react-framework.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Getting Started with Next.js: A Guide to the React Framework" 3 | date: "2023-05-07" 4 | domain: "learn react" 5 | description: Optimizing the Build Process for Next.js and React Applications 6 | --- 7 | # Getting started with Next.js: A beginner's guide 8 | 9 | ![Cover Image](https://images.unsplash.com/photo-1604999163163-ff86077e9105?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNTY3OTN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODM0NTYxOTA&ixlib=rb-4.0.3&q=80&w=1080) 10 | 11 | Next.js is a powerful and popular framework for building modern web applications. It is built on top of React and is designed to make it easy to create high-performance and reliable web applications. In this guide, we will look at how to get started with Next.js and learn some of the basics of the framework. 12 | 13 | ## Installation 14 | 15 | The first step to using Next.js is to install it. This can be done with either the `npm` package manager or the `yarn` package manager. 16 | 17 | For `npm`, run the following command: 18 | 19 | ``` 20 | npm install next 21 | ``` 22 | 23 | For `yarn`, run the following command: 24 | 25 | ``` 26 | yarn add next 27 | ``` 28 | 29 | ## Creating Your First App 30 | 31 | Now that you have Next.js installed, it is time to create your first app. To do this, create a directory for your project and run the `create-next-app` command. 32 | 33 | ``` 34 | npx create-next-app my-app 35 | ``` 36 | 37 | This will create a new directory with the name `my-app` and will contain all the necessary files for your app. 38 | 39 | ## Basic Concepts 40 | 41 | There are a few basic concepts that you need to be aware of when working with Next.js. 42 | 43 | The first is the **pages** directory. This directory is where you will store all the pages for your application. Each page is a React component and will be rendered when the corresponding URL is visited. 44 | 45 | The second concept is **routing**. This is how you decide which page will be rendered for a given URL. In Next.js, routing is handled by the `pages/_app.js` file. 46 | 47 | The third concept is **data fetching**. This is how you retrieve data from an external source and make it available to your application. In Next.js, this can be done with the `getStaticProps` and `getServerSideProps` methods. 48 | 49 | ## Building Your App 50 | 51 | Now that you have a basic understanding of the concepts behind Next.js, it is time to build your app. You will do this by creating components and adding them to the pages directory. 52 | 53 | For example, if you wanted to create a page that displays a list of posts, you would create a `Posts.js` component and add it to the `pages` directory. This component would then be rendered when the `/posts` URL is visited. 54 | 55 | You can also create components that are shared across multiple pages, such as a `Header` component. These components can be stored in the `components` directory. 56 | 57 | ## Deploying Your App 58 | 59 | Once you have built your app, you will need to deploy it so that it can be accessed by others. Next.js supports a variety of deployment options, such as Vercel and Netlify. 60 | 61 | ## Conclusion 62 | 63 | In this guide, we have looked at how to get started with Next.js. We have discussed the basics of the framework and how to create and deploy an app using Next.js. 64 | 65 | If you are looking for more in-depth information about Next.js, you can check out the official documentation [here](https://nextjs.org/docs). 66 | 67 | Happy coding! -------------------------------------------------------------------------------- /content/posts/getting-started-with-nextjs-an-easy-to-follow-guide.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Getting Started with Next.js: An Easy-to-Follow Guide" 3 | date: "2023-05-07" 4 | domain: "nextjs" 5 | description: Making the Most of Next.js and React for an Enhanced User Experience 6 | --- 7 | # Getting started with Next.js: A beginner's guide 8 | ![Cover Image](https://images.unsplash.com/photo-1608230566348-bb6dce3b574e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNTY3OTN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODM0NTYyNzI&ixlib=rb-4.0.3&q=80&w=1080) 9 | 10 | Are you looking to get started with Next.js, the popular React-based web framework? If so, you have come to the right place! In this article, I will explain all the basics and give you the knowledge you need to start building modern, feature-packed web applications with Next.js. 11 | 12 | ## What is Next.js? 13 | 14 | Next.js is a React-based web framework developed by the team at Vercel (formerly ZEIT). It is designed to make it easy to create fast, feature-rich web applications and websites. It offers a range of features such as server-side rendering, static site generation, code splitting, and more. 15 | 16 | ## Why use Next.js? 17 | 18 | Next.js is a great choice for web development because it is lightweight, easy to use, and offers a range of features that make it easier to build modern web applications. It is also well-supported, with a wide range of plugins and libraries available to extend the framework’s capabilities. 19 | 20 | ## Creating a Next.js project 21 | 22 | Now that you know a bit about Next.js, let’s look at how to get started. To create a new Next.js project, you will need to have Node.js and npm installed. 23 | 24 | Once they are installed, you can use the `npx create-next-app` command to create a new project. This will create a new directory with all the files you need to get started. 25 | 26 | ## Writing your first page 27 | 28 | The first thing you will need to do is create a page. To do this, create a file called `pages/index.js` in the root of your project. This file will be the entry point for your application. 29 | 30 | In the file, you can write your React component as you would any other React component. You will also need to export the component with the `export default` keyword. 31 | 32 | ```javascript 33 | import React from 'react'; 34 | 35 | const IndexPage = () => { 36 | return ( 37 |
38 |

Hello World!

39 |
40 | ) 41 | } 42 | 43 | export default IndexPage; 44 | ``` 45 | 46 | ## Running your app 47 | 48 | Now that you have written your first page, it’s time to run the app. To do this, run the `npm run dev` command in the root of your project. This will start the development server and open the app in the browser. 49 | 50 | ## Conclusion 51 | 52 | This is just the beginning of what you can do with Next.js. To learn more, check out the [official documentation](https://nextjs.org/docs/basic-features/pages). It is a great resource for getting started and will help you on your journey to becoming a Next.js expert. 53 | 54 | Good luck, and happy coding! -------------------------------------------------------------------------------- /content/posts/getting-started-with-nextjs-unleash-the-power-of-server-side-rendering.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Getting Started with Next.js: Unleash the Power of Server-Side Rendering" 3 | date: "2023-05-07" 4 | domain: "nextjs" 5 | description: Using Next.js to Create Lightning-Fast React Applications 6 | --- 7 | # Getting Started with Next.js: A Beginner's Guide 8 | ![Cover Image](https://images.unsplash.com/photo-1465799522714-8eb0e6fccf73?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNTY3OTN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODM0NTUyNDA&ixlib=rb-4.0.3&q=80&w=1080) 9 | 10 | Are you interested in creating your own website or web application? If so, you may be interested in learning how to use Next.js, a JavaScript framework for building websites and web applications. In this article, we'll provide a beginner's guide to getting started with Next.js. 11 | 12 | ## What is Next.js? 13 | 14 | Next.js is a JavaScript framework for building websites and web applications. It was designed for developers who want to create fast, modern, and secure web applications. It is a lightweight framework that provides a powerful set of features, such as server-side rendering, static file serving, and automatic code splitting. 15 | 16 | ## Why use Next.js? 17 | 18 | Next.js provides a number of advantages for developers: 19 | 20 | - **Easy to set up**: Next.js is easy to set up and get started with. It has a simple command line interface that makes it easy to create and deploy projects. 21 | 22 | - **High performance**: Next.js is built on top of React, a popular JavaScript library, which makes it fast and efficient. 23 | 24 | - **Extensible**: Next.js is highly extensible and can be used to create complex applications. It has a number of plugins and add-ons that can be used to extend its functionality. 25 | 26 | - **Secure**: Next.js is secure and provides built-in security features to help protect your application. 27 | 28 | ## Getting Started with Next.js 29 | 30 | Now that you know what Next.js is and why you should use it, let's look at how to get started. 31 | 32 | ### Prerequisites 33 | 34 | Before you start, you'll need to make sure you have the following installed: 35 | 36 | - Node.js 37 | - npm 38 | - A text editor 39 | 40 | ### Installation 41 | 42 | Once you have the prerequisites installed, you can install Next.js. To do this, run the following command in your terminal: 43 | 44 | `npm install next` 45 | 46 | ### Creating a Project 47 | 48 | Once you have installed Next.js, you can create a project. To do this, run the following command in your terminal: 49 | 50 | `next init` 51 | 52 | This will create a new project in the current directory. 53 | 54 | ### Running the Project 55 | 56 | Once you have created the project, you can run it. To do this, run the following command in your terminal: 57 | 58 | `next start` 59 | 60 | This will start the development server. You can then visit http://localhost:3000 in your browser to view your project. 61 | 62 | ## Conclusion 63 | 64 | Congratulations! You have now learned how to get started with Next.js. Now that you have the basics down, you can start exploring all the features Next.js has to offer. 65 | 66 | For more information on Next.js, please refer to the [official documentation](https://nextjs.org/docs/getting-started). -------------------------------------------------------------------------------- /content/posts/harness-the-power-of-nextjs-for-your-web-projects.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Harness the Power of Next.js for Your Web Projects" 3 | date: "2023-05-07" 4 | domain: "next.js" 5 | description: 5 Reasons Why Next.js is the Future of React Development 6 | --- 7 | # Getting Started with Next.js: A Beginner's Guide 8 | 9 | ![alt text](https://images.unsplash.com/photo-1566561511823-a5570c4983ab?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNTY3OTN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODM0NTUxMjE&ixlib=rb-4.0.3&q=80&w=1080 "Getting Started with Next.js") 10 | 11 | Are you looking for a way to get started with [Next.js](https://nextjs.org/)? It's an awesome tool for creating React applications, and it's becoming increasingly popular. In this article, I'll provide a beginner's guide to getting started with Next.js and provide some tips for getting the most out of the platform. 12 | 13 | ## What is Next.js? 14 | 15 | [Next.js](https://nextjs.org/) is a React framework that allows developers to create server-side rendered (SSR) applications, static websites, and more. It supports both client-side and server-side rendering, and it has built-in support for routing, code splitting, and dynamic routes. It also provides features such as easy deployment, hot reloading, and automatic code splitting. 16 | 17 | ## Why Use Next.js? 18 | 19 | Next.js is a powerful platform for creating React applications, and it provides many benefits over other frameworks. It has a simple, intuitive API that makes it easy to get started, and it provides features such as automatic code splitting, hot reloading, and easy deployment. Additionally, Next.js is backed by a large and active community of developers who are constantly working to improve the platform. 20 | 21 | ## Getting Started with Next.js 22 | 23 | Getting started with Next.js is relatively straightforward. The first step is to create a new project using the [Create Next App CLI](https://www.npmjs.com/package/create-next-app). This will generate the necessary files and scaffolding for your project. 24 | 25 | Once the project is generated, you can start building your application. Next.js provides a lot of useful features and tools out of the box, such as automatic code splitting, hot reloading, and easy deployment. Additionally, you can use [Next.js plugins](https://nextjs.org/docs/advanced-features/plugin-api) to add additional features and functionality to your application. 26 | 27 | ## Conclusion 28 | 29 | Getting started with Next.js is a great way to get up and running quickly with React applications. It provides many useful features out of the box, and it's backed by a large and active community of developers. With a few simple steps, you can get started creating your Next.js application. 30 | 31 | For more information on getting started with Next.js, check out the official [Getting Started Guide](https://nextjs.org/docs/getting-started). -------------------------------------------------------------------------------- /content/posts/introduction-to-python.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Introduction to Python 3 | date: "2023-05-14" 4 | description: Learn the basics of Python programming with this introductory course! Get started with the fundamentals of the language and explore the possibilities of creating powerful applications. 5 | --- 6 | # Introduction to Python 7 | ![Cover Image](https://images.unsplash.com/photo-1632748616642-fe76c99f66b4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxNTY3OTN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODQwNTg0MTF8&ixlib=rb-4.0.3&q=80&w=1080) 8 | 9 | Are you an intermediate programmer looking to learn Python? Look no further! Python is a powerful, versatile, and easy-to-learn programming language. In this article, we'll provide an introduction to Python and discuss some of the key features and benefits of Python programming. 10 | 11 | ## What is Python? 12 | 13 | Python is a high-level, general-purpose programming language created by Guido van Rossum in 1991. Python is an interpreted language, meaning that it does not need to be compiled before it is run. It is a popular language for web development, data science, artificial intelligence, and more. 14 | 15 | ## Features of Python 16 | 17 | Python is a powerful and versatile programming language. It is object-oriented, meaning that it allows developers to create objects that can be used and reused throughout a program. It is also dynamically typed, which means that you don't need to declare the type of a variable when you use it. Python also has a large standard library, which contains modules that you can use in your own programs. 18 | 19 | ## Benefits of Python 20 | 21 | Python is an easy language to learn and use. Its syntax is straightforward and easy to read, making it a great language for beginners. Python also has a large community of users, so you can find lots of help and support when you need it. Additionally, Python is open source, meaning that it is available to everyone at no cost. 22 | 23 | ## Getting Started with Python 24 | 25 | To get started with Python, you'll need to download and install the Python interpreter. You can find the latest version of Python at https://www.python.org/. Once you have it installed, you can open up the interpreter and start writing Python code. 26 | 27 | To help you get started, here is a simple “Hello World” example written in Python: 28 | 29 | ``` 30 | # Hello World in Python 31 | 32 | print("Hello World!") 33 | ``` 34 | 35 | This simple program prints the string “Hello World” to the console. 36 | 37 | ## Conclusion 38 | 39 | Python is a powerful, versatile, and easy-to-learn programming language. It has a large community of users and lots of resources available to help you learn. If you're an intermediate programmer looking to learn Python, this article has provided a great introduction to get you started. 40 | 41 | Official References: 42 | 43 | - [Python Documentation](https://docs.python.org/3.8/) 44 | - [Python Tutorial from Tutorials Point](https://www.tutorialspoint.com/python/index.htm) -------------------------------------------------------------------------------- /content/posts/mastering-the-basics-of-react-get-started-with-react-essentials.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Mastering the Basics of React: Get Started with React Essentials!" 3 | date: "2023-05-07" 4 | domain: "Learn React" 5 | description: 7 Tips for Writing Clean and Efficient React Code 6 | --- 7 | # 7 Tips for Writing Clean and Efficient React Code 8 | ![Cover Image](https://images.unsplash.com/photo-1584473457431-cf7e9d172714?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNTY3OTN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODM0Njg0NDk&ixlib=rb-4.0.3&q=80&w=1080) 9 | 10 | React is a popular JavaScript library for creating user interfaces in web and mobile applications. It’s a powerful tool for building dynamic and interactive applications, but it can be difficult to write efficient and clean code. Here are seven tips for writing clean and efficient React code: 11 | 12 | 1. Use Declarative Syntax 13 | When writing React components, it’s important to use declarative syntax, as opposed to imperatives syntax. Declarative syntax is more concise and readable, and it makes code easier to maintain. 14 | 15 | For example, the following code is written in declarative syntax: 16 | 17 | ```js 18 | const List = ({ items }) => ( 19 |
    20 | {items.map(item => ( 21 |
  • {item.name}
    • 22 | ))} 23 |
24 | ); 25 | ``` 26 | 27 | 2. Use Functional Components 28 | Functional components are more concise and efficient than class-based components. They can be used for simple components that don’t need to maintain state or lifecycle methods. 29 | 30 | For example, the following code is a functional component: 31 | 32 | ```js 33 | const List = ({ items }) => ( 34 |
    35 | {items.map(item => ( 36 |
  • {item.name}
    • 37 | ))} 38 |
39 | ); 40 | ``` 41 | 42 | 3. Use Controlled Components 43 | Controlled components are components that are controlled by the React state. This means that the state is responsible for managing the data and the UI is responsible for displaying the data. This makes it easier to maintain and debug your React components. 44 | 45 | For example, the following code is a controlled component: 46 | 47 | ```js 48 | class List extends React.Component { 49 | constructor(props) { 50 | super(props); 51 | this.state = { 52 | items: [], 53 | }; 54 | } 55 | 56 | render() { 57 | return ( 58 |
    59 | {this.state.items.map(item => ( 60 |
  • {item.name}
    • 61 | ))} 62 |
63 | ); 64 | } 65 | } 66 | ``` 67 | 68 | 4. Use Pure Components 69 | Pure components are components that only update when their props or state change. This makes them more efficient than regular components, as they don’t need to be re-rendered unnecessarily. 70 | 71 | For example, the following code is a pure component: 72 | 73 | ```js 74 | const List = ({ items }) => { 75 | const [listItems, setListItems] = useState(items); 76 | 77 | useEffect(() => { 78 | setListItems(items); 79 | }, [items]); 80 | 81 | return ( 82 |
    83 | {listItems.map(item => ( 84 |
  • {item.name}
    • 85 | ))} 86 |
87 | ); 88 | }; 89 | ``` 90 | 91 | 5. Use Memoization 92 | Memoization is a technique for optimizing performance by caching the results of expensive functions. When used in React components, it can help avoid unnecessary re-rendering and make code more efficient. 93 | 94 | For example, the following code uses memoization to optimize performance: 95 | 96 | ```js 97 | const memoizedList = React.memo(({ items }) => ( 98 |
    99 | {items.map(item => ( 100 |
  • {item.name}
    • 101 | ))} 102 |
103 | )); 104 | ``` 105 | 106 | 6. Use Lazy Loading 107 | Lazy loading is a technique for optimizing performance by only loading components when they are needed. This can help make your React applications more efficient and reduce the amount of code that needs to be sent to the browser. 108 | 109 | For example, the following code uses lazy loading to optimize performance: 110 | 111 | ```js 112 | const List = React.lazy(() => import('./list')); 113 | 114 | const App = () => ( 115 | Loading...}> 116 | 117 | 118 | ); 119 | ``` 120 | 121 | 7. Use the React DevTools 122 | The React DevTools is a browser extension that makes it easier to debug and analyze React applications. It can help you identify performance bottlenecks and optimize your code for better performance. 123 | 124 | With these seven tips, you can write clean and efficient React code. Remember to use declarative syntax, prefer functional components, use controlled components, use pure components, use memoization, use lazy loading, and make use of the React DevTools. 125 | 126 | References: 127 | - [Declarative vs. Imperative Programming](https://www.freecodecamp.org/news/declarative-vs-imperative-programming/) 128 | - [What are Controlled Components in React?](https://daveceddia.com/controlled-components-react/) 129 | - [React.PureComponent vs Component: A Deep Dive](https://www.robinwieruch.de/react-purecomponent-vs-component/) 130 | - [What is Memoization and How Can You Use it?](https://www.freecodecamp.org/news/what-is-memoization-and-how-can-you-use-it-in-javascript-c2dab5b9b9bd/) 131 | - [React.lazy and Suspense](https://reactjs.org/docs/code-splitting.html#reactlazy) 132 | - [React DevTools](https://github.com/facebook/react-devtools) -------------------------------------------------------------------------------- /content/posts/maximizing-your-nextjs-app-5-tips-to-get-the-most-out-of-the-framework.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Maximizing Your Next.js App: 5 Tips to Get the Most Out of the Framework" 3 | date: "2023-05-07" 4 | domain: "Next.js" 5 | description: "Scaling Applications with Next.js and React" 6 | --- 7 | # Getting Started with Next.js: A Beginner's Guide 8 | 9 | ![alt text](https://images.unsplash.com/photo-1594904351111-a072f80b1a71?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNTY3OTN8MHwxfHJhbmRvbXx8fHx8fHx8fHx8fDE2ODM0NTYyMzA&ixlib=rb-4.0.3&q=80&w=1080) 10 | 11 | Are you interested in getting started with Next.js? It's a powerful JavaScript framework that can help you create amazing web applications quickly. This tutorial will walk you through the basics of Next.js, from installation to creating a simple page. By the end of this guide, you'll have a basic understanding of how to use Next.js to create a web application. 12 | 13 | ## What is Next.js? 14 | 15 | Next.js is an open-source, production-ready React.js framework that enables developers to quickly create web applications with server-side rendering. With Next.js, developers can create websites, web applications, and more with the power of React and the simplicity of Next.js. 16 | 17 | ## Installing Next.js 18 | 19 | Before you can get started, you'll need to install Next.js. To do this, you'll need to have Node.js and npm installed. Once that's done, you can use npm to install Next.js. Open up a terminal and run the following command: 20 | 21 | ``` 22 | npm install next 23 | ``` 24 | 25 | Next.js will now be installed in your project directory. 26 | 27 | ## Creating a Page 28 | 29 | Now that you have Next.js installed, you can start creating pages. To create a page, you'll need to create a new file in your project directory. The file should be named `index.js` and should include the following code: 30 | 31 | ```js 32 | import React from 'react' 33 | import { NextPage } from 'next' 34 | 35 | const Home: NextPage = () => { 36 | return
Hello, world!
37 | } 38 | 39 | export default Home 40 | ``` 41 | 42 | This code creates a new React component that will be rendered as the homepage of your website. 43 | 44 | ## Adding Routes 45 | 46 | Now that you have a page, you'll need to create routes. Routes are what tell Next.js what page to render when a user visits a certain URL. To do this, you'll need to create a `routes.js` file in your project directory and add the following code: 47 | 48 | ```js 49 | import Home from './pages/index' 50 | 51 | const routes = [ 52 | { 53 | path: '/', 54 | component: Home 55 | } 56 | ] 57 | 58 | export default routes 59 | ``` 60 | 61 | This code defines a single route that renders the `Home` component when a user visits the homepage. You can add additional routes as needed. 62 | 63 | ## Adding Styling 64 | 65 | Finally, you'll need to add styling to your page. To do this, you'll need to install a CSS preprocessor such as SASS or LESS and create a `styles.scss` file in your project directory. You can then add styling to your page by importing the stylesheet in your `index.js` file: 66 | 67 | ```js 68 | import React from 'react' 69 | import { NextPage } from 'next' 70 | import './styles.scss' 71 | 72 | const Home: NextPage = () => { 73 | return
Hello, world!
74 | } 75 | 76 | export default Home 77 | ``` 78 | 79 | Now you're ready to start adding styling to your page. 80 | 81 | ## Conclusion 82 | 83 | In this tutorial, you've learned the basics of Next.js, from installation to creating a simple page. With Next.js, you can quickly create web applications with server-side rendering. For more information on Next.js, check out the [official documentation](https://nextjs.org/docs). -------------------------------------------------------------------------------- /content/posts/python-control-structures.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Python Control Structures 3 | date: "2023-05-14" 4 | description: Python Control Structures are powerful tools for controlling the flow of code execution. Learn how to use them to create efficient and reliable programs. 5 | --- 6 | # Python Control Structures 7 | 8 | ![Python Control Structures](https://images.unsplash.com/photo-1597088925360-92e107391663?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxNTY3OTN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODQwNTg1MjF8&ixlib=rb-4.0.3&q=80&w=1080) 9 | 10 | Are you an intermediate Python programmer looking to take your coding to the next level? If so, then you'll want to become familiar with the various control structures that Python has to offer. Control structures allow you to control the flow of your code, allowing you to create more complex programs. In this blog post, we'll discuss the different control structures that are available in Python, with code examples and official Python references. 11 | 12 | ## For Loops 13 | 14 | The most common control structure in Python is the **for loop**. The for loop is used to iterate over a sequence or collection of items. For example, to print out the numbers 1 to 10, we can use a for loop like this: 15 | 16 | ```python 17 | for i in range(1, 11): 18 | print(i) 19 | ``` 20 | 21 | This code will print out the numbers 1 to 10. The `range()` function is used to specify the range of numbers to iterate over. 22 | 23 | ## While Loops 24 | 25 | Another common control structure is the **while loop**. While loops are used to execute a block of code until a certain condition is met. For example, to print out the numbers 1 to 10, we can use a while loop like this: 26 | 27 | ```python 28 | i = 1 29 | while i <= 10: 30 | print(i) 31 | i += 1 32 | ``` 33 | 34 | This code will print out the numbers 1 to 10. The variable `i` is used to keep track of the number that is currently being printed. 35 | 36 | ## If Statements 37 | 38 | The **if statement** is used to check if a certain condition is met. If the condition is true, then a block of code will be executed. For example, to print out "Hello World" if the number is greater than 5, we can use an if statement like this: 39 | 40 | ```python 41 | if number > 5: 42 | print("Hello World") 43 | ``` 44 | 45 | This code will print out "Hello World" if the variable `number` is greater than 5. 46 | 47 | ## Break and Continue 48 | 49 | The **break** and **continue** statements are used to control the flow of the loop. The break statement is used to exit the loop, while the continue statement is used to skip the rest of the code in the loop and move on to the next iteration. For example, to print out the numbers 1 to 10 except for 5, we can use a for loop with break and continue like this: 50 | 51 | ```python 52 | for i in range(1, 11): 53 | if i == 5: 54 | continue 55 | print(i) 56 | ``` 57 | 58 | This code will print out the numbers 1 to 10 except for 5. 59 | 60 | ## Conclusion 61 | 62 | In this blog post, we discussed the different control structures that are available in Python. We looked at for loops, while loops, if statements, break and continue statements. Understanding these control structures is essential for becoming a more advanced Python programmer. 63 | 64 | For more information on Python control structures, check out the [official Python documentation](https://docs.python.org/3/tutorial/controlflow.html). -------------------------------------------------------------------------------- /content/posts/python-data-types-and-variables.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Python Data Types and Variables 3 | date: "2023-05-14" 4 | description: Learn about the different data types and variables in Python and how to use them effectively. 5 | --- 6 | # Python Data Types and Variables 7 | 8 | ![Python Data Types and Variables](https://images.unsplash.com/photo-1653194540691-9314a69bd500?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxNTY3OTN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODQwNTg0NTd8&ixlib=rb-4.0.3&q=80&w=1080) 9 | 10 | Python is a powerful programming language that allows developers to build almost anything. One of the most important concepts within Python is the idea of data types and variables. Whether you are just starting out with Python or have been writing code for years, understanding data types and variables is essential for writing efficient and effective code. 11 | 12 | ## What are Data Types? 13 | Data types are used to define the type of data that a variable can store. In Python, there are many different types of data such as integers, floats, strings, booleans, and more. Each data type has specific characteristics and can be used in different ways. For example, an integer is a whole number that can be used for counting and performing calculations. A string is a sequence of characters that can be used for storing words or phrases. 14 | 15 | ## What are Variables? 16 | Variables are used to store information in a program. Whenever a variable is declared, you must specify what data type it is so that Python knows how to use the variable. Variables can be given any name you want, as long as it is not a keyword. For example, if you wanted to store the number 5 in a variable, you could do so like this: 17 | 18 | ```python 19 | my_variable = 5 20 | ``` 21 | 22 | In this example, `my_variable` is the name of the variable and `5` is the value that is being stored. 23 | 24 | ## Working with Different Data Types 25 | Once you have declared a variable, you can use it in your program. Depending on the data type, you may be able to perform certain operations with the variable. For example, if you declared an integer variable, you could use it to perform calculations like addition, subtraction, multiplication, and division. 26 | 27 | ```python 28 | my_variable = 5 29 | 30 | sum = my_variable + 10 31 | 32 | print(sum) # Output: 15 33 | ``` 34 | 35 | However, if you tried to perform a calculation with a string variable, you would get an error. 36 | 37 | ```python 38 | my_variable = "Hello" 39 | 40 | sum = my_variable + 10 41 | 42 | print(sum) # Output: TypeError: can only concatenate str (not "int") to str 43 | ``` 44 | 45 | ## Converting Data Types 46 | Sometimes you may need to convert a variable from one data type to another. For example, if you have a string that contains a number, you may want to convert it to an integer so that you can use it in calculations. In Python, this can be done using the `int()` function. 47 | 48 | ```python 49 | my_string = "5" 50 | 51 | my_int = int(my_string) 52 | 53 | sum = my_int + 10 54 | 55 | print(sum) # Output: 15 56 | ``` 57 | 58 | ## Conclusion 59 | Data types and variables are essential concepts in Python programming. Knowing how to use different data types and how to work with variables can help you write more efficient and effective code. By understanding these concepts, you can start writing powerful Python programs. 60 | 61 | ### Official References 62 | - [Python Data Types](https://docs.python.org/3/library/stdtypes.html) 63 | - [Python Variables](https://docs.python.org/3/tutorial/introduction.html#variables) 64 | - [Python Data Type Conversion](https://docs.python.org/3/library/functions.html#int) -------------------------------------------------------------------------------- /content/posts/python-exception-handling.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Python Exception Handling 3 | date: "2023-05-14" 4 | description: Learn the basics of Python Exception Handling: how to catch, raise, and handle errors in your code. 5 | --- 6 | # Python Exception Handling 7 | 8 | ![Python Exception Handling](https://images.unsplash.com/photo-1656680632373-e2aec264296b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxNTY3OTN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODQwNTg3OTF8&ixlib=rb-4.0.3&q=80&w=1080) 9 | 10 | Python is a powerful programming language that allows developers to create high-level applications with ease. However, when building applications, you may encounter errors due to incorrect code or unexpected user input. Exception handling is a crucial part of making sure your application runs smoothly and efficiently. 11 | 12 | Exception handling is a process of catching errors and responding to them in a predetermined way. It allows your application to continue running and prevents the application from crashing. Without exception handling, your application will crash and any unsaved data will be lost. 13 | 14 | ## Types of Exceptions 15 | 16 | There are two main types of exceptions in Python: Syntax errors and Runtime errors. 17 | 18 | Syntax errors occur when you write code that does not follow the Python syntax rules. For example, if you forget to add a colon at the end of an `if` statement, you will get a syntax error. 19 | 20 | Runtime errors occur when you write code that runs but doesn't produce the expected results. For example, if you try to divide a number by zero, you will get a runtime error. 21 | 22 | ## Catching Exceptions 23 | 24 | The `try` statement is used to catch exceptions in Python. It is followed by a `except` statement, which defines the response when an exception is caught. 25 | 26 | For example, if you want to catch a `ZeroDivisionError`, you would write the following code: 27 | 28 | ``` 29 | try: 30 | # code that may cause an error 31 | result = 5 / 0 32 | except ZeroDivisionError: 33 | # code to run when the error is caught 34 | print("You can't divide by zero!") 35 | ``` 36 | 37 | In this example, if the code inside the `try` statement causes a `ZeroDivisionError`, the code inside the `except` statement will run and print the message. 38 | 39 | ## Raising Exceptions 40 | 41 | You can also raise exceptions in Python. To do this, use the `raise` statement. This statement allows you to create and raise custom exceptions. 42 | 43 | For example, if you want to raise a `ValueError`, you would write the following code: 44 | 45 | ``` 46 | age = int(input("Enter your age: ")) 47 | if age < 0: 48 | raise ValueError("Age must be a positive number!") 49 | ``` 50 | 51 | In this example, if the user enters a negative number, the `ValueError` will be raised and the message will be printed. 52 | 53 | ## Conclusion 54 | 55 | Exception handling is an important part of programming in Python. It allows you to catch errors and respond to them in a predetermined way. It also allows you to raise custom exceptions when necessary. With exception handling, you can ensure that your application runs smoothly and efficiently. 56 | 57 | Official references to Python Exception Handling 58 | 59 | [Python Documentation - Errors and Exceptions](https://docs.python.org/3/tutorial/errors.html) -------------------------------------------------------------------------------- /content/posts/python-file-io.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Python File I/O 3 | date: "2023-05-14" 4 | description: Python File I/O: Learn how to read, write, and manipulate files with Python. Explore the power of the built-in open(), read(), write(), and close() functions. 5 | --- 6 | # Python File I/O 7 | ![Cover Image](https://images.unsplash.com/photo-1642239817349-3e1cf98817a5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxNTY3OTN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODQwNTg4NDJ8&ixlib=rb-4.0.3&q=80&w=1080) 8 | 9 | Are you looking to take your Python programming skills to the next level? In this article, you will learn the basics of Python File I/O and how you can use it to create, open, and manipulate files in Python. 10 | 11 | Python File I/O is the process of reading and writing data to and from a file. It is a powerful tool to manipulate files and data within Python. To use it, you need to understand the basic concepts of Python programming like variables, data types, and functions. 12 | 13 | ## What is Python File I/O? 14 | 15 | Python File I/O is a way of reading and writing data from and to files in Python. It is a powerful tool for manipulating files and data within Python. The basic concept of Python File I/O is to open a file, read from it, write to it, and close the file. 16 | 17 | The Python File I/O functions are the `open()`, `read()`, `write()`, and `close()` functions. These functions can be used to open, read, write, and close files, respectively. 18 | 19 | ## Opening and Closing Files 20 | 21 | The first step in using Python File I/O is to open a file. To open a file, the `open()` function is used. The syntax for the `open()` function is as follows: 22 | 23 | ```python 24 | file_object = open(filename, mode) 25 | ``` 26 | 27 | The `open()` function takes two parameters: `filename` and `mode`. The `filename` parameter is the name of the file that is to be opened. The `mode` parameter is the mode in which the file is to be opened. The different modes are: `r` for read-only, `w` for write-only, and `a` for append. 28 | 29 | Once the file is opened, the `close()` function can be used to close the file. The syntax for the `close()` function is as follows: 30 | 31 | ```python 32 | file_object.close() 33 | ``` 34 | 35 | ## Reading and Writing Files 36 | 37 | Once a file is opened, the `read()` and `write()` functions can be used to read from and write to the file, respectively. The syntax for the `read()` and `write()` functions is as follows: 38 | 39 | ```python 40 | # Read from file 41 | data = file_object.read() 42 | 43 | # Write to file 44 | file_object.write(data) 45 | ``` 46 | 47 | The `read()` function is used to read from the file and the `write()` function is used to write to the file. The `read()` function returns the data that is read from the file as a string. The `write()` function takes a string as an argument and writes it to the file. 48 | 49 | ## Official References 50 | 51 | For more information on Python File I/O, please refer to the official Python documentation: 52 | 53 | - [Python File I/O](https://docs.python.org/3/tutorial/inputoutput.html) 54 | - [open()](https://docs.python.org/3/library/functions.html#open) 55 | - [close()](https://docs.python.org/3/library/functions.html#close) 56 | - [read()](https://docs.python.org/3/library/io.html#io.IOBase.read) 57 | - [write()](https://docs.python.org/3/library/io.html#io.IOBase.write) 58 | 59 | ## Examples 60 | 61 | Here are some examples of how to use Python File I/O: 62 | 63 | ### Example 1: Opening a File 64 | 65 | The following code shows how to open a file in read-only mode: 66 | 67 | ```python 68 | file_object = open("example.txt", "r") 69 | ``` 70 | 71 | ### Example 2: Reading a File 72 | 73 | The following code shows how to read from a file: 74 | 75 | ```python 76 | data = file_object.read() 77 | ``` 78 | 79 | ### Example 3: Writing to a File 80 | 81 | The following code shows how to write to a file: 82 | 83 | ```python 84 | file_object.write("This is some data") 85 | ``` 86 | 87 | ### Example 4: Closing a File 88 | 89 | The following code shows how to close a file: 90 | 91 | ```python 92 | file_object.close() 93 | ``` 94 | 95 | ## Conclusion 96 | 97 | Python File I/O is a powerful tool for manipulating files and data within Python. It is used to open, read, write, and close files in Python. To use it, you need to understand the basic concepts of Python programming like variables, data types, and functions. With Python File I/O, you can create, open, read, write, and close files in Python. -------------------------------------------------------------------------------- /content/posts/python-functions.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Python Functions 3 | date: "2023-05-14" 4 | description: Python Functions are powerful tools for creating reusable code. Learn how to define and use functions to write efficient and maintainable code. 5 | --- 6 | # Python Functions 7 | 8 | ![alt text](https://images.unsplash.com/photo-1583233108489-c354bc72ba18?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxNTY3OTN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODQwNTg1NzV8&ixlib=rb-4.0.3&q=80&w=1080) 9 | 10 | Python functions are a powerful tool for writing code that can be reused in multiple places. A function is a block of code that performs a specific task and returns a value. In Python, functions are created with the `def` keyword and are called by their name. 11 | 12 | Functions are useful for avoiding repetition of code and making code easier to read and maintain. They can also be used to reduce the complexity of a program by breaking it into smaller parts. 13 | 14 | In this article, we will look at how to create Python functions and how to use them effectively. We will also discuss some of the features that make Python functions so powerful. 15 | 16 | ## Defining Functions 17 | 18 | In Python, functions are defined using the `def` keyword followed by the function name and parentheses containing the parameters, if any. The code inside the function is indented and runs when the function is called. 19 | 20 | For example, the following code defines a function that takes two parameters and prints the sum of them. 21 | 22 | ```python 23 | def add_numbers(a, b): 24 | c = a + b 25 | print(c) 26 | ``` 27 | 28 | The parameters `a` and `b` are passed to the function when it is called. The function adds the two parameters and prints the result. 29 | 30 | ## Calling Functions 31 | 32 | Once a function is defined, it can be called by its name, followed by parentheses containing any arguments that are needed. 33 | 34 | For example, to call the `add_numbers` function from above, we would use the following code: 35 | 36 | ```python 37 | add_numbers(2, 3) 38 | ``` 39 | 40 | This code would print the result `5`. 41 | 42 | ## Return Values 43 | 44 | By default, functions return the value `None`. However, you can use the `return` statement to return a value from a function. 45 | 46 | For example, the following code defines a function that takes two parameters and returns the sum of them: 47 | 48 | ```python 49 | def add_numbers(a, b): 50 | c = a + b 51 | return c 52 | ``` 53 | 54 | This function returns the result of the addition rather than printing it. To use this function, we would call it in the same way as before, but assign the result to a variable. 55 | 56 | ```python 57 | result = add_numbers(2, 3) 58 | ``` 59 | 60 | This code would assign the result `5` to the `result` variable. 61 | 62 | ## Keyword Arguments 63 | 64 | Python functions can also take keyword arguments, which are arguments that are specified by name rather than by position. 65 | 66 | For example, the `print()` function takes a keyword argument `end` that specifies the character that should be printed at the end of the line. 67 | 68 | ```python 69 | print("Hello", end="!") 70 | ``` 71 | 72 | This code would print `Hello!` rather than `Hello`. 73 | 74 | ## Default Arguments 75 | 76 | Python functions can have default arguments, which are arguments that are assumed if not specified. 77 | 78 | For example, the `print()` function takes a keyword argument `end` with a default value of `\n` (a new line character). This means that if the `end` argument is not specified, the function will assume it is `\n`. 79 | 80 | ```python 81 | print("Hello") 82 | ``` 83 | 84 | This code would print `Hello\n`. 85 | 86 | ## Variable Number of Arguments 87 | 88 | Python functions can also take a variable number of arguments, which allows them to accept any number of arguments. 89 | 90 | For example, the `print()` function can take any number of arguments and print them, separated by spaces. 91 | 92 | ```python 93 | print("Hello", "world") 94 | ``` 95 | 96 | This code would print `Hello world`. 97 | 98 | ## Anonymous Functions 99 | 100 | Python also supports the creation of anonymous functions, which are functions that are not named. These functions are created using the `lambda` keyword and are often used for short, one-off tasks. 101 | 102 | For example, the following code defines an anonymous function that takes two parameters and returns the sum of them: 103 | 104 | ```python 105 | add_numbers = lambda a, b: a + b 106 | ``` 107 | 108 | This function can be called in the same way as a regular function. 109 | 110 | ```python 111 | result = add_numbers(2, 3) 112 | ``` 113 | 114 | This code would assign the result `5` to the `result` variable. 115 | 116 | ## Conclusion 117 | 118 | Python functions are a powerful tool for writing reusable code. They can be used to reduce complexity and make code easier to read and maintain. 119 | 120 | In this article, we have looked at how to create Python functions and how to use them effectively. We have also discussed some of the features that make Python functions so powerful, such as keyword arguments, default arguments, and variable number of arguments. 121 | 122 | For more information about Python functions, you can refer to the [official Python documentation](https://docs.python.org/3/tutorial/controlflow.html#defining-functions). -------------------------------------------------------------------------------- /content/posts/python-libraries-and-frameworks.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Python Libraries and Frameworks 3 | date: "2023-05-14" 4 | description: Discover the power of Python Libraries and Frameworks - explore the vast array of tools available to help you create powerful applications. 5 | --- 6 | # Python Libraries and Frameworks 7 | ![Python Libraries and Frameworks](https://images.unsplash.com/photo-1645928228632-4e40030abc01?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxNTY3OTN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODQwNTg5MjF8&ixlib=rb-4.0.3&q=80&w=1080) 8 | 9 | Python is a popular programming language due to its simplicity and flexibility. It has a wide range of libraries and frameworks that make development easier and faster. In this article, we will explore the various Python libraries and frameworks and discuss the advantages and disadvantages of each. 10 | 11 | ## What are Python Libraries and Frameworks? 12 | 13 | Python libraries and frameworks are collections of code that provide specific functionality. Libraries are generally used to simplify common tasks, while frameworks are used to provide an overall structure for web and software applications. Python libraries and frameworks are often open-source, meaning that they are freely available to developers. 14 | 15 | ## Popular Python Libraries and Frameworks 16 | 17 | ### SciPy 18 | 19 | SciPy is a popular Python library for scientific computation. It provides a wide range of tools for numerical integration, optimization, linear algebra, and other scientific computing tasks. SciPy is often used in data science and machine learning projects. 20 | 21 | ### NumPy 22 | 23 | NumPy is a library for scientific computing that is built on SciPy. It provides powerful tools for working with multi-dimensional arrays and matrices. NumPy is often used in scientific computing and data analysis projects. 24 | 25 | ### TensorFlow 26 | 27 | TensorFlow is an open-source library for machine learning and deep learning. It provides powerful tools for building neural networks and other machine learning models. TensorFlow is often used in AI and research projects. 28 | 29 | ### Django 30 | 31 | Django is a popular web framework for Python. It provides a powerful set of tools for building web applications such as websites and web services. Django is also often used for data analysis and machine learning projects. 32 | 33 | ### Flask 34 | 35 | Flask is a lightweight web framework for Python. It provides a simple yet powerful set of tools for building web applications. Flask is often used for developing small web applications and APIs. 36 | 37 | ## Advantages and Disadvantages of Python Libraries and Frameworks 38 | 39 | Python libraries and frameworks have several advantages. They are often open-source and freely available, making them easy to use and modify. Additionally, Python libraries and frameworks are often well-documented and backed by a large community of developers, making them easy to learn and use. 40 | 41 | However, Python libraries and frameworks also have some drawbacks. Since they are open-source, they may not be as secure as proprietary libraries and frameworks. Additionally, Python libraries and frameworks are often large and complex, which can make them difficult to learn and understand. 42 | 43 | ## Conclusion 44 | 45 | Python libraries and frameworks are powerful tools for developers. They provide powerful tools for data science, machine learning, web development, and other tasks. While they have some drawbacks, their advantages often outweigh them, making them popular choices for many projects. 46 | 47 | ## References 48 | 49 | - [SciPy](https://scipy.org/) 50 | - [NumPy](https://numpy.org/) 51 | - [TensorFlow](https://www.tensorflow.org/) 52 | - [Django](https://www.djangoproject.com/) 53 | - [Flask](https://flask.palletsprojects.com/en/1.1.x/) -------------------------------------------------------------------------------- /content/posts/python-modules-and-packages.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Python Modules and Packages 3 | date: "2023-05-14" 4 | description: Python Modules and Packages are powerful tools for organizing and sharing code. Learn how to create, import and use them to maximize code efficiency. 5 | --- 6 | # Python Modules and Packages 7 | ![alt text](https://images.unsplash.com/photo-1580674285054-bed31e145f59?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxNTY3OTN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODQwNTg2NTZ8&ixlib=rb-4.0.3&q=80&w=1080 "Python Modules and Packages") 8 | 9 | Python is a versatile programming language with a wide range of applications. One of the main components of Python is the use of modules and packages. Modules and packages allow developers to easily reuse and share code. In this article, we will explore the basics of Python modules and packages and provide examples of how to use them. 10 | 11 | ## What are Modules and Packages? 12 | 13 | Modules and packages are the two main components of the Python language. Modules are single files that contain a set of functions, classes, or variables. Packages are collections of modules that can be imported and used in other Python programs. 14 | 15 | ## How to Create and Import Modules 16 | 17 | Creating a module is easy in Python. All you need to do is create a file with a `.py` extension and save it in the same directory as your other Python programs. You can then use the `import` statement to import the module into your program. 18 | 19 | For example, let's say you want to create a module called `my_module.py`. To do this, you would create a file called `my_module.py` and save it in the same directory as your other Python programs. Then, you can use the `import` statement to import the module like so: 20 | 21 | ```python 22 | import my_module 23 | ``` 24 | 25 | Once imported, you can use any of the functions, classes, or variables defined in the module. 26 | 27 | ## How to Create and Import Packages 28 | 29 | Creating packages is a bit more involved than creating modules. First, you'll need to create a folder on your computer and give it a name. The name of the folder should be the same as the name of the package. Inside the folder, you'll need to create an `__init__.py` file. This file will tell Python that the folder is a package. You can then add Python modules to the package, as well as any other folders or files. 30 | 31 | To import a package, you'll use the `import` statement, just like with modules. However, instead of importing a single module, you'll import the entire package. 32 | 33 | For example, let's say you have a package called `my_package` with a module called `my_module.py` inside it. To import the package, you would use the following code: 34 | 35 | ```python 36 | import my_package 37 | ``` 38 | 39 | Once imported, you can use any of the functions, classes, or variables defined in the modules of the package. 40 | 41 | ## Official References 42 | 43 | Python has official documentation for both modules and packages. You can find the official documentation for modules [here](https://docs.python.org/3/tutorial/modules.html) and the official documentation for packages [here](https://docs.python.org/3/tutorial/modules.html#packages). 44 | 45 | ## Conclusion 46 | 47 | Modules and packages are an essential part of the Python programming language. They allow you to easily reuse and share code, making development faster and more efficient. In this article, we explored the basics of Python modules and packages and provided examples of how to use them. 48 | 49 | If you have any questions or comments, please feel free to leave them in the comments section below. -------------------------------------------------------------------------------- /content/posts/python-object-oriented-programming.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Python Object-Oriented Programming 3 | date: "2023-05-14" 4 | description: Learn the fundamentals of Python Object-Oriented Programming: classes, objects, methods, inheritance and more. 5 | --- 6 | # Python Object-Oriented Programming 7 | ![Photo by Jens Johnsson on Unsplash](https://images.unsplash.com/photo-1531030874896-fdef6826f2f7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxNTY3OTN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODQwNTg3MTN8&ixlib=rb-4.0.3&q=80&w=1080) 8 | 9 | Python is a popular programming language that is used in many fields, such as web development, machine learning, and data science. It is also well-known for its object-oriented programming capabilities. Object-oriented programming (OOP) is a programming paradigm that focuses on the creation and manipulation of objects. It is a powerful tool for developers to use when building complex applications. In this article, we will explore Python's object-oriented programming features and how they can be used to create better, more efficient applications. 10 | 11 | ## What is Object-Oriented Programming? 12 | 13 | Object-oriented programming is a programming paradigm which focuses on the use of objects. Objects are pieces of data that contain both attributes and methods. Attributes are characteristics of the object, such as its color or size, while methods are functions that can be performed on the object, such as printing its attributes or changing them. OOP allows developers to create complex applications by creating objects with specific attributes and methods that can interact with each other. 14 | 15 | ## How Does Python Support Object-Oriented Programming? 16 | 17 | Python is a great language for object-oriented programming. It supports all the major features of OOP, such as classes, objects, inheritance, and polymorphism. Python also provides a number of built-in features to make object-oriented programming easier, such as interfaces, abstract classes, and operator overloading. 18 | 19 | ## Classes 20 | 21 | In Python, classes are used to define objects. A class is a template for an object, and it contains attributes and methods that can be used to manipulate the object. Classes can be used to create objects of the same type. For example, a class can be used to define a "Person" object, and each person object can have different attributes, such as name and age. 22 | 23 | Below is an example of a class that defines a "Person" object. 24 | 25 | ```python 26 | class Person: 27 | def __init__(self, name, age): 28 | self.name = name 29 | self.age = age 30 | 31 | def get_name(self): 32 | return self.name 33 | 34 | def get_age(self): 35 | return self.age 36 | ``` 37 | 38 | In this example, the class "Person" contains the attributes "name" and "age". It also contains two methods, "get_name" and "get_age", which can be used to get the value of the attributes. 39 | 40 | ## Objects 41 | 42 | Objects are instances of classes. They can be created using the class template and can be used to manipulate data. In the example above, we can create a "Person" object using the "Person" class. 43 | 44 | ```python 45 | p1 = Person("John", 25) 46 | p2 = Person("Jane", 22) 47 | ``` 48 | 49 | Here, we have created two objects, "p1" and "p2". We can access their attributes and methods using the dot operator. For example, we can get the name of the person using the "get_name" method: 50 | 51 | ```python 52 | p1.get_name() # returns "John" 53 | p2.get_name() # returns "Jane" 54 | ``` 55 | 56 | ## Inheritance 57 | 58 | Inheritance is a powerful feature of object-oriented programming. It allows classes to inherit attributes and methods from parent classes. This allows developers to create classes that have the same or similar features as other classes. 59 | 60 | In the example below, we have defined a "Student" class that inherits from the "Person" class. 61 | 62 | ```python 63 | class Student(Person): 64 | def __init__(self, name, age, major): 65 | super().__init__(name, age) 66 | self.major = major 67 | 68 | def get_major(self): 69 | return self.major 70 | ``` 71 | 72 | The "Student" class inherits all the attributes and methods from the "Person" class, such as "name" and "get_name". It also has its own attribute, "major", and its own method, "get_major". 73 | 74 | ## Polymorphism 75 | 76 | Polymorphism is another powerful feature of object-oriented programming. It allows objects of different classes to be treated the same way. This allows developers to create code that can handle objects of different classes without having to write separate code for each class. 77 | 78 | In the example below, we have defined two classes, "Person" and "Student". We can create objects of both classes and use them in the same way. 79 | 80 | ```python 81 | p1 = Person("John", 25) 82 | s1 = Student("Jane", 22, "Computer Science") 83 | 84 | people = [p1, s1] 85 | 86 | for person in people: 87 | print(person.get_name()) 88 | ``` 89 | 90 | This code will print the name of both the person and the student. This is because both classes have a "get_name" method, which allows them to be treated the same way. 91 | 92 | ## Conclusion 93 | 94 | Python is a powerful language for object-oriented programming. It supports all the major features of OOP, such as classes, objects, inheritance, and polymorphism. Python also provides a number of built-in features to make object-oriented programming easier, such as interfaces, abstract classes, and operator overloading. By leveraging these features, developers can create more efficient and powerful applications. 95 | 96 | Official References to Python Object-Oriented Programming: 97 | - [Python Documentation](https://docs.python.org/3/tutorial/classes.html) 98 | - [Real Python Object-Oriented Programming Tutorial](https://realpython.com/python3-object-oriented-programming/) -------------------------------------------------------------------------------- /content/posts/python-project-best-practices.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Python Project Best Practices 3 | date: "2023-05-14" 4 | description: Learn the best practices for successful Python projects. Get tips on coding style, structure, testing and more to ensure your project is successful. 5 | --- 6 | # Python Project Best Practices 7 | 8 | ![Cover Image](https://images.unsplash.com/photo-1655780422273-d29c7aab2a04?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxNTY3OTN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODQwNTg5NjV8&ixlib=rb-4.0.3&q=80&w=1080) 9 | 10 | Python is a powerful and versatile programming language. It has become popular among developers due to its ease of use and its wide range of applications. But when it comes to Python project development, there are certain best practices that developers should follow to make sure their projects are successful and secure. 11 | 12 | ## Structure Your Project 13 | 14 | One of the most important best practices for Python projects is to properly structure your project. When planning a Python project, you should make sure that your files are organized in a way that makes sense. This will help you easily locate the files you need and make it easier for other developers to understand your project. 15 | 16 | Your project should consist of separate folders for your source code (the .py files), tests, and documentation. You should also include a readme.md file that explains the purpose of the project and how to get started. Having a well-organized project will make it easier for others to contribute and ensure that everyone is on the same page. 17 | 18 | ## Use Version Control 19 | 20 | Using version control is another important best practice for Python projects. Version control allows you to keep track of changes made to the project, which makes it easier to review the project history and roll back any changes if needed. 21 | 22 | Git is the most popular version control system and is well-suited for Python projects. It allows you to view a timeline of changes, view who made the changes, and easily revert back to an earlier version of the project. 23 | 24 | ## Write Tests 25 | 26 | Writing tests is an important part of any development project and is especially important for Python projects. Tests allow you to make sure that your code is working as expected and will alert you if there are any problems. 27 | 28 | Using a testing framework such as pytest or unittest makes it easy to write unit tests for your code. These tests will check for errors and make sure that your code is working properly. The more tests you write, the easier it will be to identify and fix any bugs in your code. 29 | 30 | ## Use a Virtual Environment 31 | 32 | Using a virtual environment is another important best practice for Python projects. A virtual environment allows you to install and manage packages for your project without affecting the global environment. This makes it easier to manage dependencies, as you can easily install and update packages without worrying about conflicting versions. 33 | 34 | Using a virtual environment also ensures that you are using the correct versions of packages. This makes it easier to reproduce any issues that may arise and makes sure that your project will work on different systems. 35 | 36 | ## Follow Style Guidelines 37 | 38 | Following style guidelines is also important for Python projects. Python has a set of official style guidelines, known as PEP 8, that developers should follow. Following these guidelines will make your code more readable and easier to maintain. 39 | 40 | Using a linter, such as Flake8, is a good way to make sure that your code is following the style guidelines. Linters will check your code for any style violations and alert you if any are found. 41 | 42 | ## Document Your Code 43 | 44 | Documenting your code is another important best practice for Python projects. Documenting your code will make it easier for other developers to understand how your project works and make it easier to find and fix any bugs. 45 | 46 | Using docstrings is the most common way to document your code. Docstrings are short descriptions of functions and classes that explain how they work. Including docstrings in your code will make it easier for other developers to understand your code and make it easier to maintain. 47 | 48 | ## Conclusion 49 | 50 | Following best practices for Python projects is important for any development project. Properly structuring your project, using version control, writing tests, using a virtual environment, following style guidelines, and documenting your code are all important best practices that should be followed. By following these best practices, you can ensure that your Python projects are successful and secure. 51 | 52 | Official References: 53 | 54 | [Python Project Best Practices](https://realpython.com/python-project-structure/) 55 | 56 | [PEP 8 Style Guide](https://www.python.org/dev/peps/pep-0008/) 57 | 58 | [Flake8 Linter](https://flake8.pycqa.org/en/latest/) 59 | 60 | [Docstrings](https://www.python.org/dev/peps/pep-0257/#what-is-a-docstring) -------------------------------------------------------------------------------- /content/posts/the-beginners-guide-to-essential-react-practices.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: "The Beginner's Guide to Essential React Practices" 3 | date: "2023-05-07" 4 | domain: "Learn React" 5 | description: How to Create a Robust React App Using Next.js 6 | --- 7 | # How to Create a Robust React App Using Next.js 8 | 9 | ![](https://images.unsplash.com/photo-1612197527762-8cfb55b618d1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNTY3OTN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODM0Njg1ODY&ixlib=rb-4.0.3&q=80&w=1080) 10 | 11 | Are you looking to create a robust React application using Next.js? Next.js is a powerful framework for developing React applications quickly and efficiently. In this article, we'll cover the basics of Next.js and how to create a robust React app using this framework. 12 | 13 | ## What is Next.js? 14 | 15 | Next.js is a React framework developed and maintained by Vercel. It allows developers to create React applications with minimal setup and configuration. It includes features such as server-side rendering, code splitting, and hot-reloading, making it ideal for building fast and performant applications. 16 | 17 | ## How to Get Started with Next.js 18 | 19 | Getting started with Next.js is simple. All you need to do is install the `next` package from npm. 20 | 21 | ``` 22 | npm install next 23 | ``` 24 | 25 | Once you've installed the `next` package, you can create a new project with the `create-next-app` command. 26 | 27 | ``` 28 | npx create-next-app 29 | ``` 30 | 31 | This command will create a new directory with the necessary files and dependencies to get started with your Next.js project. 32 | 33 | ## How to Create a Robust React App Using Next.js 34 | 35 | Now that you have a basic Next.js project set up, it's time to start building your robust React app. Here are some tips to help you get started: 36 | 37 | ### Use React Hooks 38 | 39 | React hooks are a great way to manage state in your React application. They allow you to write clean and concise code that is easy to maintain. 40 | 41 | ### Use a Styling Library 42 | 43 | Using a styling library such as Emotion or Styled Components will help you keep your styles organized and consistent. It will also make it easier to customize the look and feel of your application. 44 | 45 | ### Use Server-side Rendering 46 | 47 | Server-side rendering allows your application to render the HTML on the server before it is sent to the client. This improves the performance of your application, as the client does not have to wait for the HTML to be generated on the client-side. 48 | 49 | ### Use Code Splitting 50 | 51 | Code splitting allows you to split your application into multiple bundles, which can be loaded asynchronously. This reduces the initial load time of your application, as it only has to download the necessary bundles for the page. 52 | 53 | ### Use Hot Reloading 54 | 55 | Hot reloading allows you to make changes to your code and see the result in real-time without having to refresh the page. This is a great way to speed up your development time. 56 | 57 | ### Use TypeScript 58 | 59 | TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Using TypeScript can help you catch errors earlier and write more maintainable code. 60 | 61 | ## Conclusion 62 | 63 | In this article, we covered how to create a robust React app using Next.js. We discussed tips such as using React hooks, a styling library, server-side rendering, code splitting, hot reloading, and TypeScript. 64 | 65 | If you're looking to build a robust React application, Next.js is a great option. With its features and capabilities, it makes it easy to create performant and maintainable applications. 66 | 67 | Official Reference: [Next.js Documentation](https://nextjs.org/docs/) -------------------------------------------------------------------------------- /contentlayer.config.js: -------------------------------------------------------------------------------- 1 | import { defineDocumentType, makeSource } from "contentlayer/source-files" 2 | 3 | /** @type {import('contentlayer/source-files').ComputedFields} */ 4 | const computedFields = { 5 | slug: { 6 | type: "string", 7 | resolve: (doc) => `/${doc._raw.flattenedPath}`, 8 | }, 9 | slugAsParams: { 10 | type: "string", 11 | resolve: (doc) => doc._raw.flattenedPath.split("/").slice(1).join("/"), 12 | }, 13 | } 14 | 15 | export const Page = defineDocumentType(() => ({ 16 | name: "Page", 17 | filePathPattern: `pages/**/*.mdx`, 18 | contentType: "mdx", 19 | fields: { 20 | title: { 21 | type: "string", 22 | required: true, 23 | }, 24 | description: { 25 | type: "string", 26 | }, 27 | }, 28 | computedFields, 29 | })) 30 | 31 | export const Post = defineDocumentType(() => ({ 32 | name: "Post", 33 | filePathPattern: `posts/**/*.mdx`, 34 | contentType: "mdx", 35 | fields: { 36 | title: { 37 | type: "string", 38 | required: true, 39 | }, 40 | domain: { 41 | type: "string", 42 | }, 43 | description: { 44 | type: "string", 45 | }, 46 | date: { 47 | type: "date", 48 | required: true, 49 | }, 50 | }, 51 | computedFields, 52 | })) 53 | 54 | export default makeSource({ 55 | contentDirPath: "./content", 56 | documentTypes: [Post, Page], 57 | }) 58 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | const { withContentlayer } = require("next-contentlayer") 2 | 3 | /** @type {import('next').NextConfig} */ 4 | const nextConfig = { 5 | reactStrictMode: true, 6 | swcMinify: true, 7 | experimental: { 8 | appDir: true, 9 | }, 10 | } 11 | 12 | module.exports = withContentlayer(nextConfig) 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "auto-content", 3 | "description": "An AI Power content based on Next.js starter for Contentlayer that includes Tailwind CSS, MDX, and TypeScript.", 4 | "version": "0.1.0", 5 | "author": "Anis Marrouchi", 6 | "license": "MIT", 7 | "scripts": { 8 | "dev": "next dev", 9 | "build": "next build", 10 | "preview": "next build && next start", 11 | "start": "next start", 12 | "lint": "next lint", 13 | "generate": "node ./scripts/generate.js", 14 | "build:deploy": "npm run build && npm run deploy", 15 | "deploy": "vercel --prod" 16 | }, 17 | "dependencies": { 18 | "@tailwindcss/typography": "^0.5.9", 19 | "@types/node": "18.16.1", 20 | "@types/react": "18.2.0", 21 | "@types/react-dom": "18.2.1", 22 | "@vercel/analytics": "^1.0.0", 23 | "autoprefixer": "10.4.14", 24 | "contentlayer": "^0.3.2", 25 | "dotenv": "^16.0.3", 26 | "eslint": "8.39.0", 27 | "eslint-config-next": "13.3.1", 28 | "langchain": "^0.0.70", 29 | "next": "13.3.1", 30 | "next-contentlayer": "^0.3.2", 31 | "next-themes": "^0.2.1", 32 | "openai": "3.2.1", 33 | "postcss": "8.4.23", 34 | "react": "18.2.0", 35 | "react-dom": "18.2.0", 36 | "slugify": "^1.6.6", 37 | "tailwindcss": "3.3.2", 38 | "typescript": "5.0.4" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /scripts/generate.js: -------------------------------------------------------------------------------- 1 | // Import required packages 2 | const { Configuration, OpenAIApi } = require("openai"); 3 | const dotenv = require("dotenv"); 4 | const fs = require("fs"); 5 | const slugify = require("slugify"); 6 | // @todo: use langchain: this will be a game changer 7 | 8 | // Load the API key from the .env file 9 | dotenv.config(); 10 | 11 | const configuration = new Configuration({ 12 | apiKey: process.env.OPENAI_API_KEY, 13 | }); 14 | 15 | 16 | const openai = new OpenAIApi(configuration); 17 | 18 | // Load properties from the settings.json file 19 | let properties = JSON.parse(fs.readFileSync("settings.json", "utf-8")); 20 | 21 | const defaultProps = { 22 | type: "Course", 23 | task: "Blog Article Writing", 24 | tone: "Passionate and Urgent", 25 | length: "Medium", 26 | domain: "Next.js", 27 | topic: "Getting started with Next.js: A beginner's guide", 28 | lang: "English", 29 | skill: "Intermediate", 30 | numArticles: 3 31 | }; 32 | 33 | properties = { ...defaultProps, ...properties }; 34 | 35 | const usedSubjects = new Set(); 36 | 37 | async function readSubjectsFromFiles() { 38 | const directory = "content/posts"; 39 | const files = fs.readdirSync(directory); 40 | 41 | files.forEach((file) => { 42 | if (file.endsWith(".mdx")) { 43 | const content = fs.readFileSync(`${directory}/${file}`, "utf-8"); 44 | const descriptionMatch = content.match(/^description:\s*(.+)$/m); 45 | 46 | if (descriptionMatch) { 47 | usedSubjects.add(descriptionMatch[1]); 48 | } 49 | } 50 | }); 51 | } 52 | 53 | async function generateCoverImageUrl(keyword, accessKey) { 54 | const response = await fetch(`https://api.unsplash.com/photos/random?query=${keyword}&client_id=${accessKey}`); 55 | const data = await response.json(); 56 | return data.urls.regular; 57 | } 58 | 59 | async function generateDescription(subject) { 60 | const prompt = `Generate an article short description for the subject ${subject} . Max allowed number of words is 40. Don't use the following characters: ":;{}[]()<>\/"`; 61 | const response = await openai.createCompletion({ 62 | model: "text-davinci-003", 63 | max_tokens: 64, 64 | prompt, 65 | temperature: 0.3 66 | }); 67 | 68 | return response.data.choices[0].text.trim(); 69 | } 70 | 71 | async function generateSubject(domain) { 72 | const prompt = `Generate a blog article subject for the domain: ${domain}. Avoid these subjects: ${Array.from(usedSubjects).join(", ")}. Don't use the following characters :;{}[]()<>\"'`; 73 | const response = await openai.createCompletion({ 74 | model: "text-davinci-003", 75 | max_tokens: 512, 76 | prompt, 77 | temperature: 0.7 78 | }); 79 | 80 | return response.data.choices[0].text.trim(); 81 | } 82 | 83 | async function generateUniqueSubject(domain) { 84 | let subject; 85 | do { 86 | subject = await generateSubject(domain); 87 | } while (usedSubjects.has(subject)); 88 | usedSubjects.add(subject); 89 | return subject; 90 | } 91 | 92 | async function generateArticle(properties) { 93 | 94 | let promptParts = [ 95 | properties.type, 96 | properties.task, 97 | properties.tone, 98 | properties.length, 99 | `on ${properties.domain}`, 100 | `with the topic ${properties.topic}`, 101 | `writing in ${properties.lang}`, 102 | `to an audience with ${properties.skill} skill level`, 103 | `Provide code examples where applicable`, 104 | `include official references to ${properties.topic} with a link if applicable`, 105 | `include a cover image from ${properties.imgUrl} as a centered cover image`, 106 | `use markdown syntax` 107 | ]; 108 | 109 | const filteredPromptParts = promptParts.filter((part) => part.trim() !== ""); 110 | const prompt = "Write a " + filteredPromptParts.join(", ") + "."; 111 | const response = await openai.createCompletion({ 112 | model: "text-davinci-003", 113 | max_tokens: 2048, 114 | prompt, 115 | temperature: 0.7 116 | }); 117 | 118 | return response.data.choices[0].text.trim(); 119 | } 120 | 121 | async function saveArticle(title, description, content) { 122 | const slug = slugify(title, { lower: true, strict: true }); 123 | // @todo: retrieve path and extension from settings.json 124 | let fileName = `content/posts/${slug}.mdx`; 125 | 126 | const currentDate = new Date().toISOString().slice(0, 10); 127 | 128 | const articleContent = `--- 129 | title: ${title} 130 | date: "${currentDate}" 131 | description: ${description} 132 | --- 133 | ${content}`; 134 | 135 | fs.writeFileSync(fileName, articleContent); 136 | console.log(`Saved article: ${fileName}`); 137 | } 138 | 139 | (async () => { 140 | await readSubjectsFromFiles(); 141 | 142 | const domain = properties.domain; 143 | let subject = await generateUniqueSubject(domain); 144 | let numArticles = parseInt(properties.numArticles); 145 | if(properties.topics && properties.topics.length > 0) { 146 | numArticles = properties.topics.length; 147 | } 148 | for (let i = 0; i < numArticles; i++) { 149 | if(properties.topics && typeof properties.topics[i] !== 'undefined') { 150 | subject = properties.topics[i]; 151 | } 152 | console.log("Generated Subject:", subject); 153 | properties.topic = subject; 154 | let description = await generateDescription(subject); 155 | console.log("Generated Description:", description); 156 | const imgUrl = await generateCoverImageUrl(subject, process.env.UNSPLASH_ACCESS_KEY); 157 | properties.imgUrl = imgUrl; 158 | const article = await generateArticle(properties); 159 | 160 | saveArticle(subject, description, article); 161 | } 162 | })(); 163 | -------------------------------------------------------------------------------- /settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "domain": "Python Programming", 3 | "tone": "Passionate and Urgent", 4 | "length": "Long", 5 | "numArticles": 10, 6 | "topics": [ 7 | "Introduction to Python", 8 | "Python Data Types and Variables", 9 | "Python Control Structures", 10 | "Python Functions", 11 | "Python Modules and Packages", 12 | "Python Object-Oriented Programming", 13 | "Python Exception Handling", 14 | "Python File I/O", 15 | "Python Libraries and Frameworks", 16 | "Python Project Best Practices" 17 | ] 18 | } -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: [ 4 | "./app/**/*.{ts,tsx}", 5 | "./components/**/*.{ts,tsx}", 6 | "./content/**/*.{md,mdx}", 7 | ], 8 | darkMode: ["class"], 9 | theme: { 10 | extend: {}, 11 | }, 12 | plugins: [require("@tailwindcss/typography")], 13 | } 14 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true, 17 | "plugins": [ 18 | { 19 | "name": "next" 20 | } 21 | ], 22 | "baseUrl": ".", 23 | "paths": { 24 | "@/*": ["./*"], 25 | "contentlayer/generated": ["./.contentlayer/generated"] 26 | } 27 | }, 28 | "include": [ 29 | "next-env.d.ts", 30 | "**/*.ts", 31 | "**/*.tsx", 32 | ".next/types/**/*.ts", 33 | ".contentlayer/generated" 34 | ], 35 | "exclude": ["node_modules"] 36 | } 37 | --------------------------------------------------------------------------------