Folder and home links not working on defaultListPageLayout when using folderClickBehavior "link" on Github Pages. #1013

thelulzy · 2024-03-19T04:01:40Z

Describe the bug
When using folderClickBehavior: "link" as shown below, folder and home links exclude the base level subdirectory.
Links which should be https://thelulzy.github.io/TF-EE-quartz-obsidian-vault/* are instead https://thelulzy.github.io/* and thus 404.

// components for pages that display lists of pages  (e.g. tags or folders)
export const defaultListPageLayout: PageLayout = {
  beforeBody: [Component.Breadcrumbs(), Component.ArticleTitle(), Component.ContentMeta()],
  left: [
    Component.PageTitle(),
    Component.MobileOnly(Component.Spacer()),
    Component.Search(),
    Component.Darkmode(),
    Component.DesktopOnly(Component.Explorer({folderClickBehavior: "link"})),
  ],
  right: [],
}

This issue does not seem to occur when building/serving with npx quartz build --serve

To Reproduce
Steps to reproduce the behavior:

Add {folderClickBehavior: "link"} to Component.Explorers in quarts.layout.ts
Host site using github pages
Click on a folder to navigate to its index
Click a folder again and note the 404

Expected behavior
Base level subdir is included in links from defaultListPageLayout pages

Desktop (please complete the following information):

Quartz Version: chore(deps-dev): bump @types/node from 20.11.25 to 20.11.29 #1010
node Version: 18.17.1
npm version: 10.4.0
OS: Win11
Browser Chrome

The text was updated successfully, but these errors were encountered:

saberzero1 · 2024-03-28T12:00:56Z

Hey @thelulzy

It appears that the problem you are encountering is related to your configuration.

https://github.com/thelulzy/TF-EE-quartz-obsidian-vault/blob/9e94d4747a622eb3141bed1b8efe04bc97a17ffd/quartz.config.ts#L18

The baseUrl should include the full path to your index. In this case it should include the repository as well, as a single GitHub account can have multiple GitHub Pages for multiple different repositories.

Inside quartz.config.ts, could you change:

baseUrl: "thelulzy.github.io",

To:

baseUrl: "thelulzy.github.io/TF-EE-quartz-obsidian-vault",

Please let me know if this resolves your issue or if you require further assistance.

abbeyroad7 · 2024-04-25T01:58:02Z

I am having a similar issue. The baseUrl is set correctly to include the repository, but clicking the home page 404s for the same reason listed above. Also using Github Pages.

thelulzy · 2024-06-16T22:44:31Z

@saberzero1

Please let me know if this resolves your issue or if you require further assistance.

As far as I can tell this did not fix the issue. I've attempted to implement the proported fix in a different repo:
https://thelulzy.github.io/Pax-Dei-Notes/Guides
https://github.com/thelulzy/Pax-Dei-Notes/

saberzero1 · 2024-06-16T22:59:52Z

@saberzero1

Please let me know if this resolves your issue or if you require further assistance.

As far as I can tell this did not fix the issue. I've attempted to implement the proported fix in a different repo:
https://thelulzy.github.io/Pax-Dei-Notes/Guides
https://github.com/thelulzy/Pax-Dei-Notes/

Well yeah, if you host it on https://thelulzy.github.io/Pax-Dei-Notes/ you should use that as baseUrl.

Can you try the following?

baseUrl: "thelulzy.github.io/Pax-Dei-Notes",

thelulzy · 2024-06-16T23:15:58Z

@saberzero1

Can you try the following?

I suppose I should've been more clear. That is how I configured the new repo:

saberzero1 · 2024-06-16T23:25:54Z

@saberzero1

Can you try the following?

I suppose I should've been more clear. That is how I configured the new repo:

I'm a little confused. I have clicked around on links on your site. All the links on https://thelulzy.github.io/TF-EE-quartz-obsidian-vault/ seem to be working on my end.

Could you clarify what the current issue is you're facing?

thelulzy · 2024-06-16T23:37:50Z

@saberzero1

