rules-index.hbs #406

ststimac · 2018-03-12T21:09:11Z

@qzhou1607 is assisting me! Please do not merge! There's still things I have to do for design and styling. Qing is getting the template updated for the rules landing page so I can see what I'm styling.

Pull request checklist

Make sure you:

Signed the Contributor License Agreement
Followed the commit message guidelines

Short description of the change(s)

qzhou1607-zz · 2018-03-12T22:01:00Z

@ststimac I made a commit. You should be able to see the rule landing page after you pull the changes and build again.

ststimac · 2018-03-19T21:23:31Z

I'm not sure who is going to take this over now. @alrra @molant @sarvaje ?
I've finished the rules index page, the landing page with the different rule categories and I've added the individual category pages with the list of rules for each category.

Each rule category still needs a description. That description will go on the landing page and individual category pages.

qzhou1607-zz · 2018-03-30T12:10:24Z

I can take a look at this over the weekend if nobody is already working on it.

molant · 2018-03-30T13:58:00Z

Go for it!

* Enable automatic generation of `categories.json` to store the category-rule data. * Update rule landing page and category landing page with data. * Some fixes to adapt to the changes.

qzhou1607-zz · 2018-04-01T17:18:28Z

The last commit contains code to automatically gather category-rule information, so #396 can be discarded. I still need to add the description information for each category, and I wonder where I should put that information, mabye in _config.yml like the description of the rules?

Finisheded:

Automatically generating a .json file to save the category-rule information.
Update rule landing page to get data from the .json file.
Add category landing pages and get data from the .json file.

To do:

Description for categories. (After knowing where to put the description information.)

sarvaje · 2018-04-04T21:00:53Z

I have added support for the documentation in packages with multiple rules.

molant

@sarvaje, @qzhou1607 a few comments on this PR with things we need to agree. Let me know what you think.

molant · 2018-04-05T20:21:22Z

helpers/update-content.js

+        }
+
+        fs.writeFile(dir, content);
+    });


I think there are some possible issues with this function. It is called synchronously in line 168 but it is definitely not. A quick fix would be to use mkdirp.sync and fs.writeFileSync.

