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
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.
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>
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.
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.
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!
Currently aligned to the right but should line up on the left on smaller screens
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 ListWe need a 'sponsored by' section on the homepage right @molant?
Will also eventually need to add a 'companies using sonar' section too.
Missing the 'upload config file' and 'manual options' links under the search bar.
If I visit any other page, the footer is not there. E.g.:
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
Need GitHub SVG icon
Align icon to the right of the footer
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/ |
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):
Is there a sitewide footer forthcoming?
Issue to track the work for the scanner part.
Depends on #4 to have something to render in the live site.
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/:
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?
If we need it, let me know. I’ve been meaning to port https://github.com/aarongustafson/easy-validation.js to vanilla JS.
They should be run on npm test
(except editorconfig).
There is way to much css, we should clean up all the unneeded code.
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>
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>
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.
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?
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
Currently there’s no way to access it visually (though it is in the tab order).
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.
Currently in subsections of user and developer guides.
Ref: #23 (comment)
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).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.