Implement new block for top of "for-devs" section of website

[mairin]

There is a "revamp" branch of the website with upcoming changes.

We would like the following mockup to be implemented in HTML/CSS, to be used as a banner/block on the for-devs page:

[OlaoluwaM]

Hey @mairin is this open to outside contributors or no?

[mairin]

@OlaoluwaM absolutely, all yours!

[OlaoluwaM]

Hey @mairin , I have a few questions if you do not mind.

[OlaoluwaM]

For the text editor aspect of the mockup, is there a way to accomplish the syntax highlighting outside using classes and such? Will the editor section be interactive, can users switch to the see the contents of, lets say, init.py or main.py?

[OlaoluwaM]

Also, where will this mockup go, do I create a for-devs.html in the __pages dir of the "revamp" branch and keep it there?

[rudolphpienaar]

For the text editor aspect of the mockup, is there a way to accomplish the syntax highlighting outside using classes and such? Will the editor section be interactive, can users switch to the see the contents of, lets say, init.py or main.py?

Probably having an interactive "file browser/viewer" would be way overkill but would be totally awesome were it possible.

[rudolphpienaar]

Also @OlaoluwaM just to reiterate, this is all on the revamp branch. I actually have something of a deadline to get the revamp out in a week, so for here and now better to just get something that works than go too deep down the rabbit hole. Any help you might provide will be much much appreciated!

[OlaoluwaM]

Ok sure, makes sense, could you let me know the exact deadline so I can work with it too

[OlaoluwaM]

Also, does all the CSS for each page live in screen.css? If so, is there a way I am meant to separate it?

I found that for the "join-us.html" there is a top-level div with an id of "join," and that is used to id the styles for the page, should I do the same? Like "#for-devs", then style away, or is there another way?

[rudolphpienaar]

The deadline is Red Hat Summit that starts April 27. So ideally I'd like have the revamp live next Friday.

The CSS does live in screen.css and no, you don't need to separate it.

You are free to style etc whatever way seems best to you.

[OlaoluwaM]

Sounds good. For the text editor bit, I was thinking maybe we could just use an image since we are opting for speed over OMGness 🤔?

[rudolphpienaar]

Yes -- also if you have skills in just improving the look and feel a bit of the landing page that would be awesome. I'm not that skilled in the minutiae of nice layout in raw html/css :-)

[OlaoluwaM]

I will try my best 😅

[OlaoluwaM]

Yes -- also if you have skills in just improving the look and feel a bit of the landing page that would be awesome. I'm not that skilled in the minutiae of nice layout in raw html/css :-)

By "landing page" do you mean https://chrisproject.org/ or the for-dev bit?

[mairin]

@OlaoluwaM Let me know if you need any help with the image. The SVG is here but I am happy to export it in chunks or whatnot as needed: https://github.com/FNNDSC/cube-design/raw/master/website/cookiecutter-diagram.svg

[OlaoluwaM]

Hello, do you know where I could find the font you used for the mockup, or am I free to pick a font

[OlaoluwaM]

Actually, scratch that, using another font could have unintended (ugly) side effects. I'll stick to the default unless you want to change the default font

[OlaoluwaM]

Update!

So I have completed the textual bits, all that remains are the images, specifically the settings-ish image, the white image besides the text, and the editor below as an image

[OlaoluwaM]

[mairin]

Hi @OlaoluwaM ! The font is Overpass, but it should be embedded in the website. From your screenshots it looks like it isn't properly loading. I would consider that a bug, if you are interested in investigating that would be very helpful :)

[OlaoluwaM]

Sure! What do you think of the update. I changed the icon if you do not mind

[mairin]

@OlaoluwaM It looks like a solid start! I would stick with the artwork in the mockup / svg, just because we know where the sourcing is from / the licensing, and the style is meant to match what is on the site (the one you included looks nice but the lines are darker and thicker so they contrast with what is already being used in the graphic style on the website.)

I would suggest as a next step that you block out the different areas:

• the white metadata block in the upper right, for example - the square you have there you could set up to have a white background for now and we can swap in the background image after. And the text on the block (I would use a mono font for it) should be filled in.
• the sidebar in the lower left - I would block that out too with a white bg and fill in the text
• the terminal in the lower right - block that out with the right background color
• the arrows for the sidebar and terminal can hopefully be layered on top with css?

What do you think?

[OlaoluwaM]

Hmm, okay you want me to outline those elements with solid color right?

But couldn't I get the SVGs and put them there instead?

[OlaoluwaM]

Also for the text at the top-right corner I think I can recreate the block with CSS but it would also be good to have a backup SVG, just in case 😅

[OlaoluwaM]

Update!

