annotate
1.0.0
Anote e publique texto na web! Este projeto foi criado para "o guia de criptografia (editado) Latecomer's Crypto", mas pode ser usado para anotar qualquer documento de texto.
Veja uma demonstração ao vivo em https://molly.github.io/annotate/.
Copie os arquivos index.html , styles.css e annotate.js para o seu projeto. Você só deve precisar editar o arquivo index.html , a menos que deseje alterar o comportamento de estilo ou JavaScript. Este projeto não requer o JavaScript; portanto, se você quiser deixá -lo de fora, basta omitir o arquivo annotate.js e remover a tag <script src="./annotate.js"></script> do arquivo html. A pasta screenshots possui capturas de tela em tamanho real da página de índice nas duas visualizações de desktop ( index-desktop.png ) e móvel ( index-mobile.png ), para que você possa ver o que o HTML produz.
Cada seção do documento segue esta estrutura básica:
< section class =" group " >
< div class =" content quote " >
Text that's being < mark data-annotation-id =" 1 " aria-details =" unique-comment-id " > annotated </ mark > .
</ div >
< div class =" content note " >
< div class =" annotation " role =" comment " data-annotation-id =" 1 " id =" unique-comment-id " >
< div class =" commenter " > Commenter name </ div >
Comment text.
</ div >
</ div >
</ section >e produz:
Cada seção do texto é capturada em uma linha com seções esquerda e direita. O elemento <section class="group"> representa esta linha. Cada lado então tem uma div com a classe content e as classes quote ou note . quote é o texto que está sendo anotado, note é para as anotações.
Cada parte do texto destacado na fonte original (lado esquerdo) é marcado com tags <mark> . Eles devem ter um atributo aria-details exclusivo que corresponderá ao id da anotação, que permitirá o foco visual destacando no clique. Opcionalmente, ele também pode ter um data-annotation-id para numerar a anotação, para ajudar a distinguir anotações quando houver múltiplas em uma seção.
Correspondente à tag <mark> será uma div com a classe de annotation ou annotation-group no lado direito (o primeiro para anotações únicas, a última para anotações agrupadas). Estes devem ter role="comment" e um id que corresponda exatamente ao valor exclusivo aria-details do texto destacado ao qual ele corresponde. Como no texto destacado, ele pode ter um data-annotation-id para numerar a anotação.
Dentro de um grupo de anotação, haverá um ou mais divs com a classe de annotation . Eles podem conter uma div com o commenter da classe para identificar o escritor, se houver vários anotadores trabalhando no documento. Estes não precisam role="comment , data-annotation-id ou id , pois estão aninhados em um annotation-group com esses atributos.
No caso de múltiplas anotações dentro de um grupo de anotação, eles podem aparecer diretamente empilhados ou rosqueados (renderizando com níveis crescentes de indentação, para indicar que são respondidos um para o outro). Para encadear os comentários, inclua a classe thread no segundo comentário (a primeira resposta). Quaisquer respostas subsequentes devem ser marcadas com a classe thread-x , onde x é o nível de indentação de 2 a 10: thread-2 , thread-3 , ..., thread-10 . Omita as classes thread para renderizar várias anotações em uma pilha sem recuo.
< section class =" group " >
< div class =" content quote " >
Text that's being < mark data-annotation-id =" 1 " aria-details =" unique-comment-id " > annotated </ mark > .
</ div >
< div class =" content note " >
< div class =" annotation-group " role =" comment " data-annotation-id =" 1 " id =" unique-comment-id " >
< div class =" annotation " >
A comment with indented responses.
</ div >
< div class =" annotation thread " >
A reply
</ div >
< div class =" annotation thread-2 " >
A second reply
</ div >
</ div >
</ div >
</ section > 
O projeto do Guia de Latecomer original foi criado usando Pug e Sass. Se você preferir trabalhar com isso, esse código -fonte vive com a fonte do meu site:
É assim que as anotações são exibidas no celular:
