mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-07-03 13:06:37 -04:00
lucide icons
This commit is contained in:
@ -50,12 +50,6 @@
|
||||
background-color: var(--colors-link);
|
||||
}
|
||||
|
||||
.submitIcon {
|
||||
font-size: 1.3em;
|
||||
margin-right: 0.3em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.result {
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
@ -73,5 +67,4 @@
|
||||
width: 1.3em;
|
||||
height: 1.3em;
|
||||
vertical-align: -0.3em;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
@ -4,10 +4,9 @@ import { useActionState } from "react";
|
||||
import TextareaAutosize from "react-textarea-autosize";
|
||||
import Turnstile from "react-turnstile";
|
||||
import clsx from "clsx";
|
||||
import { CheckIcon, XIcon } from "lucide-react";
|
||||
import Link from "../../components/Link";
|
||||
import { sendMessage } from "./actions";
|
||||
import { GoCheck, GoX } from "react-icons/go";
|
||||
import { SiMarkdown } from "react-icons/si";
|
||||
|
||||
import styles from "./form.module.css";
|
||||
|
||||
@ -56,7 +55,13 @@ const ContactForm = () => {
|
||||
lineHeight: 1.75,
|
||||
}}
|
||||
>
|
||||
<SiMarkdown
|
||||
<svg
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
strokeWidth="0"
|
||||
viewBox="0 0 24 24"
|
||||
height="1.25em"
|
||||
width="1.25em"
|
||||
style={{
|
||||
display: "inline",
|
||||
width: "1.25em",
|
||||
@ -64,7 +69,10 @@ const ContactForm = () => {
|
||||
verticalAlign: "-0.25em",
|
||||
marginRight: "0.25em",
|
||||
}}
|
||||
/>{" "}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M22.27 19.385H1.73A1.73 1.73 0 010 17.655V6.345a1.73 1.73 0 011.73-1.73h20.54A1.73 1.73 0 0124 6.345v11.308a1.73 1.73 0 01-1.73 1.731zM5.769 15.923v-4.5l2.308 2.885 2.307-2.885v4.5h2.308V8.078h-2.308l-2.307 2.885-2.308-2.885H3.46v7.847zM21.232 12h-2.309V8.077h-2.307V12h-2.308l3.461 4.039z"></path>
|
||||
</svg>{" "}
|
||||
Basic{" "}
|
||||
<Link href="https://commonmark.org/help/" title="Markdown reference sheet" style={{ fontWeight: 600 }}>
|
||||
Markdown syntax
|
||||
@ -87,15 +95,27 @@ const ContactForm = () => {
|
||||
<span>Sending...</span>
|
||||
) : (
|
||||
<>
|
||||
<span className={styles.submitIcon}>📤</span> <span>Send</span>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "1.3em",
|
||||
marginRight: "0.3em",
|
||||
lineHeight: "1",
|
||||
}}
|
||||
>
|
||||
📤
|
||||
</span>{" "}
|
||||
<span>Send</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{formState?.message && (
|
||||
<div className={clsx(styles.result, formState?.success ? styles.success : styles.error)}>
|
||||
{formState?.success ? <GoCheck className={styles.resultIcon} /> : <GoX className={styles.resultIcon} />}{" "}
|
||||
{formState?.success ? (
|
||||
<CheckIcon size="1.3em" className={styles.resultIcon} />
|
||||
) : (
|
||||
<XIcon size="1.3em" className={styles.resultIcon} />
|
||||
)}{" "}
|
||||
{formState?.message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { Suspense } from "react";
|
||||
import { ErrorBoundary } from "react-error-boundary";
|
||||
import { CalendarIcon, TagIcon, SquarePenIcon, EyeIcon } from "lucide-react";
|
||||
import Link from "../../../components/Link";
|
||||
import Time from "../../../components/Time";
|
||||
import Comments from "../../../components/Comments";
|
||||
@ -8,7 +9,6 @@ import HitCounter from "./counter";
|
||||
import { getPostSlugs, getFrontMatter } from "../../../lib/helpers/posts";
|
||||
import { metadata as defaultMetadata } from "../../layout";
|
||||
import config from "../../../lib/config/constants";
|
||||
import { FiCalendar, FiTag, FiEdit, FiEye } from "react-icons/fi";
|
||||
import type { Metadata, Route } from "next";
|
||||
import type { Article, WithContext } from "schema-dts";
|
||||
|
||||
@ -85,14 +85,14 @@ export default async function Page({ params }: { params: Promise<{ slug: string
|
||||
<div className={styles.meta}>
|
||||
<div className={styles.metaItem}>
|
||||
<Link href={`/notes/${frontmatter.slug}` as Route} plain className={styles.metaLink}>
|
||||
<FiCalendar className={styles.metaIcon} />
|
||||
<CalendarIcon size="1.2em" className={styles.metaIcon} />
|
||||
<Time date={frontmatter.date} format="MMMM D, YYYY" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{frontmatter.tags && (
|
||||
<div className={styles.metaItem}>
|
||||
<FiTag className={styles.metaIcon} />
|
||||
<TagIcon size="1.2em" className={styles.metaIcon} />
|
||||
<span className={styles.metaTags}>
|
||||
{frontmatter.tags.map((tag) => (
|
||||
<span key={tag} title={tag} className={styles.metaTag} aria-label={`Tagged with ${tag}`}>
|
||||
@ -110,7 +110,7 @@ export default async function Page({ params }: { params: Promise<{ slug: string
|
||||
plain
|
||||
className={styles.metaLink}
|
||||
>
|
||||
<FiEdit className={styles.metaIcon} />
|
||||
<SquarePenIcon size="1.2em" className={styles.metaIcon} />
|
||||
<span>Improve This Post</span>
|
||||
</Link>
|
||||
</div>
|
||||
@ -126,7 +126,7 @@ export default async function Page({ params }: { params: Promise<{ slug: string
|
||||
marginRight: 0,
|
||||
}}
|
||||
>
|
||||
<FiEye className={styles.metaIcon} />
|
||||
<EyeIcon size="1.2em" className={styles.metaIcon} />
|
||||
<Suspense fallback={<Loading boxes={3} width={20} />}>
|
||||
<HitCounter slug={`notes/${frontmatter.slug}`} />
|
||||
</Suspense>
|
||||
|
||||
10
app/page.tsx
10
app/page.tsx
@ -1,6 +1,6 @@
|
||||
import hash from "@emotion/hash";
|
||||
import { rgba } from "polished";
|
||||
import { GoLock } from "react-icons/go";
|
||||
import { LockIcon } from "lucide-react";
|
||||
import UnstyledLink from "../components/Link";
|
||||
import type { ComponentPropsWithoutRef } from "react";
|
||||
import type { Route } from "next";
|
||||
@ -249,13 +249,7 @@ export default function Page() {
|
||||
plain
|
||||
openInNewTab
|
||||
>
|
||||
<GoLock
|
||||
size="1.25em"
|
||||
style={{
|
||||
verticalAlign: "-0.25em",
|
||||
strokeWidth: 0.5,
|
||||
}}
|
||||
/>{" "}
|
||||
<LockIcon size="1.25em" style={{ verticalAlign: "-0.25em" }} />{" "}
|
||||
<span
|
||||
style={{
|
||||
margin: "0 0.15em",
|
||||
|
||||
@ -71,22 +71,20 @@ export default async function Page() {
|
||||
<p style={{ textAlign: "center", fontSize: "0.95em", margin: "0.5em 0" }}>
|
||||
<Link href="/y2k">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
strokeWidth="0"
|
||||
viewBox="0 0 24 24"
|
||||
role="img"
|
||||
height="1.2em"
|
||||
width="1.2em"
|
||||
style={{
|
||||
display: "inline",
|
||||
width: "1.2em",
|
||||
height: "1.2em",
|
||||
verticalAlign: "-0.15em",
|
||||
marginRight: "0.1em",
|
||||
fill: "currentColor",
|
||||
stroke: "currentcolor",
|
||||
strokeWidth: 0,
|
||||
}}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M5.712 1.596l-.756.068-.238.55.734-.017zm1.39.927l-.978.137-.326.807.96-.12.345-.824zM4.89 3.535l-.72.05-.24.567.721-.017zm3.724.309l-1.287.068-.394.96 1.27-.052zm1.87.566l-1.579.069-.566 1.357 1.596-.088.548-1.338zm-4.188.037l-.977.153-.343.806.976-.12zm6.144.668l-1.87.135-.637 1.527 1.87-.154zm2.925.219c-.11 0-.222 0-.334.002l-.767 1.85c1.394-.03 2.52.089 3.373.38l-1.748 4.201c-.955-.304-2.082-.444-3.36-.394l-.54 1.305a8.762 8.762 0 0 1 3.365.396l-1.663 4.014c-1.257-.27-2.382-.395-3.387-.344l-.782 1.887c3.363-.446 6.348.822 9.009 3.773L24 9.23c-2.325-2.575-5.2-3.88-8.637-3.896zm-.644.002l-2.024.12-.687 1.68 2.025-.19zm-10.603.05l-.719.036-.224.566h.703l.24-.601zm3.69.397l-1.287.069-.395.959 1.27-.05zM5.54 6.3l-.994.154-.344.807.98-.121zm4.137.066l-1.58.069L7.53 7.77l1.596-.085.55-1.32zm1.955.688l-1.87.135-.636 1.527 1.887-.154zm2.282.19l-2.01.136-.7 1.682 2.04-.19.67-1.63zm-10.57.066l-.739.035-.238.564h.72l.257-.6zm3.705.293l-1.303.085-.394.96 1.287-.034zm11.839.255a6.718 6.718 0 0 1 2.777 1.717l-1.75 4.237c-.617-.584-1.15-.961-1.611-1.149l-1.201-.498zM4.733 8.22l-.976.154-.344.807.961-.12.36-.841zm4.186 0l-1.594.052-.549 1.354L8.37 9.54zm1.957.668L8.99 9.04l-.619 1.508 1.87-.135.636-1.527zm2.247.275l-2.007.12-.703 1.665 2.042-.156zM2.52 9.267l-.718.033-.24.549.718-.016zm3.725.273l-1.289.07-.41.96 1.287-.03.412-1zm1.87.6l-1.596.05-.55 1.356 1.598-.084.547-1.322zm-4.186.037l-.979.136-.324.805.96-.119zm6.14.633l-1.87.154-.653 1.527 1.906-.154zm2.267.275l-2.026.12-.686 1.663 2.025-.172zm-10.569.031l-.739.037-.238.565.72-.016zm3.673.362l-1.289.068-.41.978 1.305-.05zm-2.285.533l-.976.154-.326.805.96-.12.342-.84zm4.153.07l-1.596.066-.565 1.356 1.612-.084zm1.957.666l-1.889.154-.617 1.526 1.886-.15zm2.28.223l-2.025.12-.685 1.665 2.041-.172.67-1.613zm-10.584.05l-.738.053L0 13.64l.72-.02.24-.6zm3.705.31l-1.285.07-.395.976 1.287-.05.393-.997zm11.923.07c1.08.29 2.024.821 2.814 1.613l-1.715 4.183c-.892-.754-1.82-1.32-2.814-1.664l1.715-4.133zm-10.036.515L4.956 14l-.549 1.32 1.578-.066.567-1.338zm-4.184.014l-.996.156-.309.79.961-.106zm6.14.67l-1.904.154-.617 1.527 1.89-.154.632-1.527zm2.231.324l-2.025.123-.686 1.682 2.026-.174zm-6.863.328l-1.3.068-.397.98 1.285-.054zm1.871.584l-1.578.068-.566 1.334 1.595-.064zm1.953.701l-1.867.137-.635 1.51 1.87-.137zm2.23.31l-2.005.122-.703 1.68 2.04-.19.67-1.61z"></path>
|
||||
</svg>{" "}
|
||||
|
||||
@ -52,11 +52,10 @@
|
||||
|
||||
.card .metaIcon {
|
||||
display: inline;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: -0.3em;
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
vertical-align: -0.25em;
|
||||
margin-right: 0.5em;
|
||||
stroke-width: 0.75;
|
||||
}
|
||||
|
||||
.card .metaLanguage {
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
import { graphql } from "@octokit/graphql";
|
||||
import { GitForkIcon, StarIcon } from "lucide-react";
|
||||
import PageTitle from "../../components/PageTitle";
|
||||
import Link from "../../components/Link";
|
||||
import RelativeTime from "../../components/RelativeTime";
|
||||
import commaNumber from "comma-number";
|
||||
import config from "../../lib/config/constants";
|
||||
import { metadata as defaultMetadata } from "../layout";
|
||||
import { GoStar, GoRepoForked } from "react-icons/go";
|
||||
import { SiGithub } from "react-icons/si";
|
||||
import type { Metadata } from "next";
|
||||
import type { User, Repository } from "@octokit/graphql-schema";
|
||||
|
||||
@ -144,7 +143,7 @@ export default async function Page() {
|
||||
plain
|
||||
className={styles.metaLink}
|
||||
>
|
||||
<GoStar className={styles.metaIcon} />
|
||||
<StarIcon size="1.25em" className={styles.metaIcon} />
|
||||
{commaNumber(repo.stars)}
|
||||
</Link>
|
||||
</div>
|
||||
@ -159,7 +158,7 @@ export default async function Page() {
|
||||
plain
|
||||
className={styles.metaLink}
|
||||
>
|
||||
<GoRepoForked className={styles.metaIcon} />
|
||||
<GitForkIcon size="1.25em" className={styles.metaIcon} />
|
||||
{commaNumber(repo.forks)}
|
||||
</Link>
|
||||
</div>
|
||||
@ -183,7 +182,11 @@ export default async function Page() {
|
||||
>
|
||||
<Link href={`https://github.com/${config.authorSocial.github}`}>
|
||||
View more on{" "}
|
||||
<SiGithub
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
height="1.2em"
|
||||
width="1.2em"
|
||||
style={{
|
||||
display: "inline",
|
||||
width: "1.2em",
|
||||
@ -192,7 +195,9 @@ export default async function Page() {
|
||||
margin: "0 0.15em",
|
||||
fill: "var(--colors-text)",
|
||||
}}
|
||||
/>{" "}
|
||||
>
|
||||
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path>
|
||||
</svg>{" "}
|
||||
GitHub...
|
||||
</Link>
|
||||
</p>
|
||||
|
||||
Reference in New Issue
Block a user