can this be further simplified

i have run into an issue in an astro template and am gonna make a pr with the fix. but the current solution feels hacky

const { href, class: className, ...props } = Astro.props;
let pathnameWithoutSlash = Astro.url.pathname.replace(/\/$/, "");

if (href === "/" && pathnameWithoutSlash === "") {
  pathnameWithoutSlash = "/";
}

const isActive = href === pathnameWithoutSlash;

const { href, class: className, ...props } = Astro.props;
let pathnameWithoutSlash = Astro.url.pathname.replace(/\/$/, "");

if (href === "/" && pathnameWithoutSlash === "") {
  pathnameWithoutSlash = "/";
}

const isActive = href === pathnameWithoutSlash;

can this be simplified somehow? should i just make a pr and let the maintainers review it?

58 Replies

John•3y ago

Excuse me but why are you first removing the slash and then adding it back

Halu•3y ago

cuz u only add it back if href==="/" you could check b4 removing w/ turnary ig

nexxelOP•3y ago

okay so Astro.url.pathname returns "/" for home and "/blog/" for blog and href is only "/blog" so they don't match and it doesn't become acting so i have to remove the trailing slash but then in home "/" becomes "" so i have to add it back just for home

John•3y ago

I’d test with RegEx if the pathname only contains slash and if not is just trimEnd

nexxelOP•3y ago

should you really put complex regex in a template tho? astro is really aimed at beginners i think we should keep it as simple as possible

John•3y ago

Gonna think, brb I’m a minute

Halu•3y ago

let pathname = Astro.url.pathname || '/'
if ( href === "/" && '/' !== pathname) pathname = pathname.replace(/\/$/, "")
let isActive = href === pathname

let pathname = Astro.url.pathname || '/'
if ( href === "/" && '/' !== pathname) pathname = pathname.replace(/\/$/, "")
let isActive = href === pathname

John•3y ago

John•3y ago

nexxel is this the use you are looking for?

let result = pathname
const pathIsBlank = pathname.match(/^\/$/);
if (!pathIsBlank) {
  result = pathname.slice(0, -1);
}

let result = pathname
const pathIsBlank = pathname.match(/^\/$/);
if (!pathIsBlank) {
  result = pathname.slice(0, -1);
}

const result = pathname.match(/^\/$/) ? pathname : pathname.slice(0,-1);

const result = pathname.match(/^\/$/) ? pathname : pathname.slice(0,-1);

tho ^ and $ might need to be replaced with \A and \z

nexxelOP•3y ago

lemme try both of these this doesn't seem to work :(

Halu•3y ago

i didnt try it myself lol oh, cuz i didnt reassign after replace maybe

John•3y ago

coz astro.url.pathname is always truthy

Halu•3y ago

John•3y ago

|| compares the length of strings. isnt pathname for home is '/' ?

Halu•3y ago

wasnt going to assume

John•3y ago

Astro.url.pathname returns "/" for home and "/blog/" for blog (C) nexxel

nexxelOP•3y ago

yeah its always truthy "" this is returned after the .replace on it this also doesn't work for home this works for only home man javascript is hard <:P_veryweary:827162432778141706>

John•3y ago

does home have the {some url}/ or just / pathname

nexxelOP•3y ago

just /

John•3y ago

John•3y ago

it works in deno, gonna try in astro in a minute

nexxelOP•3y ago

oh wait i didn'tt ry to replace this lemme try that like this?

let pathname = Astro.url.pathname.match("/\A/\z/")

let pathname = Astro.url.pathname.match("/\A/\z/")

John•3y ago

yeah no wait /\A\/\z/

nexxelOP•3y ago

okay it is converting it to /A/z/ on save

John•3y ago

🤔 \ is for escaping characters maybe it’s ok without them

nexxelOP•3y ago

this also doesn't work on home works on others so weird maybe i will just make the pr and let the maintainers think of something

John•3y ago

RegEx is weird. Well that means home has some other character except /

nexxelOP•3y ago

no it is just / this works that proves its just / lemme try your thing again wait this doesn't work because lets say we pass /blog as href and /blog/ as pathname so pathname becaomes /blog/ then we're checking if href === "/", /blog is not equal to /, so the replace isn't exceuted so isActive is checking for /blog === /blog/

