Resolve merge

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.github/ISSUE_TEMPLATE/custom.md

@@ -11,3 +11,4 @@ assignees: ''
 * **Application/Executable:**
 * **WTF Behavior Description:**
 * **Link to Documentation of Behavior:**
+* **Please provide any images for additional evidence.**

.gitignore

@@ -1,27 +1,41 @@
-# Logs
-logs
-*.log
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
+.pnpm-debug.log*
 
 node_modules
 .DS_Store
 dist-ssr
 coverage
 *.local
+# local env files
+.env*.local
+
+# vercel
+.vercel
 
-/cypress/videos/
-/cypress/screenshots/
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.vscode/extensions.json

@@ -1,3 +1 @@
-{
-  "recommendations": ["johnsoncodehk.volar", "johnsoncodehk.vscode-typescript-vue-plugin"]
-}
+

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

README.md

@@ -1,3 +1,36 @@
-# wtfbins
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
-WTF are these binaries doing?! This project catalogues benign applications with malicious-looking behavior.
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

components/activetagcontainer.tsx

@@ -0,0 +1,33 @@
+import styles from "../styles/ActiveTagContainer.module.css"
+
+interface AppProps {
+    tags: string[],
+    removeTagFilter: (t: string) => void
+}
+
+const ActiveTagContainer = ({ tags, removeTagFilter }: AppProps) => (
+    tags.length == 0 ? <></> :
+    <>
+        <div>
+            <h4>
+                Active Tags
+            </h4>
+        </div>
+        <div className={styles.activeTag}>
+            <ul>
+                {
+                    tags.map((t: string, idx: number) => (
+                        <li 
+                            key={idx}
+                            onClick={() => removeTagFilter(t)}
+                        >
+                            {t} [x]
+                        </li>
+                    ))
+                }
+            </ul>
+        </div>
+    </>
+)
+
+export default ActiveTagContainer

components/footer.tsx

@@ -0,0 +1,11 @@
+import styles from "../styles/Footer.module.css"
+
+export default function Footer() {
+    return (
+        <footer className={styles.footer}>
+            <p>
+                <a href="https://github.com/mttaggart/wtfbins">Made</a> with 💜 by <a href="https://taggartinstitute.org">The Taggart Institute</a>
+            </p>
+        </footer>
+    );
+}

components/layout.tsx

@@ -0,0 +1,31 @@
+import Navbar from "./navbar";
+import Footer from "./footer";
+import Head from "next/head"
+
+export default function Layout({ children }: any) {
+    return (
+        <>
+            <Head>
+                <meta name="description" content="WTFBins: benign applications that exhibit suspicious behavior" />
+                <meta name="viewport" content="width=device-width, initial-scale=1" />
+                <link rel="icon" href="/favicon.ico" />
+                <meta property="og:url" content="https://wtfbins.wtf/" />
+                <meta property="og:card" content="summary_large_image" />
+                <meta property="og:title" content="WTFBins"/>
+                <meta property="og:author" content="Michael Taggart" />
+                <meta property="og:description" content="WTF, Bin?! This project aims to catalogue benign applications that exhibit suspicious behavior. These binaries can emit noise and false positives in threat hunting and automated detections. By cataloguing them here, the hope is to allow defenders to improve their detection rules and threat hunting queries."/>
+                <meta property="og:image" content="https://wtfbins.wtf/wtfbin.png" />
+                <meta name="twitter:card" content="summary_large_image" />
+                <meta name="twitter:title" content="WTFBins"/>
+                <meta name="twitter:site" content="@mttaggart" />
+                <meta name="twitter:creator" content="@mttaggart" />
+                <meta name="twitter:description" content="WTF, Bin?! This project aims to catalogue benign applications that exhibit suspicious behavior. These binaries can emit noise and false positives in threat hunting and automated detections. By cataloguing them here, the hope is to allow defenders to improve their detection rules and threat hunting queries."/>
+                <meta name="twitter:image" content="https://wtfbins.wtf/wtfbin.png" />
+            </Head>
+            <Navbar />
+            <main>{ children }</main>
+            <Footer />
+        </>
+    )
+
+}

components/navbar.tsx