All the links on https://thelulzy.github.io/TF-EE-quartz-obsidian-vault/ seem to be working on my end.

That's because I'm not using folderClickBehavior: "link" on TF-EE-quartz-obsidian-vault. That's meant to be a polished product, so I needed to disable it so users weren't hitting random unexpected 404s.

My new repo however is a work in progress, so I decided to try your fix.
Go to https://thelulzy.github.io/Pax-Dei-Notes/Guides, then try clicking either the home link Pax Dei Notes or the folder Guides (note, don't click the dropdown for the folder, click the name). The page will 404 because it's excluding the repo from the URL.

saberzero1 · 2024-06-16T23:44:58Z

@saberzero1

All the links on https://thelulzy.github.io/TF-EE-quartz-obsidian-vault/ seem to be working on my end.

That's because I'm not using folderClickBehavior: "link" on TF-EE-quartz-obsidian-vault. That's meant to be a polished product, so I needed to disable it so users weren't hitting random unexpected 404s.

My new repo however is a work in progress, so I decided to try your fix.
Go to https://thelulzy.github.io/Pax-Dei-Notes/Guides, then try clicking either the home link Pax Dei Notes or the folder Guides (note, don't click the dropdown for the folder, click the name). The page will 404 because it's excluding the repo from the URL.

Guides and Pax Deu Notes both work on my end. I get no 404, and the links navigate correctly.

What browser are you using? Can you clear your cache and try again?

thelulzy · 2024-06-16T23:49:23Z

@saberzero1

What browser are you using? Can you clear your cache and try again?

Gladly. I just tried using Edge for the first time and it happens there as well. I have also tried it after clearing my cache.
As I've noted this behavior only happens when attempting to navigate from a defaultListPageLayout page such as
https://thelulzy.github.io/Pax-Dei-Notes/Guides. Be sure you are on that page when trying to replicate the behavior.

saberzero1 · 2024-06-16T23:52:29Z

@saberzero1

What browser are you using? Can you clear your cache and try again?

Gladly. I just tried using Edge for the first time and it happens there as well. I have also tried it after clearing my cache.
As I've noted this behavior only happens when attempting to navigate from a defaultListPageLayout page such as
https://thelulzy.github.io/Pax-Dei-Notes/Guides. Be sure you are on that page when trying to replicate the behavior.

Screen_Recording_20240617_015111_Chrome.mp4

thelulzy · 2024-06-16T23:54:42Z

I just noticed that this behavior only occurs from https://thelulzy.github.io/Pax-Dei-Notes/Guides and not https://thelulzy.github.io/Pax-Dei-Notes/Guides/ (Note the difference in trailing /). When I click guides from the homepage I am brought to https://thelulzy.github.io/Pax-Dei-Notes/Guides , then subsequent clicks result in the 404.

thelulzy · 2024-06-17T00:06:21Z

Recording.2024-06-16.170306.mp4

@saberzero1
Aha, I believe the behavior is only happening for me because you're on mobile and I'm on desktop. Here's how folderClickBehavior is defined in my repo:
Component.DesktopOnly(Component.Explorer({folderClickBehavior: "link"})),

thelulzy · 2024-06-17T00:33:34Z

@saberzero1
I've removed Component.DesktopOnly from the override so you should now be able to reproduce the issue from a mobile device. I have verified this on my phone!

Sorry for the confusion!

saberzero1 · 2024-06-17T00:34:19Z

Your explorer was not visible on my screen. It seems to be hidden on screens less than 1950px wide. FullHD is 1920px. You might want to check your scaling.

As for the link: A folder link is actually a link to an index.html. So https://thelulzy.github.io/Pax-Dei-Notes/Guides/ is actually https://thelulzy.github.io/Pax-Dei-Notes/Guides/index.html.

The folder link is computed here:

https://github.com/thelulzy/Pax-Dei-Notes/blob/231bc5dd8d9829f5f9fa46f1cfb46242479f36b2/quartz/components/ExplorerNode.tsx#L207-L219

Which resolves to

https://github.com/thelulzy/Pax-Dei-Notes/blob/231bc5dd8d9829f5f9fa46f1cfb46242479f36b2/quartz/util/path.ts#L164-L167

Which resolves to

https://github.com/thelulzy/Pax-Dei-Notes/blob/231bc5dd8d9829f5f9fa46f1cfb46242479f36b2/quartz/util/path.ts#L83-L86

Also notice the difference of the link on https://thelulzy.github.io/Pax-Dei-Notes/Guides/:

<a href="../Guides" data-for="Guides" class="folder-title" previewlistener="true">Guides</a>

and https://thelulzy.github.io/Pax-Dei-Notes/Guides:

<a href="/Guides" data-for="Guides" class="folder-title" previewlistener="true">Guides</a>

Notice the difference of ../Guides and /Guides.

I assume the problem arise either in the pathToRoot function, or the parameters passed to it.

https://github.com/thelulzy/Pax-Dei-Notes/blob/231bc5dd8d9829f5f9fa46f1cfb46242479f36b2/quartz/util/path.ts#L149-L159

Can you check if the value for markdownLinkResolution is set to the same value as Obsidian's settings?

Plugin.CrawlLinks({ markdownLinkResolution: "shortest" }),

If both settings are the same (in Quartz and Obsidian), then it is probably a bug.

As for a (temporary) workaround: you can place an index.md file in the Guides folder. That file can be empty, or contain custom content to display on the folder page of Guides. It will be used as the index page for the folder. Please give it a try.

EDIT: the index.md might need to have the following frontmatter:

---
title: "Guides"
---

(Change "Guides" to match the folder name.)

I'll look more into it tomorrow.

thelulzy · 2024-06-17T00:37:54Z

Can you check if the value for markdownLinkResolution is set to the same value as Obsidian's settings?
Plugin.CrawlLinks({ markdownLinkResolution: "shortest" }),

This is indeed how markdownLinkResolution is configured in my quartz.config.ts

Is this the Obsidian setting you are referring to?

Seems like they match.

saberzero1 · 2024-06-17T00:41:13Z

Can you check if the value for markdownLinkResolution is set to the same value as Obsidian's settings?
Plugin.CrawlLinks({ markdownLinkResolution: "shortest" }),
This is indeed how markdownLinkResolution is configured in my quartz.config.ts

Is this the Obsidian setting you are referring to?

Seems like they match.

Alright. Thanks for checking.

I'll continue tomorrow.

jackyzha0 · 2024-06-17T05:32:43Z

I just noticed that this behavior only occurs from thelulzy.github.io/Pax-Dei-Notes/Guides and not thelulzy.github.io/Pax-Dei-Notes/Guides (Note the difference in trailing /). When I click guides from the homepage I am brought to thelulzy.github.io/Pax-Dei-Notes/Guides , then subsequent clicks result in the 404.

all folders should be linked to with a trailing slash, github pages just doesn't enforce the redirect so its weird

saberzero1 · 2024-06-17T09:10:32Z

I just noticed that this behavior only occurs from thelulzy.github.io/Pax-Dei-Notes/Guides and not thelulzy.github.io/Pax-Dei-Notes/Guides (Note the difference in trailing /). When I click guides from the homepage I am brought to thelulzy.github.io/Pax-Dei-Notes/Guides , then subsequent clicks result in the 404.

all folders should be linked to with a trailing slash, github pages just doesn't enforce the redirect so its weird

I suppose we could add an explicit check that adds a trailing slash before computing the folder links, if they are not present yet. Although I'm not sure if that would break anything. I'll look into it.

quartz/quartz/components/ExplorerNode.tsx

Lines 206 to 219 in 42640bc

    
           <div key={node.name} data-folderpath={folderPath}> 
        
             {folderBehavior === "link" ? ( 
        
               <a 
        
                 href={resolveRelative(fileData.slug!, folderPath as SimpleSlug)} 
        
                 data-for={node.name} 
        
                 class="folder-title" 
        
               > 
        
                 {node.displayName} 
        
               </a> 
        
             ) : ( 
        
               <button class="folder-button"> 
        
                 <span class="folder-title">{node.displayName}</span> 
        
               </button> 
        
             )}

