root layout
This commit is contained in:
@@ -17,6 +17,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/react": "^2.1.0",
|
||||
"@fontsource/jetbrains-mono": "^4.5.12",
|
||||
"@fontsource/rubik": "^4.5.14",
|
||||
"@headlessui/react": "^1.6.6",
|
||||
"@heroicons/react": "^1.0.6",
|
||||
"@reach/rect": "^0.17.0",
|
||||
|
||||
BIN
packages/website/src/assets/banner.png
Normal file
BIN
packages/website/src/assets/banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
BIN
packages/website/src/assets/blob-comfy.png
Normal file
BIN
packages/website/src/assets/blob-comfy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
packages/website/src/assets/cursor-ibeam.png
Normal file
BIN
packages/website/src/assets/cursor-ibeam.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
packages/website/src/assets/cursor.png
Normal file
BIN
packages/website/src/assets/cursor.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
3
packages/website/src/assets/dots-background.svg
Normal file
3
packages/website/src/assets/dots-background.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="53" height="35" viewBox="0 0 53 35" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="3" cy="3" r="1" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 146 B |
BIN
packages/website/src/assets/favicon.png
Normal file
BIN
packages/website/src/assets/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 658 B |
43
packages/website/src/layout.astro
Normal file
43
packages/website/src/layout.astro
Normal file
@@ -0,0 +1,43 @@
|
||||
---
|
||||
import "@fontsource/jetbrains-mono/500.css"
|
||||
import "@fontsource/rubik/variable.css"
|
||||
import packageJson from "reacord/package.json"
|
||||
import bannerUrl from "~/assets/banner.png"
|
||||
import faviconUrl from "~/assets/favicon.png"
|
||||
import "~/styles/prism-theme.css"
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="bg-slate-900 text-slate-100">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<meta name="description" content={packageJson.description} />
|
||||
<meta name="theme-color" content="#21754b" />
|
||||
<meta property="og:url" content="https://reacord.mapleleaf.dev/" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:title" content="Reacord" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Create interactive Discord messages using React"
|
||||
/>
|
||||
<meta property="og:image" content={bannerUrl} />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:domain" content="reacord.mapleleaf.dev" />
|
||||
<meta name="twitter:url" content="https://reacord.mapleleaf.dev/" />
|
||||
<meta name="twitter:title" content="Reacord" />
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="Create interactive Discord messages using React"
|
||||
/>
|
||||
<meta name="twitter:image" content={bannerUrl} />
|
||||
|
||||
<title>Reacord</title>
|
||||
|
||||
<link rel="icon" href={faviconUrl} />
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
@@ -1 +1,5 @@
|
||||
<h1>hi world</h1>
|
||||
---
|
||||
import Layout from "~/layout.astro"
|
||||
---
|
||||
|
||||
<Layout>content!</Layout>
|
||||
|
||||
133
packages/website/src/styles/prism-theme.css
Normal file
133
packages/website/src/styles/prism-theme.css
Normal file
@@ -0,0 +1,133 @@
|
||||
/**
|
||||
* Nord Theme Originally by Arctic Ice Studio
|
||||
* https://nordtheme.com
|
||||
*
|
||||
* Ported for PrismJS by Zane Hitchcoxc (@zwhitchcox) and Gabriel Ramos (@gabrieluizramos)
|
||||
*/
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: #f8f8f2;
|
||||
background: none;
|
||||
/* font-family: "Fira Code", Consolas, Monaco, "Andale Mono", "Ubuntu Mono",
|
||||
monospace; */
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.7;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: 0.5em 0;
|
||||
overflow: auto;
|
||||
border-radius: 0.3em;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
/* background: #2e3440; */
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: 0.1em;
|
||||
border-radius: 0.3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #636f88;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #81a1c1;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #81a1c1;
|
||||
}
|
||||
|
||||
.token.number {
|
||||
color: #b48ead;
|
||||
}
|
||||
|
||||
.token.boolean {
|
||||
color: #81a1c1;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #a3be8c;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string,
|
||||
.token.variable {
|
||||
color: #81a1c1;
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #88c0d0;
|
||||
}
|
||||
|
||||
.token.keyword {
|
||||
color: #81a1c1;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important {
|
||||
color: #ebcb8b;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.code-line.highlight-line {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
padding: 0 1rem;
|
||||
margin: 0 -1rem;
|
||||
display: block;
|
||||
}
|
||||
@@ -3,7 +3,7 @@ module.exports = {
|
||||
content: ["./app/**/*.{ts,tsx,md}"],
|
||||
theme: {
|
||||
fontFamily: {
|
||||
sans: ["Rubik", "sans-serif"],
|
||||
sans: ["RubikVariable", "sans-serif"],
|
||||
monospace: ["'JetBrains Mono'", "monospace"],
|
||||
},
|
||||
boxShadow: {
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
"jsxImportSource": "react",
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"~/*": ["./app/*"]
|
||||
"~/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["**/*.ts", "**/*.tsx", "**/*.cjs", "**/*.mjs", "**/*.astro"]
|
||||
|
||||
Reference in New Issue
Block a user