Update images in docs

This commit is contained in:
Daniel Lautzenheiser
2022-10-26 09:23:11 -04:00
parent 5dc70fc988
commit fb5c5614dd
19 changed files with 86 additions and 84 deletions

View File

@ -190,7 +190,7 @@ CMS.registerEditorComponent({
**Result:**
![youtube-widget](/img/screen shot 2018-01-05 at 4.25.07 pm.png)
![youtube-widget](/img/youtube-widget.webp)
## Advanced field validation

View File

@ -50,7 +50,7 @@ gh repo create my-website
Don't add a license or a .gitignore. Do add an "origin" git remote.
![](/img/screen-shot-2021-11-15-at-4.16.53-pm.png)
![](/img/create-remote-repo.webp)
```bash
# 6. Update your remote repository with your staged changes.
@ -68,7 +68,7 @@ git push -u origin main
4. Choose `yarn build` for your build command.
5. Choose `build` for your deployment directory.
![](/img/screen-shot-2021-11-16-at-1.34.18-PM.png)
![](/img/create-remote-repo.webp)
Choose the default option for everything else.

View File

@ -199,48 +199,3 @@ Create a file `layouts/blog/single.html`, and put the following content in there
```
You can see this basic template includes all the fields you've specified in your Static CMS `config.yml` file. You can access any custom front-matter fields with `.Params.<field-name>`!
### Using Hugo shortcodes in the Markdown Editor
Using `registerEditorComponent` we can register a block level component for the Markdown editor. You can use it to add Hugo's inbuilt shortcodes like `gist`,`youtube` and others as block components to the markdown editor.
You can refer to [registering editor components](/docs/custom-widgets/#registereditorcomponent) for a getting started guide or for creating your own editor components.
**Example**
```javascript
CMS.registerEditorComponent({
id: "gist",
label: "Gist",
fields: [{
title: "username",
label: "Github Username",
widget: "string"
},
{
title: "gid",
label: "Gist ID",
widget: "string"
},
],
pattern: /^{{< gist ([a-zA-Z0-9]+) ([a-zA-Z0-9]+) >}}/,
fromBlock: function(match) {
return {
usertitle: match[1],
gid: match[2],
};
},
toBlock: function(obj) {
return `{{< gist ${obj.username} ${obj.gid} >}}`;
},
toPreview: function(obj) {
return '<a href="https://gist.github.com/' + obj.username + '/' + obj.id + '">gist</a>';
},
});
```
**Result**
![Gist](/img/hugo_shortcode_gist.png "Gist")
For getting started quickly you can refer to this amazing prebuilt resource of [hugo shortcodes editor components](https://github.com/sharadcodes/hugo-shortcodes-netlify-cms)!

View File

@ -15,7 +15,7 @@ If you're starting a new project, the fastest route to publishing on a Jekyll we
This guide will use the blog you get if you follow the [really excellent official Jekyll step by step tutorial](https://jekyllrb.com/docs/step-by-step/01-setup/) as a starting point. If you're new to Jekyll - I recommended you start by following the tutorial so you know your way around your new blog. Otherwise [you can clone this repo](https://github.com/adamwatters/jekyll-tutorial-with-netlify-cms/tree/without-cms) and checkout the `without-cms` branch.
![Jekyll tutorial blog screenshot](/img/screenshot-jekyll-tutorial-blog.png?raw=true)
![Jekyll tutorial blog screenshot](/img/screenshot-jekyll-tutorial-blog.webp)
## Add Static CMS

View File

@ -1,7 +1,7 @@
---
group: Intro
title: Releases
weight: 4
weight: 10
---

View File

@ -232,9 +232,9 @@ After clicking one of those buttons, authenticate with GitHub or GitLab and choo
## Access Static CMS
1. The template deploy process sends you an invitation to your new site, sent from `no-reply@netlify.com`.
![Sample email subject line: You've been invited to join radiologist-amanda-53841.netlify.com](/img/email-subject.png?raw=true)
![Sample email subject line: You've been invited to join radiologist-amanda-53841.netlify.com](/img/email-subject.webp)
2. Wait for the deployment to complete, then click the link to accept the invite. Your site will open with a prompt to create a password.
!["Complete your signup" modal on the Kaldi coffee site](/img/create-password.png?raw=true)
!["Complete your signup" modal on the Kaldi coffee site](/img/create-password.webp)
3. Enter a password, sign in, and you'll go to the CMS. (For future visits, you can go straight to `<yoursiteaddress.com>/admin/`.)
Try adding and editing posts, or changing the content of the Products page. When you save, the changes are pushed immediately to your Git repository, triggering a build on Netlify, and updating the content on your site. Check out the configuration code by visiting your site repo.

View File

@ -25,6 +25,6 @@ The markdown widget provides a full fledged text editor allowing users to format
This would render as:
![Markdown widget example](/img/widgets-markdown.png)
![Markdown widget example](/img/widgets-markdown.webp)
*Please note:* The markdown widget outputs a raw markdown string. Your static site generator may or may not render the markdown to HTML automatically. Consult with your static site generator's documentation for more information about rendering markdown.