Differences

This shows you the differences between two versions of the page.

--- batocera_wiki_code_snippets [2021/09/18 02:16] – made it /better/ atari
+++ batocera_wiki_code_snippets [2023/10/20 06:02] (current) – [Embedded images]: Explain how to avoid font issues in SVG ssokolow
@@ Line 1: / Line 1: @@
-====== Batocera-specific Code Snippets ======
+====== Batocera Wiki Code Snippets/Templates ======
+<WRAP center round tip>
+A cheat-sheet can be found [[wiki:syntax#cheat_sheet|on the DokuWiki syntax page]].
+</WRAP>
 ===== In-links =====
@@ Line 49: / Line 54: @@
 <WRAP center round tip 60%>
 You can always click the little "linking" icon that appears when you hover your mouse over the header for that section.
+</WRAP>
+===== Inter-wiki links =====
+Let's face it, Wikipedia is a great source of information for technical aspects at times. If you ever need to link to a Wikipedia page specifically, you should use the %%"wp>(title of Wikipedia page)"%% format for its link. For example:
+[[wp>Home_video_game_console_generations|Here's their page on home video-game console generations.]]
+which is invoked by
+<code>
+[[wp>Home_video_game_console_generations|Here's their page on home video-game console generations.]]
+</code>
+Note that you don't need to include the full URL, just the Wikipedia page title. It also appears with the Wikipedia icon, isn't that neat?
+This also works for embedding Youtube videos using only their video ID, like so:
+{{youtube>ssluTgfkdlg?medium}}
+which is invoked by
+<code>
+{{youtube>ssluTgfkdlg?medium}}
+</code>
+<WRAP center round important>
+Currently, embedding Youtube links is bugged. When the mouse hovers over the "Edit" button while viewing the page, the thumbnail reloads, causing the page to jump up. This is unusable and thus Youtube embeds should be avoided entirely until this is fixed. Use direct links instead.
 </WRAP>
@@ Line 74: / Line 107: @@
 Sample SVG file:
-{{:wiki:svg-controller.svg|Cute controller}}
+{{:wiki:svg-controller.svg|Cute controller.}}
-===== Inter-wiki links =====
+The wiki's media manager can actually accept SVG files even though it doesn't show it on the compatible file formats list. SVG files that contain text are discouraged due to fonts not being available on all systems (and thus appearing inconsistently or not at all). You can avoid this by converting the text into shapes in Inkscape using ''Path > Object to Path''.
-Let's face it, Wikipedia is a great source of information for technical aspects at times. If you ever need to link to a Wikipedia page specifically, you should use the %%"wp>(title of Wikipedia page)"%% format for its link. For example:
+However, by using the official DokuWiki [[https://www.dokuwiki.org/plugin:imagebox|imagebox]] plugin (which is installed additionally on this DokuWiki server), you can also put a frame around an image and make the image title text show up within the image frame instead of showing up as a tooltip (the image's filename will be shown as a tooltip instead). If you decide to resize your image like the image example below (75% of the image's original size in this example), the plugin also includes a nice extra feature of showing automatically an extra mini icon on the right lower corner of your imagebox you can click on to enlarge the image to its original size.
-[[wp>Home_video_game_console_generations|Here's their page on home video-game console generations.]]
+[{{ wiki:dokuwiki-128.png?75 |This is the image title}}] \\
-which is invoked by
+  [{{ wiki:dokuwiki-128.png?75 |This is the image title}}]
+===== Embedded videos =====
+It is recommended to convert the video to a WEBM with a resolution of 655x368 to prepare it for embedding into the wiki page and not have interruptions during playback. With that said, the wiki supports many video formats (check what you can upload in the media uploading tool) and the resolution will always be downscaled to whatever size you specify in the embed code itself. For example:
 <code>
-[[wp>Home_video_game_console_generations|Here's their page on home video-game console generations.]]
+{{URL-to-video?655x368|Alt text}}
 </code>
-Note that you don't need to include the full URL, just the Wikipedia page title. It also appears with the Wikipedia icon, isn't that neat?
+This would result in the video looking similar to this:
+{{blog:how-to-install-windows-steam-games.webm?655x368|Sometimes running a game through Proton is even better than its Linux-native version!}}
+<WRAP center round tip>
+A quick way to record videos from Batocera itself is to sign in via SSH and run the ''batocera-record'' command.
+</WRAP>
 ===== Unformatted code =====
@@ Line 189: / Line 232: @@
 Genesis plus GX, Master system/Genesis, Sega
 </csv>
+===== Adding a collapsible section =====
+With the addition of the collapsible sidebar via the [[https://www.dokuwiki.org/plugin:outliner|outliner]] plugin now collapsible sections can be used anywhere in the wiki.
+The beginning of a section has to be marked with %%--> Title%%''[FLAGS]''. ''[FLAGS]'' is optional and can be:
+  * ''%%#%%'' for no preview (this is recommended)
+  * ''%%^%%'' to be opened by default (not recommended, defies the point)
+  * ''%%@%%'' for to indicate that there's an internal wiki link in title (otherwise it would just show the link syntax as if it were the title)
+Sections can be closed by using %%<--%% on a new line. Sections can also be nested. Example:
+<code>
+--> Section 1 without preview (recommended)#
+First level content. This can be pretty much anything.
+  * If ending with an list such as a bullet list, remember to add one space after the list so as to avoid syntax errors, like so:
+--> Second level nested section#
+Second level content. It's also just good practice to use a spare extra line when closing a section, though it's not always necessary.
+<--
+First level content continues.
+<--
+--> [[:batocera_wiki_code_snippets|Internal link in a section header.]]@#
+If the user clicks the blue text, they will both simultaneously open the section and be taken to the linked page. If the instead click only the box around the text, they will just open the text instead. This is really only useful for the sidebar. Does not work with section-specific in-links (ones that require a %%#%%), as that conflicts with the ''[FLAGS]''.
+--> [[:batocera_wiki_code_snippets|Internal link in a section header without the correct flag, opened by default.]]#^
+Notice how it instead shows the syntax instead of actually linking?
+<--
+<--
+--> Section with a preview on hover. Not recommended for general use.
+  Here's a bunch of text in some code.
+<--
+</code>
+which would appear like so:
+--> Section 1 without preview (recommended)#
+First level content. This can be pretty much anything.
+  * If ending with an list such as a bullet list, remember to add one space after the list so as to avoid syntax errors, like so:
+--> Second level nested section#
+Second level content. It's also just good practice to use a spare extra line when closing a section, though it's not always necessary.
+<--
+First level content continues.
+<--
+--> [[:batocera_wiki_code_snippets|Internal link in a section header.]]@#
+If the user clicks the blue text, they will both simultaneously open the section and be taken to the linked page. If the instead click only the box around the text, they will just open the text instead. This is really only useful for the sidebar. Does not work with section-specific in-links (ones that require a %%#%%), as that conflicts with the ''[FLAGS]''.
+--> [[:batocera_wiki_code_snippets|Internal link in a section header without the correct flag, opened by default.]]#^
+Notice how it instead shows the syntax instead of actually linking?
+<--
+<--
+--> Section with a preview on hover. Not recommended for general use.
+  Here's a bunch of text in some code.
+<--
+===== File tree ASCII art =====
+When you need to display a folder's structure, the best way to do so is via an ASCII tree in a code block like so:
+<code>
+roms/
+├─ psx/
+│  ├─ Final Fantasy VII (Disc 1).bin
+│  └─ Final Fantasy VII (Disc 1).cue
+└─ Final Fantasy VII (Disc 1).m3u
+</code>
+Although it may be fun to write these out yourself, an automatic tool to create them is available at https://ascii-tree-generator.com/
 ===== CSV SAMPLE OUTPUT GOOGLE =====
@@ Line 211: / Line 350: @@
   - Copy the link (check it ends with output=csv) and paste it into your dokuwiki CSV table using the file= attribute described above.
 </WRAP>
+===== Embed a website into a wiki page =====
+Batocera wiki supports iframes, showing another web page inside of the article. Simple example:
+<code>
+{{url>http://www.example.com/somepage.html}}
+</code>
+Full syntax:
+<code>
+{{url>someurl width,height noscroll noborder alignment|alternate-text}}
+</code>
+Javascript URLs are not supported. More info at https://www.dokuwiki.org/plugin:iframe
+===== Templates =====
+==== Batocera Themes Rules ====
+<code>|..THEMENAME..|..AUTHORNAME..|..{{ :themes:THEMNAME_system.png?300 |}}..
+{{ :themes:minimal_system.png?300 |}}            --> will view in media manager
+{{ :themes:minimal_grid.png?nolink&300 |}}       --> no link to the original image
+{{ :themes:minimal_list.png?direct&300 |}}       --> links to the full resolution
+Can't decide? Used the first option.
+Authorname [[ https://github.com/repro/project|AUTHORNAME ]]
+</code>
+{{ :themes:minimal_system.png?300 |}}
+{{ :themes:minimal_grid.png?nolink&300 |}}
+{{ :themes:minimal_list.png?direct&300 |}}
+Some suggestions
+  * Themename
+  * Authorname
+  * Link to author? (needed?)
+  * System List View -> themename_system
+  * ROM List View -> themename_list
+  * GRID List View -> themename_grid
+  * Resolution 1920x1080