Gnarwhal/motto
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases 1 Packages Wiki Activity Actions

Embeautification

Browse source
This commit is contained in:
Gnarwhal 2024-09-23 07:02:42 +00:00
parent e62fcd18d6
commit 3b4d483c4b
Signed by: Gnarwhal
GPG key ID: 0989A73D8C421174
11 changed files with 284 additions and 113 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/app/[...file]/components/copied_image_dark.svg Normal file
View file

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="512"
height="512"
viewBox="0 0 135.46666 135.46667"
version="1.1"
id="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1" />
<path
id="rect1"
style="fill:#b454ea;fill-opacity:1;stroke-width:4.28002"
d="M 112.71619,29.347314 54.337221,87.726278 22.750479,56.139537 l -9.196537,9.196536 31.586742,31.586739 9.196537,9.196538 9.196536,-9.196538 58.378963,-58.378961 z" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 593 B

18
src/app/[...file]/components/copied_image_light.svg Normal file
View file

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="512"
height="512"
viewBox="0 0 135.46666 135.46667"
version="1.1"
id="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1" />
<path
id="rect1"
style="fill:#9834d4;fill-opacity:1;stroke-width:4.28002"
d="M 112.71619,29.347314 54.337221,87.726278 22.750479,56.139537 l -9.196537,9.196536 31.586742,31.586739 9.196537,9.196538 9.196536,-9.196538 58.378963,-58.378961 z" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 593 B

74
src/app/[...file]/components/copy.css.ts
View file

@ -3,19 +3,83 @@ import { style } from '@vanilla-extract/css';
import * as colors from '../../colors.css';
export const copy = style({
display: 'block',
display: 'flex',
alignItems: 'center',
width: 'max-content',
backgroundColor: colors.background,
});
export const copy_button = style({
display: 'flex',
margin: 0,
border: 'none',
padding: '0',
padding: 0,
outline: 'inherit',
fontFamily: 'monospace',
fontSize: '1.1em',
lineHeight: '2em',
background: 'none',
color: 'inherit',
transition: 'color 0.15s',
whiteSpace: 'pre-wrap',
transition: 'background-color 0.35s',
background: 'none',
width: 'max-content',
height: '100%',
':hover': {
color: colors.accent,
backgroundColor: colors.background2,
},
});
const copy_image = style({
boxSizing: 'border-box',
border: `1px solid ${colors.background2}`,
padding: '0.75em',
width: 'auto',
height: '100%',
selectors: {
[`${copy}:hover &`]: {
},
},
});
export const copy_image_dark = style([copy_image, {
display: 'block',
'@media': {
'(prefers-color-scheme: light)': {
display: 'none',
},
},
}]);
export const copy_image_light = style([copy_image, {
display: 'none',
'@media': {
'(prefers-color-scheme: light)': {
display: 'block',
},
},
}]);
export const copied_image_dark = style([copy_image, {
display: 'block',
'@media': {
'(prefers-color-scheme: light)': {
display: 'none',
},
},
}]);
export const copied_image_light = style([copy_image, {
display: 'none',
'@media': {
'(prefers-color-scheme: light)': {
display: 'block',
},
},
}]);
export const copy_text = style({
margin: 0,
marginLeft: '1em',
width: 'max-content',
});

39
src/app/[...file]/components/copy.tsx
View file

