Coming Soon Hugo Theme #14

utterances-bot · 2023-10-18T20:44:19Z

Coming Soon Hugo Theme

At mansoorbarri.com, we offer a wealth of IT knowledge through guides & newsletters about IT; specifically Linux.

https://mansoorbarri.com/downloads/coming-soon-hugo/

wii8cookies · 2023-10-18T20:44:20Z

When I edit config.toml, I'm still getting the default text, what is causing this?

mansoorbarri · 2023-10-18T20:58:13Z

When I edit config.toml, I'm still getting the default text, what is causing this?

can you share your code?

wii8cookies · 2023-10-18T21:06:07Z

I followed the tutorial to copy the template and the only thing I modified is config.toml. I'm new to hugo and all this, don't really know what I'm doing beyond following the tutorials

…

On Wed, Oct 18, 2023 at 3:58 PM Mansoor Barri ***@***.***> wrote: When I edit config.toml, I'm still getting the default text, what is causing this? can you share your code? — Reply to this email directly, view it on GitHub <#14 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AH5ZSVTYNE24KWCVSOU7W23YAA7HBAVCNFSM6AAAAAA6GD3XH6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTONRZGMYDSNZYHE> . You are receiving this because you commented.Message ID: ***@***.***>

mansoorbarri · 2023-10-18T21:28:32Z

I followed the tutorial to copy the template and the only thing I modified is config.toml. I'm new to hugo and all this, don't really know what I'm doing beyond following the tutorials
…
On Wed, Oct 18, 2023 at 3:58 PM Mansoor Barri @.> wrote: When I edit config.toml, I'm still getting the default text, what is causing this? can you share your code? — Reply to this email directly, view it on GitHub <#14 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AH5ZSVTYNE24KWCVSOU7W23YAA7HBAVCNFSM6AAAAAA6GD3XH6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTONRZGMYDSNZYHE . You are receiving this because you commented.Message ID: @.>

I think you are trying to change the text which is defined as description

mansoorbarri · 2023-10-18T21:35:20Z

I have updated the code now, please clone the repository again.

wii8cookies · 2023-10-18T21:53:31Z

Still doesn't seem to be working for me...

Only difference after the new code push is top right default text appeared, didn't appear before

countdown is also NaN

mansoorbarri · 2023-10-18T22:01:12Z

can you specify what you are trying to change exactly? Posting your code would be really helpful

wii8cookies · 2023-10-18T22:06:09Z

this is what my config file looks like, when development server launched the default is what shows up though

baseURL = "https://mywebsite.com/"
languageCode = 'en-us'
theme = "coming-soon"

[params]
title = "My website"
description = "description to my website"
message = "My website is coming soon" # default is "COMING SOON"
release = "Oct 07, 2024" # release date format: Aug 30, 2023 15:00
background = "bg.mp4" # default is bg.mp4 in static/

mansoorbarri · 2023-10-18T22:51:02Z

its working for me. Make sure you have Hugo extended and at least version 0.111.3

mansoorbarri · 2023-10-19T15:30:49Z

hey @wii8cookies, I tried looking for why it may not be working for you but I got nothing. We can get in contact on Discord and try to figure out if it suits you.

uname: mansoor.yuh

wii8cookies · 2023-10-19T15:43:48Z

I ended up just bypassing the config file and going straight to editing index.html to customize the website

I had my compsci friend briefly look at it and he couldn't find the issue with the config file not working, downloaded on a different computer the same issue arose

mansoorbarri · 2023-10-19T20:18:13Z

I would love to help but I have no idea, do let me know if you get to know why it was acting up: https://github.com/mansoorbarri/coming-soon/issues or on discord

KaeTheDev · 2024-03-06T01:33:10Z

I would love to help but I have no idea, do let me know if you get to know why it was acting up: https://github.com/mansoorbarri/coming-soon/issues or on discord

The reason for the NaN is because the config.toml file is inside the exampleSite folder. When I moved it back into the coming-soon folder the issue went away. @mansoorbarri

mansoorbarri · 2024-03-06T09:47:36Z

I would love to help but I have no idea, do let me know if you get to know why it was acting up: https://github.com/mansoorbarri/coming-soon/issues or on discord

The reason for the NaN is because the config.toml file is inside the exampleSite folder. When I moved it back into the coming-soon folder the issue went away. @mansoorbarri

so it happens when someone moves the config.toml file instead of copying it? kinda confusing

KaeTheDev · 2024-03-06T17:54:50Z

I would love to help but I have no idea, do let me know if you get to know why it was acting up: https://github.com/mansoorbarri/coming-soon/issues or on discord

The reason for the NaN is because the config.toml file is inside the exampleSite folder. When I moved it back into the coming-soon folder the issue went away. @mansoorbarri

