mirror of https://github.com/MaxLeiter/Drift
Convert card from geist, badge style improvements
Max Leiter
3 years ago
parent
3bebb6ac7d
commit
bff7c90e5f
@ -1,109 +0,0 @@
|
||||
.fileTreeWrapper {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.fileTreeWrapper h5 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fileTree {
|
||||
list-style: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fileTree li {
|
||||
transition: var(--transition);
|
||||
border-radius: var(--radius);
|
||||
margin: 0;
|
||||
padding: var(--gap-half) 0;
|
||||
}
|
||||
|
||||
.fileTree li a {
|
||||
margin: 0px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: var(--gap-half);
|
||||
}
|
||||
|
||||
.fileTree li:hover,
|
||||
.fileTree li:focus,
|
||||
.fileTree li:active {
|
||||
background: var(--lighter-gray);
|
||||
}
|
||||
|
||||
.fileTree li .fileTreeIcon {
|
||||
display: inline-block;
|
||||
padding-right: var(--gap-half);
|
||||
padding-left: var(--gap-half);
|
||||
}
|
||||
|
||||
.fileTree li .fileTreeTitle {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.fileTree li::before {
|
||||
content: "";
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
top: 0;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.cardContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: var(--gap-half);
|
||||
padding-top: 200px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 82rem) {
|
||||
.fileTreeWrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-top: var(--gap);
|
||||
}
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cardContent {
|
||||
margin: var(--gap);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.fileTree {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fileTree li {
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.fileTree li .fileTreeIcon {
|
||||
margin-right: var(--gap-half);
|
||||
}
|
||||
|
||||
.fileTree li .fileTreeTitle {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.fileTree li::before {
|
||||
content: "";
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@ -1,71 +0,0 @@
|
||||
import { File } from "@lib/server/prisma"
|
||||
import FileIcon from "@geist-ui/icons/fileText"
|
||||
import CodeIcon from "@geist-ui/icons/fileLambda"
|
||||
import styles from "./file-tree.module.css"
|
||||
import ShiftBy from "@components/shift-by"
|
||||
import { useEffect, useState } from "react"
|
||||
import { codeFileExtensions } from "@lib/constants"
|
||||
import Link from "@components/link"
|
||||
|
||||
type Item = File & {
|
||||
icon: JSX.Element
|
||||
}
|
||||
|
||||
const Card = ({
|
||||
children,
|
||||
className,
|
||||
...props
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
className?: string
|
||||
} & React.ComponentProps<"div">) => (
|
||||
<div className={styles.card} {...props}>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
|
||||
const FileTree = ({ files }: { files: File[] }) => {
|
||||
const [items, setItems] = useState<Item[]>([])
|
||||
useEffect(() => {
|
||||
const newItems = files.map((file) => {
|
||||
const extension = file.title.split(".").pop()
|
||||
if (codeFileExtensions.includes(extension || "")) {
|
||||
return {
|
||||
...file,
|
||||
icon: <CodeIcon />
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
...file,
|
||||
icon: <FileIcon />
|
||||
}
|
||||
}
|
||||
})
|
||||
setItems(newItems)
|
||||
}, [files])
|
||||
|
||||
// a list of files with an icon and a title
|
||||
return (
|
||||
<div className={styles.fileTreeWrapper}>
|
||||
<Card className={styles.card}>
|
||||
<div className={styles.cardContent}>
|
||||
<h4>Files</h4>
|
||||
<ul className={styles.fileTree}>
|
||||
{items.map(({ id, title, icon }) => (
|
||||
<li key={id}>
|
||||
<Link href={`#${title}`}>
|
||||
<ShiftBy y={5}>
|
||||
<span className={styles.fileTreeIcon}>{icon}</span>
|
||||
</ShiftBy>
|
||||
<span className={styles.fileTreeTitle}>{title}</span>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default FileTree
|
||||
@ -0,0 +1,15 @@
|
||||
.card {
|
||||
background: var(--bg);
|
||||
border-radius: var(--radius);
|
||||
color: var(--fg);
|
||||
border: 1px solid var(--light-gray);
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
.card .content {
|
||||
padding: var(--gap);
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
import styles from "./card.module.css"
|
||||
|
||||
export default function Card({
|
||||
children,
|
||||
className,
|
||||
...props
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
className?: string
|
||||
} & React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div className={`${styles.card} ${className}`} {...props}>
|
||||
<div className={styles.content}>{children}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,34 @@
|
||||
services:
|
||||
drift:
|
||||
build:
|
||||
context: ./
|
||||
container_name: drift
|
||||
restart: unless-stopped
|
||||
user: 1000:1000
|
||||
environment:
|
||||
- WELCOME_CONTENT="## Drift is a self-hostable clone of GitHub Gist. \nIt is a simple way to share code and text snippets with your friends, with support for the following:\n \n - Render GitHub Extended Markdown (including images)\n - User authentication\n - Private, public, and password protected posts\n - Markdown is rendered and stored on the server\n - Syntax highlighting and automatic language detection\n - Drag-and-drop file uploading\n\n If you want to signup, you can join at [/signup](/signup) as long as you have a passcode provided by the administrator (which you don\'t need for this demo). **This demo is on a memory-only database, so accounts and pastes can be deleted at any time.** \n\nYou can find the source code on [GitHub](https://github.com/MaxLeiter/drift)."
|
||||
- WELCOME_TITLE="Drift"
|
||||
- REGISTRATION_PASSWORD=""
|
||||
- NEXTAUTH_URL=http://localhost:3000
|
||||
- NEXTAUTH_SECRET=secret
|
||||
- GITHUB_CLIENT_ID=64100c941c2474a5698a
|
||||
- GITHUB_CLIENT_SECRET=cf4c1d510741a439c77d0593e36469d234eca894
|
||||
- DATABASE_URL=postgressql://maxleiter:wHaQdWJcZz2pWd0@postgres:5432/postgres
|
||||
- DRIFT_URL=http://localhost:3000
|
||||
ports:
|
||||
- "3000:3000"
|
||||
volumes:
|
||||
- ./drift:/app
|
||||
depends_on:
|
||||
- postgres
|
||||
postgres:
|
||||
image: postgres:13
|
||||
container_name: postgres
|
||||
restart: unless-stopped
|
||||
user: 1000:1000
|
||||
environment:
|
||||
- POSTGRES_PASSWORD=wHaQdWJcZz2pWd0
|
||||
- POSTGRES_USER=maxleiter
|
||||
- POSTGRES_DB=postgres
|
||||
volumes:
|
||||
- ./postgres:/var/lib/postgresql/data
|
||||
Loading…
Reference in New Issue