Skip to content

Commit 3a31f36

Browse files
ntatoudntatoud
committed
feat(v3): Add header metadata
1 parent cfb19e9 commit 3a31f36

File tree

4 files changed

+110
-34
lines changed

4 files changed

+110
-34
lines changed

‎astro.config.mjs‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,82 @@ export default defineConfig({
1919
replacesTitle: true,
2020
},
2121

22+
head: [
23+
{
24+
tag: "meta",
25+
attrs: { name: "msapplication-TileColor", content: "#000000" },
26+
},
27+
{ tag: "meta", attrs: { name: "theme-color", content: "#000000" } },
28+
{
29+
tag: "meta",
30+
attrs: {
31+
name: "viewport",
32+
content: "width=device-width, initial-scale=1.0",
33+
},
34+
},
35+
{
36+
tag: "meta",
37+
attrs: { "http-equiv": "Content-Language", content: "en" },
38+
},
39+
{
40+
tag: "meta",
41+
attrs: {
42+
name: "description",
43+
content:
44+
"Documentation of Start UI [web], an opinionated UI starter for React. From Bearstudio team",
45+
},
46+
},
47+
{
48+
tag: "meta",
49+
attrs: {
50+
name: "og:description",
51+
content:
52+
"Documentation of Start UI [web], an opinionated UI starter for React. From Bearstudio team",
53+
},
54+
},
55+
{
56+
tag: "meta",
57+
attrs: { name: "twitter:card", content: "summary_large_image" },
58+
},
59+
{
60+
tag: "meta",
61+
attrs: {
62+
name: "twitter:image",
63+
content:
64+
"https://github.com/BearStudio/start-ui-web/raw/master/assets/thumbnail.png",
65+
},
66+
},
67+
{
68+
tag: "meta",
69+
attrs: {
70+
name: "twitter:site:domain",
71+
content: "https://github.com/bearstudio/start-ui-web-doc",
72+
},
73+
},
74+
{
75+
tag: "meta",
76+
attrs: {
77+
name: "twitter:url",
78+
content: "https://github.com/bearstudio/start-ui-web-doc",
79+
},
80+
},
81+
{
82+
tag: "meta",
83+
attrs: { name: "og:title", content: "Start UI [web] documentation" },
84+
},
85+
{
86+
tag: "meta",
87+
attrs: {
88+
name: "og:image",
89+
content:
90+
"https://github.com/BearStudio/start-ui-web/raw/master/assets/thumbnail.png",
91+
},
92+
},
93+
{
94+
tag: "link",
95+
attrs: { rel: "icon", href: "/favicon-16x16.png", type: "image/png" },
96+
},
97+
],
2298
components: {
2399
SocialIcons: "./src/components/overrides/SocialIcons.astro",
24100
Footer: "./src/components/overrides/Footer.astro",

‎src/components/FileTreeItem.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ interface Props {
55
parent?: string;
66
}
77
8-
const { label, folder, parent } = Astro.props;
8+
const { label, folder, parent = "" } = Astro.props;
99
10-
const href = `#${parent}${label}`.toLowerCase().replaceAll(".", "");
10+
const href = `#${parent}${label}`.toLowerCase();
1111
---
1212

1313
<a href={href}>{label}{folder && "/"}</a>

‎src/components/FileTreeTitle.astro‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@ import { Icon, Code } from "@astrojs/starlight/components";
33
44
interface Props {
55
folder?: boolean;
6+
label: string;
67
}
78
8-
const { folder } = Astro.props;
9+
const { folder, label } = Astro.props;
910
---
1011

11-
<h4 class="file-tree-title">
12+
<h4 class="file-tree-title" id={label.replaceAll("/", "")}>
1213
{folder ? <Icon name="seti:folder" /> : <Icon name="document" />}
13-
14-
<code>/<slot /></code>
14+
<code>/{label}</code>
1515
</h4>
1616

1717
<style>

‎src/content/docs/folders-architecture.mdx‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -40,119 +40,119 @@ import FileTreeTitle from "../../components/FileTreeTitle.astro";
4040
</FileTree>
4141

4242

43-
<FileTreeTitle folder>.github</FileTreeTitle>
43+
<FileTreeTitle folder label=".github" />
4444

4545
[GitHub](https://github.com/) configuration files for GitHub actions, PR templates and README assets.
4646

47-
<FileTreeTitle folder>.storybook</FileTreeTitle>
47+
<FileTreeTitle folder label=".storybook"/>
4848
[Storybook](https://storybook.js.org/) configuration files.
4949

50-
<FileTreeTitle folder>.vscode</FileTreeTitle>
50+
<FileTreeTitle folder label=".vscode"/>
5151

5252
[VS Code workspace settings](https://code.visualstudio.com/docs/getstarted/settings#_workspace-settings).
5353
The extensions.json file contains some recommended extensions for the project.
5454

55-
<FileTreeTitle folder>.e2e</FileTreeTitle>
55+
<FileTreeTitle folder label=".e2e"/>
5656

5757
End-to-end tests folder for [Playwright](https://playwright.dev/) tests.
5858

59-
<FileTreeTitle folder>prisma</FileTreeTitle>
59+
<FileTreeTitle folder label="prisma"/>
6060

6161
[Prisma](https://www.prisma.io/) folder for database schema and seed scripts.
6262

6363
Prisma generator and client blocs are defined in the /schema/main.prisma file.
6464

6565
All other schema files organize related models / enum together. For example, in /schema/user.prisma you will be able to find all models / enum related or used by a User model, like VerificationToken model or UserRole enum.
6666

67-
<FileTreeTitle folder>public</FileTreeTitle>
67+
<FileTreeTitle folder label="public"/>
6868

6969
Static assets served as-is (images, icons, robots.txt, etc.).
7070

71-
<FileTreeTitle folder>src</FileTreeTitle>
71+
<FileTreeTitle folder label="src"/>
7272

7373
Main application source code.
7474

75-
<FileTreeTitle folder>src/components</FileTreeTitle>
75+
<FileTreeTitle folder label="src/components"/>
7676

7777
React generic UI components. In this folder, all components should be "dumb", focus on UI rendering and without business logic. These components should be documented in Storybook.
7878

79-
<FileTreeTitle folder>src/emails</FileTreeTitle>
79+
<FileTreeTitle folder label="src/emails"/>
8080

8181
This folder contains all emails templates created with [react-email](https://react.email/).
8282

83-
<FileTreeTitle folder>src/env</FileTreeTitle>
83+
<FileTreeTitle folder label="src/env"/>
8484

8585
Environment variables and validation utilities.
8686

87-
<FileTreeTitle folder>src/features</FileTreeTitle>
87+
<FileTreeTitle folder label="src/features"/>
8888

8989
All business features for client code or code shared between client and server.
9090

91-
<FileTreeTitle folder>src/hooks</FileTreeTitle>
91+
<FileTreeTitle folder label="src/hooks"/>
9292

9393
React generic hooks that can be use accross the application.
9494

95-
<FileTreeTitle folder>src/layout</FileTreeTitle>
95+
<FileTreeTitle folder label="src/layout"/>
9696

9797
Layout components and page wrappers.
9898

99-
<FileTreeTitle folder>src/lib</FileTreeTitle>
99+
<FileTreeTitle folder label="src/lib"/>
100100

101101
Global configuration for client libraries or libraries shared between client and server. If you need a configuration only on the server side, use the src/server/config folder.
102102

103-
<FileTreeTitle folder>src/locales</FileTreeTitle>
103+
<FileTreeTitle folder label="src/locales"/>
104104

105105
Folder which contains all the translations files. Use [i18n Ally VS Code extension for help](https://marketplace.visualstudio.com/items?itemName=lokalise.i18n-ally) on this part 😅.
106106

107-
<FileTreeTitle folder>src/routes</FileTreeTitle>
107+
<FileTreeTitle folder label="src/routes"/>
108108

109109
Tanstack Start router folder, all the routes of the application are declared in this folder. See the [Tanstack Start](https://tanstack.com/start/latest) documentation for more details.
110110

111-
<FileTreeTitle folder>src/server</FileTreeTitle>
111+
<FileTreeTitle folder label="src/server"/>
112112

113113
All the code for the server ONLY code.
114114

115-
<FileTreeTitle folder>src/styles</FileTreeTitle>
115+
<FileTreeTitle folder label="src/styles"/>
116116

117117
Global styles, Tailwind config, or CSS utilities.
118118

119-
<FileTreeTitle folder>src/tests</FileTreeTitle>
119+
<FileTreeTitle folder label="src/tests"/>
120120

121121
Unit and integration tests.
122122

123-
<FileTreeTitle folder>src/types</FileTreeTitle>
123+
<FileTreeTitle folder label="src/types"/>
124124

125125
Global TypeScript types available accross all the code base without imports.
126126

127-
<FileTreeTitle folder>src/providers.tsx</FileTreeTitle>
127+
<FileTreeTitle folder label="src/providers.tsx"/>
128128

129129
Top-level React providers (context, theme, query client, etc.).
130130

131-
<FileTreeTitle folder>src/routeTree.gen.ts</FileTreeTitle>
131+
<FileTreeTitle folder label="src/routeTree.gen.ts"/>
132132

133133
Generated route tree file (auto-generated, don’t edit manually).
134134

135-
<FileTreeTitle folder>src/router.ts</FileTreeTitle>
135+
<FileTreeTitle folder label="src/router.ts"/>
136136

137137
Router configuration and setup.
138138

139-
<FileTreeTitle>.env</FileTreeTitle>
139+
<FileTreeTitle label=".env"/>
140140

141141
This file is **LOCAL and should NEVER be tracked on GIT**. All sensitive information should be set in this `.env` file by each developers.
142142

143-
<FileTreeTitle>.env.example</FileTreeTitle>
143+
<FileTreeTitle label=".env.example"/>
144144

145145
This file IS tracked on GIT, make sure that you **NEVER** put sensitive information in this file. All sensitive information should be set in the `.env`. This file show an example of the `.env` that a new developer on the project can duplicate to create their own `.env` file.
146146

147-
<FileTreeTitle>lefthook.yml</FileTreeTitle>
147+
<FileTreeTitle label="lefthook.yml"/>
148148

149149
GIT hooks created with [Lefthook](https://lefthook.dev/).
150150

151-
<FileTreeTitle>vite.config.ts</FileTreeTitle>
151+
<FileTreeTitle label="vite.config.ts"/>
152152

153153
Vite build and dev server configuration.
154154

155-
<FileTreeTitle>vitest.config.ts</FileTreeTitle>
155+
<FileTreeTitle label="vitest.config.ts"/>
156156

157157
Vitest configuration for unit and integration tests.
158158

0 commit comments

Comments
 (0)