so it happens when someone moves the config.toml file instead of copying it? kinda confusing

There's only one config.toml file and it's inside the exampleSite folder. The "coming-soon" project folder doesn't have one at all. When you run the site with the config.toml file still inside the exampleSite folder, you get the NaN. When you move it from the exampleSite folder into the "coming-soon" folder, the NaN goes away.

wii8cookies · 2024-03-06T18:52:24Z

Thought I'd share my code for this, but I liked this theme so much, I reverse engineered it to function entirely in html with the help of my friend. This looks good on mobile too, as it uses particles instead of a video. feel free to use it however, check it out:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>coming soon | website.com</title>
    
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #171717;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        #particle-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 200vh;
            animation: float 40s linear infinite;
            z-index: 0;
        }

        .particle {
            position: absolute;
            background-color: white;
            border-radius: 50%;
            width: 1px;
            height: 1px;
        }

        @keyframes float {
            0% {
                transform: translateY(-100vh);
            }
            100% {
                transform: translateY(0);
            }
        }

        #sample-text,
        #line-two,
        #line-three,
        #line-between {
            position: relative;
            width: 100%;
            color: white;
            font-family: 'Courier New', Courier, monospace;
            text-align: center;
            margin-bottom: 10px;
            z-index: 1;
            user-select: text;
        }

        #sample-text {
            font-size: 35px;
            font-weight: bold;
        }

        #line-between {
            width: 10%;
            border-top: 1px solid white;
            margin-bottom: 10px;
        }

        #line-two,
        #line-three {
            font-size: 20px;
        }

        .link {
            color: white;
            text-decoration: none;
            cursor: pointer;
            transition: color 0.3s, text-decoration 0.3s;
            text-decoration: underline;
        }

        .link:hover,
        .link:active {
            color: white;
            text-decoration: underline;
            font-weight: bold;
        }

        @media screen and (max-width: 600px) {
            #line-between {
                width: 50%;
            }

            #line-two,
            #line-three {
                font-size: 20px;
            }
        }

    .share {
    font-family: 'Courier New', Courier, monospace;
    color: white;
    position: relative;
}
.share:before {
    content: ".";
    font-size: 1.6em;
    position: absolute;
    bottom: 1px;
    left: -8px;
}
.share:after {
    content: ":";
    font-size: 1.6em;
    position: absolute;
    bottom: -4px;
    right: -9px;
}
    </style>
</head>
<body>
    <div id="particle-container">
        <script>
            document.addEventListener("DOMContentLoaded", function () {
                const numParticles = 100;
                const container = document.getElementById("particle-container");

                for (let i = 0; i < numParticles; i++) {
                    createParticle();
                }

                function createParticle() {
                    const particle = document.createElement("div");
                    particle.className = "particle";

                    const xPos = Math.random() * window.innerWidth;
                    const yPos = Math.random() * (window.innerHeight * 2);

                    const size = Math.random() * 2 + 1;

                    particle.style.left = xPos + "px";
                    particle.style.top = yPos + "px";
                    particle.style.width = size + "px";
                    particle.style.height = size + "px";

                    container.appendChild(particle);
                }
            });
        </script>
    </div>

    <div id="sample-text">
        coming soon
    </div>

    <div id="line-between"></div>

    <div id="line-two">
    <span class="share">&lt;</span> <a class="link" href="https://www.linkedin.com/">linkedin.com</a>
    </div>

    <div id="line-three">
        ✉ <a class="link" href="mailto:mail@mail.com">mail@mail.com</a>
    </div>
</body>
</html>

KaeTheDev · 2024-03-07T07:14:38Z

@wii8cookies @mansoorbarri I am trying to use this theme on GitHub Pages. Would you all happen to know if it's possible or does it need specific changes? When I turn on GitHub Pages after forking and cloning it only shows the ReadMe page.

mansoorbarri · 2024-03-07T18:17:35Z

