https://github.com/ixkaito/astro-relative-links

Build Astro with relative links.
https://github.com/ixkaito/astro-relative-links

Last synced: about 24 hours ago
JSON representation

Build Astro with relative links.

• Host: GitHub
• URL: https://github.com/ixkaito/astro-relative-links
• Owner: ixkaito
• License: mit
• Created: 2023-03-06T06:04:08.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-03-29T06:38:21.000Z (6 months ago)
• Last Synced: 2024-04-14T06:06:05.622Z (5 months ago)
• Language: TypeScript
• Homepage:
• Size: 128 KB
• Stars: 49
• Watchers: 3
• Forks: 4
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# astro-relative-links 🔗

This Astro integration builds Astro with relative links.

## Installation

### Quick Install

The `astro add` command-line tool automates the installation for you. Run one of the following commands in a new terminal window. (If you aren't sure which package manager you're using, run the first command.) Then, follow the prompts, and type "y" in the terminal (meaning "yes") for each one.

```sh

# Using NPM

npx astro add astro-relative-links

# Using Yarn

yarn astro add astro-relative-links

# Using PNPM

pnpm astro add astro-relative-links

```

If you run into any issues, [feel free to report them to me on GitHub](https://github.com/ixkaito/astro-relative-links/issues) and try the manual installation steps below.

### Manual Install

First, install the `astro-relative-links` packages using your package manager. If you're using npm or aren't sure, run this in the terminal:

```sh

npm install astro-relative-links

```

Then, apply this integration to your `astro.config.*` file using the `integrations` property:

**`astro.config.mjs`**

```js ins={2} "relativeLinks()"

import { defineConfig } from 'astro/config';

import relativeLinks from 'astro-relative-links';

export default defineConfig({

  // ...

  integrations: [relativeLinks()],

});

```

## Usage

Build as usual with `npm run build` etc. All links in the project will be generated as relative paths.

## Examples

### Assets

- `dist/index.html`

  ```html

  

  

  ```

- `dist/sub/index.html`

  ```html

  

  

  ```

### Links and images

- `src/components/Header.astro`

  ```html

  Home

  

    

    Apple

  

  

    

    Banana

  

  ```

The above components will be generated as follows.

- `dist/index.html`

  ```html

  Home

  

    

    Apple

  

  

    

    Banana

  

  ```

- `dist/apple/index.html`

  ```html

  Home

  

    

    Apple

  

  

    

    Banana

  

  ```

- `dist/banana/index.html`

  ```html

  Home

  

    

    Apple

  

  

    

    Banana

  

  ```

### With `base` config

- `astro.config.mjs`

  ```js

  import { defineConfig } from 'astro/config';

  import relativeLinks from 'astro-relative-links';

  export default defineConfig({

    base: 'fruits',

    integrations: [relativeLinks()],

  });

  ```

- `src/components/Header.astro`

  ```html

  Home

  Fruits

  

    

    Apple

  

  

    

    Banana

  

  ```

The above components will be generated as follows.

- `dist/index.html`

  ```html

  Home

  Fruits

  

    

    Apple

  

  

    

    Banana

  

  ```

- `dist/apple/index.html`

  ```html

  Home

  Fruits

  

    

    Apple

  

  

    

    Banana

  

  ```

- `dist/banana/index.html`

  ```html

  Home

  Fruits

  

    

    Apple

  

  

    

    Banana

  

  ```

# License

[MIT](https://github.com/ixkaito/astro-relative-links/blob/main/LICENSE)