The Wiki Camp 2 - User contributions [en]

Tutorial/Graphs

2023-04-09T05:55:42Z

Raul:

{{#css:
.mw-content-ltr .mw-collapsible-toggle{float:none;}
}}

Graphs are these crazy little things that can create javascript canvas, which makes them much more powerful than HTML or CSS or modules.

==Introduction==
Graphs are created using JSON text inside of a <code><nowiki><graph></nowiki></code> tag, using the [https://github.com/nyurik/vega/wiki/ Vega 2.0] data visualization language.

==Overview==
There are three types of properties that are most important for making a graph.

'''Marks''' are objects drawn on the graph.

'''Signals''' take user input to make the graph interactive.

'''Data''' can be used to store information, [[okin|akin]] to variables.

Expand the text for a more detailed overview.
<div class="mw-collapsible mw-collapsed">
'''Marks'''
*'''Properties''' - to draw marks, they must be given properties such as color, position, etc. When specifying a property, you should say whether it will be given to the object when it's first drawn (''enter''), recalculated every time it's drawn (''update''), when the mark is hovered over (''hover''), or when the mark is removed (''exit'').
'''Signals'''
*'''Streams''' - short for "event streams" pick up input like mouse clicks, keyboard presses, etc.
*'''Expressions''' - the value of the signal is set by an expression. Expressions use
'''Data'''
*'''Data Transform''' - data can be altered by applying different transforms to it, like filtering out certain values, sorting data, performing math on the data, etc.
*'''Streaming Data''' - data can also be '''modified''' by inserting and removing data points, or toggling whether they are including in a data set. The modified points are determined by a signal.
</div>
==Example: Rectangle==
<div class="mw-collapsible mw-collapsed">
Let's draw a rectangle. Here is the starting point.
<syntaxhighlight>
<graph>
{
"width":200,
"height":200
}
</graph>
</syntaxhighlight>

Every graph is contained between the <nowiki><graph></nowiki> and <nowiki></graph></nowiki> tags. Then comes the JSON object which will contain all the data in our graph. JSON objects are wrapped in {} braces and contain a list of key-value pairs like this <syntaxhighlight>"key":"value"</syntaxhighlight> In this case, the first key is "width" and its value is 200. In general, a key is a string, and the value can be a string, a number, an array, or another JSON object. A list of keys/values are separated by commas, and the last doesn't have a comma.

The height and width here determine the size of the graph.

<syntaxhighlight>
<graph>
{
"width":200,
"height":200,
"marks":[
{

}
]
}
</graph>
</syntaxhighlight>

Now we add a key "'''marks'''" with an array value. Each entry of the array will be an object providing instructions on how to draw something to the screen. Also remember to add the comma to the "height" line now, since it's no longer the end of the list!
<syntaxhighlight>
<graph>
{
"width":200,
"height":200,
"marks":[
{
"name":"square",
"type":"rect"
}
]
}
</graph>
</syntaxhighlight>

These are more key/value pairs, inside the first object of the marks array. We set the name of the object to "square," and declare that it should be a rectangle. Other types of mark include symbols, paths, arcs, areas, lines, rules, text, and groups. Now we need to describe how to draw the rectangle, using a number of "properties."
<syntaxhighlight>
<graph>
{
"width":200,
"height":200,
"marks":[
{
"name":"square",
"type":"rect",
"properties":{
"enter":{

},
"update":{

}
}
}
]
}
</graph>
</syntaxhighlight>
Since graphs are interactive, we need to say immediately whether a property of the rectangle will change and have to be updated. These will go in the "update" section. Others can go in "enter," and get looked at when the rectangle is first drawn, but not ever again.
<syntaxhighlight>
<graph>
{
"width":200,
"height":200,
"marks":[
{
"name":"square",
"type":"rect",
"properties":{
"enter":{
"width":{"value":50}
},
"update":{

}
}
}
]
}
</graph>
</syntaxhighlight>
First we'd like to set the width of the rectangle. This is done with the key "width" and a value which is another object. This object is called a value reference and has a key named "value" with the value 50. If you simply set "width":50 then the rectangle won't render. You need the value reference.
<syntaxhighlight>
<graph>
{
"width":200,
"height":200,
"marks":[
{
"name":"square",
"type":"rect",
"properties":{
"enter":{
"width":{"value":50},
"height":{"value":50},
"x":{"value":20},
"y":{"value":30}
},
"update":{

}
}
}
]
}
</graph>
</syntaxhighlight>
Now we set the height and the x-/y-position of the rectangle. Remember that the x- and y- coordinates start counting from the top left corner, unlike regular Cartesian coordinates. The x-value increases going to the right, but the y-value increases going down.
<syntaxhighlight>
<graph>
{
"width":200,
"height":200,
"marks":[
{
"name":"square",
"type":"rect",
"properties":{
"enter":{
"width":{"value":50},
"height":{"value":50},
"x":{"value":20},
"y":{"value":30}
},
"update":{
"fill":{"value":"steelblue"}
}
}
}
]
}
</graph>
</syntaxhighlight>
The last step is to set the fill color of the rectangle. Check out your graph! If it's not showing up, double check for missing/extra commas, and square brackets that should be braces (or vice versa).
<graph>
{
"width":200,
"height":200,
"marks":[
{
"name":"square",
"type":"rect",
"properties":{
"enter":{
"width":{"value":50},
"height":{"value":50},
"x":{"value":20},
"y":{"value":30}
},
"update":{
"fill":{"value":"steelblue"}
}
}
}
]
}
</graph>
</div>
==Example: Clicking==
<div class="mw-collapsible mw-collapsed">
To add interactivity to our graph, we're going to introduce '''signals'''. A signal is a variable that responds to user input. If another value is set equal to a signal, then it updates whenever the signal updates. We're going to set the fill color of our rectangle equal to a signal so that when we click, it turns red.
<syntaxhighlight>
<graph>
{
"width":200,
"height":200,
"signals":[
{

}
]
}
</graph>
</syntaxhighlight>
It starts out the same way, but instead of marks we're going to define an array of signals.
<syntaxhighlight>
<graph>
{
"width":200,
"height":200,
"signals":[
{
"name":"clicked",
"streams":[
{

}
]
}
]
}
</graph>
</syntaxhighlight>
We'll give the signal a name, and then create a '''streams''' array. Streams are what will allow us to capture the mouse clicking. Each object in the array will need to have a "type" which describes what input to record, and an "expr" expression to determine what its updated value should be.
<syntaxhighlight>
<graph>
{
"width":200,
"height":200,
"signals":[
{
"name":"clicked",
"streams":[
{
"type":"window:mousedown"
}
]
}
]
}
</graph>
</syntaxhighlight>
The type is given in two parts: the first describes which object will watch for events, and the second describes what events to watch out for. "window:mousedown" records any time the mouse is pressed down anywhere on the page (window). Besides mousedown, there are other events for keyboard presses, mouse dragging, scrolling, double clicking, as well touch screen events for mobile devices. Besides window, other objects could be all marks of a certain type e.g. "rect:mousedown" or a mark with a specific name e.g. "@square:mousedown" (the @ is required for names). It could even be a CSS selector for an element on the page, e.g. "#header:mousedown" for an HTML element with id "header." If the first half is omitted entirely, then it tracks events anywhere in the graph window e.g. "mousedown."
<syntaxhighlight>
<graph>
{
"width":200,
"height":200,
"signals":[
{
"name":"clicked",
"streams":[
{
"type":"window:mousedown",
"expr":"\"red\""
}
]
}
]
}
</graph>
</syntaxhighlight>
If the mouse is pressed down, the "clicked" signal is set equal to \"red.\"

Since the expression is wrapped in quotes, and we want the value to be "red" (a string), then we need to escape the inner quotes. This can also be done with single quotes, i.e. "expr":"'red'"
<syntaxhighlight>
<graph>
{
"width":200,
"height":200,
"signals":[
{
"name":"clicked",
"streams":[
{
"type":"window:mousedown",
"expr":"\"red\""
},
{
"type":"window:mouseup",
"expr":"\"steelblue\""
}
]
}
]
}
</graph>
</syntaxhighlight>
We'll add another object to our set of streams. This one will watch for any time the mouse is released anywhere on the website, and it sets "clicked" equal to "steelblue."
<syntaxhighlight>
<graph>
{
"width":200,
"height":200,
"signals":[
{
"name":"clicked",
"streams":[
{
"type":"window:mousedown",
"expr":"\"red\""
},
{
"type":"window:mouseup",
"expr":"\"steelblue\""
}
]
}
],
"marks":[
{
"name":"square",
"type":"rect",
"properties":{
"enter":{
"width":{"value":50},
"height":{"value":50},
"x":{"value":20},
"y":{"value":30}
},
"update":{
"fill":{"value":"steelblue"}
}
}
}
]
}
</graph>
</syntaxhighlight>
Now we add back our rectangle.
<syntaxhighlight>
<graph>
{
"width":200,
"height":200,
"signals":[
{
"name":"clicked",
"streams":[
{
"type":"window:mousedown",
"expr":"\"red\""
},
{
"type":"window:mouseup",
"expr":"\"steelblue\""
}
]
}
],
"marks":[
{
"name":"square",
"type":"rect",
"properties":{
"enter":{
"width":{"value":50},
"height":{"value":50},
"x":{"value":20},
"y":{"value":30}
},
"update":{
"fill":{"signal":"clicked"}
}
}
}
]
}
</graph>
</syntaxhighlight>
Now we set the value of our rectangle's "fill" to be the "clicked" signal. Whenever a mouse is pressed or released on the window, "clicked" will update, and so will the color of the rectangle. The {"signal":"name"} object is another kind of value reference.

However, we still have a problem. When the program is first run, the signal "clicked" isn't set to anything. It only updates when the status of the mouse updates, and it has no idea whether the mouse is up or down when the graph starts.
<syntaxhighlight>
<graph>
{
"width":200,
"height":200,
"signals":[
{
"name":"clicked",
"init":"steelblue",
"streams":[
{
"type":"window:mousedown",
"expr":"\"red\""
},
{
"type":"window:mouseup",
"expr":"\"steelblue\""
}
]
}
],
"marks":[
{
"name":"square",
"type":"rect",
"properties":{
"enter":{
"width":{"value":50},
"height":{"value":50},
"x":{"value":20},
"y":{"value":30}
},
"update":{
"fill":{"signal":"clicked"}
}
}
}
]
}
</graph>
</syntaxhighlight>

The last step is to create an "init" property of the stream, which sets signal initially. The value isn't an expression, so it doesn't need to have escaped quotes.

<graph>
{
"width":200,
"height":200,
"signals":[
{
"name":"clicked",
"init":"steelblue",
"streams":[
{
"type":"window:mousedown",
"expr":"\"red\""
},
{
"type":"window:mouseup",
"expr":"\"steelblue\""
}
]
}
],
"marks":[
{
"name":"square",
"type":"rect",
"properties":{
"enter":{
"width":{"value":50},
"height":{"value":50},
"x":{"value":20},
"y":{"value":30}
},
"update":{
"fill":{"signal":"clicked"}
}
}
}
]
}
</graph>
</div>
==Example 3: Data==
<div class="mw-collapsible mw-collapsed">
Let's add some data...

<syntaxhighlight>
<graph>
{
"width":200,
"height":200,
"data":[
{

}
]
}
</graph>
</syntaxhighlight>

Data is another one of these [https://github.com/vega/vega2-docs/wiki/Visualization top-level properties] which is an array of objects.

<syntaxhighlight>
<graph>
{
"width":200,
"height":200,
"data":[
{
"name":"table",
"values":[5, 10, 15, 25, 50]
}
]
}
</graph>
</syntaxhighlight>

We can give the data a name, as well as some values. Here's another way to provide values.

<syntaxhighlight>
<graph>
{
"width":200,
"height":200,
"data":[
{
"name":"table",
"values":[{"hi":5},{"hi":"word"},{"hi":10}]
}
]
}
</graph>
</syntaxhighlight>

This makes a list of 3 data points (each one can also be called a datum, a row, or a record). They are each an object, and each has a key called "hi." This is called the field, or column. The value of that key could be a number, string, or another data set. All data in Vega comes as a list of objects (rows), and each row has a key/value pair for every field (column). When we created the data list before from just numbers, the program automatically assigned these numbers to a field named "data"

<syntaxhighlight>
<graph>
{
"width":200,
"height":200,
"data":[
{
"name":"table",
"values":[
{"hi":5, "lala":1},
{"hi":"word", "lala":5},
{"hi":{"bye":4, "bye":3, "bye":"word"}, "lala":8}
]
}
]
}
</graph>
</syntaxhighlight>

Here's another example of a data set. This time, each data point has two fields: "hi" and "lala." The value of "hi" in the last row is another data set with 3 rows and a field called "bye." Also note that Vega randomly assigns each data point an ID, in a field called "_id" which is automatically generated and different each time the program runs.

<syntaxhighlight>
<graph>
{
"width":200,
"height":200,
"data":[
{
"name":"table",
"values":[
{"x":5, "y":5, "message":"we"},
{"x":25, "y":30, "message":"seals"},
{"x":50, "y":90, "message":"three"}
],
"transform":[

]
}
]
}
</graph>
</syntaxhighlight>

Here's the data we'll actually be using. It has three fields called "x," "y," and "message."

We also create an array of '''data transforms'''. These describe operations that can be performed on data.

<syntaxhighlight>
<graph>
{
"width":200,
"height":200,
"data":[
{
"name":"table",
"values":[
{"x":5, "y":5, "message":"we"},
{"x":25, "y":30, "message":"seals"},
{"x":50, "y":90, "message":"three"}
],
"transform":[
{
"type":"formula",
"field":"x",
"expr":"datum.x + 5"
}
]
}
]
}
</graph>
</syntaxhighlight>

There are many [https://github.com/vega/vega2-docs/wiki/Data-Transforms types] of data transforms. The most useful is probably formula, which will allow us to use expressions to change data. Other useful transforms include filter, which removes any data that doesn't satisfy a test condition, and lookup, which imports data points from another data set based on matching data.

Here, the ''type'' of data transform is formula, and it will update the values of the ''field'' "x." The ''expression'' will return the datum's "x" field added to 5. The object "datum" stores the key/value pairs for each field in the current data point. For example, if we kept the ''type'' and ''field'' the same, but changed the ''expr'' to "datum.message + ' hello'" then the data would look like this after the transform:
<syntaxhighlight>
{"x":"we hello", "y":5, "message":"we"},
{"x":"seals hello", "y":30, "message":"seals"},
{"x":"three hello", "y":90, "message":"three"}
</syntaxhighlight>
Expressions also have access to the names of signals. To see this, let's add back our signal from the last example.

<syntaxhighlight>
<graph>
{
"width":200,
"height":200,
"signals":[
{
"name":"clicked",
"init":"steelblue",
"streams":[
{
"type":"window:mousedown",
"expr":"\"red\""
},
{
"type":"window:mouseup",
"expr":"\"steelblue\""
}
]
}
],
"data":[
{
"name":"table",
"values":[
{"x":5, "y":5, "message":"we"},
{"x":25, "y":30, "message":"seals"},
{"x":50, "y":90, "message":"three"}
],
"transform":[
{
"type":"formula",
"field":"x",
"expr":"datum.x + 5"
}
]
}
]
}
</graph>
</syntaxhighlight>
Now we're going to create another formula transform.
<syntaxhighlight>
<graph>
{
"width":200,
"height":200,
"signals":[
{
"name":"clicked",
"init":"steelblue",
"streams":[
{
"type":"window:mousedown",
"expr":"\"red\""
},
{
"type":"window:mouseup",
"expr":"\"steelblue\""
}
]
}
],
"data":[
{
"name":"table",
"values":[
{"x":5, "y":5, "message":"we"},
{"x":25, "y":30, "message":"seals"},
{"x":50, "y":90, "message":"three"}
],
"transform":[
{
"type":"formula",
"field":"x",
"expr":"datum.x + 5"
},
{
"type":"formula",
"field:"color",
"expr":"clicked"
}
]
}
]
}
</graph>
</syntaxhighlight>
This formula creates a new field called "color" and for each data point sets it to the value of the signal "clicked." Every time "clicked" updates, this formula will be recalculated.

<syntaxhighlight>
<graph>
{
"width":200,
"height":200,
"signals":[
{
"name":"clicked",
"init":"steelblue",
"streams":[
{
"type":"window:mousedown",
"expr":"\"red\""
},
{
"type":"window:mouseup",
"expr":"\"steelblue\""
}
]
}
],
"data":[
{
"name":"table",
"values":[
{"x":5, "y":5, "message":"we"},
{"x":25, "y":30, "message":"seals"},
{"x":50, "y":90, "message":"three"}
],
"transform":[
{
"type":"formula",
"field":"x",
"expr":"datum.x + 5"
}
]
}
]
}
</graph>
</syntaxhighlight>
Now we're going to create another formula transform.
<syntaxhighlight>
<graph>
{
"width":200,
"height":200,
"signals":[
{
"name":"clicked",
"init":"steelblue",
"streams":[
{
"type":"window:mousedown",
"expr":"\"red\""
},
{
"type":"window:mouseup",
"expr":"\"steelblue\""
}
]
}
],
"data":[
{
"name":"table",
"values":[
{"x":5, "y":5, "message":"we"},
{"x":25, "y":30, "message":"seals"},
{"x":50, "y":90, "message":"three"}
],
"transform":[
{
"type":"formula",
"field":"x",
"expr":"datum.x + 5"
},
{
"type":"formula",
"field":"color",
"expr":"clicked"
}
]
}
],
"marks":[
{
"name":"messages",
"type":"text"
}
]
}
</graph>
</syntaxhighlight>
We're going to create a new kind of mark this time, for displaying text. The text will be drawn using data from our data set, so we need to tell it where our data is.
<syntaxhighlight>
<graph>
{
"width":200,
"height":200,
"signals":[
{
"name":"clicked",
"init":"steelblue",
"streams":[
{
"type":"window:mousedown",
"expr":"\"red\""
},
{
"type":"window:mouseup",
"expr":"\"steelblue\""
}
]
}
],
"data":[
{
"name":"table",
"values":[
{"x":5, "y":5, "message":"we"},
{"x":25, "y":30, "message":"seals"},
{"x":50, "y":90, "message":"three"}
],
"transform":[
{
"type":"formula",
"field":"x",
"expr":"datum.x + 5"
},
{
"type":"formula",
"field":"color",
"expr":"clicked"
}
]
}
],
"marks":[
{
"name":"messages",
"type":"text",
"from":{"data":"table"}
}
]
}
</graph>
</syntaxhighlight>

The "from" property is used to do this, and its value is a reference to our data named "table."
<syntaxhighlight>
<graph>
{
"width":200,
"height":200,
"signals":[
{
"name":"clicked",
"init":"steelblue",
"streams":[
{
"type":"window:mousedown",
"expr":"\"red\""
},
{
"type":"window:mouseup",
"expr":"\"steelblue\""
}
]
}
],
"data":[
{
"name":"table",
"values":[
{"x":5, "y":5, "message":"we"},
{"x":25, "y":30, "message":"seals"},
{"x":50, "y":90, "message":"three"}
],
"transform":[
{
"type":"formula",
"field":"x",
"expr":"datum.x + 5"
},
{
"type":"formula",
"field":"color",
"expr":"clicked"
}
]
}
],
"marks":[
{
"name":"messages",
"type":"text",
"from":{"data":"table"},
"properties":{
"enter":{
"x":{"field":"x"}
},
"update":{

}
}
}
]
}
</graph>
</syntaxhighlight>
We start filling in the properties for each text object. Instead of specifying an x-value using a direct value like {"value":5}, we use a different kind of value reference. {"field":"x"} tells the program to use the "x" field in the "table" data set we gave earlier. A new "text" mark will be created for every row in the "table" data set, and its "x" value will be the "x" value of the corresponding row.
<syntaxhighlight>
<graph>
{
"width":200,
"height":200,
"signals":[
{
"name":"clicked",
"init":"steelblue",
"streams":[
{
"type":"window:mousedown",
"expr":"\"red\""
},
{
"type":"window:mouseup",
"expr":"\"steelblue\""
}
]
}
],
"data":[
{
"name":"table",
"values":[
{"x":5, "y":5, "message":"we"},
{"x":25, "y":30, "message":"seals"},
{"x":50, "y":90, "message":"three"}
],
"transform":[
{
"type":"formula",
"field":"x",
"expr":"datum.x + 5"
},
{
"type":"formula",
"field":"color",
"expr":"clicked"
}
]
}
],
"marks":[
{
"name":"messages",
"type":"text",
"from":{"data":"table"},
"properties":{
"enter":{
"x":{"field":"x"},
"y":{"field":"y"},
"text":{"field":"message"}
},
"update":{
"fill":{"field":"color"}
}
}
}
]
}
</graph>
</syntaxhighlight>
We fill in the other properties for our text. The "text" property determines what the text will say. Note that "height" and "width" aren't required, since they're determined by the text. The "fill" property is placed in the "update" section, since the "clicked" signal will change the value of the "color" field.
<graph>
{
"width":200,
"height":200,
"signals":[
{
"name":"clicked",
"init":"steelblue",
"streams":[
{
"type":"window:mousedown",
"expr":"\"red\""
},
{
"type":"window:mouseup",
"expr":"\"steelblue\""
}
]
}
],
"data":[
{
"name":"table",
"values":[
{"x":5, "y":5, "message":"we"},
{"x":25, "y":30, "message":"seals"},
{"x":50, "y":90, "message":"three"}
],
"transform":[
{
"type":"formula",
"field":"x",
"expr":"datum.x + 5"
},
{
"type":"formula",
"field":"color",
"expr":"clicked"
}
]
}
],
"marks":[
{
"name":"messages",
"type":"text",
"from":{"data":"table"},
"properties":{
"enter":{
"x":{"field":"x"},
"y":{"field":"y"},
"text":{"field":"message"}
},
"update":{
"fill":{"field":"color"}
}
}
}
]
}
</graph>

</div>
==Animations==
When making games with graphs, it'd be nice to have the graph update graphics even when no user input is being given. For example, if we were making Snake, we'd want the snake to continue heading straight when no keys are being pressed. The problem is that, as far as I can tell, Vega only updates the graph when a signal updates. In the current version of Vega (version 5) this isn't a problem, because it has a timer signal, but this doesn't exist in Vega 2.0 (what the wiki graph extension uses). Here are some attempts to get animations to work.

===STRATEGY 1 - MOUSEOVER===
One of the events you can use in [https://github.com/vega/vega2-docs/wiki/Signals#event-stream-values streams] is called "mouseover" and activates when the mouse first moves on top of an element (the page, the graph, a symbol, etc.) The opposite of "mouseover" is "mouseout," when the mouse leaves the element.

One idea is to have a symbol record mouseover and mouseout events. Then, shrink or move the symbol when mouseover happens so that the mouse isn't over it anymore, and undo the change on mouseout. This would cause the mouse to alternate being on/off the symbol every frame, producing a signal that updates every frame. This signal could then be used as a clock to update every other part of the graph game.

The problem is that even if the mouse changes its status of being on/off the element, "mouseover" and "mouseout" events only happen when the mouse actually moves. If the mouse is stationary neither gets triggered.

===STRATEGY 2 - SIGNAL LOOP===
[https://github.com/vega/vega2-docs/wiki/Signals#expression-values Remember] that a signal is set by an expression, and that expressions can use signals in their evaluation. What if there was a signal evaluated itself in order to set its own value? Or if two signals alternately set the value of the other? This would again produce a signal clock which could be used in expressions elsewhere in the program.

'''Warning. The following code will cause an infinite loop.''' You can try with the [http://vega.github.io/vega-editor/?mode=vega Vega editor] in a private browsing window and the tab will freeze. See [https://camp2.rectangle.zone/index.php?title=Graph/Guide#troubleshooting troubleshooting] for more info.

<syntaxhighlight>
{
"signals":[
{
"name":"clock",
"expr":"clock ? false : true"
}
}
</syntaxhighlight>

Signals can be set by an expression even with no "streams" array. A stream defined this way won't update unless there's a signal in the expression definition. Here, the expression uses the value of the signal itself. The expression takes the form of a [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator ternary operator]. In a ternary operator, the part before the question mark is tested to see if it's [[ture]] or [[flase]]. If it's true, the value of "clock" is set to the part after the question mark but before the colon. If it's false, then the value of "clock" is set to the part after the colon.

So, the clock signal starts out with no value. [https://developer.mozilla.org/en-US/docs/Glossary/Falsy Javascript evaluates this as "false"], and sets "clock" equal to the part after the colon, which is "true." Since the "clock" signal just updated, any expression using that signal is run again, including the definition of "clock." This time, "clock" is false , so it's set equal to the part before the colon, "false." It loops forever, like that [[paradox]] about "this sentence is false." If we had other code in the graph, it would never be run.

'''Warning: infinite loop.'''
<syntaxhighlight>
{
"signals":[
{
"name":"clock1",
"expr":"clock2 ? false : true"
},
{
"name":"clock2"
"expr":"clock1"
}
}
</syntaxhighlight>
Here's another attempt at the same thing. The thinking is that using two signals relying on each other would avoid the infinite loop problem. For example, "clock1" might run first and be set to "true," since "clock2" isn't defined. Then "clock2" would be set to "true." Then the program might continue to run the rest of the graph code, and when it comes to "clock1" on the next pass, it gets set to "false." And so on...

This is not what happens. There is no "next pass," since graph code will only run once unless a signal updates. In our example, when "clock2" is set to "true," it immediately updates all expressions containing "clock2." This means it goes back to the "clock1" definition and updates "clock1." Which updates "clock2" which updates "clock1" which updates...

Here's a fact about signals. If after an update they have the same value as before, then they don't cause expressions that use them to reevaluate (if you want them to anyway, you can add "verbose":"true" to the signal definition). Can this be used to make a clock? I can't think of a way myself, mostly because of the following problem.

<syntaxhighlight>
{
"signals":[
{
"name":"clock1",
"expr":"clock2 ? false : true"
},
{
"name":"clock2"
"expr":"clock1 ? false : true"
}
}
</syntaxhighlight>

This code runs fine! The values update like this:
<syntaxhighlight>
clock1: null -> true
clock2: null -> false
clock1: true -> true
</syntaxhighlight>
In the last step, clock1 doesn't change its value, so it doesn't update clock2. So, there aren't any infinite loops. However, this means the graph only makes one pass through the code. After the clock signals settle on their values, they never update again and so the rest of the program never updates, either.

===STRATEGY 3: DATA LOOP===
Expressions are able to use a number of functions. [https://github.com/vega/vega2-docs/wiki/Expressions#functions Here's a list]. These even include time functions! For example, now() returns the unix timestamp up to milliseconds. This is so frustrating, because they will only run once on each update, so I don't know how to make use of them. The function I want to focus on is indata(), which searches to see if a value is in a data table. For example, indata("table",5,"numbers") will search the data set "table" for the value 5 in the "numbers" field. If it finds a match, it returns true.

Now [https://github.com/vega/vega2-docs/wiki/Expressions#functions recall] that some data transforms are able to use expressions to modify data ("formula," for example). The idea for this strategy is to make another clock. One half is a signal, which will update a data set. The other half is the data set, which will update the signal.
<syntaxhighlight>
{
"signals":[
{
"name":"clock",
"init":0,
"expr":"indata('table',0,'data') ? 1 : 0"
}
],
"data":[
{
"name":"table",
"values":[1],
"transform":[
{
"type":"formula",
"field":"data",
"expr":"clock"
}
]
}
]
}
</syntaxhighlight>

We start with a "clock" signal equal to 0, and a "table" data set with a single value 1 in the field "data" (set automatically by Vega). The idea is that when the formula transform runs, the single data value will be set to "clock," which is 0. Then the signal will check whether there's a 0 in the table, which there is now. So "clock" gets set to the 1 part of the ternary operator. Then the data value gets set to "clock," which is 1 this time. It'll be another clock loop. Maybe if we use the "data" section this time, the "marks" code will be able to run before the "signal" is updated, and we'll get a loop that doesn't freeze everything.

Well it turns out that a data table doesn't behave like a signal, because it doesn't update every expression that calls "indata()" on it. So this code only runs once. "clock" gets set to 0 and the data value gets set to "clock," and then that's it.

If reference another signal in the definition of the "clock" signal, we could get "clock" to run again on the updated table. But this presents the same problem as in the previous section, with the signal loops. If we use "clock" in its own definition, then "clock" will recurse on itself forever, and if we use a new signal, then either both loop each other forever, or they both run only once.

===STRATEGY 4: FORCE TRANSFORM===

Have you gone through the example graphs in the Vega editor? One of them is called [http://vega.github.io/vega-editor/?mode=vega&spec=force_drag force_drag] and shows an interactive web of nodes. When you click on a node, you can drag it and the rest of the web will react in a realistic way. When you release the node, it will settle back into place. The graph will continue to animate it settling even when you're not interacting with any of the nodes or otherwise giving it input.

This effect is possible with the use of a data transform called [https://github.com/vega/vega2-docs/wiki/Data-Transforms#-force "force"], which takes two data sets: a set of nodes and a set of edges. It runs a physics simulation and outputs two extra fields onto the nodes set, which are the x- and y-positions of each node. These can be used to draw corresponding marks onto the graph. If the setting "interactive":"true" is set on the data transform, then Vega will continue to update the x- and y-positions every frame. So far, this is the only example I know of in Vega 2.0 where things will update without a signal changing.

In non-interactive mode, the graph will run the simulation for a certain number of iterations, set by the user. Only after it's finished will it run the rest of the graph code. In interactive mode, the simulation and the graphics run at the same time, however it has a maximum amount of time it will spend running the simulation, which cannot be changed. I think it's around a second.

The transform also takes an "active" property. This selects a node in the data set whose position can be adjusted, which will optionally reset the simulation timer.

How can we use this information to create a clock that lasts forever? I don't know, really. Here are some strange things I've noticed, though.

*If I put a formula transform after the force transform that sets all the layout_x coordinates to 0, it doesn't do anything
*It's possible to define data transforms in the marks section by describing them in the "from" property. I had a symbol in marks to draw the nodes, and it updated its position every frame to match the nodes data set. I applied a transform that halved every layout_x value, and it worked, but only on the first frame. The symbols were fixed in their first positions, only with half x-coordinates, while all the other marks continued to animate (it's normal for data transforms made for a specific mark not to affect the original data set used for another mark, although I don't know why the symbols I tested stopped receiving updates when I did a transform.)
*The debug screen shows a single, unchanging set of values for the nodes array. These values are the positions of the nodes after the simulation has finished running.

===OTHER STRATEGIES===
These are just some ideas I've tried. I don't know what the actual solution is, I just think it'd be crazy if there wasn't one! Some other ideas...

The [https://github.com/vega/vega2-docs/wiki/Marks#top-level-mark-properties documentation] for marks describes a "delay" property. "The translation delay, in milliseconds, for mark updates. The delay can be set in conjunction with the backing data (possibly through a scale transform) to provide staggered animations." I haven't gotten this to work, but it sounds pretty good, although a little strange. Animations would be calculated in advance, and only shown after a delay. If this were used in the snake game example, you would have it so that game animates the snake going along based on the last input it received, only animating a little forward movement at a time. Internally, the game would have calculated where you would run into and die if you didn't give any further inputs. It would delay showing this until either you died that way, or you made some input to turn and it would calculate a new death trajectory. Cool!

[https://github.com/vega/vega2-docs/wiki/Expressions Expressions] just use javascript, although you're restricted in what features you can use. If it were possible to execute arbitrary javascript code in graphs, this would probably be the way to do it. I don't know how realistic that is.

I think I have already missed a lot. I wanted to type this up and was hoping that putting ideas into words would help me find something I overlooked. I hope when you read this you're doing it aggressively, looking for loopholes and things I got wrong. That's all for now, thanks for reading.

<section id="troubleshooting"></section>
==Troubleshooting==

The [http://vega.github.io/vega-editor/ online Vega editor] is kinda annoying because it doesn't tell you what you did wrong besides small typos. Here is a list of things to check if your graph isn't working.

Simple typos.
*Every item in a list must have a comma after it.
*The last item in a list can't have a comma after it.
*Are any colons placed inside strings? <code>"width:"50</code> will give an error.
*Strings inside of strings should be placed inside single quotes, not double quotes.
*Be careful with terms that are written with square brackets, with braces around individual items. For example, <code>"data":[{...}]</code> instead of <code>"data":<nowiki>{{...}}</nowiki></code> or <code>"data":[...]</code>
*Pay attention to whether important terms are singular or plural. Plural: "data," "marks," "signals," "streams." Singular: "transform," "modify."

Other.
*Are there any mark properties given directly? For example, putting <code>"width":50</code> will produce an error, when it should be <code>"width":{"value":50}</code>
*If marks use data, make sure to set "from" correctly. If I'm importing a data set named "table" then use I'll use "from":{"data":"table"} rather than just "from":"table"
*Make sure that the variables used in an expression exist. For example, when the program first starts running, some signals may not have a value (usually if they don't have an "init"), so expressions may behave strangely.
*If you need your mark to respond to input, any properties that change must be put in the "update" section instead of "enter!"
*The editor saves your code (I think when you run it), and runs it when you first load the website. So if your program gets caught in an infinite loop, you need to clear cookies on the site to use it again. This will remove all your code. If you think your program might loop, you should save it in another document first.
*Make sure to test your program often!

Additionally, the vega editor has a [http://vega.github.io/vega-tutorials/debugging/ debug screen]. I don't know all the details yet, but I think it doesn't appear unless your program has marks that use a data field (AKA they use "from").

Tutorial/Graphs

2023-04-09T01:41:01Z

Raul:

Tutorial/Graphs

2023-04-08T04:09:43Z

Raul:

Graphs are these crazy little things that can create javascript canvas, which makes them much more powerful than HTML or CSS or modules.

==Introduction==
Graphs are created using JSON text inside of a <code><nowiki><graph></nowiki></code> tag, using the [https://github.com/nyurik/vega/wiki/ Vega 2.0] data visualization language.

==Overview==
There are three types of properties that are most important for making a graph.

'''Marks''' are objects drawn on the graph.

'''Signals''' take user input to make the graph interactive.

'''Data''' can be used to store information, [[okin|akin]] to variables.

Expand the text for a more detailed overview.
<div class="mw-collapsible mw-collapsed">
'''Marks'''
*'''Properties''' - to draw marks, they must be given properties such as color, position, etc. When specifying a property, you should say whether it will be given to the object when it's first drawn (''enter''), recalculated every time it's drawn (''update''), when the mark is hovered over (''hover''), or when the mark is removed (''exit'').
'''Signals'''
*'''Streams''' - short for "event streams" pick up input like mouse clicks, keyboard presses, etc.
*'''Expressions''' - the value of the signal is set by an expression. Expressions use
'''Data'''
*'''Data Transform''' - data can be altered by applying different transforms to it, like filtering out certain values, sorting data, performing math on the data, etc.
*'''Streaming Data''' - data can also be '''modified''' by inserting and removing data points, or toggling whether they are including in a data set. The modified points are determined by a signal.
</div>
==Example: Rectangle==

Let's draw a rectangle. Here is the starting point.
<source>
<graph>
{
"width":200,
"height":200
}
</graph>
</source>

Every graph is contained between the <nowiki><graph></nowiki> and <nowiki></graph></nowiki> tags. Then comes the JSON object which will contain all the data in our graph. JSON objects are wrapped in {} braces and contain a list of key-value pairs like this <source>"key":"value"</source> In this case, the first key is "width" and its value is 200. In general, a key is a string, and the value can be a string, a number, an array, or another JSON object. A list of keys/values are separated by commas, and the last doesn't have a comma.

The height and width here determine the size of the graph.

<source>
<graph>
{
"width":200,
"height":200,
"marks":[
{

}
]
}
</graph>
</source>

Now we add a key "'''marks'''" with an array value. Each entry of the array will be an object providing instructions on how to draw something to the screen. Also remember to add the comma to the "height" line now, since it's no longer the end of the list!
<source>
<graph>
{
"width":200,
"height":200,
"marks":[
{
"name":"square",
"type":"rect"
}
]
}
</graph>
</source>

These are more key/value pairs, inside the first object of the marks array. We set the name of the object to "square," and declare that it should be a rectangle. Other types of mark include symbols, paths, arcs, areas, lines, rules, text, and groups. Now we need to describe how to draw the rectangle, using a number of "properties."
<source>
<graph>
{
"width":200,
"height":200,
"marks":[
{
"name":"square",
"type":"rect",
"properties":{
"enter":{

},
"update":{

}
}
}
]
}
</graph>
</source>
Since graphs are interactive, we need to say immediately whether a property of the rectangle will change and have to be updated. These will go in the "update" section. Others can go in "enter," and get looked at when the rectangle is first drawn, but not ever again.
<source>
<graph>
{
"width":200,
"height":200,
"marks":[
{
"name":"square",
"type":"rect",
"properties":{
"enter":{
"width":{"value":50}
},
"update":{

}
}
}
]
}
</graph>
</source>
First we'd like to set the width of the rectangle. This is done with the key "width" and a value which is another object. This object is called a value reference and has a key named "value" with the value 50. If you simply set "width":50 then the rectangle won't render. You need the value reference.
<source>
<graph>
{
"width":200,
"height":200,
"marks":[
{
"name":"square",
"type":"rect",
"properties":{
"enter":{
"width":{"value":50},
"height":{"value":50},
"x":{"value":20},
"y":{"value":30}
},
"update":{

}
}
}
]
}
</graph>
</source>
Now we set the height and the x-/y-position of the rectangle. Remember that the x- and y- coordinates start counting from the top left corner, unlike regular Cartesian coordinates. The x-value increases going to the right, but the y-value increases going down.
<source>
<graph>
{
"width":200,
"height":200,
"marks":[
{
"name":"square",
"type":"rect",
"properties":{
"enter":{
"width":{"value":50},
"height":{"value":50},
"x":{"value":20},
"y":{"value":30}
},
"update":{
"fill":{"value":"steelblue"}
}
}
}
]
}
</graph>
</source>
The last step is to set the fill color of the rectangle. Check out your graph! If it's not showing up, double check for missing/extra commas, and square brackets that should be braces (or vice versa).
<graph>
{
"width":200,
"height":200,
"marks":[
{
"name":"square",
"type":"rect",
"properties":{
"enter":{
"width":{"value":50},
"height":{"value":50},
"x":{"value":20},
"y":{"value":30}
},
"update":{
"fill":{"value":"steelblue"}
}
}
}
]
}
</graph>

==Example: Clicking==
To add interactivity to our graph, we're going to introduce '''signals'''. A signal is a variable that responds to user input. If another value is set equal to a signal, then it updates whenever the signal updates. We're going to set the fill color of our rectangle equal to a signal so that when we click, it turns red.
<source>
<graph>
{
"width":200,
"height":200,
"signals":[
{

}
]
}
</graph>
</source>
It starts out the same way, but instead of marks we're going to define an array of signals.
<source>
<graph>
{
"width":200,
"height":200,
"signals":[
{
"name":"clicked",
"streams":[
{

}
]
}
]
}
</graph>
</source>
We'll give the signal a name, and then create a '''streams''' array. Streams are what will allow us to capture the mouse clicking. Each object in the array will need to have a "type" which describes what input to record, and an "expr" expression to determine what its updated value should be.
<source>
<graph>
{
"width":200,
"height":200,
"signals":[
{
"name":"clicked",
"streams":[
{
"type":"window:mousedown"
}
]
}
]
}
</graph>
</source>
The type is given in two parts: the first describes which object will watch for events, and the second describes what events to watch out for. "window:mousedown" records any time the mouse is pressed down anywhere on the page (window). Besides mousedown, there are other events for keyboard presses, mouse dragging, scrolling, double clicking, as well touch screen events for mobile devices. Besides window, other objects could be all marks of a certain type e.g. "rect:mousedown" or a mark with a specific name e.g. "@square:mousedown" (the @ is required for names). It could even be a CSS selector for an element on the page, e.g. "#header:mousedown" for an HTML element with id "header." If the first half is omitted entirely, then it tracks events anywhere in the graph window e.g. "mousedown."
<source>
<graph>
{
"width":200,
"height":200,
"signals":[
{
"name":"clicked",
"streams":[
{
"type":"window:mousedown",
"expr":"red"
}
]
}
]
}
</graph>
</source>
If the mouse is pressed down, the "clicked" signal is set equal to "red." We'll see more examples of expressions later.
<source>
<graph>
{
"width":200,
"height":200,
"signals":[
{
"name":"clicked",
"streams":[
{
"type":"window:mousedown",
"expr":"red"
},
{
"type":"window:mouseup",
"expr":"steelblue"
}
]
}
]
}
</graph>
</source>
We'll add another object to our set of streams. This one will watch for any time the mouse is released anywhere on the website, and it sets "clicked" equal to "steelblue."
<source>
<graph>
{
"width":200,
"height":200,
"signals":[
{
"name":"clicked",
"streams":[
{
"type":"window:mousedown",
"expr":"red"
},
{
"type":"window:mouseup",
"expr":"steelblue"
}
]
}
],
"marks":[
{
"name":"square",
"type":"rect",
"properties":{
"enter":{
"width":{"value":50},
"height":{"value":50},
"x":{"value":20},
"y":{"value":30}
},
"update":{
"fill":{"value":"steelblue"}
}
}
}
]
}
</graph>
</source>
Now we add back our rectangle.
<source>
<graph>
{
"width":200,
"height":200,
"signals":[
{
"name":"clicked",
"streams":[
{
"type":"window:mousedown",
"expr":"red"
},
{
"type":"window:mouseup",
"expr":"steelblue"
}
]
}
],
"marks":[
{
"name":"square",
"type":"rect",
"properties":{
"enter":{
"width":{"value":50},
"height":{"value":50},
"x":{"value":20},
"y":{"value":30}
},
"update":{
"fill":{"signal":"clicked"}
}
}
}
]
}
</graph>
</source>
The last step is to set the value of our rectangle's "fill" to be the "clicked" signal. Whenever a mouse is pressed or released on the window, "clicked" will update, and so will the color of the rectangle. The {"signal":"name"} object is another kind of value reference.

...Uhh so I guess this code doesn't actually work. I'll figure out why later. I always just use production rules rather than {"signal":"name"} and that seems to work fine.

==Troubleshooting==

The [http://vega.github.io/vega-editor/ online Vega editor] is kinda annoying because it doesn't tell you what you did wrong besides small typos. Here is a list of things to check if your graph isn't working.

Simple typos.
*Every item in a list must have a comma after it.
*The last item in a list can't have a comma after it.
*Are any colons placed inside strings? <code>"width:"50</code> will give an error.
*Strings inside of strings should be placed inside single quotes, not double quotes.
*Be careful with terms that are written with square brackets, with braces around individual items. For example, <code>"data":[{...}]</code> instead of <code>"data":<nowiki>{{...}}</nowiki></code> or <code>"data":[...]</code>
*Pay attention to whether important terms are singular or plural. Plural: "data," "marks," "signals," "streams." Singular: "transform," "modify."

Other.
*Are there any mark properties given directly? For example, putting <code>"width":50</code> will produce an error, when it should be <code>"width":{"value":50}</code>
*Make sure that the variables used in an expression exist. For example, when the program first starts running, some signals may not have a value (usually if they don't have an "init"), so expressions may behave strangely.
*If you need your mark to respond to input, any properties that change must be put in the "update" section instead of "enter!"
*The editor saves your code (I think when you run it), and runs it when you first load the website. So if your program gets caught in an infinite loop, you need to clear cookies on the site to use it again. This will remove all your code. If you think your program might loop, you should save it in another document first.
*Make sure to test your program often!

Additionally, the vega editor has a [http://vega.github.io/vega-tutorials/debugging/ debug screen]. I don't know all the details yet, but I think it doesn't appear unless your program has marks that use a data field (AKA they use "from").

Tutorial/Graphs

2023-04-08T03:24:29Z

Raul:

Graphs are these crazy little things that can create javascript canvas, which makes them much more powerful than HTML or CSS or even modules.

==Introduction==
Graphs are created using JSON text inside of a <code><nowiki><graph></nowiki></code> tag, using the [https://github.com/nyurik/vega/wiki/ Vega 2.0] data visualization language.

==Overview==
There are three types of properties that are most important for making a graph.

'''Marks''' are objects drawn on the graph.

'''Signals''' take user input to make the graph interactive.

'''Data''' can be used to store information, [[okin|akin]] to variables.

Expand the text for a more detailed overview.
<div class="mw-collapsible mw-collapsed">
'''Marks'''
*'''Properties''' - to draw marks, they must be given properties such as color, position, etc. When specifying a property, you should say whether it will be given to the object when it's first drawn (''enter''), recalculated every time it's drawn (''update''), when the mark is hovered over (''hover''), or when the mark is removed (''exit'').
'''Signals'''
*'''Streams''' - short for "event streams" pick up input like mouse clicks, keyboard presses, etc.
*'''Expressions''' - the value of the signal is set by an expression. Expressions use
'''Data'''
*'''Data Transform''' - data can be altered by applying different transforms to it, like filtering out certain values, sorting data, performing math on the data, etc.
*'''Streaming Data''' - data can also be '''modified''' by inserting and removing data points, or toggling whether they are including in a data set. The modified points are determined by a signal.
</div>
==Example: Rectangle==

Let's draw a rectangle. Here is the starting point.
<source>
<graph>
{
"width":200,
"height":200
}
</graph>
</source>

Every graph is contained between the <nowiki><graph></nowiki> and <nowiki></graph></nowiki> tags. Then comes the JSON object which will contain all the data in our graph. JSON objects are wrapped in {} braces and contain a list of key-value pairs like this <source>"key":"value"</source> In this case, the first key is "width" and its value is 200. In general, a key is a string, and the value can be a string, a number, an array, or another JSON object. A list of keys/values are separated by commas, and the last doesn't have a comma.

The height and width here determine the size of the graph.

<source>
<graph>
{
"width":200,
"height":200,
"marks":[
{

}
]
}
</graph>
</source>

Now we add a key "marks" with an array value. Each entry of the array will be an object providing instructions on how to draw something to the screen. Also remember to add the comma to the "height" line now, since it's no longer the end of the list!
<source>
<graph>
{
"width":200,
"height":200,
"marks":[
{
"name":"square",
"type":"rect"
}
]
}
</graph>
</source>

These are more key/value pairs, inside the first object of the marks array. We set the name of the object to "square," and declare that it should be a rectangle. Other types of mark include symbols, paths, arcs, areas, lines, rules, text, and groups. Now we need to describe how to draw the rectangle, using a number of "properties."
<source>
<graph>
{
"width":200,
"height":200,
"marks":[
{
"name":"square",
"type":"rect",
"properties":{
"enter":{

},
"update":{

}
}
}
]
}
</graph>
</source>
Since graphs are interactive, we need to say immediately whether a property of the rectangle will change and have to be updated. These will go in the "update" section. Others can go in "enter," and get looked at when the rectangle is first drawn, but not ever again.
<source>
<graph>
{
"width":200,
"height":200,
"marks":[
{
"name":"square",
"type":"rect",
"properties":{
"enter":{
"width":{"value":50}
},
"update":{

}
}
}
]
}
</graph>
</source>
First we'd like to set the width of the rectangle. This is done with the key "width" and a value which is another object. This object is called a value reference and has a key named "value" with the value 50. If you simply set "width":50 then the rectangle won't render. You need the value reference.
<source>
<graph>
{
"width":200,
"height":200,
"marks":[
{
"name":"square",
"type":"rect",
"properties":{
"enter":{
"width":{"value":50},
"height":{"value":50},
"x":{"value":20},
"y":{"value":30}
},
"update":{

}
}
}
]
}
</graph>
</source>
Now we set the height and the x-/y-position of the rectangle. Remember that the x- and y- coordinates start counting from the top left corner, unlike regular Cartesian coordinates. The x-value increases going to the right, but the y-value increases going down.
<source>
<graph>
{
"width":200,
"height":200,
"marks":[
{
"name":"square",
"type":"rect",
"properties":{
"enter":{
"width":{"value":50},
"height":{"value":50},
"x":{"value":20},
"y":{"value":30}
},
"update":{
"fill":{"value":"steelblue"}
}
}
}
]
}
</graph>
</source>
The last step is to set the fill color of the rectangle. Check out your graph! If it's not showing up, double check for missing/extra commas, and square brackets that should be braces (or vice versa).
<graph>
{
"width":200,
"height":200,
"marks":[
{
"name":"square",
"type":"rect",
"properties":{
"enter":{
"width":{"value":50},
"height":{"value":50},
"x":{"value":20},
"y":{"value":30}
},
"update":{
"fill":{"value":"steelblue"}
}
}
}
]
}
</graph>

==Example: Clicking==

==Troubleshooting==

The [http://vega.github.io/vega-editor/ online Vega editor] is kinda annoying because it doesn't tell you what you did wrong besides small typos. Here is a list of things to check if your graph isn't working.

Simple typos.
*Every item in a list must have a comma after it.
*The last item in a list can't have a comma after it.
*Are any colons placed inside strings? <code>"width:"50</code> will give an error.
*Strings inside of strings should be placed inside single quotes, not double quotes.
*Be careful with terms that are written with square brackets, with braces around individual items. For example, <code>"data":[{...}]</code> instead of <code>"data":<nowiki>{{...}}</nowiki></code> or <code>"data":[...]</code>
*Pay attention to whether important terms are singular or plural. Plural: "data," "marks," "signals," "streams." Singular: "transform," "modify."

Other.
*Are there any mark properties given directly? For example, putting <code>"width":50</code> will produce an error, when it should be <code>"width":{"value":50}</code>
*Make sure that the variables used in an expression exist. For example, when the program first starts running, some signals may not have a value (usually if they don't have an "init"), so expressions may behave strangely.
*If you need your mark to respond to input, any properties that change must be put in the "update" section instead of "enter!"
*The editor saves your code (I think when you run it), and runs it when you first load the website. So if your program gets caught in an infinite loop, you need to clear cookies on the site to use it again. This will remove all your code. If you think your program might loop, you should save it in another document first.
*Make sure to test your program often!

Additionally, the vega editor has a [http://vega.github.io/vega-tutorials/debugging/ debug screen]. I don't know all the details yet, but I think it doesn't appear unless your program has marks that use a data field (AKA they use "from").

Tutorial/Graphs

2023-04-08T02:38:29Z

Raul: Created page with "Graphs are these crazy little things that can create javascript canvas, which makes them much more powerful than HTML or CSS or even modules. ==Introduction== Graphs are crea..."

User talk:FallingPineapples/What if a graph kept asking for more memory?

2023-04-07T20:57:54Z

Raul: Created page with "Hi mysterious graph user... can I ask you a graph question... Right now my graphs can't update unless I get an input in 'streams'. I'd like them to update continuously, so I..."

Hi mysterious graph user... can I ask you a graph question...

Right now my graphs can't update unless I get an input in 'streams'. I'd like them to update continuously, so I can animate stuff and update things on their own. How do I do this? I've tried a bunch of hare-brained schemes already. I guess having two signals that call each other to be like a clock doesn't work, cause they call each other recursively and it freezes. Same if instead one half of the clock is a data set that updates using a signal, and the signal is defined using indata() on that data set. Maybe it'd work if the signal used data transformed in the marks section, but I guess signals can't use indata() on that data? Anyway, my best bet seems to be by using the force data transform, in interactive mode. I'm pretty sure this works, although I haven't worked out all the details yet.

But there must be a simpler way! Am I missing something obvious? -[[User:Raul|Raul]] ([[User talk:Raul|talk]]) 20:57, 7 April 2023 (UTC)

List of Hills to Die On (Expanded 3rd Edition)

2023-04-06T04:03:50Z

Raul:

File:Silenthill.jpg

2023-04-06T04:03:01Z

Raul:

Category:Unimportant pages

2023-04-06T03:58:39Z

Raul:

{{NerpaPunch Award|Brick}}

meh

INTerpalore Media

2023-04-05T03:10:48Z

Raul:

{{Girl||bg}}{{ReLogo|INTerpalore Media Logo (March 2022).png|140px|-180|-125}}<font face="Comfortaa">
[[File:INTerpalore Logo (November 2022).png|thumb]]
[[File:INTerpalore Media Logo (March 2022).png|thumb|INTerpalore's channel logo.]]
[[File:Nerpalore.png|thumb|Hidden and when the fedex logo :astonished:]]
'''INTerpalore Media''', or simply known as '''INTerpalore''', is an indie media group created by Jordan Baumann.

== Characters ==

These include, but are not limited to:

* '''[[Blue Raspberry]]'''
* '''[[Grape Juice]]'''
* '''[[Lego Brick]]'''
* '''[[Pluggy]]'''
* '''[[Cherry]]'''
* '''[[Licorice]]'''
* '''[[Tacky]]'''
* '''[[Shieldy]]'''
* '''[[Meteoroid]]'''
* '''[[Globe]]'''
* '''Tangeriney'''
* '''Doorknob'''
* '''BSB'''
* '''Darty'''
* '''<s>Whiffle Ball</s> WPB'''
* '''Protony'''
* '''Neutrony'''
* '''Barny'''
* '''Lemony'''
* '''Limey'''
* '''Rainbow'''
* '''Green Triangle'''
* '''Yellow Circle'''
* '''Blue Square'''
* '''[[:File:Sprolt3_transparent.png|this robotic creature]]'''

{{clear}}{{Another timeline|images=yes}}

== External links ==

* [https://www.youtube.com/@INTerpaloreMedia INTerpalore on YouTube]
[[Category:Suspicious]]
[[Category:INTerpalore]]
</font>

File:Nerpalore.png

2023-04-05T03:07:47Z

Raul:

Category:Pages containing tobacco

2023-04-05T00:03:04Z

Raul: Created page with "Toba<nowiki/>cco is a delightful little form of nico<nowiki/>tine that gives a character the following status buffs: *''Takes the Edge Off'' - All n..."

[[Toba_Aquarium|Toba]]<nowiki/>cco is a delightful little form of [[Niko|nico]]<nowiki/>tine that gives a character the following status buffs:
*''Takes the Edge Off'' - All negative status effects (nervousness, nausea, cowardice, etc.) are removed.
*''Smoke break'' - The character is immune to damage for the following turn. May be used once per battle.
*''Tar'' - The character gets tar into their lungs

Category:Liminal spaces

2023-04-04T23:52:27Z

Raul: Created page with "300px A liminal space is an international office of the Limbus Company."

[[File:Ishmael.png|300px]]

A liminal space is an international office of the [[Limbus Company]].

Mark Genuine's Funeral 2

2023-04-04T01:37:15Z

Raul:

well THAT just happened.<br>

Want to escape [[:Category:Eliminated_(official)|hell]]? [[Mark_Genuine's_Funeral|Die]]! Want to [https://camp2.rectangle.zone/index.php?title=Mark_Genuine's_Funeral_2 die]? Escape [[:Category:Autoeliminated_(official)|hell]]!

[[File:Damnfire.gif]]

[[File:Deadmark.jpg]][[User:Airy|Airy]] ([[User talk:Airy|talk]]) 01:27, 4 April 2023 (UTC)
{{Talk:Mark Genuine's Funeral 2}}

== Mark Genuine Song ==
Mark

Mark Genuine

Make my heart shake up like gelatin

Crying tears on a bridge again...

Mark

Mark your heart

Is like a boulder from the sky

Oh it always makes me cry...

MARK

Why did you have to leave

It makes my poor heart seize

Up and yell into the night....

Mark

Genuine

TOnight

I must dine

Alone, at your grave

With flowers above your name...
[[Category:Even Better Sequels]]

Teto Kasane

2023-04-02T04:05:40Z

Raul: Created page with "'''Kasane Teto''' (Japanese: くそーテト) is a voicebank for the UTAU singing synthesizer program. {{Infobox character|name=Teto Kasane|image=File:Teto.we..."

'''Kasane Teto''' ([[Japan|Japanese]]: くそーテト) is a voicebank for the [[UTAU]] singing synthesizer program.
{{Infobox character|name=Teto Kasane|image=[[File:Teto.webp|200px]]}}
==Background==

There are many singing synthesizers, such as Vocaloid, UTAU, Synth V, and even etc. Vocaloid was promoted as a paid alternative to free software like UTAU. You may know some Vocaloid. [[Miku|Hatune Miku]]. Or you may not.

These soft [[Morshu|wares]] allow you to sing with the voices of digital creatures, like Teto. Voices have different types called '''voicebanks''', also known as '''clumps'''. Teto has many voicebanks including CVC, Whisper, English, or I'm Feeling Lucky. Teto's voicebanks are available for download on the world wide web. [https://kasaneteto.jp/en-voicebank.html]

=== Explain CVC ===
Voiced banks come in many ways by letters of C and V. C means calm and V means vicious. A CV bank is calmy vicious, while a CVC bank is viciously calmy vicious. Most English voice banks are CVVC. Simply put, this means it's hard to tell if a sentence is calmy vicious or viciously calm. This quality is called '''passion-aggresion''' and is a key feature of all languages, not just [[English]] and Japanese.

When a voicebank alternates too quickly between calm and vicious, the result is an audible growl. Users of digital singing programs compete to produce realistic growls, instead of harvesting or building structures. Selfish? Well, I think so.

==Creation and Rise to Superstardom==
On April 1st, 2008, a vocaloid{{Wrong}} was [[🐣|born]]! Kasane Teto was developed by Crypton Future Media{{Wrong}}SEGA{{Wrong}}TWINDRILL in response to an [[April Fools' Day]] prank devised by Vocaloid fans. Kasane's Teto's name can be diffcult especially if you are not used to meeting new people. Here is a breakdown.

:''Kasane'' (<ruby>重<rt>kas</rt></ruby><ruby>音<rt>ane</rt></ruby>) means "Heavy Sound"

:''Teto'' is short for "potato".

Her first song was Song of the Eared Robot by Mimirobo-P.[https://www.youtube.com/watch?v=EsZKJD-6S4k]. Since then, she has enjoyed many hit songs like Teto Territory[https://www.youtube.com/watch?v=JALbemLw3G4], Triple Baka[https://www.youtube.com/watch?v=n5n7CSGPzqw], and Ochame Kinou (Fukkireta)[https://www.youtube.com/watch?v=kuNixp-wvWM], all by producer LamazeP.

Teto garnered much of her initial success on the nefarious website [[Niko|Niko Niko Douga]]. This is a Japanese video streaming site best known for establishing the [[Abyssal_World|deep, dark web]] and for its sinister banner ads. One advertisement targeted towards teenage users offered 2 weeks of free cigarettes for every purchase of its anti-malware software. This was part of a larger campaign that ran through 2008 called "Niko Niko nicotine," intended to reverse declining tobacco sales. "At the time, NNN was a commercial failure" says former Niko Niko Douga CEO [[Gus Fring]], "but sometimes you have to lose a battle to win the war."

==Design & Appearance==

Teto wears gray outfit with pink highlights, consisting of a skirt and sleeveless collared shirt, with the [[arm thingy|arm thingies]]. She also has long black boots and a pink [[belt thingy]]. She has pink hair which she wears in two coiled pigtails which resemble drills. Her drills in English go ''VRRRRRRRRRRRR''; however in Japanese, well they go ''GYUIIIIIIIIIIIIN''.

In [[dog|dogs]], 7 years are commonly called 1 year. In Teto, years are called 0.5years. This is because of [[chimera]]. You see, Teto is one. A chimera is an almost entirely mythological creature with the front half of a chimera and the back half of a chimera.

Teto gains chimera wings, which are like [[Damn Seal|devil]] wings, which are like bat wings. She cannot fly, on account of bats are the only true flying [[mammal|mammals]]. Too bad!

On her left arm is a tattoo reading "0401" (you know... her birthday... April 1st... do I have to [[s]][[p]][[e]][[l]][[l]] it out???). She acquired this tattoo while in prison for wire frauf.

==How to Make a Tattoo Gun in Prison==

The following is an excerpt from Teto's memoir, ''Dreams of Our Generation''
<div class="mw-collapsible mw-collapsed" data-expandtext="Expand passage">
{{Blockquote|text=
''Chapter 8. How to Make a Tattoo Gun in Prison''

You will need:

*An electric toothbrush.
*Tape
*A metal spoon.
*Pen (ballpoint)
*Fingernail clippers
*A paperclip
*Pen (retractable)
*A lighter

Tissues or Toilet Paper

The crafting recipes for these materials are available in the appendix.

#Take apart the toothbrush and identify the battery housing and motor.
#Remove the small gear from the end of the motor shaft. You may need to use a tool such as a knife.
#Bend the spoon into an L-shape and tape one end going up the side of the motor.
#Use the fingernail clippers to remove the ball from the end of the ballpoint pen.
#Disassemble the ballpoint pen. Remove and completely drain the ink cartridge, and clean the tip of the pen. Set both of them aside for now.
#Take the hollowed-out pen casing and cut it in half.
#Now tape one of the halves to the other end of the bent spoon.
#Use a 1cm section of the remaining half casing, and pinch one end flat. Slide this end onto the electric motor's shaft, and then slip a 1cm section of paperclip between the motor shaft and the casing.
#Disassemble the retractable pen and locate its spring. Stretch the spring out as far as possible by hand, and then continue stretching over the flame of your lighter. This allows you to completely straighten the spring. While straightening, be careful not to let the spring stay in the flame for too long.
#Allow the spring to linger in the flame and pull sharply from both ends. This will break the spring in half and leave a sharp point, which will be the needle of the tattoo gun.
#Wrap the needle in tissue and thread it through the pen casing (the half attached to the spoon). The tissue will absorb unwanted lateral motion of the needle as it goes back and forth through the casing.
#Bend the back part of the needle into a loop, so that it hooks around the motor shaft.
#Attach the motor part of this assembly to the conductive material of the toothbrush's battery housing, so that the motor runs. Fasten with tape.

The tattoo gun has no on/off switch and will run continuously as long as the battery housing is connected to the other components. Therefore, make sure everything is in order before you begin tattooing. Sanitize the needle thoroughly before use, using your lighter flame and rubbing alcohol. In the final stages of construction, ensure the needle is just long enough to pierce the skin. Any more length will just lead to unnecessary pain. And believe me, this will be painful.

Last chapter I detailed the various ways to craft tattoo ink. Next chapter will cover the tattooing process and the standard methods to ward off infection.
}}
</div>
== Relationships ==
Miku - Marry

Luka - Kiss

GUMI - Kill

{{#css:
.mw-content-ltr .mw-collapsible-toggle{
float:none;
}
}}

File:Teto.webp

2023-04-02T03:55:20Z

Raul:

Module:Sandbox/Raul

2023-04-01T07:13:59Z

Raul:

local p = {}
function p.hello (frame) return "Hello, world!" end
function p.multiReturn(frame) return "Hello, world!","Goodbye, world!" end
function p.tableReturn(frame) mw.logObject({3, 4, 5, 6}) return mw.getLogBuffer() end
function p.functionReturn(frame) return function(a,b) return "five" end end
function p.loggy (frame)
mw.logObject(frame.args)
mw.logObject(mw.getCurrentFrame())
mw.logObject(frame:getParent().args)
mw.logObject(frame:getTitle())
return mw.getLogBuffer() end
function p.testExpand (frame) return frame:expandTemplate{title="=", args={}} end
function p.newpara (frame)
local para = mw.html.create("p")
para:wikitext("100% homemade") return tostring(para) end
return p

Module:Sandbox/Raul

2023-04-01T07:01:09Z

Raul:

local p = {}
function p.hello (frame) return "Hello, world!" end
function p.multiReturn(frame) return "Hello, world!","Goodbye, world!" end
function p.tableReturn(frame) return {3, 4, 5, 6} end
function p.functionReturn(frame) return function(a,b) return "five" end end
function p.loggy (frame)
mw.logObject((frame.args))
mw.logObject(mw.getCurrentFrame())
mw.logObject(frame:getParent().args)
mw.logObject(frame:getTitle())
return mw.getLogBuffer() end
function p.testExpand (frame) return frame:expandTemplate{title="=", args={}} end
function p.newpara (frame)
local para = mw.html.create("p")
para:wikitext("100% homemade") return tostring(para) end
return p

Module:Sandbox/Raul

2023-04-01T06:54:30Z

Raul: Created page with "local p = {} function p.hello (frame) return "Hello, world!" end function p.multiReturn(frame) return "Hello, world!","Goodbye, world!" end function p.tableReturn(frame) retur..."

local p = {}
function p.hello (frame) return "Hello, world!" end
function p.multiReturn(frame) return "Hello, world!","Goodbye, world!" end
function p.tableReturn(frame) return {3, 4, 5, 6} end
function p.functionReturn(frame) return function(a,b) return "five" end end
function p.loggy (frame)
mw.logObject((frame.args))
mw.logObject(mw.getCurrentFrame())
mw.logObject(frame:getParent().args)
mw.logObject(frame:getTitle())
return getLogBuffer() end
function p.testExpand (frame) return expandTemplate{title="=", args={}} end
function p.newpara (frame) local para = mw.html.create("p") p:wikitext("100% homemade") return tostring(para) end
return p

San Francisco

2023-04-01T06:07:39Z

Raul:

San Francisco, officially th[[Euler's Number|e]] City and County of San Francisco, is a commercial and cultural center in Northern [[California]]. The city proper is the ???th most populous in the United States, and the most populous in California, with 8 residents as of 2021. This also means that the entire population of California currently resides in San Francisco, at least we think so.

San Francisco and the surrounding [[Baaaaaaay Area]] (of the greater [[Specific Ocean]]) are a global center of whatever is popular in San Francisco.

=== Notable Residents ===
[[Jeff Plecak]]
[[Category:California]]
[[Category:Locations]]
[[Category:Articles created in August 2022]]

Template:Youtube Reply

2023-03-31T05:15:22Z

Raul:

<noinclude>See <nowiki>{{Template:Youtube Comment}}</nowiki> for how to use.</noinclude><onlyinclude>{{#vardefine:replyCount{{#var:threadCount}}|{{#varexists:replyCount{{#var:threadCount}}|{{#expr:{{#var:replyCount{{#var:threadCount}}}}+1}}|1}}}}{{#ifeq:{{#var:replyCount{{#var:threadCount}}}}|1|<div class="youtube-replies youtube-dropdown mw-customtoggle-{{#var:threadCount}}"><span class="youtube-replies-arrow">[[File:Ytreply.png|24px]]</span> {{#var_final:replyCount{{#var:threadCount}}|1}} replies</div>
|}}
<div class="youtube-replies youtube-comment mw-collapsible mw-collapsed" id="mw-customcollapsible-{{#var:threadCount}}">
<div class="youtube-pfp">
[[File:{{#if:{{{pfp|{{{2|}}}}}}|{{{pfp|{{{2}}}}}}|{{#if:{{{name|{{{1|}}}}}}|Dia{{{name|{{{1}}}}}}.png|Ytpurple.jpg}}}}|x40px|link={{#if:{{{name|{{{1|}}}}}}|{{{name|{{{1}}}}}}|Anonymous}}]]
</div>
<div>
{{#if:{{{isPinned|{{{6|}}}}}}|
<div class="youtube-pinned">
<div class="youtube-pin">
[[File:Ytpin.png|12px]]
</div>
[[Pinniped|Pinned]] comment
</div>
|}}
<div class="youtube-signature">
<div class="youtube-author {{#if:{{{isOP|{{{7|}}}}}}|youtube-op|}}">
{{{name|{{{1|Anonymous}}}}}}
</div>
<span class="date">{{#if:{{{timeAgo|{{{5|}}}}}}|{{{timeAgo|{{{5}}}}}}|1 day ago}}</span>
</div>

<div class="youtube-content">
{{{content|{{{3|}}}}}}
</div>

<div class="youtube-status">
<div class="youtube-like">[[File:Ytlike.png|24px]]</div>
{{#if:{{{numLikes|{{{4|}}}}}}|<span style="margin-right:8px">{{{numLikes|{{{4}}}}}}</span>}}
<div class="youtube-dislike">[[File:Ytdislike.png|24px]]</div>
<div style="position:relative">
{{#if:{{{isHearted|{{{8|}}}}}}|<div class="youtube-heart-op">
[[File:{{{opPfp|{{{9|Ytpurple.jpg}}}}}}|x14px]]
</div>
<div class="youtube-heart-heart">
[[File:Ytheart.png|15px]]
</div>
|}}
</div>
<span class="youtube-reply-prompt">Reply</span>
</div>

</div>
</div></onlyinclude>

Template:Youtube Reply

2023-03-31T05:12:51Z

Raul:

<noinclude>See <nowiki>{{Template:Youtube Comment}}</nowiki> for how to use.</noinclude><onlyinclude>{{#vardefine:replyCount{{#var:threadCount}}|{{#varexists:replyCount{{#var:threadCount}}|{{#expr:{{#var:replyCount{{#var:threadCount}}}}+1}}|1}}}}{{#ifeq:{{#var:replyCount{{#var:threadCount}}}}|1|<div class="youtube-replies youtube-dropdown mw-customtoggle-{{#var:threadCount}}"><span class="youtube-replies-arrow">[[File:Ytreply.png|24px]]</span> {{#var_final:replyCount{{#var:threadCount}}|1}} replies</div>
|}}
<div class="youtube-replies youtube-comment mw-collapsible mw-collapsed" id="mw-customcollapsible-{{#var:threadCount}}">
<div class="youtube-pfp">
[[File:{{#if:{{{pfp|{{{2|}}}}}}|{{{pfp|{{{2}}}}}}|{{#if:{{{name|{{{1|}}}}}}|Dia{{{name|{{{1}}}}}}.png|Ytpurple.jpg}}}}|x40px|link={{#if:{{{name|{{{1|}}}}}}|{{{name|{{{1}}}}}}|Anonymous}}]]
</div>
<div>
{{#if:{{{isPinned|{{{6|}}}}}}|
<div class="youtube-pinned">
<div class="youtube-pin">
[[File:Ytpin.png|12px]]
</div>
[[Pinniped|Pinned]] comment
</div>
|}}
<div class="youtube-signature">
<div class="youtube-author">
{{{name|{{{1|Anonymous}}}}}}
</div>
<span class="date">{{#if:{{{timeAgo|{{{5|}}}}}}|{{{timeAgo|{{{5}}}}}}|1 day ago}}</span>
</div>

<div class="youtube-content">
{{{content|{{{3|}}}}}}
</div>

<div class="youtube-status">
<div class="youtube-like">[[File:Ytlike.png|24px]]</div>
{{#if:{{{numLikes|{{{4|}}}}}}|<span style="margin-right:8px">{{{numLikes|{{{4}}}}}}</span>}}
<div class="youtube-dislike">[[File:Ytdislike.png|24px]]</div>
<div style="position:relative">
{{#if:{{{isHearted|{{{8|}}}}}}|<div class="youtube-heart-op">
[[File:{{{opPfp|{{{9|Ytpurple.jpg}}}}}}|x14px]]
</div>
<div class="youtube-heart-heart">
[[File:Ytheart.png|15px]]
</div>
|}}
</div>
<span class="youtube-reply-prompt">Reply</span>
</div>

</div>
</div></onlyinclude>

Template:Youtube Comment

2023-03-31T05:12:36Z

Raul:

<noinclude>There are two youtube comment templates, <nowiki>{{Youtube Comment}}</nowiki> and <nowiki>{{Youtube Reply}}</nowiki>. They both take the same parameters:
<nowiki>
{{Youtube Comment|name=|pfp=|content=|numLikes=|timeAgo=|isPinned=|isOP=|isHearted=|opPfp=}}
</nowiki>

{{Youtube Comment|name=Spike|pfp=|content=DUDES. TAS IN THE TITLE MEANS TOOL-ASSISTED SPEEDRUN. I DON'T THINK A HUMAN COULD DO THIS.|numLikes=26|timeAgo=1 week ago|isPinned=true|isOP=1|isHearted=|opPfp=}}
{{Youtube Reply|name=Englishcreamcakes|pfp=Melonponsuke.png|content=I vote pencil shee never got a vote.|numLikes=38,022|timeAgo=12 years ago|isPinned=|isOP=|isHearted=1|opPfp=DiaSpike.png}}
{{Youtube Reply|Spike||WHO ARE YOU TALKING TO||||true||}}

===Parameters===
# "name" is the username in the comment. Defaults to "[[Anonymous]]" if this parameter isn't given.
# "pfp" is the profile picture of the comment. You should include the file type here, like "pfp=Melonponsuke.png" with the ".png" included! If this parameter isn't given, then the template will default to Dia"name".png, using the first parameter. So, if you choose not to include this term, you should make sure that the Dia file [[Category:Pages_with_broken_file_links|exists]].
# "content" is the body of the youtube comment.
# "numLikes" is the number of likes the comment has. If this isn't given, then nothing will display between the dislike and like button.
# "timeAgo" is the text saying when the comment was written. If this isn't given, then it defaults to "1 [[Like_a_day|day]] ago"
** "numLikes" and "timeAgo" can really be whatever text you want, [[Schrödinger's_silly|if]] you're feeling silly.
# "isPinned" determines whether the youtube comment is pinned. It becomes true whenever ANY text is given, so if you don't want the comment pinned you should leave this parameter [[Silence|empty]]. This can even be given to a <nowiki>{{Youtube Reply}}</nowiki>.
# "isOP" specifies whether the username should be highlighted, like Youtube does with comments written by the video uploader. It becomes true whenever ANY text is given.
# "isHearted" specifies whether the comment should appear with a [[Valentine's_Day|heart]] given by the video uploader. It becomes true whenver ANY text is given.
# "opPfp" is the profile picture of the video uploader, which appears when they give a comment a heart. Don't forget to include the file type! This parameter won't be used unless you've given "isHearted" a value. If "isHearted" is set but not "opPfp", then a default Youtube [[avatar]] will be used.

The above example was generated like this:
<syntaxhighlight>
{{Youtube Comment|name=Spike|pfp=|content=DUDES. TAS IN THE TITLE MEANS TOOL-ASSISTED SPEEDRUN. I DON'T THINK A HUMAN COULD DO THIS.|numLikes=26|timeAgo=1 week ago|isPinned=true|isOP=1|isHearted=|opPfp=}}

{{Youtube Reply|name=Englishcreamcakes|pfp=Melonponsuke.png|content=I vote pencil shee never got a vote.|numLikes=38,022|timeAgo=12 years ago|isPinned=|isOP=|isHearted=1|opPfp=DiaSpike.png}}

{{Youtube Reply|Spike||WHO ARE YOU TALKING TO||||true||}}
</syntaxhighlight>

===Comments vs. Replies===
The difference between <nowiki>{{Youtube Comment}}</nowiki> and <nowiki>{{Youtube Reply}}</nowiki> is that replies are indented, and hidden behind a "show replies" collapsible. The purpose of having two different templates is so that all the replies to a single comment can be collapsed and expanded independently of other replies to other comments. Separate templates also allows the collapsible toggle to count and display the number of replies. '''There must be a <nowiki>{{Youtube Comment}}</nowiki>placed before any <nowiki>{{Youtube Reply}}</nowiki>, or else the replies will break.''' All replies appearing after a <nowiki>{{Youtube Comment}}</nowiki> will behave as part of the same thread until the next <nowiki>{{Youtube Comment}}</nowiki> is placed. Be aware of this if you put other stuff between the individual replies.

If you find any errors, please let [[User:Raul|me]] know! Thank you!
</noinclude>
{{#vardefine:threadCount|{{#varexists:threadCount|{{#expr:{{#var:threadCount}}+1}}|1}}}}
<div class="youtube-comment">
<div class="youtube-pfp">
[[File:{{#if:{{{pfp|{{{2|}}}}}}|{{{pfp|{{{2}}}}}}|{{#if:{{{name|{{{1|}}}}}}|Dia{{{name|{{{1}}}}}}.png|Ytpurple.jpg}}}}|x40px|link={{#if:{{{name|{{{1|}}}}}}|{{{name|{{{1}}}}}}|Anonymous}}]]
</div>
<div>
{{#if:{{{isPinned|{{{6|}}}}}}|
<div class="youtube-pinned">
<div class="youtube-pin">
[[File:Ytpin.png|12px]]
</div>
[[Pinniped|Pinned]] comment
</div>
|}}
<div class="youtube-signature">
<div class="youtube-author {{#if:{{{isOP|{{{7|}}}}}}|youtube-op|}}">
{{{name|{{{1|Anonymous}}}}}}
</div>
<span class="date">{{#if:{{{timeAgo|{{{5|}}}}}}|{{{timeAgo|{{{5}}}}}}|1 day ago}}</span>
</div>

<div class="youtube-content">
{{{content|{{{3|}}}}}}
</div>

<div class="youtube-status">
<div class="youtube-like">[[File:Ytlike.png|24px]]</div>
{{#if:{{{numLikes|{{{4|}}}}}}|<span style="margin-right:8px">{{{numLikes|{{{4}}}}}}</span>}}
<div class="youtube-dislike">[[File:Ytdislike.png|24px]]</div>
<div style="position:relative">
{{#if:{{{isHearted|{{{8|}}}}}}|<div class="youtube-heart-op">
[[File:{{{opPfp|{{{9|Ytpurple.jpg}}}}}}|x14px]]
</div>
<div class="youtube-heart-heart">
[[File:Ytheart.png|15px]]
</div>
|}}
</div>
<span class="youtube-reply-prompt">Reply</span>
</div>
</div>
</div>{{#css:
.youtube-comment p{margin:0px;}
.youtube-comment{
font-family:"Roboto","Arial",sans-serif;
font-size:0.875rem;
font-weight:400;
line-height:1.25rem;
max-width:500px;
display:flex;
}
.youtube-pfp{
min-width:40px;
width: 40px;
height: 40px;
border-radius:50%;
margin-right:16px;
overflow:hidden;
}
.youtube-pin{
margin-left:-2px;
margin-right:4px;
}
.youtube-author{
font-size:0.8125rem;
font-height:1.125rem;
font-weight:600;
color:#0f0f0f;
}
.youtube-op{
height:20px;
margin-bottom:2px;
border-radius:12px;
padding:0 6px;
background-color:#888888;
color: #ffffff;
}
.date{padding-left:4px}
.date:hover{color:#0f0f0f}

.youtube-pinned, .youtube-signature{
color: #606060;
font-size:0.75rem;
font-height:1.125rem;
font-weight:400;
display:flex;
align-items:baseline;
margin-bottom:1px;
}
.youtube-pinned{margin-bottom:8px;}
.youtube-pinned a{
color: #606060;
text-decoration:none;
}
.youtube-signature{margin-bottom:2px;}

.youtube-status{
margin-top:4px;
min-height:16px;
display:flex;
align-items:center;
}
.youtube-like,.youtube-dislike{
width:32px;
height:32px
display:flex;
align-items:center;
}
.youtube-like{
margin-left:-8px;
}
.youtube-dislike{

}
.youtube-heart-op{
margin: 10px;
width: 14px;
height: 14px;
border-radius:50%;
overflow: hidden;
border: 1px solid white;
}
.youtube-heart-op p a{
display:inline-block;
height:100%;
}
.youtube-heart-op p a img{vertical-align:top;}
.youtube-heart-heart{
position:absolute;
right:3px;
bottom:4px;
width:15px;
height:15px;
}

.youtube-reply-prompt{
font-weight:500;
color:#0f0f0f;
margin-left:8px;
}

.youtube-replies{margin-left:56px;}

.youtube-dropdown{
display:inline-block;
border-radius:18px;
color:#065fd4;
font-size:14px;
font-weight:600;
line-height:36px;
height:36px;
padding: 0 12px;
}
.youtube-replies-arrow{
margin-left:-8px;
}
.youtube-dropdown:hover{background-color:#def1ff}
}}

Template:Youtube Comment

2023-03-31T05:00:21Z

Raul:

<noinclude>There are two youtube comment templates, <nowiki>{{Youtube Comment}}</nowiki> and <nowiki>{{Youtube Reply}}</nowiki>. They both take the same parameters:
<nowiki>
{{Youtube Comment|name=|pfp=|content=|numLikes=|timeAgo=|isPinned=|isOP=|isHearted=|opPfp=}}
</nowiki>

{{Youtube Comment|name=Spike|pfp=|content=DUDES. TAS IN THE TITLE MEANS TOOL-ASSISTED SPEEDRUN. I DON'T THINK A HUMAN COULD DO THIS.|numLikes=26|timeAgo=1 week ago|isPinned=true|isOP=1|isHearted=|opPfp=}}
{{Youtube Reply|name=Englishcreamcakes|pfp=Melonponsuke.png|content=I vote pencil shee never got a vote.|numLikes=38,022|timeAgo=12 years ago|isPinned=|isOP=|isHearted=1|opPfp=DiaSpike.png}}
{{Youtube Reply|Spike||WHO ARE YOU TALKING TO||||true||}}

===Parameters===
# "name" is the username in the comment. Defaults to "[[Anonymous]]" if this parameter isn't given.
# "pfp" is the profile picture of the comment. You should include the file type here, like "pfp=Melonponsuke.png" with the ".png" included! If this parameter isn't given, then the template will default to Dia"name".png, using the first parameter. So, if you choose not to include this term, you should make sure that the Dia file [[Category:Pages_with_broken_file_links|exists]].
# "content" is the body of the youtube comment.
# "numLikes" is the number of likes the comment has. If this isn't given, then nothing will display between the dislike and like button.
# "timeAgo" is the text saying when the comment was written. If this isn't given, then it defaults to "1 [[Like_a_day|day]] ago"
** "numLikes" and "timeAgo" can really be whatever text you want, [[Schrödinger's_silly|if]] you're feeling silly.
# "isPinned" determines whether the youtube comment is pinned. It becomes true whenever ANY text is given, so if you don't want the comment pinned you should leave this parameter [[Silence|empty]]. This can even be given to a <nowiki>{{Youtube Reply}}</nowiki>.
# "isOP" specifies whether the username should be highlighted, like Youtube does with comments written by the video uploader. It becomes true whenever ANY text is given.
# "isHearted" specifies whether the comment should appear with a [[Valentine's_Day|heart]] given by the video uploader. It becomes true whenver ANY text is given.
# "opPfp" is the profile picture of the video uploader, which appears when they give a comment a heart. Don't forget to include the file type! This parameter won't be used unless you've given "isHearted" a value. If "isHearted" is set but not "opPfp", then a default Youtube [[avatar]] will be used.

The above example was generated like this:
<syntaxhighlight>
{{Youtube Comment|name=Spike|pfp=|content=DUDES. TAS IN THE TITLE MEANS TOOL-ASSISTED SPEEDRUN. I DON'T THINK A HUMAN COULD DO THIS.|numLikes=26|timeAgo=1 week ago|isPinned=true|isOP=1|isHearted=|opPfp=}}

{{Youtube Reply|name=Englishcreamcakes|pfp=Melonponsuke.png|content=I vote pencil shee never got a vote.|numLikes=38,022|timeAgo=12 years ago|isPinned=|isOP=|isHearted=1|opPfp=DiaSpike.png}}

{{Youtube Reply|Spike||WHO ARE YOU TALKING TO||||true||}}
</syntaxhighlight>

===Comments vs. Replies===
The difference between <nowiki>{{Youtube Comment}}</nowiki> and <nowiki>{{Youtube Reply}}</nowiki> is that replies are indented, and hidden behind a "show replies" collapsible. The purpose of having two different templates is so that all the replies to a single comment can be collapsed and expanded independently of other replies to other comments. Separate templates also allows the collapsible toggle to count and display the number of replies. '''There must be a <nowiki>{{Youtube Comment}}</nowiki>placed before any <nowiki>{{Youtube Reply}}</nowiki>, or else the replies will break.''' All replies appearing after a <nowiki>{{Youtube Comment}}</nowiki> will behave as part of the same thread until the next <nowiki>{{Youtube Comment}}</nowiki> is placed. Be aware of this if you put other stuff between the individual replies.

If you find any errors, please let [[User:Raul|me]] know! Thank you!
</noinclude>
{{#vardefine:threadCount|{{#varexists:threadCount|{{#expr:{{#var:threadCount}}+1}}|1}}}}
<div class="youtube-comment">
<div class="youtube-pfp">
[[File:{{#if:{{{pfp|{{{2|}}}}}}|{{{pfp|{{{2}}}}}}|{{#if:{{{name|{{{1|}}}}}}|Dia{{{name|{{{1}}}}}}.png|Ytpurple.jpg}}}}|x40px|link={{#if:{{{name|{{{1|}}}}}}|{{{name|{{{1}}}}}}|Anonymous}}]]
</div>
<div>
{{#if:{{{isPinned|{{{6|}}}}}}|
<div class="youtube-pinned">
<div class="youtube-pin">
[[File:Ytpin.png|12px]]
</div>
[[Pinniped|Pinned]] comment
</div>
|}}
<div class="youtube-signature">
<div class="youtube-author {{#if:{{{isOP|{{{7|}}}}}}|youtube-op|}}">
{{{name|{{{1|Anonymous}}}}}}
</div>
<span class="date">{{{timeAgo|{{{5|1 day ago}}}}}}</span>
</div>

<div class="youtube-content">
{{{content|{{{3|}}}}}}
</div>

<div class="youtube-status">
<div class="youtube-like">[[File:Ytlike.png|24px]]</div>
{{#if:{{{numLikes|{{{4|}}}}}}|<span style="margin-right:8px">{{{numLikes|{{{4}}}}}}</span>}}
<div class="youtube-dislike">[[File:Ytdislike.png|24px]]</div>
<div style="position:relative">
{{#if:{{{isHearted|{{{8|}}}}}}|<div class="youtube-heart-op">
[[File:{{{opPfp|{{{9|Ytpurple.jpg}}}}}}|x14px]]
</div>
<div class="youtube-heart-heart">
[[File:Ytheart.png|15px]]
</div>
|}}
</div>
<span class="youtube-reply-prompt">Reply</span>
</div>
</div>
</div>{{#css:
.youtube-comment p{margin:0px;}
.youtube-comment{
font-family:"Roboto","Arial",sans-serif;
font-size:0.875rem;
font-weight:400;
line-height:1.25rem;
max-width:500px;
display:flex;
}
.youtube-pfp{
min-width:40px;
width: 40px;
height: 40px;
border-radius:50%;
margin-right:16px;
overflow:hidden;
}
.youtube-pin{
margin-left:-2px;
margin-right:4px;
}
.youtube-author{
font-size:0.8125rem;
font-height:1.125rem;
font-weight:600;
color:#0f0f0f;
}
.youtube-op{
height:20px;
margin-bottom:2px;
border-radius:12px;
padding:0 6px;
background-color:#888888;
color: #ffffff;
}
.date{padding-left:4px}
.date:hover{color:#0f0f0f}

.youtube-pinned, .youtube-signature{
color: #606060;
font-size:0.75rem;
font-height:1.125rem;
font-weight:400;
display:flex;
align-items:baseline;
margin-bottom:1px;
}
.youtube-pinned{margin-bottom:8px;}
.youtube-pinned a{
color: #606060;
text-decoration:none;
}
.youtube-signature{margin-bottom:2px;}

.youtube-status{
margin-top:4px;
min-height:16px;
display:flex;
align-items:center;
}
.youtube-like,.youtube-dislike{
width:32px;
height:32px
display:flex;
align-items:center;
}
.youtube-like{
margin-left:-8px;
}
.youtube-dislike{

}
.youtube-heart-op{
margin: 10px;
width: 14px;
height: 14px;
border-radius:50%;
overflow: hidden;
border: 1px solid white;
}
.youtube-heart-op p a{
display:inline-block;
height:100%;
}
.youtube-heart-op p a img{vertical-align:top;}
.youtube-heart-heart{
position:absolute;
right:3px;
bottom:4px;
width:15px;
height:15px;
}

.youtube-reply-prompt{
font-weight:500;
color:#0f0f0f;
margin-left:8px;
}

.youtube-replies{margin-left:56px;}

.youtube-dropdown{
display:inline-block;
border-radius:18px;
color:#065fd4;
font-size:14px;
font-weight:600;
line-height:36px;
height:36px;
padding: 0 12px;
}
.youtube-replies-arrow{
margin-left:-8px;
}
.youtube-dropdown:hover{background-color:#def1ff}
}}

Template:Youtube Comment

2023-03-31T04:57:44Z

Raul:

<noinclude>There are two youtube comment templates, <nowiki>{{Youtube Comment}}</nowiki> and <nowiki>{{Youtube Reply}}</nowiki>. They both take the same parameters:
<nowiki>
{{Youtube Comment|name=|pfp=|content=|numLikes=|timeAgo=|isPinned=|isOP=|isHearted=|opPfp=}}
</nowiki>

{{Youtube Comment|name=Spike|pfp=|content=DUDES. TAS IN THE TITLE MEANS TOOL-ASSISTED SPEEDRUN. I DON'T THINK A HUMAN COULD DO THIS.|numLikes=26|timeAgo=1 week ago|isPinned=true|isOP=1|isHearted=|opPfp=}}

{{Youtube Reply|name=Englishcreamcakes|pfp=Melonponsuke.png|content=I vote pencil shee never got a vote.|numLikes=38,022|timeAgo=12 years ago|isPinned=|isOP=|isHearted=1|opPfp=DiaSpike.png}}

{{Youtube Reply|SPIKE||WHO ARE YOU TALKING TO||||true||}}

===Parameters===
# "name" is the username in the comment. Defaults to "[[Anonymous]]" if this parameter isn't given.
# "pfp" is the profile picture of the comment. You should include the file type here, like "pfp=Melonponsuke.png" with the ".png" included! If this parameter isn't given, then the template will default to Dia"name".png, using the first parameter. So, if you choose not to include this term, you should make sure that the Dia file [[Category:Pages_with_broken_file_links|exists]].
# "content" is the body of the youtube comment.
# "numLikes" is the number of likes the comment has. If this isn't given, then nothing will display between the dislike and like button.
# "timeAgo" is the text saying when the comment was written. If this isn't given, then it defaults to "1 [[Like_a_day|day]] ago"
** "numLikes" and "timeAgo" can really be whatever text you want, [[Schrödinger's_silly|if]] you're feeling silly.
# "isPinned" determines whether the youtube comment is pinned. It becomes true whenever ANY text is given, so if you don't want the comment pinned you should leave this parameter [[Silence|empty]]. This can even be given to a <nowiki>{{Youtube Reply}}</nowiki>.
# "isOP" specifies whether the username should be highlighted, like Youtube does with comments written by the video uploader. It becomes true whenever ANY text is given.
# "isHearted" specifies whether the comment should appear with a [[Valentine's_Day|heart]] given by the video uploader. It becomes true whenver ANY text is given.
# "opPfp" is the profile picture of the video uploader, which appears when they give a comment a heart. Don't forget to include the file type! This parameter won't be used unless you've given "isHearted" a value. If "isHearted" is set but not "opPfp", then a default Youtube [[avatar]] will be used.

The above example was generated like this:
<syntaxhighlight>
{{Youtube Comment|name=Spike|pfp=|content=DUDES. TAS IN THE TITLE MEANS TOOL-ASSISTED SPEEDRUN. I DON'T THINK A HUMAN COULD DO THIS.|numLikes=26|timeAgo=1 week ago|isPinned=true|isOP=1|isHearted=|opPfp=}}

{{Youtube Reply|name=Englishcreamcakes|pfp=Melonponsuke.png|content=I vote pencil shee never got a vote.|numLikes=38,022|timeAgo=12 years ago|isPinned=|isOP=|isHearted=1|opPfp=DiaSpike.png}}

{{Youtube Reply|SPIKE||WHO ARE YOU TALKING TO||||true||}}
</syntaxhighlight>

===Comments vs. Replies===
The difference between <nowiki>{{Youtube Comment}}</nowiki> and <nowiki>{{Youtube Reply}}</nowiki> is that replies are indented, and hidden behind a "show replies" collapsible. The purpose of having two different templates is so that all the replies to a single comment can be collapsed and expanded independently of other replies to other comments. Separate templates also allows the collapsible toggle to count and display the number of replies. '''There must be a <nowiki>{{Youtube Comment}}</nowiki>placed before any <nowiki>{{Youtube Reply}}</nowiki>, or else the replies will break.''' All replies appearing after a <nowiki>{{Youtube Comment}}</nowiki> will behave as part of the same thread until the next <nowiki>{{Youtube Comment}}</nowiki> is placed. Be aware of this if you put other stuff between the individual replies.

If you find any errors, please let [[User:Raul|me]] know! Thank you!
</noinclude>
{{#vardefine:threadCount|{{#varexists:threadCount|{{#expr:{{#var:threadCount}}+1}}|1}}}}
<div class="youtube-comment">
<div class="youtube-pfp">
[[File:{{#if:{{{pfp|{{{2|}}}}}}|{{{pfp|{{{2}}}}}}|{{#if:{{{name|{{{1|}}}}}}|Dia{{{name|{{{1}}}}}}.png|Ytpurple.jpg}}}}|x40px|link={{#if:{{{name|{{{1|}}}}}}|{{{name|{{{1}}}}}}|Anonymous}}]]
</div>
<div>
{{#if:{{{isPinned|{{{6|}}}}}}|
<div class="youtube-pinned">
<div class="youtube-pin">
[[File:Ytpin.png|12px]]
</div>
[[Pinniped|Pinned]] comment
</div>
|}}
<div class="youtube-signature">
<div class="youtube-author {{#if:{{{isOP|{{{7|}}}}}}|youtube-op|}}">
{{{name|{{{1|Anonymous}}}}}}
</div>
<span class="date">{{{timeAgo|{{{5|1 day ago}}}}}}</span>
</div>

<div class="youtube-content">
{{{content|{{{3|}}}}}}
</div>

<div class="youtube-status">
<div class="youtube-like">[[File:Ytlike.png|24px]]</div>
{{#if:{{{numLikes|{{{4|}}}}}}|<span style="margin-right:8px">{{{numLikes|{{{4}}}}}}</span>}}
<div class="youtube-dislike">[[File:Ytdislike.png|24px]]</div>
<div style="position:relative">
{{#if:{{{isHearted|{{{8|}}}}}}|<div class="youtube-heart-op">
[[File:{{{opPfp|{{{9|Ytpurple.jpg}}}}}}|x14px]]
</div>
<div class="youtube-heart-heart">
[[File:Ytheart.png|15px]]
</div>
|}}
</div>

<span class="youtube-reply-prompt">Reply</span>
</div>

</div>
</div>{{#css:
.youtube-comment p{margin:0px;}
.youtube-comment{
font-family:"Roboto","Arial",sans-serif;
font-size:0.875rem;
font-weight:400;
line-height:1.25rem;
max-width:500px;
display:flex;
}
.youtube-pfp{
min-width:40px;
width: 40px;
height: 40px;
border-radius:50%;
margin-right:16px;
overflow:hidden;
}
.youtube-pin{
margin-left:-2px;
margin-right:4px;
}
.youtube-author{
font-size:0.8125rem;
font-height:1.125rem;
font-weight:600;
color:#0f0f0f;
}
.youtube-op{
height:20px;
margin-bottom:2px;
border-radius:12px;
padding:0 6px;
background-color:#888888;
color: #ffffff;
}
.date{padding-left:4px}
.date:hover{color:#0f0f0f}

.youtube-pinned, .youtube-signature{
color: #606060;
font-size:0.75rem;
font-height:1.125rem;
font-weight:400;
display:flex;
align-items:baseline;
margin-bottom:1px;
}
.youtube-pinned{margin-bottom:8px;}
.youtube-pinned a{
color: #606060;
text-decoration:none;
}
.youtube-signature{margin-bottom:2px;}

.youtube-status{
margin-top:4px;
min-height:16px;
display:flex;
align-items:center;
}
.youtube-like,.youtube-dislike{
width:32px;
height:32px
display:flex;
align-items:center;
}
.youtube-like{
margin-left:-8px;
}
.youtube-dislike{

}
.youtube-heart-op{
margin: 10px;
width: 14px;
height: 14px;
border-radius:50%;
overflow: hidden;
border: 1px solid white;
}
.youtube-heart-op p a{
display:inline-block;
height:100%;
}
.youtube-heart-op p a img{vertical-align:top;}
.youtube-heart-heart{
position:absolute;
right:3px;
bottom:4px;
width:15px;
height:15px;
}

.youtube-reply-prompt{
font-weight:500;
color:#0f0f0f;
margin-left:8px;
}

.youtube-replies{margin-left:56px;}

.youtube-dropdown{
display:inline-block;
border-radius:18px;
color:#065fd4;
font-size:14px;
font-weight:600;
line-height:36px;
height:36px;
padding: 0 12px;
}
.youtube-replies-arrow{
margin-left:-8px;
}
.youtube-dropdown:hover{background-color:#def1ff}
}}

Template:Youtube Comment

2023-03-31T04:56:45Z

Raul: Created page with "<noinclude>There are two youtube comment templates, <nowiki>{{Youtube Comment}}</nowiki> and <nowiki>{{Youtube Reply}}</nowiki>. They both take the same parameters: <nowiki> {..."

<noinclude>There are two youtube comment templates, <nowiki>{{Youtube Comment}}</nowiki> and <nowiki>{{Youtube Reply}}</nowiki>. They both take the same parameters:
<nowiki>
{{Youtube Comment|name=|pfp=|content=|numLikes=|timeAgo=|isPinned=|isOP=|isHearted=|opPfp=}}
</nowiki>

{{Youtube Comment|name=Spike|pfp=|content=DUDES. TAS IN THE TITLE MEANS TOOL-ASSISTED SPEEDRUN. I DON'T THINK A HUMAN COULD DO THIS.|numLikes=26|timeAgo=1 week ago|isPinned=true|isOP=1|isHearted=|opPfp=}}

{{Youtube Reply|name=Englishcreamcakes|pfp=Melonponsuke.png|content=I vote pencil shee never got a vote.|numLikes=38,022|timeAgo=12 years ago|isPinned=|isOP=|isHearted=1|opPfp=DiaSpike.png}}

{{Youtube Reply|SPIKE||WHO ARE YOU TALKING TO||||true||}}

===Parameters===
# "name" is the username in the comment. Defaults to "[[Anonymous]]" if this parameter isn't given.
# "pfp" is the profile picture of the comment. You should include the file type here, like "pfp=Melonponsuke.png" with the ".png" included! If this parameter isn't given, then the template will default to Dia"name".png, using the first parameter. So, if you choose not to include this term, you should make sure that the Dia file [[Category:Pages_with_broken_file_links|exists]].
# "content" is the body of the youtube comment.
# "numLikes" is the number of likes the comment has. If this isn't given, then nothing will display between the dislike and like button.
# "timeAgo" is the text saying when the comment was written. If this isn't given, then it defaults to "1 [[Like_a_day|day]] ago"
** "numLikes" and "timeAgo" can really be whatever text you want, [[Schrödinger's_silly|if]] you're feeling silly.
# "isPinned" determines whether the youtube comment is pinned. It becomes true whenever ANY text is given, so if you don't want the comment pinned you should leave this parameter [[Silence|empty]]. This can even be given to a <nowiki>{{Youtube Reply}}</nowiki>.
# "isOP" specifies whether the username should be highlighted, like Youtube does with comments written by the video uploader. It becomes true whenever ANY text is given.
# "isHearted" specifies whether the comment should appear with a [[Valentine's_Day|heart]] given by the video uploader. It becomes true whenver ANY text is given.
# "opPfp" is the profile picture of the video uploader, which appears when they give a comment a heart. Don't forget to include the file type! This parameter won't be used unless you've given "isHearted" a value. If "isHearted" is set but not "opPfp", then a default Youtube [[avatar]] will be used.

The above example was generated like this:
<syntaxhighlight>
{{Youtube Comment|name=Spike|pfp=|content=DUDES. TAS IN THE TITLE MEANS TOOL-ASSISTED SPEEDRUN. I DON'T THINK A HUMAN COULD DO THIS.|numLikes=26|timeAgo=1 week ago|isPinned=true|isOP=1|isHearted=|opPfp=}}

{{Youtube Reply|name=Englishcreamcakes|pfp=Melonponsuke.png|content=I vote pencil shee never got a vote.|numLikes=38,022|timeAgo=12 years ago|isPinned=|isOP=|isHearted=1|opPfp=DiaSpike.png}}

{{Youtube Reply|SPIKE||WHO ARE YOU TALKING TO||||true||}}
</syntaxhighlight>

===Comments vs. Replies===
The difference between <nowiki>{{Youtube Comment}}</nowiki> and <nowiki>{{Youtube Reply}}</nowiki> is that replies are indented, and hidden behind a "show replies" collapsible. The purpose of having two different templates is so that all the replies to a single comment can be collapsed and expanded independently of other replies to other comments. Separate templates also allows the collapsible toggle to count and display the number of replies. '''There must be a <nowiki>{{Youtube Comment}}</nowiki>placed before any <nowiki>{{Youtube Reply}}</nowiki>, or else the replies will break.''' All replies appearing after a <nowiki>{{Youtube Comment}}</nowiki> will behave as part of the same thread until the next <nowiki>{{Youtube Comment}}</nowiki> is placed. Be aware of this if you put other stuff between the individual replies.

If you find any errors, please let [[User:Raul|me]] know! Thank you!
</noinclude>
{{#vardefine:threadCount|{{#varexists:threadCount|{{#expr:{{#var:threadCount}}+1}}|1}}}}
<div class="youtube-comment">
<div class="youtube-pfp">
[[File:{{#if:{{{pfp|{{{2|}}}}}}|{{{pfp|{{{2}}}}}}|{{#if:{{{name|{{{1|}}}}}}|Dia{{{name|{{{1}}}}}}.png|Ytpurple.jpg}}}}|x40px|link={{#if:{{{name|{{{1|}}}}}}|{{{name|{{{1}}}}}}|Anonymous}}]]
</div>
<div>
{{#if:{{{isPinned|{{{6|}}}}}}|
<div class="youtube-pinned">
<div class="youtube-pin">
[[File:Ytpin.png|12px]]
</div>
[[Pinniped|Pinned]] comment
</div>
|}}
<div class="youtube-signature">
<div class="youtube-author {{#if:{{{isOP|{{{7|}}}}}}|youtube-op|}}">
{{{name|{{{1|Anonymous}}}}}}
</div>
<span class="date">{{{timeAgo|{{{5|1 day ago}}}}}}</span>
</div>

<div class="youtube-content">
{{{content|{{{3|}}}}}}
</div>

<div class="youtube-status">
<div class="youtube-like">[[File:Ytlike.png|24px]]</div>
{{#if:{{{numLikes|{{{4|}}}}}}|<span style="margin-right:8px">{{{numLikes|{{{4}}}}}}</span>}}
<div class="youtube-dislike">[[File:Ytdislike.png|24px]]</div>
<div style="position:relative">
{{#if:{{{isHearted|{{{8|}}}}}}|<div class="youtube-heart-op">
[[File:{{{opPfp|{{{9|Ytpurple.jpg}}}}}}|x14px]]
</div>
<div class="youtube-heart-heart">
[[File:Ytheart.png|15px]]
</div>
|}}
</div>

<span class="youtube-reply-prompt">Reply</span>
</div>

</div>
</div>

Template:Youtube Reply

2023-03-31T04:55:17Z

Raul: Created page with "<noinclude>See <nowiki>{{Template:Youtube Comment}}</nowiki> for how to use.</noinclude>{{#vardefine:replyCount{{#var:threadCount}}|{{#varexists:replyCount{{#var:threadCount}}..."

<noinclude>See <nowiki>{{Template:Youtube Comment}}</nowiki> for how to use.</noinclude>{{#vardefine:replyCount{{#var:threadCount}}|{{#varexists:replyCount{{#var:threadCount}}|{{#expr:{{#var:replyCount{{#var:threadCount}}}}+1}}|1}}}}
{{#ifeq:{{#var:replyCount{{#var:threadCount}}}}|1|
<div class="youtube-replies youtube-dropdown mw-customtoggle-{{#var:threadCount}}"><span class="youtube-replies-arrow">[[File:Ytreply.png|24px]]</span> {{#var_final:replyCount{{#var:threadCount}}|1}} replies</div>
|}}
<div class="youtube-replies youtube-comment mw-collapsible mw-collapsed" id="mw-customcollapsible-{{#var:threadCount}}">
<div class="youtube-pfp">
[[File:{{#if:{{{pfp|{{{2|}}}}}}|{{{pfp|{{{2}}}}}}|{{#if:{{{name|{{{1|}}}}}}|Dia{{{name|{{{1}}}}}}.png|Ytpurple.jpg}}}}|x40px|link={{#if:{{{name|{{{1|}}}}}}|{{{name|{{{1}}}}}}|Anonymous}}]]
</div>
<div>
{{#if:{{{isPinned|{{{6|}}}}}}|
<div class="youtube-pinned">
<div class="youtube-pin">
[[File:Ytpin.png|12px]]
</div>
[[Pinniped|Pinned]] comment
</div>
|}}
<div class="youtube-signature">
<div class="youtube-author">
{{{name|{{{1|Anonymous}}}}}}
</div>
<span class="date">{{{timeAgo|{{{5|1 day ago}}}}}}</span>
</div>

<div class="youtube-content">
{{{content|{{{3|}}}}}}
</div>

<div class="youtube-status">
<div class="youtube-like">[[File:Ytlike.png|24px]]</div>
{{#if:{{{numLikes|{{{4|}}}}}}|<span style="margin-right:8px">{{{numLikes|{{{4}}}}}}</span>}}
<div class="youtube-dislike">[[File:Ytdislike.png|24px]]</div>
<div style="position:relative">
{{#if:{{{isHearted|{{{8|}}}}}}|<div class="youtube-heart-op">
[[File:{{{opPfp|{{{9|Ytpurple.jpg}}}}}}|x14px]]
</div>
<div class="youtube-heart-heart">
[[File:Ytheart.png|15px]]
</div>
|}}
</div>
<span class="youtube-reply-prompt">Reply</span>
</div>

</div>
</div>

User:Raul

2023-03-30T06:19:40Z

Raul:

<noinclude>

== Raul Wikicamp 2 User:Raul rectangle.zone Userwiki:Raul on The Wiki Camp 2 ==
It rhymes with Paul...
[[File:Latexdeck.png|alt=|thumb|360x360px|My (non-competition) character, latexdeck]]
RaulEndy#7456 on discord.

I like object shows and math and webcomics and traditional drawing and anime and et and cetera. I only joined after challenge 4 ended, but I hope I can help out by making cool articles and stuff.

=== Check out my templates ===

{{Mbox|||text=''This list is incomplete. You can't help by expanding it. Only I can do that, obv.''}}

[[Template:Tumblr]]
</noinclude>

File:Latexdeck.png

2023-03-30T06:03:56Z

Raul:

Template:Tumblr

2023-03-30T06:02:13Z

Raul: final...

<noinclude>

There are three Tumblr templates: Tumblr (the container), Tumblr Post (for individual posts), and Tumblr Ask (for ask posts).

<nowiki style="color:#AA4A44">{{Tumblr|tags=|numNotes=|post=}}</nowiki>

<nowiki style="color:#228B22">{{Tumblr Post|name=|pfp=|content=}}</nowiki>

<nowiki style="color:#000080">{{Tumblr Ask|name=|pfp=|content=}}</nowiki>

<nowiki>{{Tumblr Post}} and {{Tumblr Ask}} need to be placed inside {{Tumblr}}</nowiki> or else they won't look right

If you find any errors, please let [[User:Raul|me]] know!

==Example==

{{Tumblr|tags=no further comment|numNotes=126|post={{Tumblr Post|name=Waldorf|pfp=DiaWaldorf.png|content={{Tumblr Ask|name=Statler|pfp=DiaStatler.png|content=I heard that one Tumblr user liked to steal old bones.}}{{Tumblr Ask|Waldorf||Now the only old bones around here are you and me!}}<br>Oh ho ho ho!}}{{Tumblr Post|microplasticlover|Tumblranon.png|this site is free y'all}}}}

<nowiki>{{Tumblr|tags=no further comment|numNotes=126|post={{Tumblr Post|name=Waldorf|pfp=DiaWaldorf.png|content={{Tumblr Ask|name=Statler|pfp=DiaStatler.png|content=I heard that one Tumblr user liked to steal old bones.}}{{Tumblr Ask|Waldorf||Now the only old bones around here are you and me!}}<br>Oh ho ho ho!}}{{Tumblr Post|microplasticlover|Tumblranon.png|this site is free y'all}}}}</nowiki>

'''Here is the same command, expanded for readability.'''
<syntaxhighlight>
{{Tumblr|tags=no further comment|numNotes=126|post=

{{Tumblr Post|name=Waldorf|pfp=DiaWaldorf.png|content=

{{Tumblr Ask|name=Statler|pfp=DiaStatler.png|content=I heard that one Tumblr user liked to steal old bones.}}

{{Tumblr Ask|Waldorf||Now the only old bones around here are you and me!}}

Oh ho ho ho!

}}

{{Tumblr Post|microplasticlover|Tumblranon.png|this site is free y'all}}

}}</syntaxhighlight>

=== Usage Notes ===

* "tags" is a list of words separated by spaces.
* "numNotes" is the number of notes the post has.
* You can place as many <nowiki>{{Tumblr Post}}</nowiki> templates as you want within the "post" parameter of <nowiki>{{Tumblr}}</nowiki>.
** If you just want one <nowiki>{{Tumblr Post}}</nowiki> then the [[#Shortened_Forms|shortened form]] of <nowiki>{{Tumblr}}</nowiki> may be more convenient.
* "name" is the username
* "pfp" is a link to a profile picture image. Make sure to include the file type! For example, pfp=Melonponsuke.png
** In any of the templates, if "name" is provided but not "pfp", then the post will use File:Dia"name".png instead. If this file doesn't exist, then you should fill out that parameter with "Tumblranon.png" or something similar.
* You can place as many <nowiki>{{Tumblr Ask}}</nowiki> templates as you want within the "content" parameter of <nowiki>{{Tumblr Post}}</nowiki>, however Tumblr only uses one question at a time.
** There's also a [[#Shortened_Forms|shortened form]] for if you have just one ask and one answer.

== Shortened Forms ==

In the shorthand forms, the "post" parameter of <nowiki>{{Template}}</nowiki> must be blank for it to work.

'''Shortened form for a single post.'''

<nowiki>

{{Tumblr|tags|numNotes|post|name|pfp|content}}

</nowiki>

This is the same as
<nowiki>
{{Tumblr|tags|numNotes|{{Tumblr Post|name|pfp|content}}}}
</nowiki>

'''Shortened form for a single ask post.'''

<nowiki>

{{Tumblr|tags|numNotes|post|name|pfp|content|asker|askPfp|ask}}

</nowiki>

This is the same as
<nowiki>
{{Tumblr|tags|numNotes|{{Tumblr Post|name|pfp|content|asker|askPfp|ask}}}}
</nowiki>

Which is the same as
<nowiki>
{{Tumblr|tags|numNotes|{{Tumblr Post|name|pfp|content{{Tumblr Ask|asker|askPfp|ask}}}}
</nowiki>

Below is the template that results from all blank parameters: <nowiki>{{Tumblr|||||||||}}</nowiki>

</noinclude>
<div class="tumblr">
{{{post|{{{3|{{Tumblr Post|{{{name|{{{4|}}}}}}|{{{pfp|{{{5|}}}}}}|{{{content|{{{6|}}}}}}|{{{asker|{{{7|}}}}}}|{{{askPfp|{{{8|}}}}}}|{{{ask|{{{9|}}}}}}}}}}}}}}
<div class="tumblr-tags">
{{#if:{{{tags|{{{1|}}}}}}|<span>{{#replace:{{{tags|{{{1|}}}}}}| |</span><span>}}</span>}}
</div>
<div class="tumblr-footer">
{{{numNotes|{{{2|<br>}}}}}} {{#if:{{{numNotes|{{{2|}}}}}}| {{PLURAL: {{{numNotes|{{{2|}}}}}}|note|notes}}|}}
<div class="tumblr-icons">
[[File:TumblrShare.png|x24px]]

[[File:Reblog.png|x24px]]

[[File:TumblrHeart.png|x24px]]
</div>
</div>
</div>

{{#css:
.tumblr{
box-shadow: 0 0 0 1px rgba(0,0,0,0.07);
border-radius:3px;
max-width: 540px;
background-color: #ffffff;
font-family: "Favorit","Helvetica Neue","HelveticaNeue",Helvetica,Arial,sans-serif;
word-wrap:break-word;
}
.tumblr > div{
padding-left: 20px;
padding-right: 20px;
}
.tumblr-post{
margin-top: 15px;
margin-bottom: 15px;
padding-top: 15px;
line-height: 1.5;
border-top: 1px solid rgba(0,0,0,0.13);
position:relative;
}
.tumblr-pfp{
width:25px;
height:25px;
border-radius:3px;
overflow:hidden;
margin-right: 10px;
}

.tumblr-pfp p{
margin:0px;
}

.tumblr-post:first-child{border-top: none;}
.tumblr-post:first-child .tumblr-tinyreblog{display:none;}

.tumblr-tinyreblog{
width:14px;
height:14px;
overflow:hidden;
position:absolute;
top:calc(38px);
left: 36px;
}
.tumblr-tinyreblog p{margin: 0px;}
.tumblr-tinyreblog a{
display:inline-block;
height:100%;
}
.tumblr-tinyreblog img{vertical-align:top;}
.tumblr-post-header a, .tumblr-post-header a:visited, .tumblr-post-header a.new:visited{
color: inherit;
text-decoration: none;
}
.tumblr-post-header{
font-weight:700;
font-size:.875rem;
display:flex;
align-items:center;
}
.tumblr-post-header p{max-width:465px;}
.follow{
margin-left: 7px;
color: rgb(0,184,255);
}
.follow:hover{text-decoration:underline;}
.tumblr-tags, .tumblr-footer {
color: rgb(0, 0, 0, .65);
font-size: .875rem;
margin-top: 12px;
}
.tumblr-tags p{display:inline;}
.tumblr-tags span:hover{text-decoration:underline;}
.tumblr-tags span::before{content:"#";}
.tumblr-tags span{margin-right: 5px;}
.tumblr-tags{margin-bottom: -6px;}
.tumblr-footer{
font-weight: 700;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 25px;
padding: 3px 0px;
}
.tumblr-icons p{
width:48px;
height:48px;
display: inline-flex;
align-items: center;
justify-content: center;
}

.tumblr-ask{
display:flex;
padding-left:20px;
padding-right:20px;
padding-bottom:10px;
margin-top:15px;
margin-bottom:10px;
}
.tumblr-ask-box{
background-color: rgba(0,0,0,0.07);
border-radius:3px;
flex-grow:1;
position:relative;
padding: 15px 20px 18px 20px;
max-width:382px;
}
.tumblr-ask-box p:first-child{
color: rgba(0,0,0,0.65);
font-size:0.546875 rem;
font-weight:400;
line-height:1.5;
margin-bottom: 20px;
}
.tumblr-ask-box p{
color: #000000;
}
.tumblr-ask-tail{
box-sizing:border-box;
width:8px;
height:17px;
border-top: 8px solid rgba(0,0,0,0);
border-bottom: 8px solid rgba(0,0,0,0);
border-left: 8px solid rgba(0,0,0,0.07);
position:absolute;
top:10px;
right:-8px;
}
.tumblr-ask-pfp{
height:40px;
width:40px;
overflow:hidden;
border-radius:3px;
flex-shrink:0;
align-self:flex-start;
margin-left:18px;
}
.tumblr-ask-pfp p{margin: 0px;}
}}

Template:Tumblr Ask

2023-03-30T05:48:47Z

Raul: wip

<noinclude>
See [[Template:Tumblr]] for explanation on how to use.
</noinclude>
<div class="tumblr-ask">
<div class="tumblr-ask-box">
<span style="font-weight:700">{{#if:{{{name|{{{1|}}}}}}|{{{name|{{{1}}}}}}|Anonymous}}</span> asked:

{{{content|{{{3|}}}}}}
<div class="tumblr-ask-tail">
</div>
</div>
<div class="tumblr-ask-pfp">
[[File:{{#if:{{{pfp|{{{2|}}}}}}|{{{pfp|{{{2}}}}}}|{{#if:{{{name|{{{1|}}}}}}|Dia{{{name|{{{1}}}}}}.png|Tumblranon.png}}}}|x25px|link={{#if:{{{name|{{{1|}}}}}}|{{{name|{{{1}}}}}}|Anonymous}}]]
</div>
</div>

Template:Tumblr

2023-03-30T05:25:23Z

Raul: nearly

<noinclude>
There are three Tumblr templates: Tumblr (the container), Tumblr Post (for individual posts), and Tumblr Ask (for ask posts).

<nowiki style="color:#AA4A44">{{Tumblr|tags=|numNotes=|post=}}</nowiki>

<nowiki style="color:#228B22">{{Tumblr Post|name=|pfp=|content=}}</nowiki>

<nowiki style="color:#000080">{{Tumblr Ask|name=|pfp=|content=}}</nowiki>

<nowiki>{{Tumblr Post}} and {{Tumblr Ask}} need to be placed inside {{Tumblr}}</nowiki> or else they won't look right

==Example==

{{Tumblr|tags=no further comment|numNotes=126|content={{Tumblr Post|name=Waldorf|pfp=DiaWaldorf.png|content={{Tumblr Ask|name=Statler|pfp=DiaStatler.png|content=I heard that one Tumblr user liked to steal old bones.}}{{Tumblr Ask|name=Waldorf||Now the only old bones around here are you and me!}}<br>Oh ho ho ho!}}{{Tumblr Post|microplasticlover||this site is free y'all}}}}

<nowiki>{{Tumblr|tags=no further comment|numNotes=126|content={{Tumblr Post|name=Waldorf|pfp=DiaWaldorf.png|content={{Tumblr Ask|name=Statler|pfp=DiaStatler.png|content=I heard that one Tumblr user liked to steal old bones.}}{{Tumblr Ask|name=Waldorf||Now the only old bones around here are you and me!}}<br>Oh ho ho ho!}}{{Tumblr Post|microplasticlover||this site is free y'all}}}}</nowiki>

'''Here is the same command, expanded for readability.'''
<syntaxhighlight>
{{Tumblr|tags=no further comment|numNotes=126|content=

{{Tumblr Post|name=Waldorf|pfp=DiaWaldorf.png|content=

{{Tumblr Ask|name=Statler|pfp=DiaStatler.png|content=I heard that one Tumblr user liked to steal old bones.}}

{{Tumblr Ask|Waldorf||Now the only old bones around here are you and me!}}

Oh ho ho ho!

}}

{{Tumblr Post|microplasticlover||this site is free y'all}}

}}</syntaxhighlight>

=== Usage Notes ===

* "tags" is a list of words separated by spaces.
* "numNotes" is the number of notes the post has.
* You can place as many <nowiki>{{Tumblr Post}}</nowiki> templates as you want within the "post" parameter of <nowiki>{{Tumblr}}</nowiki>.
** If you just want one <nowiki>{{Tumblr Post}}</nowiki> then the [[#Shortened_Forms|shortened form]] of <nowiki>{{Tumblr}}</nowiki> may be more convenient.
* "name" is the username
* "pfp" is a link to a profile picture image. Make sure to include the file type! For example, pfp=Melonponsuke.png
** In any of the templates, if "name" is provided but not "pfp", then the post will try to use File:Dia"name".png (if it exists).
** Otherwise, if no "pfp" parameter is given, it will use the Tumblr anonymous profile picture. The username will be "Anonymous" if there's no "name".
* You can place as many <nowiki>{{Tumblr Ask}}</nowiki> templates as you want within the "content" parameter of <nowiki>{{Tumblr Post}}</nowiki>, however Tumblr only uses one question at a time.
** There's also a [[#Shortened_Forms|shortened form]] for if you have just one ask and one answer.

== Shortened Forms ==

In the shorthand forms, the "post" parameter of <nowiki>{{Template}}</nowiki> must be blank for it to work.

'''Shortened form for a single post.'''

<nowiki>

{{Tumblr|tags|numNotes|post|name|pfp|content}}

</nowiki>

This is the same as
<nowiki>
{{Tumblr|tags|numNotes|{{Tumblr Post|name|pfp|content}}}}
</nowiki>

'''Shortened form for a single ask post.'''

<nowiki>

{{Tumblr|tags|numNotes|post|name|pfp|content|asker|askPfp|ask}}

</nowiki>

This is the same as
<nowiki>
{{Tumblr|tags|numNotes|{{Tumblr Post|name|pfp|content|asker|askPfp|ask}}}}
</nowiki>

Which is the same as
<nowiki>
{{Tumblr|tags|numNotes|{{Tumblr Post|name|pfp|content{{Tumblr Ask|asker|askPfp|ask}}}}
</nowiki>

Below is the template that results from all blank parameters: <nowiki>{{Tumblr|||||||||}}</nowiki>

</noinclude>
<div class="tumblr">
{{{post|{{{3|{{Tumblr Post|{{{name|{{{4|}}}}}}|{{{pfp|{{{5|}}}}}}|{{{content|{{{6|}}}}}}|{{{asker|{{{7|}}}}}}|{{{askPfp|{{{8|}}}}}}|{{{ask|{{{9|}}}}}}}}}}}}}}
<div class="tumblr-tags">
{{#replace:{{{tags|{{{1|}}}}}}| |<p></p>}}
</div>
<div class="tumblr-footer">
{{{numNotes|{{{2|<br>}}}}}} {{#if:{{{numNotes|{{{2|}}}}}}| {{PLURAL: {{{numNotes|{{{2|}}}}}}|note|notes}}|}}
<div class="tumblr-icons">
[[File:TumblrShare.png|x24px]]

[[File:Reblog.png|x24px]]

[[File:TumblrHeart.png|x24px]]
</div>
</div>
</div>

{{#css:
.tumblr{
box-shadow: 0 0 0 1px rgba(0,0,0,0.07);
border-radius:3px;
max-width: 540px;
background-color: #ffffff;
font-family: "Favorit","Helvetica Neue","HelveticaNeue",Helvetica,Arial,sans-serif;
word-wrap:break-word;
}
.tumblr > div{
padding-left: 20px;
padding-right: 20px;
}
.tumblr-post{
margin-top: 15px;
margin-bottom: 15px;
padding-top: 15px;
line-height: 1.5;
border-top: 1px solid rgba(0,0,0,0.13);
position:relative;
}
.tumblr-pfp{
width:25px;
height:25px;
border-radius:3px;
overflow:hidden;
margin-right: 10px;
}

.tumblr-pfp p{
margin:0px;
}

.tumblr-post:first-child{border-top: none;}
.tumblr-post:first-child .tumblr-tinyreblog{display:none;}

.tumblr-tinyreblog{
width:14px;
height:14px;
overflow:hidden;
position:absolute;
top:calc(38px);
left: 36px;
}
.tumblr-tinyreblog p{margin: 0px;}
.tumblr-tinyreblog a{
display:inline-block;
height:100%;
}
.tumblr-tinyreblog img{vertical-align:top;}
.tumblr-post-header a{
color: inherit;
text-decoration: none;
}
.tumblr-post-header{
font-weight:700;
font-size:.875rem;
display:flex;
align-items:center;
}
.tumblr-post-header p{max-width:465px;}
.follow{
margin-left: 7px;
color: rgb(0,184,255);
}
.follow:hover{text-decoration:underline;}
.tumblr-tags, .tumblr-footer {
color: rgb(0, 0, 0, .65);
font-size: .875rem;
margin-top: 12px;
}
.tumblr-tags p{display:inline;}
.tumblr-tags p:hover{text-decoration:underline;}
.tumblr-tags p::before{content:"#";}
.tumblr-tags{margin-bottom: -6px;}
.tumblr-footer{
font-weight: 700;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 25px;
padding: 3px 0px;
}
.tumblr-icons p{
width:48px;
height:48px;
display: inline-flex;
align-items: center;
justify-content: center;
}

.tumblr-ask{
display:flex;
padding-left:20px;
padding-right:20px;
padding-bottom:10px;
margin-top:15px;
margin-bottom:10px;
}
.tumblr-ask-box{
background-color: rgba(0,0,0,0.07);
border-radius:3px;
flex-grow:1;
position:relative;
padding: 15px 20px 18px 20px;
max-width:382px;
}
.tumblr-ask-box p:first-child{
color: rgba(0,0,0,0.65);
font-size:0.546875 rem;
font-weight:400;
line-height:1.5;
margin-bottom: 20px;
}
.tumblr-ask-box p{
color: #000000;
}
.tumblr-ask-tail{
box-sizing:border-box;
width:8px;
height:17px;
border-top: 8px solid rgba(0,0,0,0);
border-bottom: 8px solid rgba(0,0,0,0);
border-left: 8px solid rgba(0,0,0,0.07);
position:absolute;
top:10px;
right:-8px;
}
.tumblr-ask-pfp{
height:40px;
width:40px;
overflow:hidden;
border-radius:3px;
flex-shrink:0;
align-self:flex-start;
margin-left:18px;
}
.tumblr-ask-pfp p{margin: 0px;}
}}

Template:Tumblr Post

2023-03-30T05:22:42Z

Raul: wip

<noinclude>
See [[Template:Tumblr]] for explanation on how to use.
</noinclude>
<div class="tumblr-post">
<div class="tumblr-post-header">
<div class="tumblr-pfp">
[[File:{{#if:{{{pfp|{{{2|}}}}}}|{{{pfp|{{{2}}}}}}|{{#if:{{{name|{{{1|}}}}}}|Dia{{{name|{{{1}}}}}}.png|Tumblranon.png}}}}|x25px|link={{#if:{{{name|{{{1|}}}}}}|{{{name|{{{1}}}}}}|Anonymous}}]]
<div class="tumblr-tinyreblog">
[[File:Tinyreblog.png|14px]]
</div>
</div>
<span>[[{{#if:{{{name|{{{1|}}}}}}|{{{name|{{{1}}}}}}|Anonymous}}]]</span> <span class="follow">Follow</span>
</div>
{{#if:{{{ask|{{{6|{{{asker|{{{4|{{{askPfp|{{{5|}}}}}}}}}}}}}}}}}}|{{Tumblr Ask|{{{asker|{{{4}}}}}}|{{{askPfp|{{{5}}}}}}|{{{ask|{{{6}}}}}}}}}}{{{content|{{{3|}}}}}}
</div>

Template:Tumblr Ask

2023-03-30T05:22:13Z

Raul: wip

<noinclude>
See [[Template:Tumblr]] for explanation on how to use.
</noinclude>
<div class="tumblr-ask">
<div class="tumblr-ask-box">
<span style="font-weight:700">{{#if:{{{name|{{{1|}}}}}}|{{{name|{{{1}}}}}}|Anonymous}}</span> asked:
{{{content|{{{3|}}}}}}
<div class="tumblr-ask-tail">
</div>
</div>
<div class="tumblr-ask-pfp">
[[File:{{#if:{{{pfp|{{{2|}}}}}}|{{{pfp|{{{2}}}}}}|{{#if:{{{name|{{{1|}}}}}}|Dia{{{name|{{{1}}}}}}.png|Tumblranon.png}}}}|x25px|link={{#if:{{{name|{{{1|}}}}}}|{{{name|{{{1}}}}}}|Anonymous}}]]
</div>
</div>

Template:Tumblr Ask

2023-03-30T00:32:36Z

Raul: wip

<div class="tumblr-ask">
<div class="tumblr-ask-box">
<span style="font-weight:700">{{#if:{{{name|{{{1|}}}}}}|{{{name|{{{1}}}}}}|Anonymous}}</span> asked:
{{{content|{{{2|}}}}}}
<div class="tumblr-ask-tail">
</div>
</div>
<div class="tumblr-ask-pfp">
[[File:{{#if:{{{pfp|{{{3|}}}}}}|{{{pfp|{{{3}}}}}}|{{#if:{{{name|{{{1|}}}}}}|Dia{{{name|{{{1}}}}}}.png|Tumblranon.png}}}}|x25px|link={{#if:{{{name|{{{1|}}}}}}|{{{name|{{{1}}}}}}|Anonymous}}]]
</div>
</div>

Template:Tumblr

2023-03-30T00:18:13Z

Raul: wip

<noinclude>{{Tumblr}}</noinclude>

<div class="tumblr">
{{{post|{{{1|{{Tumblr Post|{{{name|{{{4|}}}}}}|{{{content|{{{5|}}}}}}|{{{pfp|{{{6|}}}}}}}}}}}}}}
<div class="tumblr-tags">
{{#replace:{{{tags|{{{2|}}}}}}| |<p></p>}}
</div>
<div class="tumblr-footer">
{{{numNotes|{{{3|<br>}}}}}} {{#if:{{{numNotes|{{{3|}}}}}}| {{PLURAL: {{{numNotes|{{{3|}}}}}}|note|notes}}|}}
<div class="tumblr-icons">
[[File:TumblrShare.png|x24px]]

[[File:Reblog.png|x24px]]

[[File:TumblrHeart.png|x24px]]
</div>
</div>
</div>

{{#css:
.tumblr{
box-shadow: 0 0 0 1px rgba(0,0,0,0.07);
border-radius:3px;
max-width: 540px;
background-color: #ffffff;
font-family: "Favorit","Helvetica Neue","HelveticaNeue",Helvetica,Arial,sans-serif;
word-wrap:break-word;
}
.tumblr > div{
padding-left: 20px;
padding-right: 20px;
}
.tumblr-post{
margin-top: 15px;
margin-bottom: 15px;
padding-top: 15px;
line-height: 1.5;
border-top: 1px solid rgba(0,0,0,0.13);
position:relative;
}
.tumblr-pfp{
width:25px;
height:25px;
border-radius:3px;
overflow:hidden;
margin-right: 10px;
}

.tumblr-pfp p{
margin:0px;
}

.tumblr-post:first-child{border-top: none;}
.tumblr-post:first-child .tumblr-tinyreblog{display:none;}

.tumblr-tinyreblog{
width:14px;
height:14px;
overflow:hidden;
position:absolute;
top:calc(38px);
left: 36px;
}
.tumblr-tinyreblog p{margin: 0px;}
.tumblr-tinyreblog a{
display:inline-block;
height:100%;
}
.tumblr-tinyreblog img{vertical-align:top;}
.tumblr-post-header a{
color: inherit;
text-decoration: none;
}
.tumblr-post-header{
font-weight:700;
font-size:.875rem;
display:flex;
align-items:center;
}
.tumblr-post-header p{max-width:465px;}
.follow{
margin-left: 7px;
color: rgb(0,184,255);
}
.follow:hover{text-decoration:underline;}
.tumblr-tags, .tumblr-footer {
color: rgb(0, 0, 0, .65);
font-size: .875rem;
margin-top: 12px;
}
.tumblr-tags p{display:inline;}
.tumblr-tags p:hover{text-decoration:underline;}
.tumblr-tags p::before{content:"#";}
.tumblr-tags{margin-bottom: -6px;}
.tumblr-footer{
font-weight: 700;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 25px;
padding: 3px 0px;
}
.tumblr-icons p{
width:48px;
height:48px;
display: inline-flex;
align-items: center;
justify-content: center;
}

.tumblr-ask{
display:flex;
padding-left:20px;
padding-right:20px;
padding-bottom:10px;
margin-top:15px;
margin-bottom:10px;
}
.tumblr-ask-box{
background-color: rgba(0,0,0,0.07);
border-radius:3px;
flex-grow:1;
position:relative;
padding: 15px 20px 18px 20px;
max-width:382px;
}
.tumblr-ask-box p:first-child{
color: rgba(0,0,0,0.65);
font-size:0.546875 rem;
font-weight:400;
line-height:1.5;
margin-bottom: 20px;
}
.tumblr-ask-box p{
color: #000000;
}
.tumblr-ask-tail{
box-sizing:border-box;
width:8px;
height:17px;
border-top: 8px solid rgba(0,0,0,0);
border-bottom: 8px solid rgba(0,0,0,0);
border-left: 8px solid rgba(0,0,0,0.07);
position:absolute;
top:10px;
right:-8px;
}
.tumblr-ask-pfp{
height:40px;
width:40px;
overflow:hidden;
border-radius:3px;
flex-shrink:0;
align-self:flex-start;
margin-left:18px;
}
.tumblr-ask-pfp p{margin: 0px;}
}}

Template:Tumblr Post

2023-03-30T00:17:37Z

Raul: wip

<noinclude>
{{Tumblr Post}}
</noinclude>
<div class="tumblr-post">
<div class="tumblr-post-header">
<div class="tumblr-pfp">
[[File:{{#if:{{{pfp|{{{3|}}}}}}|{{{pfp|{{{3}}}}}}|{{#if:{{{name|{{{1|}}}}}}|Dia{{{name|{{{1}}}}}}.png|Tumblranon.png}}}}|x25px|link={{#if:{{{name|{{{1|}}}}}}|{{{name|{{{1}}}}}}|Anonymous}}]]
<div class="tumblr-tinyreblog">
[[File:Tinyreblog.png|14px]]
</div>
</div>
<span>[[{{#if:{{{name|{{{1|}}}}}}|{{{name|{{{1}}}}}}|Anonymous}}]]</span> <span class="follow">Follow</span>
</div>
{{{content|{{{2|}}}}}}
</div>

Template:Tumblr Post

2023-03-30T00:13:07Z

Raul: wip

<noinclude>
{{Tumblr Post}}
</noinclude>

<div class="tumblr-post">
<div class="tumblr-post-header">
<div class="tumblr-pfp">
[[File:{{#if:{{{pfp|{{{3|}}}}}}|{{{pfp|{{{3}}}}}}|{{#if:{{{name|{{{1|}}}}}}|Dia{{{name|{{{1}}}}}}.png|Tumblranon.png}}}}|x25px|link={{#if:{{{name|{{{1|}}}}}}|{{{name|{{{1}}}}}}|Anonymous}}]]
<div class="tumblr-tinyreblog">
[[File:Tinyreblog.png|14px]]
</div>
</div>
<span>[[{{#if:{{{name|{{{1|}}}}}}|{{{name|{{{1}}}}}}|Anonymous}}]]</span> <span class="follow">Follow</span>
</div>
{{{content|{{{2|}}}}}}
</div>

Template:Void

2023-03-29T05:05:55Z

Raul: don't know if this will work

Template:Tumblr Post

2023-03-29T04:43:33Z

Raul: wip

<noinclude>{{Tumblr Post}}</noinclude>

<div class="tumblr-post">
<div class="tumblr-post-header">
<div class="tumblr-pfp">
[[File:{{{pfp|{{{3|{{#if:{{{name|{{{1|}}}}}}|Dia{{{name|{{{1}}}}}}.png|Tumblranon.png}}}}}}}}|x25px|link={{{name|{{{1|Anonymous}}}}}}]]
<div class="tumblr-tinyreblog">
[[File:Tinyreblog.png|14px]]
</div>
</div>
<span>[[{{{name|{{{1|Anonymous}}}}}}]]</span> <span class="follow">Follow</span>
</div>
{{{content|{{{2|}}}}}}
</div>

Template:Tumblr

2023-03-29T04:41:26Z

Raul: wip

<noinclude>{{Tumblr}}</noinclude>

<div class="tumblr">
{{{content|{{{1|}}}}}}
<div class="tumblr-tags">
{{#replace:{{{tags|{{{2|}}}}}}| |<p></p>}}
</div>
<div class="tumblr-footer">
{{{numNotes|{{{3|<br>}}}}}} {{#if:{{{numNotes|{{{3|}}}}}}| {{PLURAL: {{{numNotes|{{{3|}}}}}}|note|notes}}|}}
<div class="tumblr-icons">
[[File:TumblrShare.png|x24px]]

[[File:Reblog.png|x24px]]

[[File:TumblrHeart.png|x24px]]
</div>
</div>
</div>

{{#css:
.tumblr{
box-shadow: 0 0 0 1px rgba(0,0,0,0.07);
border-radius:3px;
max-width: 540px;
background-color: #ffffff;
font-family: "Favorit","Helvetica Neue","HelveticaNeue",Helvetica,Arial,sans-serif;
word-wrap:break-word;
}
.tumblr > div{
padding-left: 20px;
padding-right: 20px;
}
.tumblr-post{
margin-top: 15px;
margin-bottom: 15px;
padding-top: 15px;
line-height: 1.5;
border-top: 1px solid rgba(0,0,0,0.13);
position:relative;
}
.tumblr-pfp{
width:25px;
height:25px;
border-radius:3px;
overflow:hidden;
margin-right: 10px;
}

.tumblr-pfp p{
margin:0px;
}

.tumblr-post:first-child{border-top: none;}
.tumblr-post:first-child .tumblr-tinyreblog{display:none;}

.tumblr-tinyreblog{
width:14px;
height:14px;
overflow:hidden;
position:absolute;
top:calc(38px);
left: 36px;
}
.tumblr-tinyreblog p{margin: 0px;}
.tumblr-tinyreblog a{
display:inline-block;
height:100%;
}
.tumblr-tinyreblog img{vertical-align:top;}
.tumblr-post-header a{
color: inherit;
text-decoration: none;
}
.tumblr-post-header{
font-weight:700;
font-size:.875rem;
display:flex;
align-items:center;
}
.tumblr-post-header p{max-width:465px;}
.follow{
margin-left: 7px;
color: rgb(0,184,255);
}
.follow:hover{text-decoration:underline;}
.tumblr-tags, .tumblr-footer {
color: rgb(0, 0, 0, .65);
font-size: .875rem;
margin-top: 12px;
}
.tumblr-tags p{display:inline;}
.tumblr-tags p:hover{text-decoration:underline;}
.tumblr-tags p::before{content:"#";}
.tumblr-tags{margin-bottom: -6px;}
.tumblr-footer{
font-weight: 700;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 25px;
padding: 3px 0px;
}
.tumblr-icons p{
width:48px;
height:48px;
display: inline-flex;
align-items: center;
justify-content: center;
}

.tumblr-ask{
display:flex;
padding-left:20px;
padding-right:20px;
padding-bottom:10px;
margin-top:15px;
margin-bottom:10px;
}
.tumblr-ask-box{
background-color: rgba(0,0,0,0.07);
border-radius:3px;
flex-grow:1;
position:relative;
padding: 15px 20px 18px 20px;
max-width:382px;
}
.tumblr-ask-box p:first-child{
color: rgba(0,0,0,0.65);
font-size:0.546875 rem;
font-weight:400;
line-height:1.5;
margin-bottom: 20px;
}
.tumblr-ask-box p{
color: #000000;
}
.tumblr-ask-tail{
box-sizing:border-box;
width:8px;
height:17px;
border-top: 8px solid rgba(0,0,0,0);
border-bottom: 8px solid rgba(0,0,0,0);
border-left: 8px solid rgba(0,0,0,0.07);
position:absolute;
top:10px;
right:-8px;
}
.tumblr-ask-pfp{
height:40px;
width:40px;
overflow:hidden;
border-radius:3px;
flex-shrink:0;
align-self:flex-start;
margin-left:18px;
}
.tumblr-ask-pfp p{margin: 0px;}
}}

User:Raul

2023-03-29T04:29:57Z

Raul: template test

<noinclude>
== Welcome to the realm ==
[[File:Vacuum Tube.png|frame|right|Vacuum Tuby :)]]
RaulEndy#7456 on discord.

<math>f(x) = x^2</math>

''Test''

'''Test'''
[[Damn Seal|Test]]

[http://crouton.net]

*Hi
*Hi
#Hi
#Hi
[[File:Tinyreblog.png|14px|link=Michigan]]
</noinclude>

<nowiki>{{Tumblr|name=|content=|pfp=|tags=|numNotes=|asker=|ask=|askPfp=|answer=}}</nowiki>

<div class="tumblr">
<div class="tumblr-post">
<div class="tumblr-post-header">
<div class="tumblr-pfp">
[[File:{{{pfp|{{{3|{{#if:{{{name|{{{1|}}}}}}|Dia{{{name|{{{1}}}}}}.png|Tumblranon.png}}}}}}}}|x25px|link={{{name|{{{1|Anonymous}}}}}}]]
<div class="tumblr-tinyreblog">
[[File:Tinyreblog.png|14px]]
</div>
</div>
<span>[[{{{name|{{{1|Anonymous}}}}}}]]</span> <span class="follow">Follow</span>
</div>
{{{content|{{{2|}}}}}}
</div>
<div class="tumblr-post">
<div class="tumblr-post-header">
<div class="tumblr-pfp">
[[File:Nojustno.png|x25px]]
<div class="tumblr-tinyreblog">
[[File:Tinyreblog.png|14px]]
</div>
</div>
<span>TheDeviousSeal32</span> <span class="follow">Follow</span>
</div>
Also, [[buy my stuff]]!
</div>
<div class="tumblr-tags">
{{#replace:{{{tags|{{{4|}}}}}}| |<p></p>}}
</div>
<div class="tumblr-footer">
{{{numNotes|{{{5|<br>}}}}}} {{#if:{{{numNotes|{{{5|}}}}}}| {{PLURAL: {{{numNotes|{{{5|}}}}}}|note|notes}}|}}
<div class="tumblr-icons">
[[File:TumblrShare.png|x24px]]

[[File:Reblog.png|x24px]]

[[File:TumblrHeart.png|x24px]]
</div>
</div>
</div>

<div class="tumblr">

<div class="tumblr-post">
<div class="tumblr-post-header">
<div class="tumblr-pfp">
[[File:Nojustno.png|x25px]]
</div>
<div class="tumblr-tinyreblog">
[[File:Tinyreblog.png|14px]]
</div>
<span>TheDeviousSeal32</span> <span class="follow">Follow</span>
</div>

<div class="tumblr-ask">
<div class="tumblr-ask-box">
<span style="font-weight:700">{{{asker|{{{6|Anonymous}}}}}}</span> asked:

{{{ask|{{{7|}}}}}}
<div class="tumblr-ask-tail">
</div>
</div>
<div class="tumblr-ask-pfp">
[[File:{{{askPfp|{{{8|{{#if:{{{asker|{{{6|}}}}}}|Dia{{{asker|{{{6}}}}}}.png|Tumblranon.png}}}}}}}}|x40px|link={{{asker|{{{6|Anonymous}}}}}}]]
</div>
</div>

<div class="tumblr-ask">
<div class="tumblr-ask-box">
<span style="font-weight:700">{{{name|{{{1|Anonymous}}}}}}</span> answered:

{{{answer|{{{9|}}}}}}
<div class="tumblr-ask-tail">
</div>
</div>
<div class="tumblr-ask-pfp">
[[File:{{{pfp|{{{3|{{#if:{{{name|{{{1|}}}}}}|Dia{{{name|{{{1}}}}}}.png|Tumblranon.png}}}}}}}}|x40px|link={{{name|{{{1|Anonymous}}}}}}]]
</div>
</div>

WTF guys?
</div>
<div class="tumblr-tags">
SSSSSSSSSS

AAAAaaaaaa
</div>
<div class="tumblr-footer">
34 notes
<div class="tumblr-icons">
[[File:TumblrShare.png|24px]]

[[File:Reblog.png|24px]]

[[File:TumblrHeart.png|24px]]
</div>
</div>
</div>

<div id="tester">
Test!
</div>

{{#css:
.tumblr{
box-shadow: 0 0 0 1px rgba(0,0,0,0.07);
border-radius:3px;
max-width: 540px;
background-color: #ffffff;
font-family: "Favorit","Helvetica Neue","HelveticaNeue",Helvetica,Arial,sans-serif;
word-wrap:break-word;
}
.tumblr > div{
padding-left: 20px;
padding-right: 20px;
}
.tumblr-post{
margin-top: 15px;
margin-bottom: 15px;
padding-top: 15px;
line-height: 1.5;
border-top: 1px solid rgba(0,0,0,0.13);
position:relative;
}
.tumblr-pfp{
width:25px;
height:25px;
border-radius:3px;
overflow:hidden;
margin-right: 10px;
}

.tumblr-pfp p{
margin:0px;
}

.tumblr-post:first-child{border-top: none;}
.tumblr-post:first-child .tumblr-tinyreblog{display:none;}

.tumblr-tinyreblog{
width:14px;
height:14px;
overflow:hidden;
position:absolute;
top:calc(38px);
left: 36px;
}
.tumblr-tinyreblog p{margin: 0px;}
.tumblr-tinyreblog a{
display:inline-block;
height:100%;
}
.tumblr-tinyreblog img{vertical-align:top;}
.tumblr-post-header a{
color: inherit;
text-decoration: none;
}
.tumblr-post-header{
font-weight:700;
font-size:.875rem;
display:flex;
align-items:center;
}
.tumblr-post-header p{max-width:465px;}
.follow{
margin-left: 7px;
color: rgb(0,184,255);
}
.follow:hover{text-decoration:underline;}
.tumblr-tags, .tumblr-footer {
color: rgb(0, 0, 0, .65);
font-size: .875rem;
margin-top: 12px;
}
.tumblr-tags p{display:inline;}
.tumblr-tags p:hover{text-decoration:underline;}
.tumblr-tags p::before{content:"#";}
.tumblr-tags{margin-bottom: -6px;}
.tumblr-footer{
font-weight: 700;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 25px;
padding: 3px 0px;
}
.tumblr-icons p{
width:48px;
height:48px;
display: inline-flex;
align-items: center;
justify-content: center;
}

.tumblr-ask{
display:flex;
padding-left:20px;
padding-right:20px;
padding-bottom:10px;
margin-top:15px;
margin-bottom:10px;
}
.tumblr-ask-box{
background-color: rgba(0,0,0,0.07);
border-radius:3px;
flex-grow:1;
position:relative;
padding: 15px 20px 18px 20px;
max-width:382px;
}
.tumblr-ask-box p:first-child{
color: rgba(0,0,0,0.65);
font-size:0.546875 rem;
font-weight:400;
line-height:1.5;
margin-bottom: 20px;
}
.tumblr-ask-box p{
color: #000000;
}
.tumblr-ask-tail{
box-sizing:border-box;
width:8px;
height:17px;
border-top: 8px solid rgba(0,0,0,0);
border-bottom: 8px solid rgba(0,0,0,0);
border-left: 8px solid rgba(0,0,0,0.07);
position:absolute;
top:10px;
right:-8px;
}
.tumblr-ask-pfp{
height:40px;
width:40px;
overflow:hidden;
border-radius:3px;
flex-shrink:0;
align-self:flex-start;
margin-left:18px;
}
.tumblr-ask-pfp p{margin: 0px;}
}}

User:Raul

2023-03-29T03:16:54Z

Raul: template testing

<noinclude>
== Welcome to the realm ==
[[File:Vacuum Tube.png|frame|right|Vacuum Tuby :)]]
RaulEndy#7456 on discord.

<math>f(x) = x^2</math>

''Test''

'''Test'''
[[Damn Seal|Test]]

[http://crouton.net]

*Hi
*Hi
#Hi
#Hi
[[File:Tinyreblog.png|14px|link=Michigan]]
</noinclude>

<nowiki>{{Tumblr|name=|content=|pfp=|tags=|numNotes=|asker=|ask=|askPfp=|answer=}}</nowiki>

<div class="tumblr">
<div class="tumblr-post">
<div class="tumblr-post-header">
<div class="tumblr-pfp">
[[File:{{{pfp|{{{3|{{#if:{{{name|{{{1|}}}}}}|Dia{{{name|{{{1}}}}}}.png|Tumblranon.png}}}}}}}}|x25px]]
<div class="tumblr-tinyreblog">
[[File:Tinyreblog.png|14px]]
</div>
</div>
<span>{{{name|{{{1|Anonymous}}}}}}</span> <span class="follow">Follow</span>
</div>
{{{content|{{{2|}}}}}}
</div>
<div class="tumblr-post">
<div class="tumblr-post-header">
<div class="tumblr-pfp">
[[File:Nojustno.png|x25px]]
<div class="tumblr-tinyreblog">
[[File:Tinyreblog.png|14px]]
</div>
</div>
<span>TheDeviousSeal32</span> <span class="follow">Follow</span>
</div>
Also, [[buy my stuff]]!
</div>
<div class="tumblr-tags">
{{#replace:{{{tags|{{{4|}}}}}}|<nowiki> </nowiki>|<br>}}
</div>
<div class="tumblr-footer">
{{{numNotes|{{{5|<br>}}}}}} {{#if:{{{numNotes|{{{5|}}}}}}| {{PLURAL: {{{numNotes|{{{5|}}}}}}|note|notes}}|}}
<div class="tumblr-icons">
[[File:TumblrShare.png|x24px]]

[[File:Reblog.png|x24px]]

[[File:TumblrHeart.png|x24px]]
</div>
</div>
</div>

<div class="tumblr">

<div class="tumblr-post">
<div class="tumblr-post-header">
<div class="tumblr-pfp">
[[File:Nojustno.png|x25px]]
</div>
<div class="tumblr-tinyreblog">
[[File:Tinyreblog.png|14px]]
</div>
<span>TheDeviousSeal32</span> <span class="follow">Follow</span>
</div>

<div class="tumblr-ask">
<div class="tumblr-ask-box">
<span style="font-weight:700">{{{asker|{{{6|Anonymous}}}}}}</span> asked:

{{{ask|{{{7|}}}}}}
<div class="tumblr-ask-tail">
</div>
</div>
<div class="tumblr-ask-pfp">
[[File:{{{askPfp|{{{8|{{#if:{{{asker|{{{6|}}}}}}|Dia{{{asker|{{{6}}}}}}.png|Tumblranon.png}}}}}}}}|x40px]]
</div>
</div>

<div class="tumblr-ask">
<div class="tumblr-ask-box">
<span style="font-weight:700">{{{name|{{{1|}}}}}}</span> answered:

{{{answer|{{{9|}}}}}}
<div class="tumblr-ask-tail">
</div>
</div>
<div class="tumblr-ask-pfp">
[[File:{{{pfp|{{{3|{{#if:{{{name|{{{1|}}}}}}|Dia{{{name|{{{1}}}}}}.png|Tumblranon.png}}}}}}}}|x40px]]
</div>
</div>

WTF guys?
</div>
<div class="tumblr-tags">
SSSSSSSSSS

AAAAaaaaaa
</div>
<div class="tumblr-footer">
34 notes
<div class="tumblr-icons">
[[File:TumblrShare.png|24px]]

[[File:Reblog.png|24px]]

[[File:TumblrHeart.png|24px]]
</div>
</div>
</div>

<div id="tester">
Test!
</div>

{{#css:
.tumblr{
box-shadow: 0 0 0 1px rgba(0,0,0,0.07);
border-radius:3px;
max-width: 540px;
background-color: #ffffff;
font-family: "Favorit","Helvetica Neue","HelveticaNeue",Helvetica,Arial,sans-serif;
}
.tumblr > div{
padding-left: 20px;
padding-right: 20px;
}
.tumblr-post{
margin-top: 15px;
margin-bottom: 15px;
padding-top: 15px;
line-height: 1.5;
border-top: 1px solid rgba(0,0,0,0.13);
position:relative;
}
.tumblr-pfp{
width:25px;
height:25px;
border-radius:3px;
overflow:hidden;
margin-right: 10px;
}

.tumblr-pfp p{
margin:0px;
}

.tumblr-post:first-child{border-top: none;}
.tumblr-post:first-child .tumblr-tinyreblog{display:none;}

.tumblr-tinyreblog{
width:14px;
height:14px;
overflow:hidden;
position:absolute;
top:calc(38px);
left: 36px;
}
.tumblr-tinyreblog p{margin: 0px;}
.tumblr-tinyreblog a{
display:inline-block;
height:100%;
}
.tumblr-tinyreblog img{vertical-align:top;}
.tumblr-post-header{
font-weight:700;
font-size:.875rem;
display:flex;
align-items:center;
}
.follow{
margin-left: 7px;
color: rgb(0,184,255);
}
.follow:hover{text-decoration:underline;}
.tumblr-tags, .tumblr-footer {
color: rgb(0, 0, 0, .65);
font-size: .875rem;
margin-top: 12px;
}
.tumblr-tags p{display:inline;}
.tumblr-tags p:hover{text-decoration:underline;}
.tumblr-tags p::before{content:"#";}
.tumblr-tags{margin-bottom: -6px;}
.tumblr-footer{
font-weight: 700;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 25px;
padding: 3px 0px;
}
.tumblr-icons p{
width:48px;
height:48px;
display: inline-flex;
align-items: center;
justify-content: center;
}

.tumblr-ask{
display:flex;
padding-left:20px;
padding-right:20px;
padding-bottom:10px;
margin-top:15px;
margin-bottom:10px;
}
.tumblr-ask-box{
background-color: rgba(0,0,0,0.07);
border-radius:3px;
flex-grow:1;
position:relative;
padding: 15px 20px 18px 20px;
}
.tumblr-ask-box p:first-child{
color: rgba(0,0,0,0.65);
font-size:0.546875 rem;
font-weight:400;
line-height:1.5;
margin-bottom: 20px;
}
.tumblr-ask-box p{
color: #000000;
}
.tumblr-ask-tail{
box-sizing:border-box;
width:8px;
height:17px;
border-top: 8px solid rgba(0,0,0,0);
border-bottom: 8px solid rgba(0,0,0,0);
border-left: 8px solid rgba(0,0,0,0.07);
position:absolute;
top:10px;
right:-8px;
}
.tumblr-ask-pfp{
height:40px;
width:40px;
overflow:hidden;
border-radius:3px;
flex-shrink:0;
align-self:flex-start;
margin-left:18px;
}
.tumblr-ask-pfp p{margin: 0px;}
}}

User:Raul

2023-03-29T03:01:36Z

Raul: template testing

<noinclude>
== Welcome to the realm ==
[[File:Vacuum Tube.png|frame|right|Vacuum Tuby :)]]
RaulEndy#7456 on discord.

<math>f(x) = x^2</math>

''Test''

'''Test'''
[[Damn Seal|Test]]

[http://crouton.net]

*Hi
*Hi
#Hi
#Hi
[[File:Tinyreblog.png|14px|link=Michigan]]
</noinclude>

<nowiki>{{Tumblr|name=|content=|pfp=|tags=|numNotes=|asker=|ask=|askPfp=|answer=}}</nowiki>

<div class="tumblr">
<div class="tumblr-post">
<div class="tumblr-post-header">
<div class="tumblr-pfp">
[[File:{{{pfp|{{{3|{{#if:{{{name|{{{1|}}}}}}|Dia{{{name|{{{1}}}}}}.png|Tumblranon.png}}}}}}}}|x25px]]
<div class="tumblr-tinyreblog">
[[File:Tinyreblog.png|14px]]
</div>
</div>
<span>{{{name|{{{1|Anonymous}}}}}}</span> <span class="follow">Follow</span>
</div>
{{{content|{{{2|}}}}}}
</div>
<div class="tumblr-post">
<div class="tumblr-post-header">
<div class="tumblr-pfp">
[[File:Nojustno.png|x25px]]
<div class="tumblr-tinyreblog">
[[File:Tinyreblog.png|14px]]
</div>
</div>
<span>TheDeviousSeal32</span> <span class="follow">Follow</span>
</div>
Also, [[buy my stuff]]!
</div>
<div class="tumblr-tags">
{{#replace:{{{tags|{{{4|}}}}}}| |<br>}}
</div>
<div class="tumblr-footer">
{{{numNotes|{{{5|<br>}}}}}}
<div class="tumblr-icons">
[[File:TumblrShare.png|x24px]]

[[File:Reblog.png|x24px]]

[[File:TumblrHeart.png|x24px]]
</div>
</div>
</div>

<div class="tumblr">

<div class="tumblr-post">
<div class="tumblr-post-header">
<div class="tumblr-pfp">
[[File:Nojustno.png|x25px]]
</div>
<div class="tumblr-tinyreblog">
[[File:Tinyreblog.png|14px]]
</div>
<span>TheDeviousSeal32</span> <span class="follow">Follow</span>
</div>

<div class="tumblr-ask">
<div class="tumblr-ask-box">
<span style="font-weight:700">{{{asker|{{{6|Anonymous}}}}}}</span> asked:

{{{ask|{{{7|}}}}}}
<div class="tumblr-ask-tail">
</div>
</div>
<div class="tumblr-ask-pfp">
[[File:{{{askPfp|{{{8|{{#if:{{{asker|{{{6|}}}}}}|Dia{{{asker|{{{6}}}}}}.png|Tumblranon.png}}}}}}}}|x40px]]
</div>
</div>

<div class="tumblr-ask">
<div class="tumblr-ask-box">
<span style="font-weight:700">{{{name|{{{1|}}}}}}</span> answered:
{{{answer|{{{9|}}}}}}
<div class="tumblr-ask-tail">
</div>
</div>
<div class="tumblr-ask-pfp">
[[File:{{{pfp|{{{3|{{#if:{{{name|{{{1|}}}}}}|Dia{{{name|{{{1}}}}}}.png|Tumblranon.png}}}}}}}}|x40px]]
</div>
</div>

WTF guys?
</div>
<div class="tumblr-tags">
SSSSSSSSSS

AAAAaaaaaa
</div>
<div class="tumblr-footer">
34 notes
<div class="tumblr-icons">
[[File:TumblrShare.png|24px]]

[[File:Reblog.png|24px]]

[[File:TumblrHeart.png|24px]]
</div>
</div>
</div>

<div id="tester">
Test!
</div>

{{#css:
.tumblr{
box-shadow: 0 0 0 1px rgba(0,0,0,0.07);
border-radius:3px;
max-width: 540px;
background-color: #ffffff;
font-family: "Favorit","Helvetica Neue","HelveticaNeue",Helvetica,Arial,sans-serif;
}
.tumblr > div{
padding-left: 20px;
padding-right: 20px;
}
.tumblr-post{
margin-top: 15px;
margin-bottom: 15px;
padding-top: 15px;
line-height: 1.5;
border-top: 1px solid rgba(0,0,0,0.13);
position:relative;
}
.tumblr-pfp{
width:25px;
height:25px;
border-radius:3px;
overflow:hidden;
margin-right: 10px;
}

.tumblr-pfp p{
margin:0px;
}

.tumblr-post:first-child{border-top: none;}
.tumblr-post:first-child .tumblr-tinyreblog{display:none;}

.tumblr-tinyreblog{
width:14px;
height:14px;
overflow:hidden;
position:absolute;
top:calc(38px);
left: 36px;
}
.tumblr-tinyreblog p{margin: 0px;}
.tumblr-tinyreblog a{
display:inline-block;
height:100%;
}
.tumblr-tinyreblog img{vertical-align:top;}
.tumblr-post-header{
font-weight:700;
font-size:.875rem;
display:flex;
align-items:center;
}
.follow{
margin-left: 7px;
color: rgb(0,184,255);
}
.follow:hover{text-decoration:underline;}
.tumblr-tags, .tumblr-footer {
color: rgb(0, 0, 0, .65);
font-size: .875rem;
margin-top: 12px;
}
.tumblr-tags p{display:inline;}
.tumblr-tags p:hover{text-decoration:underline;}
.tumblr-tags p::before{content:"#";}
.tumblr-tags{margin-bottom: -6px;}
.tumblr-footer{
font-weight: 700;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 25px;
padding: 3px 0px;
}
.tumblr-icons p{
width:48px;
height:48px;
display: inline-flex;
align-items: center;
justify-content: center;
}

.tumblr-ask{
display:flex;
padding-left:20px;
padding-right:20px;
padding-bottom:10px;
margin-top:15px;
margin-bottom:10px;
}
.tumblr-ask-box{
background-color: rgba(0,0,0,0.07);
border-radius:3px;
flex-grow:1;
position:relative;
padding: 15px 20px 18px 20px;
}
.tumblr-ask-box p:first-child{
color: rgba(0,0,0,0.65);
font-size:0.546875 rem;
font-weight:400;
line-height:1.5;
margin-bottom: 20px;
}
.tumblr-ask-box p{
color: #000000;
}
.tumblr-ask-tail{
box-sizing:border-box;
width:8px;
height:17px;
border-top: 8px solid rgba(0,0,0,0);
border-bottom: 8px solid rgba(0,0,0,0);
border-left: 8px solid rgba(0,0,0,0.07);
position:absolute;
top:10px;
right:-8px;
}
.tumblr-ask-pfp{
height:40px;
width:40px;
overflow:hidden;
border-radius:3px;
flex-shrink:0;
align-self:flex-start;
margin-left:18px;
}
.tumblr-ask-pfp p{margin: 0px;}
}}

User:Raul

2023-03-29T02:59:47Z

Raul: template testing

<noinclude>
== Welcome to the realm ==
[[File:Vacuum Tube.png|frame|right|Vacuum Tuby :)]]
RaulEndy#7456 on discord.

<math>f(x) = x^2</math>

''Test''

'''Test'''
[[Damn Seal|Test]]

[http://crouton.net]

*Hi
*Hi
#Hi
#Hi
[[File:Tinyreblog.png|14px|link=Michigan]]
</noinclude>

<nowiki>{{Tumblr|name=|content=|pfp=|tags=|numNotes=|asker=|ask=|askPfp=|answer=}}</nowiki>

<div class="tumblr">
<div class="tumblr-post">
<div class="tumblr-post-header">
<div class="tumblr-pfp">
[[File:{{{pfp|{{{3|{{#if:{{{name|{{{1|}}}}}}|Dia{{{name|{{{1}}}}}}.png|Tumblranon.png}}}}}}}}|x25px]]
<div class="tumblr-tinyreblog">
[[File:Tinyreblog.png|14px]]
</div>
</div>
<span>{{{name|{{{1|Anonymous}}}}}}</span> <span class="follow">Follow</span>
</div>
{{{content|{{{2|}}}}}}
</div>
<div class="tumblr-post">
<div class="tumblr-post-header">
<div class="tumblr-pfp">
[[File:Nojustno.png|x25px]]
<div class="tumblr-tinyreblog">
[[File:Tinyreblog.png|14px]]
</div>
</div>
<span>TheDeviousSeal32</span> <span class="follow">Follow</span>
</div>
Also, [[buy my stuff]]!
</div>
<div class="tumblr-tags">
{{#replace:{{{tags|{{{4|}}}}}}| |<br>}}
</div>
<div class="tumblr-footer">
{{{numNotes|{{{5|<br>}}}}}}
<div class="tumblr-icons">
[[File:TumblrShare.png|x24px]]

[[File:Reblog.png|x24px]]

[[File:TumblrHeart.png|x24px]]
</div>
</div>
</div>

<div class="tumblr">

<div class="tumblr-post">
<div class="tumblr-post-header">
<div class="tumblr-pfp">
[[File:Nojustno.png|x25px]]
</div>
<div class="tumblr-tinyreblog">
[[File:Tinyreblog.png|14px]]
</div>
<span>TheDeviousSeal32</span> <span class="follow">Follow</span>
</div>

<div class="tumblr-ask">
<div class="tumblr-ask-box">
<span style="font-weight:700">{{{asker|{{{6|Anonymous}}}}}}</span> asked:

{{{ask|{{{7|}}}}}}
<div class="tumblr-ask-tail">
</div>
</div>
<div class="tumblr-ask-pfp">
[[File:{{{askPfp|{{{8|{{#if:{{{asker|{{{6|}}}}}}|Dia{{{asker|{{{6}}}}}}.png|Tumblranon.png}}}}}}}}|x40px]]
</div>
</div>

<div class="tumblr-ask">
<div class="tumblr-ask-box">
<span style="font-weight:700">{{{name{{{1|}}}}}}</span> answered:
{{{answer{{{9|}}}}}}
<div class="tumblr-ask-tail">
</div>
</div>
<div class="tumblr-ask-pfp">
[[File:{{{pfp|{{{3|{{#if:{{{name|{{{1|}}}}}}|Dia{{{name|{{{1}}}}}}.png|Tumblranon.png}}}}}}}}|x40px]]
</div>
</div>

WTF guys?
</div>
<div class="tumblr-tags">
SSSSSSSSSS

AAAAaaaaaa
</div>
<div class="tumblr-footer">
34 notes
<div class="tumblr-icons">
[[File:TumblrShare.png|24px]]

[[File:Reblog.png|24px]]

[[File:TumblrHeart.png|24px]]
</div>
</div>
</div>

<div id="tester">
Test!
</div>

{{#css:
.tumblr{
box-shadow: 0 0 0 1px rgba(0,0,0,0.07);
border-radius:3px;
max-width: 540px;
background-color: #ffffff;
font-family: "Favorit","Helvetica Neue","HelveticaNeue",Helvetica,Arial,sans-serif;
}
.tumblr > div{
padding-left: 20px;
padding-right: 20px;
}
.tumblr-post{
margin-top: 15px;
margin-bottom: 15px;
padding-top: 15px;
line-height: 1.5;
border-top: 1px solid rgba(0,0,0,0.13);
position:relative;
}
.tumblr-pfp{
width:25px;
height:25px;
border-radius:3px;
overflow:hidden;
margin-right: 10px;
}

.tumblr-pfp p{
margin:0px;
}

.tumblr-post:first-child{border-top: none;}
.tumblr-post:first-child .tumblr-tinyreblog{display:none;}

.tumblr-tinyreblog{
width:14px;
height:14px;
overflow:hidden;
position:absolute;
top:calc(38px);
left: 36px;
}
.tumblr-tinyreblog p{margin: 0px;}
.tumblr-tinyreblog a{
display:inline-block;
height:100%;
}
.tumblr-tinyreblog img{vertical-align:top;}
.tumblr-post-header{
font-weight:700;
font-size:.875rem;
display:flex;
align-items:center;
}
.follow{
margin-left: 7px;
color: rgb(0,184,255);
}
.follow:hover{text-decoration:underline;}
.tumblr-tags, .tumblr-footer {
color: rgb(0, 0, 0, .65);
font-size: .875rem;
margin-top: 12px;
}
.tumblr-tags p{display:inline;}
.tumblr-tags p:hover{text-decoration:underline;}
.tumblr-tags p::before{content:"#";}
.tumblr-tags{margin-bottom: -6px;}
.tumblr-footer{
font-weight: 700;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 25px;
padding: 3px 0px;
}
.tumblr-icons p{
width:48px;
height:48px;
display: inline-flex;
align-items: center;
justify-content: center;
}

.tumblr-ask{
display:flex;
padding-left:20px;
padding-right:20px;
padding-bottom:10px;
margin-top:15px;
margin-bottom:10px;
}
.tumblr-ask-box{
background-color: rgba(0,0,0,0.07);
border-radius:3px;
flex-grow:1;
position:relative;
padding: 15px 20px 18px 20px;
}
.tumblr-ask-box p:first-child{
color: rgba(0,0,0,0.65);
font-size:0.546875 rem;
font-weight:400;
line-height:1.5;
margin-bottom: 20px;
}
.tumblr-ask-box p{
color: #000000;
}
.tumblr-ask-tail{
box-sizing:border-box;
width:8px;
height:17px;
border-top: 8px solid rgba(0,0,0,0);
border-bottom: 8px solid rgba(0,0,0,0);
border-left: 8px solid rgba(0,0,0,0.07);
position:absolute;
top:10px;
right:-8px;
}
.tumblr-ask-pfp{
height:40px;
width:40px;
overflow:hidden;
border-radius:3px;
flex-shrink:0;
align-self:flex-start;
margin-left:18px;
}
.tumblr-ask-pfp p{margin: 0px;}
}}

There there

2023-03-29T00:43:56Z

Raul: Created page with "{{Quote|Shhhh. Sh sh sh. It's okay.|The comforting dog}} == Crying shame == <div style="position:relative;"> waaah.. <div style="position: ab..."

{{Quote|Shhhh. Sh sh sh. It's okay.|The comforting dog}}
== Crying shame ==
<div style="position:relative;">
[[File:So stupid.png|left|frame|waaah..]]
<div style="position: absolute; left:300px; top:85px;">[[File:Buddypaw.png|150px]]</div>
</div>
<div style="position:relative; clear:right; float:right;">
[[File:Creyes.png|right|frameless]]
<div style="position: absolute; left:265px; top:20px;">[[File:Buddypaw.png|100px]]</div>
</div>
This is so [[Sad|sads]]...
<div style="position:relative; clear:right; float:right;">
[[File:Waaaaaaaaaaaaaa.png|right|frameless]]
<div style="position: absolute; left:220px; top:105px;">[[File:Buddypaw.png|100px]]</div>
</div>
Satus: Feeling [[blue]].
<span style="font-size:500%">
{{Loop|30|😭}}</span>
[[Category:Seals]]
[[Category:Ugly]]
<div style="position:relative;">
{{Dia|Bloomsad|I dont want my mom to get old}}
<div style="position: absolute; top:40px; left:75px;">[[File:Buddypaw.png|50px]]</div>
</div>

File:Buddy.png

2023-03-29T00:11:09Z

Raul: Batch Upload.

File:Buddypaw.png

2023-03-29T00:11:08Z

Raul: Batch Upload.

User:Raul

2023-03-28T23:06:19Z

Raul: testing template

<noinclude>
== Welcome to the realm ==
[[File:Vacuum Tube.png|frame|right|Vacuum Tuby :)]]
RaulEndy#7456 on discord.

<math>f(x) = x^2</math>

''Test''

'''Test'''
[[Damn Seal|Test]]

[http://crouton.net]

*Hi
*Hi
#Hi
#Hi
[[File:Tinyreblog.png|14px|link=Michigan]]
</noinclude>

<nowiki>{{Tumblr|name=|content=|pfp=|tags=|numNotes=}}</nowiki>

<div class="tumblr">
<div class="tumblr-post">
<div class="tumblr-post-header">
<div class="tumblr-pfp">
[[File:{{{pfp|{{{3|{{#if:{{{name|{{{1|}}}}}}|Dia{{{name|{{{1}}}}}}.png|Tumblranon.png}}}}}}}}|x25px]]
<div class="tumblr-tinyreblog">
[[File:Tinyreblog.png|14px]]
</div>
</div>
<span>{{{name|{{{1|Anonymous}}}}}}</span> <span class="follow">Follow</span>
</div>
{{{content|{{{2|}}}}}}
</div>
<div class="tumblr-post">
<div class="tumblr-post-header">
<div class="tumblr-pfp">
[[File:Nojustno.png|x25px]]
<div class="tumblr-tinyreblog">
[[File:Tinyreblog.png|14px]]
</div>
</div>
<span>TheDeviousSeal32</span> <span class="follow">Follow</span>
</div>
Also, [[buy my stuff]]!
</div>
<div class="tumblr-tags">
{{#replace:{{{tags|{{{4|}}}}}}| |<br>}}
</div>
<div class="tumblr-footer">
{{{numNotes|{{{5|}}}}}}
<div class="tumblr-icons">
[[File:TumblrShare.png|x24px]]

[[File:Reblog.png|x24px]]

[[File:TumblrHeart.png|x24px]]
</div>
</div>
</div>

<div class="tumblr">

<div class="tumblr-post">
<div class="tumblr-post-header">
<div class="tumblr-pfp">
[[File:Nojustno.png|x25px]]
</div>
<div class="tumblr-tinyreblog">
[[File:Tinyreblog.png|14px]]
</div>
<span>TheDeviousSeal32</span> <span class="follow">Follow</span>
</div>

<div class="tumblr-ask">
<div class="tumblr-ask-box">
<span style="font-weight:700">Anonymous</span> asked:

Yeah, I actually had a question about-
<div class="tumblr-ask-tail">
</div>
</div>
<div class="tumblr-ask-pfp">
[[File:Tumblranon.png|x40px]]
</div>
</div>

<div class="tumblr-ask">
<div class="tumblr-ask-box">
<span style="font-weight:700">Non-anonymous</span> answered:

START!!!
<div class="tumblr-ask-tail">
</div>
</div>
<div class="tumblr-ask-pfp">
[[File:Nojustno.png|x40px]]
</div>
</div>

WTF guys?
</div>
<div class="tumblr-tags">
SSSSSSSSSS

AAAAaaaaaa
</div>
<div class="tumblr-footer">
34 notes
<div class="tumblr-icons">
[[File:TumblrShare.png|24px]]

[[File:Reblog.png|24px]]

[[File:TumblrHeart.png|24px]]
</div>
</div>
</div>

<div id="tester">
Test!
</div>

{{#css:
.tumblr{
box-shadow: 0 0 0 1px rgba(0,0,0,0.07);
border-radius:3px;
max-width: 540px;
background-color: #ffffff;
font-family: "Favorit","Helvetica Neue","HelveticaNeue",Helvetica,Arial,sans-serif;
}
.tumblr > div{
padding-left: 20px;
padding-right: 20px;
}
.tumblr-post{
margin-top: 15px;
margin-bottom: 15px;
padding-top: 15px;
line-height: 1.5;
border-top: 1px solid rgba(0,0,0,0.13);
position:relative;
}
.tumblr-pfp{
width:25px;
height:25px;
border-radius:3px;
overflow:hidden;
margin-right: 10px;
}

.tumblr-pfp p{
margin:0px;
}

.tumblr-post:first-child{border-top: none;}
.tumblr-post:first-child .tumblr-tinyreblog{display:none;}

.tumblr-tinyreblog{
width:14px;
height:14px;
overflow:hidden;
position:absolute;
top:calc(38px);
left: 36px;
}
.tumblr-tinyreblog p{margin: 0px;}
.tumblr-tinyreblog a{
display:inline-block;
height:100%;
}
.tumblr-tinyreblog img{vertical-align:top;}
.tumblr-post-header{
font-weight:700;
font-size:.875rem;
display:flex;
align-items:center;
}
.follow{
margin-left: 7px;
color: rgb(0,184,255);
}
.follow:hover{text-decoration:underline;}
.tumblr-tags, .tumblr-footer {
color: rgb(0, 0, 0, .65);
font-size: .875rem;
margin-top: 12px;
}
.tumblr-tags p{display:inline;}
.tumblr-tags p:hover{text-decoration:underline;}
.tumblr-tags p::before{content:"#";}
.tumblr-tags{margin-bottom: -6px;}
.tumblr-footer{
font-weight: 700;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 25px;
padding: 3px 0px;
}
.tumblr-icons p{
width:48px;
height:48px;
display: inline-flex;
align-items: center;
justify-content: center;
}

.tumblr-ask{
display:flex;
padding-left:20px;
padding-right:20px;
padding-bottom:10px;
margin-top:15px;
margin-bottom:10px;
}
.tumblr-ask-box{
background-color: rgba(0,0,0,0.07);
border-radius:3px;
flex-grow:1;
position:relative;
padding: 15px 20px 18px 20px;
}
.tumblr-ask-box p:first-child{
color: rgba(0,0,0,0.65);
font-size:0.546875 rem;
font-weight:400;
line-height:1.5;
margin-bottom: 20px;
}
.tumblr-ask-box p{
color: #000000;
}
.tumblr-ask-tail{
box-sizing:border-box;
width:8px;
height:17px;
border-top: 8px solid rgba(0,0,0,0);
border-bottom: 8px solid rgba(0,0,0,0);
border-left: 8px solid rgba(0,0,0,0.07);
position:absolute;
top:10px;
right:-8px;
}
.tumblr-ask-pfp{
height:40px;
width:40px;
overflow:hidden;
border-radius:3px;
flex-shrink:0;
align-self:flex-start;
margin-left:18px;
}
.tumblr-ask-pfp p{margin: 0px;}
}}

File:Ytreply.png

2023-03-28T21:19:31Z

Raul: