Tiddlers - sgml/signature GitHub Wiki

>The copyright of TiddlyWiki is held in trust

Defaults

Themes

Macros

Core Files

core_ui_files:
  PageTemplate:
    description: >
      Defines the overall HTML structure of the wiki, including elements like the sidebar, toolbar, and content area.
    purpose: >
      Change the layout and structure of the TiddlyWiki interface.
  
  ViewTemplate:
    description: >
      Determines how individual tiddlers are displayed when viewed.
    purpose: >
      Alter the presentation of tiddler content, such as adding custom styling or additional metadata.
  
  EditTemplate:
    description: >
      Dictates the appearance and structure of tiddlers when they are in edit mode.
    purpose: >
      Change the edit interface, such as adding new input fields or buttons.
  
  ControlPanel:
    description: >
      Includes the settings and configuration options available to users.
    purpose: >
      Add or remove configuration options in the Control Panel.
  
  Styles:
    description: >
      Contains CSS files that define the visual styling of the TiddlyWiki interface.
    purpose: >
      Change the appearance of various UI elements, such as fonts, colors, and layouts.
  
  Toolbar:
    description: >
      Defines the toolbar that appears at the top of each tiddler.
    purpose: >
      Add, remove, or modify toolbar buttons and functionality.
  
  StoryTiddlerTemplate:
    description: >
      Determines the structure and presentation of story tiddlers within the main content area.
    purpose: >
      Change how these tiddlers are rendered.
  
  ImportTiddlers:
    description: >
      Manages the interface for importing tiddlers into the wiki.
    purpose: >
      Change the import process and presentation.

Overriding CSS

setup:
  - description: Create a new TiddlyWiki project or open your existing project.
  - description: Create a new tiddler named `tailwind.css`.

add_tailwindcss:
  description: Add TailwindCSS to your project.
  steps:
    - name: Add TailwindCSS
      code: |
        @import url('https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css');

customize_tailwindcss:
  description: Customize TailwindCSS in `tailwind.css`.
  example:
    - name: Add Custom Styles
      code: |
        @import url('https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css');
        .my-custom-style {
          background-color: #f0f0f0;
        }

configure_tiddlywiki:
  description: Configure TiddlyWiki to use the stylesheet.
  steps:
    - name: Open `$:/core/ui/PageTemplate` tiddler
    - name: Add link in `<head>` section
      code: |
        <link rel="stylesheet" href="$:/path/to/tailwind.css">
      note: Replace `$:/path/to/tailwind.css` with the actual path to your `tailwind.css` tiddler.

apply_tailwindcss:
  description: Apply TailwindCSS classes to tiddlers.
  steps:
    - name: Use TailwindCSS utility classes in TiddlyWiki content
      example: Add classes like `bg-gray-100` to apply background colors.

preview_adjust:
  description: Save changes and preview your TiddlyWiki.
  steps:
    - name: Adjust styles as needed
      result: Achieve the desired look and feel.

  • File: /core/ui/PageTemplate

Navigation

open_tiddlers:
  methods:
    - name: Search Box
      description: >
        Use the search box in the TiddlyWiki interface to search for the name of the tiddler you want to open.
        As you type, TiddlyWiki will suggest matching tiddlers. Click on the desired tiddler from the suggestions to open it.

    - name: Links
      description: >
        Create links to specific tiddlers within other tiddlers using the double square brackets syntax.
        Example:
        ```[[TiddlerName]]```
        Clicking on the link will open the referenced tiddler.

    - name: URL Parameters
      description: >
        Directly access specific tiddlers by adding the tiddler name to the URL.
        Example: If your TiddlyWiki is hosted at `example.com/tiddlywiki.html`, you can open the tiddler named "MyTiddler" by navigating to:
        ```example.com/tiddlywiki.html#MyTiddler```

    - name: Tiddler Fields
      description: >
        Some tiddlers can be opened automatically based on their fields. For example, you can set a field to trigger certain actions when the tiddler is accessed.

    - name: Macros and Custom Buttons
      description: >
        Create macros or custom buttons that open specific tiddlers. For example, define a macro in your TiddlyWiki to open a tiddler when a button is clicked:
        ```javascript
        \define openTiddlerMacro(tiddlerName)
        <$button set="$:/temp/tiddler" setTo=<<tiddlerName>>>
          Open <<tiddlerName>>
        </$button>
        \end
        ```

References

Code

Customization

customMediaType:
  title: "Custom Media Type"
  type: "application/vnd.tiddlywiki"

customMediaTypeTemplate:
  content: |
    <div class="custom-media-type">
      <h1>{{!!title}}</h1>
      <div class="media-content">
        {{!!media}}
      </div>
    </div>

storyTiddlerTemplate:
  cascadeRule: "[all[is[type[CustomMediaType]]]then[CustomMediaTypeTemplate]]"

customMediaTypeStyles:
  content: |
    .custom-media-type {
      border: 1px solid #ccc;
      padding: 10px;
      margin: 10px;
    }
    .custom-media-type .media-content {
      display: flex;
      align-items: center;
    }
    .custom-media-type .media-content img {
      max-width: 100%;
    }

References

mediawiki_successful_sites:
  wikia:
    description: "A platform for fan communities to create and share content about their favorite topics, including TV shows, movies, games, and more."
    urls:
      - "https://www.fandom.com/"

  lyricwiki:
    description: "A wiki-based lyrics database where users can contribute and edit song lyrics."
    urls:
      - "https://lyrics.fandom.com/"

  openwetware:
    description: "A wiki for the biological sciences community, used for sharing research, lab notebooks, and resources."
    urls:
      - "https://www.openwetware.org/"

  memory_alpha:
    description: "A wiki for fans of the Star Trek franchise, containing detailed information about the series, characters, and episodes."
    urls:
      - "https://memory-alpha.fandom.com/"

  wookieepedia:
    description: "A comprehensive wiki for Star Wars fans, featuring detailed information about the universe, characters, and events."
    urls:
      - "https://starwars.fandom.com/wiki/Main_Page"

  citizendium:
    description: "A wiki-based project aimed at creating a reliable, free, and open encyclopedia."
    urls:
      - "https://en.citizendium.org/"

  tv_tropes:
    description: "A wiki that catalogs and discusses various tropes found in media, including TV shows, movies, books, and more."
    urls:
      - "https://tvtropes.org/"

Cookie Tiddler

\define readCookie(cookieName)
<!-- For more information on <$macrocall>, visit: https://tiddlywiki.com/#Macro%20calls -->
<$macrocall $name=readCookie cookieName="yourCookieName"/>

<!-- For more information on <$button>, visit: https://tiddlywiki.com/#ButtonWidget -->
<$button>
  <$action-js>
    console.log(document.cookie);
    var cookieValue = "; " + document.cookie;
    var parts = cookieValue.split("; " + cookieName + "=");
    if (parts.length == 2) alert(parts.pop().split(";").shift());
  </$action-js>
  Read Cookie
</$button>
\end

Games

⚠️ **GitHub.com Fallback** ⚠️