isnbh0 · 2024-07-01T01:24:42Z

👋 Hi, just chiming in with what I think is a similar issue with link computation. This is for page links though, not folders.

When I had set baseUrl to isnbh0.github.io/garden[1],
navigating to the 404 page
and then clicking on Return to Homepage
sent me to isnbh0.github.io/garden (note no trailing slash)
at which point all links were incorrectly computed (e.g. isnbh0.github.io/me instead of isnbh0.github.io/garden/me).
I had to work around this by going against the the configuration docs' instruction to not include "any leading or trailing slashes."[1]

[1] I've fixed it on my live site by setting baseUrl to isnbh0.github.io/garden/ (with trailing slash).

jackyzha0 · 2024-07-10T01:01:03Z

@thelulzy i think this is fixed by 265faef, can you double check?

thelulzy added the bug Something isn't working label Mar 19, 2024

jackyzha0 closed this as completed Jul 10, 2024

dechantoine mentioned this issue Dec 27, 2024

fix(page-list): enforce intended behavior on GitHub-pages hosted websites #1685

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Folder and home links not working on defaultListPageLayout when using folderClickBehavior "link" on Github Pages. #1013

Folder and home links not working on defaultListPageLayout when using folderClickBehavior "link" on Github Pages. #1013

thelulzy commented Mar 19, 2024

saberzero1 commented Mar 28, 2024

abbeyroad7 commented Apr 25, 2024

thelulzy commented Jun 16, 2024

saberzero1 commented Jun 16, 2024

thelulzy commented Jun 16, 2024

saberzero1 commented Jun 16, 2024

thelulzy commented Jun 16, 2024 •

edited

Loading

saberzero1 commented Jun 16, 2024

thelulzy commented Jun 16, 2024

saberzero1 commented Jun 16, 2024

thelulzy commented Jun 16, 2024

thelulzy commented Jun 17, 2024 •

edited

Loading

thelulzy commented Jun 17, 2024 •

edited

Loading

saberzero1 commented Jun 17, 2024 •

edited

Loading

thelulzy commented Jun 17, 2024

saberzero1 commented Jun 17, 2024

jackyzha0 commented Jun 17, 2024

saberzero1 commented Jun 17, 2024

isnbh0 commented Jul 1, 2024

jackyzha0 commented Jul 10, 2024

Folder and home links not working on defaultListPageLayout when using folderClickBehavior "link" on Github Pages. #1013

Folder and home links not working on defaultListPageLayout when using folderClickBehavior "link" on Github Pages. #1013

Comments

thelulzy commented Mar 19, 2024

saberzero1 commented Mar 28, 2024

abbeyroad7 commented Apr 25, 2024

thelulzy commented Jun 16, 2024

saberzero1 commented Jun 16, 2024

thelulzy commented Jun 16, 2024

saberzero1 commented Jun 16, 2024

thelulzy commented Jun 16, 2024 • edited Loading

saberzero1 commented Jun 16, 2024

thelulzy commented Jun 16, 2024

saberzero1 commented Jun 16, 2024

thelulzy commented Jun 16, 2024

thelulzy commented Jun 17, 2024 • edited Loading

thelulzy commented Jun 17, 2024 • edited Loading

saberzero1 commented Jun 17, 2024 • edited Loading

thelulzy commented Jun 17, 2024

saberzero1 commented Jun 17, 2024

jackyzha0 commented Jun 17, 2024

saberzero1 commented Jun 17, 2024

isnbh0 commented Jul 1, 2024

jackyzha0 commented Jul 10, 2024

thelulzy commented Jun 16, 2024 •

edited

Loading

thelulzy commented Jun 17, 2024 •

edited

Loading

thelulzy commented Jun 17, 2024 •

edited

Loading

saberzero1 commented Jun 17, 2024 •

edited

Loading