diff --git a/package-lock.json b/package-lock.json index 98e888e3c..24ebb8830 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "0.0.0", "license": "MIT", "dependencies": { - "@docusaurus/core": "^3.3.2", + "@docusaurus/core": "^3.4.0", "@docusaurus/plugin-content-pages": "^3.3.2", "@docusaurus/plugin-google-analytics": "^3.3.2", "@docusaurus/plugin-google-gtag": "^3.3.2", @@ -19,6 +19,7 @@ "@docusaurus/plugin-vercel-analytics": "^3.3.2", "@docusaurus/preset-classic": "^3.3.2", "@docusaurus/remark-plugin-npm2yarn": "^3.4.0", + "@docusaurus/theme-classic": "^3.4.0", "@docusaurus/theme-live-codeblock": "^3.3.2", "@docusaurus/theme-mermaid": "^3.3.2", "@docusaurus/theme-search-algolia": "^3.3.2", @@ -2214,7 +2215,6 @@ "version": "3.4.0", "resolved": "https://registry.npmjs.org/@docusaurus/core/-/core-3.4.0.tgz", "integrity": "sha512-g+0wwmN2UJsBqy2fQRQ6fhXruoEa62JDeEa5d8IdTJlMoaDaEDfHh7WjwGRn4opuTQWpjAwP/fbcgyHKlE+64w==", - "license": "MIT", "dependencies": { "@babel/core": "^7.23.3", "@babel/generator": "^7.23.3", @@ -2746,7 +2746,6 @@ "version": "3.4.0", "resolved": "https://registry.npmjs.org/@docusaurus/theme-classic/-/theme-classic-3.4.0.tgz", "integrity": "sha512-0IPtmxsBYv2adr1GnZRdMkEQt1YW6tpzrUPj02YxNpvJ5+ju4E13J5tB4nfdaen/tfR1hmpSPlTFPvTf4kwy8Q==", - "license": "MIT", "dependencies": { "@docusaurus/core": "3.4.0", "@docusaurus/mdx-loader": "3.4.0", diff --git a/package.json b/package.json index d2be3b727..8e67d18fd 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "write-heading-ids": "docusaurus write-heading-ids" }, "dependencies": { - "@docusaurus/core": "^3.3.2", + "@docusaurus/core": "^3.4.0", "@docusaurus/plugin-content-pages": "^3.3.2", "@docusaurus/plugin-google-analytics": "^3.3.2", "@docusaurus/plugin-google-gtag": "^3.3.2", @@ -26,6 +26,7 @@ "@docusaurus/plugin-vercel-analytics": "^3.3.2", "@docusaurus/preset-classic": "^3.3.2", "@docusaurus/remark-plugin-npm2yarn": "^3.4.0", + "@docusaurus/theme-classic": "^3.4.0", "@docusaurus/theme-live-codeblock": "^3.3.2", "@docusaurus/theme-mermaid": "^3.3.2", "@docusaurus/theme-search-algolia": "^3.3.2", diff --git a/src/database/blogs/index.tsx b/src/database/blogs/index.tsx index 8853f8f3f..5bb981861 100644 --- a/src/database/blogs/index.tsx +++ b/src/database/blogs/index.tsx @@ -1,54 +1,140 @@ interface Blog { - id: number; - title: string; - image: string; - description: string; - slug: string; - } + id: number; + title: string; + image: string; + description: string; + slug: string; +} - const blogs: Blog[] = [ - { - id: 1, - title: 'Getting started with Microservices', - image: '/assets/images/image01-736d71e3db56657987594b3b11459b5d.png', - description: 'Microservices are an architectural style that structures an application as a collection of small, loosely coupled services.', - slug: 'getting-started-with-microservices' - }, - { - id: 2, - title: 'Cryptography and Its Use in Cyber Security', - image: '/img/blogs/introduction-to-cryptography-and-cyber-security.jpg', - description: 'In the realm of cyber security, cryptography stands as a critical tool for protecting information.', - slug: 'introduction-to-cryptography-and-cyber-security' - }, - { - id: 3, - title: 'Blog 3 Title', - image: '/img/svg/blogging.svg', - description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.', - slug: '#' - }, - { - id: 4, - title: 'Blog 4 Title', - image: '/img/svg/blogging.svg', - description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.', - slug: '#' - }, - { - id: 5, - title: 'Blog 5 Title', - image: '/img/svg/blogging.svg', - description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.', - slug: '#' - }, - { - id: 6, - title: 'Blog 6 Title', - image: '/img/svg/blogging.svg', - description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.', - slug: '#' - } - ]; +const blogs: Blog[] = [ + { + id: 1, + title: "Building RESTful CRUD API in springboot", + image: "img/blogs/image01.png", + description: + " RESTful APIs have become a cornerstone for building scalable, efficient, and maintainable web applications.", + slug: "Building RESTful CRUD API in springboot", + }, + { + id: 2, + title: "Getting started with Microservices", + image: "/assets/images/image01-736d71e3db56657987594b3b11459b5d.png", + description: + "Microservices are an architectural style that structures an application as a collection of small, loosely coupled services.", + slug: "getting-started-with-microservices", + }, + { + id: 3, + title: "Cryptography and Its Use in Cyber Security", + image: "/img/blogs/introduction-to-cryptography-and-cyber-security.jpg", + description: + "In the realm of cyber security, cryptography stands as a critical tool for protecting information.", + slug: "introduction-to-cryptography-and-cyber-security", + }, + { + id: 4, + title: "Getting started with Mern", + image: "/img/blogs/mern.jpg", + description: + " Learn the basics of the MERN stack, from building an API with Express.js to creating a React app.", + slug: "getting-started-with-mern", + }, + { + id: 5, + title: "Getting started with Vite", + image: "/img/blogs/react-and-vite.jpg", + description: + "Learn how to get started with React by creating a new app using Vite. Follow the steps to set up your development environment", + slug: "getting-started-with-vite", + }, + { + id: 6, + title: "VS Code: Fix Bug in Any Extension by Rebuilding It", + image: "/img/blogs/build-done-vsce.png", + description: + "How to fix a bug in any VS Code extension (.vsix) by rebuilding that extension", + slug: "fix-bug-in-vscode-extension", + }, + { + id: 7, + title: "Dockerizing a Rust application with Multi-Stage Builds", + image: "/img/blogs/rust-docker.png", + description: + "Learn the basics of the MERN stack, from building an API with Express.js to creating a React app.", + slug: "dockerizing-a-rust-application-with-multi-stage-builds", + }, + { + id: 8, + title: "Git Best Practices: Commit Often, Perfect Later, Publish Once", + image: "/img/svg/coding.svg", + description: + "Git is a powerful tool for managing the development of software projects, but it can be challenging to use effectively. ", + slug: "git-best-practicies", + }, + { + id: 9, + title: "Mastering Data Structures in Python", + image: "/img/svg/programming.svg", + description: + "Data structures are essential components in computer science, enabling efficient data storage, manipulation, and retrieval.", + slug: "Mastering Data Structures in Python", + }, + { + id: 10, + title: "Automating Tasks with Python", + image: "/img/svg/progress.svg", + description: + "Automation is a powerful way to boost productivity and efficiency by minimizing manual intervention in repetitive tasks.", + slug: "automating-tasks-with-python", + }, + { + id: 11, + title: "A Beginner’s Guide to the Top 5 React Hooks", + image: "/img/svg/react.svg", + description: + "Since its inception, React has undergone significant evolution, with each new release introducing enhancements and improvements to the framework.", + slug: "Beginner’s Guide to the Top 5 React Hooks", + }, + { + id: 12, + title: "DOM manipulation in JavaScript", + image: "/img/svg/javascript_frameworks.svg", + description: + " This model allows developers to interact with the document programmatically via scripting languages like JavaScript.", + slug: "DOM manipulation in JavaScript", + }, + { + id: 13, + title: "CI evolution: From FTP client to GitHub Action", + image: "/img/svg/dev_productivity.svg", + description: + "In the early days of web development, the most common way to deploy a website was to use an FTP client.", + slug: "from-ftp-client-to-github-action", + }, + { + id: 14, + title: "Getting Started with PostgreSQL", + image: "/img/svg/educator.svg", + description: + "The PostgreSQL language, primarily SQL (Structured Query Language), is the standard language for interacting with the PostgreSQL database.", + slug: "Getting started with PostgreSQL", + }, + { + id: 15, + title: "Getting Started with NextJS", + image: "/img/svg/next_js.svg", + description: + "Next.js is a popular React framework that enables server-side rendering and static site generation, offering an optimized, flexible approach to building modern web applications.", + slug: "Getting-started-with-nextJS", + }, + { + id: 16, + title: "Comprehensive Documentation on Linux Development and Cybersecurity", + image: "/img/svg/developer_activity.svg", + description: + "Renowned for its stability, security, and open-source nature, plays a pivotal role in modern computing environments", + slug: "introduction-to-the-Linux-development-and-cyber-security", + }, +]; - export default blogs; +export default blogs; diff --git a/src/pages/blogs/style.css b/src/pages/blogs/style.css index 532489564..8bdea7fbb 100644 --- a/src/pages/blogs/style.css +++ b/src/pages/blogs/style.css @@ -1,18 +1,17 @@ .blog-page { margin: 2rem 1rem; } -.blog-page .blog-header { + +.blog-page .blog-header { text-align: center; margin: 1rem 0; } .blog-page .blog-header .TitleText { - background: linear-gradient( - 90deg, - rgb(152 0 255) 0%, - rgb(246 41 41) 50%, - rgb(255 169 8) 100% - ); + background: linear-gradient(90deg, + rgb(152 0 255) 0%, + rgb(246 41 41) 50%, + rgb(255 169 8) 100%); background-clip: text; -webkit-text-fill-color: transparent; } @@ -65,4 +64,4 @@ .blog-page .card-container .card .read-more { padding: 0.5rem; -} +} \ No newline at end of file diff --git a/static/img/blogs/build-done-vsce.png b/static/img/blogs/build-done-vsce.png new file mode 100644 index 000000000..7605a5916 Binary files /dev/null and b/static/img/blogs/build-done-vsce.png differ diff --git a/static/img/blogs/image01.png b/static/img/blogs/image01.png new file mode 100644 index 000000000..7f0770caf Binary files /dev/null and b/static/img/blogs/image01.png differ diff --git a/static/img/blogs/mern.jpg b/static/img/blogs/mern.jpg new file mode 100644 index 000000000..336d43594 Binary files /dev/null and b/static/img/blogs/mern.jpg differ diff --git a/static/img/blogs/react-and-vite.jpg b/static/img/blogs/react-and-vite.jpg new file mode 100644 index 000000000..915fdc4a3 Binary files /dev/null and b/static/img/blogs/react-and-vite.jpg differ diff --git a/static/img/blogs/rust-docker.png b/static/img/blogs/rust-docker.png new file mode 100644 index 000000000..2d6ab6149 Binary files /dev/null and b/static/img/blogs/rust-docker.png differ