Spina CMS

https://github.com/spinacms/spina
Admin
Spina CMS is an easy-to-use content management system with a clean, distraction-free interface,...
Tokens:19,475
Snippets:128
Trust Score:8.7
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Installing Spina CMS - Shell

Source: https://github.com/spinacms/spina/blob/main/docs/v2/getting_started/2_installing_spina.md

This command executes the Spina CMS installer. It guides the user through the initial setup, including creating an admin user and configuring the site, after the 'spina' gem has been installed via `bundle install`.

```Shell
rails spina:install
```

--------------------------------

### Running Spina Installer (Shell)

Source: https://github.com/spinacms/spina/blob/main/docs/v2/1_getting_started.md

This command executes the Spina installer, which sets up the necessary database tables, assets, and helps create the initial administrator user for the CMS. It is a crucial step after adding the gem.

```Shell
rails spina:install
```

--------------------------------

### Running Spina CMS Installer (Rails)

Source: https://github.com/spinacms/spina/blob/main/docs/v1/getting_started/2_install_spina.md

This command executes the Spina CMS installer within a Rails application. It sets up the necessary database configurations, assets, and guides you through creating the initial administrator user. After installation, you can start the Rails server and access the admin interface.

```Ruby
rails spina:install
```

--------------------------------

### Running Spina Installer (Rails/Shell)

Source: https://github.com/spinacms/spina/blob/main/README.md

This command initiates the Spina CMS setup process within a Ruby on Rails application. The installer interactively guides the user through essential configurations, including the creation of the first administrative user.

```Shell
rails spina:install
```

--------------------------------

### Starting Rails Server (Shell)

Source: https://github.com/spinacms/spina/blob/main/docs/v2/1_getting_started.md

This command starts the Ruby on Rails development server, allowing you to access your application and the Spina admin interface in your web browser. The Spina admin panel will be available at `/admin`.

```Shell
rails s
```

--------------------------------

### Installing ActiveStorage - Shell

Source: https://github.com/spinacms/spina/blob/main/docs/v2/getting_started/2_installing_spina.md

This command runs the ActiveStorage installer, which sets up the necessary database tables and configurations for handling file uploads in the Rails application. Spina CMS relies on ActiveStorage for media management.

```Shell
rails active_storage:install
```

--------------------------------

### Creating New Rails App with PostgreSQL - Shell

Source: https://github.com/spinacms/spina/blob/main/docs/v2/getting_started/2_installing_spina.md

This command initializes a new Ruby on Rails application named 'yourwebsite'. It specifies PostgreSQL as the database, which is a prerequisite for Spina CMS.

```Shell
rails new yourwebsite --database=postgresql
```

--------------------------------

### Creating Database for Rails App - Shell

Source: https://github.com/spinacms/spina/blob/main/docs/v2/getting_started/2_installing_spina.md

This command creates the database for the Rails application based on the configuration in `config/database.yml`. It's a necessary step before running migrations or installing Spina.

```Shell
rails db:create
```

--------------------------------

### Adding Spina Gem to Gemfile (Ruby)

Source: https://github.com/spinacms/spina/blob/main/docs/v2/1_getting_started.md

This snippet adds the 'spina' gem to your Ruby on Rails application's Gemfile, making the Spina CMS available for use. It is a prerequisite for installing and running Spina.

```Ruby
gem 'spina'
```

--------------------------------

### Running Spina Installer (Shell)

Source: https://github.com/spinacms/spina/blob/main/docs/v2/getting_started/3_existing_project.md

This command executes the Spina installer, which is essential for setting up the CMS within your Rails application. It handles database migrations, initial configurations, and guides you through creating the first administrator user for Spina.

```Shell
rails spina:install
```

--------------------------------

### Running Spina Installer (Shell)

Source: https://github.com/spinacms/spina/blob/main/docs/v1/getting_started/3_existing_project.md

This command executes the Spina CMS installer within a Rails project. It guides the user through setting up the first administrative user and necessary configurations for the CMS.

```Shell
rails spina:install
```

--------------------------------

### Starting Rails Server (Rails/Shell)

Source: https://github.com/spinacms/spina/blob/main/README.md

This command starts the Ruby on Rails development server, making the application accessible via a web browser. After installing Spina, running this command allows users to access the Spina CMS admin panel, typically at the '/admin' path.

```Shell
rails s
```

--------------------------------

### Adding Spina Gem to Gemfile - Ruby

Source: https://github.com/spinacms/spina/blob/main/docs/v2/getting_started/2_installing_spina.md

This line adds the 'spina' gem to the application's Gemfile, declaring it as a dependency. After adding this, `bundle install` must be run to download and install the gem.

```Ruby
gem 'spina'
```

--------------------------------

### Executing Spina First Deployment Task (Rails)

Source: https://github.com/spinacms/spina/blob/main/docs/v2/getting_started/6_deploying.md

This Rake task, `spina:first_deploy`, is intended for the initial deployment of a Spina CMS application in a production environment. It performs essential setup operations, similar to the `install` task, but specifically omits file copying, assuming files are already in place for production.

```Shell
rails spina:first_deploy
```

--------------------------------

### Installing PostgreSQL with Homebrew (Shell)

Source: https://github.com/spinacms/spina/blob/main/docs/v2/getting_started/1_installing_ruby.md

This command installs the PostgreSQL database on macOS using Homebrew, a popular package manager. PostgreSQL is a required database for Spina CMS.

```Shell
brew install postgresql
```

--------------------------------

### cURL Example for Spina API Authentication

Source: https://github.com/spinacms/spina/blob/main/docs/v2/api/2_authentication.md

This cURL command provides a practical example of making an authenticated request to the Spina API. It demonstrates how to include the 'Authorization' header with a 'Token' and a placeholder API key when querying the /api/pages.json endpoint.

```Bash
curl -H "Authorization: Token dummy_api_key" http://localhost:3000/api/pages.json
```

--------------------------------

### Installing PostgreSQL with Homebrew on macOS

Source: https://github.com/spinacms/spina/blob/main/docs/v1/getting_started/1_installing_ruby.md

