0
0
mirror of https://github.com/yude-jp/yude.jp synced 2024-12-23 04:30:11 +09:00

Compare commits

..

9 Commits

Author SHA1 Message Date
c8c40d1257
Remove shadow 2021-05-30 11:30:22 +09:00
e7d9336a3d
Delete margin on top 2021-05-30 11:16:22 +09:00
bb550f8185
Revert "Decrease top margin" and Delete top margin on Footer
This reverts commit ef9e13b66b.
2021-05-30 11:16:10 +09:00
ef9e13b66b
Decrease top margin 2021-05-30 11:14:40 +09:00
3948147d64
Make widget for Public keys listing 2021-05-30 11:13:23 +09:00
d1d057cc84
Make widget for WakaTime 2021-05-30 10:44:57 +09:00
3ff7368f06
Add max-height scale 2021-05-30 10:39:24 +09:00
ca6c94090c
Add translation: "閉じる" 2021-05-30 10:36:21 +09:00
d402ec85c2
Update margin settings 2021-05-30 10:36:03 +09:00
8 changed files with 164 additions and 53 deletions

View File

@ -3,5 +3,6 @@
"source": "Source code",
"tos": "yude.jp Terms of Service",
"yes_playing": "Playing {{playing}}",
"listening": "Listening to {{listening}}"
"listening": "Listening to {{listening}}",
"close": "Close"
}

View File

@ -3,5 +3,6 @@
"source": "ソースコード",
"tos": "yude.jp サービス利用規約",
"yes_playing": "{{playing}} をプレイ中",
"listening": "{{listening}} を再生中"
"listening": "{{listening}} を再生中",
"close": "閉じる"
}

View File