John•3y ago

this works for me tho

John•3y ago

John•3y ago

nexxelOP•3y ago

this works on localhost try on vercel

nexxelOP•3y ago

opened the issue https://github.com/withastro/astro/issues/5248

GitHub

template: navbar isActive doesn't work on home page in the person...

What version of astro are you using? 1.6.0 Are you using an SSR adapter? If so, which one? n/a What package manager are you using? pnpm What operating system are you using? WSL Ubuntu Describe the ...

Halu•3y ago

if u dont care about href is specifically '/' AstroUrlPathname.replace(/\/$/, "") || '/' right?

nexxelOP•3y ago

ohhh yeah cause after the replace it becomes falsy

John•3y ago

nexxelOP•3y ago

did i copy paste wrong then?? LUL

you send the snippet here again

John•3y ago

const pathname = Astro.url.pathname;

const result = pathname.match(/^\/$/)? pathname : pathname.slice(0,-1);
console.log(pathname.match(/^\/$/));

const pathname = Astro.url.pathname;

const result = pathname.match(/^\/$/)? pathname : pathname.slice(0,-1);
console.log(pathname.match(/^\/$/));

nexxelOP•3y ago

lemme try

Halu•3y ago

im pretty sure href does matter tho

nexxelOP•3y ago

yeah cause it has to be "/" for that

nexxelOP•3y ago

idk man doesn't work https://astro-blog-template-navbar-issue-repro-git-possible-fix-nexxeln.vercel.app/

My personal website.

Welcome to my website!

nexxelOP•3y ago

const { href, class: className, ...props } = Astro.props;

const pathname = Astro.url.pathname;

const path = pathname.match("/^/$/") ? pathname : pathname.slice(0, -1);

const isActive = href === path;

const { href, class: className, ...props } = Astro.props;

const pathname = Astro.url.pathname;

const path = pathname.match("/^/$/") ? pathname : pathname.slice(0, -1);

const isActive = href === path;

is this wrong?

John•3y ago

backslash between ^ and / regexes are cringe /^\/$/

nexxelOP•3y ago

why is it auto stripping it out on save??? wtffff

John•3y ago

idk, it doesn't for me neither in nvim nor vscode

nexxelOP•3y ago

https://astro-blog-template-navbar-issue-repro-9v65evu4w-nexxeln.vercel.app/

My personal website.

Welcome to my website!

nexxelOP•3y ago

doesn't work still

const { href, class: className, ...props } = Astro.props;

const pathname = Astro.url.pathname;

const path = pathname.match("/^\/$/") ? pathname : pathname.slice(0, -1);

const isActive = href === path;

const { href, class: className, ...props } = Astro.props;

const pathname = Astro.url.pathname;

const path = pathname.match("/^\/$/") ? pathname : pathname.slice(0, -1);

const isActive = href === path;

John•3y ago

im shit in astro, how do you get href as a prop? I just have this code in /pages/index.astro OOOOOOOH I UNDERSTOOD delete fucking quotes

nexxelOP•3y ago

        <HeaderLink href="/">Home</HeaderLink>
        <HeaderLink href="/blog">Blog</HeaderLink>
        <HeaderLink href="/about">About</HeaderLink>

        <HeaderLink href="/">Home</HeaderLink>
        <HeaderLink href="/blog">Blog</HeaderLink>
        <HeaderLink href="/about">About</HeaderLink>

John•3y ago

just match(/^\/$/)

nexxelOP•3y ago

this is the prop ohh

John•3y ago

it looks for string and not for regex

nexxelOP•3y ago

oh dude that works on save now lemme deploy i am so dumb idk how to javascript fr fr

John•3y ago

no, thats that moment when i stare at this and my brain doesn't proceed it either and then that lightbulb moment

John•3y ago

https://tenor.com/view/thabuttress-oh-i-got-it-light-bulb-uh-ok-gif-13736230

Tenor

nexxelOP•3y ago

this shit works yeahhh https://astro-blog-template-navbar-issue-repro-putckyo19-nexxeln.vercel.app/

My personal website.

Welcome to my website!

nexxelOP•3y ago

lets gooo updated the issue

Gaming

Programming

can this be further simplified