This command installs the PostgreSQL database on macOS using Homebrew, a popular package manager. PostgreSQL is a required dependency for Spina CMS to store its content.

```Shell
brew install postgresql
```

--------------------------------

### Adding Spina Gem to Gemfile (Ruby)

Source: https://github.com/spinacms/spina/blob/main/docs/v1/getting_started/2_install_spina.md

This snippet adds the 'spina' gem to your Ruby project's Gemfile, making the Spina CMS available for use. It is a prerequisite for installing and running Spina.

```Ruby
gem 'spina'
```

--------------------------------

### Listing All Resources API Endpoint and Response (JSON)

Source: https://github.com/spinacms/spina/blob/main/docs/v2/api/6_resources.md

This snippet details the API endpoint for retrieving a list of all available resources. It also provides an example of the expected JSON response, including resource attributes, relationships, and pagination metadata.

```HTTP
/api/resources.json
```

```JSON
{
  "data": [
    {
      "id": "4",
      "type": "resource",
      "attributes": {
        "name": "guide",
        "label": "Guides",
        "view_template": "",
        "order_by": "",
        "slug": "guides"
      },
      "relationships": {
        "pages": {
          "meta": {
            "count": 5
          },
          "links": {
            "self": "/api/resources/4",
            "related": "/api/resources/4/pages"
          }
        }
      }
    }
  ],
  "meta": {
    "current_page": 1,
    "total": 1,
    "per_page": 25,
    "path": "/api/resources"
  },
  "links": {
    "first": "/api/resources?page=1",
    "prev": null,
    "next": null,
    "last": "/api/resources?page=1"
  }
}
```

--------------------------------

### Adding Spina Gem to Gemfile (Ruby)

Source: https://github.com/spinacms/spina/blob/main/docs/v2/getting_started/3_existing_project.md

This snippet demonstrates how to add the Spina gem to your Rails project's Gemfile, which is the initial step for integrating Spina CMS. After adding the gem, you must run `bundle install` to download and install the gem and its dependencies.

```Ruby
gem "spina"
```

--------------------------------

### Configuring Spina Theme Repeater Parts (Ruby)

Source: https://github.com/spinacms/spina/blob/main/docs/v2/getting_started/4_upgrading.md

This Ruby example demonstrates how to define a repeater part within the `theme.parts` configuration in Spina v2. It replaces the old `config.structures` and allows for defining repeatable content blocks like a 'portfolio' with nested parts. This is key for managing dynamic, structured content within themes.

```Ruby
theme.parts = [
  # ...
  {
    name: 'portfolio',
    title: "Portfolio",
    part_type: "Spina::Parts::Repeater",
    parts: %w(title image description)
  }
]
```

--------------------------------

### Example Response for Listing Navigations - JSON

Source: https://github.com/spinacms/spina/blob/main/docs/v2/api/5_navigations.md

This JSON object represents the typical response when querying the /api/navigations.json endpoint. It includes an array of navigation data, pagination metadata, and links for navigating through results.

```JSON
{
  "data": [
    {
      "id": "2",
      "type": "navigation",
      "attributes": {
        "name": "main",
        "label": "Main navigation"
      }
    }
  ],
  "meta": {
    "current_page": 1,
    "total": 1,
    "per_page": 25,
    "path": "/api/navigations"
  },
  "links": {
    "first": "/api/navigations?page=1",
    "prev": null,
    "next": null,
    "last": "/api/navigations?page=1"
  }
}
```

--------------------------------

### Registering Default Theme Parts and Templates - Ruby

Source: https://github.com/spinacms/spina/blob/main/docs/v2/themes/1_parts.md

This snippet shows the initial configuration of a Spina theme in `config/initializers/themes/default.rb`. It defines the theme's name, title, available parts (e.g., 'text'), view templates ('homepage', 'show'), custom pages, and navigations. This setup forms the basic structure for content management within the theme.

```Ruby
Spina::Theme.register do |theme|
  theme.name = 'default'
  theme.title = 'Default theme'
  
  theme.parts = [
    {name: 'text',  title: "Body", hint: "Your main content", part_type: "Spina::Parts::Text"}
  ]
  
  theme.view_templates = [
    {name: 'homepage', title: 'Homepage', parts: %w(text)}, 
    {name: 'show', title: 'Page', parts: %w(text)}
  ]
  
  theme.custom_pages = [
    {name: 'homepage', title: "Homepage", deletable: false, view_template: "homepage"},
  ]

  theme.navigations = [
    {name: 'main', label: 'Main navigation'}
  ]
  
  theme.layout_parts = []
  theme.resources = []
  theme.plugins = []
  theme.embeds = []
end
```

--------------------------------

### Git Workflow for Spina Code Contributions

Source: https://github.com/spinacms/spina/blob/main/CONTRIBUTING.md

This snippet illustrates the standard Git command-line workflow for contributing code to the Spina project. It covers the essential steps from forking and cloning the repository to creating a feature branch, committing changes, pushing to the remote, and preparing for a pull request. It serves as a practical guide for developers engaging in code contributions.

```sh
# Fork the repository
$ git clone https://github.com/your_username/Spina.git
$ cd Spina
$ git checkout -b feature/feature_name
# Code
# Run tests
$ git add .
$ git commit -m "Adding posts support."
$ git push
# Open PR from your feature branch to main
```

--------------------------------

### Example Response for Showing Specific Navigation - JSON

Source: https://github.com/spinacms/spina/blob/main/docs/v2/api/5_navigations.md

This JSON object illustrates the response when requesting a specific navigation by ID. It provides detailed attributes of the navigation, including its name, label, and a hierarchical tree structure of associated pages.

```JSON
{
  "data": {
    "id": "2",
    "type": "navigation",
    "attributes": {
      "name": "main",
      "label": "Main navigation",
      "tree": [
        {
          "depth": 0,
          "page": {
            "id": 1,
            "menu_title": "Homepage",
            "materialized_path": "/"
          },
          "children": []
        },
        {
          "depth": 0,
          "page": {
            "id": 32,
            "menu_title": "Demo page",
            "materialized_path": "/demo-page"
          },
          "children": [
            {
              "depth": 1,
              "page": {
                "id": 21,
                "menu_title": "Sub page",
                "materialized_path": "/guides/sub-page"
              },
              "children": []
            }
          ]
        }
      ]
    }
  }
}
```