Thought I'd share my code for this, but I liked this theme so much, I reverse engineered it to function entirely in html with the help of my friend. This looks good on mobile too, as it uses particles instead of a video. feel free to use it however, check it out:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>coming soon | website.com</title>
    
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #171717;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        #particle-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 200vh;
            animation: float 40s linear infinite;
            z-index: 0;
        }

        .particle {
            position: absolute;
            background-color: white;
            border-radius: 50%;
            width: 1px;
            height: 1px;
        }

        @keyframes float {
            0% {
                transform: translateY(-100vh);
            }
            100% {
                transform: translateY(0);
            }
        }

        #sample-text,
        #line-two,
        #line-three,
        #line-between {
            position: relative;
            width: 100%;
            color: white;
            font-family: 'Courier New', Courier, monospace;
            text-align: center;
            margin-bottom: 10px;
            z-index: 1;
            user-select: text;
        }

        #sample-text {
            font-size: 35px;
            font-weight: bold;
        }

        #line-between {
            width: 10%;
            border-top: 1px solid white;
            margin-bottom: 10px;
        }

        #line-two,
        #line-three {
            font-size: 20px;
        }

        .link {
            color: white;
            text-decoration: none;
            cursor: pointer;
            transition: color 0.3s, text-decoration 0.3s;
            text-decoration: underline;
        }

        .link:hover,
        .link:active {
            color: white;
            text-decoration: underline;
            font-weight: bold;
        }

        @media screen and (max-width: 600px) {
            #line-between {
                width: 50%;
            }

            #line-two,
            #line-three {
                font-size: 20px;
            }
        }

    .share {
    font-family: 'Courier New', Courier, monospace;
    color: white;
    position: relative;
}
.share:before {
    content: ".";
    font-size: 1.6em;
    position: absolute;
    bottom: 1px;
    left: -8px;
}
.share:after {
    content: ":";
    font-size: 1.6em;
    position: absolute;
    bottom: -4px;
    right: -9px;
}
    </style>
</head>
<body>
    <div id="particle-container">
        <script>
            document.addEventListener("DOMContentLoaded", function () {
                const numParticles = 100;
                const container = document.getElementById("particle-container");

                for (let i = 0; i < numParticles; i++) {
                    createParticle();
                }

                function createParticle() {
                    const particle = document.createElement("div");
                    particle.className = "particle";

                    const xPos = Math.random() * window.innerWidth;
                    const yPos = Math.random() * (window.innerHeight * 2);

                    const size = Math.random() * 2 + 1;

                    particle.style.left = xPos + "px";
                    particle.style.top = yPos + "px";
                    particle.style.width = size + "px";
                    particle.style.height = size + "px";

                    container.appendChild(particle);
                }
            });
        </script>
    </div>

    <div id="sample-text">
        coming soon
    </div>

    <div id="line-between"></div>

    <div id="line-two">
    <span class="share">&lt;</span> <a class="link" href="https://www.linkedin.com/">linkedin.com</a>
    </div>

    <div id="line-three">
        ✉ <a class="link" href="mailto:mail@mail.com">mail@mail.com</a>
    </div>
</body>
</html>

looks really good however the point of the video was that anyone can change the background to whatever they want. However, because of your code, I might have different themes - yours being one of the theme.

mansoorbarri · 2024-03-07T18:18:12Z

@wii8cookies @mansoorbarri I am trying to use this theme on GitHub Pages. Would you all happen to know if it's possible or does it need specific changes? When I turn on GitHub Pages after forking and cloning it only shows the ReadMe page.

can you share your repository and the website link as well?

mansoorbarri · 2024-03-07T18:19:24Z

I would love to help but I have no idea, do let me know if you get to know why it was acting up: https://github.com/mansoorbarri/coming-soon/issues or on discord

The reason for the NaN is because the config.toml file is inside the exampleSite folder. When I moved it back into the coming-soon folder the issue went away. @mansoorbarri

so it happens when someone moves the config.toml file instead of copying it? kinda confusing

There's only one config.toml file and it's inside the exampleSite folder. The "coming-soon" project folder doesn't have one at all. When you run the site with the config.toml file still inside the exampleSite folder, you get the NaN. When you move it from the exampleSite folder into the "coming-soon" folder, the NaN goes away.

yes but thats standard procedure? It says it in the guide as well. You are suppose to copy the config file from /themes/coming-soon/examplesite/config.toml to your site's root.

KaeTheDev · 2024-03-07T20:45:33Z

I would love to help but I have no idea, do let me know if you get to know why it was acting up: https://github.com/mansoorbarri/coming-soon/issues or on discord

The reason for the NaN is because the config.toml file is inside the exampleSite folder. When I moved it back into the coming-soon folder the issue went away. @mansoorbarri

so it happens when someone moves the config.toml file instead of copying it? kinda confusing

There's only one config.toml file and it's inside the exampleSite folder. The "coming-soon" project folder doesn't have one at all. When you run the site with the config.toml file still inside the exampleSite folder, you get the NaN. When you move it from the exampleSite folder into the "coming-soon" folder, the NaN goes away.

yes but thats standard procedure? It says it in the guide as well. You are suppose to copy the config file from /themes/coming-soon/examplesite/config.toml to your site's root.

Yes, I realize the theme functions as it should. I was just trying to be more clear about what I meant with my initial comment. I am new to Hugo Theming. Also, is there any reason why the social media icons would only show correctly after you click on one? I have the theme running with GitHub Pages and the icons are showing as white boxes @mansoorbarri