Or use shelljs mkdir with the option -p and remove the mkdirp dependency (although I think I'd rather use mkdirp.sync)

molant · 2018-04-05T20:21:48Z

helpers/update-content.js

+    if (ruleDocPathSplitted[1] === 'docs') {
+        ruleName = `${ruleDocPathSplitted[2]}/${ruleDocPathSplitted[0].replace('.md', '')}`;
+
+        mkdirp(path.join(process.cwd(), DEST_RULES_DIR, path.dirname(ruleName)));


Again, mkdirp is not sync here.

molant · 2018-04-05T20:26:36Z

src/sonarwhal-theme/layout/partials/rule-category.hbs

@@ -0,0 +1,12 @@
+<div class="subtitle category-description">
+    <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. </p>


We need a way for the lorem ipsum to be pulled from somewhere. Is this for the category's description?

I'm going to add the category description to the file _config.yml

molant · 2018-04-05T20:27:21Z

src/sonarwhal-theme/layout/partials/rules-index.hbs

+<div class="layout layout--halves">
+    {{#each categories}}
+    <div class="module placement">
+        <p class="title icon--categories icon--a11y">{{name}}</p>


I don't think the icon--a11y should be here. We need to find a way to change it depending on the category.

I'm going to change the class name to match with the category name i.e: icon--a11y to icon--accessibility

With this change we can change the icon easily

btw, there is no icon for development

molant · 2018-04-05T20:29:23Z

src/sonarwhal-theme/layout/partials/rules-index.hbs

+    {{#each categories}}
+    <div class="module placement">
+        <p class="title icon--categories icon--a11y">{{name}}</p>
+        <p class="placement__body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor


I guess this is the description of the category that should be the same as in rule-category.hbs? I think we need a place where we can put all the information related to them:

{ "id": "categoryId", "name": "name", // So PWA is all capital "description": "description", "icon": "classIcon" // although maybe this one can be pulled from the id? }

Maybe a series of helpers for this? {{# categoryDescripition categoryId}}, {{#categoryName categoryId}} ?

sarvaje · 2018-04-06T23:52:25Z

@molant everything is done, but I need the categories description.

molant · 2018-04-07T03:48:50Z

@sonarwhal/core, @qzhou1607, @ststimac here goes the description of the categories. Let me know what you think and what should be changed.

Accessibility: Is your site usable via the keyboard? Does your content have enough contrast to be read without issues? Everyone should enjoy your content. Let us help you!
Performance: No one likes to wait while a website loads. Validate you are using the right compression, cache strategy and more to make your site (re)load faster.
Security: Browsers are one of the main vectors for attacks. The web platform has many features that allow you to mitigate the risks. Are you sure you are doing everything you can to keep your users safe?
PWAs: Progressive Web Apps allow your users to have a more immersive experience within your site. Make sure your PWA looks the best no matter the platform of your users.
Interoperability: The web has been around for decades and it can be accessed from many different devices and form factors, old and new. This rules help you make your sites more interoperable so your users can have a better experience no matter how they visit you.
Development: Web developers use a wide variety of tools: bundlers, transpilers, optimizers... But some times there can be problems when using them together or the configuration might not be the optimal one. Let us take care of this for you!

sarvaje · 2018-04-09T17:31:14Z

Let me know what you think and what should be changed.

LGTM

ststimac · 2018-04-09T17:35:21Z

@molant I made edits to these 4:

Performance: No one likes to wait while a website loads. Validate that you are using the right compression, cache strategy and more to make your site (re)load faster.
Security: Browsers are one of the main vectors for attacks. The web platform has many features that allow you to mitigate the risks. Are you doing everything you can to keep your users safe?
Interoperability: The web has been around for decades and it can be accessed from many different devices and form factors, old and new. These rules help you make your sites more interoperable so your users can have a better experience no matter how they visit you.
Development: Web developers use a wide variety of tools: bundlers, transpilers, optimizers... But sometimes there can be problems when using them together or the configuration might not be the most optimal. Let us take care of this for you!

sarvaje · 2018-04-09T18:00:42Z

@ststimac the developers and accessibility icons are the same. is that ok?

ststimac · 2018-04-09T18:02:30Z

@sarvaje #402 is still open. I designed two but we never picked one. If we choose one, I'll send the SVG to you to add to the PR

sarvaje · 2018-04-09T18:08:45Z

@sarvaje #402 is still open. I designed two but we never picked one. If we choose one

I have picked the first one hehehe.

I'll send the SVG to you to add to the PR

Perfect!!

ststimac · 2018-04-09T18:17:13Z

@sarvaje sent a link to the icon via our chat group, let me know if you didn't get it.

alrra · 2018-04-09T21:53:41Z

src/sonarwhal-theme/source/images/dev-icon.svg

@@ -0,0 +1 @@
+<svg id="2cfe44f5-e486-486c-8e52-80cdabc2033d" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72"><title>development</title><path d="M63.1,14H8.9A2.88,2.88,0,0,0,6,16.9V55.1A2.88,2.88,0,0,0,8.9,58H63.1A2.88,2.88,0,0,0,66,55.1V16.9A2.88,2.88,0,0,0,63.1,14ZM10.32,53.68V22.38H61.68v31.3Z" fill="#acadda"/><circle cx="11.94" cy="18.19" r="1.62" fill="#2d28a1"/><circle cx="16.89" cy="18.19" r="1.62" fill="#2d28a1"/><circle cx="21.84" cy="18.19" r="1.62" fill="#2d28a1"/><path d="M30.08,44.1a.29.29,0,0,1,.17.3,1.44,1.44,0,0,1-.26.73c-.18.27-.36.4-.52.4H29.4L18.13,39.81a.91.91,0,0,1-.38-.87.88.88,0,0,1,.39-.86L29.4,32.36h.07c.16,0,.34.13.52.4a1.41,1.41,0,0,1,.26.73.32.32,0,0,1-.17.32L19.92,38.94Z" fill="#2d28a1"/><path d="M39.38,28.46l-6.26,21c0,.2-.35.29-.89.29s-.72-.09-.72-.29l6.26-21c0-.2.35-.29.89-.29S39.38,28.26,39.38,28.46Z" fill="#2d28a1"/><path d="M52.5,38.94c0,.44-.13.73-.38.85L40.86,45.52h-.09c-.16,0-.33-.13-.5-.4A1.35,1.35,0,0,1,40,44.4a.3.3,0,0,1,.16-.3l10.17-5.16L40.17,33.78a.29.29,0,0,1-.16-.3,1.33,1.33,0,0,1,.26-.73c.17-.27.34-.4.5-.4h.09l11.26,5.71A.91.91,0,0,1,52.5,38.94Z" fill="#2d28a1"/></svg>


Smaller version:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72"><path d="M63.1,14H8.9A2.88,2.88,0,0,0,6,16.9V55.1A2.88,2.88,0,0,0,8.9,58H63.1A2.88,2.88,0,0,0,66,55.1V16.9A2.88,2.88,0,0,0,63.1,14ZM10.32,53.68V22.38H61.68v31.3Z" fill="#acadda"/><circle cx="11.94" cy="18.19" r="1.62" fill="#2d28a1"/><circle cx="16.89" cy="18.19" r="1.62" fill="#2d28a1"/><circle cx="21.84" cy="18.19" r="1.62" fill="#2d28a1"/><path d="M30.08,44.1a.29.29,0,0,1,.17.3,1.44,1.44,0,0,1-.26.73c-.18.27-.36.4-.52.4H29.4L18.13,39.81a.91.91,0,0,1-.38-.87.88.88,0,0,1,.39-.86L29.4,32.36h.07c.16,0,.34.13.52.4a1.41,1.41,0,0,1,.26.73.32.32,0,0,1-.17.32L19.92,38.94Z" fill="#2d28a1"/><path d="M39.38,28.46l-6.26,21c0,.2-.35.29-.89.29s-.72-.09-.72-.29l6.26-21c0-.2.35-.29.89-.29S39.38,28.26,39.38,28.46Z" fill="#2d28a1"/><path d="M52.5,38.94c0,.44-.13.73-.38.85L40.86,45.52h-.09c-.16,0-.33-.13-.5-.4A1.35,1.35,0,0,1,40,44.4a.3.3,0,0,1,.16-.3l10.17-5.16L40.17,33.78a.29.29,0,0,1-.16-.3,1.33,1.33,0,0,1,.26-.73c.17-.27.34-.4.5-.4h.09l11.26,5.71A.91.91,0,0,1,52.5,38.94Z" fill="#2d28a1"/></svg>

ststimac added the status:work-in-progress label Mar 12, 2018

ststimac assigned qzhou1607-zz Mar 12, 2018

ststimac removed the status:work-in-progress label Mar 19, 2018

ststimac and others added 4 commits April 1, 2018 10:09

rules-index.hbs

cb23e27

New: Insert template for rule landing page

067103e

Style Categories LP and add individual rule LP

319899f

New: Update rule landing page

39a27b4

* Enable automatic generation of `categories.json` to store the category-rule data. * Update rule landing page and category landing page with data. * Some fixes to adapt to the changes.

qzhou1607-zz force-pushed the rules-landing-page branch from 6df163a to 39a27b4 Compare April 1, 2018 17:27

Chore: Add support for packages multirule docs

f8e2258

molant requested changes Apr 5, 2018

View reviewed changes

molant mentioned this pull request Apr 6, 2018

Make minor consistency changes webhintio/hint#986

Merged

Chore: Address PR feedback

bcc7ea2

Fix: Add description to categories

2c95c3c

sarvaje added 2 commits April 9, 2018 11:24

Fix: Add dev icon

687d139

Fix: Fix category name in some places

d07a767

alrra reviewed Apr 9, 2018

View reviewed changes

Fix: Optimize svg icon

61362f5

molant merged commit 6e967f6 into webhintio:master Apr 9, 2018

molant mentioned this pull request Apr 9, 2018

New: Auto-generate rule index #396

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

rules-index.hbs #406

rules-index.hbs #406

ststimac commented Mar 12, 2018

qzhou1607-zz commented Mar 12, 2018

ststimac commented Mar 19, 2018

qzhou1607-zz commented Mar 30, 2018

molant commented Mar 30, 2018

qzhou1607-zz commented Apr 1, 2018

sarvaje commented Apr 4, 2018

molant left a comment

molant Apr 5, 2018

molant Apr 5, 2018

molant Apr 5, 2018

molant Apr 5, 2018

sarvaje Apr 6, 2018

molant Apr 5, 2018

sarvaje Apr 6, 2018

sarvaje Apr 6, 2018

molant Apr 5, 2018

sarvaje commented Apr 6, 2018

molant commented Apr 7, 2018

sarvaje commented Apr 9, 2018

ststimac commented Apr 9, 2018

sarvaje commented Apr 9, 2018 •

edited

Loading

ststimac commented Apr 9, 2018

sarvaje commented Apr 9, 2018

ststimac commented Apr 9, 2018

alrra Apr 9, 2018

		@@ -0,0 +1,12 @@
		<div class="subtitle category-description">
		<p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. </p>

		@@ -0,0 +1 @@
		<svg id="2cfe44f5-e486-486c-8e52-80cdabc2033d" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72"><title>development</title><path d="M63.1,14H8.9A2.88,2.88,0,0,0,6,16.9V55.1A2.88,2.88,0,0,0,8.9,58H63.1A2.88,2.88,0,0,0,66,55.1V16.9A2.88,2.88,0,0,0,63.1,14ZM10.32,53.68V22.38H61.68v31.3Z" fill="#acadda"/><circle cx="11.94" cy="18.19" r="1.62" fill="#2d28a1"/><circle cx="16.89" cy="18.19" r="1.62" fill="#2d28a1"/><circle cx="21.84" cy="18.19" r="1.62" fill="#2d28a1"/><path d="M30.08,44.1a.29.29,0,0,1,.17.3,1.44,1.44,0,0,1-.26.73c-.18.27-.36.4-.52.4H29.4L18.13,39.81a.91.91,0,0,1-.38-.87.88.88,0,0,1,.39-.86L29.4,32.36h.07c.16,0,.34.13.52.4a1.41,1.41,0,0,1,.26.73.32.32,0,0,1-.17.32L19.92,38.94Z" fill="#2d28a1"/><path d="M39.38,28.46l-6.26,21c0,.2-.35.29-.89.29s-.72-.09-.72-.29l6.26-21c0-.2.35-.29.89-.29S39.38,28.26,39.38,28.46Z" fill="#2d28a1"/><path d="M52.5,38.94c0,.44-.13.73-.38.85L40.86,45.52h-.09c-.16,0-.33-.13-.5-.4A1.35,1.35,0,0,1,40,44.4a.3.3,0,0,1,.16-.3l10.17-5.16L40.17,33.78a.29.29,0,0,1-.16-.3,1.33,1.33,0,0,1,.26-.73c.17-.27.34-.4.5-.4h.09l11.26,5.71A.91.91,0,0,1,52.5,38.94Z" fill="#2d28a1"/></svg>

rules-index.hbs #406

rules-index.hbs #406

Conversation

ststimac commented Mar 12, 2018

Pull request checklist

Short description of the change(s)

qzhou1607-zz commented Mar 12, 2018

ststimac commented Mar 19, 2018

qzhou1607-zz commented Mar 30, 2018

molant commented Mar 30, 2018

qzhou1607-zz commented Apr 1, 2018

sarvaje commented Apr 4, 2018

molant left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sarvaje commented Apr 6, 2018

molant commented Apr 7, 2018

sarvaje commented Apr 9, 2018

ststimac commented Apr 9, 2018

sarvaje commented Apr 9, 2018 • edited Loading

ststimac commented Apr 9, 2018

sarvaje commented Apr 9, 2018

ststimac commented Apr 9, 2018

Choose a reason for hiding this comment

sarvaje commented Apr 9, 2018 •

edited

Loading