@ -1,11 +1,16 @@
'use client'
import { useState } from 'react';
import Image from 'next/image';
import * as style from './copy.css';
import copy_image_dark from './copy_image_dark.svg';
import copy_image_light from './copy_image_light.svg';
import copied_image_dark from './copied_image_dark.svg';
import copied_image_light from './copied_image_light.svg';
export default function Copy({ className, text, children }: { className?: string, text: string, children?: React.ReactNode }) {
const [copied, set_copied ] = useState(false);
export default function Copy({ className, text, show_text }: { className?: string, text: string, show_text?: boolean }) {
const [copied, set_copied] = useState(false);
function make_copy_text(text: string) {
return () => {
navigator.clipboard.writeText(text);
@ -13,5 +18,33 @@ export default function Copy({ className, text, children }: { className?: string
setTimeout(() => { set_copied(false); }, 2000);
};
}
return <button onClick={make_copy_text(text)} className={`${style.copy} ${className ?? ''}`}>{copied ? '[ Copied ]' : '[ Copy ]'} {children}</button>
return <div className={`${style.copy} ${className ?? ''}`}>
<button onClick={make_copy_text(text)} className={`${style.copy_button}`}>
{copied ? <>
<Image
className={style.copied_image_dark}
src={copied_image_dark}
alt="Copied"
/>
<Image
className={style.copied_image_light}
src={copied_image_light}
alt="Copied"
/>
</> :
<>
<Image
className={style.copy_image_dark}
src={copy_image_dark}
alt="Copy"
/>
<Image
className={style.copy_image_light}
src={copy_image_light}
alt="Copy"
/>
</>}
</button>
{show_text ? <p className={style.copy_text}>{text}</p> : <></>}
</div>;
}

25
src/app/[...file]/components/copy_image_dark.svg Normal file
View file

@ -0,0 +1,25 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="512"
height="512"
viewBox="0 0 135.46666 135.46667"
version="1.1"
id="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1" />
<g
id="layer1">
<path
id="rect2"
style="fill:#f0f0f0;fill-opacity:1;stroke-width:3.3485"
d="m 21.474141,39.977921 v 9.251632 64.762967 9.25164 h 9.252148 46.258675 9.252148 v -9.25164 -9.25214 h -9.252148 v 9.25214 H 30.726289 V 49.229553 h 9.251632 v -9.251632 h -9.251632 z" />
<path
id="rect2-1"
style="fill:#f0f0f0;fill-opacity:1;stroke-width:3.3485"
d="m 49.229553,12.22251 v 9.251631 74.014603 h 9.252148 55.510819 V 86.237112 21.474141 16.848584 12.22251 H 58.481701 Z m 9.252148,9.251631 H 104.74038 V 86.237112 H 58.481701 Z" />
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 934 B

25
src/app/[...file]/components/copy_image_light.svg Normal file
View file

@ -0,0 +1,25 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="512"
height="512"
viewBox="0 0 135.46666 135.46667"
version="1.1"
id="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1" />
<g
id="layer1">
<path
id="rect2"
style="fill:#171717;fill-opacity:1;stroke-width:3.3485"
d="m 21.474141,39.977921 v 9.251632 64.762967 9.25164 h 9.252148 46.258675 9.252148 v -9.25164 -9.25214 h -9.252148 v 9.25214 H 30.726289 V 49.229553 h 9.251632 v -9.251632 h -9.251632 z" />
<path
id="rect2-1"
style="fill:#171717;fill-opacity:1;stroke-width:3.3485"
d="m 49.229553,12.22251 v 9.251631 74.014603 h 9.252148 55.510819 V 86.237112 21.474141 16.848584 12.22251 H 58.481701 Z m 9.252148,9.251631 H 104.74038 V 86.237112 H 58.481701 Z" />
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 934 B

6
src/app/[...file]/components/types/markdown.css.ts
View file

@ -14,4 +14,10 @@ export const code_bounds = style({
export const copy = style({
position: 'absolute',
right: 0,
height: '5em',
'@media': {
'screen and (max-width: 768px)': {
width: '3em',
}
}
});

80
src/app/[...file]/download_dark.svg
View file

@ -7,60 +7,48 @@
viewBox="0 0 135.46666 135.46667"
version="1.1"
id="svg1"
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
sodipodi:docname="download.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#222222"
borderopacity="1"
inkscape:showpageshadow="2"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="false"
inkscape:deskcolor="#3d3d3d"
inkscape:document-units="px"
inkscape:zoom="1.6531383"
inkscape:cx="271.90707"
inkscape:cy="288.23964"
inkscape:window-width="2560"
inkscape:window-height="1403"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs1" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
id="layer1"
transform="matrix(0.85941469,0,0,0.85941469,9.5223114,9.5223114)">
<rect
style="fill:#f0f0f0;fill-opacity:1;stroke:none;stroke-width:0.830298;stroke-dasharray:none;stroke-opacity:1"
id="rect4"
width="60.391628"
height="11.312016"
x="66.7099"
y="19.924133"
transform="rotate(45)" />
<rect
style="fill:#f0f0f0;fill-opacity:1;stroke:none;stroke-width:0.830298;stroke-dasharray:none;stroke-opacity:1"
id="rect4-3"
width="60.391628"
height="11.312016"
x="-29.155479"
y="-127.10163"
transform="rotate(135)" />
<rect
style="fill:#f0f0f0;fill-opacity:1;stroke:none;stroke-width:0.977747;stroke-dasharray:none;stroke-opacity:1"
style="fill:#f0f0f0;fill-opacity:1;stroke:none;stroke-width:0.86752;stroke-dasharray:none;stroke-opacity:1"
id="rect4-3-2"
width="83.745499"
width="65.927635"
height="11.312016"
x="22.514505"
y="-73.397362"
x="15.364706"
y="-73.389343"
transform="rotate(90)" />
<path
id="rect4-3-2-8"
style="fill:#f0f0f0;fill-opacity:1;stroke:none;stroke-width:0.748136;stroke-dasharray:none;stroke-opacity:1"
d="M 94.404613,46.399197 67.733515,73.070294 41.062052,46.398832 l -7.998771,7.998771 26.671463,26.671463 7.998771,7.998767 7.998771,-7.998767 26.671094,-26.671098 z" />
<rect
style="fill:#f0f0f0;fill-opacity:1;stroke:none;stroke-width:1.09344;stroke-dasharray:none;stroke-opacity:1"
id="rect4-3-2-9"
width="104.73725"
height="11.312016"
x="-120.10196"
y="-120.10195"
transform="scale(-1)" />
<rect
style="fill:#f0f0f0;fill-opacity:1;stroke:none;stroke-width:0.697454;stroke-dasharray:none;stroke-opacity:1"
id="rect4-3-2-5"
width="42.612877"
height="11.312016"
x="77.489075"
y="-26.676722"
transform="rotate(90)" />
<rect
style="fill:#f0f0f0;fill-opacity:1;stroke:none;stroke-width:0.697454;stroke-dasharray:none;stroke-opacity:1"
id="rect4-3-2-5-0"
width="42.612877"
height="11.312016"
x="77.489082"
y="-120.10196"
transform="rotate(90)" />
</g>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

80
src/app/[...file]/download_light.svg
View file

@ -7,60 +7,48 @@
viewBox="0 0 135.46666 135.46667"
version="1.1"
id="svg1"
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
sodipodi:docname="download.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#222222"
borderopacity="1"
inkscape:showpageshadow="2"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="false"
inkscape:deskcolor="#3d3d3d"
inkscape:document-units="px"
inkscape:zoom="1.6531383"
inkscape:cx="271.90707"
inkscape:cy="288.23964"
inkscape:window-width="2560"
inkscape:window-height="1403"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs1" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
id="layer1"
transform="matrix(0.85941469,0,0,0.85941469,9.5223114,9.5223114)">
<rect
style="fill:#171717;fill-opacity:1;stroke:none;stroke-width:0.830298;stroke-dasharray:none;stroke-opacity:1"
id="rect4"
width="60.391628"
height="11.312016"
x="66.7099"
y="19.924133"
transform="rotate(45)" />
<rect
style="fill:#171717;fill-opacity:1;stroke:none;stroke-width:0.830298;stroke-dasharray:none;stroke-opacity:1"
id="rect4-3"
width="60.391628"
height="11.312016"
x="-29.155479"
y="-127.10163"
transform="rotate(135)" />
<rect
style="fill:#171717;fill-opacity:1;stroke:none;stroke-width:0.977747;stroke-dasharray:none;stroke-opacity:1"
style="fill:#171717;fill-opacity:1;stroke:none;stroke-width:0.86752;stroke-dasharray:none;stroke-opacity:1"
id="rect4-3-2"
width="83.745499"
width="65.927635"
height="11.312016"
x="22.514505"
y="-73.397362"
x="15.364706"
y="-73.389343"
transform="rotate(90)" />
<path
id="rect4-3-2-8"
style="fill:#171717;fill-opacity:1;stroke:none;stroke-width:0.748136;stroke-dasharray:none;stroke-opacity:1"
d="M 94.404613,46.399197 67.733515,73.070294 41.062052,46.398832 l -7.998771,7.998771 26.671463,26.671463 7.998771,7.998767 7.998771,-7.998767 26.671094,-26.671098 z" />
<rect
style="fill:#171717;fill-opacity:1;stroke:none;stroke-width:1.09344;stroke-dasharray:none;stroke-opacity:1"
id="rect4-3-2-9"
width="104.73725"
height="11.312016"
x="-120.10196"
y="-120.10195"
transform="scale(-1)" />
<rect
style="fill:#171717;fill-opacity:1;stroke:none;stroke-width:0.697454;stroke-dasharray:none;stroke-opacity:1"
id="rect4-3-2-5"
width="42.612877"
height="11.312016"
x="77.489075"
y="-26.676722"
transform="rotate(90)" />
<rect
style="fill:#171717;fill-opacity:1;stroke:none;stroke-width:0.697454;stroke-dasharray:none;stroke-opacity:1"
id="rect4-3-2-5-0"
width="42.612877"
height="11.312016"
x="77.489082"
y="-120.10196"
transform="rotate(90)" />
</g>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

10
src/app/[...file]/page.css.ts
View file

@ -12,12 +12,13 @@ export const root = style({
export const center = style({
boxSizing: 'border-box',
width: '100%',
maxWidth: '90em',
height: 'max-content',
padding: '2em',
});
export const title_group = style({
marginBottom: '1em',
marginBottom: '0.5em',
width: '100%',
height: '3.5em',
display: 'flex',
@ -102,8 +103,13 @@ export const download_tty_group = style({
margin: 0,
marginBottom: '1em',
borderBottom: `1px solid ${colors.background2}`,
paddingBottom: '1em',
paddingBottom: '0.5em',
},
},
});
export const download_tty = style({
padding: '0.25em 0',
height: '3em',
})

2
src/app/[...file]/page.tsx
View file

@ -67,7 +67,7 @@ export default async function Page({
</button>
</div>
<div className={style.download_tty_group}>
{download_ttys.map((text, index) => <Copy key={index} text={text}>{text}</Copy>)}
{download_ttys.map((text, index) => <Copy key={index} className={style.download_tty} text={text} show_text={true}></Copy>)}
</div>
{(!enable_repointing && searchParams['root'] != undefined) ?
<p>Error: this instance of Motto does not have repointing enabled</p> :