# Refactoring homepage **URL:** \ **Category:** Internals\ **Created:** [July 21, 2023, 1:24pm UTC](https://racket.discourse.group/t/refactoring-homepage/2121 "2023-07-21T13:24:45Z")\ **Posts on this page:** 19\ **Page:** 1
**Author:** ![sorawee](https://avatars.discourse-cdn.com/v4/letter/s/ea5d25/32.png) [@sorawee](https://racket.discourse.group/u/sorawee)\ **Post date:** [July 21, 2023, 1:24pm UTC](https://racket.discourse.group/t/refactoring-homepage/2121/1 "2023-07-21T13:24:45Z")
Per @jbclements's [suggestion](https://racket.discourse.group/t/revising-readmes/2120), I attempted to make sections in the homepage of [racket-lang.org](http://racket-lang.org) linkable. As a part of this effort, I refactored the home page (I am yak shaving, am I not?). See more details at [[WIP] homepage: refactor the home page by sorawee · Pull Request #254 · racket/racket-lang-org · GitHub](https://github.com/racket/racket-lang-org/pull/254) If anyone want to help testing the anchor linking and ensuring that the refactoring is correct: the modified site is [here](https://sorawee.github.io/tmp/). Let me know how it goes. It would be nice to test against many browsers and devices of different screen sizes. ---
**Author:** ![benknoble](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/benknoble/32/16_2.png) [@benknoble](https://racket.discourse.group/u/benknoble)\ **Post date:** [July 21, 2023, 2:19pm UTC](https://racket.discourse.group/t/refactoring-homepage/2121/2 "2023-07-21T14:19:48Z")
I clicked Community on the tmp site, which got me "[sorawee.github.io/tmp/#community](http://sorawee.github.io/tmp/#community)." When I typed that in my phone's browser, it loaded the mobile site but did not jump to Community. (It did on my computer, though.) ---
**Author:** ![sorawee](https://avatars.discourse-cdn.com/v4/letter/s/ea5d25/32.png) [@sorawee](https://racket.discourse.group/u/sorawee)\ **Post date:** [July 21, 2023, 7:51pm UTC](https://racket.discourse.group/t/refactoring-homepage/2121/3 "2023-07-21T19:51:19Z")
Thanks! This should be fixed. ---
**Author:** ![sschwarzer](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/sschwarzer/32/1940_2.png) [@sschwarzer](https://racket.discourse.group/u/sschwarzer)\ **Post date:** [July 21, 2023, 8:56pm UTC](https://racket.discourse.group/t/refactoring-homepage/2121/4 "2023-07-21T20:56:19Z")
Many thanks for your initiative! 🙂 I guess we should remove the [Mailing lists](https://lists.racket-lang.org/) from the Community section if we already discourage their use. The only reason I can think of for mentioning the mailing lists would be to link to the archives. In that case, [https://lists.racket-lang.org/](https://lists.racket-lang.org/) should be adapted. > [@sorawee](#): > > I attempted to make sections in the homepage of [racket-lang.org](http://racket-lang.org) linkable. _How_ do I get a link, e.g. for the Community section? When I click on "Community", the URL still reads [Racket](https://sorawee.github.io/tmp/) . I guess an anchor should appear in the browser address line? ---
**Author:** ![sorawee](https://avatars.discourse-cdn.com/v4/letter/s/ea5d25/32.png) [@sorawee](https://racket.discourse.group/u/sorawee)\ **Post date:** [July 21, 2023, 9:16pm UTC](https://racket.discourse.group/t/refactoring-homepage/2121/5 "2023-07-21T21:16:48Z")
When I click "Community", the URL address is changed to "[https://sorawee.github.io/tmp/#community](https://sorawee.github.io/tmp/#community)" for me. Isn't that the case for you? ---
**Author:** ![sschwarzer](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/sschwarzer/32/1940_2.png) [@sschwarzer](https://racket.discourse.group/u/sschwarzer)\ **Post date:** [July 21, 2023, 9:55pm UTC](https://racket.discourse.group/t/refactoring-homepage/2121/6 "2023-07-21T21:55:12Z")
Ha ha, it _is_ the case when I switch on JavaScript. I just didn't think about needing JavaScript enabled for the URL anchor to appear. It would be nice if it would be possible to make this work without JavaScript, but if it's too difficult, the current state is at least an improvement. 🙂 ---
**Author:** ![sorawee](https://avatars.discourse-cdn.com/v4/letter/s/ea5d25/32.png) [@sorawee](https://racket.discourse.group/u/sorawee)\ **Post date:** [July 21, 2023, 10:17pm UTC](https://racket.discourse.group/t/refactoring-homepage/2121/7 "2023-07-21T22:17:17Z")
I mean, the current homepage uses JS for tab switching, so if you don't use JS, you can't switch the tab at all! The new homepage already improves this by using CSS to implement tabs, so now you can switch tabs even if JS is disabled. But yes, you do need to enable JS to get anchors working, as it involves actions that can't be done purely in CSS. ---
**Author:** ![sschwarzer](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/sschwarzer/32/1940_2.png) [@sschwarzer](https://racket.discourse.group/u/sschwarzer)\ **Post date:** [July 21, 2023, 11:10pm UTC](https://racket.discourse.group/t/refactoring-homepage/2121/8 "2023-07-21T23:10:18Z")
> [@sorawee](#): > > I mean, the current homepage uses JS for tab switching, so if you don't use JS, you can't switch the tab at all! I already had allowed JavaScript for [https://racket-lang.org/](https://racket-lang.org/) , but not for [https://sorawee.github.io](https://sorawee.github.io) . ---
**Author:** ![sorawee](https://avatars.discourse-cdn.com/v4/letter/s/ea5d25/32.png) [@sorawee](https://racket.discourse.group/u/sorawee)\ **Post date:** [July 23, 2023, 4:11am UTC](https://racket.discourse.group/t/refactoring-homepage/2121/9 "2023-07-23T04:11:02Z")
Note: I am using [https://sorawee.github.io/tmp/](https://sorawee.github.io/tmp/) for previewing [https://github.com/racket/racket-lang-org/pull/254](https://github.com/racket/racket-lang-org/pull/254), so the capability to link to a tab is temporarily unavailable. ---
**Author:** ![benknoble](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/benknoble/32/16_2.png) [@benknoble](https://racket.discourse.group/u/benknoble)\ **Post date:** [July 24, 2023, 1:06pm UTC](https://racket.discourse.group/t/refactoring-homepage/2121/10 "2023-07-24T13:06:43Z")
Delayed reply: when I tried it after seeing the email, it worked. Haven't tried again since then. ---
**Author:** ![greghendershott](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/greghendershott/32/98_2.png) [@greghendershott](https://racket.discourse.group/u/greghendershott)\ **Post date:** [July 25, 2023, 12:08pm UTC](https://racket.discourse.group/t/refactoring-homepage/2121/11 "2023-07-25T12:08:57Z")
Hmm. I have JS enabled, and clicking on tabs changes the content below -- but the URL in the address bar does _not_ update to append an anchor. For example clicking on Community, the content below changes, but the URL in the address bar does not change from `https://sorawee.github.io/tmp/` (does not become e.g. `https://sorawee.github.io/tmp/#community`). - I tried disabling uBlock Origin; no difference. - I tried disabling Firefox's own tracker defeating (which anyway was only on at the lowest, usually harmless setting, and hovering over the "shield" reported "no trackers detected"); no difference. I'm using Firefox 113.0.2 on Ubuntu. ---
**Author:** ![sorawee](https://avatars.discourse-cdn.com/v4/letter/s/ea5d25/32.png) [@sorawee](https://racket.discourse.group/u/sorawee)\ **Post date:** [July 25, 2023, 3:39pm UTC](https://racket.discourse.group/t/refactoring-homepage/2121/12 "2023-07-25T15:39:49Z")
Thanks for testing! This is _currently_ the expected behavior, as I explained in [https://racket.discourse.group/t/refactoring-homepage/2121/9](https://racket.discourse.group/t/refactoring-homepage/2121/9). ---
**Author:** ![greghendershott](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/greghendershott/32/98_2.png) [@greghendershott](https://racket.discourse.group/u/greghendershott)\ **Post date:** [July 25, 2023, 3:56pm UTC](https://racket.discourse.group/t/refactoring-homepage/2121/13 "2023-07-25T15:56:10Z")
Oh OK. I guess I misunderstood your sub-thread with @sschwarzer where you said: > [@sorawee](#): > > When I click "Community", the URL address is changed to `"https://sorawee.github.io/tmp/#community"` for me. Isn't that the case for you? So I wanted to let you know that doesn't happen, for me, even with JS enabled. Anyway thank for making these changes to the web site! If there's anything you'd like me to test now, or later, just let me know. ---
**Author:** ![sorawee](https://avatars.discourse-cdn.com/v4/letter/s/ea5d25/32.png) [@sorawee](https://racket.discourse.group/u/sorawee)\ **Post date:** [July 31, 2023, 10:21pm UTC](https://racket.discourse.group/t/refactoring-homepage/2121/14 "2023-07-31T22:21:56Z")
The upcoming PR will focus on HTML5 compliance and responsive web design. The current homepage supports the PC full screen size and the smallest mobile screen size in the portrait mode, but not anything else (tablet screen size, PC screen with resized window, mobile screen in the landscape mode). The responsive web design in the PR makes the page readable in all these different settings. The PR will also fix various spacing issues. Left is my proposal. Right is the current homepage. ![Screenshot 2023-07-31 at 3.13.19 PM](https://global.discourse-cdn.com/free1/uploads/racket/original/2X/6/60e8f62eafc978ed0e2c2ceadb6c1d76f7061d5e.jpeg) ![Screenshot 2023-07-31 at 3.14.31 PM](https://global.discourse-cdn.com/free1/uploads/racket/original/2X/9/9e486085cfcb913d3661bf84d1657110a4ea9ace.jpeg) ![Screenshot 2023-07-31 at 3.15.10 PM](https://global.discourse-cdn.com/free1/uploads/racket/original/2X/b/b1fb9666f93ad9163d2a8c1248c611edcbc4e774.jpeg) ![Screenshot 2023-07-31 at 3.15.38 PM](https://global.discourse-cdn.com/free1/uploads/racket/original/2X/2/294530bb5a9aed20778feebe8c4d83d11f12e826.jpeg) ![Screenshot 2023-07-31 at 3.16.05 PM](https://global.discourse-cdn.com/free1/uploads/racket/original/2X/4/41d701281513760994ab2759c01c515ca98bacca.jpeg) ![Screenshot 2023-07-31 at 3.16.23 PM](https://global.discourse-cdn.com/free1/uploads/racket/original/2X/1/14cebf79be29f499fb81f912565727816b86a860.jpeg) ![Screenshot 2023-07-31 at 3.17.25 PM](https://global.discourse-cdn.com/free1/uploads/racket/original/2X/a/a18eb1e7e8ba42c4ae87f33be6d8afdedb26916e.jpeg) ![Screenshot 2023-07-31 at 3.18.09 PM](https://global.discourse-cdn.com/free1/uploads/racket/original/2X/c/c7c442af414011ccdfbcdf9e948064e89aa3e9bd.jpeg) ---
**Author:** ![robby](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/robby/32/7_2.png) [@robby](https://racket.discourse.group/u/robby)\ **Post date:** [August 1, 2023, 5:40am UTC](https://racket.discourse.group/t/refactoring-homepage/2121/15 "2023-08-01T05:40:03Z")
This looks like a great improvement overall, thank you! One minor thing: I think the spacing in the first screenshot is better in the original. That is, there is a bit more space around the logo and that seems beneficial. That said, there should be more space below the logo, as well as above it, if that's possible. That said, if this isn't possible or is difficult somehow, nevermind it. I'm delighted how things are improving. ---
**Author:** ![EmEf](https://avatars.discourse-cdn.com/v4/letter/e/53a042/32.png) [@EmEf](https://racket.discourse.group/u/EmEf)\ **Post date:** [August 5, 2023, 3:37pm UTC](https://racket.discourse.group/t/refactoring-homepage/2121/16 "2023-08-05T15:37:15Z")
Oak, whiy does your re-design add comments (in orange) for the typed/racket code fragment? — Overall I like your effort and I am grateful that you’re taking on this task. Thanks!!! — Matthias [ ![preview.png](https://global.discourse-cdn.com/free1/uploads/racket/original/2X/2/230f7e6d0467e2e4bf24994dc4d91a984db9bf30.jpeg) [60e8f62eafc978ed0e2c2ceadb6c1d76f7061d5e](https://global.discourse-cdn.com/free1/uploads/racket/original/2X/6/60e8f62eafc978ed0e2c2ceadb6c1d76f7061d5e.jpeg) [JPEG Image · 177 KB](https://global.discourse-cdn.com/free1/uploads/racket/original/2X/6/60e8f62eafc978ed0e2c2ceadb6c1d76f7061d5e.jpeg) ]([https://global.discourse-cdn.com/free1/uploads/racket/original/2X/6/60e8f62eafc978ed0e2c2ceadb6c1d76f7061d5e.jpeg](https://global.discourse-cdn.com/free1/uploads/racket/original/2X/6/60e8f62eafc978ed0e2c2ceadb6c1d76f7061d5e.jpeg)) ---
**Author:** ![sorawee](https://avatars.discourse-cdn.com/v4/letter/s/ea5d25/32.png) [@sorawee](https://racket.discourse.group/u/sorawee)\ **Post date:** [August 5, 2023, 5:38pm UTC](https://racket.discourse.group/t/refactoring-homepage/2121/17 "2023-08-05T17:38:21Z")
What do you mean by "add"? The comment was there before, but it's very long for the mobile view to fit within the page. So I fixed it by breaking the comment up into two lines, making it fit the page. I also made similar breaks elsewhere. Examples of the overflow in the mobile view: ![Screenshot 2023-08-05 at 10.22.28 AM.png](https://global.discourse-cdn.com/free1/uploads/racket/original/2X/a/a14e0ab7d1af980667c11d7886e7e7cda964984e.png) ![Screenshot 2023-08-05 at 10.22.48 AM.png](https://global.discourse-cdn.com/free1/uploads/racket/original/2X/2/27671b5c30c677b6243b7bb7ec6491430be96af6.png) If you don't like the break, another possibility is to reduce the font size and/or adjusting the typographic alignment of these codes in the mobile view. For example, with the centering alignment, the first code wouldn't need to be broken into two lines: ![Screenshot 2023-08-05 at 10.35.17 AM.png](https://global.discourse-cdn.com/free1/uploads/racket/original/2X/f/f7485b16cb64abc689cf468be254c723f8b2c2e5.png) and with a significant font size reduction, we can fit the second code. ![Screenshot 2023-08-05 at 10.35.55 AM.png](https://global.discourse-cdn.com/free1/uploads/racket/original/2X/a/aba4514238c93394cc43e1ba690bb41e97228b56.png) Let me know which ones you prefer. Or are you talking about adding the orange color? I think the code is slightly difficult to read because of the minimal syntax highlighting (with doc linking being the only source of color), so I tried to make it look like what the Racket doc would render, which is more readable IMO. @robby: yes, I will fix that. ---
**Author:** ![EmEf](https://avatars.discourse-cdn.com/v4/letter/e/53a042/32.png) [@EmEf](https://racket.discourse.group/u/EmEf)\ **Post date:** [August 5, 2023, 6:09pm UTC](https://racket.discourse.group/t/refactoring-homepage/2121/18 "2023-08-05T18:09:13Z")
The screen shot in my email showed a (new) orange line of text .. perhaps I should get my eyes checked. ---
**Author:** ![shhyou](https://avatars.discourse-cdn.com/v4/letter/s/ccd318/32.png) [@shhyou](https://racket.discourse.group/u/shhyou)\ **Post date:** [August 6, 2023, 1:00am UTC](https://racket.discourse.group/t/refactoring-homepage/2121/19 "2023-08-06T01:00:21Z")
The text was was black in the original image. That indeed made it much less noticeable.