feat: Update website design (GH-46) #48

BlueSlug · 2022-02-11T00:22:24Z

This pull request has been linted by running npm run lint without errors
This pull request has been tested by running npm run start and reviewing affected routes
This pull request has been built by running npm run build without errors
This isn't a duplicate of an existing pull request

Description

This update implements the ILDH site redesign described in this Figma file

This replaces the previous Eleventy conversion with a structure based on Trivet, and it replaces Stylus with Sass as the CSS preprocessor. Additionally, the Sass 7-1 directory structure and BEM have been used to organize styling rules.

This update represents a work in progress, so further issues may need to be filed to complete the work of implementing the design to its exact specifications.

Steps to test

Access the site via one of the following two options

Run npm ci to install dependencies
Run npm start to start the local server
Access the site at http://localhost:8080/

Please note that links to previous file locations (ending in .html) will not work locally due to the _redirects file only functioning as intended when deployed via Netlify. All site content is served, though links have yet to be updated in all content.

OR

Access the deploy preview site: https://deploy-preview-48--floe-handbook.netlify.app/

Additional information

Some remaining issues can be found on the Fluid Project Weekly Planning wiki page.

Related issues

Resolves #46

BREAKING CHANGE: This is a work in progress, and as such many of the files added here may be substantially altered or removed in the near future. The original document Markdown files have also been updated to pass linter rules

netlify · 2022-02-15T06:58:34Z

✔️ Deploy Preview for floe-handbook ready!

🔨 Explore the source changes: 90da9eb

🔍 Inspect the deploy log: https://app.netlify.com/sites/floe-handbook/deploys/6229b50ebbc53200096ea5e2

😎 Browse the preview: https://deploy-preview-48--floe-handbook.netlify.app

Feat/design update gh 46

Test branch

2022 refreshed content

Tools can be used to assess existing content not only "my produced content"

Update content: Home Page and Root Pages

This restores the use of a single Markdown file for the Home page

the footer content files are separated to enable easy localization, and they are excluded from the linter as they would otherwise fail MD041 (no title in first line)

cindyli · 2022-03-09T19:51:22Z

.github/workflows/release-please.yml

@@ -0,0 +1,16 @@
+name: Publish release


Is .github/workflows/release-please.yml still needed? The build process defined in the netlify.com for this site should trigger the auto-deploy of the website when there's a push to the main branch.

Given that the Netlify settings for this site specify the image and command to use for building the site, it seems you're correct that we don't need to keep this action

michelled · 2022-03-09T19:52:57Z

Bug: At certain widths the nav breaks onto a second line despite there being whitespace to the left of it.

cindyli · 2022-03-09T20:17:21Z

README.md

+It has been archived and can be found here:
+<https://github.com/fluid-project/2015-handbook.floeproject.org>
+
+## Working with Netlify CMS


This section can be removed when you remove the admin related doc.

I've opted to keep the section and add a note explaining how to restore this functionality. Do you think it would be better to remove it entirely?

Let's go with your idea. Keeping this section to explain how to restore this functionality will be helpful.

cindyli · 2022-03-09T20:22:31Z

package.json

        "build:eleventy": "cross-env NODE_ENV=production eleventy",
        "clean": "rimraf dist",
-        "lint": "grunt lint",
+        "cms": "netlify-cms-proxy-server",


Dependencies on netlify-cms-proxy-server can be removed too along with the removal of the Netlify CMS admin code.

cindyli · 2022-03-09T20:34:21Z

src/_includes/layouts/base.njk

+        {% uioScripts %}
+        {% include "partials/global/scripts.njk" %}
+    </head>
+    {% block pageBody %}


Could you add a comment to explain the home page uses this pageBody block to define its own body layout?

BlueSlug · 2022-03-09T20:40:22Z

Bug: At certain widths the nav breaks onto a second line despite there being whitespace to the left of it.

@michelled: I've found a fix for this, though things start overlapping once UIO text size is increased. I'll address that next!

cindyli · 2022-03-09T20:59:27Z

The layout of the "Narrations and Text-to-Speech" page is broken. Moreover, there are two "Further reading" sections on this page even though they use different heading levels.

cindyli · 2022-03-09T21:13:13Z

The layout of the "WAI-ARIA" page is not right too. It's probably because <code> section contains code in long width and doesn't leave much space to the side content.

From my experiment, controlling the proportion of the content and the side content doesn't solve the problem unless the code in long width breaks into multiple lines. This might worth a discussion with designers.

BlueSlug · 2022-03-09T21:13:45Z

The layout of the "Narrations and Text-to-Speech" page is broken. Moreover, there are two "Further reading" sections on this page even though they use different heading levels.

Good catch! I believe the broken layout is due to the pre and code elements not wrapping their contents. I'll evaluate my options, though quick fixes don't seem to be working

The repetition of the "further reading" heading is a content issue that predates my work. Should we change this?