KaeTheDev · 2024-03-07T20:49:02Z

Also, I think the partial for the twitter section is not working correctly either. I ended up commenting that code out but this is what the site does when its active:

mansoorbarri · 2024-03-07T20:51:15Z

I think GitHub pages is messing with it. Can you share the repository please?

KaeTheDev · 2024-03-07T20:54:04Z

https://github.com/KaeTheDev/StarvingArtistDDLLC https://github.com/KaeTheDev/kaethedev.github.io

KaeTheDev · 2024-03-07T20:56:31Z

Also, I think the partial for the twitter section is not working correctly either. I ended up commenting that code out but this is what the site does when its active:

This issue happens even in local so I don't think GitHub Pages is affecting it. Probably only the icons are being affected by GitHub Pages because they work fine in local

mansoorbarri · 2024-03-08T07:30:03Z

@KaeTheDev the icons are not showing up because the baseURL is not set up correctly. The baseURL should be the root of your URL, which would be the github.io link for your website. In your code, the baseURL is setup as https://localhost:1313

KaeTheDev · 2024-03-08T16:03:47Z

@KaeTheDev the icons are not showing up because the baseURL is not set up correctly. The baseURL should be the root of your URL, which would be the github.io link for your website. In your code, the baseURL is setup as https://localhost:1313

Thank you!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Coming Soon Hugo Theme #14

Coming Soon Hugo Theme #14

utterances-bot commented Oct 18, 2023

wii8cookies commented Oct 18, 2023

mansoorbarri commented Oct 18, 2023

wii8cookies commented Oct 18, 2023 via email

mansoorbarri commented Oct 18, 2023

mansoorbarri commented Oct 18, 2023 •

edited

Loading

wii8cookies commented Oct 18, 2023

mansoorbarri commented Oct 18, 2023

wii8cookies commented Oct 18, 2023

mansoorbarri commented Oct 18, 2023

mansoorbarri commented Oct 19, 2023

wii8cookies commented Oct 19, 2023

mansoorbarri commented Oct 19, 2023

KaeTheDev commented Mar 6, 2024

mansoorbarri commented Mar 6, 2024

KaeTheDev commented Mar 6, 2024

wii8cookies commented Mar 6, 2024

KaeTheDev commented Mar 7, 2024

mansoorbarri commented Mar 7, 2024

mansoorbarri commented Mar 7, 2024

mansoorbarri commented Mar 7, 2024

KaeTheDev commented Mar 7, 2024

KaeTheDev commented Mar 7, 2024 •

edited

Loading

mansoorbarri commented Mar 7, 2024

KaeTheDev commented Mar 7, 2024 •

edited

Loading

KaeTheDev commented Mar 7, 2024 •

edited

Loading

mansoorbarri commented Mar 8, 2024 •

edited

Loading

KaeTheDev commented Mar 8, 2024

Coming Soon Hugo Theme #14

Coming Soon Hugo Theme #14

Comments

utterances-bot commented Oct 18, 2023

Coming Soon Hugo Theme

wii8cookies commented Oct 18, 2023

mansoorbarri commented Oct 18, 2023

wii8cookies commented Oct 18, 2023 via email

mansoorbarri commented Oct 18, 2023

mansoorbarri commented Oct 18, 2023 • edited Loading

wii8cookies commented Oct 18, 2023

mansoorbarri commented Oct 18, 2023

wii8cookies commented Oct 18, 2023

mansoorbarri commented Oct 18, 2023

mansoorbarri commented Oct 19, 2023

wii8cookies commented Oct 19, 2023

mansoorbarri commented Oct 19, 2023

KaeTheDev commented Mar 6, 2024

mansoorbarri commented Mar 6, 2024

KaeTheDev commented Mar 6, 2024

wii8cookies commented Mar 6, 2024

KaeTheDev commented Mar 7, 2024

mansoorbarri commented Mar 7, 2024

mansoorbarri commented Mar 7, 2024

mansoorbarri commented Mar 7, 2024

KaeTheDev commented Mar 7, 2024

KaeTheDev commented Mar 7, 2024 • edited Loading

mansoorbarri commented Mar 7, 2024

KaeTheDev commented Mar 7, 2024 • edited Loading

KaeTheDev commented Mar 7, 2024 • edited Loading

mansoorbarri commented Mar 8, 2024 • edited Loading

KaeTheDev commented Mar 8, 2024

mansoorbarri commented Oct 18, 2023 •

edited

Loading

KaeTheDev commented Mar 7, 2024 •

edited

Loading

KaeTheDev commented Mar 7, 2024 •

edited

Loading

KaeTheDev commented Mar 7, 2024 •

edited

Loading

mansoorbarri commented Mar 8, 2024 •

edited

Loading