@@ -0,0 +1,14 @@
+import Link from "next/link"
+
+export default function Navbar () {
+    return (
+        <>
+            <h1>WTFBins</h1>
+            <nav>
+                <Link href="/">Home</Link>
+                <Link href="/about">About</Link>
+                <Link href="/contribute">Contribute</Link>
+            </nav>
+        </>
+    );
+}

components/tagcontainer.tsx

@@ -0,0 +1,28 @@
+import styles from "../styles/TagContainer.module.css"
+
+interface AppProps {
+    tags: string[],
+    addTagFilter: (t: string) => void
+}
+
+const TagContainer = ({ tags, addTagFilter }: AppProps) => (
+    <div className={styles.tagContainer}>
+        <h3>Tags</h3>
+        <ul>
+            {
+                tags.map((tag: string, idx: number) => (
+                    <li
+                        key={idx.toString()}
+                        className={styles.wtfBinTag}
+                        onClick={() => addTagFilter(tag)}
+                    >
+                        {tag}
+                    </li>
+
+                ))
+            }
+        </ul>
+    </div>
+)
+
+export default TagContainer;

components/textsearch.tsx

@@ -0,0 +1,15 @@
+import styles from "../styles/TextSearch.module.css"
+
+interface AppProps {
+    textFilter: string,
+    updateTextFilter: (e: any) => any
+}
+
+const TextSearch = ({textFilter, updateTextFilter}: AppProps) => (
+    <div className={styles.searchForm}>
+        <label>Search</label>
+        <input type="text" value={textFilter} onInput={updateTextFilter}/>
+    </div>
+);
+
+export default TextSearch;

components/wtfbinlistview.tsx

@@ -0,0 +1,71 @@
+import { WtfBin } from "../interfaces/WtfBin";
+import Link from "next/link";
+import styles from "../styles/WtfBinListView.module.css";
+import TagContainer from "./tagcontainer";
+
+interface AppProps {
+    wtfBins: WtfBin[],
+    tagFilter: string[]
+    textFilter: string,
+    addTagFilter: (t: string) => void
+}
+
+export default function WtfBinListView({ wtfBins, tagFilter, addTagFilter, textFilter }: AppProps) {
+
+    const tagMatch = (
+        binTags: string[], 
+        tagFilter: string[]
+    ): boolean => {
+        if (tagFilter.length == 0) return true;
+        return binTags.some((t: string): boolean => tagFilter.indexOf(t) >= 0);
+    };
+
+    const textMatch = (
+        bin: WtfBin,
+        textFilter: string
+    ): boolean => {
+        if (textFilter == "") return true;
+        const lowerName = bin.name.toLowerCase();
+        const lowerDesc = bin.description.toLowerCase();
+        const lowerContrib = bin.contributor.toLowerCase();
+        return (
+            lowerName.indexOf(textFilter) >= 0 ||
+            lowerDesc.toLowerCase().indexOf(textFilter) >= 0 ||
+            lowerContrib.toLowerCase().indexOf(textFilter) >= 0
+        );
+    };
+
+    const filteredBins: WtfBin[] = wtfBins.filter((wtfBin: WtfBin) => (
+        tagMatch(wtfBin.tags, tagFilter) && textMatch(wtfBin, textFilter)
+    ))
+
+    return (
+        filteredBins.length == 0 ? 
+            <p>I got no bins for you!</p>
+        :
+        <ul className={styles.binContainer}>
+            {
+                filteredBins.map((wtfBin: WtfBin) => (
+                    <li key={wtfBin.name} className={styles.binItem}>
+                        <Link href={`/bin/${wtfBin.id}`}>
+                            <h2>{ wtfBin.name }</h2>
+                        </Link>
+                        <hr />
+                        <p>
+                            <b>Contributed By:</b> { wtfBin.contributor }
+                        </p>
+                        <p>
+                            {wtfBin.preview}
+                        </p>
+                        <div className="markdown" v-html="Marked.parse(wtfbin.preview)"></div>
+                        <footer>
+                            <a href={wtfBin.documentation}>Documentation</a>
+                            <TagContainer tags={wtfBin.tags} addTagFilter={addTagFilter}/>
+                        </footer>
+                    </li>
+                ))
+            }
+        </ul>
+    );
+}
+