Compare commits
2 Commits
2a9328665a
...
d96b78a7e5
| Author | SHA1 | Date | |
|---|---|---|---|
| d96b78a7e5 | |||
| b482f57307 |
@ -15,7 +15,7 @@ function ListItem(props: {
|
||||
return (
|
||||
<li class="p-1 hover:bg-gray-400 transition-colors">
|
||||
<a class="flex gap-2" href={props.href}>
|
||||
<img src={asset(props.icon)} />
|
||||
<div class="bg-black dark:bg-white w-4 h-4" style={`mask: url(${asset(props.icon)})`}></div>
|
||||
<p class="">{props.children}</p>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@ -1,3 +1,22 @@
|
||||
import { ComponentChildren } from "preact";
|
||||
|
||||
function InputBox(props: {
|
||||
label: string;
|
||||
labelChildren?: ComponentChildren;
|
||||
type: string;
|
||||
}){
|
||||
const { label, labelChildren, type } = props;
|
||||
return <div class="flex items-center flex-1">
|
||||
<label for={label} class="w-20">{labelChildren}</label>
|
||||
<input
|
||||
type={type}
|
||||
name={label}
|
||||
id={label}
|
||||
class="border-b-2 focus:border-green-500 transition-colors flex-1 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
|
||||
export default function LoginForm({
|
||||
redirect = "/",
|
||||
failed = false,
|
||||
@ -19,24 +38,8 @@ export default function LoginForm({
|
||||
class="flex flex-col gap-2 items-stretch"
|
||||
>
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
<div class="basis-40 flex items-center flex-1">
|
||||
<label for="username" class="w-20">Username</label>
|
||||
<input
|
||||
type="text"
|
||||
name="username"
|
||||
id="username"
|
||||
class="border-b-2 focus:border-green-500 transition-colors flex-1"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center flex-1">
|
||||
<label for="password" class="w-20">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
id="password"
|
||||
class="border-b-2 focus:border-green-500 transition-colors flex-1"
|
||||
/>
|
||||
</div>
|
||||
<InputBox label="username" labelChildren={"Username"} type="text"/>
|
||||
<InputBox label="password" labelChildren={"Password"} type="password"/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
import { Head } from "$fresh/runtime.ts";
|
||||
import { Head, asset } from "$fresh/runtime.ts";
|
||||
|
||||
export default function Page404() {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Simple file server - 404 Not Found</title>
|
||||
<link rel="stylesheet" href={asset("/base.css")} />
|
||||
</Head>
|
||||
<div class="p-4 mx-auto max-w-screen-md">
|
||||
<img
|
||||
|
||||
@ -203,6 +203,7 @@ export default function DirLists(props: PageProps<DirOrFileProps>) {
|
||||
<Head>
|
||||
<title>Simple file server : {data.path}</title>
|
||||
<link rel="stylesheet" href={asset("/github-markdown.css")} />
|
||||
<link rel="stylesheet" href={asset("/base.css")} />
|
||||
</Head>
|
||||
<div class="p-4 mx-auto max-w-screen-md">
|
||||
{data.type === "dir"
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
import { Head } from "$fresh/runtime.ts";
|
||||
import { asset, Head } from "$fresh/runtime.ts";
|
||||
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Simple file server</title>
|
||||
<link rel="stylesheet" href={asset("/base.css")} />
|
||||
</Head>
|
||||
<div class="p-4 mx-auto max-w-screen-md">
|
||||
<img
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Head } from "$fresh/runtime.ts";
|
||||
import { Head, asset } from "$fresh/runtime.ts";
|
||||
import { HandlerContext, PageProps } from "$fresh/server.ts";
|
||||
import { setCookie } from "http/cookie.ts";
|
||||
import { Status } from "http/http_status.ts";
|
||||
@ -85,6 +85,7 @@ export default function Login(props: PageProps) {
|
||||
<>
|
||||
<Head>
|
||||
<title>Simple file server - Login</title>
|
||||
<link rel="stylesheet" href={asset("/base.css")} />
|
||||
</Head>
|
||||
<div class="">
|
||||
<LoginForm redirect={redirect ?? "/"} failed={failed} />
|
||||
|
||||
14
static/base.css
Normal file
14
static/base.css
Normal file
@ -0,0 +1,14 @@
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body{
|
||||
color-scheme: dark;
|
||||
background-color: #1E1E1E;
|
||||
color: #D4D4D4;
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: light) {
|
||||
body{
|
||||
color-scheme: light;
|
||||
background-color: #ffffff;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
@ -31,14 +31,14 @@
|
||||
--color-prettylights-syntax-brackethighlighter-angle: #8b949e;
|
||||
--color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
|
||||
--color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
|
||||
--color-fg-default: #c9d1d9;
|
||||
--color-fg-muted: #8b949e;
|
||||
--color-fg-subtle: #484f58;
|
||||
--color-canvas-default: #0d1117;
|
||||
--color-canvas-subtle: #161b22;
|
||||
--color-border-default: #30363d;
|
||||
--color-border-muted: #21262d;
|
||||
--color-neutral-muted: rgba(110, 118, 129, 0.4);
|
||||
--color-fg-default: #D4D4D4;
|
||||
--color-fg-muted: #949494;
|
||||
--color-fg-subtle: #4f4f4f;
|
||||
--color-canvas-default: #1E1E1E;
|
||||
--color-canvas-subtle: #131313;
|
||||
--color-border-default: #363636;
|
||||
--color-border-muted: #262626;
|
||||
--color-neutral-muted: rgba(120, 120, 120, 0.4);
|
||||
--color-accent-fg: #58a6ff;
|
||||
--color-accent-emphasis: #1f6feb;
|
||||
--color-attention-subtle: rgba(187, 128, 9, 0.15);
|
||||
|
||||
@ -15,3 +15,5 @@ tags: ["한글", "테스트"]
|
||||
- b
|
||||
- c
|
||||
- d
|
||||
|
||||
Key: <kbd>Ctrl+C</kbd>
|
||||
247
test_data/sample/README.md
Normal file
247
test_data/sample/README.md
Normal file
@ -0,0 +1,247 @@
|
||||
---
|
||||
title: asdf
|
||||
---
|
||||
__Advertisement :)__
|
||||
|
||||
- __[pica](https://nodeca.github.io/pica/demo/)__ - high quality and fast image
|
||||
resize in browser.
|
||||
- __[babelfish](https://github.com/nodeca/babelfish/)__ - developer friendly
|
||||
i18n with plurals support and easy syntax.
|
||||
|
||||
You will like those projects!
|
||||
|
||||
---
|
||||
|
||||
# h1 Heading 8-)
|
||||
## h2 Heading
|
||||
### h3 Heading
|
||||
#### h4 Heading
|
||||
##### h5 Heading
|
||||
###### h6 Heading
|
||||
|
||||
|
||||
## Horizontal Rules
|
||||
|
||||
___
|
||||
|
||||
---
|
||||
|
||||
***
|
||||
|
||||
|
||||
## Typographic replacements
|
||||
|
||||
Enable typographer option to see result.
|
||||
|
||||
(c) (C) (r) (R) (tm) (TM) (p) (P) +-
|
||||
|
||||
test.. test... test..... test?..... test!....
|
||||
|
||||
!!!!!! ???? ,, -- ---
|
||||
|
||||
"Smartypants, double quotes" and 'single quotes'
|
||||
|
||||
|
||||
## Emphasis
|
||||
|
||||
**This is bold text**
|
||||
|
||||
__This is bold text__
|
||||
|
||||
*This is italic text*
|
||||
|
||||
_This is italic text_
|
||||
|
||||
~~Strikethrough~~
|
||||
|
||||
|
||||
## Blockquotes
|
||||
|
||||
|
||||
> Blockquotes can also be nested...
|
||||
>> ...by using additional greater-than signs right next to each other...
|
||||
> > > ...or with spaces between arrows.
|
||||
|
||||
|
||||
## Lists
|
||||
|
||||
Unordered
|
||||
|
||||
+ Create a list by starting a line with `+`, `-`, or `*`
|
||||
+ Sub-lists are made by indenting 2 spaces:
|
||||
- Marker character change forces new list start:
|
||||
* Ac tristique libero volutpat at
|
||||
+ Facilisis in pretium nisl aliquet
|
||||
- Nulla volutpat aliquam velit
|
||||
+ Very easy!
|
||||
|
||||
Ordered
|
||||
|
||||
1. Lorem ipsum dolor sit amet
|
||||
2. Consectetur adipiscing elit
|
||||
3. Integer molestie lorem at massa
|
||||
|
||||
|
||||
1. You can use sequential numbers...
|
||||
1. ...or keep all the numbers as `1.`
|
||||
|
||||
Start numbering with offset:
|
||||
|
||||
57. foo
|
||||
1. bar
|
||||
|
||||
|
||||
## Code
|
||||
|
||||
Inline `code`
|
||||
|
||||
Indented code
|
||||
|
||||
// Some comments
|
||||
line 1 of code
|
||||
line 2 of code
|
||||
line 3 of code
|
||||
|
||||
|
||||
Block code "fences"
|
||||
|
||||
```
|
||||
Sample text here...
|
||||
```
|
||||
|
||||
Syntax highlighting
|
||||
|
||||
``` js
|
||||
var foo = function (bar) {
|
||||
return bar++;
|
||||
};
|
||||
|
||||
console.log(foo(5));
|
||||
```
|
||||
|
||||
## Tables
|
||||
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| data | path to data files to supply the data that will be passed into templates. |
|
||||
| engine | engine to be used for processing templates. Handlebars is the default. |
|
||||
| ext | extension to be used for dest files. |
|
||||
|
||||
Right aligned columns
|
||||
|
||||
| Option | Description |
|
||||
| ------:| -----------:|
|
||||
| data | path to data files to supply the data that will be passed into templates. |
|
||||
| engine | engine to be used for processing templates. Handlebars is the default. |
|
||||
| ext | extension to be used for dest files. |
|
||||
|
||||
|
||||
## Links
|
||||
|
||||
[link text](http://dev.nodeca.com)
|
||||
|
||||
[link with title](http://nodeca.github.io/pica/demo/ "title text!")
|
||||
|
||||
Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
|
||||
|
||||
|
||||
## Images
|
||||
|
||||
|
||||
|
||||
|
||||
Like links, Images also have a footnote style syntax
|
||||
|
||||
![Alt text][id]
|
||||
|
||||
With a reference later in the document defining the URL location:
|
||||
|
||||
[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
|
||||
|
||||
|
||||
## Plugins
|
||||
|
||||
The killer feature of `markdown-it` is very effective support of
|
||||
[syntax plugins](https://www.npmjs.org/browse/keyword/markdown-it-plugin).
|
||||
|
||||
|
||||
### [Emojies](https://github.com/markdown-it/markdown-it-emoji)
|
||||
|
||||
> Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:
|
||||
>
|
||||
> Shortcuts (emoticons): :-) :-( 8-) ;)
|
||||
|
||||
see [how to change output](https://github.com/markdown-it/markdown-it-emoji#change-output) with twemoji.
|
||||
|
||||
|
||||
### [Subscript](https://github.com/markdown-it/markdown-it-sub) / [Superscript](https://github.com/markdown-it/markdown-it-sup)
|
||||
|
||||
- 19^th^
|
||||
- H~2~O
|
||||
|
||||
|
||||
### [\<ins>](https://github.com/markdown-it/markdown-it-ins)
|
||||
|
||||
++Inserted text++
|
||||
|
||||
|
||||
### [\<mark>](https://github.com/markdown-it/markdown-it-mark)
|
||||
|
||||
==Marked text==
|
||||
|
||||
|
||||
### [Footnotes](https://github.com/markdown-it/markdown-it-footnote)
|
||||
|
||||
Footnote 1 link[^first].
|
||||
|
||||
Footnote 2 link[^second].
|
||||
|
||||
Inline footnote^[Text of inline footnote] definition.
|
||||
|
||||
Duplicated footnote reference[^second].
|
||||
|
||||
[^first]: Footnote **can have markup**
|
||||
|
||||
and multiple paragraphs.
|
||||
|
||||
[^second]: Footnote text.
|
||||
|
||||
|
||||
### [Definition lists](https://github.com/markdown-it/markdown-it-deflist)
|
||||
|
||||
Term 1
|
||||
|
||||
: Definition 1
|
||||
with lazy continuation.
|
||||
|
||||
Term 2 with *inline markup*
|
||||
|
||||
: Definition 2
|
||||
|
||||
{ some code, part of Definition 2 }
|
||||
|
||||
Third paragraph of definition 2.
|
||||
|
||||
_Compact style:_
|
||||
|
||||
Term 1
|
||||
~ Definition 1
|
||||
|
||||
Term 2
|
||||
~ Definition 2a
|
||||
~ Definition 2b
|
||||
|
||||
|
||||
### [Abbreviations](https://github.com/markdown-it/markdown-it-abbr)
|
||||
|
||||
This is HTML abbreviation example.
|
||||
|
||||
It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.
|
||||
|
||||
*[HTML]: Hyper Text Markup Language
|
||||
|
||||
### [Custom containers](https://github.com/markdown-it/markdown-it-container)
|
||||
|
||||
::: warning
|
||||
*here be dragons*
|
||||
:::
|
||||
Loading…
Reference in New Issue
Block a user