Skip to content

Commit

Permalink
Merge pull request #98 from elsoul/new/typography
Browse files Browse the repository at this point in the history
new typography
  • Loading branch information
KishiTheMechanic authored Nov 27, 2023
2 parents 5a8d405 + 1b0f00e commit 9bd21ce
Show file tree
Hide file tree
Showing 19 changed files with 88 additions and 37 deletions.
2 changes: 1 addition & 1 deletion src/assets/styles/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
@layer base {
html {
font-family:
Outfit,
Inter,
'Noto Sans JP',
ui-sans-serif,
system-ui,
Expand Down
4 changes: 2 additions & 2 deletions src/components/articles/Toc.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default function Toc({ toc, activeItemIds }: Props) {
{toc.length > 0 && (
<>
<div className="p-4">
<p className="text-base font-semibold">{t('toc')}</p>
<p className="text-base font-semibold tracking-tight">{t('toc')}</p>
</div>
<div className="max-w-80 border-l p-4">
<nav className="space-y-1" aria-label="Sidebar">
Expand All @@ -30,7 +30,7 @@ export default function Toc({ toc, activeItemIds }: Props) {
: 'text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-900 dark:hover:text-gray-50',
`block px-3 py-2 text-sm font-medium ml-${
item.depth > 2 ? 3 : 0
}`
}`,
)}
aria-current={
activeItemIds.includes(item.id) ? 'location' : undefined
Expand Down
4 changes: 3 additions & 1 deletion src/components/articles/doc/DocContents.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ export default function DocContents({ article, articleHtml }: Props) {
<Container>
<div className="flex justify-center py-12 lg:gap-12">
<div>
<h1 className="text-4xl font-bold">{article.title}</h1>
<h1 className="text-4xl font-extrabold tracking-tighter">
{article.title}
</h1>

<div className="py-8 xl:hidden">
<ScrollSyncToc rawMarkdownBody={article.content} />
Expand Down
8 changes: 4 additions & 4 deletions src/components/articles/doc/DocIndex.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export default function DocIndex() {
<div className="py-24">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="mx-auto max-w-2xl text-center">
<h2 className="text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-50 sm:text-4xl">
<h2 className="text-4xl font-extrabold tracking-tighter text-gray-900 dark:text-gray-50 sm:text-5xl">
{t('doc:title')}
</h2>
<p className="mt-2 text-lg leading-8 text-gray-600 dark:text-gray-300">
Expand All @@ -53,22 +53,22 @@ export default function DocIndex() {
actionIdx === 1 ? '' : '',
actionIdx === actions.length - 2 ? '' : '',
actionIdx === actions.length - 1 ? '' : '',
'group relative bg-gray-50 p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-gray-500 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700'
'group relative bg-gray-50 p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-gray-500 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700',
)}
>
<div>
<span
className={clsx(
action.iconBackground,
action.iconForeground,
'inline-flex p-3 ring-4 ring-white'
'inline-flex p-3 ring-4 ring-white',
)}
>
<action.icon className="h-6 w-6" aria-hidden="true" />
</span>
</div>
<div className="mt-8">
<h3 className="text-lg font-medium">
<h3 className="text-lg font-bold tracking-tight">
<Link href={action.href} className="focus:outline-none">
<span className="absolute inset-0" aria-hidden="true" />
{t(action.title)}
Expand Down
4 changes: 2 additions & 2 deletions src/components/articles/doc/DocPagination.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default function DocPagination() {
})
.flat()
const currentPageNum = pages.findIndex(
(item) => asPathWithoutLang === item?.href
(item) => asPathWithoutLang === item?.href,
)

return {
Expand Down Expand Up @@ -71,7 +71,7 @@ export default function DocPagination() {
{t('doc:nextPage')}
<ArrowSmallRightIcon className="ml-2 h-3 w-3" />
</p>
<h3 className="text mt-2 text-right font-semibold leading-6 text-gray-900 group-hover:text-gray-600 dark:text-gray-50 dark:group-hover:text-gray-300">
<h3 className="text mt-2 text-right font-semibold leading-6 tracking-tight text-gray-900 group-hover:text-gray-600 dark:text-gray-50 dark:group-hover:text-gray-300">
<span className="absolute inset-0" />
{t(pageInfo.nextPage.name)}
</h3>
Expand Down
4 changes: 3 additions & 1 deletion src/components/articles/legal/LegalContents.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,9 @@ export default function LegalContents({ article, articleHtml }: Props) {
<Container>
<div className="flex justify-center py-12 lg:gap-12">
<div>
<h1 className="text-4xl font-bold">{article.title}</h1>
<h1 className="text-4xl font-extrabold tracking-tighter">
{article.title}
</h1>
<div className="py-8 lg:hidden">
<ScrollSyncToc rawMarkdownBody={article.content} />
</div>
Expand Down
4 changes: 3 additions & 1 deletion src/components/articles/news/NewsContents.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ export default function NewsContents({ article, articleHtml }: Props) {
<Container>
<div className="flex justify-center py-12 lg:grid lg:grid-cols-8 lg:gap-12">
<div className="lg:col-span-5">
<h1 className="text-4xl font-bold">{article.title}</h1>
<h1 className="text-4xl font-extrabold tracking-tighter">
{article.title}
</h1>
<p className="mt-1 text-gray-600 dark:text-gray-200">
{article.date}
</p>
Expand Down
6 changes: 3 additions & 3 deletions src/components/articles/news/NewsIndex.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default function NewsIndex({ articles, urls }: Props) {
<div className="pb-24 sm:pb-32">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<TopNewsRow articles={articles.slice(0, 4)} urls={urls} />
<div className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-y-20 gap-x-8 lg:mx-0 lg:max-w-none lg:grid-cols-3">
<div className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
{articles.slice(4).map((article, index) => (
<article
key={`NewsIndex Article${article.title}`}
Expand All @@ -42,12 +42,12 @@ export default function NewsIndex({ articles, urls }: Props) {
>
{article.date}
</time>
<span className="relative bg-gray-600 py-1.5 px-3 font-medium text-white group-hover:bg-gray-400 dark:bg-gray-400 dark:text-gray-50 dark:group-hover:bg-gray-700">
<span className="relative bg-gray-600 px-3 py-1.5 font-medium text-white group-hover:bg-gray-400 dark:bg-gray-400 dark:text-gray-50 dark:group-hover:bg-gray-700">
{article.category}
</span>
</div>
<div className="relative">
<h3 className="mt-3 text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600 dark:text-gray-50 dark:group-hover:text-gray-300">
<h3 className="mt-3 text-lg font-semibold leading-6 tracking-tight text-gray-900 group-hover:text-gray-600 dark:text-gray-50 dark:group-hover:text-gray-300">
<span className="absolute inset-0" />
{article.title}
</h3>
Expand Down
8 changes: 4 additions & 4 deletions src/components/articles/news/NewsPageIndex.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,11 @@ export default function NewsPageIndex({ articles, urls }: Props) {
<div className="py-24 sm:py-32">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="mx-auto max-w-2xl text-center">
<h1 className="text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-50 sm:text-5xl">
<h1 className="text-5xl font-extrabold tracking-tighter text-gray-900 dark:text-gray-50 sm:text-7xl">
News
</h1>
</div>
<div className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-y-20 gap-x-8 lg:mx-0 lg:max-w-none lg:grid-cols-3">
<div className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
{articles.map((article, index) => (
<article
key={`NewsIndex Article${article.title}`}
Expand All @@ -45,12 +45,12 @@ export default function NewsPageIndex({ articles, urls }: Props) {
>
{article.date}
</time>
<span className="relative bg-gray-600 py-1.5 px-3 font-medium text-white group-hover:bg-gray-400 dark:bg-gray-400 dark:text-gray-50 dark:group-hover:bg-gray-700">
<span className="relative bg-gray-600 px-3 py-1.5 font-medium text-white group-hover:bg-gray-400 dark:bg-gray-400 dark:text-gray-50 dark:group-hover:bg-gray-700">
{article.category}
</span>
</div>
<div className="relative">
<h3 className="mt-3 text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600 dark:text-gray-50 dark:group-hover:text-gray-300">
<h3 className="mt-3 text-lg font-semibold leading-6 tracking-tight text-gray-900 group-hover:text-gray-600 dark:text-gray-50 dark:group-hover:text-gray-300">
<a href={urls[index + 3]}>
<span className="absolute inset-0" />
{article.title}
Expand Down
14 changes: 7 additions & 7 deletions src/components/articles/news/TopNewsRow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,14 @@ export default function TopNewsRow({ articles, urls }: Props) {

return (
<>
<div className="pt-8 pb-24 sm:pt-12 sm:pb-48">
<div className="pb-24 pt-8 sm:pb-48 sm:pt-12">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="mx-auto max-w-2xl text-center">
<h2 className="text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-50 sm:text-5xl">
<h2 className="text-5xl font-extrabold tracking-tighter text-gray-900 dark:text-gray-50 sm:text-7xl">
News
</h2>
</div>
<div className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-y-20 gap-x-8 lg:mx-0 lg:max-w-none lg:grid-cols-2">
<div className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
{articles.slice(0, 1).map((article, index) => (
<article
key={`NewsIndex Article${article.title}`}
Expand All @@ -45,12 +45,12 @@ export default function TopNewsRow({ articles, urls }: Props) {
>
{article.date}
</time>
<span className="relative bg-gray-600 py-1.5 px-3 font-medium text-white group-hover:bg-gray-400 dark:bg-gray-400 dark:text-gray-50 dark:group-hover:bg-gray-700">
<span className="relative bg-gray-600 px-3 py-1.5 font-medium text-white group-hover:bg-gray-400 dark:bg-gray-400 dark:text-gray-50 dark:group-hover:bg-gray-700">
{article.category}
</span>
</div>
<div className="relative">
<h2 className="mt-3 text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600 dark:text-gray-50 dark:group-hover:text-gray-300">
<h2 className="mt-3 text-lg font-semibold leading-6 tracking-tight text-gray-900 group-hover:text-gray-600 dark:text-gray-50 dark:group-hover:text-gray-300">
<a href={urls[index]}>
<span className="absolute inset-0" />
{article.title}
Expand Down Expand Up @@ -89,11 +89,11 @@ export default function TopNewsRow({ articles, urls }: Props) {
>
{article.date}
</time>
<span className="relative bg-gray-600 py-1.5 px-3 font-medium text-white group-hover:bg-gray-400 dark:bg-gray-400 dark:text-gray-50 dark:group-hover:bg-gray-700">
<span className="relative bg-gray-600 px-3 py-1.5 font-medium text-white group-hover:bg-gray-400 dark:bg-gray-400 dark:text-gray-50 dark:group-hover:bg-gray-700">
{article.category}
</span>
</div>
<h2 className="mt-2 text-lg font-semibold text-gray-900 group-hover:text-gray-600 dark:text-gray-50 dark:group-hover:text-gray-300">
<h2 className="mt-2 text-lg font-semibold tracking-tight text-gray-900 group-hover:text-gray-600 dark:text-gray-50 dark:group-hover:text-gray-300">
<span className="absolute inset-0" />
{article.title}
</h2>
Expand Down
10 changes: 5 additions & 5 deletions src/components/pages/common/DiscordRow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,22 +12,22 @@ export default function DiscordRow() {
<>
<Container className="py-48">
<div className="mx-auto max-w-lg bg-discord px-4 py-5 shadow">
<div className="flex flex-row items-center">
<div className="flex flex-row items-center justify-center">
<FontAwesomeIcon
icon={faDiscord}
size="lg"
aria-label="Discord icon"
className="h-9 w-9 text-white"
/>
<h3 className="ml-3 text-2xl font-semibold leading-6 text-white">
<h3 className="ml-3 text-2xl font-bold leading-6 tracking-tight text-white">
{t('DiscordRow.title')}
</h3>
</div>
<div className="ml-12 mt-2 sm:flex sm:items-end sm:justify-between">
<div className="max-w-xl text-sm text-gray-50">
<div className="ml-12 mt-6 sm:mt-3 sm:flex sm:items-end sm:justify-between">
<div className="mr-4 max-w-xl text-sm text-gray-50 sm:mr-0">
<p>{t('DiscordRow.body')}</p>
</div>
<div className="mt-5 text-right sm:ml-6 sm:mt-0 sm:flex sm:flex-shrink-0 sm:items-center">
<div className="mr-2 mt-4 text-right sm:ml-6 sm:mt-0 sm:flex sm:flex-shrink-0 sm:items-end">
<Button
color="white"
href={siteConfig.discordInvitationLink}
Expand Down
15 changes: 13 additions & 2 deletions src/components/pages/home/HeroRow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,28 @@ import tailwindcssLogo from '@/assets/img/logo/projects/tailwindcss.svg'
import typescriptLogo from '@/assets/img/logo/projects/TypeScriptHorizontal.svg'
import Button from '@/components/common/atoms/Button'
import clsx from 'clsx'
import { ChatBubbleBottomCenterIcon } from '@heroicons/react/24/outline'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faGithub } from '@fortawesome/free-brands-svg-icons'

export default function HomeHeroRow() {
const { t } = useTranslation()

return (
<>
<Container className="pb-40 pt-24 text-center lg:pb-64 lg:pt-40">
<h1 className="font-display mx-auto max-w-4xl text-5xl font-bold tracking-tight text-gray-900 dark:text-gray-50 sm:text-7xl">
<h1 className="font-display mx-auto max-w-4xl text-6xl font-extrabold tracking-tighter text-gray-900 dark:text-gray-50 sm:text-8xl">
WebApp Boilerplate
</h1>
<p className="mx-auto mt-6 max-w-2xl text-lg tracking-tight text-gray-700 dark:text-gray-200">
{t('home:HeroRow.body')}
</p>
<div className="mt-10 flex justify-center gap-x-6">
<Button href="/auth/login" className="">
<ChatBubbleBottomCenterIcon
className="mr-2 inline-block h-5 w-5"
aria-hidden="true"
/>
{t('aiChat')}
</Button>
<Button
Expand All @@ -35,6 +42,10 @@ export default function HomeHeroRow() {
target="_blank"
rel="noreferrer"
>
<FontAwesomeIcon
icon={faGithub}
className="mr-2 inline-block h-5 w-5"
/>
GitHub
</Button>
</div>
Expand Down Expand Up @@ -104,7 +115,7 @@ export default function HomeHeroRow() {
'hover:opacity-60 dark:grayscale',
project.name === 'React'
? 'dark:invert-0'
: 'dark:invert'
: 'dark:invert',
)}
width={168}
height={48}
Expand Down
4 changes: 2 additions & 2 deletions src/layouts/common/CommonFooter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export default function CommonFooter() {
<Link
key={`${nav.name} CommonFooter.commonFooterNav`}
href={nav.href ?? ''}
className="text-base font-medium text-gray-700 hover:text-gray-900 dark:text-gray-50 dark:hover:text-gray-200 sm:py-0"
className="text-base font-medium text-gray-700 hover:text-gray-500 dark:text-gray-50 dark:hover:text-gray-200 sm:py-0"
>
{t(nav.name)}
</Link>
Expand Down Expand Up @@ -95,7 +95,7 @@ export default function CommonFooter() {
/>
</a>
</div>
<p className="mt-6 text-sm text-gray-500 sm:mt-0">
<p className="mt-6 text-sm font-medium tracking-tight text-gray-500 sm:mt-0">
&copy; {new Date().getFullYear()} {siteConfig.copyright} All
rights reserved.
</p>
Expand Down
28 changes: 28 additions & 0 deletions src/lib/rehypePlugin.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { visit } from 'unist-util-visit'
import { Plugin } from 'unified'
import { Node, Element } from 'hast'

export const addClassToTitles: Plugin = () => {
return (tree: Node) => {
visit(tree, 'element', (node: Element) => {
if (
node.tagName === 'h1' ||
node.tagName === 'h2' ||
node.tagName === 'h3' ||
node.tagName === 'h4' ||
node.tagName === 'h5' ||
node.tagName === 'h6'
) {
node.properties = node.properties || {}
const existingClasses = Array.isArray(node.properties.className)
? node.properties.className
: []

node.properties.className = [
'font-extrabold tracking-tighter break-word',
...existingClasses,
]
}
})
}
}
2 changes: 2 additions & 0 deletions src/pages/[locale]/doc/[...slug].tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import { getI18nProps } from '@/lib/getStatic'
import DocContents from '@/components/articles/doc/DocContents'
import youtubeTransformer from '@/lib/youtubeTransformer'
import embedder from '@remark-embedder/core'
import { addClassToTitles } from '@/lib/rehypePlugin'

const articleDirName = 'doc'

Expand Down Expand Up @@ -75,6 +76,7 @@ export const getStaticProps: GetStaticProps = async (ctx) => {
})
.use(rehypeCodeTitles)
.use(rehypeHighlight)
.use(addClassToTitles)
.use(rehypeStringify)
.process(article.content as string)

Expand Down
2 changes: 2 additions & 0 deletions src/pages/[locale]/legal/[...slug].tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { getAllArticles, getArticleBySlug } from '@/utils/article'
import DefaultLayout from '@/layouts/default/DefaultLayout'
import { getI18nProps } from '@/lib/getStatic'
import LegalContents from '@/components/articles/legal/LegalContents'
import { addClassToTitles } from '@/lib/rehypePlugin'

const articleDirName = 'legal'

Expand Down Expand Up @@ -70,6 +71,7 @@ export const getStaticProps: GetStaticProps = async (ctx) => {
rel: ['noopener noreferrer'],
})
.use(rehypeHighlight)
.use(addClassToTitles)
.use(rehypeStringify)
.process(article.content as string)

Expand Down
2 changes: 2 additions & 0 deletions src/pages/[locale]/news/[...slug].tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import NewsContents from '@/components/articles/news/NewsContents'
import NewsPageIndex from '@/components/articles/news/NewsPageIndex'
import youtubeTransformer from '@/lib/youtubeTransformer'
import embedder from '@remark-embedder/core'
import { addClassToTitles } from '@/lib/rehypePlugin'

const articleDirName = 'news'

Expand Down Expand Up @@ -82,6 +83,7 @@ export const getStaticProps: GetStaticProps = async (ctx) => {
})
.use(rehypeCodeTitles)
.use(rehypeHighlight)
.use(addClassToTitles)
.use(rehypeStringify)
.process(article.content as string)

Expand Down
Loading

0 comments on commit 9bd21ce

Please sign in to comment.