Elderjs / elderjs

Elder.js is an opinionated static site generator and web framework for Svelte built with SEO in mind.

Home Page:https://elderguide.com/tech/elderjs/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How do you prefix urls to assets?

Aerlin opened this issue · comments

Some services like GitLab have the project's name to the url (https://username.gitlab.io/project/). I'm using a environment variable in my links to deal with the project's name being in the link.

<a class="has-text-link" href="{CI_PROJECT_NAME}/recipes/{recipe.slug}/">{recipe.name}</a>

But don't know how to change the url to CSS assets. The page has

<link rel="stylesheet" href="/_elderjs/assets/svelte-23a2cbac.css" media="all">

When it needs

<link rel="stylesheet" href="/PROJECT_NAME/_elderjs/assets/svelte-23a2cbac.css" media="all">

I've tried changing the elder.config.js origin but it had no effect. prefix moved the files to a subfolder which broke other things.

Any help would be greatly appreciated.

I did the following in my gitlab-ci.yml

image: node:latest

cache:
  paths:
    - node_modules/

pages:
  script:
    - yarn install
    - npm run build
    - mkdir .public
    - mv public/my/prefix/* .public
    - rm -rf public
    - mv .public public
  artifacts:
    paths:
      - public
  rules:
    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH

Where the /my/prefix> value is set in the elder.config.js as the prefix property.

module.exports = {
  origin: '', // TODO: update this.
  lang: 'en',
  srcDir: 'src',
  distDir: 'public',
  rootDir: process.cwd(),
  build: {},
  prefix: '/my/prefix', // If you want your site to be built within a sub folder within your `distDir` you can use this.
  server: {},
  props: {
    hydration: 'hybrid',
    compress: false,
  },
///.... redacted for brevity

Thank you @ioneyed, that appears to work.