Icons in the biography

[gaelgoth]

Hello,

I used your stunning template since yesterday. I'm a bit new with Svelte and I can not do this simple task which adding icons with the link under the bio.

Here is what I did from a fresh template:

1. pnpm add @iconify-json/simple-icons
2. Edit src/lib/config/site.ts and add the following metadata:

...
metadata: [
      {
        text: 'gaelgoth',
        icon: 'i-simple-icons-github;',
        link: 'https://github.com/gaelgoth'
      },
    ]
  },

Then I got this error:

Transform failed with 1 error:
/home/gael/workspace/urara-blog/src/lib/config/site.ts:34:22: ERROR: Expected ";" but found "{"

It works when I edit the CCS class in index_profile.svelte

Do you have hint to fix this error ?

Thanks, Gaël

[kwaa]

I think it might be because you put a semicolon at the end.

{
  text: 'gaelgoth',
-  icon: 'i-simple-icons-github;',
+  icon: 'i-simple-icons-github',
  link: 'https://github.com/gaelgoth'
}

[gaelgoth]

Here is the full site.ts:

import type { SiteConfig } from '$lib/types/site'


export const site: SiteConfig = {
  protocol: 'https://',
  domain: import.meta.env.URARA_SITE_DOMAIN ?? 'urara-demo.netlify.app',
  title: 'Urara',
  subtitle: 'Sweet & Powerful SvelteKit Blog Template',
  lang: 'en-US',
  description: 'Powered by SvelteKit/Urara',
  author: {
    name: 'Gaël',
    photo: '/assets/maskable@192.png',
    status: '👋🏾',
    bio: "Hello World",

    metadata: [
      {
        text: 'gaelgoth',
        icon: "Toto", // Ok with "Toto". Error with "i-simple-icons-github" 
        link: 'https://github.com/gaelgoth'
      }
    ]
  },
  themeColor: '#3D4451'
}

If you want more informations this is a branch with my current config: https://github.com/gaelgoth/urara-blog/tree/debug/simple-icon

[gaelgoth]

And also the full build logs:

