Añadido: FAQ

2 files changed, 422 insertions, 0 deletions

diff --git a/src/App.js b/src/App.js
index 8c2ab6c..db0cb29 100644
--- a/src/App.js
+++ b/src/App.js
@@ -17,6 +17,7 @@ import Thread from "./Thread";
 import Board from "./Board";
 import NotFound from "./NotFound";
 import ThreadList from "./ThreadList";
+import FAQ from "./FAQ";
 
 class App extends Component {
   constructor() {
@@ -109,6 +110,9 @@ class App extends Component {
                 )}
               </Dropdown.Menu>
             </Dropdown>
+            <Menu.Item as={Link} to="/faq">
+              <Icon name="help" /> FAQ
+            </Menu.Item>
             <Menu.Menu position="right">
               <Menu.Item as="a" onClick={this.toggleTheme}>
                 {nightMode ? <Icon name="sun" /> : <Icon name="moon" />}
@@ -136,6 +140,7 @@ class App extends Component {
               path="/list/:dir"
               nightMode={nightMode}
             />
+            <FAQ path="/faq" />
             <NotFound default />
           </Router>
         </Container>
diff --git a/src/FAQ.js b/src/FAQ.js
new file mode 100644
index 0000000..0962225
--- /dev/null
+++ b/src/FAQ.js
@@ -0,0 +1,417 @@
+import React from "react";
+import { Header, Table, Segment } from "semantic-ui-react";
+import { Link } from "@reach/router";
+
+const FAQ = () => {
+  return (
+    <Segment>
+      <Header as="h1">Acerca de BaI</Header>
+      <Header as="h3">¿Qué es BaI?</Header>
+      <p>
+        <b>Bienvenido a Internet</b> es una comunidad en donde se puede
+        conversar y compartir imágenes libremente sin necesidad de tener una
+        cuenta, nombre, o identidad dentro del sitio. El sitio nace de una
+        fuerte creencia en la libertad de expresión, y de que una conversación
+        puede ser más entretenida y honesta cuando no existen identidades de por
+        medio porque lo que tienes que decir y mostrar es mucho más importante.
+      </p>
+      <p>
+        La idea es tener un ambiente simple y relajado y que al mismo tiempo
+        escape del desastre que hay en muchas partes de Internet, como lo es la
+        web 2.0 o la cultura "chanera". Usualmente se abordan temas como
+        tecnología, videojuegos, cultura de Internet, música, política, cultura
+        retro, animé y material weeb en general, entre otros.
+      </p>
+      <p>
+        Históricamente, BaI se basa en la ideología que tuvieron sitios como
+        Ayashii World, Amezou, 2channel y Futaba Channel. A pesar de que la
+        cultura occidental está mucho más enfocada en la individualidad,
+        queremos que existan alternativas para personas que no se sientan a
+        gusto en esos entornos.
+      </p>
+      <Header as="h3">¿Realmente es anónimo? ¿Es BaI seguro?</Header>
+      <p>
+        A pesar de que es posible usar un nombre, la mayoría de los usuarios no
+        lo hacen a modo de formalidad. Al decir lo que realmente piensas sin
+        ligarte a una identidad otros pueden criticar tu mensaje, pero nunca a
+        ti personalmente. <i>Sin embargo</i>, en BaI sí se guarda internamente
+        la dirección IP de la persona que envía un mensaje, pero esta
+        información no se muestra públicamente bajo ningún caso.
+      </p>
+      <p>
+        <b>
+          No hay forma de saber quién escribió un mensaje, a menos que el autor
+          lo haya especificado.
+        </b>
+      </p>
+      <Header as="h3">¿Quién está a cargo de BaI?</Header>
+      <p>
+        Bienvenido a Internet es mantenido por el staff de BaI, o{" "}
+        <span className="ui text green">Staff ★</span>. Es un pequeño grupo
+        anónimo y voluntario que funciona de manera horizontal (no hay rangos
+        dentro del staff) y fuera de ciertas tareas de mantenimiento sus
+        posiciones no son distintas a las de usuarios normales. Sus miembros han
+        variado a través de los años por múltiples razones. Sin su ayuda, BaI no
+        seguiría en pie como lo hace ahora. En estos momentos sus miembros son
+        tres.
+      </p>
+      <p>
+        El staff está siempre abierto a toda sugerencia y reclamo, por lo que si
+        deseas contactarte con el staff, siéntete libre de dejar un mensaje en
+        <Link to="/board/bai">Discusión de BaI</Link> o enviar un correo a
+        <a href="mailto:burocracia@bienvenidoainternet.org">
+          burocracia@bienvenidoainternet.org
+        </a>
+        .
+      </p>
+      <Header as="h3">¿Cuál es la nacionalidad de BaI?</Header>
+      <p>
+        En BaI se le permite el acceso al sitio y a postear a gente de todas las
+        nacionalidades. Desde un principio en BaI se intentó no tener un foco
+        especial en ningún país en específico, sin importar que la base de
+        usuarios tienda a ser de algún que otro país.
+      </p>
+      <Header as="h3">¿Hay reglas que debo seguir?</Header>
+      <p>
+        Creemos que la comunidad es capaz de decidir el rumbo de sí misma,{" "}
+        <i>
+          por lo que no existen reglas de comportamiento impuestas por el staff
+        </i>
+        , dejándolo en manos del sentido común de los usuarios.
+      </p>
+      <p>
+        Sin embargo, en pos de mantener el sitio limpio y libre de problemas
+        legales,{" "}
+        <b>
+          el staff se verá obligado a eliminar cualquier spam o material que sea
+          considerado ilegal bajo la ley estadounidense.
+        </b>
+      </p>
+      <Header as="h1">Funcionamiento y Terminología</Header>
+      <Header as="h3">¿Cómo me identifico y qué es un trip?</Header>
+      <p>
+        A pesar de que convencionalmente no es común identificarse,{" "}
+        <b>
+          es posible hacerlo cuando la identidad del usuario sea relevante a la
+          discusión
+        </b>
+        . Si necesitas identificarte en un hilo y no quieres que se hagan pasar
+        por ti, puedes usar un <i>trip</i> o <i>tripcode</i> temporalmente. Un
+        trip o tripcode es un sistema básico de identificación, y no es
+        necesario registrarse ni nada por el estilo. Es tan simple como escribir
+        en el campo de nombre:
+      </p>
+      <p>
+        <code>MiNombre#miClave</code>
+      </p>
+      <p>
+        Como nombre colocas un pseudónimo con el cual aparecerás (opcional, un
+        trip puede usarse solo), y como clave coloca una palabra que solo tú
+        sepas (máximo 8 caracteres); ambos separados por un signo gato (#).
+        Después de enviar tu mensaje, la clave será encriptada en una serie de
+        letras y números únicos que identifican esa clave.
+      </p>
+      <p>
+        <b>Ejemplo</b>: Al escribir como nombre <code>Juanito#ejemplo</code>, al
+        enviar el mensaje se traducirá a lo siguiente:
+        <code>
+          <span className="ui text green"> Juanito ◆NCCjFTOGjk</span>
+        </code>
+        <br />
+        De esta forma solo tú podrás postear con ese código y demostrar que eres
+        tú el que está escribiendo el mensaje.
+      </p>
+      <p>
+        <b>Nota:</b> Cualquiera puede usar el nombre de quien sea, por lo que no
+        hay garantía de que alguien no suplante tu identidad, ni siquiera usando
+        un trip, ya que son relativamente fáciles de crackear.
+      </p>
+      <p>
+        Para realizar una cita, sólo debes anteponer un símbolo de mayor que
+        (">") al texto que quieres citar, de la misma forma que se hace en
+        servicios de e-mail o grupos de noticias de antaño.
+      </p>
+      <Header as="h3">¿Cómo elimino mi post?</Header>
+      <p></p>
+      <Header as="h3">¿Cómo denuncio a alguien?</Header>
+      <p>
+        Si crees que otra persona postea spam o material ilegal, o alguna otra
+        razón especial, puedes pedirle al staff que lo elimine presionando el
+        botón rep en la parte superior de dicho post. Si piensas que se le
+        debería prohibir el acceso temporal o permanentemente a algún usuario,
+        recomendamos sugerirlo y discutirlo en la sección de sugerencias del
+        sitio.
+      </p>
+      <Header as="h3">¿Qué es "sage"?</Header>
+      <p>
+        Normalmente un hilo de conversación salta al principio una vez que
+        respondes en él, al igual que en foros tradicionales. Si por cualquier
+        razón deseas que el hilo no haga esto, puedes insertar la palabra "sage"
+        en el campo de e-mail al momento de postear en él.
+      </p>
+      <p>
+        Además, usar sage ocultará la ID de tu post en las secciones (o hilos en
+        boards sin IDs, en caso de haber usado <i>EXTEND</i>) que lo permitan.
+      </p>
+      <Header as="h3">¿Qué son los IDs y cómo funcionan?</Header>
+      <p>
+        El ID es una serie de 8 letras y números que identifican únicamente al
+        autor de un mensaje, manteniendo su anonimato. Este identificador sólo
+        aparece en algunas secciones específicas, pero el creador de un hilo
+        también puede especificar que aparezcan IDs en su hilo si así lo desea,
+        usando la función EXTEND al momento de crear el hilo
+      </p>
+      <p>
+        <b>
+          Por razones de privacidad, este identificador cambia cada 24 horas y
+          es distinto en cada hilo.
+        </b>
+      </p>
+      <p>
+        Adicionalmente, desde el 03/04/16, el ID contiene un sufijo que indica
+        desde dónde se ha enviado el mensaje. Los sufijos posibles actualmente
+        son:
+      </p>
+      <Table celled striped compact collapsing>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>R</Table.Cell>
+            <Table.Cell>Aplicación Android</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>a</Table.Cell>
+            <Table.Cell>Navegador Android</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>i</Table.Cell>
+            <Table.Cell>Navegador iPhone</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>Q</Table.Cell>
+            <Table.Cell>Otro celular</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>T</Table.Cell>
+            <Table.Cell>Nodo Tor</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>0</Table.Cell>
+            <Table.Cell>PC u otro</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+      <Table celled striped compact collapsing>
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell colSpan={2}>Solo ID Detallada</Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>F</Table.Cell>
+            <Table.Cell>Mozilla Firefox</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>C</Table.Cell>
+            <Table.Cell>Google Chrome</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>s</Table.Cell>
+            <Table.Cell>Safari</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>S</Table.Cell>
+            <Table.Cell>SeaMonkey</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>o</Table.Cell>
+            <Table.Cell>Opera</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>I</Table.Cell>
+            <Table.Cell>Internet Explorer</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>E</Table.Cell>
+            <Table.Cell>Microsoft Edge</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+      <Table celled striped compact collapsing>
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell colSpan={2}>Extra</Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>!</Table.Cell>
+            <Table.Cell>Proxy y/o IP de país no hispano</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>#</Table.Cell>
+            <Table.Cell>IP en lista negra</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+      <p></p>
+      <Header as="h3">¿Qué es EXTEND y cómo se usa?</Header>
+      <p>
+        EXTEND es una función para tomar opciones de la sección que normalmente
+        son fijas (como la visibilidad de los IDs) y cambiarlas temporalmente
+        dentro de un hilo al momento de crearlo. Para usarlo, se debe escribir
+        el siguiente comando <b>en la primera línea del mensaje</b> al momento
+        de crear un hilo:
+      </p>
+      <p>
+        <code>!extend:(opción 1):(opción 2)</code>
+      </p>
+      <p>Las opciones disponibles son:</p>
+      <Table celled striped compact collapsing>
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell>Opción 1</Table.HeaderCell>
+            <Table.HeaderCell>ID</Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>default</Table.Cell>
+            <Table.Cell>No cambiar</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>no</Table.Cell>
+            <Table.Cell>Desactivar</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>yes</Table.Cell>
+            <Table.Cell>Activar, excepto con sage</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>force</Table.Cell>
+            <Table.Cell>Activar siempre</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>extra</Table.Cell>
+            <Table.Cell>Activar siempre, IDs detalladas</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+      <Table celled striped compact collapsing>
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell>Opción 2</Table.HeaderCell>
+            <Table.HeaderCell>ID</Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>default</Table.Cell>
+            <Table.Cell>No cambiar</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>no</Table.Cell>
+            <Table.Cell>Desactivar</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>yes</Table.Cell>
+            <Table.Cell>Mostrar hash</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>domain</Table.Cell>
+            <Table.Cell>Mostrar dominio</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>country</Table.Cell>
+            <Table.Cell>Mostrar país</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>verbose</Table.Cell>
+            <Table.Cell>Mostrar hash y parte de IP</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>all</Table.Cell>
+            <Table.Cell>Mostrar todo</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+      <p>
+        Por ejemplo, colocar <code>!extend:yes:domain</code> en la prímera linea
+        del mensaje al crear un hilo hace que todos los mensajes en ese hilo
+        aparezcan con ID (excepto con sage) y con el dominio del autor.
+        Asimismo,
+        <code>!extend:force</code> hace que todos los mensajes en el hilo
+        aparezcan con ID.
+      </p>
+      <p>
+        Nótese que esta función no está habilitada en las siguientes secciones:{" "}
+        <b>Meta, World Lobby</b>
+      </p>
+      <Header as="h3">
+        ¿Qué es la estrella que aparece en algunos nombres? ¿Qué es un cap?
+      </Header>
+      <p>
+        En algunos mensajes aparece una estrella (
+        <span className="ui text green">★</span>) a la derecha del nombre. Esto
+        se llama <i>cap</i> o <i>capcode</i> e indica que la identidad del autor
+        del mensaje ha sido verificada. Solo algunas personas pueden tener un
+        cap o capcode.
+      </p>
+      <p>
+        Los miembros del staff de BaI utilizan el cap{" "}
+        <span className="ui text green">Staff ★</span> de manera colectiva.
+        Otras personas ajenas al staff también pueden tener sus propios caps, y
+        debido a esto,{" "}
+        <b>que un autor tenga cap no quiere decir que sea miembro del staff</b>,
+        a excepción de <span className="ui text green">Staff ★</span>,
+        obviamente.
+      </p>
+      <p>
+        Si por alguna razón necesitas un cap puedes{" "}
+        <a href="mailto:burocracia@bienvenidoainternet.org">
+          contactar al staff directamente
+        </a>
+        .
+      </p>
+      <Header as="h1">Información adicional</Header>
+      <Header as="h3">weabot Script</Header>
+      <p>
+        weabot es el script que usa este sitio para los BBS e Imageboards. Fue
+        creado colaborativamente por antiguos y nuevos miembros del staff de
+        BaI, utilizando el framework de{" "}
+        <a href="https://github.com/tslocum/PyIB-Standalone">PyIB</a> y continúa
+        constantemente en desarrollo.
+      </p>
+      <p>
+        El código fuente se encuentra disponible en{" "}
+        <a href="https://git.bienvenidoainternet.org/bai/weabot/">
+          https://git.bienvenidoainternet.org/bai/weabot/
+        </a>
+        . Está bajo la licencia{" "}
+        <a href="http://www.gnu.org/licenses/agpl-3.0.html">AGPLv3</a>, por lo
+        que si no estás de acuerdo con los términos, te recomendamos usar una de
+        las varias alternativas.
+      </p>
+      <p>
+        También usa partes del proyecto{" "}
+        <a href="http://wakaba.c3.cx/">Kareha/Wakaba</a>, un excelente script
+        con funcionalidades similares.
+      </p>
+      <Header as="h3">bai-client (vipper.tech)</Header>
+      <p>
+        bai-client es una <i>app</i> escrita en JavaScript con la framework
+        ReactJS+Semantic UI, desarrollada por{" "}
+        <span className="ui text green">Renard ★</span>, bajo la licencia{" "}
+        <a href="http://www.wtfpl.net/about/">WTFPL</a>. El código fuente está
+        disponible en{" "}
+        <a href="https://github.com/Renard1911/bai-client">GitHub</a> y en el{" "}
+        <a href="https://git.bienvenidoainternet.org/Renard/bai-client/">
+          repositorio de BaI
+        </a>
+        .
+      </p>
+    </Segment>
+  );
+};
+
+export default FAQ;