Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

How to import an external script? #1668

Closed
jjanvier opened this issue Dec 24, 2024 · 2 comments
Closed

How to import an external script? #1668

jjanvier opened this issue Dec 24, 2024 · 2 comments
Labels
bug Something isn't working

Comments

@jjanvier
Copy link

Describe the bug
I can't import an external script in the head. There is probably something I don't do correctly...

To Reproduce
Here is what I try to do in the shared component

export const sharedPageComponents: SharedLayout = {
  head: Component.Head(
    {externalResources: {js: [{src: "https://kit.fontawesome.com/foo.js", crossorigin: "anonymous", loadTime: "beforeDOMReady"}]}},
  ),

Expected behavior
The script should appear in the <head> tag

Desktop (please complete the following information):

  • Quartz Version: branch v4 up to date
  • node Version: v22.11.0
  • npm version: 10.9.0
  • OS: Debian Linux
  • Browser chrome
@jjanvier jjanvier added the bug Something isn't working label Dec 24, 2024
@aarnphm
Copy link
Collaborator

aarnphm commented Dec 26, 2024

This is undocumented atm, but you have to add external js source at transformers layers,

so if you want this then add it to quartz/plugins/transformers/ofm.ts or any of the transformers you use

@jjanvier
Copy link
Author

jjanvier commented Jan 1, 2025 •
edited
Loading

Thanks ! It works perfectly for me. Here is the diff in case somebody wants the same thing

diff --git a/quartz/plugins/transformers/ofm.ts b/quartz/plugins/transformers/ofm.ts
index 94cc7b6..2207659 100644
--- a/quartz/plugins/transformers/ofm.ts
+++ b/quartz/plugins/transformers/ofm.ts
@@ -826,6 +826,13 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>>
         })
       }
 
+      css.push({
+        content: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css",
+        inline: false,
+      })
+
       return { js, css }
     },
   }

diff.txt

@jjanvier jjanvier closed this as completed Jan 1, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jjanvier @aarnphm