--------------------------------

### Listing Pages within a Resource API Endpoint and Response (JSON)

Source: https://github.com/spinacms/spina/blob/main/docs/v2/api/6_resources.md

This snippet outlines the API endpoint for retrieving a list of pages associated with a particular resource, identified by its ID. It includes an example of the paginated JSON response containing page data and metadata.

```HTTP
/api/resources/{id}/pages.json
```

```JSON
{
  "data": [
    {
      "id": "11",
      "type": "page",
      "...": "..."
    },
    "..."
  ],
  "meta": {
    "current_page": 1,
    "total": 5,
    "per_page": 25,
    "path": "/api/resources/4/pages"
  },
  "links": {
    "first": "/api/resources/4/pages?page=1",
    "prev": null,
    "next": null,
    "last": "/api/resources/4/pages?page=1"
  }
}
```

--------------------------------

### Retrieving a Single Resource API Endpoint and Response (JSON)

Source: https://github.com/spinacms/spina/blob/main/docs/v2/api/6_resources.md

This snippet describes the API endpoint used to fetch a specific resource by its unique identifier. An example of the JSON response for a single resource, including its attributes and relationships, is also provided.

```HTTP
/api/resources/{id}.json
```

```JSON
{
  "data": {
    "id": "4",
    "type": "resource",
    "attributes": {
      "name": "guide",
      "label": "Guides",
      "view_template": "",
      "order_by": "",
      "slug": "guides"
    },
    "relationships": {
      "pages": {
        "meta": {
          "count": 5
        },
        "links": {
          "self": "/api/resources/4",
          "related": "/api/resources/4/pages"
        }
      }
    }
  }
}
```

--------------------------------

### Example API Pagination Response Structure - JSON

Source: https://github.com/spinacms/spina/blob/main/docs/v2/api/3_pagination.md

This JSON snippet illustrates the `meta` and `links` attributes added to paginated API responses in Spina CMS. The `meta` object provides details like current page, total records, and items per page, while the `links` object contains URLs for navigating to the first, previous, next, and last pages of the paginated resource.

```JSON
"meta": {
  "current_page": 1,
  "total": 75,
  "per_page": 25,
  "path": "/api/pages"
},
"links": {
  "first": "/api/pages?page=1",
  "prev": null,
  "next": "/api/pages?page=2",
  "last": "/api/pages?page=3"
}
```

--------------------------------

### List Pages Endpoint - Spina CMS API

Source: https://github.com/spinacms/spina/blob/main/docs/v2/api/4_pages.md

This snippet shows the HTTP endpoint used to retrieve a list of all pages available in the Spina CMS. It's a standard GET request to the base pages API.

```HTTP
/api/pages.json
```

--------------------------------

### Rendering Line Content in Spina CMS View Template (ERB)

Source: https://github.com/spinacms/spina/blob/main/docs/v2/rendering_content/1_line.md

This example shows how to render the 'headline' content, previously configured as a 'Line' part, within a Spina CMS view template. The `content` helper method is used to retrieve and display the stored text inside an H1 tag.

```ERB
<h1><%= content(:headline) %></h1>
```

--------------------------------

### Generating Custom SpinaCMS Embed Component (Rails)

Source: https://github.com/spinacms/spina/blob/main/docs/v2/rendering_content/3_rich_text.md

This Rails generator command creates a new custom embeddable component for SpinaCMS. It takes the component name (`my_component`) and desired attributes (`some_attribute`, `another_attribute`) as arguments. This command automatically generates the necessary model file for the custom embed, simplifying the setup process.

```Shell
rails g spina:embed my_component some_attribute another_attribute
```

--------------------------------

### Mounting Spina Engine at Subdirectory (Ruby)

Source: https://github.com/spinacms/spina/blob/main/docs/v2/getting_started/3_existing_project.md

This Ruby snippet illustrates how to mount the Spina engine at a custom subdirectory, such as '/blog', instead of the root. This is useful if your application already uses the root path, but requires regenerating materialized paths for existing Spina pages.

```Ruby
mount Spina::Engine => "/blog"
```

--------------------------------

### Updating Spina Theme View Templates Configuration (Ruby)

Source: https://github.com/spinacms/spina/blob/main/docs/v2/getting_started/4_upgrading.md

This Ruby snippet shows how to update the `theme.view_templates` configuration in Spina v2. It demonstrates changing `page_parts` to `parts` within a view template definition, specifying which content parts are available for a given template like 'homepage'. This ensures view templates correctly link to the new JSON-backed content parts.

```Ruby
theme.view_templates = [
  # ...
  {
    name: 'homepage',
    title: 'Homepage',
    parts: %w(headline body)
  }
]
```

--------------------------------

### Creating a Spina Resource in Ruby

Source: https://github.com/spinacms/spina/blob/main/docs/v2/themes/6_resources.md

This snippet demonstrates how to create a new Spina resource record. Resources allow managing distinct sets of pages, such as blog posts or team members, separate from regular pages. The `name` attribute provides a unique identifier, and `label` is used for display purposes in the Spina admin interface.

```Ruby
Spina::Resource.create(name: "blogposts", label: "Blogposts")
```

--------------------------------

### Registering Default Theme with Page Parts in Spina CMS (Ruby)

Source: https://github.com/spinacms/spina/blob/main/docs/v1/themes/1_page_parts.md

This snippet demonstrates the initial registration of a default theme in Spina CMS using a Ruby initializer. It defines the theme's name, title, and a single 'content' page part of type `Spina::Text`. It also sets up 'homepage' and 'show' view templates, both utilizing the 'content' page part, and registers a 'homepage' custom page.

```Ruby
::Spina::Theme.register do |theme|
  theme.name = 'default'
  theme.title = 'Default Theme'

  theme.page_parts = [{
    name:             'content',
    title:            'Content',
    partable_type:    'Spina::Text'
  }]

  theme.view_templates = [{
    name:       'homepage',
    title:      'Homepage',
    page_parts: ['content']
  }, {
    name: 'show',
    title:        'Default',
    description:  'A simple page',
    usage:        'Use for your content',
    page_parts:   ['content']
  }]

  theme.custom_pages = [{
    name:           'homepage',
    title:          'Homepage',
    deletable:      false,
    view_template:  'homepage'
  }]
end
```

--------------------------------

### Mounting Spina Engine at Root Path (Ruby)

Source: https://github.com/spinacms/spina/blob/main/docs/v2/getting_started/3_existing_project.md

This Ruby snippet shows the default configuration for mounting the Spina engine at the root path (/) of your Rails application. This makes Spina's public-facing pages and admin interface accessible directly from your application's base URL.

```Ruby
mount Spina::Engine => "/"
```

--------------------------------

### Configuring Spina API Key in Ruby

Source: https://github.com/spinacms/spina/blob/main/docs/v2/api/1_enabling_the_api.md

This snippet demonstrates how to enable the Spina API by setting the `api_key` within the `Spina.configure` block in `config/initializers/spina.rb`. It retrieves the API key from Rails credentials, which is the recommended secure practice for storing sensitive information.

```Ruby
# config/initializers/spina.rb
Spina.configure do |config|
  # ...
  config.api_key = Rails.application.credentials.spina_api_key
end
```

--------------------------------

### Converting Spina v1 Line Part to JSON-backed Spina v2 Part (Ruby)

Source: https://github.com/spinacms/spina/blob/main/docs/v2/getting_started/4_upgrading.md

This Ruby code defines a `convert_to_json!` method for the old `Spina::Line` PagePart. It demonstrates how to transform existing content from the v1 database structure into the new `Spina::Parts::Line` JSON-backed format used in Spina v2. This method is crucial for migrating legacy content during the upgrade process.

```Ruby
module Spina
  class Line < ApplicationRecord
    extend Mobility
    translates :content, fallbacks: true

    def convert_to_json!
      text = Spina::Parts::Line.new
      text.content = content
      text
    end
  end
end
```

--------------------------------

### Updating Spina Theme Parts Configuration (Ruby)

Source: https://github.com/spinacms/spina/blob/main/docs/v2/getting_started/4_upgrading.md

This Ruby snippet illustrates how to update the `theme.parts` configuration in Spina v2. It shows the new structure for defining a simple text part, replacing the older `config.page_parts` syntax. This configuration is essential for themes to correctly recognize and render content parts.

```Ruby
theme.parts = [{
  name: 'text',
  title: "Text",
  part_type: "Spina::Parts::Text"
}]
```

--------------------------------

### Configuring MultiLine Part in Spina CMS

Source: https://github.com/spinacms/spina/blob/main/docs/v2/rendering_content/2_multi_line.md

This snippet demonstrates how to configure the MultiLine part in Spina CMS's `config.parts` array. It defines a part named 'teaser' with the title 'Teaser' and specifies its type as `Spina::Parts::MultiLine`.

```Ruby
config.parts = [
  # ...
  {
    name: "teaser",
    title: "Teaser",
    part_type: "Spina::Parts::MultiLine"
  }
]
```

--------------------------------

### General Page Layout and Typography Styling

Source: https://github.com/spinacms/spina/blob/main/app/assets/icons/spina/preview/icons_spina-preview.html

This snippet defines the foundational CSS for the page layout, including box-sizing, body typography, link styles, header structure, and container dimensions. It also includes styles for individual glyph previews and their interactive states, ensuring a consistent visual presentation.

```css
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; }
body { background: #fff; color: #444; font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; }
a, a:visited { color: #888; text-decoration: underline; }
a:hover, a:focus { color: #000; }
header { border-bottom: 2px solid #ddd; margin-bottom: 20px; overflow: hidden; padding: 20px 0; }
header h1 { color: #888; float: left; font-size: 36px; font-weight: 300; }
header a { float: right; font-size: 14px; }
.container { margin: 0 auto; max-width: 1200px; min-width: 960px; padding: 0 40px; width: 90%; }
.glyph { border-bottom: 1px dotted #ccc; padding: 10px 0 20px; margin-bottom: 20px; }
.preview-glyphs { vertical-align: bottom; }
.preview-scale { color: #888; font-size: 12px; margin-top: 5px; }
.step { display: inline-block; line-height: 1; position: relative; width: 10%; }
.step .letters, .step i { -webkit-transition: opacity .3s; -moz-transition: opacity .3s; -ms-transition: opacity .3s; -o-transition: opacity .3s; transition: opacity .3s; }
.step:hover .letters { opacity: 1; }
.step:hover i { opacity: .3; }
.letters { opacity: .3; position: absolute; }
.characters-off .letters { display: none; }
.characters-off .step:hover i { opacity: 1; }
.size-12 { font-size: 12px; }
.size-14 { font-size: 14px; }
.size-16 { font-size: 16px; }
.size-18 { font-size: 18px; }
.size-21 { font-size: 21px; }
.size-24 { font-size: 24px; }
.size-36 { font-size: 36px; }
.size-48 { font-size: 48px; }
.size-60 { font-size: 60px; }
.size-72 { font-size: 72px; }
.usage { margin-top: 10px; }
.usage input { font-family: monospace; margin-right: 3px; padding: 2px 5px; text-align: center; }
.usage .point { width: 150px; }
.usage .class { width: 250px; }
footer { color: #888; font-size: 12px; padding: 20px 0; }
```

--------------------------------

### Assigning New Part to View Template - Ruby

Source: https://github.com/spinacms/spina/blob/main/docs/v2/themes/1_parts.md

This snippet illustrates how to associate the newly created 'portfolio' part with an existing view template, such as the 'show' template. By including 'portfolio' in the `parts` array of a `view_template`, this content block becomes available for use and editing on pages that utilize this specific template.

```Ruby
theme.view_templates = [{
  name:  'homepage',
  title: 'Homepage',
  parts: %w(content)
}, {
  name:         'show',
  title:        'Default',
  description:  'A simple page',
  usage:        'Use for your content',
  parts:        %w(content portfolio) # added 'portfolio'
}]
```

--------------------------------

### Configuring an Option Part in Spina CMS (Ruby)

Source: https://github.com/spinacms/spina/blob/main/docs/v2/rendering_content/7_option.md

This Ruby configuration snippet demonstrates how to define an 'Option' part within the Spina CMS theme configuration. It specifies the part's name, title, a list of available options, and its type as `Spina::Parts::Option`. This allows content editors to select from a predefined list.

```Ruby
config.parts = [
  # ...
  {
    name: "alignment",
    title: "Alignment",
    options: ["left", "right", "center"],
    part_type: "Spina::Parts::Option"
  }
]
```

--------------------------------

### Rendering Image with `image_tag` Helper in SpinaCMS (ERB)

Source: https://github.com/spinacms/spina/blob/main/docs/v2/rendering_content/4_image.md

This ERB snippet shows how to render an image using the `content.image_tag` helper. It specifies the image part name (`:header_image`), variant options (`resize_to_fill: [200, 200]`), and HTML attributes (`class: 'image'`), automatically adding an `alt` attribute.

```ERB
<%= content.image_tag(:header_image, {resize_to_fill: [200, 200]}, {class: 'image'}) %>
```

--------------------------------

### Creating a New Spina Resource in Ruby

Source: https://github.com/spinacms/spina/blob/main/docs/v1/themes/5_resources.md

This snippet demonstrates how to programmatically create a new `Spina::Resource` record. The `name` attribute is used for internal identification, while the `label` attribute provides the display name in the Spina CMS navigation, enabling a new section for managing a specific type of content.

```Ruby
Spina::Resource.create(name: "blogposts", label: "Blogposts")
```

--------------------------------

### Styling a 404 Error Page with CSS

Source: https://github.com/spinacms/spina/blob/main/test/dummy/public/404.html

This CSS snippet provides comprehensive styling for a 404 'Page Not Found' error page. It includes universal box-sizing, margin resets, base font settings, and specific styles for body, links, text emphasis, and layout containers like `main` and `article` to ensure a consistent and responsive appearance across different screen sizes.

```CSS
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { font-size: 16px; }
body { background: #FFF; color: #261B23; display: grid; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Aptos, Roboto, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: clamp(1rem, 2.5vw, 2rem); -webkit-font-smoothing: antialiased; font-style: normal; font-weight: 400; letter-spacing: -0.0025em; line-height: 1.4; min-height: 100vh; place-items: center; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; }
a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 0.0925em; }
b, strong { font-weight: 700; }
i, em { font-style: italic; }
main { display: grid; gap: 1em; padding: 2em; place-items: center; text-align: center; }
main header { width: min(100%, 12em); }
main header svg { height: auto; max-width: 100%; width: 100%; }
main article { width: min(100%, 30em); }
main article p { font-size: 75%; }
main article br { display: none; @media(min-width: 48em) { display: inline; } }
```

--------------------------------

### Fetching Pages for a Specific Spina Resource in Ruby

Source: https://github.com/spinacms/spina/blob/main/docs/v1/themes/5_resources.md

This snippet demonstrates how to retrieve all pages associated with a particular `Spina::Resource`. It first finds the resource by its unique `name` (e.g., 'blogposts') and then accesses its `pages` association, providing a direct way to manage or display content specific to that resource.

```Ruby
Spina::Resource.find_by(name: "blogposts").pages
```

--------------------------------

### Configuring Spina CMS for Custom Authentication in Ruby

Source: https://github.com/spinacms/spina/blob/main/docs/v2/advanced/3_authentication.md

This configuration snippet, placed in `config/initializers/spina.rb`, tells Spina CMS to use the `MyApp::CustomAuth` module for authentication instead of its default system. This links the custom authentication logic to the CMS.

```Ruby
Spina.configure do |config|
  # ...
  config.authentication = "MyApp::CustomAuth"
end
```

--------------------------------

### Rendering New Part in ERB View - ERB

Source: https://github.com/spinacms/spina/blob/main/docs/v2/themes/1_parts.md

This code shows how to render the 'portfolio' part within an ERB view file, specifically `views/default/pages/show.html.erb`. The line `<%= content.html :portfolio %>` dynamically displays the content entered into the 'portfolio' text box from the Spina admin panel on the front-end page.

```ERB
<h1><%= current_page.title %></h1>

<%= content.html :text %>
<%= content.html :portfolio %> # added this line
```

--------------------------------

### Defining Global Base Styles in CSS

Source: https://github.com/spinacms/spina/blob/main/test/dummy/public/400.html

This CSS snippet establishes foundational styles for an HTML document, including a universal box-sizing reset, margin reset, base font size for `html`, and comprehensive styling for the `body` element covering background, text color, font properties, and layout. It also defines styles for links, bold/italic text, and main content sections, including responsive adjustments for line breaks.

```CSS
*, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { font-size: 16px; } body { background: #FFF; color: #261B23; display: grid; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Aptos, Roboto, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: clamp(1rem, 2.5vw, 2rem); -webkit-font-smoothing: antialiased; font-style: normal; font-weight: 400; letter-spacing: -0.0025em; line-height: 1.4; min-height: 100vh; place-items: center; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; } a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 0.0925em; } b, strong { font-weight: 700; } i, em { font-style: italic; } main { display: grid; gap: 1em; padding: 2em; place-items: center; text-align: center; } main header { width: min(100%, 12em); } main header svg { height: auto; max-width: 100%; width: 100%; } main article { width: min(100%, 30em); } main article p { font-size: 75%; } main article br { display: none; @media(min-width: 48em) { display: inline; } }
```

--------------------------------

### Rendering MultiLine Content in Spina View Template

Source: https://github.com/spinacms/spina/blob/main/docs/v2/rendering_content/2_multi_line.md

This HTML snippet shows how to render the content of a MultiLine part in a Spina view template. It uses the `content(:teaser)` helper to retrieve the text and `simple_format` to preserve line breaks, wrapping the output in a paragraph tag.

```HTML
<p><%= simple_format content(:teaser) %></p>
```

--------------------------------

### Building Tailwind CSS for Spina Plugins (Local)

Source: https://github.com/spinacms/spina/blob/main/docs/v2/advanced/4_tailwind.md

This command-line task compiles Tailwind CSS for a Spina plugin locally. It's useful during development to generate a new build of your plugin's styles.

```Shell
rails spina:tailwind:build
```

--------------------------------

### Assigning New Page Part to View Template in Spina (Ruby)

Source: https://github.com/spinacms/spina/blob/main/docs/v1/themes/1_page_parts.md

This Ruby snippet modifies the `theme.view_templates` configuration to include the newly created 'portfolio' page part. It updates the 'show' view template by adding 'portfolio' to its `page_parts` array, making the new text box available for use with pages assigned to this template.

```Ruby
theme.view_templates = [{
  name:       'homepage',
  title:      'Homepage',
  page_parts: ['content']
}, {
  name:         'show',
  title:        'Default',
  description:  'A simple page',
  usage:        'Use for your content',
  page_parts:   ['content', 'portfolio'] # added 'portfolio'
}]
```

--------------------------------

### Adding a New Part to Spina Theme - Ruby

Source: https://github.com/spinacms/spina/blob/main/docs/v2/themes/1_parts.md

This code demonstrates how to extend the `theme.parts` array in the Spina initializer to include a new content block, specifically a 'portfolio' text part. By adding this hash, a new editable field becomes available in the Spina admin interface for pages using this theme.

```Ruby
theme.parts = [{
  name:         'content',
  title:        'Content',
  part_type:    'Spina::Parts::Text'
}, {
  name:         'portfolio', # added this part
  title:        'Portfolio',
  part_type:    'Spina::Parts::Text'
}]
```

--------------------------------

### Fetching Pages for a Specific Spina Resource in Ruby

Source: https://github.com/spinacms/spina/blob/main/docs/v2/themes/6_resources.md

This snippet illustrates how to retrieve all pages belonging to a particular Spina resource. It first finds the resource by its unique `name` and then accesses its associated pages. This is useful for displaying content specific to a blog, a list of team members, or other resource types.

```Ruby
Spina::Resource.find_by(name: "blogposts").pages
```

--------------------------------

### Configuring a Basic PageLink Part in Spina (Ruby)

Source: https://github.com/spinacms/spina/blob/main/docs/v2/rendering_content/9_page_link.md

This snippet demonstrates how to configure a basic `PageLink` part in a Spina CMS theme. It defines a part named 'page' with the title 'Page', allowing users to link to any general page within the CMS. This configuration is typically placed in `config.parts` within the theme's configuration file.

```Ruby
config.parts = [
  # ...
  {
    name: "page",
    title: "Page",
    part_type: "Spina::Parts::PageLink"
  }
]
```

--------------------------------

### Enabling Default Embeddable Components in SpinaCMS Theme (Ruby)

Source: https://github.com/spinacms/spina/blob/main/docs/v2/rendering_content/3_rich_text.md

This Ruby snippet demonstrates how to enable default embeddable components (button, youtube, vimeo) within a SpinaCMS theme. By setting `theme.embeds` to an array of component names, these components become available for use in the Trix editor. This configuration is typically found in `config/initializers/themes/default.rb`.

```Ruby
# config/initializers/themes/default.rb
Spina::Theme.register do |theme|
  # ...
  theme.embeds = %w(button youtube vimeo)
  # ...
end
```

--------------------------------

### Adding a New Text Page Part to Spina Theme (Ruby)

Source: https://github.com/spinacms/spina/blob/main/docs/v1/themes/1_page_parts.md

This Ruby snippet shows how to extend the `theme.page_parts` array in the Spina theme initializer. It adds a new page part named 'portfolio' with the title 'Portfolio' and sets its type to `Spina::Text`, allowing for an additional text input field in the Spina admin interface.

```Ruby
theme.page_parts = [{
  name:             'content',
  title:            'Content',
  partable_type:    'Spina::Text'
}, {
  name:             'portfolio', # added this hash
  title:            'Portfolio',
  partable_type:    'Spina::Text'
}]
```

--------------------------------

### Rendering Image URL with `image_url` Helper in SpinaCMS (ERB)

Source: https://github.com/spinacms/spina/blob/main/docs/v2/rendering_content/4_image.md

This ERB snippet demonstrates how to retrieve an image URL using the `content.image_url` helper, typically for use in CSS background images. It specifies the image part name (`:header_image`) and variant options (`resize_to_fill: [1280, 200]`), returning a direct URL to the processed image.

```ERB
<div style="background-image: url(<%= content.image_url(:header_image, {resize_to_fill: [1280, 200]}) %>)"></div>
```

--------------------------------

### Responsive Content Container - CSS

Source: https://github.com/spinacms/spina/blob/main/app/assets/icons/spina/preview/ics_spina-preview.html

Defines a responsive container class that centers content horizontally, sets a maximum and minimum width, and applies horizontal padding. The width is set to 90% of its parent, adapting to different screen sizes.

```CSS
.container { margin: 0 auto; max-width: 1200px; min-width: 960px; padding: 0 40px; width: 90%; }
```

--------------------------------

### Mapping Icon Classes to Unicode Glyphs - CSS

Source: https://github.com/spinacms/spina/blob/main/app/assets/icons/spina/preview/ics_spina-preview.html

Maps specific CSS classes (e.g., `.icon-barchart`) to their corresponding Unicode glyphs using the `content` property on the `::before` pseudo-element. This allows developers to display icons by simply adding the relevant class to an HTML element.

```CSS
.icon-barchart:before { content: "\f100"; }
.icon-bars:before { content: "\f101"; }
.icon-bold:before { content: "\f102"; }
.icon-brush:before { content: "\f103"; }
.icon-camera:before { content: "\f104"; }
.icon-caret-down:before { content: "\f105"; }
.icon-caret-left:before { content: "\f106"; }
.icon-caret-right:before { content: "\f107"; }
.icon-caret-up:before { content: "\f108"; }
.icon-cart:before { content: "\f109"; }
.icon-chart-outline:before { content: "\f10a"; }
.icon-check:before { content: "\f10b"; }
.icon-chevron-down:before { c
```

