kris/reacord
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style fixes and improvements

Browse Source
This commit is contained in:
itsMapleLeaf
2023-08-16 20:33:53 -05:00
parent eea1a7ee9d
commit 0dad3c9ecd
13 changed files with 181 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/website/astro.config.mjs
View File

@@ -1,3 +1,5 @@
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-nocheck
import prefetch from "@astrojs/prefetch" import prefetch from "@astrojs/prefetch"
import react from "@astrojs/react" import react from "@astrojs/react"
import tailwind from "@astrojs/tailwind" import tailwind from "@astrojs/tailwind"
@@ -12,4 +14,7 @@ export default defineConfig({
react(), react(),
prefetch(), prefetch(),
], ],
markdown: {
shikiConfig: {},
},
}) })

3
packages/website/package.json
View File

@@ -22,7 +22,8 @@
"clsx": "^2.0.0", "clsx": "^2.0.0",
"reacord": "workspace:*", "reacord": "workspace:*",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0" "react-dom": "^18.2.0",
"tailwind-merge": "^1.14.0"
}, },
"devDependencies": { "devDependencies": {
"@astrojs/tailwind": "^4.0.0", "@astrojs/tailwind": "^4.0.0",

21
packages/website/src/components/app-footer.astro
View File

@@ -1,14 +1,19 @@
--- ---
import { HeartIcon } from "@heroicons/react/20/solid" import { HeartIcon } from "@heroicons/react/20/solid"
import { twMerge } from "tailwind-merge"
import ExternalLink from "./external-link.astro" import ExternalLink from "./external-link.astro"
export interface Props {
class?: string
}
--- ---
<footer class="container text-xs opacity-75"> <footer class={twMerge("text-xs opacity-75", Astro.props.class)}>
<address class="not-italic"> <address class="not-italic">
&copy; {new Date().getFullYear()} itsMapleLeaf &copy; {new Date().getFullYear()} itsMapleLeaf
</address> </address>
<p> <p>
Coded with <HeartIcon className="inline w-4 align-sub" /> using{" "} Coded with <HeartIcon className="inline w-4 align-sub" /> using{" "}
<ExternalLink class="link" href="https://astro.build">Astro</ExternalLink> <ExternalLink class="link" href="https://astro.build">Astro</ExternalLink>
</p> </p>
</footer> </footer>

2
packages/website/src/components/landing-animation.tsx
View File

@@ -125,7 +125,7 @@ export function LandingAnimation() {
return ( return (
<div <div
className="pointer-events-none relative grid select-none gap-2" className="animate-fade-in pointer-events-none relative grid select-none gap-2"
role="presentation" role="presentation"
> >
<div <div

57
packages/website/src/components/layout.astro
View File

@@ -4,41 +4,40 @@ import "@fontsource/rubik/variable.css"
import packageJson from "reacord/package.json" import packageJson from "reacord/package.json"
import bannerUrl from "~/assets/banner.png" import bannerUrl from "~/assets/banner.png"
import faviconUrl from "~/assets/favicon.png" import faviconUrl from "~/assets/favicon.png"
import "~/styles/prism-theme.css"
import "~/styles/tailwind.css" import "~/styles/tailwind.css"
--- ---
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" class="bg-slate-900 text-slate-100"> <html lang="en" class="bg-slate-900 text-slate-100">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content={packageJson.description} /> <meta name="description" content={packageJson.description} />
<meta name="theme-color" content="#21754b" /> <meta name="theme-color" content="#21754b" />
<meta property="og:url" content="https://reacord.mapleleaf.dev/" /> <meta property="og:url" content="https://reacord.mapleleaf.dev/" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:title" content="Reacord" /> <meta property="og:title" content="Reacord" />
<meta <meta
property="og:description" property="og:description"
content="Create interactive Discord messages using React" content="Create interactive Discord messages using React"
/> />
<meta property="og:image" content={bannerUrl} /> <meta property="og:image" content={bannerUrl} />
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:domain" content="reacord.mapleleaf.dev" /> <meta name="twitter:domain" content="reacord.mapleleaf.dev" />
<meta name="twitter:url" content="https://reacord.mapleleaf.dev/" /> <meta name="twitter:url" content="https://reacord.mapleleaf.dev/" />
<meta name="twitter:title" content="Reacord" /> <meta name="twitter:title" content="Reacord" />
<meta <meta
name="twitter:description" name="twitter:description"
content="Create interactive Discord messages using React" content="Create interactive Discord messages using React"
/> />
<meta name="twitter:image" content={bannerUrl} /> <meta name="twitter:image" content={bannerUrl} />
<title>Reacord</title> <title>Reacord</title>
<link rel="icon" href={faviconUrl} /> <link rel="icon" href={faviconUrl} />
</head> </head>
<body> <body>
<slot /> <slot />
</body> </body>
</html> </html>

2
packages/website/src/env.d.ts vendored
View File

@@ -1,3 +1,3 @@
/// <reference types="astro/client" />
// eslint-disable-next-line @typescript-eslint/triple-slash-reference // eslint-disable-next-line @typescript-eslint/triple-slash-reference
/// <reference path="../.astro/types.d.ts" /> /// <reference path="../.astro/types.d.ts" />
/// <reference types="astro/client" />

118
packages/website/src/pages/guides/[slug].astro
View File

@@ -7,15 +7,15 @@ import MainNavigation from "~/components/main-navigation.astro"
import NavLink from "~/components/nav-link.astro" import NavLink from "~/components/nav-link.astro"
export interface Props { export interface Props {
guide: CollectionEntry<"guides"> guide: CollectionEntry<"guides">
} }
export const getStaticPaths: GetStaticPaths = async () => { export const getStaticPaths: GetStaticPaths = async () => {
const guides = await getCollection("guides") const guides = await getCollection("guides")
return guides.map((guide) => ({ return guides.map((guide) => ({
params: { slug: guide.slug }, params: { slug: guide.slug },
props: { guide }, props: { guide },
})) }))
} }
const guides = await getCollection("guides") const guides = await getCollection("guides")
@@ -23,41 +23,73 @@ const { Content } = await Astro.props.guide.render()
--- ---
<Layout> <Layout>
<div class="isolate"> <div class="isolate">
<header <header
class="bg-slate-700/30 shadow sticky top-0 backdrop-blur-sm transition z-10 flex" class="sticky top-0 z-10 flex bg-slate-700/30 shadow backdrop-blur-sm transition"
> >
<div class="container"> <div class="container">
<MainNavigation /> <MainNavigation />
</div> </div>
</header> </header>
<main class="container mt-8 flex items-start gap-4"> <main class="container mt-8 flex items-start gap-4">
<nav class="w-48 sticky top-24 hidden md:block"> <nav
<h2 class="text-2xl">Guides</h2> class="sticky top-24 hidden h-[calc(100vh-theme(spacing.28))] w-48 flex-col gap-3 md:flex"
<ul class="mt-3 flex flex-col gap-2 items-start"> >
{ <h2 class="text-2xl">Guides</h2>
guides.map((guide) => ( <ul class="flex flex-col items-start gap-2">
<li> {
<NavLink guides.map((guide) => (
class="link data-[active]:link-active" <li>
href={`/guides/${guide.slug}`} <NavLink
rel="prefetch" class="link data-[active]:link-active"
> href={`/guides/${guide.slug}`}
{guide.data.title} rel="prefetch"
</NavLink> >
</li> {guide.data.title}
)) </NavLink>
} </li>
</ul> ))
</nav> }
<section </ul>
class="prose prose-invert prose prose-invert prose-h1:font-light prose-h1:mb-4 prose-h1:text-3xl lg:prose-h1:text-4xl prose-h2:font-light prose-h3:font-light prose-p:my-3 prose-a:font-medium prose-a:text-emerald-400 hover:prose-a:no-underline prose-strong:font-medium prose-strong:text-emerald-400 prose-pre:font-monospace prose-pre:overflow-x-auto prose-code:before:hidden prose-code:after:hidden prose-code:text-slate-400 prose-li:mb-5 max-w-none pb-8 flex-1 min-w-0" <AppFooter class="mt-auto" />
> </nav>
<Content /> <article class="-mt-8 min-w-0 max-w-none flex-1 pb-8">
</section> <Content />
</main> </article>
<div class="py-2"> </main>
<AppFooter /> <AppFooter class="mx-auto mb-4 text-center md:hidden" />
</div> </div>
</div>
</Layout> </Layout>
<style>
article :global(:where(h1, h2, h3, h4, h5, h6)) {
@apply mb-3 mt-8 font-light;
}
article :global(h1) {
@apply text-3xl lg:text-4xl;
}
article :global(h2) {
@apply text-2xl;
}
article :global(h3) {
@apply text-xl;
}
article :global(p) {
@apply my-3;
}
article :global(a) {
@apply font-medium text-emerald-400 hover:no-underline;
}
article :global(strong) {
@apply font-medium text-emerald-400;
}
article :global(code) {
@apply rounded border border-slate-800 bg-slate-950 px-1 py-0.5 leading-none text-slate-300;
}
article :global(pre) {
@apply my-4 overflow-x-auto rounded-md border border-slate-800 !bg-slate-950 px-4 py-3 font-monospace;
}
article :global(pre code) {
@apply border-none bg-transparent p-0;
}
</style>

56
packages/website/src/pages/index.astro
View File

@@ -8,32 +8,32 @@ import MainNavigation from "~/components/main-navigation.astro"
--- ---
<Layout> <Layout>
<div <div
class="fixed inset-0 rotate-6 scale-125 opacity-20" class="fixed inset-0 rotate-6 scale-125 opacity-20"
style={{ backgroundImage: `url(${dotsBackgroundUrl})` }} style={{ backgroundImage: `url(${dotsBackgroundUrl})` }}
> >
</div> </div>
<div class="flex flex-col relative min-w-0 min-h-screen pb-4 gap-4"> <div class="relative flex min-h-screen min-w-0 flex-col gap-4 pb-4">
<header class="container"> <header class="container">
<MainNavigation /> <MainNavigation />
</header> </header>
<div class="flex flex-col gap-4 my-auto px-4"> <div class="my-auto flex flex-col gap-4 px-4">
<AppLogo class="w-full max-w-lg mx-auto" /> <AppLogo class="mx-auto w-full max-w-lg" />
<div class="max-w-md w-full mx-auto isolate"> <div class="isolate mx-auto h-44 w-full max-w-md">
<LandingAnimation client:only /> <LandingAnimation client:only />
</div> </div>
<p class="text-center text-lg font-light -mb-1"> <p class="-mb-1 text-center text-lg font-light">
Create interactive Discord messages with React. Create interactive Discord messages with React.
</p> </p>
<div class="flex gap-4 self-center"> <div class="flex gap-4 self-center">
<a href="/guides/getting-started" class="button button-solid"> <a href="/guides/getting-started" class="button button-solid">
Get Started Get Started
</a> </a>
<!-- <UncontrolledModal <!-- <UncontrolledModal
button={(button) => ( button={(button) => (
<button {...button} class={buttonClass({ variant: "semiblack" })}> <button {...button} class={buttonClass({ variant: "semiblack" })}>
Show Code Show Code
@@ -44,11 +44,11 @@ import MainNavigation from "~/components/main-navigation.astro"
<LandingCode /> <LandingCode />
</div> </div>
</UncontrolledModal> --> </UncontrolledModal> -->
</div> </div>
</div> </div>
<div class="text-center"> <div class="container text-center">
<AppFooter /> <AppFooter />
</div> </div>
</div> </div>
</Layout> </Layout>

133
packages/website/src/styles/prism-theme.css
View File

@@ -1,133 +0,0 @@
/**
* 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;
}

12
packages/website/src/styles/tailwind.css
View File

@@ -45,3 +45,15 @@
@apply bg-emerald-700 hover:bg-emerald-800; @apply bg-emerald-700 hover:bg-emerald-800;
} }
} }
@layer utilities {
@keyframes fade-in {
from {
opacity: 0;
}
}
.animate-fade-in {
animation: fade-in 0.5s;
}
}

7
packages/website/tailwind.config.ts Normal file
View File

@@ -0,0 +1,7 @@
import { Config } from "tailwindcss"
import config from "../../tailwind.config.ts"
export default {
...config,
content: ["./src/**/*.{ts,tsx,md,astro}"],
} satisfies Config

7
pnpm-lock.yaml generated
View File

@@ -180,6 +180,9 @@ importers:
react-dom: react-dom:
specifier: ^18.2.0 specifier: ^18.2.0
version: 18.2.0(react@18.2.0) version: 18.2.0(react@18.2.0)
tailwind-merge:
specifier: ^1.14.0
version: 1.14.0
devDependencies: devDependencies:
'@astrojs/tailwind': '@astrojs/tailwind':
specifier: ^4.0.0 specifier: ^4.0.0
@@ -6554,6 +6557,10 @@ packages:
'@pkgr/utils': 2.4.2 '@pkgr/utils': 2.4.2
tslib: 2.6.1 tslib: 2.6.1
/tailwind-merge@1.14.0:
resolution: {integrity: sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==}
dev: false
/tailwindcss@3.3.3: /tailwindcss@3.3.3:
resolution: {integrity: sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==} resolution: {integrity: sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==}
engines: {node: '>=14.0.0'} engines: {node: '>=14.0.0'}

6
tailwind.config.ts
View File

@@ -1,8 +1,6 @@
import typography from "@tailwindcss/typography" import typography from "@tailwindcss/typography"
import { type Config } from "tailwindcss"
export default { export default {
content: ["./packages/*/src/**/*.{ts,tsx,md,astro}"],
theme: { theme: {
fontFamily: { fontFamily: {
sans: ["RubikVariable", "sans-serif"], sans: ["RubikVariable", "sans-serif"],
@@ -16,5 +14,5 @@ export default {
corePlugins: { corePlugins: {
container: false, container: false,
}, },
plugins: [typography], plugins: [],
} satisfies Config }