Skip to content

Commit e6df450

Browse files
rick-nurick-nu
authored
Add production task and add save button to the generated task file (#4)
* Add production task and add save button to the generated task file * Style inputs * Disalbe font ligatures * Update task binary
1 parent 17cf94f commit e6df450

File tree

12 files changed

+193
-44
lines changed

12 files changed

+193
-44
lines changed

‎Taskfile

Lines changed: 27 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,18 @@
11
#!/bin/bash
2-
set -eo pipefail
3-
42
# =========================================================
53
# Taskfile gives you a set of quick tasks for your project
6-
# More info: https://enri.se/taskfile
4+
# More info: https://github.com/Enrise/Taskfile
75
# =========================================================
86

9-
PATH=./node_modules/.bin:$PATH
7+
function banner {
8+
echo -e "${BLUE}\n"\
9+
"████████╗ █████╗ ███████╗██╗ ██╗███████╗██╗██╗ ███████╗\n"\
10+
"╚══██╔══╝██╔══██╗██╔════╝██║ ██╔╝██╔════╝██║██║ ██╔════╝\n"\
11+
" ██║ ███████║███████╗█████╔╝ █████╗ ██║██║ █████╗ \n"\
12+
" ██║ ██╔══██║╚════██║██╔═██╗ ██╔══╝ ██║██║ ██╔══╝ \n"\
13+
" ██║ ██║ ██║███████║██║ ██╗██║ ██║███████╗███████╗\n"\
14+
" ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚═╝ ╚═╝╚══════╝╚══════╝${RESET}"
15+
}
1016

1117
# =========================================================
1218
## Project
@@ -56,9 +62,18 @@ function task:prettify { ## Prettify all files
5662
# =========================================================
5763

5864
function task:start { ## Start development mode
65+
title "Run project in development mode"
5966
npm run dev
6067
}
6168

69+
function task:production { ## Build and run production output
70+
title "Build production application"
71+
npm run build
72+
title "Run production container"
73+
echo -e "Production: ${BLUE}http://localhost:3089${RESET}\n"
74+
docker run --rm --publish 3089:80 --name tasksite --volume ./out:/var/www nstapelbroek/static-webserver:5
75+
}
76+
6277
# =========================================================
6378
## Automation
6479
# =========================================================
@@ -72,24 +87,20 @@ function task:pre-commit { ## Clean up code before committing
7287
## Taskfile
7388
# =========================================================
7489

90+
set -eo pipefail
91+
7592
BLUE=$(printf '\033[36m')
7693
YELLOW=$(printf '\033[33m')
94+
RED=$(printf '\033[31m')
95+
GREEN=$(printf '\033[32m')
7796
RESET=$(printf '\033[0m')
7897

98+
PATH=./node_modules/.bin:$PATH
99+
79100
function title {
80101
echo -e "\n${BLUE}=>${RESET} $1\n"
81102
}
82103

83-
function banner {
84-
echo ""
85-
echo "████████╗ █████╗ ███████╗██╗ ██╗███████╗██╗██╗ ███████╗"
86-
echo "╚══██╔══╝██╔══██╗██╔════╝██║ ██╔╝██╔════╝██║██║ ██╔════╝"
87-
echo " ██║ ███████║███████╗█████╔╝ █████╗ ██║██║ █████╗"
88-
echo " ██║ ██╔══██║╚════██║██╔═██╗ ██╔══╝ ██║██║ ██╔══╝"
89-
echo " ██║ ██║ ██║███████║██║ ██╗██║ ██║███████╗███████╗"
90-
echo " ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚═╝ ╚═╝╚══════╝╚══════╝"
91-
}
92-
93104
function task:help { ## Show all available tasks
94105
title "Available tasks"
95106
awk 'BEGIN {FS = " { [#][#][ ]?"} /^([a-zA-Z_-]*:?.*)(\{ )?[#][#][ ]?/ \
@@ -112,6 +123,6 @@ function task:shorthand { ## Create CLI shorthand task instead of ./Taskfile
112123
echo -e "${BLUE}You can now use:${RESET} task ${YELLOW}<task>${RESET} <args>"
113124
}
114125

115-
# Execute tasks (defaults to help)
126+
# Execute tasks
116127
banner
117-
"task:${@:-help}"
128+
if [[ "$(declare -fF task:${@-help})" ]]; then task:${@-help}; else task:help; exit 1; fi

‎bin/task

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
11
#!/usr/bin/env bash
2-
set -eo pipefail
3-
42
# =========================================================
53
# Taskfile gives you a set of quick tasks for your project
6-
# More info: https://enri.se/taskfile
4+
# More info: https://github.com/Enrise/Taskfile
75
# =========================================================
86

7+
set -eo pipefail
98
CURRENT_DIR=$(pwd)
109
RED=$(printf '\033[31m')
1110
RESET=$(printf '\033[0m')
1211

1312
while [ -d $CURRENT_DIR ] && [ $CURRENT_DIR != '/' ]; do
14-
if [ -f ./Taskfile ]
13+
if [ -f ./Taskfile ];
1514
then
16-
# Taskfile found, execute the given task
1715
./Taskfile $@
1816
exit $?
17+
elif [ -f ./Makefile ]; then
18+
echo -e "${RED}Found a Makefile instead of a Taskfile...${RESET}\n"
19+
make $@
20+
exit $?
1921
else
20-
# Taskfile not found, trying the parent directory
2122
cd ../
2223
CURRENT_DIR=$(pwd)
2324
fi

‎src/app/globals.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
padding: 0;
33
margin: 0;
44
box-sizing: border-box;
5+
font-variant-ligatures: none;
56
}
67

78
body {

‎src/app/layout.tsx

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,34 @@
1-
import type { Metadata } from "next";
1+
import type {Metadata} from "next";
22
import localFont from "next/font/local";
33
import "./globals.css";
44

55
const jetbrainsMono = localFont({
6-
src: "./fonts/JetBrainsMono.ttf",
7-
variable: "--font-code",
8-
weight: "100 900",
6+
src: "./fonts/JetBrainsMono.ttf",
7+
variable: "--font-code",
8+
weight: "100 900",
99
});
1010

1111
const manrope = localFont({
12-
src: "./fonts/Manrope.ttf",
13-
variable: "--font-text",
14-
weight: "100 900",
12+
src: "./fonts/Manrope.ttf",
13+
variable: "--font-text",
14+
weight: "100 900",
1515
});
1616

1717
export const metadata: Metadata = {
18-
title: "Create Next App",
19-
description: "Generated by create next app",
18+
title: "Create Next App",
19+
description: "Generated by create next app",
2020
};
2121

2222
export default function RootLayout({
23-
children,
23+
children,
2424
}: Readonly<{
25-
children: React.ReactNode;
25+
children: React.ReactNode;
2626
}>) {
27-
return (
28-
<html lang="en">
29-
<body className={`${jetbrainsMono.variable} ${manrope.variable}`}>
30-
{children}
31-
</body>
32-
</html>
33-
);
27+
return (
28+
<html lang="en">
29+
<body className={`${jetbrainsMono.variable} ${manrope.variable}`}>
30+
{children}
31+
</body>
32+
</html>
33+
);
3434
}

‎src/components/Form/Radio/radio.module.css

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,64 @@
11
.container {
22

33
}
4+
5+
.options {
6+
display: flex;
7+
flex-direction: row;
8+
gap: 0.5rem;
9+
flex-wrap: wrap;
10+
}
11+
12+
.option {
13+
font-size: 1.1rem;
14+
}
15+
16+
.option input {
17+
position: absolute;
18+
top: 0;
19+
left: 0;
20+
opacity: 0;
21+
}
22+
23+
.option span {
24+
position: relative;
25+
display: block;
26+
padding: 0.3rem 0.5rem 0.3rem 2rem;
27+
background-color: #f0f0f0;
28+
border-radius: 0.2rem;
29+
cursor: pointer;
30+
transition: background-color 500ms;
31+
}
32+
33+
.option span:hover {
34+
background-color: #a1e1aa;
35+
}
36+
37+
.option span::before {
38+
content: '';
39+
background-color: #fff;
40+
width: 1.2rem;
41+
height: 1.2rem;
42+
position: absolute;
43+
top: 50%;
44+
left: 0.4rem;
45+
transform: translateY(-50%);
46+
border-radius: 1rem;
47+
}
48+
49+
.option input:focus + span,
50+
.option input:active + span {
51+
outline: 0.2rem solid #a1e1aa;
52+
}
53+
54+
.option input:checked + span::after {
55+
content: '';
56+
background-color: #2ac93f;
57+
width: 0.8rem;
58+
height: 0.8rem;
59+
position: absolute;
60+
top: 50%;
61+
left: 0.6rem;
62+
transform: translateY(-50%);
63+
border-radius: 1rem;
64+
}

‎src/components/Form/form.module.css

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,19 @@
1010

1111
.input {
1212
display: block;
13+
position: relative;
14+
padding: 0.5rem;
15+
background-color: #f0f0f0;
16+
border-radius: 0.2rem;
17+
border: 0;
18+
width: 100%;
19+
font-size: 1.1rem;
20+
font-family: var(--font-text), sans-serif;
21+
}
22+
23+
.input:focus,
24+
.input:active {
25+
outline: 0.2rem solid #a1e1aa;
1326
}
1427

1528
.error {

‎src/components/Generator/GeneredTaskfile/Copy/Copy.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
'use client';
2+
3+
import {ReactElement, useState} from 'react';
4+
5+
import styles from './copy.module.css';
6+
7+
type CopyProps = {
8+
onCopy: () => void;
9+
}
10+
11+
const CopyToClipboard = ({onCopy}: CopyProps): ReactElement => {
12+
const [isCopied, setCopied] = useState(false);
13+
14+
const onClick = () => {
15+
setCopied(true);
16+
onCopy();
17+
18+
setTimeout(() => setCopied(false), 1000);
19+
}
20+
21+
return (
22+
<button type="button" className={`${styles.button} ${isCopied && styles.copied}`} onClick={onClick}>
23+
{isCopied ? 'copied!' : 'copy'}
24+
</button>
25+
)
26+
}
27+
28+
export default CopyToClipboard;

‎src/components/Generator/GeneredTaskfile/Copy/copy.module.css

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
.button {
2+
position: sticky;
3+
top: 0;
4+
float:right;
5+
background-color: #202020;
6+
color: #505050;
7+
border: 0.2rem solid #505050;
8+
padding: 0.5rem 0;
9+
border-radius: 0.2rem;
10+
cursor: pointer;
11+
width: 5rem;
12+
height: 5rem;
13+
font-size: 1rem;
14+
font-weight: 700;
15+
transition: color 500ms, border 500ms;
16+
}
17+
18+
.button:hover {
19+
color: #fff;
20+
border-color: #fff;
21+
}
22+
23+
.copied {
24+
color: #2ac93f !important;
25+
border-color: #2ac93f !important;
26+
}

‎src/components/Generator/GeneredTaskfile/Copy/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export {default} from './Copy';

‎src/components/Generator/GeneredTaskfile/GeneratedTaskfile.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { ReactElement } from 'react';
44
import { taskfile } from '@/components/Generator/GeneredTaskfile/taskfile';
55
import {useFormContext} from "react-hook-form";
66
import {GeneratorSettings} from "@/components/Generator/Generator";
7+
import CopyToClipboard from "@/components/Generator/GeneredTaskfile/Copy";
78

89
const GeneratedTaskfile = (): ReactElement => {
910
const form = useFormContext<GeneratorSettings>();
@@ -12,7 +13,12 @@ const GeneratedTaskfile = (): ReactElement => {
1213

1314
const resultTaskfile = taskfile(settings);
1415

15-
return <pre>{resultTaskfile}</pre>
16+
return (
17+
<>
18+
<CopyToClipboard onCopy={() => navigator.clipboard.writeText(resultTaskfile)} />
19+
<pre>{resultTaskfile}</pre>
20+
</>
21+
);
1622
}
1723

1824
export default GeneratedTaskfile;

0 commit comments

Comments
 (0)