Skip to content

Commit 7e6eb54

Browse files
authored
Merge pull request #248 from javaistic/dev
Update Site Design, Tweaks & Fixes
2 parents 131c773 + a0a95a1 commit 7e6eb54

File tree

17 files changed

+830
-538
lines changed

17 files changed

+830
-538
lines changed

package.json

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"> 1%"
2121
],
2222
"dependencies": {
23-
"@badrap/bar-of-progress": "^0.1.2",
23+
"@badrap/bar-of-progress": "^0.2.1",
2424
"@docsearch/react": "^1.0.0-alpha.28",
2525
"@formspree/react": "^2.2.5",
2626
"@headlessui/react": "^1.6.1",
@@ -30,32 +30,32 @@
3030
"@mdx-js/react": "^1.6.22",
3131
"@next/bundle-analyzer": "^12.1.6",
3232
"@next/mdx": "^12.1.6",
33-
"@reach/rect": "^0.16.0",
33+
"@reach/rect": "^0.17.0",
3434
"@silvenon/remark-smartypants": "^1.0.0",
35-
"@sindresorhus/slugify": "^1.1.0",
35+
"@sindresorhus/slugify": "^1.1.2",
3636
"@svgr/webpack": "^5.5.0",
3737
"@tailwindcss/jit": "^0.1.18",
3838
"@tailwindcss/typography": "^0.4.1",
3939
"autoprefixer": "^10.4.7",
4040
"babel-plugin-preval": "^5.1.0",
4141
"clsx": "^1.1.1",
4242
"dlv": "^1.1.3",
43-
"file-loader": "^6.0.0",
44-
"focus-visible": "^5.1.0",
43+
"file-loader": "^6.2.0",
44+
"focus-visible": "^5.2.0",
4545
"framer-motion": "^4.1.17",
4646
"front-matter": "^4.0.2",
47-
"glob": "^7.2.0",
47+
"glob": "^7.2.3",
4848
"intersection-observer": "^0.12.0",
4949
"minimatch": "^3.1.2",
5050
"next": "^12.1.6",
51-
"next-themes": "^0.1.1",
51+
"next-themes": "^0.2.0",
5252
"postcss": "^8.4.13",
5353
"postcss-focus-visible": "^5.0.0",
5454
"postcss-import": "^14.1.0",
5555
"postcss-nested": "^5.0.6",
5656
"prismjs": "^1.28.0",
57-
"react": "^17.0.2",
58-
"react-dom": "^17.0.2",
57+
"react": "^18.1.0",
58+
"react-dom": "^18.1.0",
5959
"react-intersection-observer": "^8.34.0",
6060
"redent": "^3.0.0",
6161
"sharp": "^0.30.4",
@@ -65,20 +65,20 @@
6565
"unist-util-visit": "^2.0.3"
6666
},
6767
"devDependencies": {
68-
"@babel/core": "^7.17.10",
69-
"@babel/plugin-transform-react-jsx": "^7.17.3",
70-
"@types/react": "^17.0.44",
71-
"@typescript-eslint/eslint-plugin": "^5.23.0",
72-
"@typescript-eslint/parser": "^5.23.0",
73-
"babel-eslint": "10.1.0",
74-
"eslint": "8.11.0",
68+
"@babel/core": "^7.17.12",
69+
"@babel/plugin-transform-react-jsx": "^7.17.12",
70+
"@types/react": "^18.0.9",
71+
"@typescript-eslint/eslint-plugin": "^5.25.0",
72+
"@typescript-eslint/parser": "^5.25.0",
73+
"babel-eslint": "^10.1.0",
74+
"eslint": "^8.15.0",
7575
"eslint-config-next": "^12.1.6",
7676
"eslint-config-react-app": "^7.0.1",
7777
"eslint-import-resolver-typescript": "^2.7.1",
7878
"eslint-plugin-flowtype": "8.0.3",
79-
"eslint-plugin-import": "2.25.4",
79+
"eslint-plugin-import": "2.26.0",
8080
"prettier": "^2.6.2",
81-
"prettier-plugin-tailwindcss": "^0.1.10",
81+
"prettier-plugin-tailwindcss": "^0.1.11",
8282
"typescript": "^4.6.4",
8383
"webpack": "^5.72.1"
8484
}

