Skip to content

Commit

Permalink
theme bump to fix images
Browse files Browse the repository at this point in the history
  • Loading branch information
@MattReimer
MattReimer committed Dec 13, 2023
1 parent 6d109f6 commit 6da3e4b
Show file tree
Hide file tree
Showing 3 changed files with 124 additions and 56 deletions.
168 changes: 118 additions & 50 deletions content/page/demo.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ banner: true
import FaceIcon from '@mui/icons-material/Face';


# Gatsby special markdown syntaxs
# Gatsby special markdown syntax

## Baked-in Components

Expand All @@ -28,6 +28,7 @@ These components were designed specifically for the Riverscapes homepage site an
* `<Button />` This is `MuiButton` wrapped around the Gatsby Link component for navigation. See examples below.
* `<Link />` This is Mui's `Link` component wrapped around Gatsby's Link component. See examples below.
* `<Youtube />` This is a helper since we use a lot of youtube videos. See examples below.
* `<StaticImage />` This is a helper since we use a lot of images. See examples below.

### Material UI Components exposed by default:

Expand Down Expand Up @@ -73,15 +74,16 @@ import { Container, Divider, Grid, Card, CardActionArea, CardMedia, CardContent,

Our theme has access to the [Material UI Icons](https://mui.com/components/material-icons/) library. You can use them in markdown like this:

<FaceIcon />
<Button to='../about-us' color='error' endIcon={<FaceIcon />}>About us Button</Button>

```typescript
import FaceIcon from '@mui/icons-material/Face';
<FaceIcon />
<Button to='../about-us' color='error' endIcon={<FaceIcon />}>About us Button</Button>
```

<FaceIcon />
<Button to='../about-us' color='error' endIcon={<FaceIcon />}>About us Button</Button>


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

## **Don't** Use HTML tags
Expand Down Expand Up @@ -140,102 +142,117 @@ Buttons are almost identical to links. Linking internally will navigate using th
### Internal Links Button


```jsx
<Button to='../about-us'>About us Button</Button>
<Button to='../about-us' color='secondary'>About us Button</Button>
<Button to='../about-us' color='success'>About us Button</Button>
<Button to='../about-us' color='error'>About us Button</Button>
<Button to='../about-us' color='error' startIcon={<FaceIcon />}>About us Button</Button>
<Button to='../about-us' color='error' endIcon={<FaceIcon />}>About us Button</Button>
```jsx
<Button to='../about-us'>About us Button</Button>
```
<Button to='../about-us'>About us Button</Button>
<Button to='../about-us' color='secondary'>About us Button</Button>
<Button to='../about-us' color='success'>About us Button</Button>
<Button to='../about-us' color='error'>About us Button</Button>
```
<Button to='../about-us' color='error' startIcon={<FaceIcon />}>About us Button</Button>
<Button to='../about-us' color='error' endIcon={<FaceIcon />}>About us Button</Button>

### External Link Button

<Button to='https://google.com'>Google dot com</Button>
```jsx
<Button to='https://google.com'>Google dot com</Button>
```
<Button to='https://google.com'>Google dot com</Button>

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

## Images
# Images

Internal images can come from several different places

***Note: Do not use `<StaticImage />` for markdown images. It will not work.***

### 1. Relative to the `.mdx` file

Using a relative path to navigate relative to the mdx file (Note the dot slash `./` which means relative to the current path)
## 1. In the `static` folder (Prefered Method)

![DemoStatic](./demoRelative.jpg)
```html
![DemoStatic](./demoRelative.jpg)
```
When you put images in the `/static` folder at the root of your site and reference them from there. **You must use an absolute path for that**.

You will notice that `<img>` tags won't work for this method because the path lookup doesn't work. We may fix this at some future point but for now you're stuck with it.
<img src='./demoRelative.jpg' alt="this doesn't work" />
#### Markdown/Remark syntax

Quick and dirty. **Whenever possible please do images like this**. they are not very configurable but they are guaranteed responsive on mobile and easy to maintain.

```
<img src='./demoRelative.jpg' alt="this doesn't work" /> <------ NO!
![DemoStatic](/images/demoStatic.jpg)
```
![DemoStatic](/images/demoStatic.jpg)

### 2. Relative to the site root
#### RSStaticImage (instead of `<img />`)

Using an absolute path to navigate relative to the site root. (Note the slash `/` which means relative to the site root)
If you need a bit more control you can use the `<RSStaticImage />` HTML syntax. You can use it the same as an `<img />` tag with all the same attributes. As you can see though, this is not necessarily going to play nice with our theme.

![DemoStatic](/demoRelative.jpg)
```html
![DemoStatic](/demoRelative.jpg)
```typescript
<RSStaticImage src='/images/demoStatic.jpg' style={{opacity: 0.2, border: "20px solid orange"}} />
```
<RSStaticImage src='/images/demoStatic.jpg' style={{opacity: 0.2, border: "20px solid orange"}} />

You will notice that, unlike paths relative to the mdx file, the `<img />` tag works here.
#### Caveats and notes:

<img src='/demoRelative.jpg' alt="this doesn't work" />
```
<img src='/demoRelative.jpg' alt="this doesn't work" />
```
- `<img />` doesn't work for this method either.

### 3. In the static folder
## 2. Relative to the `.mdx` file

You can also put images in the `static` folder at the root of your site and reference them from there. **You must use an absolute path for that**.
Using a relative path to navigate relative to the mdx file (Note the dot slash `./` which means relative to the current path)

You can still use the remark syntax

![DemoStatic](/images/demoStatic.jpg)
```
![DemoStatic](/images/demoStatic.jpg)
```html
![DemoStatic](./demoRelative.jpg)
```
![DemoStatic](./demoRelative.jpg)

You can also use the `<img />` html element to get maxiumum control over the image.
#### Caveats and notes:

<img src='/images/demoStatic.jpg' style={{width: '100%'}} />
- `<RSStaticImage />` doesn't work with relative image paths.
- `<img />` doesn't work for this method either.

## 3. Relative to the site root

Using an absolute path to navigate relative to the site root. (Note the slash `/` which means relative to the site root)

```html
![DemoStatic](/demoRelative.jpg)
```
<img src='/images/demoStatic.jpg' style={{width: '100%'}} />
```
![DemoStatic](/demoRelative.jpg)

### 3. External Images
#### Caveats and notes:

You can just use Markdown's remark syntax for external images:
- `<RSStaticImage />` doesn't work with relative image paths.
- `<img />` doesn't work for this method either.

![Kitten](https://placekitten.com/200/300)

### 3. External Images

You can just use Markdown's Markdown/Remark syntax for external images:

```markdown
![Kitten](https://placekitten.com/200/300)
```
![Kitten](https://placekitten.com/200/300)

Or if you need a bit more control you can use the `<img />` HTML syntax

<img src='https://placekitten.com/200/300' style={{border: '20px solid orange'}} />
Or if you need a bit more control you can use the `<RSStaticImage />` HTML syntax. You can use it the same as an `<img />` tag with all the same attributes.

```markdown
<img src='https://placekitten.com/200/300' style={{border: '20px solid orange'}} />
```typescript
<RSStaticImage src='https://placekitten.com/200/300' style={{opacity: 0.2, border: "20px solid orange"}} />
```
<RSStaticImage src='https://placekitten.com/200/300' style={{opacity: 0.2, border: "20px solid orange"}} />


#### Caveats and notes:

- DO NOT USE `<img />` for this method either.


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

# Markdown StyleGuide

Expand Down Expand Up @@ -267,12 +284,13 @@ Paragraph3 Elit labore aliquip exercitation dolor voluptate reprehenderit occaec

We have a custom component for youtube embedding

<Youtube embedId="1hPxGmTGarM" />

```tsx
<Youtube embedId="1hPxGmTGarM" />
```

<Youtube embedId="1hPxGmTGarM" />


You can also embed using the `<iframe />` from youtube but it's not as nice AND you should rename the attributes to be camelCase from `frameborder` to `frameBorder` and `allowfullscreen` to `allowFullScreen` or you get browser console warnings:

<iframe width="560" height="315" src="https://www.youtube.com/embed/1hPxGmTGarM?si=fj1mSgn4toCCv5vY" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
Expand All @@ -296,19 +314,18 @@ put a code block inside a code block.
### Javascript example

```javascript

#!/usr/bin/env node
const foo = 'bar'

function baz() {
return foo
}

```

### Python example

```python

#!/usr/bin/env python3
a = 1
b = 2

Expand All @@ -334,6 +351,14 @@ def add(a, b):

#### Vertical Stack

```jsx
<Stack spacing={2} border="2px solid red">
<Box to=''>Thing 1</Box>
<Box to=''>Thing 2</Box>
<Box to=''>Thing 3</Box>
</Stack>
```

<Stack spacing={2} border="2px solid red">
<Box to=''>Thing 1</Box>
<Box to=''>Thing 2</Box>
Expand All @@ -342,6 +367,14 @@ def add(a, b):

#### Horizontal Stack

```jsx
<Stack spacing={2} border="2px solid red" direction="row" justifyContent="center">
<Box to=''>Thing 1</Box>
<Box to=''>Thing 2</Box>
<Box to=''>Thing 3</Box>
</Stack>
```

<Stack spacing={2} border="2px solid red" direction="row" justifyContent="center">
<Box to=''>Thing 1</Box>
<Box to=''>Thing 2</Box>
Expand All @@ -355,6 +388,18 @@ Grids are useful for more complex layouts. They are not responsive by default so

***NOTE: Always try using `<Stack />` before using `<Grid />`. It's much easier to use and is responsive by default.***

```jsx
<Grid container border="1px solid red">
<Grid item xs={12} md={2} border="1px solid blue">Row1-Thing1</Grid>
<Grid item xs={12} md={6} border="1px solid green">Row1-Thing2</Grid>
<Grid item xs={12} md={4} border="1px solid yellow">Row1-Thing3</Grid>

<Grid item xs={12} md={4} border="1px solid blue">Row2-Thing1</Grid>
<Grid item xs={12} md={6} border="1px solid green">Row2-Thing2</Grid>
<Grid item xs={12} md={2} border="1px solid yellow">Row2-Thing3</Grid>
</Grid>
```

<Grid container border="1px solid red">
<Grid item xs={12} md={2} border="1px solid blue">Row1-Thing1</Grid>
<Grid item xs={12} md={6} border="1px solid green">Row1-Thing2</Grid>
Expand All @@ -369,18 +414,41 @@ Grids are useful for more complex layouts. They are not responsive by default so

Alert is a component that draws attention to something. It's useful for announcements or warnings. You can find more information [here](https://mui.com/components/alert/).

```jsx
<Alert severity="info">
This is an info alert — <strong>check it out!</strong>
</Alert>
```
<Alert severity="info">
This is an info alert — <strong>check it out!</strong>
</Alert>

```jsx
<Alert severity="warning">
This is an info alert — <strong>check it out!</strong>
</Alert>
```

<Alert severity="warning">
This is an info alert — <strong>check it out!</strong>
</Alert>

```jsx
<Alert severity="error">
This is an info alert — <strong>check it out!</strong>
</Alert>
```

<Alert severity="error">
This is an info alert — <strong>check it out!</strong>
</Alert>

```jsx
<Alert severity="success">
This is an info alert — <strong>check it out!</strong>
</Alert>
```

<Alert severity="success">
This is an info alert — <strong>check it out!</strong>
</Alert>
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"license": "MIT",
"author": "Matt Reimer <[email protected]>",
"dependencies": {
"@riverscapes/gatsby-theme": "^0.1.11",
"@riverscapes/gatsby-theme": "^0.1.13",
"gatsby": "^5.10.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
Expand Down
10 changes: 5 additions & 5 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3293,17 +3293,17 @@ __metadata:
version: 0.0.0-use.local
resolution: "@riverscapes/developer-website@workspace:."
dependencies:
"@riverscapes/gatsby-theme": ^0.1.11
"@riverscapes/gatsby-theme": ^0.1.13
gatsby: ^5.10.0
react: ^18.2.0
react-dom: ^18.2.0
typescript: ^4.7.2
languageName: unknown
linkType: soft

"@riverscapes/gatsby-theme@npm:^0.1.11":
version: 0.1.11
resolution: "@riverscapes/gatsby-theme@npm:0.1.11"
"@riverscapes/gatsby-theme@npm:^0.1.13":
version: 0.1.13
resolution: "@riverscapes/gatsby-theme@npm:0.1.13"
dependencies:
"@emotion/react": ^11.11.0
"@emotion/styled": ^11.11.0
Expand Down Expand Up @@ -3331,7 +3331,7 @@ __metadata:
gatsby: ^5.10.0
react: ^18.2.0
react-dom: ^18.2.0
checksum: 004cbd0c2ebf4d26d3c2ef3ed2dddf22d6ca899246142e8d6430278e7293599c20ac815e4cad7a78febaa80b3fa7a6dedd79f36fd73b38fc364b986d1ed4301b
checksum: 7891f5ca8fa0b37a7cbfa5720a1e538a1f4298a7115dda814f4fb24d569b4f6194d41461204aa679c1197651080d01ef149650ca534e0f40b7d9e1aa868c2ebf
languageName: node
linkType: hard

Expand Down

0 comments on commit 6da3e4b

Please sign in to comment.