search

jamestagal / plenti-portfolio

Portfolio is a theme for the Plentico static site generator
0 stars 1 forks source link

Possible Portfolio theme for Plenti #1

Closed jamestagal closed 2 years ago

jamestagal commented 2 years ago

Hello @jimafisk I started watching your video series on converting a theme for Plenit (Bigspring) because I was curious to learn more about Plenti/Svelte. Then I thought I would like to help you create themes for Plenti if I could. So I first found a rather nice but simple Portfolio template website using html/CSS/JavaScript called Responsive Personal Portfolio Website with a download to the source files. I then followed along with your tutorials (thank you, you are a very good instructor) and got up to your video Plenti Bigspring: Part 10 (Save to Github) and wanted to share my progress with you. So I pushed the files to this repo. Pls check it out! :) So I got most of the basic formatting and styling done but there are some areas left to do.

I do have questions because I wasn't able to get some things to work. Have I added the following in the correct way?

  1. I added the fonts to the global.svelte file but I can't see the font loading on any page.
  2. I added other scripts for the carousel, jquery and typed frameworks found in the head tag of the original index.html file to head.svelte but I can't see the cards in the My Team section with the carousel -
  3. Related to number 2, where do I put all the script.js code? I think this would solve the problem with point 2.

I forgot to mention that this site is very minimal and is single page so it might not be suitable. Happy to stop here if you don't think it is good template for Plenti. Again my thinking process was to just try it out to learn something...so not problem at all if you don't use it.

Anyway I will keep watching the rest of your video tutorial series to learn more. Thanks Jim.

Ben

jimafisk commented 2 years ago

Very cool @jamestagal, I just spun up your theme locally and it's looking great :tada:

Took me a second to find the demo site, so I'm just pasting it here for reference: https://codingnepalweb.com/demos/responsive-portfolio-website/

The way I did global styles in that series probably isn't the best way to approach it. What I typically do now is create a regular CSS file in my "assets" folder: assets/global.css. Then I reference it in my layouts/global/head.svelte file like this: <link rel='stylesheet' href='/assets/global.css'>. It's just more ergonomic since you don't have to wrap everything in :global().

I think the main issue with loading fonts was that you had a CSS block that looked like this:

.about .services .skills .teams .contact {
  font-family: 'Poppins', sans-serif;
}

That is implying that these elements are nested within each other, so it's actually trying to target one single deeply nested element. What we want in reality is to apply the font to each of these classes (note the commas):

.about, .services, .skills, .teams, .contact {
  font-family: 'Poppins', sans-serif;
}

For the interactive JavaScript you could load jQuery, but this is a space where Svelte really shines on its own. I updated the nav to work without loading jQuery, and the typedjs library works just fine without it, but in order to get OwlCarousel to work, it looks like you might have to add it back in (note that I removed it from <head>): https://github.com/OwlCarousel2/OwlCarousel2/issues/1629. I'll create a PR for the other items but figured I'd leave this for you to take a stab at. Just let me know if you need any help with it though.

I think it's a great template for Plenti, thanks for taking the time to put it together! Definitely encourage you to keep working on it (as long as it's still fun for you :blush:)

jamestagal commented 2 years ago

Hi @jimafisk That's awesome. I am enjoying it and learning lots. :) Thanks for making those additions. I added back the jQuery imports and have added the owlCarousel script into the team.svelte file and copied the way you did it with the Typed script as follows:

import { onMount } from 'svelte';
    onMount(async () => {
        // owl carousel script
        var carousel = new ('.carousel').owlCarousel({
        margin: 20,
        loop: true,
        autoplay: true,
        autoplayTimeOut: 2000,
        autoplayHoverPause: true,
        responsive: {
            0:{
                items: 1,
                nav: false
            },
            600:{
                items: 2,
                nav: false
            },
            1000:{
                items: 3,
                nav: false
            }
        }
    });
});

But unfortunately that didn't display the cards!

Another question. How can I turn a CSS class into a dynamic value for the Skills section? The red line should represent the percentage of each skill but at present I left it with 'html' skill at 90 percent so all the others get the same,.<div class="line html"></div> https://github.com/jamestagal/plenti-portfolio/blob/d86932bb09b1078a493a59b5271198712438df94/layouts/components/skills.svelte#L21 in the code.

Regards, Ben

jamestagal commented 2 years ago

Hi @jimafisk I'm thinking to get the red line to work for each different skill, we need to bind the class name to a variable value, like you have done with the values from the json data source. Something like below. <div class="line">{value}</div> and export the 'value'? I did try this but it didn't work.. I got an 'undefined' message for that on the page. So I guess i have to think about how this component can export = read the values within the Global.css file. UPDATE I am also reading the Svelte docs to see how to do this a came across the style: directive. I'm not sure if that would work! https://svelte.dev/docs#template-syntax-element-directives-style-property Ben

jimafisk commented 2 years ago

There's a couple of different ways you can do it! I usually just use an inline style directly in the HTML for a dynamic value that I'm pulling from my content source. This PR demonstrates that: https://github.com/jamestagal/plenti-portfolio/pull/3 (just let me know if it's not clear what I'm doing there).

