Skip to content

Commit 53ac392

Browse files
jakobrosenbergjakobrosenberg
committed
Initial commit
0 parents  commit 53ac392

12 files changed

+3494
-0
lines changed

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.routify
2+
.history
3+
node_modules

‎.prettierrc

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"semi": false,
3+
"singleQuote": true,
4+
"trailingComma": "all",
5+
"printWidth": 120
6+
}

‎assets/README.md

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# Assets Folder
2+
3+
This directory is designated for static assets in the Routify starter template. Assets placed in this folder can be accessed and utilized in your Routify projects in two primary ways.
4+
5+
## Method 1: Direct Reference from the Assets Folder
6+
7+
Files placed in the `/assets` folder can be referenced directly in your project using the path `/my-file.ext`. This is a straightforward method to include assets such as images, fonts, or static files in your project.
8+
9+
For example, if you have an image named `logo.png` in the `/assets` folder, you can include it in your Routify component like this:
10+
11+
```html
12+
<img src="/logo.png" alt="Logo">
13+
```
14+
15+
This method is simple and efficient for most use cases. However, if you require advanced handling, such as bundling or pre-processing, consider Method 2.
16+
17+
## Method 2: Import and Reference in Script
18+
19+
For more advanced scenarios, you may want to import the asset in the script section of a Svelte component and then reference it. This approach is useful when you want to leverage Rollup or Vite's asset handling features like hashing for cache busting, image optimization, or including assets in the JavaScript bundle.
20+
21+
1. **Import the Asset:**
22+
23+
First, import the asset in the script section of your Svelte component. Ensure that your bundler is configured to handle the asset types you are importing.
24+
25+
```javascript
26+
import myImage from 'path/to/your/asset.png';
27+
```
28+
29+
2. **Reference the Imported Asset:**
30+
31+
After importing, you can reference the asset using the variable it was assigned to. This is particularly useful when working with dynamic assets or when you want to include assets in the JavaScript bundle.
32+
33+
```html
34+
<img src={myImage} alt="Dynamic asset">
35+
```
36+
37+
Both methods have their use cases and can be used interchangeably depending on your project's requirements. Consider the advantages of each method and choose the one that best fits your workflow.
38+
39+
For additional information on asset handling and best practices, refer to the respective bundler's documentation (Rollup/Vite).

‎index.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width,initial-scale=1" />
6+
7+
<title>Svelte app</title>
8+
9+
<!-- Google Fonts -->
10+
<link
11+
rel="stylesheet"
12+
href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic"
13+
/>
14+
15+
<!-- CSS Reset -->
16+
<!-- <link
17+
rel="stylesheet"
18+
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"
19+
/> -->
20+
21+
<script type="module" src="/.routify/routify-init.js"></script>
22+
<!--ssr:head-->
23+
<!--ssr:css-->
24+
</head>
25+
26+
<body>
27+
<!--ssr:html-->
28+
</body>
29+
30+
31+
32+
</html>

0 commit comments

Comments
 (0)