deepreg.net revamp

[YipengHu]

Issue description

The current use of deepreg.net, redirecting the readthedocs.io, is problematic:

• the sub-pages URL do not show properly;
• the link back to github does not work.

However, to build the entire documentation under deepreg.net is also not trivial.

Propose: A landing page (or a product page) using https://deepregnet.github.io/DeepReg/, redirected by deepreg.net, on which, very brief introduction, features and graphic display (a few images from DeepReg Demos) will be used together with links to Github and RTD.

Please leave your comments below, also assign yourself if some light front-end engineering attracts you.

[YipengHu]

@i'm sending you some pictures for the landing page. prostate mr-to-us:

mr-to-mr

[YipengHu]

cardiac mr:

[YipengHu]

Head and neck:

[s-sd]

@YipengHu @zacbaum, inter-subject lung ct registration between different patients

[YipengHu]

@s-sd this looks good but better to rotate 90 degree to use normal radiologist view.

[s-sd]

@YipengHu @zacbaum, the rotated version of the inter-subject ct lung registration:

[YipengHu]

@s-sd sorry being picky, but usually they put spines on the bottom and the heart on the top ;)

[s-sd]

@YipengHu, sorry, corrected it now:

[zacbaum]

Initial page available served here.

Let me know your thoughts or if there's anything else to add. I've made it simple (as requested 😉) - but it still links to the repo, the docs, and has a bit of text and some logos/images to look at.

[mathpluscode]

Initial page available served here.

Let me know your thoughts or if there's anything else to add. I've made it simple (as requested ) - but it still links to the repo, the docs, and has a bit of text and some logos/images to look at.

WOW that's quick

Some comments:

• Black ? I personally find this color not very confortable... black & blue is a bit strange to me
• the arrow looks not very nice
• why italic font for the description
• documentation and github button not aligned, style is a bit strange
• why put another logo with diff color on those medical images?

Sorry they might be some strong opinions, the speed of getting this page done is amazing. I'm just a bit perfectionist on websites. Apologies.

Btw just wondering how you built this page? Is there any ready-to-use package/template on the internet?

[YipengHu]

Initial page available served here. Let me know your thoughts or if there's anything else to add. I've made it simple (as requested ) - but it still links to the repo, the docs, and has a bit of text and some logos/images to look at.

WOW that's quick

Some comments:

• Black ? I personally find this color not very confortable... black & blue is a bit strange to me
• the arrow looks not very nice
• why italic font for the description
• documentation and github button not aligned, style is a bit strange
• why put another logo with diff color on those medical images?

Sorry they might be some strong opinions, the speed of getting this page done is amazing. I'm just a bit perfectionist on websites. Apologies.

Btw just wondering how you built this page? Is there any ready-to-use package/template on the internet?

sorry - i'm doing some "experiments" - comments tomorrow please... first-timer-css here...

[zacbaum]

Initial page available served here. Let me know your thoughts or if there's anything else to add. I've made it simple (as requested ) - but it still links to the repo, the docs, and has a bit of text and some logos/images to look at.

WOW that's quick

Some comments:

• Black ? I personally find this color not very confortable... black & blue is a bit strange to me
• the arrow looks not very nice
• why italic font for the description
• documentation and github button not aligned, style is a bit strange
• why put another logo with diff color on those medical images?

Sorry they might be some strong opinions, the speed of getting this page done is amazing. I'm just a bit perfectionist on websites. Apologies.

Btw just wondering how you built this page? Is there any ready-to-use package/template on the internet?

@YipengHu has made some changes 😉 - this is based on a prebuilt Jekyll template (see repo from which it was forked for samples there as well - may be good for inspiration @YipengHu if you want to keep playing around).

[mathpluscode]

why we wanted deepreg.net

so, the original reason that @YipengHu want deepreg.net was something wrong with readthedocs:

if you go to http://deepreg.net/, and click the github link on top right, there will be errors.

so how can we use custom domain for docs

actually, the docs should be docs.deepreg.net not deepreg.net, and I've tried the steps in rtd docs, and it works for my own domain docs.mcts.xyz, if you try this, you will go to deepreg docs.

Then this means that we still need a landing page for deepreg.net

should we spend time on the template

Personally, we should not spend too much time on the landing page unless it's someone's hobby and we can make sure it's properly maintained (means more efforts).

I've checked some other template (I forked one and did some commits trying to adapt it, but eventually I deleted that repo :( ), it still required a big effort on customizing things and making things beautiful.

So I think the default templates might be enough for the moment https://pages.github.com/themes/, such that we only write markdown files and do not need to worry about the styles. even https://monai.io/ doesn't have a too complicated website

So I'd suggest choosing one template from these default ones. They are not amazing, but it requires minimal effort on front-end.

Opinions?

What do you think @zacbaum @NMontanaBrown @YipengHu

Sorry for my comments earlier, I do appreciate all the efforts we have made. I just want to show the best of deepreg to others ;) I believe all the time we spent is worthy, helping us to understand github page, dns records etc. ...

