Giter Site home page Giter Site logo

[QUESTION] Custom HTML? about dashy HOT 16 CLOSED

bobbyl140 avatar bobbyl140 commented on June 11, 2024
[QUESTION] Custom HTML?

from dashy.

Comments (16)

Lissy93 avatar Lissy93 commented on June 11, 2024 1

Actually I can see how being able to set the rel attribute would be useful in a number of scenarios. Because currently it's just set to noreferrer noopener for privacy (so the links you click can't see the URL of your Dashy instance). But for links to items owned by the user, I can see why they may want or need to modify this.

I've pushed an update which let's the user optionally customoize the rel attribute of a given item. Still defaults to noreferrer noopener if not set.

Won't go live until 2.1.2 which will be merged + released in the coming days.

from dashy.

liss-bot avatar liss-bot commented on June 11, 2024

If you're enjoying Dashy, consider dropping us a ⭐
🤖 I'm a bot, and this message was automated

from dashy.

Lissy93 avatar Lissy93 commented on June 11, 2024

Do you mean that item needs to have the rel attribute?
If so, I can add a config option to let you specify a rel value for an item.

from dashy.

bobbyl140 avatar bobbyl140 commented on June 11, 2024

Do you mean that item needs to have the rel attribute? If so, I can add a config option to let you specify a rel value for an item.

I think so? As long as that gets set on the <a> element I think it should work.

I've pushed an update which let's the user optionally customoize the rel attribute of a given item. Still defaults to noreferrer noopener if not set.

Wow, thank you! I'll test when that comes out and update.

from dashy.

liss-bot avatar liss-bot commented on June 11, 2024

The fix for this issue has now been released in 2.1.2 ✨

If you haven't done so already, please update your instance to 2.1.2 or later. See 2.1.2 for full info.

Feel free to reach out if you need any more support. If you are enjoying Dashy, consider supporting the project.

from dashy.

bobbyl140 avatar bobbyl140 commented on June 11, 2024

So it turns out I didn't read Mastodon's docs very well. The page you link has to have the link accessible without executing JavaScript. As Dashy uses JavaScript for initial rendering, I was investigating alternatives. I figured out that you can also insert the link into the <head> section, which some frameworks can generate server-side. I also found that you can use <noscript> elements which the browser will render even if JavaScript can't run. Of course, I can't edit the files of Dashy since they're regenerated every time it gets built. Would either of these be possible?

from dashy.

Lissy93 avatar Lissy93 commented on June 11, 2024

If it's any help, index.html isn't ever re-generated (it's static). If you wanted to go down that route, I'd recommend forking Dashy to keep track of your changes in your own repo, then just syncing your fork when there's a major update.

Alternativley, not sure if it'll work, but have you tried the Embed Widget? That'll let you have JavaScript run on your page.
Either point scriptSrc to the JavaScript file, or if it's a small snippet, just include the raw JS in script

Can you share the link to the Mastodon docs your looking at? and I might be able to help further, because I might not be fully understanding what you're trying to do.

from dashy.

bobbyl140 avatar bobbyl140 commented on June 11, 2024

I didn't realize that index.html was static, I might try that.

Mastodon's help says this:
Screenshot 2024-03-04 at 12 09 37 PM

Basically, the crawler can't run JavaScript, so if the initial response of the page can contain the link even before executing the JS to render the page, that would fix it. I'll try the index page and see if I can get that to work, since it seems like this is out of the scope of this issue, and I'll update.

from dashy.

Lissy93 avatar Lissy93 commented on June 11, 2024

Ah I see what you mean now.
That wouldn't work as an item or a widget in Dashy, because they are dynamically rendered using Vue, and so both require JavaScript.

But it would work fine if you put it in the index.html :)

Or.... does it even need to be the homepage? If not, then just plonk a random html file, (e.g. mastodon.html) into the public/ directory, containing that snippet (then access it at http://your-dashy-instance.something/mastodon.html). That'll be much easier for you to track, rather than needing to edit index.html.

from dashy.

bobbyl140 avatar bobbyl140 commented on June 11, 2024

Alright yeah, thank you. I'll see what I can do with that file.

I did think about having that kind of page, but I was hoping to link to the homepage itself just for cleanliness and since that's the page I actually use as my homepage. I thought about linking back from a mastodon.html but it's just not as good of an experience.

Thank you for the help!

from dashy.

bobbyl140 avatar bobbyl140 commented on June 11, 2024

That did end up working. Thank you again!

from dashy.

bobbyl140 avatar bobbyl140 commented on June 11, 2024

@Lissy93 I'm sorry to comment on this again, but I have a question about your advice on editing index.html inside the Docker container. I don't really know how to set up a repo with automatic Docker container builds, and while I do want to figure that out, for now I just was hoping to change the file inside the container. But obviously taking down the container causes those changes to be reset. I copied my (working) index.html from the container to my host and made it a volume in Docker just to persist the changes, but that breaks Dashy altogether. From the management docs, I figured I could do this as some other static assets in that folder are listed, but something doesn't seem to be working. the Dashy container logs seem normal as far as I can tell, and the breakage comes when loading the page:
Screenshot 2024-03-05 at 6 20 48 PM
Do you have any ideas, or is this not a possibility? Thank you again.

from dashy.

Lissy93 avatar Lissy93 commented on June 11, 2024

I think you've made a small syntax error somewhere in the index.html

Or there's something missing somewhere. What does the browser console say? (heres how to see)

And in answer to your second question, best way to manage an edited index page would be:
Option 1) This file doesn't change often, so you could just create a copy locally and mount it as a file in your Docker container, like you've done (but valid html)
Option 2) Alternatively, fork Dashy, make your desired edits, and run your own fork. GitHub has an option for syncing forks from their upstream origins, so you can still stay up-to-date with the latest changes. It will however mean you need to publish your own Docker image to some registry (if you use Docker).

Another option, I know you said having an /mastodon.html page wasn't ideal, but you could create such a page (named anything, located anywhere) which includes the required verification, then automatically redirects to your dashboard.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="refresh" content="0; url=https://bobbyl140.com/" />
  <link rel="canonical" href="https://bobbyl140.com/" />
  <link rel="icon" type="image/png" href="/favicon.ico" />
  <title>bobbyl140's Dashy</title>
</head>
<body>
  <a rel="me" href="https://mastodon.bobbyl140.com/@bobbyl140">Mastodon</a>
</body>

from dashy.

Lissy93 avatar Lissy93 commented on June 11, 2024

Beyond that, I'm not really sure what other solutions there are

from dashy.

bobbyl140 avatar bobbyl140 commented on June 11, 2024

I think you've made a small syntax error somewhere in the index.html

You're entirely right, my fault. I was editing the file on my phone and I made a typo 😅. But I fixed that and it does work now, so I'm sorry I bothered you about this. Next time I'll be more careful :)

from dashy.

bobbyl140 avatar bobbyl140 commented on June 11, 2024

Another option, I know you said having an /mastodon.html page wasn't ideal, but you could create such a page (named anything, located anywhere) which includes the required verification, then automatically redirects to your dashboard.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta http-equiv="refresh" content="0; url=https://bobbyl140.com/" />

  <link rel="canonical" href="https://bobbyl140.com/" />

  <link rel="icon" type="image/png" href="/favicon.ico" />

  <title>bobbyl140's Dashy</title>

</head>

<body>

  <a rel="me" href="https://mastodon.bobbyl140.com/@bobbyl140">Mastodon</a>

</body>

I thought there was a way to do that but I couldn't think of what it was. I tried hacking together an Apache if statement that looked at user-agent strings to determine a redirect, which didn't work. Thank you for this though!

from dashy.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.