--------------------------------

### Show Page Endpoint - Spina CMS API

Source: https://github.com/spinacms/spina/blob/main/docs/v2/api/4_pages.md

This snippet shows the HTTP endpoint used to retrieve details for a specific page in the Spina CMS by its unique identifier (ID). The {id} placeholder should be replaced with the actual page ID.

```HTTP
/api/pages/{id}.json
```

--------------------------------

### Configuring Image Part in SpinaCMS Theme (Ruby)

Source: https://github.com/spinacms/spina/blob/main/docs/v2/rendering_content/4_image.md

This snippet demonstrates how to configure an image part within the SpinaCMS theme settings. It defines a `header_image` part of type `Spina::Parts::Image`, allowing it to be used for image uploads and management in the CMS.

```Ruby
config.parts = [
  # ...
  {
    name: "header_image",
    title: "Header image",
    part_type: "Spina::Parts::Image"
  }
]
```

--------------------------------

### Registering Custom Pages in Spina Theme Configuration (Ruby)

Source: https://github.com/spinacms/spina/blob/main/docs/v2/themes/5_custom_pages.md

This Ruby code snippet demonstrates how to define custom pages within a Spina theme's configuration file. It specifies an array of page hashes, each with properties such as 'name', 'title', 'deletable' (boolean), 'view_template', and an optional 'parent' for nesting. This configuration ensures the pages are generated when the website is bootstrapped.

```Ruby
::Spina::Theme.register do |theme|
  # ...

  theme.custom_pages = [
    {
      name: "homepage",
      title: "Homepage",
      deletable: false,
      view_template: "homepage"
    },
    {
      name: "articles",
      title: "Articles",
      deletable: false,
      view_template: "articles",
      parent: "homepage"
    }
  ]

  # ...
end
```

--------------------------------

### List Pages Result - Spina CMS API (JSON)

Source: https://github.com/spinacms/spina/blob/main/docs/v2/api/4_pages.md

This JSON snippet represents the expected response when querying the /api/pages.json endpoint. It includes an array of page data, metadata for pagination, and navigation links.

```JSON
{
  "data": [
    {
      "id": "1",
      "type": "page",
      "attributes": {
        "title": "Homepage",
        "seo_title": "Homepage",
        "menu_title": "Homepage",
        "materialized_path": "/",
        "name": "homepage",
        "description": null,
        "view_template": "homepage",
        "content": [
            {
                "headline": "Headline"
            }
        ]
      },
      "relationships": {
        "resource": {"data": null}
      }
    }
  ],
  "meta": {
    "current_page": 1,
    "total": 1,
    "per_page": 25,
    "path": "/api/pages"
  },
  "links": {
    "first": "/api/pages?page=1",
    "prev": null,
    "next": null,
    "last": "/api/pages?page=1"
  }
}
```

--------------------------------

### Configuring Line Part Type in Spina CMS (Ruby)

Source: https://github.com/spinacms/spina/blob/main/docs/v2/rendering_content/1_line.md

This snippet demonstrates how to configure a 'Line' part type named 'headline' within the Spina CMS theme configuration. It defines a simple textfield for storing a single line of text, making it available for use in pages.

```Ruby
config.parts = [
  # ...
  {
    name: "headline",
    title: "Headline",
    part_type: "Spina::Parts::Line"
  }
]
```

--------------------------------

### Adding Spina Gem to Gemfile (Ruby)

Source: https://github.com/spinacms/spina/blob/main/README.md

This snippet demonstrates how to include the Spina gem in your Ruby on Rails application's Gemfile. Adding this line is the initial step to incorporate Spina CMS as a dependency, enabling its features within your project.

```Ruby
gem 'spina'
```

--------------------------------

### Configuring Rich Text Part in SpinaCMS Theme (Ruby)

Source: https://github.com/spinacms/spina/blob/main/docs/v2/rendering_content/3_rich_text.md

This Ruby snippet demonstrates how to configure a rich text part named 'main_content' in a SpinaCMS theme. It uses `Spina::Parts::Text` to enable rich text editing for a page section, allowing content to be marked up using Trix editor. This configuration is typically placed in `config/initializers/themes/default.rb`.

```Ruby
config.parts = [
  # ...
  {
    name: "main_content",
    title: "Main content",
    part_type: "Spina::Parts::Text"
  }
]
```

--------------------------------

### Configuring Repeating Content in Spina Theme

Source: https://github.com/spinacms/spina/blob/main/docs/v2/rendering_content/8_repeating_content.md

This Ruby snippet demonstrates how to define a `Repeater` part in Spina's theme configuration. It includes a 'portfolio' repeater that nests 'title' (Line part) and 'image' (Image part), enabling multiple instances of this content block.

```Ruby
config.parts = [
  # ...
  { name: "title", title: "Title", part_type: "Spina::Parts::Line" }, 
  { name: "image", title: "Image", part_type: "Spina::Parts::Image" }, 
  {
    name: "portfolio",
    title: "Portfolio",
    parts: %w(title image),
    part_type: "Spina::Parts::Repeater"
  }
]
```

--------------------------------

### Defining Navigations in Spina CMS Theme Configuration (Ruby)

Source: https://github.com/spinacms/spina/blob/main/docs/v1/themes/3_navigations.md

This Ruby code snippet demonstrates how to register and define custom navigations within a Spina CMS theme's configuration file. It shows how to create multiple navigation lists, each with a unique `name` and a user-friendly `label`. The `auto_add_pages` option can be set to `true` for a navigation to automatically include all newly created pages.

```Ruby
::Spina::Theme.register do |theme|
  # ...

  theme.navigations = [{
    name: 'main',
    label: 'Main navigation',
    auto_add_pages: true
  }, {
    name: 'mobile',
    label: 'Mobile'  
  }]

  # ...
end
```

--------------------------------

### Page Header Layout and Typography - CSS

Source: https://github.com/spinacms/spina/blob/main/app/assets/icons/spina/preview/ics_spina-preview.html

