webhintio / webhintio.github.io Goto Github PK
View Code? Open in Web Editor NEW🌍 webhint's website
Home Page: https://webhint.io
License: Apache License 2.0
🌍 webhint's website
Home Page: https://webhint.io
License: Apache License 2.0
Issue to track the work for the scanner part.
Depends on #4 to have something to render in the live site.
Ref: #23 (comment)
I’m wondering: Does it make sense to use dl
, dt
, dd
in lieu of div
& p
? The semantics might be better and it might provide opportunities to turn it all into a tree menu in the future.
Also recommend Title Case for the labels.
<dl class="module module--secondary table-of-contents" role="navigation">
<dt class="toc-section-title--active">Collectors</dt>
<dd>
<ul class="toc-subsection-title">
<li>
<a href="/docs/developer-guide/collectors/how-to-develop-a-collector.html" class="toc-subsection-title--active">
How to develop a collector
</a>
</li>
</ul>
</dd>
<dt class="toc-section-title--active">Rules</dt>
<dd>
<ul class="toc-subsection-title">
<li>
<a href="/docs/developer-guide/rules/how-to-test-rules.html" class="toc-subsection-title">
How to test rules
</a>
</li>
</ul>
</dd>
<dt class="toc-section-title--active">Events</dt>
<dd>
<ul class="toc-subsection-title">
<li>
<a href="/docs/developer-guide/events/list-of-events.html" class="toc-subsection-title">
List of events emitted by a collector
</a>
</li>
</ul>
</dl>
</div>
We are going to use Hexo for the main site and express for the scan part.
We need to validate that we can integrate both nicely and that Hexo meets our needs. For the MVP we should have the following sections (plus a common header/footer accross all pages):
Need to have an option to search into the website, mainly across the documentation files.
Ideally similar to what ESLint does. We could:
@sarvaje, @qzhou1607 I think you did a bit of research about this, right?
Need to assess whether this will be easy to fix or if we'll hide search results on mobile.
The current folder structure looks as follows:
It is not evident what does what and we will have to add more content once we start working on the scanner. Also the public
folder is the only one that is being published into the website
branch so we will need to change that.
Things that we need to do:
src
folder and then inside a couple other folders.dist
.web.config
file to the root of dist
with rewrite rules for serving static assets or the scanner (related to #4).dist
into the website
branch with node_modules
unless we found a way to run npm install
in azure after deployment (not sure if it is done now automatically).Need GitHub SVG icon
Align icon to the right of the footer
There is way to much css, we should clean up all the unneeded code.
Right now the website is only on an Azure Website. We need to have the right infrastructure in place to make it performant:
Ideally we should be using webpack and @TheLarkInn helps with the webpack part.
RE the CDN not sure if using Azure ones or another one (that supports brotli) so there isn't that much dependency on Microsoft infrastructure.
If we need it, let me know. I’ve been meaning to port https://github.com/aarongustafson/easy-validation.js to vanilla JS.
We need a 'sponsored by' section on the homepage right @molant?
Will also eventually need to add a 'companies using sonar' section too.
Might also make sense for it to be a link, but I’m not sure that’s required.
Pattern from https://ljwatson.github.io/design-patterns/aria-current/:
<nav aria-label="Breadcrumb">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/">Contact us</a></li>
<li><a href="/" aria-current="location">Phone numbers</a></li>
</ul>
</nav>
Need to make some adjustments/add some CSS to the content in the documentation pages like https://sonarwhal.com/docs/developer-guide/events/list-of-events.html
All the bullets for list items make the page look cluttered. Also the subcontent of each 'event' could use some clearer hierarchy created through Typography and spacing.
Style List items at top of the page
Dev Guide: Style event content: the 'When?' and 'Remarks'
Dev Guide: remove bullets from event content
Add next/previous buttons as secondary navigation through documentation (see comps)
Research UI patterns for Table of Contents
Will probably add more here as the pages are filled with content.
Seen throughout the site.
Recommendation (to not require CSS changes):
<a href="/" title="Return to the Sonar homepage" class="header__logo">
<img src="/images/sonar-logo.svg" alt="Sonar">
</a>
We have a few code snippets in the website that are rendered as code but with no color at all:
We should have color syntax when possible. @qzhou1607, remarkable has syntax highlighting out of the box, but I don't know if the parser hexo uses has this option.
The code of conduct should be the same as the one in sonar and the website should use this file in the root to populate the section in the FAQ
I'm seeing some discrepancies between machines when it comes to the way fonts are being rendered. Need to double check the correct weights are being applied.
Missing the 'upload config file' and 'manual options' links under the search bar.
Currently aligned to the right but should line up on the left on smaller screens
Right now we have all the user and dev guides in the master branch. I think we shouldn't have those (website
branch is different).
Maybe we could have a script that pulls the latest version once the repo is OSS similar to what we are doing in travis?
@MicrosoftEdge/sonar-devs what do you think?
Is there a sitewide footer forthcoming?
Currently in subsections of user and developer guides.
Things to do:
web.config
.html
for the urls via web.config
probablybrotli
and zopfli
in web.config
until we have a CDN and can deploy to itwww.sonarwhal.com
to sonarwhal.com
(DNS? web.config
?)HTST
and add domain to the HSTS Preload ListThey should be run on npm test
(except editorconfig).
This will have a few different iterations depending on what point in time we're at:
MVP Scan results page, probably just the current state of the site that was scanned, no compare option, no charts
Will need to slightly modify current design
2nd iteration, add compare to previous scan option
Probably a 3rd iteration where we have enough data to start calculating average scores for the different rule categories like shown in the visual comps
We need to update the documentation website when there are changes in Sonar.
Until we go public we can update/build the site each time there is a change in master, but we will have to look into a different strategy later (it could be as simple as having a development
branch and we look only for changes in master
).
In any case, we need to:
Because repo is private for now, downloading the code might be a bit trickier right now :/
@alrra, ideas on how to do this? Guess that we can set up some SSH key in travis, get the latest version and go from there?
Need a Nellie in my phone homescreen!
Various things regarding links:
Title | Url |
---|---|
New scan/Scanner/Run Scan | /scanner/ |
User Guide | /docs/user-guide/ |
Developer Guide | /docs/developer-guide/ |
Rules | /docs/user-guide/rules/ |
Contributors | /about/contributors/ |
Code of Conduct | /about/code-of-conduct/ |
If I visit any other page, the footer is not there. E.g.:
This will impact how we write sonar's documentation in the CLI project, but I think we should discuss it here because it is where it will be consumed.
Right now we user and developer guides with no main pages (#25). Inside each one, we have:
.md
files..md
files.What I'm thinking is the following:
readme.md
will be the landing page for that section. E.g.:
/user-guide/readme.md
will be the landing page for the user guide./user-guide/rules/readme.md
will be the landing page for the rules. Right now the element in the ToC is not clickable, but it should./user-guide/rules/axe.md
/user-guide/differences-among-collectors.md
/user-guide/rules/readme.md
@MicrosoftEdge/sonar-devs what do you think?
Currently there’s no way to access it visually (though it is in the tab order).
It would be nice when hovering / tapping on a section title to show a #
or an link icon , and by tapping / clicking on that, to link to that section.
E.g. from http://eslint.org/docs/rules/:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.