src/components/Header.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export function Header({ navIsOpen, onNavToggle }) {
3131
<MenuButton />
3232
<a
3333
href="https://github.com/javaistic/javaistic"
34-
className="text-gray-400 transition-colors duration-200 hover:text-gray-600 dark:hover:text-gray-200"
34+
className="hidden text-gray-400 transition-colors duration-200 hover:text-gray-600 dark:hover:text-gray-200 sm:flex"
3535
>
3636
<span className="sr-only">Javaistic on GitHub</span>
3737
<svg className="h-6 w-6" viewBox="0 0 16 16" fill="currentColor">

src/components/Heading.js

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { useEffect, useContext, useRef } from 'react'
2-
import { ContentsContext } from '@/layouts/ContentsLayout'
31
import { useTop } from '@/hooks/useTop'
2+
import { ContentsContext } from '@/layouts/ContentsLayout'
43
import clsx from 'clsx'
4+
import { useContext, useEffect, useRef } from 'react'
55

66
export function Heading({
77
level,
@@ -40,12 +40,23 @@ export function Heading({
4040
>
4141
{!hidden && (
4242
// eslint-disable-next-line
43+
4344
<a
4445
href={`#${id}`}
45-
className="after:hash absolute opacity-0 group-hover:opacity-100"
46-
style={{ marginLeft: '-1em', paddingRight: '0.5em', boxShadow: 'none', color: '#a1a1aa' }}
46+
className="absolute -ml-7 mt-1 flex items-center border-0 opacity-0 group-hover:opacity-100"
4747
aria-label="Anchor"
48-
/>
48+
>
49+
<div className="flex h-6 w-6 items-center justify-center rounded-md text-gray-400 shadow-sm ring-1 ring-gray-500 hover:text-gray-700 hover:shadow hover:ring-blue-500 dark:bg-gray-700 dark:text-gray-300 dark:shadow-none dark:ring-0">
50+
<svg width="12" height="12" fill="none" aria-hidden="true">
51+
<path
52+
d="M3.75 1v10M8.25 1v10M1 3.75h10M1 8.25h10"
53+
stroke="currentColor"
54+
strokeWidth="1.5"
55+
strokeLinecap="round"
56+
></path>
57+
</svg>
58+
</div>
59+
</a>
4960
)}
5061
{number && (
5162
<span className="mr-3 inline-flex h-8 w-8 flex-none items-center justify-center rounded-full bg-cyan-100 text-xl text-blue-700">
@@ -54,7 +65,7 @@ export function Heading({
5465
)}
5566
<span className={hidden ? 'sr-only' : undefined}>{children}</span>
5667
{badge && (
57-
<span className="bg-green-150 ml-3 inline-flex items-center rounded-full px-3 py-1 text-sm font-medium leading-4 text-green-900">
68+
<span className="ml-3 inline-flex items-center rounded-full bg-green-100 px-3 py-1 text-sm font-medium leading-4 text-green-900">
5869
{badge}
5970
</span>
6071
)}

src/components/Search.js

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import { useState, useCallback, useRef, useEffect } from 'react'
2-
import { createPortal } from 'react-dom'
3-
import Link from 'next/link'
1+
import { DocSearchModal, useDocSearchKeyboardEvents } from '@docsearch/react'
2+
import { SearchIcon } from '@heroicons/react/outline'
43
import Head from 'next/head'
4+
import Link from 'next/link'
55
import { useRouter } from 'next/router'
6-
import { DocSearchModal, useDocSearchKeyboardEvents } from '@docsearch/react'
6+
import { useCallback, useEffect, useRef, useState } from 'react'
7+
import { createPortal } from 'react-dom'
78

89
const ACTION_KEY_DEFAULT = ['Ctrl ', 'Control']
910
const ACTION_KEY_APPLE = ['⌘', 'Command']
@@ -70,20 +71,7 @@ export function Search() {
7071
onClick={onOpen}
7172
className="group flex w-full items-center space-x-3 rounded-md border-2 border-gray-200 bg-gray-100 py-1.5 px-1.5 font-medium leading-6 text-gray-500 hover:text-gray-600 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 sm:space-x-4 sm:px-4 lg:px-4"
7273
>
73-
<svg
74-
width="24"
75-
height="24"
76-
fill="none"
77-
className="text-blue-400 transition-colors duration-200 group-hover:text-blue-500"
78-
>
79-
<path
80-
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
81-
stroke="currentColor"
82-
strokeWidth="2"
83-
strokeLinecap="round"
84-
strokeLinejoin="round"
85-
/>
86-
</svg>
74+
<SearchIcon className="h-6 w-6 text-blue-400 transition-colors duration-200 group-hover:text-blue-500" />
8775
<span>
8876
<span className="md:hidden lg:hidden">Search</span>
8977
<span className="hidden sm:inline">Quick search for anything</span>

src/components/Testimonials.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -108,12 +108,12 @@ function Testimonial({ testimonial, base, index, total }) {
108108
initial={false}
109109
animate={straight ? { rotate: 0 } : { rotate: rotation[index % rotation.length] }}
110110
>
111-
<blockquote className="rounded-t-xl bg-white px-6 py-8 text-lg font-semibold leading-8 text-gray-900 md:p-10 md:text-xl md:leading-8">
111+
<blockquote className="rounded-t-xl bg-white px-6 py-8 text-lg font-semibold leading-8 text-gray-900 dark:bg-gray-800 md:p-10 md:text-xl md:leading-8">
112112
<svg width="45" height="36" className={`mb-5 fill-current ${color[1]}`}>
113113
<path d="M13.415.001C6.07 5.185.887 13.681.887 23.041c0 7.632 4.608 12.096 9.936 12.096 5.04 0 8.784-4.032 8.784-8.784 0-4.752-3.312-8.208-7.632-8.208-.864 0-2.016.144-2.304.288.72-4.896 5.328-10.656 9.936-13.536L13.415.001zm24.768 0c-7.2 5.184-12.384 13.68-12.384 23.04 0 7.632 4.608 12.096 9.936 12.096 4.896 0 8.784-4.032 8.784-8.784 0-4.752-3.456-8.208-7.776-8.208-.864 0-1.872.144-2.16.288.72-4.896 5.184-10.656 9.792-13.536L38.183.001z" />
114114
</svg>
115115
{typeof testimonial.content === 'string' ? (
116-
<p className="text-gray-900 dark:text-gray-900">{testimonial.content}</p>
116+
<p className="text-gray-900 dark:text-gray-300">{testimonial.content}</p>
117117
) : (
118118
testimonial.content
119119
)}
@@ -189,7 +189,7 @@ export function Testimonials() {
189189
onMouseLeave={() => setDuration(150)}
190190
>
191191
<div
192-
className="pointer-events-none absolute right-0 bottom-1/2 left-0 bg-gradient-to-t from-gray-100 dark:from-gray-800"
192+
className="pointer-events-none absolute right-0 bottom-1/2 left-0 bg-gradient-to-t from-gray-100 dark:from-gray-900"
193193
style={{ height: 607, maxHeight: '50vh' }}
194194
/>
195195
<div className="-my-8 flex overflow-hidden">

src/components/home/Features.js

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,17 @@ const OpenSourceImage = () => {
5454
export function Features() {
5555
return (
5656
<section className="font-sans">
57-
<div className="container mx-auto py-24 sm:px-10 md:flex-row">
57+
<div className="px-10 sm:px-10 md:px-12">
58+
<h1 className="mt-5 mb-4 text-center text-5xl font-extrabold text-gray-900 sm:text-7xl">
59+
Why Javaistic?
60+
</h1>
61+
<div className="mb-2 items-center justify-center space-y-5 text-center">
62+
<p className="mx-auto text-lg font-medium dark:text-gray-400 sm:w-1/2">
63+
Our docs are designed to make learning Java easy and fun.
64+
</p>
65+
</div>
66+
</div>
67+
<div className="container mx-auto py-14 sm:px-10 md:flex-row">
5868
<div className="mx-auto mb-10 flex flex-col items-center py-10 sm:flex-row">
5969
<div className="mb-10 w-5/6 md:mb-0 md:w-1/2 lg:w-full lg:max-w-lg">
6070
<DocsImage />

src/components/home/Footer.js

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export function Footer() {
5959
</h2>
6060
<ul className="space-y-4">
6161
{footerNav[section].items.map((item) => (
62-
<li key={item.href}>
62+
<li key={item.title}>
6363
<Link href={item.href}>
6464
<a className="text-base text-gray-500 transition duration-200 ease-in-out hover:font-semibold hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">
6565
{item.title}
@@ -120,33 +120,34 @@ export function Footer() {
120120
</a>
121121
</span>
122122
</div>
123-
<div className="container mx-auto mb-0 flex flex-col items-center px-5 py-2 sm:flex-row">
123+
<div className="container mx-auto mb-0 flex flex-col items-center py-2 sm:flex-row">
124124
<div className="title-font flex items-center justify-center font-medium text-gray-900 md:justify-start">
125125
<p className="mt-2 text-sm text-gray-500">
126126
&copy; {new Date().getFullYear()} Javaistic. All rights reserved.
127127
</p>
128128
</div>
129-
<div className="flex items-center"></div>
130-
<a
131-
href="#"
132-
className="title-font flex items-center justify-center pl-6 font-medium text-gray-900 md:justify-start"
133-
>
134-
<p className="mt-2 text-sm text-gray-500">Privacy Policy</p>
135-
</a>
136-
<a
137-
href="#"
138-
className="title-font flex items-center justify-center pl-6 font-medium text-gray-900 md:justify-start"
139-
>
140-
<p className="mt-2 text-sm text-gray-500">Terms &amp; Conditions</p>
141-
</a>
142-
<a
143-
href="https://javaistic.betteruptime.com"
144-
className="title-font flex items-center justify-center pl-6 font-medium text-gray-900 md:justify-start"
145-
>
146-
<p className="mt-2 text-sm text-gray-500 hover:text-black dark:hover:text-white">
147-
Status
148-
</p>
149-
</a>
129+
<div className="flex items-center">
130+
<a
131+
href="#"
132+
className="title-font flex items-center justify-center pl-6 font-medium text-gray-900 md:justify-start"
133+
>
134+
<p className="mt-2 text-sm text-gray-500">Privacy Policy</p>
135+
</a>
136+
<Link href="/terms-and-conditions">
137+
<a className="title-font flex items-center justify-center pl-6 font-medium md:justify-start">
138+
<p className="mt-2 text-sm text-gray-500 hover:text-black dark:hover:text-white">
139+
Terms &amp; Conditions
140+
</p>
141+
</a>
142+
</Link>
143+
<Link href="/status">
144+
<a className="title-font flex items-center justify-center pl-6 font-medium text-gray-900 md:justify-start">
145+
<p className="mt-2 text-sm text-gray-500 hover:text-black dark:hover:text-white">
146+
Status
147+
</p>
148+
</a>
149+
</Link>
150+
</div>
150151
<div className="mt-4 inline-flex justify-center sm:ml-auto sm:mt-0 sm:justify-start">
151152
<MadeInBadge />
152153
</div>

0 commit comments

Comments
 (0)