Styles the main page header with a bottom border, padding, and margin. It also defines the appearance of the main heading (`h1`) within the header, setting its color, font size, and weight, and positions anchor links to the right.

```CSS
header { border-bottom: 2px solid #ddd; margin-bottom: 20px; overflow: hidden; padding: 20px 0; }
header h1 { color: #888; float: left; font-size: 36px; font-weight: 300; }
header a { float: right; font-size: 14px; }
```

--------------------------------

### Registering a Custom Spina Part in Rails Initializer (Ruby)

Source: https://github.com/spinacms/spina/blob/main/docs/v2/advanced/1_create_custom_parts.md

This Ruby snippet demonstrates how to register a newly created custom Spina part, `Spina::Parts::Movie`, within a Rails initializer. The `Rails.application.reloader.to_prepare` block ensures the part is registered correctly during application startup and reloads, making it available for use in Spina themes.

```Ruby
Rails.application.reloader.to_prepare do
  Spina::Part.register(Spina::Parts::Movie)
end
```

--------------------------------

### Show Page Result - Spina CMS API (JSON)

Source: https://github.com/spinacms/spina/blob/main/docs/v2/api/4_pages.md

This JSON snippet represents the expected response when querying the /api/pages/{id}.json endpoint. It provides detailed attributes and relationships for a single page.

```JSON
{
  "data": {
    "id": "1",
    "type": "page",
    "attributes": {
      "title": "Homepage",
      "seo_title": "Homepage",
      "menu_title": "Homepage",
      "materialized_path": "/",
      "name": "homepage",
      "description": null,
      "view_template": "homepage",
      "content": [
          {
              "headline": "Headline"
          }
      ]
    },
    "relationships": {
      "resource": {"data": null}
    }
  }
}
```

--------------------------------

### Configuring Attachment Part in Spina Theme (Ruby)

Source: https://github.com/spinacms/spina/blob/main/docs/v2/rendering_content/6_attachment.md

This Ruby snippet demonstrates how to configure a new part named 'file' with the title 'File' and type 'Spina::Parts::Attachment' within the Spina CMS theme configuration. This allows the theme to recognize and handle file attachments via ActiveStorage.

```Ruby
config.parts = [
  # ...
  {
    name: "file",
    title: "File",
    part_type: "Spina::Parts::Attachment"
  }
]
```

--------------------------------

### HTTP Token Authorization Header Format

Source: https://github.com/spinacms/spina/blob/main/docs/v2/api/2_authentication.md

This snippet illustrates the correct format for the HTTP 'Authorization' header required for Spina API authentication. It specifies that the header value must begin with 'Token' followed by the actual API key, which is crucial for successful API access.

```HTTP
'Authorization': 'Token [your_api_key]'
```

--------------------------------

### Configuring a Scoped PageLink Part for Resources in Spina (Ruby)

Source: https://github.com/spinacms/spina/blob/main/docs/v2/rendering_content/9_page_link.md

This snippet shows how to configure a `PageLink` part that is scoped to a specific resource, such as 'blog' posts, in a Spina CMS theme. It defines a part named 'blogpost' with the title 'Blogpost', restricting the linked pages to those belonging to the 'blog' resource. This is useful for creating context-specific links.

```Ruby
config.parts = [
  # ...
  {
    name: "blogpost",
    title: "Blogpost",
    part_type: "Spina::Parts::PageLink",
    options: {
      resource: "blog"
    }
  }
]
```

--------------------------------

### Configuring Active Storage to Serve SVG as Image (Ruby)

Source: https://github.com/spinacms/spina/blob/main/docs/v2/advanced/2_svg_files.md

This Ruby code snippet modifies the Active Storage configuration to prevent SVG files from being served as binary attachments, allowing them to be rendered directly in `<img>` tags. It removes 'image/svg+xml' from the list of content types forced to be served as binary. This is typically placed in a Rails initializer and includes a warning about sanitization.

```Ruby
# Warning: Make sure to sanitize SVGs if users gain the ability to upload themselves:
# https://github.com/rails/rails/issues/34665#issuecomment-446601748
Rails.application.config.active_storage.content_types_to_serve_as_binary.delete("image/svg+xml")
```

--------------------------------

### Configuring Active Storage for CDN Caching in Rails

Source: https://github.com/spinacms/spina/blob/main/docs/v2/getting_started/5_caching_uploads.md

This configuration snippet, placed in `config/environments/production.rb`, modifies Active Storage's URL generation strategy. Setting `resolve_model_to_route` to `:rails_storage_proxy enables Active Storage to act as a direct proxy for file downloads, facilitating easier caching by a CDN and improving website performance.

```Ruby
# config/environments/production.rb
# ...
config.active_storage.resolve_model_to_route = :rails_storage_proxy
```

--------------------------------

### Rendering Page Parts in Spina View Template (ERB)

Source: https://github.com/spinacms/spina/blob/main/docs/v1/themes/1_page_parts.md

This ERB snippet demonstrates how to render page parts within a Spina view template (`show.html.erb`). It displays the page's title and then renders the 'content' and 'portfolio' text page parts, ensuring they are safely rendered as HTML. This makes the content from the Spina admin visible on the front-end.

```ERB
<h1><%= @page.title %></h1>

<%= @page.content(:text).try(:html_safe) %>
<%= @page.content(:portfolio).try(:html_safe) %> # added this line
```

--------------------------------

### Registering Global Layout Parts in Spina Theme (Ruby)

Source: https://github.com/spinacms/spina/blob/main/docs/v2/themes/3_layout_parts.md

This snippet demonstrates how to register global layout parts within a Spina CMS theme. It defines a 'footer' part of type `Spina::Parts::Text` and then registers it as a `layout_part`, making it accessible globally across the website. This allows content for the footer to be managed through the Spina admin interface.

```Ruby
::Spina::Theme.register do |theme|
  theme.parts = [{
    name:       'footer',
    title:      'Footer',
    part_type:  'Spina::Parts::Text'
  }]
  # ...
  theme.layout_parts = %w(footer)
end
```
Tokens:
Raw