search

intelops / website

This is the repo to manage all the website work, which is being developed using hugo framework.
https://intelops.ai
6 stars 21 forks source link

separate pages for multiple purpose #270

Open devopstoday11 opened 1 year ago

devopstoday11 commented 1 year ago

@tfsumon,

I want to have separate pages whenever I want on this main website. I want to place the pages in the content folder in separate folders individually.

Few examples:

  1. I want to have a links page " https://intelops.ai/linkspage/ " and it should be used for the purpose to add links like this page - https://linktr.ee/hiddenlayer

  2. I want to add similar style page like this https://intelops.ai/blog/simplify-containerization-for-speed-and-scalability-with-compage/ , but in a separate folder inside content folder. Something like this " https://intelops.ai/landing-pages/topic-name/ " and something like this " https://intelops.ai/topic-name/ "

tfsumon commented 1 year ago

I apologize for not fully comprehending your message.

I want to have a links page " https://intelops.ai/linkspage/ " and it should be used for the purpose to add links like this page > - https://linktr.ee/hiddenlayer

Do you want to same to same like the reference link page or possible features & style?

I want to add similar style page like this https://intelops.ai/blog/simplify-containerization-for-speed-and-scalability-with-compage/ , but in a separate folder inside content folder. Something like this " https://intelops.ai/landing-pages/topic-name/ " and something like this " https://intelops.ai/topic-name/ "

It is feasible, and I'll need to integrate it. However, I require some clarifications before I commence this task.

Could you provide more examples? As of now, a default page layout has already been set up in case no specific page layout is defined in the front matter.

If you can share additional examples, I'll incorporate them to ensure that you can readily utilize them.

@devopstoday11

devopstoday11 commented 1 year ago

I apologize for not fully comprehending your message.

I want to have a links page " https://intelops.ai/linkspage/ " and it should be used for the purpose to add links like this page > - https://linktr.ee/hiddenlayer

Do you want to same to same like the reference link page or possible features & style?

@tfsumon , I don't want same to same like reference link page. I want the possible features. I believe our website already supports all types of link in markdown. So, I just want to be able group the topics, add titles & descriptions, and add links of the actual content, etc.

I want to add similar style page like this https://intelops.ai/blog/simplify-containerization-for-speed-and-scalability-with-compage/ , but in a separate folder inside content folder. Something like this " https://intelops.ai/landing-pages/topic-name/ " and something like this " https://intelops.ai/topic-name/ "

It is feasible, and I'll need to integrate it. However, I require some clarifications before I commence this task.

Could you provide more examples? As of now, a default page layout has already been set up in case no specific page layout is defined in the front matter.

If you can share additional examples, I'll incorporate them to ensure that you can readily utilize them.

@devopstoday11

@tfsumon , What is the default page layout we have now? show me example screenshot please. Basically, what I am looking for is to have a page where there will be a banner area, content (article), etc. which looks similar to the blog page link I provided. This page should support all kind of markdown features we have now (like, mindmap/roadmap, similar to docbox layout that you added, supporting different image types (png, jpeg, jpg, svg, etc.), supporting video links, pop-up Form filling after scrolling 60 % of the page, etc.). I want to be able to put these independent pages in separate folders and use their links for marketing email campaigns, etc. These both folder structures should be supported:- https://intelops.ai/landing-pages/topic-name/ https://intelops.ai/topic-name/

tfsumon commented 1 year ago

Understood, thank you. I'm working on it, and I'll inform you as soon as it's done.

devopstoday11 commented 1 year ago

Understood, thank you. I'm working on it, and I'll inform you as soon as it's done.

Thank you @tfsumon. I need it very soon today. If it can be done before 4 pm IST, that would help a lot, please.

tfsumon commented 1 year ago

okay I will try my best.

tfsumon commented 1 year ago

Hello @devopstoday11 !

I've finished this task and created a PR . To verify, please set 'draft' to 'false' in the following files:

content/example.md content/landing-pages/example.md content/linkspage.md

Next, please visit the following localhost links:

I've integrated a diverse set of customization options to make this layout versatile and suitable for a wide range of purposes.

