mirror of
https://github.com/liyunze-coding/coworking-website.git
synced 2026-11-06 13:13:34 +00:00
updated to tailwind v4
This commit is contained in:
liyunze
parent
7505e27173
commit
9a168db8ab
11 changed files with 858 additions and 1188 deletions
|
|
@ -1,25 +1,31 @@
|
|||
import { defineConfig } from "astro/config";
|
||||
import tailwind from "@astrojs/tailwind";
|
||||
import mdx from "@astrojs/mdx";
|
||||
import react from "@astrojs/react";
|
||||
import expressiveCode from "astro-expressive-code";
|
||||
import remarkDirective from "remark-directive";
|
||||
import remarkCalloutDirectives from "./src/assets/plugins/remark-callout-directives-customized.js";
|
||||
|
||||
import tailwindcss from "@tailwindcss/vite";
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
integrations: [
|
||||
tailwind(),
|
||||
expressiveCode(),
|
||||
mdx({
|
||||
remarkPlugins: [remarkDirective, remarkCalloutDirectives],
|
||||
}),
|
||||
react(),
|
||||
],
|
||||
|
||||
server: {
|
||||
port: 4321,
|
||||
},
|
||||
|
||||
markdown: {
|
||||
remarkPlugins: [remarkDirective, remarkCalloutDirectives],
|
||||
},
|
||||
|
||||
vite: {
|
||||
plugins: [tailwindcss()],
|
||||
},
|
||||
});
|
||||
1785
package-lock.json
generated
1785
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -12,8 +12,8 @@
|
|||
"dependencies": {
|
||||
"@astrojs/mdx": "^4.2.5",
|
||||
"@astrojs/react": "^3.6.2",
|
||||
"@astrojs/tailwind": "^5.1.2",
|
||||
"@astrojs/ts-plugin": "^1.10.4",
|
||||
"@tailwindcss/vite": "^4.1.10",
|
||||
"@types/react": "^18.2.65",
|
||||
"@types/react-dom": "^18.2.22",
|
||||
"@vercel/analytics": "^1.0.1",
|
||||
|
|
@ -21,11 +21,12 @@
|
|||
"astro-expressive-code": "^0.41.2",
|
||||
"clsx": "^2.1.0",
|
||||
"framer-motion": "^11.0.12",
|
||||
"motion": "^12.18.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"remark-directive": "^3.0.0",
|
||||
"tailwind-merge": "^2.2.1",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"tailwindcss": "^4.1.10",
|
||||
"typescript": "^5.4.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -34,14 +34,20 @@ export async function setup() {
|
|||
// Define the order of categories
|
||||
let categoryOrder = ["Get Started", "Guide", "Tutorials"];
|
||||
|
||||
const getStartedFiles = Object.values(import.meta.glob("../../pages/get-started/*", { eager: true }));
|
||||
const guideFiles = Object.values(import.meta.glob("../../pages/guide/*", { eager: true }));
|
||||
const tutorialFiles = Object.values(import.meta.glob("../../pages/tutorials/*", { eager: true }));
|
||||
const getStartedFiles = Object.values(
|
||||
import.meta.glob("../../pages/get-started/*", { eager: true })
|
||||
);
|
||||
const guideFiles = Object.values(
|
||||
import.meta.glob("../../pages/guide/*", { eager: true })
|
||||
);
|
||||
const tutorialFiles = Object.values(
|
||||
import.meta.glob("../../pages/tutorials/*", { eager: true })
|
||||
);
|
||||
|
||||
let markdownFiles: MarkdownFile[] = [
|
||||
...(getStartedFiles as MarkdownFile[]),
|
||||
...(guideFiles as MarkdownFile[]),
|
||||
...(tutorialFiles as MarkdownFile[])
|
||||
...(tutorialFiles as MarkdownFile[]),
|
||||
];
|
||||
let navigation: Navigation = {};
|
||||
|
||||
|
|
@ -122,10 +128,10 @@ const { showHome } = Astro.props;
|
|||
</div>
|
||||
<ul class="list-disc list-outside font-normal">
|
||||
{links.map((link) => (
|
||||
<li class="mb-1 pl-0">
|
||||
<li class="mb-1 pl-0 ml-5">
|
||||
<a
|
||||
href={link.url}
|
||||
class={`no-target-blank px-2 rounded-md w-full transition-colors duration-150 hover:no-underline hover:text-white ${isCurrentUrl(link.url) ? "text-black bg-primary-green" : "text-gray-400 bg-none"}`}
|
||||
class={`no-target-blank w-full inline-block px-2 py-1 rounded-md transition-colors duration-150 hover:no-underline hover:text-white ${isCurrentUrl(link.url) ? "text-black bg-primary-green" : "text-gray-400 bg-none"}`}
|
||||
>
|
||||
{link.title}
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@
|
|||
<div class="text-center text-4xl lg:text-6xl font-bold">
|
||||
<span class="text-slate-200">Getting started with</span>
|
||||
<div
|
||||
class="bg-clip-text text-transparent bg-hero-gradient animate-gradient py-1 lg:py-3 bg-[length:300%]"
|
||||
id="coworking-streams"
|
||||
class="text-transparent animate-gradient py-1 lg:py-3 bg-[length:300%]"
|
||||
>
|
||||
Coworking streams
|
||||
</div>
|
||||
|
|
@ -15,3 +16,10 @@
|
|||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#coworking-streams {
|
||||
background: var(--color-hero-gradient);
|
||||
-webkit-background-clip: text;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { cn } from "../../../utils/cn";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { cn } from "@/utils/cn";
|
||||
import { AnimatePresence, motion } from "motion/react";
|
||||
import { useState } from "react";
|
||||
|
||||
export const HoverEffect = ({
|
||||
|
|
@ -87,7 +87,7 @@ export const CardTitle = ({
|
|||
return (
|
||||
<h4
|
||||
className={cn(
|
||||
"mt-4 font-bold tracking-wide text-zinc-100",
|
||||
"mt-4 font-bold tracking-wide text-zinc-100 text-xl",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -3,12 +3,14 @@ import Layout from "./Layout.astro";
|
|||
import TableOfContent from "../components/blocks/TableOfContent.astro";
|
||||
import VerticalNav from "../components/blocks/verticalNav.astro";
|
||||
import "../assets/styles/remark-callout-directives.css";
|
||||
import NavBar from "@/components/blocks/navBar.astro";
|
||||
|
||||
const { frontmatter, headings } = Astro.props;
|
||||
---
|
||||
|
||||
<Layout title={frontmatter.title} description={frontmatter.description}>
|
||||
<div class="mx-auto px-2 max-w-[1440px]">
|
||||
<NavBar />
|
||||
<div class="mx-auto px-2 max-w-[1440px] pt-[var(--header-height)]">
|
||||
<div class="flex flex-col lg:grid lg:grid-cols-10 gap-5">
|
||||
<!-- vertical navbar -->
|
||||
<div
|
||||
|
|
@ -16,18 +18,20 @@ const { frontmatter, headings } = Astro.props;
|
|||
transition:name="vertical-navbar"
|
||||
>
|
||||
<aside
|
||||
class="hidden lg:translate-x-0 overflow-y-auto z-30 lg:block lg:sticky py-8 lg:max-h-[calc(100vh-var(--header-height))] lg:top-[--header-height]"
|
||||
class="hidden lg:translate-x-0 overflow-y-auto z-30 lg:block lg:sticky py-8 lg:max-h-[calc(100vh-var(--header-height))] lg:top-[var(--header-height)]"
|
||||
>
|
||||
<VerticalNav />
|
||||
</aside>
|
||||
</div>
|
||||
<div class="lg:col-span-8">
|
||||
<div class="flex flex-col lg:grid lg:grid-cols-10">
|
||||
<div class="col-span-8 px-2 md:px-10 pb-10 pt-8">
|
||||
<div
|
||||
class="guide-content col-span-8 px-2 md:px-10 pb-10 pt-8"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
<div
|
||||
class="hidden col-span-2 pt-8 lg:block lg:sticky lg:px-4 lg:-mx-4 lg:max-h-[calc(100vh-var(--header-height))] lg:top-[--header-height]"
|
||||
class="hidden col-span-2 pt-8 lg:block lg:sticky lg:px-4 lg:-mx-4 lg:max-h-[calc(100vh-var(--header-height))] lg:top-[var(--header-height)]"
|
||||
>
|
||||
<!-- TOC -->
|
||||
<TableOfContent
|
||||
|
|
@ -39,10 +43,108 @@ const { frontmatter, headings } = Astro.props;
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
<script is:inline>
|
||||
// make all <a> attributes have target="_blank" except for Table of Contents
|
||||
document.querySelectorAll("a:not(.no-target-blank)").forEach((el) => {
|
||||
el.setAttribute("target", "_blank");
|
||||
});
|
||||
</script>
|
||||
</Layout>
|
||||
<style is:inline>
|
||||
.guide-content blockquote {
|
||||
margin: 1rem 0;
|
||||
border-left: 4px solid #718096;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.guide-content a {
|
||||
display: inline-block;
|
||||
color: #4299e1;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.guide-content a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.guide-content h1 {
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 2.75rem;
|
||||
font-weight: bold;
|
||||
scroll-margin-top: 3.7rem;
|
||||
}
|
||||
|
||||
.guide-content h2 {
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 1.5rem;
|
||||
font-size: 1.875rem;
|
||||
font-weight: bold;
|
||||
scroll-margin-top: 3.7rem;
|
||||
}
|
||||
|
||||
.guide-content h3 {
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 1.25rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
scroll-margin-top: 3.7rem;
|
||||
}
|
||||
|
||||
.guide-content h4 {
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 1.25rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
scroll-margin-top: 3.7rem;
|
||||
}
|
||||
|
||||
.guide-content p {
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
font-family: system-ui;
|
||||
font-size: 1rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.guide-content hr {
|
||||
margin: 2.5rem 0;
|
||||
/* border-color: #add19c; */
|
||||
}
|
||||
|
||||
.guide-content ul,
|
||||
.guide-content ol {
|
||||
list-style-position: outside;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.guide-content ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
.guide-content ul ul,
|
||||
.guide-content ol ul {
|
||||
margin-bottom: 0.5rem;
|
||||
margin-left: 1.25rem;
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
.guide-content ul li,
|
||||
.guide-content ol li {
|
||||
margin-bottom: 0.25rem;
|
||||
margin-left: 1.25rem;
|
||||
}
|
||||
|
||||
.guide-content ol {
|
||||
margin-left: 1.25rem;
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
.guide-content code {
|
||||
border-radius: 0.375rem;
|
||||
background-color: #323232;
|
||||
padding: 0.5rem;
|
||||
font-family: monospace;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
import NavBar from "../components/blocks/navBar.astro";
|
||||
import { ViewTransitions } from "astro:transitions";
|
||||
import { ClientRouter } from "astro:transitions";
|
||||
import "./src/styles/global.css";
|
||||
|
||||
export interface Props {
|
||||
title: string;
|
||||
|
|
@ -50,13 +51,12 @@ const { title, description } = Astro.props;
|
|||
<link href="/pagefind/pagefind-ui.css" rel="stylesheet" />
|
||||
<script src="/pagefind/pagefind-ui.js" is:inline></script>
|
||||
<script is:inline src="/_vercel/insights/script.js"></script>
|
||||
<ViewTransitions />
|
||||
<ClientRouter />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="pt-[var(--header-height)] bg-none">
|
||||
<NavBar />
|
||||
<div class="bg-none">
|
||||
<slot />
|
||||
</div>
|
||||
<script>
|
||||
|
|
@ -73,12 +73,6 @@ const { title, description } = Astro.props;
|
|||
--header-height: 3.5rem;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: system-ui, sans-serif;
|
||||
background-color: #171717;
|
||||
|
|
|
|||
|
|
@ -2,13 +2,17 @@
|
|||
import Layout from "../layouts/Layout.astro";
|
||||
import Hero from "../components/blocks/Hero.astro";
|
||||
import BlurBackground from "../components/ui/BlurBackground.astro";
|
||||
import NavBar from "@/components/blocks/navBar.astro";
|
||||
---
|
||||
|
||||
<Layout
|
||||
title="Coworking Stream Guide"
|
||||
description="A guide for new and existing coworking streamers!"
|
||||
>
|
||||
<div class="relative overflow-hidden h-fit min-h-screen w-full">
|
||||
<NavBar />
|
||||
<div
|
||||
class="relative overflow-hidden h-fit min-h-screen w-full pt-[var(--header-height)]"
|
||||
>
|
||||
<BlurBackground />
|
||||
<div class="flex justify-center items-start pb-10">
|
||||
<Hero />
|
||||
|
|
|
|||
34
src/styles/global.css
Normal file
34
src/styles/global.css
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--color-primary: #fafafa;
|
||||
--color-secondary: #171717;
|
||||
--color-primary-green: #8DECB4;
|
||||
--color-primary-blue: #3f84d8;
|
||||
--color-light-blue: #b3c6f9;
|
||||
--header-height: 3.5rem;
|
||||
--color-hero-gradient: linear-gradient(to right, #3F84D8, aquamarine);
|
||||
|
||||
--animate-gradient: gradient 15s ease infinite;
|
||||
|
||||
@keyframes gradient {
|
||||
"0%": {
|
||||
"background-position": "0% 50%",
|
||||
}
|
||||
"50%": {
|
||||
"background-position": "100% 50%",
|
||||
}
|
||||
"100%": {
|
||||
"background-position": "0% 50%",
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from: {
|
||||
opacity: "0",
|
||||
}
|
||||
to: {
|
||||
opacity: "1",
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue