You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: opensaas-sh/README.md
+2Lines changed: 2 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -44,6 +44,8 @@ Make sure not to commit `app/` to git. It is currently (until we resolve this) n
44
44
45
45
Blog (and docs in it) is currently tracked in whole, as it has quite some content, so updating it to the latest version of Open Saas is done manually, but it might be interesting to also move it to the `diff` approach, as we use for the demo app, if it turns out to be a good match.
46
46
47
+
For more info on authoring content for the docs and blog, including information on custom components, see the [blog/README.md](blog/README.md).
48
+
47
49
## Deployment
48
50
49
51
App: check its README.md (after you generate it with `.tools/patch.sh`) .
[](https://starlight.astro.build)
3
+
This is the docs and blog for the OpenSaaS.sh website, [](https://starlight.astro.build)
4
4
5
-
```
6
-
npm create astro@latest -- --template starlight
7
-
```
8
-
9
-
[](https://stackblitz.com/github/withastro/starlight/tree/main/examples/basics)
10
-
[](https://codesandbox.io/p/sandbox/github/withastro/starlight/tree/main/examples/basics)
11
-
12
-
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
13
5
14
6
## 🚀 Project Structure
15
7
@@ -20,8 +12,12 @@ Inside of your Astro + Starlight project, you'll see the following folders and f
20
12
├── public/
21
13
├── src/
22
14
│ ├── assets/
15
+
│ ├── components/
23
16
│ ├── content/
24
17
│ │ ├── docs/
18
+
│ │ │ ├── blog/
19
+
│ │ │ ├── guides/
20
+
│ │ │ └── ...
25
21
│ │ └── config.ts
26
22
│ └── env.d.ts
27
23
├── astro.config.mjs
@@ -31,23 +27,146 @@ Inside of your Astro + Starlight project, you'll see the following folders and f
31
27
32
28
Starlight looks for `.md` or `.mdx` files in the `src/content/docs/` directory. Each file is exposed as a route based on its file name.
33
29
30
+
Blog posts are in the `src/content/docs/blog/` directory. Use `.mdx` files for blog posts.
31
+
34
32
Images can be added to `src/assets/` and embedded in Markdown with a relative link.
35
33
36
-
Static assets, like favicons, can be placed in the `public/` directory.
34
+
Static assets, like favicons and banner images, can be placed in the `public/` directory.
35
+
36
+
We have a number of custom components in `src/components/` that you can use in your blog posts and docs.
37
+
38
+
## Custom Components
39
+
40
+
Custom components in the `src/components/` that replace default Starlight components are imported into the `astro.config.mjs` file:
This component is used to generate the Open Graph (OG) meta tags for the social media preview images for each doc and blog post.
65
+
66
+
It checks if a banner image exists in `./public/banner-images` with the same name as the blog post but with a `.webp` extension, e.g. if the blog post is `2024-12-10-open-saas-tutorial.mdx`, it checks for `./public/banner-images/2024-12-10-open-saas-tutorial.webp`. If it does, it uses that image. If it doesn't, it uses the default banner image.
67
+
68
+
Generally, the default banner image is used for docs, and blog posts use a custom banner image.
69
+
70
+
### TitleWithBannerImage
71
+
72
+
This component uses the same image as the `HeadWithOGImage` component to display a banner image above the title of the blog post.
73
+
74
+
You can use the `hideBannerImage` prop to hide the banner image on the page:
75
+
76
+
```mdx
77
+
---
78
+
title: "Open SaaS Tutorial"
79
+
date: 2024-12-10
80
+
hideBannerImage: true
81
+
---
82
+
```
83
+
84
+
Because the same image in `./public/banner-images` is used for social media preview images and the banner image on the doc/blog page, `hideBannerImage: true` will hide the banner image on the doc/blog page, but still use that image for the social media preview image.
85
+
86
+
### VideoPlayer
87
+
88
+
This component is a wrapper around the `video` element that adds some default styles.
37
89
38
-
## 🧞 Commands
90
+
You can pass three props to the component:
39
91
40
-
All commands are run from the root of the project, from a terminal:
92
+
-`src` (required): the path to the video file
93
+
-`lgWidth` (optional): the width of the video player on large screens greater than 425px. If no prop is passed the default is `55%`.
94
+
-`smWidth` (optional): the width of the video player on small screens less than 425px. If no prop is passed the default is `100%`.
This component is a wrapper around the `Header` component from the `@astrojs/starlight` package.
110
+
111
+
It repositions the docs and blog links to the left, and adds a logo and a link to the home page, https://opensaas.sh.
112
+
113
+
114
+
## Authoring Content
115
+
116
+
The docs and blog are written in Markdown or MDX with some additional metadata:
117
+
118
+
```mdx
119
+
title: We Made the Most Annoying Cookie Banners Ever
120
+
date: 2024-11-26
121
+
tags:
122
+
- cookie consent
123
+
- saas
124
+
- sideproject
125
+
- hackathon
126
+
subtitle: and it was totally worth it
127
+
hideBannerImage: true
128
+
authors: vince
129
+
```
130
+
131
+
Most posts are written in MDX, which allows you to use jsx components in your blog posts. It's recommended to use the MDX extension for your editor, such as this one for [VSCode](https://marketplace.cursorapi.com/items?itemName=unifiedjs.vscode-mdx).
132
+
133
+
### Blog Post Metadata
134
+
`authors` is required and will display the authors of the blog post. To configure a new author, add the proper metadata to `astro.config.mjs` under plugins > starlightBlog > authors:
135
+
136
+
```js
137
+
authors: {
138
+
vince: {
139
+
name:'Vince',
140
+
title:'Dev Rel @ Wasp',
141
+
picture:'/CRAIG_ROCK.png', // Put author images in the `public` directory.
142
+
url:'https://wasp-lang.dev',
143
+
},
144
+
},
145
+
```
146
+
147
+
`subtitle` is optional and will display a subtitle below the title of the blog post.
148
+
149
+
`hideBannerImage` is optional and will hide the banner image in `./public/banner-images` on the blog post page if you only want it to be displayed as the social media preview image (remember, the same image is used for both the social media preview image and the banner image on the blog post page).
150
+
151
+
### Images
152
+
153
+
Images to be used in guides and posts are stored in `./src/assets` and are referenced in the blog posts with a relative path.
154
+
155
+
Banner images used for social media preview images, as well as cover images for blog posts, are stored in `./public/banner-images` and must always use the `.webp` extension. If a banner image is not found, the default banner image is used. (Note: banner images for docs are used only for social media preview images, where for blog posts the are used as social media preview images and as cover images on the blog post page unless the `hideBannerImage` metadata is set to `true`.)
156
+
157
+
See the [HeadWithOGImage](#headwithogimage) and [TitleWithBannerImage](#titlewithbannerimage) sections for more information.
158
+
159
+
Always use astro's `Image` component to embed images in your blog posts and docs as Astro will automatically optimize the images for the web.
|`npm run dev`| Starts local dev server at `localhost:4321`|
46
-
|`npm run build`| Build your production site to `./dist/`|
47
-
|`npm run preview`| Preview your build locally, before deploying |
48
-
|`npm run astro ...`| Run CLI commands like `astro add`, `astro check`|
49
-
|`npm run astro -- --help`| Get help using the Astro CLI |
168
+
## Video
50
169
51
-
## 👀 Want to learn more?
170
+
Videos to be used in blog posts are stored in `./src/assets/` and are referenced in the blog posts with a relative path, just like images.
52
171
53
-
Check out [Starlight’s docs](https://starlight.astro.build/), read [the Astro documentation](https://docs.astro.build), or jump into the [Astro Discord server](https://astro.build/chat).
172
+
Always use the `VideoPlayer` component to embed videos in your blog posts. See the [VideoPlayer component](#videoplayer) section for more information.
0 commit comments