VCode Components

Rendered Example

Component Props

• src If not using a GfyCat, the URL of the image. (https://www.website.com/images/image.jpg for remote images, /static/images/image.jpg for local images.
• align The justification of the image. (e.g., 'right' 'left' or 'center')
• width The width of the image, in pixels. (e.g., '300')
• height The height of the image, in pixels. (e.g. '200')
• artist The name of the artist the image is attributed to. (Optional)
• url The artist's website, if an artist is specified. (Optional)
• title The title of the artwork. (Optional)
• caption The caption for the image. (Optional)
• gfycat The gfycat identifier (three concatenated random words) if the image is a gfycat. (e.g., GreedyElatedElephant)
• top Used to remove the top margin if the image is at the very top of the document. (e.g., true)
• border Adds a border around the image if true.
• rounding Adds rounded corners to the image (e.g., 10px).

Example VCode

 [captioned-image
   src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Kittyply_edit1.jpg/800px-Kittyply_edit1.jpg"
   width="300"
   artist="Bob the Dog"
   url="https://www.bob.com"
   title="My Rival"
   align="left"
   top="true"
   caption="Bob the Dog's most despised enemy"
   border="true"
   rounding="10px" /] 

Rendered Example

Example VCode

 [youtube-embed src="uf_HSwd9ahA" /] 

Rendered Example

Example VCode

 [columns]
   [column]
     [ul]
       [li]List Item One[/li]
       [li]List Item Three[/li]
       [li]List Item Four[/li]
     [/ul]
   [/column]

   [column]
     [p]There is nothing like a few columns in your document to make you feel good about yourself.[/p]
   [/column]

   [column]
     [ul]
       [li]List Item One[/li]
       [li]List Item Three[/li]
       [li]List Item Four[/li]
     [/ul]
  [/column]
[/columns] 

Rendered Example

Component Props

• item Child Component - Takes prop 'name' and has an image component (see captioned image component for props)
• description Child Compoment - Paragraph content describing the comparison.

Example VCode

 [comparison]
   [item name="Frogs"]
     [image height="300" src="https://images.newscientist.com/wp-content/uploads/2020/09/22145012/big-frog-eyes.jpg?width=778" /]
   [/item]

   [item name="Explosions"]
     [image height="300" src="https://www.fire-magazine.com/media/36246/gettyimages-1265008200.jpg" /]
   [/item]

   [description]The difference between Frogs and Explosions are really just two letters. They are such similar letters that they really should be spelled the same way (there have been spelling variations in different languages that spell them the same way). However, since everyone talks about how frogs bounce, most people want to know if they actually explode when thrown. So let’s look at exploding frogs.[/description]
[/comparison] 

Rendered Example

Component Props

• title Title of the panel.
• icon Filename of the icon. (e.g. eye.svg) Icon files are stored in the project directory under /static/icons/.
• width Width of the panel (optional)

Example VCode

 [panel title="The Seasons" icon="eye.svg"]
   [ul]
   [li]Season 1[/li]
   [li]Season 2[/li]
   [li]Season 3[/li]
   [li]Season 4[/li]
   [/ul]
 [/panel] 

Rendered Example

Level 69

A Superior Example

- Of a headered textbox

When black dogs do psychedelic drugs, what was the research behind this one? "I used MDMA as a way to change something around in my life. It was something that I didn't know what I was doing, but it made everything feel a lot better." One of the experiments found that white dogs could be significantly more excited by a small amount of psychedelics than black dogs.

Component Props

• id Id of the headered textbox, as defined in the editor. Used for linking in the Table of Contents
• label The text that appears as the label in the top left of the textbox. If none is specified, there will be no label.
• labelBackground The background colour (default is grey) of the label, in hex. (e.g., #E8D291 Optional)
• headerBackground The background colour of the header, in hex. (Optional)
• header The header/title of the textbox. (Optional)
• subHeader A subtitle for the textbox.
• icon Filename of the icon. (e.g. eye.svg) Icon files are stored in the project directory under /static/icons/.
• imageSrc URL for an image to be displayed alongside the content of the textbox.
• imageAlign See CaptionedImage component for more details on these props.
• imageWidth See CaptionedImage component for more details on these props.
• imageHeight See CaptionedImage component for more details on these props.
• imageArtist See CaptionedImage component for more details on these props.
• imageUrl See CaptionedImage component for more details on these props.
• imageTitle See CaptionedImage component for more details on these props.
• imageCaption See CaptionedImage component for more details on these props.
• imageGfycat See CaptionedImage component for more details on these props.

Example VCode

 [headered-textbox
   id="level-69"
   label="Level 69"
   header="A Superior Example"
   subHeader="Of a headered textbox"
   icon="sun.svg"
   imageSrc="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2020/10/13142931/Close-up-of-a-Rottweiler-laying-down-outdoors.jpeg"
   imageWidth="300"
   imageAlign="left"
 ] When black dogs do psychedelic drugs, what was the research behind this one? "I used MDMA as a way to change something around in my life. It was something that I didn't know what I was doing, but it made everything feel a lot better." One of the experiments found that white dogs could be significantly more excited by a small amount of psychedelics than black dogs. [/headered-textbox] 

Rendered Example

Example VCode

 [ol]
   [li]Item One[/li]
   [li]Item Two[/li]
   [li]Item Three[/li]
 [/ol] 

Rendered Example

Component Props

• listStyle The style of the bullet. (circle, square, dash, none)

Example VCode

 [ul listStyle="dash"]
   [li]Item One[/li]
   [li]Item Two[/li]
   [li]Item Three[/li]
 [/ul] 

Rendered Example

The reason I created the Subjective Effect Index was to present the subfactors of a complex situation in a more comprehensible and easily digested form, allowing people to assess, through feelings, that certain conditions and situations do or do not represent an "effect" on themselves.

I use the S.E.I. to assess a person's current mental and emotional state.

The Vividness and Stereotype Follow Through components of the S.E.I. are not in themselves a psychological diagnosis.

Yet I have concluded that subjective factors may well play a prominent role.

- Josie Kins

Component Props

• author The name of the author (e.g., Josie Kins)
• profile The profile name you wish to link to (e.g., Josie)

Example VCode

 [quote author="Josie Kins" profile="Josie"]
   [p]The reason I created the Subjective Effect Index was to present the subfactors of a complex situation in a more comprehensible and easily digested form, allowing people to assess, through feelings, that certain conditions and situations do or do not represent an "effect" on themselves.[/p]
   [p]I use the S.E.I. to assess a person's current mental and emotional state.[/p]
   [p]The Vividness and Stereotype Follow Through components of the S.E.I. are not in themselves a psychological diagnosis.[/p]
   [p]Yet I have concluded that subjective factors may well play a prominent role.[/p]
[/quote] 

Rendered Example

Component Props

• to The citation index number (found in the editor) the reference is refering to.
• no The instance number for the particular reference. i.e., if this was the 3rd reference to a citation, it would be '3'. (Optional)

Example VCode

 [p]It has been proven that when students leave school and have a bar of soap in their pocket, they have a much better chance of success. [ref to="3" no="2" /][/p] 

Rendered Example

Example VCode

 [i]Something emphasized[/i] 

Rendered Example

Example VCode

 [b]Something emphasized[/b] 

Rendered Example

Example VCode

 [u]Something emphasized[/u] 

Rendered Example

Example VCode

 [panel]
   [h1]Header One[/h1]
   [h2]Header Two[/h2]
   [h3]Header Three[/h3]
   [h4]Header Four[/h4]
 [/panel] 

Rendered Example

Example VCode

 [p]A dog's eye cannot be seen while it is staring at you, but once it [br /] turns its head it becomes frighteningly apparent how much [br /] they are studying your movements.[/p] 

Rendered Example

Example VCode

 [p]The people above are from Boston. [hr /] The people below are from a homestay here in Mebuluk and were just a delight to meet.[/p]  

Rendered Example

Component Props

• to Absolute path or relative website path. If the leading '/' is omitted, the link will be relative from the current directory.

Example VCode

 It is best not to speak directly to [int-link to="/effects/autonomous-entities"]autonomous entities[/int-link], rather, send a letter. 

Rendered Example

Component Props

• To URL of the external website.

Example VCode

 This website has a pretty neat [ext-link to="https://www.youtube.com/c/Josikinz"]YouTube channel[/ext-link]. 

Rendered Example

Component Props

• closed Text to display when closed
• opened Text to display when opened

Example VCode

 [details closed="More" opened="Less"]
   As they rounded a bend in the path that ran beside the river, Lara recognized the silhouette of a fig tree atop a nearby hill. The weather was hot and the days were long. The fig tree was in full leaf, but not yet bearing fruit. Soon Lara spotted other landmarks—an outcropping of limestone beside the path that had a silhouette like a man’s face, a marshy spot beside the river where the waterfowl were easily startled, a tall tree that looked like a man with his arms upraised. They were drawing near to the place where there was an island in the river. The island was a good spot to make camp. They would sleep on the island tonight. Lara had been back and forth along the river path many times in her short life. Her people had not created the path—it had always been there, like the river—but their deerskin-shod feet and the wooden wheels of their handcarts kept the path well worn. Lara’s people were salt traders, and their livelihood took them on a continual journey.
[/details] 

Rendered Example

Component Props

• src Absolute or relative location of the audio file to play.
• artist Artist who created the audio.
• Title Title of the work.

Example VCode

 [audio src="/audio/distorted%20forests.mp3" artist="Edgar" title="Distorted Forest" /] 

Rendered Example

Component Props

• id Id of the subarticle, as defined in the editor.

Example VCode

 [subarticle id="audio-distortions"] Audio Distortions [/subarticle] 

Rendered Example

Component Props

• float Whether to float the table of contents in the document. (e.g., 'right' or 'left')
• top Removes the top margin of the TOC. Useful when the TOC is placed at the top of the document.

Example VCode

 [toc /] (This is only functional on an effect or article) 

Rendered Example

Example VCode

 I'm way down here. [sup] I'm way up here! [/sup]