The text component
A paragraph of text. The entire component will render as a single paragraph, with each item being rendered as a span of text inside it, the styling of which can be customized using parameters.
Top-level parameters
| name | required | type | description |
|---|---|---|---|
| center | BOOLEAN |
Whether to center the title. | |
| contents | TEXT |
A top-level paragraph of text to display, without any formatting, without having to make additional queries. | |
| contents_md | TEXT |
Rich text in the markdown format. Among others, this allows you to write bold text using **bold**, italics using *italics*, and links using [text](https://example.com). | |
| html | TEXT |
Raw html code to include on the page. Don't use that if you are not sure what you are doing, it may have security implications. | |
| id | TEXT |
id attribute added to the container in HTML. It can be used to target this item through css or for scrolling to this item through links (use "#id" in link url). | |
| title | TEXT |
Text header before the paragraph. | |
| width | INTEGER |
How wide the paragraph should be, in characters. |
Row-level parameters
| name | required | type | description |
|---|---|---|---|
| contents | REQUIRED | TEXT |
A span of text to display |
| bold | BOOLEAN |
Whether the span of text should be displayed as bold. | |
| break | BOOLEAN |
Indicates that the current span of text starts a new paragraph. | |
| code | BOOLEAN |
Use a monospace font. Useful to display the text as code. | |
| color | The name of a color for this span of text. | ||
| contents_md | TEXT |
Rich text in the markdown format. Among others, this allows you to write bold text using **bold**, italics using *italics*, and links using [text](https://example.com). | |
| italics | BOOLEAN |
Whether the span of text should be displayed as italics. | |
| link | URL |
An URL to which the user should be taken when they click on this span of text. | |
| size | INTEGER |
A number between 1 and 6 indicating the font size. | |
| underline | BOOLEAN |
Whether the span of text should be underlined. |
Example 1
Rendering a simple text paragraph.
select
'text' as component,
'Hello, world ! <3' as contents;Result
Hello, world ! <3
Example 2
Rendering rich text using markdown
select
'text' as component,
'
# Markdown in SQLPage
## Simple formatting
SQLPage supports only plain text as column values, but markdown allows easily adding **bold**, *italics*, [external links](https://github.com/lovasoa/sqlpage), [links to other pages](/index.sql) and [intra-page links](#my-paragraph).
## Lists
### Unordered lists
* SQLPage is easy
* SQLPage is fun
* SQLPage is free
### Ordered lists
1. SQLPage is fast
2. SQLPage is safe
3. SQLPage is open-source
## Code
```sql
SELECT ''list'' AS component;
SELECT name as title FROM users;
```
## Tables
| SQLPage component | Description | Documentation link |
| --- | --- | --- |
| text | A paragraph of text. | [Documentation](https://sql-page.com/documentation.sql?component=text) |
| list | A list of items. | [Documentation](https://sql-page.com/documentation.sql?component=list) |
| steps | A progress indicator. | [Documentation](https://sql-page.com/documentation.sql?component=steps) |
| form | A series of input fields. | [Documentation](https://sql-page.com/documentation.sql?component=form) |
## Quotes
> Fantastic.
>
> — [HackerNews User](https://news.ycombinator.com/item?id=36194473#36209061) about SQLPage
## Images
## Horizontal rules
---
' as contents_md;Result
Markdown in SQLPage
Simple formatting
SQLPage supports only plain text as column values, but markdown allows easily adding bold, italics, external links, links to other pages and intra-page links.
Lists
Unordered lists
- SQLPage is easy
- SQLPage is fun
- SQLPage is free
Ordered lists
- SQLPage is fast
- SQLPage is safe
- SQLPage is open-source
Code
SELECT 'list' AS component;
SELECT name as title FROM users;
Tables
| SQLPage component | Description | Documentation link |
|---|---|---|
| text | A paragraph of text. | Documentation |
| list | A list of items. | Documentation |
| steps | A progress indicator. | Documentation |
| form | A series of input fields. | Documentation |
Quotes
Fantastic.
— HackerNews User about SQLPage
Images
Horizontal rules
Example 3
Rendering a paragraph with links and styling.
select
'text' as component,
'About SQL' as title;
select
'SQL' as contents,
TRUE as bold,
TRUE as italics;
select
' is a domain-specific language used in programming and designed for managing data held in a ' as contents;
select
'relational database management system' as contents,
'https://en.wikipedia.org/wiki/Relational_database' as link;
select
'. It is particularly useful in handling structured data.' as contents;Result
About SQL
SQL is a domain-specific language used in programming and designed for managing data held in a relational database management system. It is particularly useful in handling structured data.
Example 4
An intra-page link to a section of the page.
select
'text' as component,
'This is a link to the [next paragraph](#my-paragraph). You can open this link in a new tab and the page will scroll to the paragraph on load.' as contents_md;
select
'text' as component,
'my-paragraph' as id,
'This **is** the next paragraph.' as contents_md;Result
This is a link to the next paragraph. You can open this link in a new tab and the page will scroll to the paragraph on load.
This is the next paragraph.