Skip to content

Commit

Permalink
docs: Begin migration to Tailwind (#359)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kroucher
kroucher committed Aug 27, 2022
1 parent 74b5982 commit c039ddb
Show file tree
Hide file tree
Showing 27 changed files with 358 additions and 198 deletions.
5 changes: 5 additions & 0 deletions www/astro.config.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,11 @@ export default defineConfig({
},
}),
],
vite: {
ssr: {
external: ["svgo", "tiny-glob", "image-size", "sharp", "preact"],
},
},
experimental: {
integrations: true,
},
Expand Down
2 changes: 1 addition & 1 deletion www/src/LandingPageComponents/Example/example.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import CodeCard from "../CodeCard/codeCard";
</span>
</div>
<div
class="flex flex-col md:flex-row items-center justify-around w-full border-white px-1 sm:px-6 lg:py-16"
class="flex flex-col md:flex-row items-center justify-center w-full border-white px-1 sm:px-6 lg:py-16 max-w-7xl mx-auto md:space-x-10"
>
<div
class="text-t3-purple-100 text-lg text-center p-4 max-w-3xl flex flex-col items-center justify-center"
Expand Down
8 changes: 4 additions & 4 deletions www/src/LandingPageComponents/Features/features.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ We firmly believe the experience TypeScript provides will help you be a better d

<section>
<div
class="max-w-full mx-auto py-16 px-4 sm:px-6 lg:py-24 lg:px-8 lg:grid lg:grid-cols-3 lg:gap-x-8 text-t3-purple-100"
class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:py-24 lg:px-8 lg:grid lg:grid-cols-3 lg:gap-x-8 xl:gap-x-32 text-t3-purple-100"
>
<div>
<h2 class="text-2xl font-semibold text-t3-purple-100">
Expand Down Expand Up @@ -89,14 +89,14 @@ We firmly believe the experience TypeScript provides will help you be a better d
feature.name === "tRPC"
? `ml-1 text-lg leading-6 font-medium text-t3-purple-200`
: feature.name === "NextAuth"
? `ml-3 text-lg leading-6 font-medium text-t3-purple-200`
: `ml-9 text-lg leading-6 font-medium text-t3-purple-200`
? `ml-3 text-lg md:text-xl leading-6 font-medium text-t3-purple-200`
: `ml-9 text-lg leading-6 md:text-xl font-medium text-t3-purple-200`
}
>
{feature.name}
</p>
</dt>
<dd class="mt-2 ml-9 text-base text-t3-purple-100">
<dd class="mt-2 ml-9 text-sm md:text-base text-t3-purple-100">
{feature.description}
</dd>
</div>
Expand Down
4 changes: 2 additions & 2 deletions www/src/LandingPageComponents/Navbar/mobileMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ const MobileMenu = () => {
<div
className={
$isMobileMenuOpen
? `absolute flex flex-col items-start justify-start -mx-4 w-full mt-1 transform transition-transform duration-300 ease-in-out translate-y-16 z-50 bg-gray-900 shadow shadow-t3-purple-100`
: `absolute flex flex-col transform items-start justify-start w-full transition-transform duration-300 ease-in-out -translate-y-96 z-50 bg-gray-900 shadow shadow-t3-purple-100 `
? `absolute flex flex-col items-start justify-start -mx-4 w-full mt-1 transform transition-transform duration-300 ease-in-out translate-y-16 z-50 bg-gray-900 shadow shadow-t3-purple-100 opacity-100`
: `absolute flex flex-col transform items-start justify-start w-full transition-transform duration-300 ease-in-out -translate-y-96 z-50 bg-gray-900 shadow shadow-t3-purple-100 opacity-0`
}
>
<div className="search-item w-full p-2">
Expand Down
2 changes: 1 addition & 1 deletion www/src/LandingPageComponents/Navbar/mobileMenuButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const MobileMenuButton = () => {
type="button"
aria-pressed={$isMobileMenuOpen ? "true" : "false"}
id="menu-toggle"
className="dark:text-slate-50 "
className="dark:text-slate-50 block md:hidden"
onClick={() => {
MobileMenuState.set(!$isMobileMenuOpen);
}}
Expand Down
28 changes: 14 additions & 14 deletions www/src/LandingPageComponents/Navbar/navbar.astro
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
---
import MobileMenuButton from "./mobileMenuButton";
import MobileMenu from "./mobileMenu";
import Search from "../../components/header/search";
import SidebarToggle from "../../components/header/sidebarToggle";
const currentPage = Astro.url.pathname;
---

<nav
class="flex flex-col relative justify-between items-center mt-3 bg-opacity-50"
class={currentPage === "/"
? `flex flex-col relative justify-between items-center pt-3 z-50 text-slate-50`
: `flex flex-col relative justify-between items-center pt-3 bg-white dark:bg-slate-900 z-50`}
aria-label="Global"
>
<div class="flex items-center justify-between w-full px-6">
Expand All @@ -16,40 +18,38 @@ import Search from "../../components/header/search";
</a>
</div><div class="hidden -space-x-1 md:flex md:ml-10">
<a
class="inline-flex items-center border font-medium relative text-base px-4 py-2 rounded-md text-white border-transparent hover:text-gray-300"
class="inline-flex items-center border font-medium relative text-base px-4 py-2 rounded-md border-transparent text-t3-purple-500 dark:text-t3-purple-300 hover:text-t3-purple-400"
href="/en/introduction"
><span class="">Docs</span>
</a>
<a
class="inline-flex items-center border font-medium relative text-base px-4 py-2 rounded-md text-white border-transparent hover:text-gray-300"
class="inline-flex items-center border font-medium relative text-base px-4 py-2 rounded-md border-transparent text-t3-purple-500 dark:text-t3-purple-300 hover:text-t3-purple-400"
href="/en/faq"
><span class="">FAQ</span>
</a><a
class="inline-flex items-center border font-medium relative text-base px-4 py-2 rounded-md text-white border-transparent hover:text-gray-300"
class="inline-flex items-center border font-medium relative text-base px-4 py-2 rounded-md border-transparent text-t3-purple-500 dark:text-t3-purple-300 hover:text-t3-purple-400"
href="https://github.com/t3-oss/create-t3-app"
target="_blank"
rel="noopener noreferrer"
><span class="">Github</span>
</a><a
class="inline-flex items-center border font-medium relative text-base px-4 py-2 rounded-md text-white border-transparent hover:text-gray-300"
class="inline-flex items-center border font-medium relative text-base px-4 py-2 rounded-md border-transparent text-t3-purple-500 dark:text-t3-purple-300 hover:text-t3-purple-400"
href="https://init.tips"
target="_blank"
rel="noopener noreferrer"
><span class="">T3 Stack</span>
</a>
</div>
</div>
<div class="flex items-center mr-2 md:hidden">
<MobileMenuButton client:load />
<div class="menu-toggle">
<SidebarToggle client:idle />
</div>

<div
class="search-item hidden md:block shadow-md shadow-slate-500 dark:shadow-slate-500/10 rounded-lg"
class="hidden md:block shadow-md shadow-slate-500 dark:shadow-slate-500/10 rounded-lg w-full max-w-xs"
>
<Search client:load />
</div>
</div>
<MobileMenu client:idle />
</nav>

<style>
Expand All @@ -58,15 +58,15 @@ import Search from "../../components/header/search";
--docsearch-logo-color: var(--theme-text);
}

.search-item {
/* .search-item {
display: none;
position: relative;
z-index: 10;
flex-grow: 1;
padding-right: 0.7rem;
display: flex;
max-width: 200px;
}
} */

:global(.search-item > *) {
flex-grow: 1;
Expand Down
8 changes: 7 additions & 1 deletion www/src/components/footer/avatarList.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,13 @@ const additionalContributors = unique.length - recentContributors.length; // lis
</span>
)
}
{unique.length === 0 && <a href={commitsURL}>Contributors</a>}
{
unique.length === 0 && (
<a class="text-slate-900 dark:text-white" href={commitsURL}>
Contributors
</a>
)
}
</div>

<style>
Expand Down
2 changes: 1 addition & 1 deletion www/src/components/footer/footer.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ type Props = {
const { path } = Astro.props as Props;
---

<footer>
<footer class="mt-auto p-8 border-t-2 bg-white dark:bg-slate-900">
<AvatarList path={path} />
</footer>

Expand Down
4 changes: 2 additions & 2 deletions www/src/components/headCommon.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,9 @@ import "../styles/index.css";
theme === "dark" ||
(!theme && window.matchMedia("(prefers-color-scheme: dark)").matches)
) {
root.classList.add("theme-dark");
root.classList.add("dark");
} else {
root.classList.remove("theme-dark");
root.classList.remove("dark");
}
</script>

Expand Down
2 changes: 1 addition & 1 deletion www/src/components/header/header.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const lang = getLanguageFromURL(currentPage);
z-index: 11;
height: var(--theme-navbar-height);
width: 100%;
background-color: var(--theme-navbar-bg);
/* background-color: var(--theme-navbar-bg); */
display: flex;
align-items: center;
justify-content: center;
Expand Down
2 changes: 1 addition & 1 deletion www/src/components/header/languageSelect.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
font-size: 1rem;
font-family: inherit;
line-height: inherit;
background-color: var(--theme-bg);
/* background-color: var(--theme-bg); */
border-color: var(--theme-text-lighter);
color: var(--theme-text-light);
border-style: solid;
Expand Down
115 changes: 43 additions & 72 deletions www/src/components/header/search.css
View file
Original file line number Diff line number Diff line change
@@ -1,76 +1,47 @@
/** Style Algolia */
:root {
--docsearch-primary-color: var(--theme-accent);
--docsearch-logo-color: var(--theme-text);
}
.search-input {
flex-grow: 1;
box-sizing: border-box;
width: 100%;
margin: 0;
padding: 0.33em 0.5em;
overflow: visible;
font-weight: 500;
font-size: 1rem;
font-family: inherit;
line-height: inherit;
background-color: var(--theme-divider);
border-color: var(--theme-divider);
color: var(--theme-text-light);
border-style: solid;
border-width: 1px;
border-radius: 0.25rem;
outline: 0;
cursor: pointer;
transition-timing-function: ease-out;
transition-duration: 0.2s;
transition-property: border-color, color;
-webkit-font-smoothing: antialiased;
}
.search-input:hover,
.search-input:focus {
color: var(--theme-text);
border-color: var(--theme-text-light);
}
.search-input:hover::placeholder,
.search-input:focus::placeholder {
color: var(--theme-text-light);
}
.search-input::placeholder {
color: var(--theme-text-light);
}
.search-hint {
position: absolute;
top: 7px;
right: 19px;
padding: 3px 5px;
display: none;
display: none;
align-items: center;
justify-content: center;
letter-spacing: 0.125em;
font-size: 13px;
font-family: var(--font-mono);
pointer-events: none;
border-color: var(--theme-text-lighter);
color: var(--theme-text-light);
border-style: solid;
border-width: 1px;
border-radius: 0.25rem;
line-height: 14px;
.language-select {
flex-grow: 1;
width: 48px;
box-sizing: border-box;
margin: 0;
padding: 0.33em 0.5em;
overflow: visible;
font-weight: 500;
font-size: 1rem;
font-family: inherit;
line-height: inherit;
/* background-color: var(--theme-bg); */
border-color: var(--theme-text-lighter);
color: var(--theme-text-light);
border-style: solid;
border-width: 1px;
border-radius: 0.25rem;
outline: 0;
cursor: pointer;
transition-timing-function: ease-out;
transition-duration: 0.2s;
transition-property: border-color, color;
-webkit-font-smoothing: antialiased;
padding-left: 30px;
padding-right: 1rem;
}
.language-select-wrapper .language-select:hover,
.language-select-wrapper .language-select:focus {
color: var(--theme-text);
border-color: var(--theme-text-light);
}
.language-select-wrapper {
color: var(--theme-text-light);
position: relative;
}
.language-select-wrapper > svg {
position: absolute;
top: 7px;
left: 10px;
pointer-events: none;
}

@media (min-width: 50em) {
.search-hint {
display: flex;
}
}

/* ------------------------------------------------------------ *\
DocSearch (Algolia)
\* ------------------------------------------------------------ */

.DocSearch-Modal .DocSearch-Hit a {
box-shadow: none;
border: 1px solid var(--theme-accent);
.language-select {
width: 100%;
}
}
6 changes: 3 additions & 3 deletions www/src/components/header/search.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export default function Search() {
type="button"
ref={searchButtonRef}
onClick={onOpen}
className="w-full flex items-center justify-between px-4 py-2 text-sm font-medium text-gray-700 dark:bg-white bg-slate-900 rounded-lg"
className="w-full flex items-center justify-between px-4 py-2 text-sm font-medium dark:text-white text-gray-700 dark:bg-white bg-slate-100 rounded-lg"
>
<div className="flex items-center justify-center text-slate-900 stroke-slate-900">
<svg width="24" height="24" fill="none">
Expand All @@ -63,10 +63,10 @@ export default function Search() {
/>
</svg>

<span className="pl-1 lg:pl-3">Search</span>
<span className="pl-1 lg:pl-3 text-slate-900">Search</span>
</div>

<span className="border px-1 rounded-md border-slate-900">
<span className="border px-1 rounded-md border-slate-900 text-slate-900">
<span className="sr-only">Press </span>

<kbd>/</kbd>
Expand Down
5 changes: 3 additions & 2 deletions www/src/components/header/sidebarToggle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,12 @@ const MenuToggle: FunctionalComponent = () => {
aria-pressed={sidebarShown ? "true" : "false"}
id="menu-toggle"
onClick={() => setSidebarShown(!sidebarShown)}
className="z-20 text-slate-900 stroke-slate-900 block md:hidden dark:text-white"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
width="1.7em"
height="1.7em"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
Expand Down
4 changes: 2 additions & 2 deletions www/src/components/header/skipToContent.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ type Props = {};
z-index: 9;
display: block;
text-align: center;
background-color: var(--theme-text-accent);
color: var(--theme-bg);
/* background-color: var(--theme-text-accent); */
/* color: var(--theme-bg); */
border-radius: 0.25em;
outline: var(--theme-bg) solid 1px;
outline-offset: 0;
Expand Down
Loading

1 comment on commit c039ddb

@vercel
Copy link

@vercel vercel bot commented on c039ddb Aug 27, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

create-t3-app – ./

create-t3-app-nu.vercel.app
create-t3-app-t3-oss.vercel.app
create-t3-app-git-main-t3-oss.vercel.app

Please sign in to comment.