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 react from "@astrojs/react"
import tailwind from "@astrojs/tailwind"
@@ -12,4 +14,7 @@ export default defineConfig({
react(),
prefetch(),
],
markdown: {
shikiConfig: {},
},
})

3
packages/website/package.json
View File

@@ -22,7 +22,8 @@
"clsx": "^2.0.0",
"reacord": "workspace:*",
"react": "^18.2.0",
"react-dom": "^18.2.0"
"react-dom": "^18.2.0",
"tailwind-merge": "^1.14.0"
},
"devDependencies": {
"@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 { twMerge } from "tailwind-merge"
import ExternalLink from "./external-link.astro"
export interface Props {
class?: string
}
---
<footer class="container text-xs opacity-75">
<address class="not-italic">
&copy; {new Date().getFullYear()} itsMapleLeaf
</address>
<p>
Coded with <HeartIcon className="inline w-4 align-sub" /> using{" "}
<ExternalLink class="link" href="https://astro.build">Astro</ExternalLink>
</p>
<footer class={twMerge("text-xs opacity-75", Astro.props.class)}>
<address class="not-italic">
&copy; {new Date().getFullYear()} itsMapleLeaf
</address>
<p>
Coded with <HeartIcon className="inline w-4 align-sub" /> using{" "}
<ExternalLink class="link" href="https://astro.build">Astro</ExternalLink>
</p>
</footer>

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

@@ -125,7 +125,7 @@ export function LandingAnimation() {
return (
<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"
>
<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 bannerUrl from "~/assets/banner.png"
import faviconUrl from "~/assets/favicon.png"
import "~/styles/prism-theme.css"
import "~/styles/tailwind.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" />
<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} />
<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>
<title>Reacord</title>
<link rel="icon" href={faviconUrl} />
</head>
<body>
<slot />
</body>
<link rel="icon" href={faviconUrl} />
</head>
<body>
<slot />
</body>
</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
/// <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"
export interface Props {
guide: CollectionEntry<"guides">
guide: CollectionEntry<"guides">
}
export const getStaticPaths: GetStaticPaths = async () => {
const guides = await getCollection("guides")
return guides.map((guide) => ({
params: { slug: guide.slug },
props: { guide },
}))
const guides = await getCollection("guides")
return guides.map((guide) => ({
params: { slug: guide.slug },
props: { guide },
}))
}
const guides = await getCollection("guides")
@@ -23,41 +23,73 @@ const { Content } = await Astro.props.guide.render()
---
<Layout>
<div class="isolate">
<header
class="bg-slate-700/30 shadow sticky top-0 backdrop-blur-sm transition z-10 flex"
>
<div class="container">
<MainNavigation />
</div>
</header>
<main class="container mt-8 flex items-start gap-4">
<nav class="w-48 sticky top-24 hidden md:block">
<h2 class="text-2xl">Guides</h2>
<ul class="mt-3 flex flex-col gap-2 items-start">
{
guides.map((guide) => (
<li>
<NavLink
class="link data-[active]:link-active"
href={`/guides/${guide.slug}`}
rel="prefetch"
>
{guide.data.title}
</NavLink>
</li>
))
}
</ul>
</nav>
<section
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"
>
<Content />
</section>
</main>
<div class="py-2">
<AppFooter />
</div>
</div>
<div class="isolate">
<header
class="sticky top-0 z-10 flex bg-slate-700/30 shadow backdrop-blur-sm transition"
>
<div class="container">
<MainNavigation />
</div>
</header>
<main class="container mt-8 flex items-start gap-4">
<nav
class="sticky top-24 hidden h-[calc(100vh-theme(spacing.28))] w-48 flex-col gap-3 md:flex"
>
<h2 class="text-2xl">Guides</h2>
<ul class="flex flex-col items-start gap-2">
{
guides.map((guide) => (
<li>
<NavLink
class="link data-[active]:link-active"
href={`/guides/${guide.slug}`}
rel="prefetch"
>
{guide.data.title}
</NavLink>
</li>
))
}
</ul>
<AppFooter class="mt-auto" />
</nav>
<article class="-mt-8 min-w-0 max-w-none flex-1 pb-8">
<Content />
</article>
</main>
<AppFooter class="mx-auto mb-4 text-center md:hidden" />
</div>
</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>
<div
class="fixed inset-0 rotate-6 scale-125 opacity-20"
style={{ backgroundImage: `url(${dotsBackgroundUrl})` }}
>
</div>
<div class="flex flex-col relative min-w-0 min-h-screen pb-4 gap-4">
<header class="container">
<MainNavigation />
</header>
<div class="flex flex-col gap-4 my-auto px-4">
<AppLogo class="w-full max-w-lg mx-auto" />
<div
class="fixed inset-0 rotate-6 scale-125 opacity-20"
style={{ backgroundImage: `url(${dotsBackgroundUrl})` }}
>
</div>
<div class="relative flex min-h-screen min-w-0 flex-col gap-4 pb-4">
<header class="container">
<MainNavigation />
</header>
<div class="my-auto flex flex-col gap-4 px-4">
<AppLogo class="mx-auto w-full max-w-lg" />
<div class="max-w-md w-full mx-auto isolate">
<LandingAnimation client:only />
</div>
<div class="isolate mx-auto h-44 w-full max-w-md">
<LandingAnimation client:only />
</div>
<p class="text-center text-lg font-light -mb-1">
Create interactive Discord messages with React.
</p>
<p class="-mb-1 text-center text-lg font-light">
Create interactive Discord messages with React.
</p>
<div class="flex gap-4 self-center">
<a href="/guides/getting-started" class="button button-solid">
Get Started
</a>
<div class="flex gap-4 self-center">
<a href="/guides/getting-started" class="button button-solid">
Get Started
</a>
<!-- <UncontrolledModal
<!-- <UncontrolledModal
button={(button) => (
<button {...button} class={buttonClass({ variant: "semiblack" })}>
Show Code
@@ -44,11 +44,11 @@ import MainNavigation from "~/components/main-navigation.astro"
<LandingCode />
</div>
</UncontrolledModal> -->
</div>
</div>
</div>
</div>
<div class="text-center">
<AppFooter />
</div>
</div>
<div class="container text-center">
<AppFooter />
</div>
</div>
</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;
}
}
@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