Add buttons to link to the new platform specific guides #377

robinrodricks · 2019-03-26T13:26:43Z

This PR adds support for clickable button links on 2 pages, to link to the new guides.

Documentation page

Post download page

markknol · 2019-03-26T13:44:16Z

Nice!

Some suggestions:

Would be nice if you use those orange logo's on your getting started pages too 😃 instead of those colored. Keeps it nice in theme.
maybe use https://jakearchibald.github.io/svgomg/ for smaller svg's

Question;
What does the targets, who dont have a page link to at the moment?

Again great stuff!!

robinrodricks · 2019-03-26T13:51:30Z

Thank you!

Currently I link to whatever relevant page I could find on the subject:

Android & iOS -> /use-cases/mobile/
HTML5 -> /use-cases/web/
PHP, Python, Java, C# -> the new platform guides
Everything else just links to compiler-targets.html as a fallback

Any suggestions on how to improve these links?

uvtc · 2019-03-27T00:57:59Z

I don't think it's optimal for the individual target/platform logos to link to installation and setup instructions, as I'd expect them instead to lead to homepages for the targets/platforms themselves. Actually, I wouldn't even think of clicking on them, as they don't really look like clickable links anyway --- probably even if the text above them said so. (I remember D lang having a very similar problem on their downloads page --- I think previously you could click on the platform/OS logos, but few noticed that was even a link (or maybe there was a hidden link that appeared when you hovered? I don't recall.). Now the little static gray circles "(i)" are clickable, but that doesn't seem very obvious (to me) either.)

The haxe.org main homepage is more like a pitch for Haxe, which I think is good, so I don't think install instructions should be mixed somewhere in there.

If I'm new to Haxe and thinking I'd like to install Haxe for a given target/platform on a given OS, I'd be looking either for an "Install" tab at the top, or failing that, under a "Documentation" tab at the top (currently spelled "Learn Haxe"). This would direct people as quickly as possible to the page and instructions they're looking for.

The "Install" link should lead to its very own page with links to the various links to OS-specific / platform-specific instructions, possibly also to general install instructions and to the build instructions page for folks looking to build/install from source.

Incidentally, the Haxe download page and also the main haxe.org footer should also have a link pointing to that central install page.

For comparison, some other language site's install pages (in no particular order):

Rust has an "Install" link right up on the header
Golang has it under their Documents tab
Kotlin makes you dig into Learn >> tutorials >> getting started.
ReasonML has Docs >> where you then click Installation
Dart has a Get Started page which provides links to getting started with its different setups
TypeScript has a Quick Start link that takes you to a page which seems to contain the types of guides being discussed here.

robinrodricks · 2019-03-27T08:53:27Z

@uvtc
I have no issues converting our "getting started" pages into dedicated information portals for the respective platforms. This was my original idea to begin with. However the sheer amount of work involved made me scale down this ambitious plan to just a basic "getting started" guide. Even this humble thing is so hard to create with actual valid steps and get improved/approved via the team.

If you have any ideas you are free to send me content on the haxe community and I'll see what I can do to spruce up the platform pages. (eg: sample projects, recommended libraries) And as for the rest of your comments, as a newbie the numero uno issue I have is how to get started with this tech. Unlike Visual Studio or Electron its not trivial to setup a functioning haxe build chain with all the requisite files and tools installed. It took the lot of us under a month just to document an installation guide for 4 platforms!

And yes, we can always feature the same platform logos in a better fashion on the haxe download page or any other pages for that matter. That will need more work and will be part of a separate PR, if we get down to doing it. Please keep in mind that I tried to maintain the current look-and-feel of the logos which is why they are probably not immediately recognizable as being "clickable". I did that so there would be least resistance to this PR from a stylistic POV.

At the end of the day, if someone asks me, "hey, can I use haxe to write python scripts?", I would like the convenience of saying "just visit the haxe website and click python", instead of having to guide them to a specific section of the website just to get them started with the damn thing. Once they are off the ground, they should [hopefully] find their wings and get up and running with haxe.

uvtc · 2019-03-27T12:27:56Z

Ah, I see. I was accidentally conflating an "install" page and a "setup" pages. Thanks.

Also, maybe I'm misunderstanding you; I thought you were creating individual separate setup guides, rather than one large one.

I think Haxe could use a simple install page, which would be fairly short, mostly containing, "see the Downloads page for platform-specific packages installable in the usual way for your platform". However, that page should probably also contain a matrix of links to the platform/target -specific setup guides.

uvtc · 2019-03-27T12:51:25Z

At the end of the day, if someone asks me, "hey, can I use haxe to write python scripts?", I would like the convenience of saying "just visit the haxe website and click python", instead of having to guide them to a specific section of the website just to get them started with the damn thing. Once they are off the ground, they should [hopefully] find their wings and get up and running with haxe.

I agree, though I think it's more obvious to link to them from an install page (which, coincidentally, haxe lacks) rather than the target/platform icons.

robinrodricks · 2019-03-29T13:04:16Z

Travis failed generating videos.

Final effect of this PR:

Homepage untouched
Post-download page has 6 new logos
Documentation page has 6 new logos

robinrodricks · 2019-04-12T11:44:37Z

@markknol please check?

robinrodricks · 2019-04-17T13:16:06Z

@markknol could you check this please?

markknol · 2019-04-17T13:28:46Z

Please have patience, it's on my list.

markknol · 2019-05-16T08:29:39Z

@robinrodricks Sorry for the delay, but just spend some time looking at it. I think it looks almost good. These are my remarks:

use proper <pre><code class="prettyprint haxe"> </code></pre> (not <div class="step-code) so the highlighter highlights your code,
remove the  comments in the html, you already have this somewhere in your git history, no need to keep it commented
bonus points if you optimize the svg

@ibilon @Simn @andyli Are we ok to merge this PR?

To make review bit easier, look here. I manually made build with our master with the PR merged, no manual, no highlighter (it errors here for some reason)

andyli · 2019-05-16T11:17:38Z

Better find out why the PR build failed. Other than that, it's fine for me.

robinrodricks · 2019-05-17T08:40:44Z

Clickable Logos on the homepage

Replace the combined logo image with individual clickable logos
Logo graphics are included in SVG format with PNG fallback
All logos are specified with img elements with PNG fallback, alt text, title text

Including the homepage clickable logos code here.. in case its needed in the future:

<div class="platformLogos">
	<style>
		.platformLogos{
			display: block;
			width: 450px;
			margin: 10px auto;
			text-align: center;
		}
		.platformLogos .row{
			display: inline-block;
			padding-bottom: 20px;
		}
		.platformLogos .cell{
			display: inline-block;
			margin-right: 20px;
		}
		.platformLogos .cell img{
			height: 35px;
		}
		.platformLogos .cell a:hover img{
			filter: brightness(0.7);
		}
	</style>
	<div class="row">
		<div class="cell">
			<a href="/use-cases/mobile/">
				<img src="/img/targets/icons/ios.svg" onerror="this.src='/img/targets/icons/ios.png'" alt="iOS Support" title="iOS Support" />
			</a>
		</div>
		<div class="cell">
			<a href="/use-cases/mobile/">
				<img src="/img/targets/icons/android.svg" onerror="this.src='/img/targets/icons/android.png'" alt="Android Support" title="Android Support" />
			</a>
		</div>
		<div class="cell">
			<a href="/use-cases/web/">
				<img src="/img/targets/icons/html5.svg" onerror="this.src='/img/targets/icons/html5.png'" alt="HTML5 Support" title="HTML5 Support" />
			</a>
		</div>
		<div class="cell">
			<a href="/documentation/introduction/compiler-targets.html">
				<img src="/img/targets/icons/neko.svg" onerror="this.src='/img/targets/icons/neko.png'" alt="NekoVM Support" title="NekoVM Support" />
			</a>
		</div>
	</div>
	<div class="row">
		<div class="cell">
			<a href="/documentation/introduction/compiler-targets.html">
				<img src="/img/targets/icons/nodejs.svg" onerror="this.src='/img/targets/icons/nodejs.png'" alt="Node.js Support" title="Node.js Support" />
			</a>
		</div>
		<div class="cell">
			<a href="/documentation/introduction/compiler-targets.html">
				<img src="/img/targets/icons/flash.svg" onerror="this.src='/img/targets/icons/flash.png'" alt="Flash Support" title="Flash Support" />
			</a>
		</div>
		<div class="cell">
			<a href="/documentation/introduction/compiler-targets.html">
				<img src="/img/targets/icons/cpp.svg" onerror="this.src='/img/targets/icons/cpp.png'" alt="C++ Support" title="C++ Support" />
			</a>
		</div>
		<div class="cell">
			<a href="/documentation/platforms/python.html">
				<img src="/img/targets/icons/python.svg" onerror="this.src='/img/targets/icons/python.png'" alt="Python Support" title="Python Support" />
			</a>
		</div>
	</div>
	<div class="row">
		<div class="cell">
			<a href="/documentation/platforms/csharp.html">
				<img src="/img/targets/icons/csharp.svg" onerror="this.src='/img/targets/icons/csharp.png'" alt="C# Support" title="C# Support" />
			</a>
		</div>
		<div class="cell">
			<a href="/documentation/platforms/php.html">
				<img src="/img/targets/icons/php.svg" onerror="this.src='/img/targets/icons/php.png'" alt="PHP Support" title="PHP Support" />
			</a>
		</div>
		<div class="cell">
			<a href="/documentation/platforms/java.html">
				<img src="/img/targets/icons/java.svg" onerror="this.src='/img/targets/icons/java.png'" alt="Java Support" title="Java Support" />
			</a>
		</div>
		<div class="cell">
			<a href="/documentation/introduction/compiler-targets.html">
				<img src="/img/targets/icons/lua.svg" onerror="this.src='/img/targets/icons/lua.png'" alt="Lua Support" title="Lua Support" />
			</a>
		</div>
		<div class="cell">
			<a href="/documentation/introduction/compiler-targets.html">
				<img src="/img/targets/icons/hashlink.svg" onerror="this.src='/img/targets/icons/hashlink.png'" alt="HashLink Support" title="HashLink Support" />
			</a>
		</div>
	</div>
</div>

robinrodricks · 2019-05-17T09:12:38Z

@markknol Thanks. I've done your changes. Please review.

Homepage "clickable logos" commented-out code has been removed
Reverted: Pre/Prettyprint used instead of code sections but only for haxe code. The command line code has not been modified.

robinrodricks · 2019-05-17T09:18:58Z

Ugh. Now we have git conflicts. I'll revert the changes to the pages. I'll just modify the pages in separate PRs.

robinrodricks · 2019-05-17T09:28:01Z

Can you just accept this please. We can change the code snippets later. I cannot modify those files in this PR anyways.

markknol · 2019-05-17T10:24:12Z

Why can't you? Just merge the staging into the branch of the PR.

robinrodricks · 2019-05-17T12:38:27Z

Then you'll ask me to redo all the changes, but this time create one branch per webpage. The last time I tried to modify multiple pages in one PR it got blasted to hell and back.

markknol · 2019-05-17T12:46:13Z

This is confusing 😄 If you merge the current staging in your branch, then you won't have to do it again or in different PR, if I'm not mistaken.

Aurel300 · 2019-06-14T14:39:17Z

Thank you for the contribution. Sorry for the delay once again.

Rebasing after the prettyprint commit would have solved your issues.

The last time I tried to modify multiple pages in one PR it got blasted to hell and back.

Unsure what you are referring to – looking at your haxe.org PRs they are all extremely atomic.

robinrodricks · 2019-06-14T14:47:49Z

Hi Aurel and thank you very much for merging this. I wanted to do the changes that Mark wanted but I grew tired of the whole PR business. Thanks again. Happy to help.

…

On Fri, Jun 14, 2019, 8:09 PM Aurel ***@***.***> wrote: Thank you for the contribution. Sorry for the delay once again. Rebasing after the prettyprint commit would have solved your issues. The last time I tried to modify multiple pages in one PR it got blasted to hell and back. Unsure what you are referring to – looking at your haxe.org PRs they are all extremely atomic. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#377?email_source=notifications&email_token=ABT3UKSREQF4R6C3ACZASQTP2OURNA5CNFSM4HBNYJQKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODXW7QJQ#issuecomment-502134822>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABT3UKSTODMTYSKISYYXPGDP2OURNANCNFSM4HBNYJQA> .

uvtc mentioned this pull request Mar 27, 2019

Linking to platform guides from the homepage #376

Open

robinrodricks changed the title ~~Clickable platform logos on the homepage~~ Add buttons to link to the new platform specific guides May 15, 2019

Aurel300 self-assigned this Jun 14, 2019

robinrodricks added 8 commits June 14, 2019 15:14

add svg logos of targets

b4124a7

svg fix

49df818

add bitmap icon fallbacks

746d3d9

replace logos with clickable logo icons

73fa638

add click message

ee71353

use high quality png icons

36585f6

add platform specific help to download page

f616635

Update index.html

7ad0600

robinrodricks and others added 12 commits June 14, 2019 15:14

only keep 4 logos

5021f51

add alternate icon forms

61ea4ad

add platform help buttons to doc index page

7c6a4b6

add platform help buttons to post download page

516ac7d

fix python logo looking squished

e83db89

move buttons to getting started section

4fc4205

add js logo

8e342c9

add js and nodejs, improve layout

542c9c6

remove commented code

2c9e45a

use pre/prettyprint instead of code

8fe3df4

remove comment

01f622b

remove extra line after prettyprint

824473e

Aurel300 merged commit 275036d into HaxeFoundation:staging Jun 14, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add buttons to link to the new platform specific guides #377

Add buttons to link to the new platform specific guides #377

robinrodricks commented Mar 26, 2019 •

edited

Loading

markknol commented Mar 26, 2019

robinrodricks commented Mar 26, 2019

uvtc commented Mar 27, 2019 •

edited

Loading

robinrodricks commented Mar 27, 2019 •

edited

Loading

uvtc commented Mar 27, 2019

uvtc commented Mar 27, 2019

robinrodricks commented Mar 29, 2019 •

edited

Loading

robinrodricks commented Apr 12, 2019

robinrodricks commented Apr 17, 2019

markknol commented Apr 17, 2019

markknol commented May 16, 2019 •

edited

Loading

andyli commented May 16, 2019

robinrodricks commented May 17, 2019 •

edited

Loading

robinrodricks commented May 17, 2019 •

edited

Loading

robinrodricks commented May 17, 2019 •

edited

Loading

robinrodricks commented May 17, 2019

markknol commented May 17, 2019

robinrodricks commented May 17, 2019 •

edited

Loading

markknol commented May 17, 2019 •

edited

Loading

Aurel300 commented Jun 14, 2019

robinrodricks commented Jun 14, 2019 via email

Add buttons to link to the new platform specific guides #377

Add buttons to link to the new platform specific guides #377

Conversation

robinrodricks commented Mar 26, 2019 • edited Loading

markknol commented Mar 26, 2019

robinrodricks commented Mar 26, 2019

uvtc commented Mar 27, 2019 • edited Loading

robinrodricks commented Mar 27, 2019 • edited Loading

uvtc commented Mar 27, 2019

uvtc commented Mar 27, 2019

robinrodricks commented Mar 29, 2019 • edited Loading

robinrodricks commented Apr 12, 2019

robinrodricks commented Apr 17, 2019

markknol commented Apr 17, 2019

markknol commented May 16, 2019 • edited Loading

andyli commented May 16, 2019

robinrodricks commented May 17, 2019 • edited Loading

Clickable Logos on the homepage

robinrodricks commented May 17, 2019 • edited Loading

robinrodricks commented May 17, 2019 • edited Loading

robinrodricks commented May 17, 2019

markknol commented May 17, 2019

robinrodricks commented May 17, 2019 • edited Loading

markknol commented May 17, 2019 • edited Loading

Aurel300 commented Jun 14, 2019

robinrodricks commented Jun 14, 2019 via email

robinrodricks commented Mar 26, 2019 •

edited

Loading

uvtc commented Mar 27, 2019 •

edited

Loading

robinrodricks commented Mar 27, 2019 •

edited

Loading

robinrodricks commented Mar 29, 2019 •

edited

Loading

markknol commented May 16, 2019 •

edited

Loading

robinrodricks commented May 17, 2019 •

edited

Loading

robinrodricks commented May 17, 2019 •

edited

Loading

robinrodricks commented May 17, 2019 •

edited

Loading

robinrodricks commented May 17, 2019 •

edited

Loading

markknol commented May 17, 2019 •

edited

Loading