search

twostraws / Ignite

A static site generator for Swift developers.
MIT License
1.66k stars 85 forks source link

Feature Request: Please provide the capability to add a Favicon to Ignite-generated websites. #116

Open cpah opened 1 week ago

cpah commented 1 week ago

Please could you provide a capability to add a Favicon to Ignite-generated websites? As I understand it, an extra link section would need to be added after the title section, as shown in the (W3 Schools) example below:

<head>
  <title>My Page Title</title>
  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>

Perhaps this could be achieved by adding a new var to the Site struct. In your BrushAnd Bark example this struct would become:

struct ExampleSite: Site {    
    var name = "Hello World"
    var favIcon = "/images/favicon.ico"
    var titleSuffix = " – My Awesome Site"
    var url = URL("https://www.example.com")
    var builtInIconsEnabled = true

    ...

}

The head section in the home page's index.html file, generated in your BrushAndBark example, should (I presume) then become:

<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="author" content="John Appleseed"><meta name="generator" content="Ignite v0.1.0">
   <title>Home – My Awesome Site</title>
   <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
   <link href="/css/bootstrap.min.css" rel="stylesheet">
   <link href="/css/bootstrap-icons.min.css" rel="stylesheet">
   <link href="https://www.example.com/" rel="canonical">
   <meta property="og:site_name" content="Hello World">
   <meta property="og:title" content="Home">
   <meta property="twitter:title" content="Home">
   <meta property="og:url" content="https://www.example.com/">
   <meta name="twitter:domain" content="example.com">
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:dnt" content="on">
</head>
mfreiwald commented 1 week ago

Have you checked the Site protocol? It contains a var favicon: URL? { get }

cpah commented 1 week ago

Many thanks; I had not noticed that protocol entry. I added a favicon.ico file to my Assets/images folder and rebuilt my site with var favicon = URL("/images/favicon.ico”) inserted into my Site.swift file. Sadly, it had no effect and my Build/index.html file was unaltered from its original version. However, if I insert <link rel="icon" type="image/x-icon" href="/images/favicon.ico”> after </title> in my Build/index.html file with a text editor and then refresh my localhost in Safari (after clearing its caches), the favicon appears. I guess, therefore, that the favicon var is not (yet?) being processed in Ignite and live in hope that it will be in a future release.

mfreiwald commented 1 week ago

favicon in general works with Ignite. Not sure if this is related to this issue, but I use a png for the favicon and it works on Safari, Firefox etc.

twostraws commented 1 week ago

I guess, therefore, that the favicon var is not (yet?) being processed in Ignite and live in hope that it will be in a future release.

You'll definitely have more luck with a speedy resolution by contributing a fix 🙂

cpah commented 6 days ago

Oops, sorry Paul. I'm really not sure where to begin - but I will have a go ...

cpah commented 6 days ago

I believe the problem may lie in the Sources/Ignite/Elements/Head.swift file here.

I note that the code at line 90:

       MetaLink(href: page.url, rel: "canonical")

results in <link href="https://www.crizzle.co.uk/" rel="canonical"> being added to the section of the home page's index.html file. I therefore believe that the code from line 92 should be:

        if let favicon = page.favicon {
            MetaLink(href: favicon, rel: .icon)
        }

Adding <link href="/images/favicon.ico" rel=".icon"> to the section of my home page's index.html file manually, before refreshing my web-server, makes the favicon appear. Hopefully, the new code at line 92 will get ignite to insert the favicon link automatically ...

cpah commented 6 days ago

Sorry. The 'section' of 'section of the home page's index.html file' is the head></head> 'section'. Also, I should have added that the fix will add the favicon entry to the head></head> sections of all of a site's pages' index.html files :-)