diff --git a/content/blog/everything-you-need-to-know-about-modern-html/index.md b/content/blog/everything-you-need-to-know-about-modern-html/index.md index c714718..abd1a23 100644 --- a/content/blog/everything-you-need-to-know-about-modern-html/index.md +++ b/content/blog/everything-you-need-to-know-about-modern-html/index.md @@ -3,7 +3,7 @@ title: "Everything you need to know about modern HTML" description: "For web dev. HTML is a must. Here's how you can learn and use modern HTML in your projects." date: "2021-05-22" author: "Saroj Kumar" -tags: ["Tips & Tricks","Web"] +tags: ["Tips & Tricks", "Web"] --- Helloo Guys !!
Hope you are all in Good Health and Enjoying the Quarantine. @@ -12,12 +12,11 @@ This post is about beginners who are just starting their career as a Web develop # Quick Intro - -> HTML5 is the latest evolution of the standard that defines HTML. The term represents two different concepts. It is a new version of the language HTML, with new elements, attributes, and behaviors, and a larger set of technologies that allows the building of more diverse and powerful Web sites and applications.
- *MDN* +> HTML5 is the latest evolution of the standard that defines HTML. The term represents two different concepts. It is a new version of the language HTML, with new elements, attributes, and behaviors, and a larger set of technologies that allows the building of more diverse and powerful Web sites and applications.
- _MDN_ Though, there are limited restrictions in writing HTML code. But, following the general conventions of programming is recommended. -# Basic Rules to Follow +# Basic Rules to Follow While writing HTML markup or any programming language in general, you need to follow the basics that i'm listing below. @@ -30,17 +29,17 @@ While writing HTML markup or any programming language in general, you need to fo HTML is a markup language that is used for creating web pages that displaying content on a browser.
It consists of some elements called tags that describe the structure of that web page. -Some of the basics tags that are used to create a web page are *`html`*, *`head`*, *`body`*, *`h1`* ... *`h6`*, *`p`*, *`a`*, *`img`* etc.
+Some of the basics tags that are used to create a web page are _`html`_, _`head`_, _`body`_, _`h1`_ ... _`h6`_, _`p`_, _`a`_, _`img`_ etc.
Some tags are paired tags that have an opening tag and an closing tag, some tags are self closed. A basic html code will look like this: ```html - -

This is a Heading

-

This is a paragraph - + +

This is a Heading

+

This is a paragraph

+ ``` @@ -59,37 +58,37 @@ After you learn the basics of HTML and How to write documents or web pages using ## Semantics -HTML5 introduced some semantic tags that replaced the old school way of writing HTML code. Earlier we used a tag called *`div`* for outlining and sectioning in the Web, which replaced by tags like *`header`*, *`section`*, *`article`*, *`main`*, *`aside`*, *`footer`* etc.
These tags are just same as *`div`* but provide meaning to the content. +HTML5 introduced some semantic tags that replaced the old school way of writing HTML code. Earlier we used a tag called _`div`_ for outlining and sectioning in the Web, which replaced by tags like _`header`_, _`section`_, _`article`_, _`main`_, _`aside`_, _`footer`_ etc.
These tags are just same as _`div`_ but provide meaning to the content. ## Connectivity -New *Web sockets* and *WebRTC (Web Real-Time-Communication)* features let client and server interaction along with peer to peer communication possible without installing any extensions. +New _Web sockets_ and _WebRTC (Web Real-Time-Communication)_ features let client and server interaction along with peer to peer communication possible without installing any extensions. ## Offline and Storage -New *Online and Offline events* let webpages know whether there is active internet connection or not. +New _Online and Offline events_ let webpages know whether there is active internet connection or not. -Now clientStorages like *sessionStorage*, *localStorage*, *indexedDB* provide client side persistent data storage and better caching. +Now clientStorages like _sessionStorage_, _localStorage_, _indexedDB_ provide client side persistent data storage and better caching. ## Multimedia -New HTML5 *`audio`* and *`video`* tags allow embedding and controlling audio and video media directly in the web page. +New HTML5 _`audio`_ and _`video`_ tags allow embedding and controlling audio and video media directly in the web page. -There are additional tags like *`source`* and *`track`* which is used to add more functionality to the web component. +There are additional tags like _`source`_ and _`track`_ which is used to add more functionality to the web component. -Camera API and WebRTC features allow using computer's camera and comunicating through video conferencing respectively. +Camera API and WebRTC features allow using computer's camera and comunicating through video conferencing respectively. ## 2D/3D -New *`canvas`* tag is now used to draw objects and animations in the web. +New _`canvas`_ tag is now used to draw objects and animations in the web. -By using new [*WebGL*](https://developer.mozilla.org/en-US/docs/WebGL) we can now bring 3D Graphics in the Web. +By using new [_WebGL_](https://developer.mozilla.org/en-US/docs/WebGL) we can now bring 3D Graphics in the Web. -*SVG* images now can be directly embedded in the Web Pages. More on it later. +_SVG_ images now can be directly embedded in the Web Pages. More on it later. ## Additional -We have performance improvement like *Web Worker*, *XMLHttpRequest*, *History and FullScreen API*, *Drag and Drop* etc. and Device Access like *touch events*, *geolocations*, and *Camera API* are the important features. +We have performance improvement like _Web Worker_, _XMLHttpRequest_, _History and FullScreen API_, _Drag and Drop_ etc. and Device Access like _touch events_, _geolocations_, and _Camera API_ are the important features. There is a huge improvement in CSS referred as CSS3 which now has a lot of new Features in background styling, animations and Typography. @@ -99,41 +98,40 @@ I really want to teach you more on these Topics. So, I am keeping them for futur Apart from semantic tags discussed above, Here are some of the new HTML tags that you should possibly replace while writing HTML Code. -| Tag | Description | -|--------------|-----------------------------------------------------------------------------------------------------| +| Tag | Description | +| --------------- | --------------------------------------------------------------------------------------------------- | | <bdi> | Isolates a part of text that might be formatted in a different direction from other text outside it | | <details> | Defines additional details that the user can view or hide | -| <summary> | Defines a visible heading for a <details> element | +| <summary> | Defines a visible heading for a <details> element | | <dialog> | Defines a dialog box or window | | <figure> | Defines self-contained content | -| <figcaption> | Defines a caption for a <figure> element | +| <figcaption> | Defines a caption for a <figure> element | | <mark> | Defines marked/highlighted text | | <meter> | Defines a scalar measurement within a known range (a gauge) | | <progress> | Represents the progress of a task | | <time> | Defines a date/time | | <wbr> | Defines a possible line-break | -| <datalist> | Specified options show as suggestions while typing in an input field | +| <datalist> | Specified options show as suggestions while typing in an input field | # Using Attributes As now you know where and how to use new HTML5 tags, let's see how you can write attributes. -Attributes are very important for any tag to be effectiively useful for the web page. General attributes like *`bgcolor`*, *`height`*, *`align`*, *`cellpadding`* etc are no longer used and replaced by CSS. So, it's a good practice to keep track of what attribute to use and what not. There are alternative attributes like *`style`* which provide the same functionality. There are some attributes which does not require any value. e.g.- *`controls`*, *`allowfullscreen`*, *`autoplay`*, *`autocomplete`*. - -There are special attributes like _data-\*_ and _aria-* (Accessible Rich Internet Applications)_.
data-* is used to store custom data private to web page.
aria-* is used for accessibility support like screen readers, text-to-speech, magnifiers etc. +Attributes are very important for any tag to be effectiively useful for the web page. General attributes like _`bgcolor`_, _`height`_, _`align`_, _`cellpadding`_ etc are no longer used and replaced by CSS. So, it's a good practice to keep track of what attribute to use and what not. There are alternative attributes like _`style`_ which provide the same functionality. There are some attributes which does not require any value. e.g.- _`controls`_, _`allowfullscreen`_, _`autoplay`_, _`autocomplete`_. -[Read More about _data-*_](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*)
-[Read More about _aria-*_](https://www.lullabot.com/articles/what-heck-aria-beginners-guide-aria-accessibility) +There are special attributes like _data-\*_ and _aria-\* (Accessible Rich Internet Applications)_.
data-_ is used to store custom data private to web page.
aria-_ is used for accessibility support like screen readers, text-to-speech, magnifiers etc. +[Read More about _data-\*_](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*)
+[Read More about _aria-\*_](https://www.lullabot.com/articles/what-heck-aria-beginners-guide-aria-accessibility) > Learn about writing better meta/information about the web page you are developing. Its always a good practice to write as much as additional information about the page in the `head`. That's it for this post. Let me know if you find these useful. -### References: +# References: [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5) If you like the post, feel free to share it. -**Thank You** \ No newline at end of file +**Thank You** diff --git a/content/blog/getting-started-with-powershell/index.md b/content/blog/getting-started-with-powershell/index.md index 73735d5..f8633c9 100644 --- a/content/blog/getting-started-with-powershell/index.md +++ b/content/blog/getting-started-with-powershell/index.md @@ -3,7 +3,7 @@ title: "Getting Started with PowerShell" description: "Day to day tasks take a lot of manual efforts and time, which we can reduce by automation using scripts. Here's How." date: "2022-04-03" author: "Saroj Kumar" -tags: ["Automation","Windows","Powershell"] +tags: ["Automation", "Windows", "Powershell"] --- **Automation is the FUTURE!** @@ -24,34 +24,32 @@ With system level access, the performance is high and with a lot of built in fea Powershell is most useful for managing and automating Microsft environments. It helps users automate repeatitive and time-consuming tasks and tasks such as user management, CI/CD, managing cloud services, finding, filtering, expoorting information, interacting with system apps and more. - Let's see how we can use it. Every windows device such as Windows 7,8,10, Windows Server 2008, Windows Server 2012 R2 and more have pre-installed PowerShell. -### Checking if powershell installed or not +## Checking if powershell installed or not On your system, click on `Win` key and type 'powershell'. You will see some suggestions as below: ![PowerShell](powershell-search.png?v=1) -You see a bunch of powershell apps such as *Windows PowerShell* and *Windows PowerShell ISE*. +You see a bunch of powershell apps such as _Windows PowerShell_ and _Windows PowerShell ISE_. -*ISE* stands for *Integrated Scripting Environment*. +_ISE_ stands for _Integrated Scripting Environment_. -*Windows PowerShell ISE* provides you a environment for writing scripts while you can use *Windows PowerShell* as a command shell. +_Windows PowerShell ISE_ provides you a environment for writing scripts while you can use _Windows PowerShell_ as a command shell. > Other than running commands or writing script, we can test, debug our scripts in ISE. Now that you know powershell is installed, let's write some scripts. -### Writing PowerShell Script +## Writing PowerShell Script -Open *PowerShell ISE*. You will see something like this: +Open _PowerShell ISE_. You will see something like this: ![PowerShell App](powershell-app.png?v=1) - On the script pane, type `hostname`. Then, on the top you can see two little green play buttons. 1st one is for running whole file and 2nd one is for running only the selected script. Click on the first play button, to run whole script. You will see your HostName on the left side PowerShell Terminal. @@ -62,7 +60,7 @@ Powershell can run Command Prompt commands as well as PowerShell Code. Unlike other programming/scripting languages, it also has DATATYPES, OPERATORS, DATA STRUCTURES, FUNCTIONS, CONDITIONALS(If, For, ForEach, While, Do-While), CLASSES. Additionally, It has commandlets(cmdlets),libraries and modules. -### Variables and Datatypes +## Variables and Datatypes We declare varibales or assign values in PowerShell, in this way, @@ -87,7 +85,7 @@ Write-Host $Var_Text Here, Write-Host is a builtin cmdlet in PowerShell, that prints a variable to terminal. More on cmdlets later. -### Conditinals and Functions +## Conditinals and Functions The basic systax is similar to the other programming/scripting languages, only with Capitalization ;p @@ -98,7 +96,7 @@ If($true<#Condition#>){ #Action } -for ($i = 1; $i -lt 10; $i++){ +for ($i = 1; $i -lt 10; $i++){ Write-Host $i } @@ -114,11 +112,11 @@ function MyFunction ($Param1, $Param2){ # MyFunction -Param1 -Param2 ``` -### Using CommandLets(cmdlets) +## Using CommandLets(cmdlets) PowerShell has a builtin cmdlet for Every Operation you might perform on a Windows Device. -E.g. *Fetching a list of files present in a Folder* (Similar to *dir* for cmd.) +E.g. _Fetching a list of files present in a Folder_ (Similar to _dir_ for cmd.) ```powershell Get-ChildItem -Path "path/to/folder" @@ -129,6 +127,7 @@ To Avail all the list of cmdlets we can run below command: ```powershell Get-Command -CommandType Cmdlet ``` + OR to check if a specific command exists or not, type: ```powershell @@ -147,7 +146,7 @@ If you want to read book: # Bonus Tips -> PowerShell is built on .NET. So, it has support of .NET which we can use to extend our possibility of automation and *Save the Day!* +> PowerShell is built on .NET. So, it has support of .NET which we can use to extend our possibility of automation and _Save the Day!_ > Use can install powershell on other platforms like linux and run powershell scripts/cmdlets. @@ -157,4 +156,4 @@ That's it for this post. Let me know if you find these useful. See you on the ne If you like the post, feel free to share it. -**Thank You** \ No newline at end of file +**Thank You** diff --git a/content/blog/how-to-start-front-end-web-development/index.md b/content/blog/how-to-start-front-end-web-development/index.md index c0e5374..a729271 100644 --- a/content/blog/how-to-start-front-end-web-development/index.md +++ b/content/blog/how-to-start-front-end-web-development/index.md @@ -3,7 +3,7 @@ title: "How to Start Front-end Web Development" description: "This post is perfect for you, if you want to start Front-end Web Development. It gives you a head-start, roadmap and resources to start your web dev journey." date: "2021-04-03" author: "Saroj Kumar" -tags: ["Tips & Tricks","Web"] +tags: ["Tips & Tricks", "Web"] --- Hey Guys! I am starting a new Series on Fundamentals of Web Development from scratch and here is the first post that describes everything you need to know about Front-end Web Development. @@ -21,10 +21,10 @@ You need to learn Languages that are used to create a page/document that can be Below mentioned items are the starting point of your Great Journey! Get a hands on to these. 1. A Code Editor (Any of your choice) - - Atom - - Visual Studio Code - - Sublime Text - - Brackets + - Atom + - Visual Studio Code + - Sublime Text + - Brackets 2. Understanding of CLI (Command-line Interface) to fasten your workflow. 3. Browsers and DevTools @@ -56,7 +56,7 @@ While working with Web Development, if you are stuck at some point, these sites # What to Learn after that: -### Version Control System (git, GitHub) +## Version Control System (git, GitHub) You must have knowledge about version control systems like `git` which will fasten your work and let you work on your project the way you like. @@ -72,13 +72,13 @@ There are a number of sites/services that provide git solution, like 8. [AWS CodeCommit](https://aws.amazon.com/codecommit/) 9. [GitKraken](https://www.gitkraken.com/) -### npm (Node Package Manager) +## npm (Node Package Manager) Node Package Manager is very common around every project you are going to face in life. So, be a good friends with `npm`. There are tons of packages available in `npm` that make our projects easier to work with. [Read More](https://docs.npmjs.com/) -### Libraries and Frameworks +## Libraries and Frameworks As we are talking about `npm`, lets take a moment to dive in. Libraries and Frameworks are the pre-built files and tools that can be used in our project to reduce the workload. @@ -93,13 +93,12 @@ Here are some of the sites that help deploying your static site real quick, and - [Netlify](https://netlify.com) - [GitHub Pages](https://pages.github.com/) - [AWS Amplify](https://aws.amazon.com/amplify/) -- [Surge](https://surge.sh/) (*Best for Quick Deploy*) +- [Surge](https://surge.sh/) (_Best for Quick Deploy_) - [Aerobatic](https://www.aerobatic.com/) - [zeit.co](https://zeit.co/) - That's all for the first post. In the upcoming posts, we will explore more on Web Languages. If you like the post, feel free to share it. -**Thank You** \ No newline at end of file +**Thank You** diff --git a/content/blog/laravel-swagger-integration/index.md b/content/blog/laravel-swagger-integration/index.md index c17dd28..c1b55c7 100644 --- a/content/blog/laravel-swagger-integration/index.md +++ b/content/blog/laravel-swagger-integration/index.md @@ -10,25 +10,12 @@ tags: ["PHP", "Laravel", "Web", "REST-API", "Swagger"] Leverage the power of Laravel and the Swagger tool with this comprehensive guide on Laravel Swagger Integration. Explore the step-by-step process of creating detailed REST API documentation effortlessly, ensuring seamless communication and understanding of your Laravel-based APIs. - - - - # Introduction Welcome to the world of Laravel Swagger Integration 2024! This guide will show you how to effortlessly combine Laravel, a powerful PHP framework, with Swagger, a user-friendly tool for API documentation. Whether you're a seasoned developer or just starting out, this guide will walk you through the basics, highlight the perks of using Laravel and Swagger together, and provide a step-by-step roadmap for seamless integration. So, buckle up as we embark on a journey to enhance your Laravel development experience and make API documentation a piece of cake! - - # What is Laravel?

Laravel Logo

@@ -37,83 +24,85 @@ Laravel is a powerful and elegant PHP web application framework that facilitates Whether you're building small projects or large-scale applications, Laravel provides a clean and enjoyable development experience. Its features include an expressive ORM (Eloquent), a robust routing system, middleware support, Blade templating engine, and seamless integration with tools like Composer for dependency management. [Read More About Laravel](https://laravel.com/docs/). - - # What is Swagger? ![Swagger](image1.png) +

[ Swagger API DOCs UI ]

Swagger is a tool that acts like a helpful guide for developers in the realm of web development. It's akin to a well-organized manual that explains how to use web APIs in a clear and understandable manner. This tool ensures that developers and users can easily comprehend the ins and outs of an API—what data to send, where to send it, and what to expect in return. In simpler terms, Swagger streamlines the process of creating comprehensive API documentation, making it akin to a user-friendly map for navigating the landscape of web development. [Read More About Swagger](https://swagger.io/docs/) # Advantages of Integrating Swagger with Laravel + Integrating Swagger with Laravel offers several advantages, enhancing the development and documentation process of web APIs. Here are some key benefits: -**1. Clear API Documentation:** +1. **Clear API Documentation:** -Swagger provides a standardized and visually appealing way to document APIs. Integration with Laravel ensures that your API documentation is clear, concise, and easy to understand for both developers and API consumers. + Swagger provides a standardized and visually appealing way to document APIs. Integration with Laravel ensures that your API documentation is clear, concise, and easy to understand for both developers and API consumers. -**2. Interactive API Exploration:** +2. **Interactive API Exploration:** -Swagger generates an interactive API explorer, allowing developers to interact with and test API endpoints directly from the documentation. This feature simplifies the debugging process and accelerates API development. + Swagger generates an interactive API explorer, allowing developers to interact with and test API endpoints directly from the documentation. This feature simplifies the debugging process and accelerates API development. -**3. Automatic Documentation Updates:** +3. **Automatic Documentation Updates:** -With Laravel and Swagger integration, your API documentation is automatically updated as you modify your code. This reduces the likelihood of documentation becoming outdated, ensuring that developers always have accurate information. + With Laravel and Swagger integration, your API documentation is automatically updated as you modify your code. This reduces the likelihood of documentation becoming outdated, ensuring that developers always have accurate information. -**4. Consistent API Design:** +4. **Consistent API Design:** Swagger enforces consistency in API design by providing a standardized format for documenting endpoints, request parameters, and responses. This consistency is beneficial for maintaining a cohesive and well-structured API. -**5. Client Code Generation:** - -Swagger supports the generation of client code in various programming languages based on the API documentation. This feature streamlines the development process for API consumers, as they can generate code snippets tailored to their preferred language. +5. **Client Code Generation:** -**6. Improved Collaboration:** + Swagger supports the generation of client code in various programming languages based on the API documentation. This feature streamlines the development process for API consumers, as they can generate code snippets tailored to their preferred language. -Integration with Swagger enhances collaboration between development teams and stakeholders. Clear and updated documentation facilitates communication by providing a shared understanding of the API's functionality and usage. +6. **Improved Collaboration:** -**7. Testing and Validation:** + Integration with Swagger enhances collaboration between development teams and stakeholders. Clear and updated documentation facilitates communication by providing a shared understanding of the API's functionality and usage. -Swagger allows developers to define and validate API request and response formats. This ensures that data is correctly formatted and reduces the likelihood of errors in API interactions. +7. **Testing and Validation:** -**8. Enhanced Security:** + Swagger allows developers to define and validate API request and response formats. This ensures that data is correctly formatted and reduces the likelihood of errors in API interactions. -Swagger documentation can include information about authentication and authorization mechanisms. This helps developers and security professionals understand and implement the necessary security measures for the API. +8. **Enhanced Security:** -**9. Standardized OpenAPI Specification:** + Swagger documentation can include information about authentication and authorization mechanisms. This helps developers and security professionals understand and implement the necessary security measures for the API. -Swagger follows the OpenAPI Specification, a widely adopted industry standard for API documentation. This standardization promotes interoperability and allows for the integration of various tools and libraries that support the OpenAPI Specification. +9. **Standardized OpenAPI Specification:** -**10. Time and Resource Efficiency:** + Swagger follows the OpenAPI Specification, a widely adopted industry standard for API documentation. This standardization promotes interoperability and allows for the integration of various tools and libraries that support the OpenAPI Specification. -Laravel Swagger integration reduces the time and resources required for manually creating and updating API documentation. This automation allows developers to focus more on coding and less on documentation maintenance. +10. **Time and Resource Efficiency:** + Laravel Swagger integration reduces the time and resources required for manually creating and updating API documentation. This automation allows developers to focus more on coding and less on documentation maintenance. # Requirements and Setup for Laravel Swagger -***Requirements for Laravel Swagger Integration:*** - - [Laravel Framework](https://laravel.com/) - - [Composer](https://getcomposer.org/) - - Swagger/OpenAPI Specification - - Swagger UI Package (If not using Laravel Sanctum) - - Text Editor or IDE([Visual Studio Code](https://code.visualstudio.com/download), [Atom Editor](https://atom.en.lo4d.com/windows))etc. - - [XAMPP Tool](https://www.apachefriends.org/download.html) +**_Requirements for Laravel Swagger Integration:_** -***Developer Should Know to Start Integrations*** - - Laravel Basics - - API Concepts - - Basic Composer Commands - - Swagger/OpenAPI Understanding - - Middleware in Laravel - - Command Line Proficiency - - Working with Laravel and Database +- [Laravel Framework](https://laravel.com/) +- [Composer](https://getcomposer.org/) +- Swagger/OpenAPI Specification +- Swagger UI Package (If not using Laravel Sanctum) +- Text Editor or IDE([Visual Studio Code](https://code.visualstudio.com/download), [Atom Editor](https://atom.en.lo4d.com/windows))etc. +- [XAMPP Tool](https://www.apachefriends.org/download.html) +**_Developer Should Know to Start Integrations_** + +- Laravel Basics +- API Concepts +- Basic Composer Commands +- Swagger/OpenAPI Understanding +- Middleware in Laravel +- Command Line Proficiency +- Working with Laravel and Database # Step-by-Step Guide for Laravel Swagger Integration. + Integrating Swagger with Laravel involves a few steps to generate API documentation for your Laravel application. Here's a step-by-step guide: -### 1. Install Laravel Project +## 1. Install Laravel Project + ```cmd composer global require laravel/installer @@ -130,12 +119,12 @@ After the project has been created, start Laravel's local development server usi ```cmd cd laravel-swagger-api-docs - + php artisan serve ``` -### 2. Database Configuration in laravel +## 2. Database Configuration in laravel Open the .env file in the root of your Laravel project. This file contains environment-specific configuration, including database settings. Set the following parameters: @@ -147,7 +136,9 @@ DB_DATABASE=your_database_name DB_USERNAME=your_database_username DB_PASSWORD=your_database_password ``` -***Example:*** + +**_Example:_** + ```'':title=.env DB_CONNECTION=mysql DB_HOST=127.0.0.1 @@ -159,8 +150,7 @@ DB_PASSWORD=1234 To create a database for a Laravel project, you'll need a database management system (DBMS) and a local development environment. Laravel supports various database systems, but MySQL is commonly used. So Install XAMPP or any DBMS. - -### 3. Install Laravel Passport and Configuration +## 3. Install Laravel Passport and Configuration Laravel Passport, which is a Laravel package for API authentication using OAuth2. The below command will download and install the Passport package and its dependencies. @@ -169,7 +159,8 @@ composer require laravel/passport php artisan passport:install ``` -After install Update */config/database.php* file below 2 lines. + +After install Update _/config/database.php_ file below 2 lines. ```php:title=/config/database.php 'mysql' => [ @@ -178,13 +169,13 @@ After install Update */config/database.php* file below 2 lines. ] ``` -***php artisan migrate*** is a Laravel command that applies pending database migrations, creating or updating database tables based on defined schema changes in your application. Here, we are using the default migration file and its related table. +**_php artisan migrate_** is a Laravel command that applies pending database migrations, creating or updating database tables based on defined schema changes in your application. Here, we are using the default migration file and its related table. ```cmd php artisan migrate ``` -Open your App\User model and make sure it implements the Laravel\Passport\HasApiTokens trait. In *\app\Models\User.php* use **Passport** instend of **Sanctum** for HasApiTokens. +Open your App\User model and make sure it implements the Laravel\Passport\HasApiTokens trait. In _\app\Models\User.php_ use **Passport** instend of **Sanctum** for HasApiTokens. ```php:title=/app/Models/User.php use Laravel\Passport\HasApiTokens; @@ -195,7 +186,7 @@ class User extends Authenticatable } ``` -Update *config/auth.php* +Update _config/auth.php_ ```php:title=/config/auth.php 'guards' => [ @@ -211,7 +202,7 @@ Update *config/auth.php* ], ``` -### 4. Install Swagger Required Packages and it's Configuration +## 4. Install Swagger Required Packages and it's Configuration Install the necessary packages for Swagger integration: @@ -225,9 +216,9 @@ Publish the configuration file to customize Swagger settings: php artisan vendor:publish --provider "L5Swagger\L5SwaggerServiceProvider" ``` -This will create a *config/l5-swagger.php* file. +This will create a _config/l5-swagger.php_ file. -Configure *l5-swagger.php*. Open the generated */config/l5-swagger.php* file and uncomment the below line of code. +Configure _l5-swagger.php_. Open the generated _/config/l5-swagger.php_ file and uncomment the below line of code. ```php:title=/config/l5-swagger.php /* Open API 3.0 support */ @@ -248,7 +239,7 @@ Configure *l5-swagger.php*. Open the generated */config/l5-swagger.php* file and ``` -### 5. Create Routes +## 5. Create Routes ```php:title=/routes/api.php use App\Http\Controllers\Api\AuthController; @@ -257,13 +248,13 @@ Route::post('login', [AuthController::class, 'login']); Route::post('register', [AuthController::class, 'register']); ``` -### 6. Create User Registration and Login Controller +## 6. Create User Registration and Login Controller ```cmd php artisan make:controller Api/AuthController ``` -### 7. Implement User Registration and Login Logic. +## 7. Implement User Registration and Login Logic. ```php:title=/app/Http/Controllers/Api/AuthController.php json(['sucess'=>$sucess]); } - // Login API + // Login API /** * @OA\Post( * path="/api/login", @@ -398,11 +389,11 @@ php artisan make:controller Api/AuthController return response()->json(["success" => $sucess], 200); } } - + } ``` -### 8. Update Version in \app\Http\Controllers\Controller.php file +## 8. Update Version in \app\Http\Controllers\Controller.php file ```php:title=/app/Http/Controllers/Controller.php [ Swagger API DOCs Image-1 ]

![Swagger3](image3.png) +

[ Swagger API DOCs Image-2 ]

![Swagger4](image4.png) +

[ Swagger API DOCs Image-3 ]

> Notes: -```cmd -rem These commands clear specific Laravel caches: +These commands clear specific Laravel caches: +```cmd php artisan cache:clear: Clears the application cache. php artisan route:clear: Clears the route cache. php artisan config:clear: Clears the configuration cache. ``` -### Click Here for [Source Code](https://github.com/AnshumanBharatiya/laravel-swagger-api-docs "GitHub") +## Click Here for [Source Code](https://github.com/AnshumanBharatiya/laravel-swagger-api-docs "GitHub") # Conclusion @@ -473,8 +465,8 @@ In the realm of web development, the fusion of Laravel with Swagger in 2024 emer
-***Posted By ~ Anshuman Bharatiya on Monday, 1st January 2024*** +**_Posted By ~ Anshuman Bharatiya on Monday, 1st January 2024_** -***If you like this post, feel free to share it.*** +**_If you like this post, feel free to share it._** -***Thank You*** \ No newline at end of file +**_Thank You_** diff --git a/gatsby-config.js b/gatsby-config.js index d65b831..b6a7494 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -53,6 +53,12 @@ module.exports = { resolve: `gatsby-transformer-remark`, options: { plugins: [ + { + resolve: "gatsby-remark-autolink-headers", + options: { + className: "blog_head_anchor", + }, + }, { resolve: "gatsby-remark-code-titles", options: { diff --git a/package.json b/package.json index f644588..b913914 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "gatsby-plugin-robots-txt": "^1.8.0", "gatsby-plugin-sharp": "^5.11.0", "gatsby-plugin-sitemap": "^6.11.0", + "gatsby-remark-autolink-headers": "^6.13.0", "gatsby-remark-code-titles": "^1.1.0", "gatsby-remark-images": "^7.11.0", "gatsby-remark-prismjs": "^7.11.0", diff --git a/src/components/Seo.tsx b/src/components/Seo.tsx index cd423b6..305bdcd 100644 --- a/src/components/Seo.tsx +++ b/src/components/Seo.tsx @@ -37,7 +37,9 @@ const Seo = ({ description, title, children }: SEOProps) => { return ( <> - {defaultTitle ? `${title} | ${defaultTitle}` : title} + + {defaultTitle ? `${title} - ${defaultTitle}'s Portfolio` : title} +
-
+ + + list_alt + + TABLE OF CONTENTS + + } + > +
+ +
@@ -138,7 +161,7 @@ const BlogPostTemplate = ({ export const Head = ({ data: { markdownRemark: post } }) => { return ( ) @@ -162,6 +185,7 @@ export const pageQuery = graphql` description tags } + tableOfContents fields { slug readingTime { diff --git a/yarn.lock b/yarn.lock index 630016e..8e0ea9f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5499,6 +5499,17 @@ gatsby-react-router-scroll@^6.11.0: "@babel/runtime" "^7.20.13" prop-types "^15.8.1" +gatsby-remark-autolink-headers@^6.13.0: + version "6.13.0" + resolved "https://registry.yarnpkg.com/gatsby-remark-autolink-headers/-/gatsby-remark-autolink-headers-6.13.0.tgz#ea25524d398db81566f0fbc0f75fa0636182bf95" + integrity sha512-F/JbuZs0FjHOks4Y/rNSWAfY5/o6TEZeamr0st0Etgs087ipFqw6Q4ug4+pmoazwQxebLn7d/+PgGxbm9PE9Eg== + dependencies: + "@babel/runtime" "^7.20.13" + github-slugger "^1.5.0" + lodash "^4.17.21" + mdast-util-to-string "^2.0.0" + unist-util-visit "^2.0.3" + gatsby-remark-code-titles@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/gatsby-remark-code-titles/-/gatsby-remark-code-titles-1.1.0.tgz#1b7246e4ac78669c1ca7c18ea70c3dd11fede139" @@ -5889,7 +5900,7 @@ github-from-package@0.0.0: resolved "https://registry.yarnpkg.com/github-from-package/-/github-from-package-0.0.0.tgz#97fb5d96bfde8973313f20e8288ef9a167fa64ce" integrity sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw== -github-slugger@^1.2.1: +github-slugger@^1.2.1, github-slugger@^1.5.0: version "1.5.0" resolved "https://registry.yarnpkg.com/github-slugger/-/github-slugger-1.5.0.tgz#17891bbc73232051474d68bd867a34625c955f7d" integrity sha512-wIh+gKBI9Nshz2o46B0B3f5k/W+WI9ZAv6y5Dn5WJ5SK1t0TnDimB4WE5rmTD05ZAIn8HALCZVmCsvj0w0v0lw==