jimafisk commented 2 years ago

For the jQuery stuff, you should be able to use that within Svelte but you want to make sure the $ syntax doesn't conflict with svelte stores: https://stackoverflow.com/questions/58219453/how-do-i-use-jquery-in-svelte. I just added a fix to the open PR for your review: https://github.com/jamestagal/plenti-portfolio/pull/3

jamestagal commented 2 years ago

Hi @jimafisk I see. thank you. I see how the inline styles work. that's neat.

For another feature that i haven't added yet to the "slide to sections" when clicking the corresponding one in the nav. I think it is this script from the source script.js file. I've added the window. before the dollar sign because I thought it must be a jQurey feature here too. But this doesn't seem to work. Sorry I can't seem to make any progress with these last few things here without getting help....

  import { onMount } from 'svelte';
  onMount(async () => {
      // slide-up script
      window.$('.scroll-up-btn').click(function(){
        window.$('html').animate({scrollTop: 0});
        // removing smooth scroll on slide-up button click
        window.$('html').css("scrollBehavior", "auto");
    });

    window.$('.navbar .menu li a').click(function(){
        // applying again smooth scroll on menu items click
        window.$('html').css("scrollBehavior", "smooth");
    });

    // toggle menu/navbar script
    window.$('.menu-btn').click(function(){
        window.$('.navbar .menu').toggleClass("active");
        window.$('.menu-btn i').toggleClass("active");
    });
});
jamestagal commented 2 years ago

Hi @jimafisk

Although I know it might be a little premature while this theme isn't quite finished but I wanted to ask you if you would like me to start on another theme? I see you have listed a few themes in the "coming soon" section on your theme page. Do you have a theme preference ? I like the look of the EduCenter theme you have listed there so I could possibly look at this one? What do you think?

I would like to try to go further in your BigSpring tutorial series and learn about adding pages, pagination, etc.. and other content you cover in this series so it would good to get more practice while learning. Please let me know.

Cheers, Ben

jamestagal commented 2 years ago

Hi @jimafisk Back on the Portfolio theme, I had a win just now with the scroll-up-btn feature. I got it working. :) Though I still need to I modified the code from one of your previous PR scrollY sticky nav and did the same but placed it in the html.svelte file and it worked! So now when you scroll down past the first section a scroll up button appears in the bottom right corner. I will push this change back to the repo.

Now, I will work on getting the slide up feature to work!

    // slide-up script
    $('.scroll-up-btn').click(function(){
        $('html').animate({scrollTop: 0});
        // removing smooth scroll on slide-up button click
        $('html').css("scrollBehavior", "auto");
    });

    $('.navbar .menu li a').click(function(){
        // applying again smooth scroll on menu items click
        $('html').css("scrollBehavior", "smooth");
    });

Ben

jimafisk commented 2 years ago

Although I know it might be a little premature while this theme isn't quite finished but I wanted to ask you if you would like me to start on another theme?

I think the portfolio theme is looking great! I'll try to get it posted to https://plenti.co/themes in the next couple of days and add you as the maintainer. That'd be awesome if you wanted to take a stab at another theme :)

Do you have a theme preference ? I like the look of the EduCenter theme you have listed there so I could possibly look at this one?

No preference on my end, those were just a selection of themes that I thought looked nice. If you like the look of the EduCenter theme I'd say have it at! If there is a theme outside that list that excited you more, that's perfectly fine too. The only point of consideration is that the original theme designer has released it publicly and is ok with folks building sites with it.

I would like to try to go further in your BigSpring tutorial series and learn about adding pages, pagination, etc.. and other content you cover in this series so it would good to get more practice while learning.

That's great, I'm glad that series is helpful! The API has changed on a few things since I made those videos, so if you run into issues just let me know.

Back on the Portfolio theme, I had a win just now with the scroll-up-btn feature. I got it working.

Woo :tada: Nice work!!

jamestagal commented 2 years ago

hi @jimafisk

Cool that is awesome. I will just go with the EduCenter theme next then. It seems to be a well developed Hugo theme with quite a few features so it might be a nice project for me to tackle. Talking about themes, I really liked the way that Portfolio template from Coding Napal has been developed in terms of its clear code comments and class names that make sense (readable). That was really useful for me as a beginner because I could easily understand the elements of code. Also, there wasn't too much JavaScript in the code base which is the part I understand least but want to learn more about.

When thinking about choices of themes/templates I did a search for Svelte themes and got the following:

https://sveltesociety.dev/templates/ https://sveltethemes.dev/

I was thinking that using a Svelte based template would be easier for me to start with because the components and JavaScript would have been already built but the drawbacks are that there aren't many nice, interesting or exciting themes that I could see. Also i need to learn how to convert the JavaScript scripts to fit into the Svelte way of doing JavaScript so this approach may not help me learn to figure that out!

Anyways, I figure that helping your develop these themes for Plenti will also provide me with a nice way to learn more about JavaScript/Svelte in a nice gradual way in real world projects where I can get some experience and of course support from you when i need it!

BTW. This guy does some nice website templates for a coffee. Check them out. https://www.buymeacoffee.com/bedimcode/extras Enjoy your weekend.

Ben

jamestagal commented 2 years ago

Hi @jimafisk Question. How would I go about adding a click event using the CSS class in the function? For instance this is the following jQuery code:

   // slide-up script
    $('.scroll-up-btn').click(function(){
        $('html').animate({scrollTop: 0});
        // removing smooth scroll on slide-up button click
        $('html').css("scrollBehavior", "auto");
    });

and to convert it for Svelte, In the html.svelte https://github.com/jamestagal/plenti-portfolio/blob/main/layouts/global/html.svelte component, I have added the following function:

    function handleClick (){
    ('html').animate({scrollTop: 0});
    ('html').css("scrollBehavior", "auto");
  }

and added an on:click event to the <div>below it as follows:

<div on:click={handleClick} class="scroll-up-btn {y > 500 ? ' show' : ''}">

But I don't know how or where I can add the CSS class ('.scroll-up-btn') to trigger the event? 

 $('.scroll-up-btn').click(function()('.scroll-up-btn')

Sorry this is a long post for a short question! Cheers, Ben

jimafisk commented 2 years ago

Hi @jamestagal,

Cool finds! I think a lot of those Svelte templates are setup to work with SvelteKit - the same components could apply to Plenti, but the overall app might be structured a little differently.

For adding the click events, it seems like you're on the right track! In jQuery you bind the event to the element in the script itself, in Svelte you add the on:click to the element in the template (sounds like you've done that). It just looks like you might be using some jQuery in that function still. The easiest way to accomplish this would be to add a click handler to the scroll button that calls an anonymous function to change the scroll position. Sounds scary, but looks pretty simple in practice:

<div class="scroll-up-btn {y > 500 ? ' show' : ''}" on:click={() => window.scrollTo(0,0)}>

See example in REPL: https://svelte.dev/repl/d1dee1c7ccaa4426878c8817fbc197e3?version=3.12.1

I created a PR to demonstrate this: https://github.com/jamestagal/plenti-portfolio/pull/4. Note this has some unrelated code for baseurls and deploying to github pages because I released this as a Plenti theme yesterday: https://plenti.co/themes/personal-portfolio. You're a maintainer on the project, so feel free to work off that repo if you'd like: https://github.com/plenti-themes/personal-portfolio

jamestagal commented 2 years ago

Hi @jimafisk Thank you. I really need to get better at searching for answers!! I did look for possible solutions on the web but couldn't find anything!

2 more jQuery scripts to go! This one below looks like it needs to be added to the navbar element so when clicking any menu-btn it scrolls down to that section. 

  $('.navbar .menu li a').click(function(){
        // applying again smooth scroll on menu items click
        $('html').css("scrollBehavior", "smooth");
    });

Here is what I thought to do though it didn't work! Add the on:click event to the navbar but this didn't work!

<nav class="navbar {y > 20 ? ' sticky' : ''}" on:click={() => window.scroll}>

The last one is a menu toggle.

    // toggle menu/navbar script
    $('.menu-btn').click(function(){
        $('.navbar .menu').toggleClass("active");
        $('.menu-btn i').toggleClass("active");
    });

Below is what I think would achieve this. First a toggle function.

  function toggleMenu() {
        navActive = !navActive;
    }

Then add on:click event to menu-btn as follows:

<div class="menu-btn" on:click={toggleMenu}>

I did look at this REPL example Unfortunately neither of these work! Sorry for not knowing how to solve these very simple functionalities.

Thanks for adding me to that Plenti-theme. Sure I will add these last additions and work from there. Cheers, Ben

jimafisk commented 2 years ago

For the scroll to section bug where it would just scroll to the top every time, I'm not entirely sure why that was happening. If you disable JavaScript in your browser, the smooth scroll CSS will work and it will scroll to the correct section, so something in the JS is overriding this. I made an override to the override in the PR I opened: https://github.com/jamestagal/plenti-portfolio/pull/5 that should work. It's a little heavy handed and I don't love it since this is a simple behavior that should work already, but I added the |preventDefault event modifier to stop the current behavior, then I implemented my own scrolling behavior using .scrollIntoView() (see this for a svelte example).

For the mobile menu toggle you basically had it correct, you just then need to actually add the classes to the elements. So in jQuery $('.navbar .menu').toggleClass("active"); is targeting the .menu element from the script itself, but in Svelte you can go to the actual <ul class="menu"> element and add the check for the active class directly to it like: <ul class="menu{navActive ? ' active' : ''}"> (note you need to do the same for the i element for $('.menu-btn i').toggleClass("active");).

jamestagal commented 2 years ago

Hi @jimafisk Thanks for looking into to this and providing a fix... I see how you have approached the issues ..i will stop working in this repo now and switch to the theme repo going forward. And i noticed that you have added those fixes over there too. ☺️ Thanks.

BTW. I've started doing some Svelte/JavaScript crash courses to learn the fundamentals... Ben.