diff --git a/astro.config.mjs b/astro.config.mjs index 2fda26f..5ff9fea 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -1,6 +1,8 @@ -import starlight from '@astrojs/starlight'; -import { defineConfig } from 'astro/config'; -import blog from 'starlight-blog'; +import starlight from '@astrojs/starlight' +import { defineConfig } from 'astro/config' +import blog from 'starlight-blog' + +import tailwind from '@astrojs/tailwind' // https://astro.build/config export default defineConfig({ @@ -8,36 +10,45 @@ export default defineConfig({ blog({ authors: { alex: { - name: 'Alex Kontos', - title: 'Founder', - picture: '/alex.jpg', // Images in the `public` directory are supported. - url: 'https://uk.linkedin.com/in/alex-kontos', - }, + name: 'Alex Kontos', + title: 'Founder', + picture: '/alex.jpg', + url: 'https://www.linkedin.com/in/alex-kontos' + } } }), starlight({ components: { MarkdownContent: 'starlight-blog/overrides/MarkdownContent.astro', Sidebar: 'starlight-blog/overrides/Sidebar.astro', - ThemeSelect: 'starlight-blog/overrides/ThemeSelect.astro', + ThemeSelect: 'starlight-blog/overrides/ThemeSelect.astro' }, + customCss: ['./src/assets/global.scss'], title: 'My Docs', social: { - github: 'https://github.com/withastro/starlight', + github: 'https://github.com/withastro/starlight' }, sidebar: [ { label: 'Guides', items: [ // Each item here is one entry in the navigation menu. - { label: 'Example Guide', link: '/guides/example/' }, - ], + { + label: 'Example Guide', + link: '/guides/example/' + } + ] }, { label: 'Reference', - autogenerate: { directory: 'reference' }, - }, - ], + autogenerate: { + directory: 'reference' + } + } + ] }), - ], -}); + tailwind({ + applyBaseStyles: false + }) + ] +}) diff --git a/bun.lockb b/bun.lockb index 92063df..63bb987 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index 8cea595..2b4da2b 100644 --- a/package.json +++ b/package.json @@ -11,9 +11,12 @@ }, "dependencies": { "@astrojs/starlight": "^0.11.1", + "@astrojs/starlight-tailwind": "^2.0.0", + "@astrojs/tailwind": "^5.0.2", "astro": "^3.2.3", "sharp": "^0.32.5", - "starlight-blog": "^0.4.0" + "starlight-blog": "^0.4.0", + "tailwindcss": "^3.0.24" }, "devDependencies": { "prettier": "^3.0.3", diff --git a/src/assets/global.scss b/src/assets/global.scss new file mode 100644 index 0000000..c52a1ad --- /dev/null +++ b/src/assets/global.scss @@ -0,0 +1,190 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + html, body { + @apply w-full; + } + + @keyframes wobble { + 33% { + transform: translateX(-50px); + } + + 66% { + transform: translateX(50px); + } + } + + @keyframes up { + 0% { + opacity: 0; + } + + 10%, + 90% { + opacity: 1; + } + + 100% { + opacity: 0; + transform: translateY(-1024px); + } + } + + .message { + @apply px-4 py-0.5 rounded-xl border-l-8; + + &.message-note { + @apply bg-azure/10 border-azure; + } + &.message-tip { + @apply bg-turquoise/10 border-turquoise; + } + &.message-caution { + @apply bg-gold/10 border-gold; + } + &.message-danger { + @apply bg-red-400/10 border-red-400; + } + } + + .markdown { + @apply prose font-body font-light prose-deepsea flex max-w-[72ch] flex-col prose-h2:mt-[1.8em] prose-h2:mb-[0.7em] prose-h2:text-2xl lg:prose-h2:text-3xl prose-h3:text-xl lg:prose-h3:text-2xl prose-hr:border-mist prose-hr:border-t-2 prose-headings:font-montserrat prose-pre:rounded-2xl; + + & :not(pre) > code { + @apply rounded-md bg-frost/20 px-2 py-1 font-normal border-[1px] border-indigo/80 before:hidden after:hidden lg:whitespace-nowrap; + } + } + + .sticky-nav { + @media screen and ( min-height: 800px ) { + @apply sticky; + } + } +} + +@layer utilities { + .text-balance { + text-wrap: balance; + } + .text-pretty { + text-wrap: pretty; + } +} + +// algolia +.aa-Autocomplete { + @apply w-[18rem] rounded-full overflow-hidden border-0 bg-white shadow-md transition-all hover:shadow-lg max-lg:hidden; + + .aa-DetachedSearchButton { + @apply border-0 p-2; + + &:focus { + @apply shadow-none; + } + } + + .aa-DetachedSearchButtonPlaceholder { + @apply text-base text-deepsea; + } + + .aa-SubmitIcon { + @apply text-deepsea; + } +} +.aa-InputWrapperPrefix { + @apply justify-center; +} +.aa-Detached { + @apply overflow-auto; +} +.aa-DetachedOverlay { + .aa-DetachedContainer { + @apply rounded-3xl overflow-hidden shadow-2xl bg-white max-xl:top-24; + + .aa-DetachedFormContainer { + @apply border-0 py-3; + + .aa-Form { + @apply rounded-full bg-white shadow-md transition-all hover:shadow-lg border-[1px] border-deepsea/10; + + &:focus-within { + @apply outline-none border-indigo; + } + + .aa-Input { + @apply text-deepsea; + } + + .aa-SubmitButton { + @apply flex justify-center items-center; + + .aa-SubmitIcon { + @apply text-deepsea; + } + } + } + .aa-DetachedCancelButton { + @apply hidden; + } + } + + .aa-Panel { + @apply bg-transparent; + + .aa-GradientBottom { + @apply bg-none; + } + + .aa-List { + @apply flex flex-col gap-2; + + .aa-Item { + @apply text-deepsea bg-crystal/60 rounded-xl; + + .aa-ItemWrapper { + @apply flex items-center gap-2 px-2 py-4; + + .aa-ItemContent { + @apply flex grow items-center gap-2; + + .aa-ItemIcon { + @apply shadow-none bg-transparent border-none text-deepsea bg-opacity-100; + } + + .aa-ItemContentTitle { + @apply text-inherit font-medium text-base; + + mark { + @apply bg-azure text-white; + } + } + + .aa-ItemContentDescription { + @apply text-inherit text-sm; + + mark { + @apply bg-azure text-white; + } + } + } + + .aa-ItemActionButton svg { + @apply text-white; + } + } + + &[aria-selected=true] { + @apply bg-deepblue/90 text-white; + + .aa-ItemWrapper .aa-ItemIcon { + @apply text-white; + } + } + } + } + } + } +} diff --git a/tailwind.config.cjs b/tailwind.config.cjs index d3e7997..ba28ce2 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -1,13 +1,15 @@ const defaultTheme = require('tailwindcss/defaultTheme') +const starlightPlugin = require('@astrojs/starlight-tailwind') /** @type {import('tailwindcss').Config} */ module.exports = { content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], + plugins: [starlightPlugin()], theme: { extend: { fontFamily: { body: [...defaultTheme.fontFamily.sans], - montserrat: ['Montserrat', ...defaultTheme.fontFamily.sans], + montserrat: ['Montserrat', ...defaultTheme.fontFamily.sans] }, colors: { deepsea: '#053361', @@ -62,6 +64,5 @@ module.exports = { } }) } - }, - plugins: [require('@tailwindcss/typography')] + } }