I did the turquoise arrow with CSS, but I doubt that would scale well. I believe an SVG would be better. Is there anything I need to add?

[OlaoluwaM]

The reason I didn't add the second file arrow was that it would cause positioning problems as we try to align the image with it. It would be better to take the sidebar arrow along with the contents.

[OlaoluwaM]

Another Update!

I used Figma to recreate the shape on top of the editor and exported it as an SVG so now it looks better

Let me know what you think!

[fnndsc-bot]

Hey Olaoluwa --

Are your updates etc someplace where I can see them? Have you made a PR to the branch?

Best

On Fri, 2021-04-23 at 00:08 +0000, 'Olaoluwa Mustapha' via FNNDSC Developers wrote:

• External Email - Caution *

Another Update!

I used Figma to recreate the shape on top of the editor and exported it as an SVG so now it looks better

[For-Developers-The-ChRIS-Project (3)]<https://urldefense.com/v3/__https://user-images.githubusercontent.com/37044906/115799382-03de6980-a39e-11eb-9530-3790c9738c38.png__;!!NZvER7FxgEiBAiR_!7iahKncYjAeaZt3Z4um6ZQ7BJjDKNGcJ713Z1QbhnBkXX7jnQ4i1Wn9Gs8sOgm8reC1h0w3WACsytZw$

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub<https://urldefense.com/v3/__https://github.com/FNNDSC/website/issues/42*issuecomment-825278722__;Iw!!NZvER7FxgEiBAiR_!7iahKncYjAeaZt3Z4um6ZQ7BJjDKNGcJ713Z1QbhnBkXX7jnQ4i1Wn9Gs8sOgm8reC1h0w3WaFhC2yg$

, or unsubscribe<https://urldefense.com/v3/__https://github.com/notifications/unsubscribe-auth/ADCW4PLRHWNYIGP6DOKRQGLTKC26JANCNFSM43AIVUIA__;!!NZvER7FxgEiBAiR_!7iahKncYjAeaZt3Z4um6ZQ7BJjDKNGcJ713Z1QbhnBkXX7jnQ4i1Wn9Gs8sOgm8reC1h0w3WF_a4liU$ .

[rudolphpienaar]

Hey Olaoluwa --

I'm trying to fire up the revamp changes, but get this

docker-compose up                                                                                                                                                                                                                                      Starting website_jekyll_1 ... done
Attaching to website_jekyll_1
jekyll_1  | Configuration file: /srv/jekyll/_config.yml
jekyll_1  |             Source: /srv/jekyll
jekyll_1  |        Destination: /srv/jekyll/_site
jekyll_1  |  Incremental build: disabled. Enable with --incremental
jekyll_1  |       Generating... 
jekyll_1  |        Jekyll Feed: Generating feed for posts
jekyll_1  | jekyll 3.9.0 | Error:  Permission denied @ rb_sysopen - /srv/jekyll/_site/404.html
website_jekyll_1 exited with code 1

Some scratching on the web seemed to indicate this has to do with JEKYLL_UID and JEKYLL_GID env variables. https://stackoverflow.com/questions/57503011/unable-to-build-cloned-jekyll-site-jekyll-3-8-5-error-permission-denied-d

Do you have any insights?

[OlaoluwaM]

I'm not sure, try running with root privileges, that is sudo docker-compose up.

Also, I found that you need to have dockerd (sudo dockerd) running as well with root privileges. That worked for me

[OlaoluwaM]

Also, you can delete the for-devs.scss file because I used a vscode extension to transpile it to CSS, so you can just edit that, or keep it if you want but you would need the Live Sass Compile extension for any changes to reflect. If you decide to go down the extension route let me know so I can send the settings.json file for it

[fnndsc-bot]

I'll keep digging... running sudo didn't make a difference.

What is your UID/GID btw?

On Fri, 2021-04-23 at 10:33 -0700, 'Olaoluwa Mustapha' via FNNDSC Developers wrote:

I'm not sure, try running with root privileges, that is sudo docker-compose up.

Also, I found that you have dockerd (sudo dockerd) running as well with root privileges. That worked for me

[rudolphpienaar]

FWIW it seems that the docker-compose up only works if your UID is 1000. I'm assuming that is what yours is. I wasn't able to get it to work with mine, so for now I'm just using an account that has that UID. It's a bit annoying but it works.

On Fri, 2021-04-23 at 10:39 -0700, Olaoluwa Mustapha wrote:

Also, you can delete the for-devs.scss file because I used a vscode extension to transpile it to CSS, so you can just edit that, or keep it if you want but you would need the Live Sass Compile extension for any changes to reflect. If you decide to go down the extension route let me know so I can send the settings.json file for it

[ramyaparimi]

Is this still an open issue? If so, can I work on this??