mirror of
https://github.com/dathere/qsvpro.dathere.com.git
synced 2025-12-18 21:59:24 +00:00
build: update to tailwindcss v4
This commit is contained in:
rzmk
parent
bc3770ece5
commit
6a4723760d
9 changed files with 126 additions and 122 deletions
|
|
@ -1,8 +1,12 @@
|
|||
import { defineConfig } from "astro/config";
|
||||
import react from "@astrojs/react";
|
||||
import tailwind from "@astrojs/tailwind";
|
||||
import tailwindcss from "@tailwindcss/vite";
|
||||
|
||||
export default defineConfig({
|
||||
site: "https://qsvpro.dathere.com",
|
||||
integrations: [react(), tailwind()],
|
||||
site: "https://qsvpro.dathere.com",
|
||||
integrations: [react(), tailwindcss()],
|
||||
|
||||
vite: {
|
||||
plugins: [tailwindcss()],
|
||||
},
|
||||
});
|
||||
BIN
bun.lockb
BIN
bun.lockb
Binary file not shown.
|
|
@ -11,9 +11,9 @@
|
|||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/tailwind": "^6.0.2",
|
||||
"@fontsource/inter": "^5.2.8",
|
||||
"@tailwindcss/postcss": "^4.1.17",
|
||||
"@tailwindcss/vite": "^4.1.17",
|
||||
"astro": "^5.16.0",
|
||||
"embla-carousel-autoplay": "^8.6.0",
|
||||
"embla-carousel-react": "^8.6.0",
|
||||
|
|
|
|||
5
postcss.config.mjs
Normal file
5
postcss.config.mjs
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
export default {
|
||||
plugins: {
|
||||
"@tailwindcss/postcss": {},
|
||||
},
|
||||
};
|
||||
|
|
@ -70,7 +70,7 @@ export const Hero = () => {
|
|||
} catch (e) {
|
||||
console.error(
|
||||
"Unable to fetch API data from releases repository: " +
|
||||
String(e)
|
||||
String(e)
|
||||
);
|
||||
console.log("Showing default download button to user.");
|
||||
}
|
||||
|
|
@ -142,38 +142,36 @@ export const Hero = () => {
|
|||
(platform) => (
|
||||
<div
|
||||
key={platform}
|
||||
className={`mx-4 ${
|
||||
platform === OS
|
||||
? "text-white text-xl font-bold"
|
||||
: "text-white"
|
||||
}`}
|
||||
className={`mx-4 ${platform === OS
|
||||
? "text-white text-xl font-bold"
|
||||
: "text-white"
|
||||
}`}
|
||||
>
|
||||
{downloadData[platform].map(
|
||||
(download, index) => (
|
||||
<>
|
||||
{platform ===
|
||||
"windows" && (
|
||||
<div className="flex justify-center">
|
||||
{/* Might not be an actual download, but store page clicked */}
|
||||
<a data-rybbit-event="qsv_pro_download" data-rybbit-prop-platform="Microsoft Store" href="https://apps.microsoft.com/detail/xpffdj3f1jsztf?mode=full">
|
||||
<img
|
||||
src="https://get.microsoft.com/images/en-us%20light.svg"
|
||||
width="200"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-center">
|
||||
{/* Might not be an actual download, but store page clicked */}
|
||||
<a data-rybbit-event="qsv_pro_download" data-rybbit-prop-platform="Microsoft Store" href="https://apps.microsoft.com/detail/xpffdj3f1jsztf?mode=full">
|
||||
<img
|
||||
src="https://get.microsoft.com/images/en-us%20light.svg"
|
||||
width="200"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
<a
|
||||
key={index}
|
||||
href={`https://github.com/dathere/qsv-pro-releases/releases/download/${name}/${download[1]}`} // Replace with actual download path
|
||||
data-rybbit-event="qsv_pro_download"
|
||||
data-rybbit-prop-platform={download[0]}
|
||||
className={`block lg:min-w-96 text-white font-bold py-2 px-4 rounded mt-4 ${
|
||||
platform ===
|
||||
className={`block lg:min-w-96 text-white font-bold py-2 px-4 rounded mt-4 ${platform ===
|
||||
OS
|
||||
? " bg-teal-600 hover:bg-teal-700"
|
||||
: " bg-blue-500 hover:bg-blue-700"
|
||||
}`}
|
||||
? " bg-teal-600 hover:bg-teal-700"
|
||||
: " bg-blue-500 hover:bg-blue-700"
|
||||
}`}
|
||||
download
|
||||
>
|
||||
{download[0]}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
---
|
||||
import "../styles/global.css";
|
||||
import "@fontsource/inter";
|
||||
import "@fontsource/inter/500.css";
|
||||
import "@fontsource/inter/600.css";
|
||||
|
|
@ -7,66 +8,66 @@ import "@fontsource/inter/800.css";
|
|||
import "@fontsource/inter/900.css";
|
||||
|
||||
export interface Props {
|
||||
title: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
const { title } = Astro.props;
|
||||
const rybbitSiteId = "3";
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<!-- Primary Meta Tags -->
|
||||
<title>{title}</title>
|
||||
<meta name="title" content={title} />
|
||||
<meta
|
||||
name="description"
|
||||
content="Transform and upload spreadsheet data to CKAN with our streamlined desktop app, featuring 'recipes' for common data wrangling tasks. Based on the qsv CLI tool."
|
||||
/>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<!-- Primary Meta Tags -->
|
||||
<title>{title}</title>
|
||||
<meta name="title" content={title} />
|
||||
<meta
|
||||
name="description"
|
||||
content="Transform and upload spreadsheet data to CKAN with our streamlined desktop app, featuring 'recipes' for common data wrangling tasks. Based on the qsv CLI tool."
|
||||
/>
|
||||
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://qsvpro.dathere.com" />
|
||||
<meta property="og:title" content={title} />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Transform and upload spreadsheet data to CKAN with our streamlined desktop app, featuring 'recipes' for common data wrangling tasks. Based on the qsv CLI tool."
|
||||
/>
|
||||
<meta property="og:image" content="/sm-preview.jpg" />
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://qsvpro.dathere.com" />
|
||||
<meta property="og:title" content={title} />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Transform and upload spreadsheet data to CKAN with our streamlined desktop app, featuring 'recipes' for common data wrangling tasks. Based on the qsv CLI tool."
|
||||
/>
|
||||
<meta property="og:image" content="/sm-preview.jpg" />
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:url" content="https://qsvpro.dathere.com" />
|
||||
<meta property="twitter:title" content={title} />
|
||||
<meta
|
||||
property="twitter:description"
|
||||
content="Transform and upload spreadsheet data to CKAN with our streamlined desktop app, featuring 'recipes' for common data wrangling tasks. Based on the qsv CLI tool."
|
||||
/>
|
||||
<meta property="twitter:image" content="/sm-preview.jpg" />
|
||||
<script is:inline
|
||||
src="https://mk-analytics.dathere.com/api/script.js"
|
||||
data-site-id={rybbitSiteId}
|
||||
data-session-replay="true"
|
||||
data-track-errors="true"
|
||||
data-web-vitals="true"
|
||||
async
|
||||
defer
|
||||
></script>
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
<style is:global>
|
||||
html {
|
||||
font-family: Inter;
|
||||
background-color: #26272b;
|
||||
overflow-x: hidden;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
<!-- Twitter -->
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:url" content="https://qsvpro.dathere.com" />
|
||||
<meta property="twitter:title" content={title} />
|
||||
<meta
|
||||
property="twitter:description"
|
||||
content="Transform and upload spreadsheet data to CKAN with our streamlined desktop app, featuring 'recipes' for common data wrangling tasks. Based on the qsv CLI tool."
|
||||
/>
|
||||
<meta property="twitter:image" content="/sm-preview.jpg" />
|
||||
<script
|
||||
is:inline
|
||||
src="https://mk-analytics.dathere.com/api/script.js"
|
||||
data-site-id={rybbitSiteId}
|
||||
data-session-replay="true"
|
||||
data-track-errors="true"
|
||||
data-web-vitals="true"
|
||||
async
|
||||
defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
<style is:global>
|
||||
html {
|
||||
font-family: Inter;
|
||||
background-color: #26272b;
|
||||
overflow-x: hidden;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,27 @@
|
|||
@reference "./global.css";
|
||||
|
||||
/* Typography */
|
||||
|
||||
.custom-block-title {
|
||||
@apply text-white text-3xl font-bold tracking-normal;
|
||||
}
|
||||
|
||||
.custom-block-big-title {
|
||||
@apply text-white text-4xl xl:text-5xl font-bold tracking-normal;
|
||||
}
|
||||
|
||||
.custom-block-subtitle {
|
||||
@apply text-xs text-customSecondary tracking-wider font-bold uppercase;
|
||||
@apply text-xs text-customSecondary tracking-wider font-bold uppercase;
|
||||
}
|
||||
|
||||
.custom-content-title {
|
||||
@apply text-white text-lg font-bold tracking-normal;
|
||||
}
|
||||
|
||||
.custom-content-text-white {
|
||||
@apply text-white text-base leading-relaxed;
|
||||
}
|
||||
|
||||
.custom-content-text-gray {
|
||||
@apply text-gray-400 text-base;
|
||||
}
|
||||
|
|
@ -22,14 +29,17 @@
|
|||
/* Backgrounds */
|
||||
|
||||
.custom-bg-dark1 {
|
||||
@apply bg-customDarkBg1 fill-customDarkBg1;
|
||||
@apply bg-customDarkBg1 fill-customDarkBg1;
|
||||
}
|
||||
|
||||
.custom-bg-dark2 {
|
||||
@apply bg-customDarkBg2 fill-customDarkBg2;
|
||||
@apply bg-customDarkBg2 fill-customDarkBg2;
|
||||
}
|
||||
|
||||
.custom-bg-dark3 {
|
||||
@apply bg-customDarkBg3 fill-customDarkBg3;
|
||||
@apply bg-customDarkBg3 fill-customDarkBg3;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
@apply bg-customDarkBg2;
|
||||
|
|
@ -38,22 +48,23 @@ html {
|
|||
/* Borders */
|
||||
|
||||
.custom-border-gray {
|
||||
@apply border border-solid border-[rgb(255,255,255,0.15)];
|
||||
@apply border border-solid border-customBorderGray;
|
||||
}
|
||||
|
||||
.custom-border-gray-darker {
|
||||
@apply border border-solid border-[rgb(255,255,255,0.07)];
|
||||
@apply border border-solid border-customBorderGrayDarker;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
|
||||
.custom-button-colored {
|
||||
@apply rounded-lg font-bold bg-customPrimary text-white flex justify-center items-center hover:bg-[rgb(0,142,200)] cursor-pointer transition;
|
||||
@apply rounded-lg font-bold bg-customPrimary text-white flex justify-center items-center hover:bg-customButtonColored cursor-pointer transition;
|
||||
}
|
||||
|
||||
/* Navbar */
|
||||
|
||||
.navbar-link {
|
||||
@apply text-white lg:text-base text-2xl leading-6 mr-4 ml-4 2xl:mr-6 2xl:ml-6 cursor-pointer font-normal lg:font-medium hover:scale-110 transition duration-300 h-full pt-2;
|
||||
@apply text-white lg:text-base text-2xl leading-6 mr-4 ml-4 2xl:mr-6 2xl:ml-6 cursor-pointer font-normal lg:font-medium hover:scale-110 transition duration-300 h-full pt-2;
|
||||
}
|
||||
|
||||
/* Preventing FOUC */
|
||||
|
|
|
|||
19
src/styles/global.css
Normal file
19
src/styles/global.css
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--color-customPrimary: rgb(0, 122, 255);
|
||||
--color-customSecondary: rgb(0, 142, 200);
|
||||
--color-customDarkBg1: rgb(31, 32, 35);
|
||||
--color-customDarkBg2: rgb(38, 39, 43);
|
||||
--color-customDarkBg3: rgb(48, 49, 54);
|
||||
--color-customDarkBg3Hover: rgb(55, 56, 62);
|
||||
--color-customContentSubtitle: rgb(178, 184, 205);
|
||||
--color-customGrayBorder: rgb(255, 255, 255, 0.1);
|
||||
--color-customGrayText: rgb(174, 178, 183);
|
||||
--color-customDarkBgTransparent: rgb(31, 32, 35, 0.7);
|
||||
--color-customDarkBgTransparentDarker: rgb(0, 0, 0, 0.5);
|
||||
--color-customDarkBgTransparentLighter: rgb(48, 49, 54, 0.7);
|
||||
--color-customBorderGray: rgb(255, 255, 255, 0.15);
|
||||
--color-customBorderGrayDarker: rgb(255, 255, 255, 0.07);
|
||||
--color-customButtonColored: rgb(0, 142, 200);
|
||||
}
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
customPrimary: "rgb(0,122,255)",
|
||||
customSecondary: "rgb(0,142,200)",
|
||||
customDarkBg1: "rgb(31, 32, 35)",
|
||||
customDarkBg2: "rgb(38, 39, 43)",
|
||||
customDarkBg3: "rgb(48, 49, 54)",
|
||||
customDarkBg3Hover: "rgb(55, 56, 62)",
|
||||
customContentSubtitle: "rgb(178, 184, 205)",
|
||||
customGrayBorder: "rgb(255,255,255,0.1)",
|
||||
customGrayText: "rgb(174, 178, 183)",
|
||||
customDarkBgTransparent: "rgb(31, 32, 35, 0.7)",
|
||||
customDarkBgTransparentDarker: "rgb(0,0,0,0.5)",
|
||||
customDarkBgTransparentLighter: "rgb(48, 49, 54, 0.7)",
|
||||
},
|
||||
fontFamily: {
|
||||
Inter: "Inter",
|
||||
},
|
||||
screens: {
|
||||
xs: "530px",
|
||||
sm: "640px",
|
||||
md: "768px",
|
||||
lg: "1024px",
|
||||
xl: "1280px",
|
||||
xll: "1400px",
|
||||
"2xl": "1536px",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue