Dev Diary Ep73 - Link & Code Pages

Hello again,

This week’s dev diary highlights some of the new features that can be found in today’s build of Elements (v0.7.3), including offsite links, code pages, SVG component improvements, and the long-requested “Display Hidden” option for components.

Watch the video below to learn more about what’s new.

Get Elements for macOS

Elements is now available in Early Access. You can visit the elementsapp.io website to purchase a license today.

Thanks for Your Feedback

As always, keep the feedback coming. Your input has made all the difference so far.

Thank you!

See you soon,
Dan & Team Realmac.

2 Likes

I love those new page and link option. :clap:

On the link will there be a target? To open it in a new tab or window?

@dan While I love the idea of the changes to the SVG component, they are however creating a problem. I think there needs to be an option where I can choose to have Elements make the specified updates to the code.

I use a lot of SVG images that have very specific coloring built into them and I want them to maintain there appearance. I’m using them as I want the scalability.

After the update once I opened my site all of these SVG images are altered. They still appear in the image well with all their colors, but in the editor they are just a color blob. Probably because the colors have been stripped from the file, but I’m not sure.

I tried using the fill and stroke settings to reproduce my colors but could not get it to work as it was when designed.

Is there a way of adding an SVG and NOT having the colors stripped out?

To explain the problem more, look at my avatar on this post.

Its is build from a circle filled with red and a path that is stroked in white overlaid on the red. If you strip out the colors and I try to apply a stroke to render the overlaid path it will also stroke the outside of the red circle, not good. Effectively, this means I cannot reproduce this SVG with the current state of the component.

1 Like

@dan Found a problem in the toolbar where the light and dark mode switches are over the breakpoint icons.

This appears to be caused by the fact that in this project I had light and dark mode turned off. I went to the project settings and toggled this setting on and off and the icons went away. Phew, at least I can switch breakpoints again.

I love the code/scripts addition. I need that for a couple of pages that are legacy as part of an API for external systems to call. Brilliant.

The link setup modal has a continue button that has the focus. Having entered the url of the link it seems the obvious next step is to click that button but it appears to act as a cancel button and no link is created. The link IS created if the keyboard return is used after keying in the link.

You asked, so here’s your answer.

I’ve got thousands of pages of static sites built with something else (though they’re all CSS). The whole files/pages thing seems to answer my request for site import. I might not be able to do it directly, but I can write a simple “stripper” that takes out the unnecessary extra stuff (menus, footers, site ID, etc.) from an existing .HTML page and, I believe, now stuff what remains (the content) into Elements. Over time, I can rework each of those pages to be “fully Elements.”

Am I wrong about this?

Can we have links to open up in a new browser tab or at least an option in the settings to choose whether or not to open that way? Or would we need to add target=blank somewhere?

I hate offsite pages, WHY? it takes you off your site and then you get carried away off your site. Is there a way to put an offsite page in a container on a page in your website? At least they stay on it that way? TIA

SVG will Fontawesome v7 be supported from June? TIA

Totally agree I have corporate icons which are specific Pantone colours so second this requirement. TIA

Maybe they could add a checkbox option in the Add Link window for

target="_blank"

Which would open the link in a new browser tab.

1 Like

I like updates; and additions file code,
I like Display Hidden for hide container Or any elements.

I wish to added;

  • component For code

  • link :link: new tabs

Thanks dan :clap:t2:

I knew this was going to be the first thing you guys asked for :rofl: We just ran out of time and wanted to ship a new build to keep things moving. We’ll aim to get this option into the next build… stay tuned!

2 Likes

Ah yes, I ran into this one myself, it’s on the list to get it fixed!

1 Like

We already have custom components for code…

Not suyre exactly what you’re after here? :thinking: Do you have an example or more details you can share? :blush:

1 Like

As replied on the other thread, we’ll add an option to turn off these optimisations on more complex SVG’s. Expect an update soon.

1 Like

Got it, thanks for breaking it down!

I am Sorry, I didn’t make my second question clear. You answer my question from