Skip to content

Commit

Permalink
Merge pull request #7 from shepherd-media-classifier/smooth-version
Browse files Browse the repository at this point in the history 
Smooth version
  • Loading branch information
@rosmcmahon
rosmcmahon authored Jan 13, 2025
2 parents 3223e38 + f572497 commit c52c0e2
Show file tree
Hide file tree
Showing 24 changed files with 633 additions and 239 deletions.
187 changes: 75 additions & 112 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@ import React, { useEffect, useState } from "react";
import { ImgShepherdThemed } from "./components/ImgShepherdThemes";
import { CodeBox } from "./components/CodeBox";
import { handleCopyToClipboard } from "./helperFunctions/copyToClipboard";
import Button from "./components/Button/Button";
import { ImgGlobeArweaveShepherd } from "./components/ImgGlobeArweaveShepherd";
import InfoBar from "./components/InfoBar/InfoBar";
import Sidebar from "./components/Sidebar";

function App() {
const [version, setVersion] = useState("...");
Expand All @@ -28,108 +32,82 @@ function App() {
return (
<>
<div className="full-page">
<a href="https://arweave.org">
<img
className="arweave-logo"
src={new URL("./assets/arweave_logo.svg", import.meta.url).href}
alt="copy"
width={120}
/>
</a>
<div className="content-container">
<div className="row header-container">
<div className="logo-container container primary-background-container">
<ImgShepherdThemed />
<span className="shepherd-font">Shepherd</span>
</div>
<div className="accent-content-container header-padding column container primary-background-container main-gap">
<h1>
Current Version: <u>Shepherd {version}</u>
</h1>
<p>
Generate your own content moderation policies for the content
you would like to store on your Arweave node.
</p>
<p>
This is the{" "}
<a href="https://github.com/shepherd-media-classifier/shepherd/tree/stable-single-machine#readme">
<u className="blue">github</u>
</a>{" "}
to start using Shepherd.
</p>
</div>
</div>
<div className="row body-content">
<div className="column">
<div className="column container primary-background-container regular-padding main-gap">
<h2>Overview</h2>
<p>
<i>Shepherd</i> is a framework to build content moderation
systems.
</p>
<p>
The output of shepherd is a transaction ID list that you can
load with an Arweave node, in order to protect your node from
storing and serving unwanted material.
</p>
<p>
It uses a simple plugin architecture so that you are in
control of what is filtered, and makes creating your own
filters easier through the use of these plugins.
</p>
</div>
<div className="column container primary-background-container regular-padding main-gap">
<h2>Getting Started</h2>
<p>
To help you get started, @ArweaveTeam provides an NSFW content
filter which you can load by adding the following to your
Arweave start command:
</p>
<div
className="code-wrapper"
onClick={() =>
handleCopyToClipboard(
"transaction_blacklist_url http://shepherd-v.com/nsfw.txt"
)
}
>
<CodeBox>
transaction_blacklist_url http://shepherd-v.com/nsfw.txt
</CodeBox>
<picture>
<source
srcSet={new URL('./assets/Copy_light.svg', import.meta.url).href}
media="(prefers-color-scheme: light)"
/>
<img
src={new URL("./assets/Copy.svg", import.meta.url).href}
alt="copy"
width={15}
height={15}
/>
</picture>
</div>
<p>
It uses a simple plugin architecture so that you are in
control of what is filtered, and makes creating your own
filters easier through the use of these plugins.
</p>
</div>
</div>
<div className="column responsive-width">
<div className="column regular-padding primary-background-container container main-gap">
<div>
<div className="body-wrapper">
<div className="main-wrapper" dir="ltr">
<InfoBar />
<div className="main-flex">
<Sidebar version={version} />
<main className="column main-container">
<div className="column content-container">
<h2>
<u>Your</u> Nodes
<span>01</span> Overview
</h2>

<p>
<a
href="https://github.com/shepherd-media-classifier/shepherd/tree/stable-single-machine#readme"
style={{ zIndex: "2", cursor: "pointer" }}
>
<i>shepherd</i>{" "}
</a>
is a framework to build content moderation systems.
</p>
<p>
The output of shepherd is a transaction ID list that you can
load with an Arweave node, in order to protect your node
from storing and serving unwanted material.
</p>
<div className="illustration-container">
<ImgGlobeArweaveShepherd width={"100%"} />
</div>
<p>
It uses a simple plugin architecture so that you are in
control of what is filtered, and makes creating your own
filters easier through the use of these plugins.
</p>
</div>
<div className="column content-container">
<h2>
<u>Your</u> Content Moderation
<span>02</span> Getting Started
</h2>

<p>
To help you get started, @ArweaveTeam provides an NSFW
content filter which you can load by adding the following to
your Arweave start command:
</p>
<div
className="code-wrapper"
onClick={() =>
handleCopyToClipboard(
"transaction_blacklist_url http://shepherd-v.com/nsfw.txt"
)
}
>
<CodeBox>
transaction_blacklist_url http://shepherd-v.com/nsfw.txt
</CodeBox>
</div>
<p>
It uses a simple plugin architecture so that you are in
control of what is filtered, and makes creating your own
filters easier through the use of these plugins.
</p>
</div>
<div className="main-gap">
<div className="column content-container">
<h2>
<span>03</span> Your Nodes Your Content Moderation
</h2>

<p>
<i>Shepherd</i> puts the control over content you want to
filter fully in your hands.
<a
href="https://github.com/shepherd-media-classifier/shepherd/tree/stable-single-machine#readme"
style={{ zIndex: "2", cursor: "pointer" }}
>
<i>shepherd</i>{" "}
</a>{" "}
puts the control over content you want to filter fully in
your hands.
</p>
<p>
It handles all of the raw content from the weave data,
Expand All @@ -147,22 +125,7 @@ function App() {
for a particular app’s content media.
</p>
</div>
</div>
<div className="column button-container primary-background-container container">
<a
href="https://github.com/shepherd-media-classifier/shepherd/tree/stable-single-machine#readme"
style={{ zIndex: "2" }}
>
<button>Github</button>
</a>
<img
className="arweave-bg"
src={new URL("./assets/arweave_bg.svg", import.meta.url).href}
alt="copy"
width={450}
style={{ zIndex: "1" }}
/>
</div>
</main>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit c52c0e2

Please sign in to comment.