Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Brand updates #1330

Merged
merged 12 commits into from
May 8, 2024
Merged

Brand updates #1330

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
c94f6cc
update readme with new banner
cpresler May 2, 2024
e46f904
remove custom oss badge component and start migrating colors
cpresler May 3, 2024
48fd566
update hero banner to match new banner style
cpresler May 3, 2024
e04f870
swap nf logo for formidable one
cpresler May 6, 2024
a1a1ffa
update footer
cpresler May 6, 2024
29933ab
update featured oss badges to use package and adjust buttons to match…
cpresler May 6, 2024
c10e894
fix hero and preview layouts on mobile
cpresler May 6, 2024
6fc5930
set darkmode colors for lander
cpresler May 6, 2024
2f199f8
keep images from being vertically stretched by height attributes
cpresler May 7, 2024
579a699
update docusaurus, react, and ts; plus error fixes
cpresler May 7, 2024
b0d16fe
fix broken links
cpresler May 7, 2024
417a657
prettier fixes
cpresler May 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 2 additions & 5 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
<p align="center">
<a href="https://formidable.com/open-source/" target="_blank">
<img alt="Spectacle — Formidable, We build the modern web" src="https://raw.githubusercontent.com/FormidableLabs/spectacle/main/Spectacle-Hero.png" />
</a>
</p>
[![Spectacle](https://oss.nearform.com/api/banner?badge=spectacle&bg=fc6986)](https://commerce.nearform.com/open-source/spectacle/)

<p align="center">
<strong>✨ A ReactJS based Presentation Library ✨</strong>
<br><br>
Expand Down
2 changes: 1 addition & 1 deletion docs/api-reference.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ These tags are for displaying textual content.
| **`CodeSpan`** | [**Space**](./props#space)<br />[**Color**](./props#color)<br /> [**Typography**](./props#typography) | — | **fontFamily**: monospace<br />**fontSize**: text |


## Templates 🆕
## Templates

Templates are overlays that are present on every slide. Typically, they contain controls and deck progress. Spectacle contains a default template, shown below, ready to use that contains the full screen control and the animated progress dots. `<DefaultTemplate />` also supports customizing the color using the prop `color` and CSS color values such as `purple` or `#fff`.

Expand Down
4 changes: 2 additions & 2 deletions docs/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,11 +62,11 @@ Spectacle is a React-based library for creating sleek presentations using React
export default App;
```

:::info
\:\:\:info

If you are using NextJS with App Router, Spectacle needs to be rendered inside a client component. You can read more about this [here](https://nextjs.org/docs/app/building-your-application/rendering/client-components).

:::
\:\:\:


</TabItem>
Expand Down
18 changes: 9 additions & 9 deletions docs/props.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const transition = {

## Color

**Color** props are used by [`CodeSpan`](./api-reference.md#code-span), [`Text`](./api-reference.md#text), [`Link`](./api-reference.md#link), [`Heading`](./api-reference.md#heading), [`Quote`](./api-reference.md#quote), [`Table`](./api-reference.md#table), [`TableHeader`](./api-reference.md#table-header), [`TableBody`](./api-reference.md#table-body), [`TableRow`](./api-reference.md#table-row), [`TableCell`](./api-reference.md#table-cell), [`UnorderedList`](./api-reference.md#unordered-list), [`OrderedList`](./api-reference.md#ordered-list), and [`ListItem`](./api-reference.md#list-item).
**Color** props are used by [`CodeSpan`](./api-reference.md#typography-tags), [`Text`](./api-reference.md#typography-tags), [`Link`](./api-reference.md#typography-tags), [`Heading`](./api-reference.md#typography-tags), [`Quote`](./api-reference.md#typography-tags), [`Table`](./api-reference.md#table-tags), [`TableHeader`](./api-reference.md#table-tags), [`TableBody`](./api-reference.md#table-tags), [`TableRow`](./api-reference.md#table-tags), [`TableCell`](./api-reference.md#table-tags), [`UnorderedList`](./api-reference.md#typography-tags), [`OrderedList`](./api-reference.md#typography-tags), and [`ListItem`](./api-reference.md#typography-tags).

| Name | PropType | Description | Example |
| ------------------------- | ---------------- | ------------------------------------------------------- | ------------------------ |
Expand All @@ -53,7 +53,7 @@ const transition = {

## Space

**Space** props used by [`Box`](./api-reference.md#box), [`FlexBox`](./api-reference.md#flex-box), [`Grid`](./api-reference.md#grid), [`CodeSpan`](./api-reference.md#code-span), [`Text`](./api-reference.md#text), [`Link`](./api-reference.md#link), [`Heading`](./api-reference.md#heading), [`Quote`](./api-reference.md#quote), [`Table`](./api-reference.md#table), [`TableHeader`](./api-reference.md#table-header), [`TableBody`](./api-reference.md#table-body), [`TableRow`](./api-reference.md#table-row), [`TableCell`](./api-reference.md#table-cell), [`UnorderedList`](./api-reference.md#unordered-list), [`OrderedList`](./api-reference.md#ordered-list), and [`ListItem`](./api-reference.md#list-item).
**Space** props used by [`Box`](./api-reference.md#layout-tags), [`FlexBox`](./api-reference.md#layout-tags), [`Grid`](./api-reference.md#layout-tags), [`CodeSpan`](./api-reference.md#typography-tags), [`Text`](./api-reference.md#typography-tags), [`Link`](./api-reference.md#typography-tags), [`Heading`](./api-reference.md#typography-tags), [`Quote`](./api-reference.md#typography-tags), [`Table`](./api-reference.md#table-tags), [`TableHeader`](./api-reference.md#table-tags), [`TableBody`](./api-reference.md#table-tags), [`TableRow`](./api-reference.md#table-tags), [`TableCell`](./api-reference.md#table-tags), [`UnorderedList`](./api-reference.md#typography-tags), [`OrderedList`](./api-reference.md#typography-tags), and [`ListItem`](./api-reference.md#typography-tags).

| Name | PropType | Description | Example |
| ----------------------- | ---------------- | ----------------------------------------------------------------------- | ----------------------------------- |
Expand All @@ -74,21 +74,21 @@ const transition = {

## Typography

**Typography** props are used by [`CodeSpan`](./api-reference.md#code-span), [`Text`](./api-reference.md#text), [`Link`](./api-reference.md#link), [`Heading`](./api-reference.md#heading), [`Quote`](./api-reference.md#quote), [`Table`](./api-reference.md#table), [`TableHeader`](./api-reference.md#table-header), [`TableBody`](./api-reference.md#table-body), [`TableRow`](./api-reference.md#table-row), [`TableCell`](./api-reference.md#table-cell), [`UnorderedList`](./api-reference.md#unordered-list), [`OrderedList`](./api-reference.md#ordered-list), and [`ListItem`](./api-reference.md#list-item).
**Typography** props are used by [`CodeSpan`](./api-reference.md#typography-tags), [`Text`](./api-reference.md#typography-tags), [`Link`](./api-reference.md#typography-tags), [`Heading`](./api-reference.md#typography-tags), [`Quote`](./api-reference.md#typography-tags), [`Table`](./api-reference.md#table-tags), [`TableHeader`](./api-reference.md#table-tags), [`TableBody`](./api-reference.md#table-tags), [`TableRow`](./api-reference.md#table-tags), [`TableCell`](./api-reference.md#table-tags), [`UnorderedList`](./api-reference.md#typography-tags), [`OrderedList`](./api-reference.md#typography-tags), and [`ListItem`](./api-reference.md#typography-tags).

| Name | PropType | Description | Example |
| --------------- | ---------------- | -------------------------------------------------------------- | ------------------------------------------------------ |
| `fontFamily` | PropTypes.string | Set CSS `font-family` value or `fonts` theme value | `Helvetica` or `primary` |
| `fontSize` | PropTypes.string | Set CSS `font-size` value or `fontSizes` theme value | `16px` or `bodyCopy` |
| `fontWeight` | PropTypes.string | Set CSS `font-weight` value or `fontWeights` theme value | `400`, `bold`, or [`Heading`](./api-reference.md#heading) |
| `fontWeight` | PropTypes.string | Set CSS `font-weight` value or `fontWeights` theme value | `400`, `bold`, or [`Heading`](./api-reference.md#typography-tags) |
| `lineHeight` | PropTypes.string | Set CSS `line-height` value or `fontWeights` theme value | `1.5em` or `paragraph` |
| `letterSpacing` | PropTypes.string | Set CSS `letter-spacing` value or `letterSpacings` theme value | `1px` or `spreadOutText` |
| `textAlign` | PropTypes.string | Set CSS `text-align` value | `left` |
| `fontStyle` | PropTypes.string | Set CSS `font-style` value | `normal` or `italic` |

## Layout

**Layout** props are used by [`Box`](./api-reference.md#box), [`FlexBox`](./api-reference.md#flex-box), [`Grid`](./api-reference.md#grid), [`Table`](./api-reference.md#table), [`TableHeader`](./api-reference.md#table-header), [`TableBody`](./api-reference.md#table-body), [`TableRow`](./api-reference.md#table-row), [`TableCell`](./api-reference.md#table-cell), [`CodePane`](./api-reference.md#code-pane), and [`Markdown`](./api-reference.md#markdown-components).
**Layout** props are used by [`Box`](./api-reference.md#layout-tags), [`FlexBox`](./api-reference.md#layout-tags), [`Grid`](./api-reference.md#layout-tags), [`Table`](./api-reference.md#table-tags), [`TableHeader`](./api-reference.md#table-tags), [`TableBody`](./api-reference.md#table-tags), [`TableRow`](./api-reference.md#table-tags), [`TableCell`](./api-reference.md#table-tags), [`CodePane`](./api-reference.md#code-pane), and [`Markdown`](./api-reference.md#markdown-components).

| Name | PropType | Description | Example |
| ----------- | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
Expand All @@ -106,7 +106,7 @@ const transition = {

## Flex

**Flex** props are used by [`FlexBox`](./api-reference.md#flex-box).
**Flex** props are used by [`FlexBox`](./api-reference.md#layout-tags).

| Name | PropType | Description | Example |
| ---------------- | ------------------------------------ | ------------------------------- | --------------- |
Expand All @@ -123,7 +123,7 @@ const transition = {

## Grid

**Grid** props are used by [`Grid`](./api-reference.md#grid).
**Grid** props are used by [`Grid`](./api-reference.md#layout-tags).

| Name | PropType | Description | Example |
| --------------------- | ------------------------------------ | ------------------------------------- | --------------------------------------------- |
Expand All @@ -142,7 +142,7 @@ const transition = {

## Position

**Position** props are used by [`Box`](./api-reference.md#box), [`FlexBox`](./api-reference.md#flex-box), [`Grid`](./api-reference.md#grid), [`CodePane`](./api-reference.md#code-pane), [`FullScreen`](./api-reference.md#fullscreen), [`Progress`](./api-reference.md#progress), [`AnimatedProgress`](./api-reference.md#animatedprogress), and [`Markdown`](./api-reference.md#markdown-components).
**Position** props are used by [`Box`](./api-reference.md#layout-tags), [`FlexBox`](./api-reference.md#layout-tags), [`Grid`](./api-reference.md#layout-tags), [`CodePane`](./api-reference.md#typography-tags), [`FullScreen`](./api-reference.md#fullscreen), [`Progress`](./api-reference.md#progress), [`AnimatedProgress`](./api-reference.md#animatedprogress), and [`Markdown`](./api-reference.md#markdown-components).

| Name | PropType | Description | Example |
| ---------- | ---------------- | ------------------------ | ---------- |
Expand All @@ -155,7 +155,7 @@ const transition = {

## Border

**Border** props are used by [`Box`](./api-reference.md#box), [`FlexBox`](./api-reference.md#flex-box), [`Grid`](./api-reference.md#grid), [`Table`](./api-reference.md#table), [`TableHeader`](./api-reference.md#table-header), [`TableBody`](./api-reference.md#table-body), [`TableRow`](./api-reference.md#table-row), and [`TableCell`](./api-reference.md#table-cell).
**Border** props are used by [`Box`](./api-reference.md#layout-tags), [`FlexBox`](./api-reference.md#layout-tags), [`Grid`](./api-reference.md#layout-tags), [`Table`](./api-reference.md#table-tags), [`TableHeader`](./api-reference.md#table-tags), [`TableBody`](./api-reference.md#table-tags), [`TableRow`](./api-reference.md#table-tags), and [`TableCell`](./api-reference.md#table-tags).

| Name | PropType | Description | Example |
| ------------------------- | ------------------------------------ | ---------------------------------------------- | -------------------- |
Expand Down
12 changes: 6 additions & 6 deletions docs/react-slide-layouts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ A layout with a section title
| Props | Type | Required | Example |
|-----------------|-----------------------------------------------|----------|----------------------|
| `...slideProps` | [Slide Props](./api-reference#slide) | ❌ | |
| `sectionProps` | [Text Props](./api-reference#typography-tags) | ❌ | { fontSize: "48px" } |
| `sectionProps` | [Text Props](./api-reference#typography-tags) | ❌ | `{ fontSize: "48px" }` |

![Section layout example slide](../website/static/img/slide-layouts/section.png)

Expand All @@ -75,7 +75,7 @@ A layout with a centered statement
| Props | Type | Required | Example |
|------------------|-----------------------------------------------|----------|----------------------|
| `...slideProps` | [Slide Props](./api-reference#slide) | ❌ | |
| `statementProps` | [Text Props](./api-reference#typography-tags) | ❌ | { fontSize: "48px" } |
| `statementProps` | [Text Props](./api-reference#typography-tags) | ❌ | `{ fontSize: "48px" }` |

![Statement layout example slide](../website/static/img/slide-layouts/statement.png)

Expand All @@ -88,8 +88,8 @@ A layout to present a fact in large font
| `children` | `ReactNode` | ✅ | `100%` | |
| `...slideProps` | [Slide Props](./api-reference#slide) | ❌ | | |
| `factInformation` | `ReactNode` | ❌ | `Fact information` | |
| `factProps` | [Text Props](./api-reference#typography-tags) | ❌ | { fontSize: "100px" } | |
| `factInformationProps` | [Text Props](./api-reference#typography-tags) | ❌ | { fontSize: "48px" } | |
| `factProps` | [Text Props](./api-reference#typography-tags) | ❌ | `{ fontSize: "100px" }` | |
| `factInformationProps` | [Text Props](./api-reference#typography-tags) | ❌ | `{ fontSize: "48px" }` | |
| `factFontSize` | `string` | ❌ | `150px` | `250px` |

![Big fact layout example slide](../website/static/img/slide-layouts/bigFact.png)
Expand All @@ -103,8 +103,8 @@ A quote and attribution layout
| `...slideProps` | [Slide Props](./api-reference#slide) | ❌ | |
| `children` | `ReactNode` | ✅ | `To be, or not to be` |
| `attribution` | `ReactNode` | ✅ | `William Shakespeare` |
| `quoteProps` | [Text Props](./api-reference#typography-tags) | ❌ | { fontSize: "100px" } |
| `attributionProps` | [Text Props](./api-reference#typography-tags) | ❌ | { fontSize: "48px" } |
| `quoteProps` | [Text Props](./api-reference#typography-tags) | ❌ | `{ fontSize: "100px" }` |
| `attributionProps` | [Text Props](./api-reference#typography-tags) | ❌ | `{ fontSize: "48px" }` |

![Quote layout example slide](../website/static/img/slide-layouts/quote.png)
![Long quote layout example slide](../website/static/img/slide-layouts/quote2.png)
Expand Down
Loading