Be sure to configure page_layout as "default" to achieve the single blog page layout. Within this layout, you'll have access to various features, including support for docbox components, compatibility with various image formats (png, jpeg, jpg, svg, etc.), full Markdown functionality, video links, and a pop-up form that triggers when you scroll 60% down the page.

image

I've also implemented a shortcode system for adding links, similar to Linktree. You can now utilize this shortcode in any markdown file of your choice.

image

image

If you require further assistance or have additional needs, please feel free to send me a message. I'm more than happy to help and address any necessary fixes.

devopstoday11 commented 1 year ago

@tfsumon , use the latest update I pushed to my "chandu" branch.

I found issues in Linkspage :

devopstoday11 commented 1 year ago

@tfsumon , found one more issue :

in production, the icons are not showing up image

devopstoday11 commented 1 year ago

@tfsumon , If I want to change background color, footer area color, text color, the button shape & button color, etc. how can I modify them in .md file for that linkspage?

tfsumon commented 1 year ago

I need to incorporate the customization option, but it's not feasible to include all the customization options you've mentioned.

I will include all available customization options and inform you accordingly.

devopstoday11 commented 1 year ago

I need to incorporate the customization option, but it's not feasible to include all the customization options you've mentioned.

I will include all available customization options and inform you accordingly.

ok, thank you @tfsumon Prioritize the issues first and then the enhancements

tfsumon commented 1 year ago

@tfsumon , use the latest update I pushed to my "chandu" branch.

I found issues in Linkspage :

  • when I add multiple video links, they are not loading & not playing. Test it and fix it.
  • How can I add an image on the top of this linkspage in the .md file? In this page, the top row is logo right! I want to put an image like that in my linkspage too.
  • Below the image, one row is text for Title and 2nd row is text to add some message (description) to display. How to do that in .md file so that those text areas will get displayed under the image?

I have resolved the issue and added image and description.

Pleas check this pr - https://github.com/intelops/website/pull/274

devopstoday11 commented 1 year ago

Thank you, merged it. @tfsumon How can I modify background colors of that linkspage, modify color of buttons, make every button with different color, modify shape of buttons, add some animation effects, etc.? Is it all possible to do by declaring them in the .md file itself or do I need to touch any JavaScript, CSS & HTML files too?

tfsumon commented 1 year ago

If you'd like animations, I'll add a library called 'aos' and set up everything else. You can then use them by adjusting the '.md' file's front matter.

I'm currently working on this issue. Is this task urgent?

tfsumon commented 1 year ago

@devopstoday11

Please check this PR #276

devopstoday11 commented 1 year ago

If you'd like animations, I'll add a library called 'aos' and set up everything else. You can then use them by adjusting the '.md' file's front matter.

I'm currently working on this issue. Is this task urgent?

Have you checked this library for animation effects? It has more features than aos and it is also pure javascript. @tfsumon There is one more really good one "Framer Motion" , but that is typescript. Maybe typescript is too heavy for Hugo site.

https://github.com/juliangarnier/anime

devopstoday11 commented 1 year ago

@tfsumon

Tried the new code from your repo chandu branch. Linkspage is not working as expected in my local.

image

devopstoday11 commented 1 year ago

@tfsumon linkspage is working now - https://intelops.ai/linkspage/

devopstoday11 commented 1 year ago

If you'd like animations, I'll add a library called 'aos' and set up everything else. You can then use them by adjusting the '.md' file's front matter. I'm currently working on this issue. Is this task urgent?

Have you checked this library for animation effects? It has more features than aos and it is also pure javascript. @tfsumon There is one more really good one "Framer Motion" , but that is typescript. Maybe typescript is too heavy for Hugo site.

https://github.com/juliangarnier/anime

Once the current tasks are done, need to work on adding Animejs support and doing some animation effects on the site. https://animejs.com/ . Samples - https://codepen.io/collection/XLebem/ @tfsumon

tfsumon commented 1 year ago

Added animation - https://github.com/intelops/website/pull/281

@devopstoday11

devopstoday11 commented 1 year ago

Added animation - #281

@devopstoday11

@tfsumon , it is very small animation effect. But yeah, I merged it to main.