Home/ Questions/Q 492

Querify Question Shop: Explore Expert Solutions and Unique Q&A Merchandise Latest Questions

Author
  • 62k
Asked: 2024-11-25T11:23:08+00:00

Vortex – Blogs built faster than Lewis Hamilton Drives

  • 62k

Vortex is an open-source library that allows you to build themeable, modular and responsive blogs with just a few lines of code!

Let's build a cool blog with Vortex!

Step 1: Install & Import Vortex

Inside your React project directory, install Vortex by running either of the following: 

npm i @hydralite/vortex # or yarn add @hydralite/vortex # or pnpm i @hydralite/vortex
Enter fullscreen mode Exit fullscreen mode

Now that we've installed Vortex, let's import it.

We can do so by importing the Blog component directly from the Vortex library and it's stylesheet. 

import "@hydralite/vortex/dist/style.css"; import Blog from "@hydralite/vortex";
Enter fullscreen mode Exit fullscreen mode

Step 2: Initializing Our Blog Component 

import "@hydralite/vortex/dist/style.css"; import Blog from "@hydralite/vortex";  function App() {   return (     <div>       <Blog />     </div>   ); }  export default App;
Enter fullscreen mode Exit fullscreen mode

From now onwards, we'll be focusing primarily on the Blog component for readability purposes.

Step 3: Choose a layout

The first step to building your blog is to choose a layout. There are 3 in-built layouts bundled-in with Vortex.

To understand more about each layout, check out the layout guide.

For now, we'll be choosing the default layout. 

<Blog     {/* You can also use Hashnode or DevTO instead  */}     layout = "Default" />
Enter fullscreen mode Exit fullscreen mode

Step 4: Add some content

It's time to add some content to our blog!

Vortex supports markdown content, so let's give it some to display! 

const content = ` Everything's supported - a [link](https://example.com), some `inline` content, **bold** text, <ins>underlined text</ins>, and even a codeblock with syntax highlighting:  You can specify the language of the codeblock after the backticks (which need to be escaped). ```js console.log("Here's some JavaScript code!"); console.log("it works inside the codeblock!"); ```  ### Images ![image](https://images.ctfassets.net/hrltx12pl8hq/7JnR6tVVwDyUM8Cbci3GtJ/bf74366cff2ba271471725d0b0ef418c/shutterstock_376532611-og.jpg)  ### Tweet Embeds  Below is a tweet embed: [tweet](https://twitter.com/elonmusk/status/1470157804304572420?s=20)  ### GitHub Gist Embeds  Here's a GitHub gist: [gist](https://gist.github.com/getify/2b53198906d320abe650)  ### CodePen Embeds [codepen embed](https://codepen.io/alvaromontoro/pen/vYexLGV) `;
Enter fullscreen mode Exit fullscreen mode

Now that we've written up some content – let's pass it into the blog! 

<Blog layout="Default" content={content} />
Enter fullscreen mode Exit fullscreen mode

Step 5: Add headers

It's time to spice up our blog with a banner, a title, a subtitle, and maybe even a category! 

<Blog   layout="Default"   content={content}   header={{     title: "Here is my title",     subtitle: "Here's a subtitle",     image: {       src: "https://images.pexels.com/photos/10437856/pexels-photo-10437856.jpeg?auto=compress&cs=tinysrgb&fit=crop&fp-y=0.53&h=500&sharp=20&w=1400",       borderRadius: "20px",     },     category: {       title: "Development & Testing",     },   }} />
Enter fullscreen mode Exit fullscreen mode

Step 6: Insert metadata

Let's insert some metadata into our article, like the author, and the date when it was published! 

<Blog     layout = "Default"     content = {content}     header = {{...}}     author = {{             name: 'Look! It's me!',             avatar: 'https://avatars.githubusercontent.com/u/63039748?v=4'     }}     date = '12 December, 2021' />
Enter fullscreen mode Exit fullscreen mode

Step 7: Add reactions

For more details on this step, check out our reactions guide. 

<Blog     layout = "Default"     content = {content}     header = {{...}}     author = {{             name: 'Look! It's me!',             avatar: 'https://avatars.githubusercontent.com/u/63039748?v=4'     }}     date = '12 December, 2021'     reactions = {{         onClick: () => {},         reactions: [             {                 name: 'Heart',                 emote: '❤',                 upvotes: 2             },             {                 name: 'Thumbs Up',                 emote: '👍',                 upvotes: 10             }         ]     }} />
Enter fullscreen mode Exit fullscreen mode

Step 8: Make it your own

To finish up, let's customize your blog! Follow the customization and themes documentation for more information.

We need your help

What do you think about Vortex? Do let me know, I'm curious and would love your feedback!

If you'd like to support us, an upvote at our Product Hunt page and a star on our GitHub repository would be incredible.

javascriptlibraryreactwebdev
Share

Leave an answer

You must login to add an answer.

Need An Account,