-
Notifications
You must be signed in to change notification settings - Fork 565
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
add landing page and rules website #2310
add landing page and rules website #2310
Conversation
produced via: ``` asciinema capa.cast ./capa Practical\ Malware\ Analysis\ Lab\ 01-01.dll_ <ctrl-d> agg --no-loop --theme solarized-light capa.cast capa.gif ```
Use the Pygments syntax-highlighting library to parse and render the YAML rule content. This way we don't have to manually traverse the rule nodes and emit lists; instead, we rely on the fact that YAML is pretty easy for humans to read and let them consume it directly, with some text formatting to help hint at the types/structure.
capa (the library) has routines for deserializing the YAML content into structured objects, which means we can use tools like mypy to find bugs. So, prefer to use those routines instead of parsing YAML ourselves.
Run and fix the issues identified by the following linters: - isort - black - ruff - mypy
Add links to the following external resources: - GitHub rule source in capa-rules repo - VirusTotal search for matching samples
Update the rules landing page to accept a HTTP query parameter named "q" that specifies an initial search term to to pass to pagefind. This enables external pages link to rule searches.
Import header from root capa landing page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please add bug fixes, new features, breaking changes and anything else you think is worthwhile mentioning to the master (unreleased)
section of CHANGELOG.md. If no CHANGELOG update is needed add the following to the PR description: [x] No CHANGELOG update needed
CHANGELOG updated or no update needed, thanks! 😄
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is awesome! Thanks for getting us started here.
Do we want to keep the Examples links in the header and footer even though there is none yet? Otherwise, looks good to me!
This comment was marked as resolved.
This comment was marked as resolved.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great work! The site is shaping up nicely.
I've left some comments for future separate improvements
web/public/index.html
Outdated
<style> | ||
/* | ||
Josh's Custom CSS Reset | ||
https://www.joshwcomeau.com/css/custom-css-reset/ | ||
*/ | ||
*, *::before, *::after { | ||
box-sizing: border-box; | ||
:root { | ||
/* from the icon */ | ||
--capa-blue: #2593d7; | ||
--capa-blue-darker: #1d74aa; | ||
|
||
--bs-primary: var(--capa-blue); | ||
--bs-primary-rgb: var(--capa-blue); | ||
} | ||
* { | ||
margin: 0; | ||
|
||
a:not(.btn) { | ||
color: var(--capa-blue); | ||
text-decoration: none; | ||
} | ||
body { | ||
line-height: 1.5; | ||
-webkit-font-smoothing: antialiased; | ||
|
||
a:not(.btn):hover { | ||
text-decoration: underline; | ||
} | ||
|
||
.btn-primary { | ||
--bs-btn-bg: var(--capa-blue); | ||
--bs-btn-border-color: var(--capa-blue); | ||
} | ||
|
||
.btn:hover { | ||
background-color: var(--capa-blue-darker); | ||
border-color: var(--capa-blue-darker); | ||
} | ||
img, picture, video, canvas, svg { | ||
display: block; | ||
max-width: 100%; | ||
|
||
.text-justify { | ||
text-align: justify; | ||
} | ||
|
||
body { | ||
overflow-x: clip; | ||
} | ||
input, button, textarea, select { | ||
font: inherit; | ||
|
||
/* a link that looks like inline text, until you hover and see a colorful underline */ | ||
.understated-link { | ||
color: var(--bs-body-color) !important; | ||
text-decoration: none; | ||
text-decoration-color: var(--capa-blue); | ||
} | ||
p, h1, h2, h3, h4, h5, h6 { | ||
overflow-wrap: break-word; | ||
|
||
.understated-link:hover { | ||
text-decoration: underline; | ||
text-decoration-color: var(--capa-blue) !important; | ||
} | ||
#root, #__next { | ||
isolation: isolate; | ||
|
||
.b-divider { | ||
width: 100%; | ||
height: 3rem; | ||
background-color: rgba(0, 0, 0, .1); | ||
border: solid rgba(0, 0, 0, .15); | ||
border-width: 1px 0; | ||
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15); | ||
} | ||
</style> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The inline styles could be moved to a separate CSS file
<li><a href="{gh_link}">edit on GitHub</a></li> | ||
<li><a href="{vt_link}">search on VirusTotal</a></li> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ideally, external links should be opened in a new tab (target="_blank"
) and use rel="noopener noreferrer"
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Interesting, my expectations are that a typical click opens in the same tab, and a middle click opens in a new tab, and that this customization is best left up to the user.
web/rules/scripts/modified-dates.py
Outdated
start_dir = sys.argv[1] | ||
output_file = sys.argv[2] |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe use argparser with descriptions for these dirs
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That's a great idea! I'll work on changing that
will address code style violations and then mark the PR ready for review again |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks great! I love the landing page you've added and the other enhancements to the design.
4f2273c
to
ddc469b
Compare
ddc469b
to
5d585ac
Compare
Amazing, thank you all very much! |
This PR adds the landing page that will be found at https://mandiant.github.io/capa/ and a rule browsing web application that will be found at https://mandiant.github.io/capa/rules/.
You can view a snapshot of the site here: https://williballenthin.github.io/capa/
The rules website was written by @DeeyaSingh and developed here: https://github.com/DeeyaSingh/DeeyaSingh.github.io
I imported the code in 53d270a and have since then made some tweaks, primarily around styling and integration with the larger site.
The landing page definitely needs more work - the wording isn't great and there's a few more sections needed (especially an "examples" section). But, I figured it's better to have something to work with than to wait for perfection. Therefore, please don't hesitate to open PRs extending the landing page.
Checklist
closes #2261
closes #1550
closes #1554
closes #1555
closes #1556
closes #1557