[23:11:22.322] Cloning github.com/gaelgoth/urara-blog (Branch: debug/simple-icon, Commit: 0f8661f)
[23:11:23.247] Cloning completed: 925.479ms
[23:11:23.668] Looking up build cache...
[23:11:26.833] Build cache downloaded [38.68 MB]: 2830.024ms
[23:11:27.147] Running "vercel build"
[23:11:27.798] Vercel CLI 27.3.2
[23:11:28.294] Detected `pnpm-lock.yaml` generated by pnpm 7...
[23:11:28.310] Installing dependencies...
[23:11:29.080] Lockfile is up-to-date, resolution step is skipped
[23:11:29.150] Progress: resolved 1, reused 0, downloaded 0, added 0
[23:11:29.267] Packages: +1
[23:11:29.267] +
[23:11:30.154] Progress: resolved 1, reused 0, downloaded 1, added 1, done
[23:11:30.575] 
[23:11:30.575] dependencies:
[23:11:30.575] + @iconify-json/simple-icons 1.1.20
[23:11:30.576] 
[23:11:30.863] Running "pnpm run build"
[23:11:31.508] 
[23:11:31.508] > urara@0.0.1 build /vercel/path0
[23:11:31.508] > npm-run-all -s tsc urara:build kit:build clean
[23:11:31.509] 
[23:11:32.330] 
[23:11:32.331] > urara@0.0.1 tsc /vercel/path0
[23:11:32.331] > tsc -p tsconfig.node.json
[23:11:32.331] 
[23:11:35.855] 
[23:11:35.855] > urara@0.0.1 urara:build /vercel/path0
[23:11:35.856] > node urara.js build
[23:11:35.856] 
[23:11:35.998] 9:11:35 PM [urara] make dir static
[23:11:36.001] 9:11:36 PM [urara] make dir static/assets
[23:11:36.001] 9:11:36 PM [urara] make dir src/routes/assets
[23:11:36.002] 9:11:36 PM [urara] make dir src/routes/hello-world
[23:11:36.002] 9:11:36 PM [urara] copy file static/favicon.png
[23:11:36.002] 9:11:36 PM [urara] make dir static/hello-world
[23:11:36.003] 9:11:36 PM [urara] copy file static/assets/any@192.png
[23:11:36.003] 9:11:36 PM [urara] copy file static/assets/any@180.png
[23:11:36.004] 9:11:36 PM [urara] copy file static/assets/any@512.png
[23:11:36.004] 9:11:36 PM [urara] copy file static/assets/maskable@192.png
[23:11:36.004] 9:11:36 PM [urara] copy file static/assets/maskable@512.png
[23:11:36.005] 9:11:36 PM [urara] copy file static/hello-world/cover.webp
[23:11:36.005] 9:11:36 PM [urara] make dir src/routes/hello-world/elements
[23:11:36.006] 9:11:36 PM [urara] make dir static/hello-world/elements
[23:11:36.006] 9:11:36 PM [urara] make dir src/routes/hello-world/toc-disabled
[23:11:36.006] 9:11:36 PM [urara] make dir static/hello-world/toc-disabled
[23:11:36.007] 9:11:36 PM [urara] copy file src/routes/hello-world/index.svelte.md
[23:11:36.007] 9:11:36 PM [urara] copy file src/routes/hello-world/elements/index.svelte.md
[23:11:36.007] 9:11:36 PM [urara] copy file src/routes/hello-world/toc-disabled/index.md
[23:11:36.667] 
[23:11:36.668] > urara@0.0.1 kit:build /vercel/path0
[23:11:36.668] > export NODE_OPTIONS=--max_old_space_size=7680 && vite build
[23:11:36.668] 
[23:11:37.102] ▲ [WARNING] Cannot find base config file "./.svelte-kit/tsconfig.json" [tsconfig.json]
[23:11:37.103] 
[23:11:37.103]     tsconfig.json:2:13:
[23:11:37.103]       2 │   "extends": "./.svelte-kit/tsconfig.json",
[23:11:37.103]         ╵              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[23:11:37.103] 
[23:11:38.880] �[36mvite v3.0.0 �[32mbuilding for production...�[36m�[39m
[23:11:38.912] transforming...
[23:11:41.998] 9:11:41 PM [vite-plugin-svelte] /vercel/path0/src/lib/components/layouts/article.svelte:35:8 <Image/> will not be reactive if Image changes. Use <svelte:component this={Image}/> if you want this reactivity.
[23:11:41.998] 33:     {#if photo}
[23:11:41.999] 34:       <figure class="flex-col gap-2 -mx-4 mb-4 w-auto -mt-8 md:mt-0 md:mb-8 md:order-last">
[23:11:41.999] 35:         <Image class="u-featured rounded-box w-full shadow-xl" src={photo} alt={alt ?? photo} loading="eager" decoding="auto" />
[23:11:41.999]             ^
[23:11:41.999] 36:         {#if alt}
[23:11:41.999] 37:           <figcaption>{@html alt}</figcaption>
[23:11:42.539] 
[23:11:42.540] �[35m🌼 daisyUI components 2.19.0�[0m �[0m https://github.com/saadeghi/daisyui
[23:11:42.741]   �[32m✔︎ Including:�[0m �[0m base, components, themes[29], utilities
[23:11:42.742]   
[23:11:47.013] �[32m✓�[39m 63 modules transformed.
[23:11:47.013] �[31m[vite-plugin-pwa:build] Transform failed with 1 error:
[23:11:47.014] /vercel/path0/src/lib/config/site.ts:28:22: ERROR: Expected ";" but found "{"�[39m
[23:11:47.014] file: �[36m/vercel/path0/src/lib/config/site.ts:28:22�[39m
[23:11:47.014] �[33m
[23:11:47.015] �[33mExpected ";" but found "{"�[33m
[23:11:47.015] 26 |  
[23:11:47.015] 27 |  <style>/* layer: icons */
[23:11:47.016] 28 |  .i-simple-icons-github{--un-icon:url("data:image/svg+xml;utf8,%3Csvg preserveAspectRatio='xMidYMid meet' viewBox='0 0 24 24' width='1.5em' height='1.5em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");mask:var(--un-icon) no-repeat;mask-size:100% 100%;-webkit-mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;background-color:currentColor;width:1.5em;height:1.5em;}</style>
[23:11:47.016]    |                        ^
[23:11:47.016] �[39m
[23:11:47.017] �[31merror during build:
[23:11:47.017] Error: Transform failed with 1 error:
[23:11:47.017] /vercel/path0/src/lib/config/site.ts:28:22: ERROR: Expected ";" but found "{"
[23:11:47.017]     at failureErrorWithLog (/vercel/path0/node_modules/.pnpm/esbuild@0.14.49/node_modules/esbuild/lib/main.js:1605:15)
[23:11:47.017]     at /vercel/path0/node_modules/.pnpm/esbuild@0.14.49/node_modules/esbuild/lib/main.js:1394:29
[23:11:47.018]     at /vercel/path0/node_modules/.pnpm/esbuild@0.14.49/node_modules/esbuild/lib/main.js:666:9
[23:11:47.018]     at handleIncomingPacket (/vercel/path0/node_modules/.pnpm/esbuild@0.14.49/node_modules/esbuild/lib/main.js:763:9)
[23:11:47.018]     at Socket.readFromStdout (/vercel/path0/node_modules/.pnpm/esbuild@0.14.49/node_modules/esbuild/lib/main.js:632:7)
[23:11:47.018]     at Socket.emit (node:events:527:28)
[23:11:47.018]     at Socket.emit (node:domain:475:12)
[23:11:47.018]     at addChunk (node:internal/streams/readable:315:12)
[23:11:47.019]     at readableAddChunk (node:internal/streams/readable:289:9)
[23:11:47.019]     at Socket.Readable.push (node:internal/streams/readable:228:10)�[39m
[23:11:47.035]  ELIFECYCLE  Command failed with exit code 1.
[23:11:47.042] ERROR: "kit:build" exited with 1.
[23:11:47.046]  ELIFECYCLE  Command failed with exit code 1.
[23:11:47.151] Error: Command "pnpm run build" exited with 1

[kwaa]

Hmm... Looks like a bit of a serious problem.
I'll try to fix it all together in the next update, but it might take some time

[kwaa]

Update: This has been fixed in 02ad97d !