cindyli · 2022-03-09T21:23:58Z

src/_includes/partials/components/pagination.njk

@@ -0,0 +1,13 @@
+<nav class="pagination" aria-label="pagination">


pagination.njk doesn't seem to be used anywhere. Can you double check? If it doesn't, please remove. Thanks.

cindyli · 2022-03-09T21:31:47Z

The "Perspectives" title stretches out of the iphone 5 screen. Below is how it looks with the normal font size. Don't mention how much it will break the page when UIO font size increases. We probably should consider to apply the auto word wrap with hyphens to <body> element.

cindyli · 2022-03-09T21:39:49Z

Resources listed on the "Resources" section of "Meet Learner Needs and Preferences" page are categorized into "Text Simplification" and "Other". These category text are not showing on the side content. Is this expected behavior?

cindyli · 2022-03-09T21:46:40Z

src/assets/README.md

+
+## Scripts
+
+By default, the Mix [configuration file](../../webpack.mix.js) includes configuration for processing the three


There aren't three javascript files in /src/assets/scripts. It would be better to use more general wording. Thanks.

cindyli · 2022-03-09T21:51:38Z

src/assets/README.md contains useful information. Could you add a description that points to this file from the README in the root directory so it doesn't get ignored? Thanks.

In addition, this commit will remove all references to Stylus and update docs files

cindyli · 2022-03-10T14:15:09Z

The content in the <code> block overlaps with the side menu. You probably wanna update the source .md file to manually break long lines as what you did for the second <code> block.

cindyli · 2022-03-10T14:35:20Z

Gradually increase UIO font size, you will notice a few issues:

On the desktop view:

At some point, the menu bar at the top right will overlap with the logo at the top left;
Go to a page having the side menu, such as the "Perspectives" page, the main content overflows and stretches out of the screen width. The content in the left panel even gets cut off and loses some content.

On the mobile view:

The menu icon doesn't overlap with the logo but the full width of these two elements exceeds the screen size causing the overflow.
The page title, "Perspectives" in this case, does wrap into multiple lines. But these lines start to overlap on each other.

Instead of using UIO, if you use "Command" and "+" to increase font size, the browser will handle the font change quite nicely: the browser translates the font change to the viewport size change so that when the font size is large enough, the viewport will be switched from the desktop view to the mobile view. UIO doesn't have this ability yet.

WeCount site ran into the same issue. The decision was to remove the text size change from UIO.

cindyli · 2022-03-10T14:39:42Z

The content in the <code> block overlaps with the side menu. You probably wanna update the source .md file to manually break long lines as what you did for the second <code> block.

I just noticed the issue with the <code> block gets worse with the mobile view. Adding manual line breaks may not be a good solution. A more general solution might be showing code blocks in individual scrollable containers.

BlueSlug added 9 commits February 2, 2022 16:39

feat!: update ILDH to use Trivet for redesign, WIP

69723a9

BREAKING CHANGE: This is a work in progress, and as such many of the files added here may be substantially altered or removed in the near future. The original document Markdown files have also been updated to pass linter rules

fix: solve bug with getLang function

c568564

fix: restore more recent Docker image version

851b8c5

feat: reorganize content into collections (WIP)

811a0a0

feat: refactor category landing page generation

c8cd51d

feat: restore content, add breadcrumb & site nav

b95df6b

feat: update collection permalinks, add redirects

50c1a3d

feat: add techniques templates and image sprites

744bc57

feat: generalize techniques templates, reuse them

f3e4b50

michelled and others added 20 commits February 16, 2022 13:25

Removing a sentence that

a4559ce

Merge pull request #1 from BlueSlug/feat/design-update-GH-46

bdc39a8

Feat/design update gh 46

Merge pull request #2 from michelled/testBranch

7d08dea

Test branch

not relevant in new design

ea365b8

Merge pull request #1 from carenwatkins/2022-Refreshed-Content

9632b19

2022 refreshed content

updating semantics and expanding meaning

5304147

Update approaches.md

b6fa226

Update approaches.md

3239179

Update home.md

6387a37

Update perspectives.md

026b194

removed 'their produced'

66aa7da

Tools can be used to assess existing content not only "my produced content"

Update perspectives.md

c847dd1

Merge pull request #2 from carenwatkins/2022-Refreshed-Content

40c292b

Update content: Home Page and Root Pages

feat: add side content, homepage content, etc

8388c27

fix: solve markdown not rendering inside html tags

3a2ee77

feat: review linter config and fix linting errors

12a2aff

This restores the use of a single Markdown file for the Home page

fix: solve missing site name in topic page titles

b699885

feat: re-enable _redirects after Trivet conversion

c7c63e6

fix: add missing slash to many links in content

a489e44

feat: add footer content and imagery

87300e1

the footer content files are separated to enable easy localization, and they are excluded from the linter as they would otherwise fail MD041 (no title in first line)