[DeepRegNet]

@mathpluscode all good points - i'm marking this post-r1 and revisit later

[YipengHu]

as discussed, @zacbaum I think we are go ahead with this?

[zacbaum]

@YipengHu let's all discuss (very) high-level content for the page at today's meeting. We will use the Cayman template as discussed but I would like input from everyone as to what should be on this page so that we don't run into issues as occurred last time with content/style.

[mathpluscode]

@YipengHu let's all discuss (very) high-level content for the page at today's meeting. We will use the Cayman template as discussed but I would like input from everyone as to what should be on this page so that we don't run into issues as occurred last time with content/style.

@zacbaum Can we have a draft/list of contents before the discussion so that you can propose something and we quickly discuss and provide more opinions? It can be faster than starting a discussion from an empty list. ^_^

[zacbaum]

@mathpluscode - as in ticket description 😉

A landing page (or a product page) using https://deepregnet.github.io/DeepReg/, redirected by deepreg.net, on which, very brief introduction, features and graphic display (a few images from DeepReg Demos) will be used together with links to Github and RTD.

Text can be lifted/repurposed from README.md - images as above - links consistent/similar to those on README.md as well.

I will not have time to create a draft webpage by 1pm today...

[s-sd]

@zacbaum, I have made some visualisations (gifs) using the vis tool for four of the demos. There are a few different visualisations for each of the four demos. The link to access them is:

https://liveuclac-my.sharepoint.com/:u:/g/personal/zcemsus_ucl_ac_uk/EeNqjdkvYphFkvdNfnkKyx8BbFGGcUMQ7SWIvJeEpYh2Ig?e=trzAd8

The files are grouped into folders according to the demo name. The files with names ending with _slice_N.gif are the ones which show warping using the DDF. The two files ct_lung/visualisation.gif and vis2.gif are tiled gifs over the slices with the rows correspnding to [moving_image, fixed_image] and [moving_image, fixed_image, pred_fixed_image] respectively and the two columns corresponding to image and label. All other file names are just the name of the original file with the .gif extension.

[zacbaum]

Please go and have a look: https://deepregnet.github.io/

Do not make changes to the site, please raise concerns or leave comments here and I will address them.

Right now it is as simple as can be; let me know if there is additional content to be added. A reminder that this is to serve as a landing page to redirect users to the README.md, RTD or the demos - NOT as an information hub for all things DeepReg.

One thing I will add in the future (pending acceptance) is a link/citation for the JOSS paper.

[YipengHu]

Why the first page only occupies the like 2/3 of my screen? is it by-design or just me?

[zacbaum]

Why the first page only occupies the like 2/3 of my screen? is it by-design or just me?

Do you mean the header? (Green/Blue bit) I can make the logo, etc smaller if we would like.

[YipengHu]

Why the first page only occupies the like 2/3 of my screen? is it by-design or just me?

Do you mean the header? (Green/Blue bit) I can make the logo, etc smaller if we would like.

yeah - may be making it smaller will do - could be just me...

[mathpluscode]

👏 Nice.

"This page created and maintained by DeepReg.Net." is not in the middle at the bottom

Agree the logo might need to be smaller lol

Also do we need twice the logo? I would vote for text only :) It's less risky I'd say.

[zacbaum]

👏 Nice.

"This page created and maintained by DeepReg.Net." is not in the middle at the bottom

Does that by default 😉 Will center it.

Agree the logo might need to be smaller lol

👍🏼

Also do we need twice the logo? I would vote for text only :) It's less risky I'd say.

I've included it twice as technically they're logos for different things (one for DeepReg.Net and the other for DeepReg).

I'll remove the first? Or... Which do we prefer?

[YipengHu]

i'm slightly for keeping both logos (not very strongly). maybe make one (the .net) very very small? @zacbaum wait a day or two, everyone will have their opinions. if nothing outstanding (i mean really outstanding), you should make the call.

[mathpluscode]

👏 Nice.

"This page created and maintained by DeepReg.Net." is not in the middle at the bottom

Does that by default 😉

Will center it.

Agree the logo might need to be smaller lol

👍🏼

Also do we need twice the logo? I would vote for text only :) It's less risky I'd say.

I've included it twice as technically they're logos for different things (one for DeepReg.Net and the other for DeepReg).

I'll remove the first? Or... Which do we prefer?

Emmm I'd say a logo without .net at top? Logo in the middle is strange. Let's see other's opinions 😼

[zacbaum]

For now I'll make both logos a bit smaller, and center text at the bottom. Then we can ask for comments at next dev meeting.

[mathpluscode]

For now I'll make both logos a bit smaller, and center text at the bottom. Then we can ask for comments at next dev meeting.

check with phones specially plz lol i think nowadays many traffic are via phones instead of laptops

[NMontanaBrown]

Looks nice 👍

[mathpluscode]

I'm closing this as deepreg.net is now pointing to the landing page and it's alive now ;)