### Install Retype globally via npm Source: https://retype.com/guides/installation Installs the latest Retype package globally using npm and starts the development server. Requires npm to be installed and accessible in the PATH. Outputs a globally available `retype` command. ```Shell npm install retypeapp --global retype start ``` -------------------------------- ### Install Windows platform‑specific Retype package via npm Source: https://retype.com/guides/installation Installs the Windows‑specific Retype package, with options for x64 or x86 architectures. Select the appropriate binary for the target system. Provides a smaller download than the universal package. ```Shell npm install retypeapp-win-x64 --global # or npm install retypeapp-win-x86 --global ``` -------------------------------- ### Configure basic retype.yml project settings Source: https://retype.com/configuration/project Sets the input and output directories, site URL, start options, and basic branding label and title. Used by Retype to locate source files and generate the website. YAML format. ```yaml input: . output: .retype url: docs.example.com # Use your website address here start: # Uncomment the next line to try Retype Pro features # pro: true branding: title: Project label: Docs links: - text: Getting Started link: https://retype.com/guides/getting-started/ footer: copyright: "© Copyright {{ year }}. All rights reserved." ``` -------------------------------- ### Install specific Retype version or tag npm Source: https://retype.com/guides/installation Installs a particular version or tagged release of Retype using npm's version syntax. Replace `[version-or-tag]` with the desired identifier (e.g., `3.12.0-preview2` or `latest`). Useful for testing preview releases or pinning a stable version. ```Shell npm install retypeapp@[version-or-tag] --global ``` -------------------------------- ### Install macOS platform‑specific Retype package via npm Source: https://retype.com/guides/installation Installs the macOS‑specific bundle of Retype, reducing download size compared to the full package. Requires npm and selects the appropriate architecture automatically. Use when targeting macOS exclusively. ```Shell npm install retypeapp-darwin-x64 --global ``` -------------------------------- ### Advanced Markdown Formatting Example Source: https://retype.com/guides/formatting An expanded Markdown sample showcasing various formatting options including headings, paragraphs, links (internal and external), images, text styling (bold, italic, strikethrough, code), lists (unordered and ordered), quotations, and alerts. ```markdown # Welcome! This is a paragraph. Both [internal](README.md) and [external](https://example.com) links work. ![Your logo](logo.png) Another paragraph with **bold**, _italic_, ~~strikethrough~~, and `code` samples. --- ## Lists - First item - Second item - Third item 1. First item 2. Second item 3. Third item > "Cool! This is a quotation." !!! Need to draw attention to something? Use an alert. !!! ``` -------------------------------- ### Build Docker Image for Retype App Source: https://retype.com/hosting/docker This command builds a Docker image from the Dockerfile in the project root, tagging it for easy identification. It requires Docker installed on the system and local project files as input, outputting a tagged image ready for deployment. Limitations include needing internet access for downloading base images and sufficient disk space. ```shell docker build -t myorg/myapplication:latest . ``` -------------------------------- ### Enable Retype Pro Testing Mode in YAML Config Source: https://retype.com/pro This configuration enables Retype Pro features for testing purposes by adding a pro flag to the start section of the retype.yml file. It requires Retype CLI to be installed and runs alongside the standard setup. While Pro features are unlocked, the Powered by Retype branding and 100-page limit remain enforced; no additional inputs are needed beyond the YAML update, and it outputs an activated Pro mode on project start. ```yaml start: pro: true ``` -------------------------------- ### Basic Markdown Page Structure Source: https://retype.com/guides/formatting A fundamental Markdown page structure demonstrating a page title and a single paragraph. This serves as the starting point for creating content in Retype. ```markdown # Page title here This is a paragraph. ``` -------------------------------- ### Update Retype to latest version via npm Source: https://retype.com/guides/installation Updates the globally installed Retype package to the newest release using npm. Assumes Retype was initially installed with npm. No additional flags are required; the command overwrites the previous version. ```Shell npm update retypeapp --global ``` -------------------------------- ### Configure Search Hotkey Source: https://retype.com/configuration/project Define the keyboard shortcut to focus the search field. The default is 'k'. ```yaml search: hotkeys: - "/" ``` -------------------------------- ### Handle loop limit exceeded error Source: https://retype.com/configuration/project Example error message when loop limit is exceeded during template rendering. Provides guidance for resolving the issue by adjusting limits or optimizing templates. ```text ERROR: [template.md:1] Evaluation error. Exceeding number of iteration limit `1000` for loop statement. ``` -------------------------------- ### Basic WikiLink Syntax in Retype Source: https://retype.com/blog/2025-05-04-whats-new-in-retype-v38 Create internal links in Retype using double square brackets, e.g., [[Getting Started]]. Retype intelligently resolves these links, offering resilience against filename changes compared to standard Markdown links. ```markdown Check out the Retype [[Getting Started]] guide. The same link using Markdown would be [Getting Started](/guides/getting-started.md). ``` -------------------------------- ### Create user journey diagram Source: https://retype.com/components/mermaid Example of a user journey diagram showing daily activities with time allocations and assigned participants in different sections. ```mermaid journey title My working day section Go to work Make tea: 5: Me Go upstairs: 3: Me Do work: 1: Me, Cat section Go home Go downstairs: 5: Me Sit down: 5: Me ``` -------------------------------- ### Create Gantt diagram with task scheduling Source: https://retype.com/components/mermaid Example of a Gantt diagram showing task scheduling with date formats, task statuses, and dependencies. Includes completed, active, and future tasks. ```mermaid gantt dateFormat YYYY-MM-DD title Adding GANTT diagram to mermaid excludes weekdays 2014-01-10 section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d ``` -------------------------------- ### JavaScript Calculator Example for Code Snippet Source: https://retype.com/components/code-snippet Demonstrates embedding the full content of a JavaScript file (`../static/sample.js`) into a documentation page. This is useful for showcasing project source code. ```javascript // Simple calculator app // https://github.com/JS-Beginners/Calculator-JavaScript-Project (function () { let screen = document.querySelector(".screen"); let buttons = document.querySelectorAll(".btn"); let clear = document.querySelector(".btn-clear"); let equal = document.querySelector(".btn-equal"); // retrieve data from numbers that are clicked buttons.forEach(function (button) { button.addEventListener("click", function (e) { let value = e.target.dataset.num; screen.value += value; }) }); equal.addEventListener("click", function (e) { if (screen.value === "") { screen.value = "Please Enter a Value"; } else { let answer = eval(screen.value); screen.value = answer; } }) clear.addEventListener("click", function (e) { screen.value = ""; }) })(); ``` -------------------------------- ### Customize base theme colors Source: https://retype.com/configuration/project Configures light mode appearance with custom colors and typography. Serves as foundation for site design. Values override default theme variables. ```yaml theme: base: base-color: "#8839ef" base-link-weight: 500 nav-item-text-active-weight: 700 ``` ```yaml theme: base: # Primary brand color base-color: "#8839ef" base-bg: "#eff1f5" # Base background color # Variants primary: "#1e66f5" # Blue success: "#40a02b" # Green danger: "#d20f39" # Red warning: "#df8e1d" # Yellow # Typography base-link-weight: 500 # Navigation nav-item-text-active-weight: 700 ``` -------------------------------- ### Retype Navigation Icon Configuration Source: https://retype.com/blog/2025-05-28-whats-new-in-retype-v39 Provides an example of the 'nav.icons' setting in Retype configuration for controlling the appearance of navigation icons. This feature requires a Retype Pro key. ```yaml nav: icons: mode: folders # Options: all, folders, pages, top, none ``` -------------------------------- ### Create Mermaid diagram with flowchart syntax Source: https://retype.com/components/mermaid Demonstrates basic Mermaid flowchart syntax with nodes and links. This example shows a decision process with multiple outcomes. ```mermaid graph LR A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[Result two] ``` -------------------------------- ### Add Custom Links to Navigation Source: https://retype.com/configuration/project Defines custom links to be added to the top-bar navigation of all pages. Each link can have text, a URL, an icon, and icon alignment. ```yaml links: - text: Getting Started link: https://retype.com/getting_started/ ``` ```yaml links: - text: Demos link: https://demo.example.com/ ``` ```yaml links: - text: About us link: /about/ ``` ```yaml links: - text: Issues link: https://github.com/retypeapp/retype/issues/ icon: bug ``` ```yaml icon: rocket ``` ```yaml icon: ":rocket:" ``` ```yaml icon: ... ``` ```yaml icon: ../static/rocket.png ``` ```yaml links: - text: Demos link: https://demo.example.com/ icon: link-external iconAlign: right ``` ```yaml links: - text: Demos link: https://demo.example.com/ target: blank ``` -------------------------------- ### Center content using Container classes Source: https://retype.com/components/container Demonstrates centering Retype components on the page using built-in CSS classes with Container components. Shows examples for both content-center (for buttons) and text-center (for text) alignment. ```markdown :::content-center [!button My Button] ::: :::text-center This text should be centered :+1: ::: ``` -------------------------------- ### Configure 'Edit this page' Links Source: https://retype.com/configuration/project Options to enable and customize the 'Edit this page' links. This involves setting the repository URL, an optional base path within the repository, and a custom branch. ```yaml edit: repo: "https://github.com///" edit: repo: "https://github.com///edit/" edit: repo: "https://github.com/your-organization/your-repo" base: /src/docs edit: repo: "https://github.com/your-organization/your-repo" branch: master ``` -------------------------------- ### Create Dockerfile for Retype Build Source: https://retype.com/hosting/docker This Dockerfile sets up a multi-stage build process to compile the Retype project using .NET SDK and output an Apache HTTPD image for hosting. It requires a .NET 9.0 SDK and relies on the project's root files as input, producing a containerized static site. Limitations include assuming the project is in the root directory and using specific versions of tools. ```Dockerfile FROM mcr.microsoft.com/dotnet/sdk:9.0 AS builder WORKDIR /build COPY . /build RUN dotnet tool install retypeapp --tool-path /bin RUN retype build --output .docker-build/ FROM httpd:latest COPY --from=builder /build/.docker-build/ /usr/local/apache2/htdocs/ ``` -------------------------------- ### Uninstall Retype globally via npm Source: https://retype.com/guides/installation Removes the globally installed Retype package and cleans up. Requires the same package manager used for installation. After execution, the `retype` command is no longer available. ```Shell npm uninstall retypeapp --global ``` -------------------------------- ### Disable Auto-Opening Browser on Start Source: https://retype.com/configuration/project Prevents Retype from automatically opening the default web browser when the 'retype start' command is executed. Default is 'true'. ```yaml start: open: false ``` -------------------------------- ### Basic GitHub Actions Workflow for Retype Source: https://retype.com/guides/github-actions This workflow automates building and deploying a Retype website to GitHub Pages. It checks out the code, runs the Retype build action, and then deploys to a specified branch (defaulting to 'retype'). It requires `contents: write` permissions. ```yaml name: Publish Retype powered website to GitHub Pages on: workflow_dispatch: push: branches: - main jobs: publish: runs-on: ubuntu-latest permissions: contents: write steps: - uses: actions/checkout@v4 - uses: retypeapp/action-build@latest - uses: retypeapp/action-github-pages@latest with: update-branch: true ``` -------------------------------- ### Home.md as Project Home Page in Retype Source: https://retype.com/blog/2025-05-04-whats-new-in-retype-v38 Configure your Retype project to use 'home.md' as the home page. This offers an alternative to 'readme.md', 'index.md', 'default.md', and 'welcome.md', providing greater flexibility in organizing your project's entry point. ```markdown # Welcome Home This is your project's home page using home.md. ``` -------------------------------- ### Basic Retype YAML Configuration Source: https://retype.com/samples/basic-project-config This YAML file configures a basic Retype project, specifying input and output directories, website URL, branding title and label, navigation links, and footer copyright. All settings are optional with defaults used if omitted. It supports Retype Pro features via uncommenting the pro flag, but requires no external dependencies beyond Retype CLI. ```yaml input: . output: .retype url: docs.example.com # Use your website address here start: # Uncomment the next line to try Retype Pro features # pro: true branding: title: Project Name label: Docs links: - text: Getting Started link: https://retype.com/guides/getting-started/ footer: copyright: "© Copyright {{ year }}. All rights reserved." ``` -------------------------------- ### Executing Retype CLI Commands (Bash) Source: https://retype.com/guides/cli Retype CLI commands build and serve static sites from Markdown files. Requires Node.js installation and a project directory with .md files. Inputs include optional paths and flags; outputs are local servers, built files, or config stubs. Limitations: Development server not for public hosting; use dedicated services instead. ```bash retype start ``` ```bash retype start -n ``` ```bash retype init ``` -------------------------------- ### Configuring Retype Projects (YAML) Source: https://retype.com/guides/cli The retype.yml file configures project settings like input/output paths, branding, links, and footer. It is generated by retype init or created manually in the project root. Inputs are YAML key-value pairs; outputs affect site generation. All options are optional but enable customization; overrides defaults for title, URL, etc. ```yaml input: . output: .retype url: example.com # Add your website here branding: title: Project Name label: Docs links: - text: Getting Started link: https://retype.com/guides/getting-started/ footer: copyright: "© Copyright {{ year }}. All rights reserved." ``` ```yaml branding: title: Company X ``` -------------------------------- ### Create Basic Description Lists Source: https://retype.com/components/list Demonstrates the Markdown syntax for creating basic description lists. Terms are followed by a colon and their details on the next line, indented. ```markdown Term 1 : Detail 1 Term 2 : Detail 2 Term 3 : Detail 3 ``` -------------------------------- ### Enabling Live Editor in Retype YAML Source: https://retype.com/configuration/project Controls the live editor functionality available during 'retype start'. Purpose: Enables or disables the editor for real-time page editing. Dependencies: Only active in development mode. Inputs: Boolean value. Outputs: Editor visibility in the UI. Limitations: Disabled in production builds. ```yaml editor: enabled: false # Default is true ``` -------------------------------- ### Hide comments in JavaScript with Retype Markdown Source: https://retype.com/components/comments A minimal JavaScript function containing an inline comment to illustrate embedding code documentation within a code block. This example complements the Markdown-focused discussion of hidden comments by showing a typical inline comment pattern inside a function. ```javascript function complexAlgorithm() {\n // Implementation details\n} ``` -------------------------------- ### GitLab CI/CD Configuration for Retype Source: https://retype.com/hosting/gitlab-pages This .gitlab-ci.yml file configures a CI/CD pipeline for GitLab Pages. It uses the latest Node.js image, installs the Retype CLI globally, and sets up a deploy stage to build and publish the website to the 'public' directory. The pipeline is triggered only on commits to the 'main' branch. The RETYPE_KEY environment variable is optional for Retype Pro users. ```yaml image: node:latest before_script: - npm install retypeapp --global stages: - deploy pages: stage: deploy script: - retype build --key $RETYPE_KEY --output public artifacts: paths: - public/ only: - main ``` -------------------------------- ### Create Tight Markdown Lists Source: https://retype.com/components/list Illustrates the syntax for creating 'tight' Markdown lists, where list items are not separated by blank lines. This results in a more compact list output. ```markdown - First item - Second item - Nested item 1 - Nested item 2 - Third item ``` -------------------------------- ### JavaScript Constant Declaration Example Source: https://retype.com/components/code-block This snippet illustrates a basic JavaScript constant declaration used in code block examples for syntax highlighting and titling in Retype. It assigns a string value to a constant variable with no external dependencies. The purpose is to demonstrate simple code display; input is the string literal, output is the declared constant. ```javascript const msg = "hello, world"; ``` ```javascript const msg = "Set a code block title"; ``` -------------------------------- ### Add Retype Community Key to Wallet Source: https://retype.com/community This command adds a community key to your Retype wallet, enabling GitHub Pages hosting and Retype Pro features. Ensure the key is correctly copied and pasted. No external dependencies are required for this command. ```bash retype wallet --add dEVPBhEAT01MR0NBQ0xBT0VHR0NDR0dGT09PRUFDTEZARE9PT09FRERET15aEx0AHAEWWh0bT0Q-pId4N7uwS11nfzalpH2MG9Wql5Jtoc9vFnQMJJeh0WfKhv7CHrYPeg ``` -------------------------------- ### Set Maximum Search Results Source: https://retype.com/configuration/project Specify the maximum number of search results to display. The default is 20. ```yaml search: maxResults: 20 ``` -------------------------------- ### Retype FTP Deployment GitHub Actions Workflow Source: https://retype.com/hosting/ftp This GitHub Actions workflow automates the building and deployment of a Retype website to an FTP host. It uses the 'actions/checkout', 'retypeapp/action-build', and 'retypeapp/action-git-ftp' actions. The workflow triggers on push to the main branch or manual dispatch, builds the Retype site, and deploys changes to the FTP server using provided secrets for credentials and host information. It maintains a 'retype' branch to track changes. ```yaml name: Publish Retype powered website to FTP on: workflow_dispatch: push: branches: - main jobs: publish: name: Publish to FTP host runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: retypeapp/action-build@latest - uses: retypeapp/action-git-ftp@latest with: ftp-host: ${{ secrets.FTP_SERVER_ADDRESS }} ftp-root: public_html ftp-user: ${{ secrets.FTP_USERNAME }} ftp-pass: ${{ secrets.FTP_PASSWORD }} update-branch: true ``` -------------------------------- ### Create Basic Button in Retype Source: https://retype.com/components/button Demonstrates how to create a basic button in Retype using the [!button] syntax. The button can be configured with text and links. ```markdown [!button Button](button.md) [Normal link](button.md) ``` -------------------------------- ### Set Custom Output Directory Source: https://retype.com/configuration/project Specify a custom path for the output directory of the Retype build. The default is '.retype'. ```yaml output: ./docs ``` -------------------------------- ### Embed New Octicons in Content Source: https://retype.com/components/octicons Example of using newly added Octicons like `sparkle` within content by referencing their shortcodes. ```Markdown :icon-sparkle: ``` -------------------------------- ### Enable Liquid Syntax for Templating Source: https://retype.com/configuration/project Enables Liquid syntax (`{% ... %}`) for the Retype content templating engine. Setting to 'true' makes Retype incompatible with GitBook style component configuration. Default is 'false'. ```yaml templating: liquid: false # Set to true to enable ``` -------------------------------- ### Configure Basic File Download with !file Source: https://retype.com/components/file-download Use the `!file` specifier in a link to create a basic file download component. Retype automatically uses the file name as the link text. ```markdown [!file](/static/sample.txt) ``` -------------------------------- ### Set Page Icon in Metadata Source: https://retype.com/components/octicons Example of setting a page icon in the YAML front matter metadata by referencing the Octicon's shortcode. ```YAML --- icon: rocket --- ``` -------------------------------- ### Control 'Powered by Retype' Branding Source: https://retype.com/configuration/project Enable or disable the 'Powered by Retype' branding on the website. This feature requires a Retype Pro license. ```yaml poweredByRetype: true # Set to `false` to remove. ``` -------------------------------- ### Configure Cache Busting Strategy Source: https://retype.com/configuration/project Options for cache busting website resources like CSS and JS files to ensure users have the latest versions. This includes 'none', 'path', and 'query' strategies. ```html