Merge branch 'dev' into facet

README.md

 # Knowledge database of information about defense systems in prokaryotes
 
-## How to use references in the wiki pages
+## Writting content
+
+You can propose modifications for all the content (cf: [help](https://defense-finder.pasteur.cloud/wiki/help)).
+
+### How to use references in the wiki pages
 
 You can add article references by providing a doi directly in the markdown files.
 There is two syntaxes that won't do exactly the same thing.
@@ -37,43 +41,20 @@ For person external, you can create an [issue](https://gitlab.pasteur.fr/mdm-lab
 
 ## Contributing
 
-Look at the [Content documentation](https://content-v2.nuxtjs.org/) to learn more.
-
-### Setup
-
-Make sure to install the dependencies:
+### Run locally
 
-```bash
-# yarn
-yarn install
+1. install `Docker` and `Docker Compose` ([installation guide](https://docs.docker.com/engine/install/))
 
-# npm
-npm install
-
-# pnpm
-pnpm install
+2. **Clone the repo**
+```sh
+git clone https://gitlab.pasteur.fr/mdm-lab/wiki.git`
 ```
-
-### Development Server
-
-Start the development server on <http://localhost:3000>
-
-```bash
-npm run dev
+3. **Go to the repo :**
+```sh
+cd wiki
 ```
-
-### Production
-
-Build the application for production:
-
-```bash
-npm run build
+4. **Start the app:**
+```sh
+docker compose up --build
 ```
-
-Locally preview production build:
-
-```bash
-npm run preview
-```
-
-Checkout the [deployment documentation](https://v3.nuxtjs.org/docs/deployment) for more information.
+5. Go to [localhost:8082/wiki](localhost:8082/wiki)

components/content/Alert/ExpansionDetails.vue

@@ -15,7 +15,7 @@ const theme = useTheme();
 </script>
 <template>
     <div>
-        <v-expansion-panels>
+        <v-expansion-panels class="my-3">
             <v-expansion-panel>
                 <v-expansion-panel-title class=" text-h6">
                     {{ title }}

components/content/ProseCode.vue

+<template>
+    <v-card class="pa-4 mx-auto my-3" rounded variant="flat" color="surface">
+        <code><slot /></code>
+    </v-card>
+</template>
\ No newline at end of file

content/0.index.md

@@ -3,11 +3,23 @@ title: DefenseFinder Wiki
 layout: article
 navigation:
   icon: 'md:home'
+relevantAbstracts:
+  - doi: 10.1126/science.1138140
+  - doi: 10.1038/nmicrobiol.2017.92
+  - doi: 10.1128/jb.65.2.113-121.1953
+  - doi: 10.1126/science.aar4120
+  - doi: 10.1126/science.aba0372
+  - doi: 10.1038/s41586-019-1894-8
+  - doi: 10.1128/jb.64.4.557-569.1952
+  - doi: 10.1128/JB.05535-11
+  - doi: 10.1016/j.cell.2021.12.029
+  
+
 ---
 
 ## Introduction
 
-Bacteriophages, or phages for short, are viruses that infect bacteria and hijack bacterial cellular machinery to reproduce themselves. Phages are extremely abundant entities, and could be responsible for up to 20-40% of bacterial mortality daily (Hampton et al., 2020). Therefore, phage infection constitutes a very strong evolutionary pressure for bacteria.
+Bacteriophages, or phages for short, are viruses that infect bacteria and hijack bacterial cellular machinery to reproduce themselves. Phages are extremely abundant entities, and could be responsible for up to 20-40% of bacterial mortality daily :ref{doi=10.1038/s41586-019-1894-8}. Therefore, phage infection constitutes a very strong evolutionary pressure for bacteria.
 
 In response to this evolutionary pressure, bacteria have developed an arsenal of anti-phage defense systems. The term "defense system" here designates either a single gene or a set of genes, which expression provides the bacteria with some level of resistance against phage infection.
 
@@ -17,7 +29,7 @@ The first anti-phage defense system was discovered in the early 1950s by two sep
 
 Their work was in fact the first report of what would later be named Restriction-Modification ([RM](/defense-systems/rm)) system, which is considered to be the first anti-phage defense system discovered.
 
-The sighting of a second defense system occured more than 40 years later, in the late 1980s, when several teams around the world observed arrays containing short, palindromic DNA repeats clustered together on the bacterial genome (Barrangou et al., 2017). Yet, the biological function of these repeats was only elucidated in 2007, when a team of researchers demonstrated that these repeats were part of a new anti-phage defense systems (Barrangou et al., 2007) , known as [CRISPR-Cas system](https://en.wikipedia.org/wiki/CRISPR).
+The sighting of a second defense system occured more than 40 years later, in the late 1980s, when several teams around the world observed arrays containing short, palindromic DNA repeats clustered together on the bacterial genome (Barrangou et al., 2017). Yet, the biological function of these repeats was only elucidated in 2007, when a team of researchers demonstrated that these repeats were part of a new anti-phage defense systems :ref{doi=10.1126/science.1138140}, known as [CRISPR-Cas system](https://en.wikipedia.org/wiki/CRISPR).
 
 Following these two major breakthroughs, knowledge of anti-phage systems remained scarce for some years. Yet, in 2011, Makarova and colleagues revealed that anti-phage systems tend to colocalize on the bacterial genome in defense-islands. This led to a guilt-by-association hypothesis : if a gene or a set of genes is frequently found in bacterial genomes in close proximity to known defense systems, such as RM or CRISPR-Cas systems, then it might constitute a new defense system. This concept had a large role in the discovery of an impressive diversity of defense systems in a very short amount of time. To date, more than 60 defense systems have been described.
 
@@ -26,40 +38,3 @@ Following these two major breakthroughs, knowledge of anti-phage systems remaine
 To date, more than 60 anti-phage defense systems have been described. An exhaustive list of the systems with experimentally validated anti-phage activity can be found [here](/defense-systems).
 
 ## Molecular mechanisms
-
-## References
-
-Barrangou, R. et al. CRISPR provides acquired resistance against viruses in
-prokaryotes. Science 315, 1709–1712 (2007)
-
-Barrangou R, Horvath P. A decade of discovery: CRISPR functions and applications. Nat Microbiol. 2017 Jun 5;2:17092. doi: 10.1038/nmicrobiol.2017.92. PMID: 28581505
-
-BERTANI, G, and J J WEIGLE. “Host controlled variation in bacterial viruses.” Journal of bacteriology vol. 65,2 (1953): 113-21. doi:10.1128/jb.65.2.113-121.1953
-
-Doron S, Melamed S, Ofir G, Leavitt A, Lopatina A, Keren M, Amitai G, Sorek R. Systematic discovery of antiphage defense systems in the microbial pangenome. Science. 2018 Mar 2;359(6379):eaar4120. doi: 10.1126/science.aar4120. Epub 2018 Jan 25. PMID: 29371424; PMCID: PMC6387622.
-
-Gao L, Altae-Tran H, Böhning F, et al. Diverse enzymatic activities mediate antiviral immunity in prokaryotes. Science. 2020;369(6507):1077-1084. doi:10.1126/science.aba0372
-
-Hampton, H. G., Watson, B. N. J. & Fineran, P. C. The arms race between bacteria and their phage foes. Nature 577, 327–336 (2020)
-
-LURIA SE, HUMAN ML. A nonhereditary, host-induced variation of bacterial viruses. J Bacteriol. 1952;64(4):557-569. doi:10.1128/jb.64.4.557-569.1952
-
-Makarova KS, Wolf YI, Snir S, Koonin EV. Defense islands in bacterial and archaeal genomes and prediction of novel defense systems. J Bacteriol. 2011 Nov;193(21):6039-56. doi: 10.1128/JB.05535-11. Epub 2011 Sep 9. PMID: 21908672; PMCID: PMC3194920.
-
-Tal N, Sorek R. SnapShot: Bacterial immunity. Cell. 2022 Feb 3;185(3):578-578.e1. doi: 10.1016/j.cell.2021.12.029. PMID: 35120666.
-
-
-::relevant-abstracts
----
-items:
-    - doi: 10.1126/science.1138140
-      abstract: |
-        Clustered regularly interspaced short palindromic repeats (CRISPR) are a distinctive feature of the genomes of most Bacteria and Archaea and are thought to be involved in resistance to bacteriophages. We found that, after viral challenge, bacteria integrated new spacers derived from phage genomic sequences. Removal or addition of particular spacers modified the phage-resistance phenotype of the cell. Thus, CRISPR, together with associated cas genes, provided resistance against phages, and resistance specificity is determined by spacer-phage sequence similarity.
-    - doi: 10.1038/nmicrobiol.2017.92
-    - doi: 10.1128/jb.65.2.113-121.1953
-    - doi: 10.1126/science.aar4120
-    - doi: 10.1126/science.aba0372
-    - doi: 10.1038/s41586-019-1894-8
-    - doi: 10.1128/jb.64.4.557-569.1952
----
-::

content/1.help.md

@@ -5,29 +5,26 @@ navigation:
     icon: 'md:help'
 ---
 
-
-
-
 # Documentation
 
-## DefenseFinder 
+## DefenseFinder
 
-[DefenseFinder](https://github.com/mdmparis/defense-finder) is a software to detect defense systems from bacterial genomes. 
-It takes as input a fasta file, nucleic or proteic (it will guess which). 
+[DefenseFinder](https://github.com/mdmparis/defense-finder) is a software to detect defense systems from bacterial genomes.
+It takes as input a fasta file, nucleic or proteic (it will guess which).
 
 On the web service page, users can upload (1) their fasta file. One can upload multiple fasta files at once, as many jobs will be run.
 
-Users need to provide a name for the job (2) being submitted before clicking on the submit button (3). 
+Users need to provide a name for the job (2) being submitted before clicking on the submit button (3).
 Once a job is submitted, the page is redirected to the "Analyses" panel (4) where results of the past runs can be found.
 
 ![webservice_interface](/help/webservice_interface.jpg){max-width=750px}
 
-The result consists in 3 tables : 
+The result consists in 3 tables :
+
 - Systems table : One system per line. On the column type, there is the name of the system, and one can click on it to be redirected to the corresponding wiki page.
 - Genes table : One gene per line. Those are genes from the aforementioned system, with some addition information on the quality of the hit. The key between both table is `sys_id`
 - HMMER table : One gene per line. Here it's all the genes hit by a hmm profile, even when the gene is not part of a defense system.
 
-
 ## Contributing to the Wiki
 
 ### 1/ Create an account
@@ -44,15 +41,16 @@ Once your account is created, you need to request access to the project, on the
 
 ![Request Access](/help/Request_access.png){max-width=600px}
 
-Click, and wait for an admin approval. 
+Click, and wait for an admin approval.
 
-### 2/ Edit a page.
+### 2/ Edit a page
 
 Once you have access to the project (the previous step is done once), you can edit easily each page of the wiki, and post [issues](https://gitlab.pasteur.fr/mdm-lab/wiki/-/issues) (if you have question about something or remarks with anything from content to design).
 
 To edit a page, just click on the Edit on Gitlab button at the bottom of every page of the wiki, and it will lead you to the corresponding page of the wiki.
 
-From this page, you can : 
+From this page, you can :
+
 1. Edit the text you'd like
 2. Preview the change you've done (final modification might a bit different, especially if you use plugins to view citations or pdb structures)
 3. Once you've finished you edits, you can specify what you did (e.g. "Re-wrote history of defense systems")
@@ -60,40 +58,34 @@ From this page, you can :
 
 ![Edit a page](/help/Edit_page.png){max-width=750px}
 
-Then it asks you to create a merge request. 
+Then it asks you to create a merge request.
 In other words, the modifications you made will not be reflected on the website until a few automatic checks passed (which should be ok since you modified only some text) and that another person reviewed the change, and accept the merge request.
 
 To do so, just fill in the description (1) of what you did, or anything that you would like the person who will accept the merge request to know, and just hit (2) "Create a merge request".
 
 ![Create MR](/help/Create_MR.png){max-width=750px}
 
+### 3/ Tips to write Markdown
 
-### Tips to write Markdown
+As a general advice, check an already written file to see how other pages are written.<br><br>
 
-As a general advice, check an already written file to see how other pages are written.<br>
-<br>
 The files you edit are in markdown, which is pretty basic language but that can let you do many things, such as tables, links and such with a particular syntax.
-You can check more about this syntax here : https://docs.gitlab.com/ee/user/markdown.html<br>
-<br>
+You can check more about this syntax here : <https://docs.gitlab.com/ee/user/markdown.html><br><br>
 
-To add images, you need to upload the image in the `/content/public` folder (and possibly in the corresponding folder of the defense system) and you can specify its path in the markdown file as follows :<br> 
-<br>
+To add images, you need to upload the image in the `/content/public` folder (and possibly in the corresponding folder of the defense system)
+and you can specify its path in the markdown file as follows :<br>  
 
-```
-![Alt-text, get printed if image is not found](/path/within/public){max-width=750px}
-```
-<br>
-
-where `/path/within/public` is the relative path to the `public` folder (the absolute path would be `/content/public/path/within/public`)
+```md
+![Alt-text, get printed if image is not found](/path/within/public)
+```  
 
-<br>
+where `/path/within/public` is the relative path to the `public` folder (the absolute path would be `/content/public/path/within/public`)<br>
 
-In addition to this, there are some specificities to this wiki :<br>
-<br>
+In addition to this, there are some specificities to this wiki :<br><br>
 
 **1. Each system's page has *frontmatter*, which is a piece of code that will be used to populate the table of the list of system. It has the following syntax :**
 
-```
+```yaml
 ---
 title: Viperin
 tableColumns:
@@ -105,44 +97,111 @@ tableColumns:
     Activator: Direct
     Effector: Nucleotide modifying
     PFAM: PF04055, PF13353
-Contributor : Florian Tesson, Aude Bernheim
+RelevantAbstracts:
+    - doi: 10.1038/s41586-020-2762-2
+    - doi: 10.1126/science.aba0372    
+contributors : 
+    - Florian Tesson
+    - Aude Bernheim
 ---
 ```
-Any new item in the `tableColumns` object will create a new column in the list of [defense system's table](/defense-systems).
 
-<br>
+Any new item in the `tableColumns` object will create a new column in the list of [defense system's table](/defense-systems).<br>
 
-**2. In the relevant abstract section, only the doi is relevant :**
+**2. To display a protein structure, you can call the plugin as follows :**
 
 ```
-::relevant-abstracts
+::molstar-pdbe-plugin
 ---
-items:
-    - doi: 10.1038/s41586-020-2762-2
+height: 700
+dataUrls: 
+    - /avs/AVAST_I,AVAST_I__Avs1B,0,V-plddts_80.96481.pdb
 ---
 ::
 ```
-<br>
 
-**3. To display a protein structure, you can call the plugin as follows :**
+**Custom containers:**
+
+Custom containers can be defined by their types, titles, and contents.
 
+<u>Default title:</u>
+
+```md
+::info
+This is an info box
+::
 ```
-::molstar-pdbe-plugin
+
+```md
+::tip
+This is a tip box
+::
+```
+
+```md
+::warning
+This is a warning box
+::
+```
+
+```md
+::danger
+This is a danger box
+::
+```
+
+```md
+::expansion-details
+There is some details
+::
+```
+
+<u>The output:</u>
+
+::info
+This is an info box
+::
+
+::tip
+This is a tip box
+::
+
+::warning
+This is a warning box
+::
+
+::danger
+This is a danger box
+::
+
+::expansion-details
+There is some details
+::
+
+<u>Custom title:</u>
+
+```md
+::info
 ---
-height: 700
-dataUrls: 
-    - /avs/AVAST_I,AVAST_I__Avs1B,0,V-plddts_80.96481.pdb
+title: my title info
 ---
+This is an info box
 ::
 ```
 
+::info
+---
+title: my title info
+---
+This is an info box
+::
 
-### 3/ Review a Merge Request
+### 4/ Review a Merge Request
 
 You can review other person's merge request by going the [merge request's pages](https://gitlab.pasteur.fr/mdm-lab/wiki/-/merge_requests).
 
 On a given page, you can see what modifications where made for this merge request (1), then you can comment if you have anything to say (2 and 3).
-And finally, you can approve (4) the MR if you find it worth publishing on the website. 
+And finally, you can approve (4) the MR if you find it worth publishing on the website.
 
 ![review a MR](/help/Review_MR.png){max-width=750px}
 
@@ -152,7 +211,6 @@ If you want to modify further the file or other file within the same merge reque
 
 The Web IDE editor allows you to edit multiple file at once for a given commit. This editor is also accessible from the merge request's page under the "Code" button in the upper right corner of the page.
 
-
 ## Contribute to the code
 
-Contribution to the code and design are open. Please read the [README](https://gitlab.pasteur.fr/mdm-lab/wiki) on how to deploy the website locally (and see the modification you're doing live).
\ No newline at end of file
+Contribution to the code and design are open. Please read the [README](https://gitlab.pasteur.fr/mdm-lab/wiki) on how to deploy the website locally (and see the modification you're doing live).

content/3.defense-systems/detocs.md

@@ -16,6 +16,8 @@ contributors:
 
 # Detocs
 
+
+
 ## Description
 Detocs (**De**fensive **T**w**o**-**C**omponent **S**ystem) is a family of 3-gene defense systems that mediate anti-phage activity by abortive infection.
 

helpers/system-template.md

+<!-- The following block is th frontmatter that will be used to build the big table -->
+---
+title: <!--Replace this with Defense system name-->
+tableColumns:
+    article:
+      doi: <!--Replace this with the main article doi-->
+      abstract: 
+        <!--Replace this with the abstract of the main article-->
+    Sensor: <!--Fill sensor name here. If it's unknown : Leave it blank -->
+    Activator: <!--Fill activator name here. If it's unknown : Leave it blank -->
+    Effector: <!--Fill effector name here. If it's unknown : Leave it blank -->
+    PFAM: <!--PFXXXXX, PFYYYYY, PFZZZZZ-->
+relevantAbstracts:
+    - doi: 10.xxxx/toto.yyyy.zz 
+contributors:
+    - John Doe
+---
+
+<!--
+Markdown syntax in a nutshell, check other pages for example
+
+Use # for titles : # Main title ; ## Secondary title ; ### Tertiary title ; etc.
+Use * * for italic : *this text will be displayed in italic*
+Use ** ** for bold text : **this text will be displayed in bold**
+Use []() for links to external websites : ![This text will be displayed, if you click on it you will be directed to the website](https://url.of.the.website)
+Use ![alt text](/system/system.svg) to embed an image. The file of the image should be in a folder with the name of the system, located in /public 
+Use for references : "This is a great results :ref{doi=10.xxxx/toto.yyyy.zz}." it will write "This is a great result (Foo et al, 2023)."
+
+That's all folks!
+
+-->
+
+
+# Defense system name
+<!--Replace the main title with the name of the defense system
+
+Example : # CBASS
+-->
+
+## Description
+This paragraph contains a short description of the defense system. It should provide the essential information regarding the system at a glance.
+- How many proteins compose the defense system ? What are their name and what is their biological function ?
+- Optionally, you can quickly state in which model organism the system was tested and against which phages.
+Please don't forget to refer to the articles that you will cite at the end of the article.
+This should be precise but as synthetic as possible (rule of thumb : a dozen of lines maximum).
+
+Example :
+"RADAR is comprised of two genes, encoding respectively for an adenosine triphosphatase (RdrA) and  a divergent adenosine deaminase (RdrB) :ref{doi=10.xxxx/toto.yyyy.zz}. which are in some cases associated with a small membrane protein (RdrC or D) :ref{doi=10.xxxx/toto.yyyy.zz}.
+RADAR was found to perform RNA editing of adenosine to inosine during phage infection. Editing sites are broadly distributed on the host transcriptome, which could prove deleterious to the host and explain the observed growth arrest of RADAR upon phage infection."
+
+
+## Molecular mechanism
+If the mechanism of action of the defense system is known, please describe it in one short paragraph. If the exact mechanism is not known, simply state it and sum up the information available in the literature.
+This should be precise but as synthetic as possible (rule of thumb : a dozen of lines maximum).
+
+Example :
+The exact mechanism of action of the Shango defense system has not yet been characterized, but it was shown that the TerB domain and the catalytic activity of the ATPase and the Helicase are required to provide antiviral defense. The fact that TerB domains are known to be associated to the periplasmic membrane could indicate that Shango might be involved in membrane surveillance :ref{doi=10.xxxx/toto.yyyy.zz}.
+
+
+## Example of genomic structure
+<!--Automatically filled.
+You can optionally describe in more details which proteins compose the system if the Description paragraph did give all the information-->
+
+## Distribution of the system among prokaryotes
+<!--Automatically filled-->
+
+## Structure
+<!--Automatically filled-->
+
+## Experimental validation
+<!--Give more information about the experimental validation :
+- In which organism was it discovered ?
+- In which organism was it tested ?
+- Against which phages ?
+- In which paper was this described ?
+Or you can try to build the graph with mermaid (see help page or other page)
+-->

nuxt.config.ts

@@ -13,14 +13,10 @@ export default defineNuxtConfig({
       injectPage: false,
     },
     highlight: {
-      theme: {
-        // Default theme (same as single string)        
-        default: 'github-light',
-        // Theme used if `html.dark`        
-        dark: 'github-dark',
-        // Theme used if `html.sepia`        
-        sepia: 'monokai'
-      }
+      theme: 'github-light',
+      preload: [
+        'sh',
+      ]
     }
   },
   vuetify: {