@ -13,7 +13,7 @@ export default function Footer(props) {
return (
<>
<div className="container mx-auto px-6">
<div className="mt-16 flex flex-col items-center">
<div className="flex flex-col items-center">
<div className="sm:w-full text-center py-6">
<p className="text-sm font-bold mb-2">
{footer} / <Link href="https://github.com/yudejp/yude.jp"><a className="hover:underline">{source}</a></Link>

View File

@ -25,7 +25,9 @@ const Layout = (props) => {
<main>
<Navbar />
<div className="max-w-2xl mx-auto">
<div className="mx-2">
{children}
</div>
</div>
<Footer />
</main>

View File

@ -0,0 +1,91 @@
import React, { useState, useEffect } from 'react';
import useTranslation from 'next-translate/useTranslation'
import { faKey, faEye, faDownload } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { useRouter } from 'next/router'
import Link from 'next/link'
export default function Modal() {
const [showModal, setShowModal] = React.useState(false);
const router = useRouter()
const { t, lang } = useTranslation("common")
const { locale, locales, defaultLocale, pathname } = router
const close = t('common:close')
const keys = t('profile:keys')
const view = t('profile:view')
const fingerprint = t('profile:fingerprint')
const download = t('profile:download')
return (
<>
<button
className="bg-pink-600 text-white active:bg-pink-600 font-bold text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
type="button"
onClick={() => setShowModal(true)}
>
<FontAwesomeIcon icon={faKey} className="w-5 h-5 inline"/> {keys}
</button>
{showModal ? (
<>
<div
className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none"
>
<div className="relative mx-auto w-4/5 max-h-1/2 -mt-96 max-w-3xl">
{/* Modal content */}
<div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
{/* Modal body */}
<div className="relative p-2 flex-auto text-black text-left">
<p className="text-2xl"><FontAwesomeIcon icon={faKey} className="w-5 h-5 inline"/> {keys}</p>
<ul className="list-disc my-2">
<li>
<span className="font-bold">PGP&nbsp;</span>
<Link href="/static/yudejp.gpg">
<a className="hover:underline">
<FontAwesomeIcon icon={faDownload} className="w-5 h-5 inline"/>&nbsp;
{download}
</a>
</Link>
<p>{fingerprint}:</p>
<div className="overflow-x-auto">
<div className="whitespace-nowrap">
<code>3745 F270 DB4E 8975 6B07 62BE EB0F E5D9 25C4 A968</code>
</div>
</div>
</li>
<li>
<span className="font-bold">SSH&nbsp;</span>
<Link href="https://github.com/yude.keys">
<a className="hover:underline">
<FontAwesomeIcon icon={faEye} className="w-5 h-5 inline"/>&nbsp;
{view}
</a>
</Link>
<p>{fingerprint}:</p>
<div className="overflow-x-auto">
<div className="whitespace-nowrap">
<code>2048 SHA256:xwSL4DORWmroWdC6P0GU1m1yZl/cXqjo9rCCWqqO+Dc</code>
</div>
</div>
</li>
</ul>
</div>
{/* Modal footer for close button */}
<div className="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b">
<button
className="text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
type="button"
onClick={() => setShowModal(false)}
>
{close}
</button>
</div>
</div>
</div>
</div>
</>
) : null}
</>
);
}

View File

@ -0,0 +1,51 @@
import React, { useState, useEffect } from 'react';
import useTranslation from 'next-translate/useTranslation'
import { faUserClock } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { useRouter } from 'next/router'
export default function Modal() {
const [showModal, setShowModal] = React.useState(false);
const router = useRouter()
const { locale, locales, defaultLocale, pathname } = router
const { t, lang } = useTranslation("common")
const close = t('common:close')
return (
<>
<button
className="bg-pink-600 text-white active:bg-pink-600 font-bold text-sm px-6 py-3 rounded hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
type="button"
onClick={() => setShowModal(true)}
>
<FontAwesomeIcon icon={faUserClock} className="w-5 h-5 inline"/> WakaTime
</button>
{showModal ? (
<>
<div
className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none"
>
<div className="relative mx-auto w-4/5 max-h-1/2 -mt-96 max-w-3xl">
{/* Modal content */}
<div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
{/* Modal body */}
<div className="relative p-2 flex-auto">
<figure><embed src="https://wakatime.com/share/@yude/6f15075a-b9d5-464a-8b4f-545d31933dfb.svg"></embed></figure>
</div>
{/* Modal footer for close button */}
<div className="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b">
<button
className="text-red-500 font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
type="button"
onClick={() => setShowModal(false)}
>
{close}
</button>
</div>
</div>
</div>
</div>
</>
) : null}
</>
);
}

View File

@ -1,7 +1,7 @@
import Layout from "./components/Layout"
import useTranslation from 'next-translate/useTranslation'
import { faDiscord, faTwitter, faGithub, faKeybase, faInstagram, faMastodon, faSteam } from '@fortawesome/free-brands-svg-icons'
import { faEnvelope, faBirthdayCake, faMapPin, faSchool, faPhone, faInfo, faKey, faDownload, faEye, faUserClock } from '@fortawesome/free-solid-svg-icons'
import { faEnvelope, faBirthdayCake, faMapPin, faSchool, faPhone, faInfo } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import Link from 'next/link'
import Image from 'next/image'
@ -9,6 +9,8 @@ import DiscordStatus from './components/DiscordStatus'
import { useRouter } from 'next/router'
import DiscordPlaying from './components/DiscordPlaying'
import Spotify from './components/Spotify'
import WakaTime from './components/WakaTime'
import PublicKeys from './components/PublicKeys'
export default function About(props) {
const router = useRouter()
@ -27,10 +29,6 @@ export default function About(props) {
const grade = t('grade')
const icon_1 = t('icon_1')
const icon_2 = t('icon_2')
const keys = t('keys')
const download = t('download')
const fingerprint = t('fingerprint')
const view = t('view')
return (
@ -160,51 +158,11 @@ export default function About(props) {
</div>
{
// Keys
// Buttons
}
<div className="text-left my-6">
<p className="text-2xl"><FontAwesomeIcon icon={faKey} className="w-5 h-5 inline"/> {keys}</p>
<ul className="list-disc my-2">
<li>
<span className="font-bold">GPG&nbsp;</span>
<Link href="/static/yudejp.gpg">
<a className="hover:underline">
<FontAwesomeIcon icon={faDownload} className="w-5 h-5 inline"/>&nbsp;
{download}
</a>
</Link>
<p>{fingerprint}:</p>
<div className="overflow-x-auto">
<div className="whitespace-nowrap">
3745 F270 DB4E 8975 6B07 62BE EB0F E5D9 25C4 A968
</div>
</div>
</li>
<li>
<span className="font-bold">SSH&nbsp;</span>
<Link href="https://github.com/yude.keys">
<a className="hover:underline">
<FontAwesomeIcon icon={faEye} className="w-5 h-5 inline"/>&nbsp;
{view}
</a>
</Link>
<p>{fingerprint}:</p>
<div className="overflow-x-auto">
<div className="whitespace-nowrap">
2048 SHA256:xwSL4DORWmroWdC6P0GU1m1yZl/cXqjo9rCCWqqO+Dc
</div>
</div>
</li>
</ul>
</div>
{
// WakaTime
}
<div className="text-left my-6">
<p className="text-2xl"><FontAwesomeIcon icon={faUserClock} className="w-5 h-5 inline"/> WakaTime</p>
<figure className="max-w-2xl"><embed src="https://wakatime.com/share/@yude/6f15075a-b9d5-464a-8b4f-545d31933dfb.svg"></embed></figure>
<figure className="max-w-2xl"><embed src="https://wakatime.com/share/@yude/a8c52934-488b-4bdd-aed1-4f3fc73eb78e.svg"></embed></figure>
<div className="text-center my-6 space-x-5">
<WakaTime />
<PublicKeys />
</div>
<div>
</div>

View File

@ -8,7 +8,14 @@ module.exports = {
"16/9": [16, 9],
"4/3": [4, 3],
"21/9": [21, 9]
},
},
maxHeight: {
'0': '0',
'1/4': '25%',
'1/2': '50%',
'3/4': '75%',
'full': '100%',
},
filter: { // defaults to {}
'none': 'none',
'grayscale': 'grayscale(1)',