From f28f467032e4f77a1ce8efe8103191c9ad2de02b Mon Sep 17 00:00:00 2001 From: dweller Date: Tue, 20 Feb 2024 21:01:37 +0200 Subject: add search and page layouts --- imgs/search-wt.svg | 22 ++++ index.html | 5 +- page.html | 353 +++++++++++++++++++++++++++++++++++++++++++++++++++++ search.html | 94 ++++++++++++++ style/main.css | 156 ++++++++++++----------- style/man.css | 51 ++++++++ style/search.css | 166 +++++++++++++++++++++++++ 7 files changed, 770 insertions(+), 77 deletions(-) create mode 100644 imgs/search-wt.svg create mode 100644 page.html create mode 100644 search.html create mode 100644 style/man.css create mode 100644 style/search.css diff --git a/imgs/search-wt.svg b/imgs/search-wt.svg new file mode 100644 index 0000000..783b3cf --- /dev/null +++ b/imgs/search-wt.svg @@ -0,0 +1,22 @@ + + + + + + + + + diff --git a/index.html b/index.html index be14870..6f78aae 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,6 @@ -
@@ -45,8 +44,8 @@
- - + +

Write "man" if you have no idea what to do...

diff --git a/page.html b/page.html new file mode 100644 index 0000000..32fd4aa --- /dev/null +++ b/page.html @@ -0,0 +1,353 @@ + + + + + + + Manup               Lonely MAN near You + + + + + + + + + + + + +
+
+ + + +
+
+

+

MAN(1) General + Commands Manual MAN(1)
+
+
+

+

man — + display manual pages

+
+
+

+ + + + + +
man[-acfhklw] [-C + file] [-M + path] [-m + path] [-S + subsection] [[-s] + section] name ...
+
+

+The man utility displays the manual page entitled + name. Pages may be selected according to a specific + category (section) or machine architecture + (subsection). +

The options are as follows:

+
+
+
Display all matching manual pages.
+
+ file
+
Use the specified file instead of the default + configuration file. This permits users to configure their own manual + environment. See man.conf(5) for a description of the contents of this file.
+
+
Copy the manual page to the standard output instead of using + less(1) to paginate it. + This is done by default if the standard output is not a terminal device. +

When using -c, most terminal devices + are unable to show the markup. To print the output of + man to the terminal with markup but without + using a pager, pipe it to ul(1). To remove the markup, pipe the output to + col(1) + -b instead.

+
+
+
A synonym for whatis(1). + It searches for name in manual page names and + displays the header lines from all matching pages. The search is case + insensitive and matches whole words only.
+
+
Display only the SYNOPSIS lines of the requested manual pages. Implies + -a and -c.
+
+
A synonym for apropos(1). Instead of name, an expression + can be provided using the syntax described in the + apropos(1) manual. By + default, it displays the header lines of all matching pages.
+
+
A synonym for mandoc(1). + The name arguments are interpreted as filenames. No + search is done and file, path, + section, subsection, and + -w are ignored. This option implies + -a.
+
+ path
+
Override the list of directories to search for manual pages. The supplied + path must be a colon + (‘:’) separated list of directories. + This option also overrides the environment variable + MANPATH and any directories specified in the + man.conf(5) file.
+
+ path
+
Augment the list of directories to search for manual pages. The supplied + path must be a colon + (‘:’) separated list of directories. + These directories will be searched before those specified using the + -M option, the MANPATH + environment variable, the man.conf(5) file, or the default directories.
+
+ subsection
+
Only show pages for the specified machine(1) architecture. subsection + is case insensitive. +

By default manual pages for all architectures are installed. + Therefore this option can be used to view pages for one architecture + whilst using another.

+

This option overrides the MACHINE + environment variable.

+
+
[-s] section
+
Only select manuals from the specified section. The + currently available sections are: +

+
+
+
1
+
General commands (tools and utilities).
+
2
+
System calls and error numbers.
+
3
+
Library functions.
+
3p
+
perl(1) programmer's + reference guide.
+
4
+
Device drivers.
+
5
+
File formats.
+
6
+
Games.
+
7
+
Miscellaneous information.
+
8
+
System maintenance and operation commands.
+
9
+
Kernel internals.
+
+
+
+
+
List the pathnames of all matching manual pages instead of displaying any + of them. If no name is given, list the directories + that would be searched.
+
+

The options -IKOTW are also supported and + are documented in mandoc(1). The options -fkl are mutually + exclusive and override each other.

+

The search starts with the -m argument if + provided, then continues with the -M argument, the + MANPATH variable, the + manpath entries in the + man.conf(5) file, or with + /usr/share/man:/usr/X11R6/man:/usr/local/man + by default. Within each of these, directories are searched in the order + provided. Within each directory, the search proceeds according to the + following list of sections: 1, 8, 6, 2, 3, 5, 7, 4, 9, 3p. The first match + found is shown.

+

The mandoc.db(5) database is used for looking up manual page entries. In + cases where the database is absent, outdated, or corrupt, + man falls back to looking for files called + name.section. If both a + formatted and an unformatted version of the same manual page, for example + cat1/foo.0 and man1/foo.1, + exist in the same directory, only the unformatted version is used. The + database is kept up to date with makewhatis(8), which is run by the + weekly(8) maintenance + script.

+

Guidelines for writing man pages can be found in + mdoc(7).

+
+

+
+
+
As some manual pages are intended only for specific architectures, + man searches any subdirectories, with the same + name as the current architecture, in every directory which it searches. + Machine specific areas are checked before general areas. The current + machine type may be overridden by setting the environment variable + MACHINE to the name of a specific architecture, or + with the -S option. + MACHINE is case insensitive.
+
+
Any non-empty value of the environment variable + MANPAGER is used instead of the standard + pagination program, less(1). If less(1) + is used, the interactive :t command can be used to + go to the definitions of various terms, for example command line options, + command modifiers, internal commands, environment variables, function + names, preprocessor macros, errno(2) values, and some other emphasized words. Some terms may + have defining text at more than one place. In that case, the + less(1) interactive + commands t and T can be + used to move to the next and to the previous place providing information + about the term last searched for with :t. The + -O + tag[=term] option documented + in the mandoc(1) manual + opens a manual page at the definition of a specific + term rather than at the beginning.
+
+
Override the standard search path which is either specified in + man.conf(5) or the + default path. The format of MANPATH is a colon + (‘:’) separated list of directories. + Invalid directories are ignored. Overridden by -M, + ignored if -l is specified. +

If MANPATH begins with a colon, it is + appended to the standard path; if it ends with a colon, it is prepended + to the standard path; or if it contains two adjacent colons, the + standard path is inserted between the colons.

+
+
+
Specifies the pagination program to use when + MANPAGER is not defined. If neither PAGER nor + MANPAGER is defined, less(1) is used.
+
+
+
+

+
+
/etc/man.conf
+
default man configuration file
+
+
+
+

+

The man utility exits 0 on success, + and >0 if an error occurs. See mandoc(1) for details.

+
+
+

+

Format a page for pasting extracts into an email message — + avoid printing any UTF-8 characters, reduce the width to ease quoting in + replies, and remove markup:

+

+
$ man -T ascii -O width=65 pledge | + col -b
+

Read a typeset page in a PDF viewer:

+

+
$ MANPAGER=mupdf man -T pdf + lpd
+
+
+

+

apropos(1), + col(1), + mandoc(1), + ul(1), + whereis(1), + man.conf(5), + mdoc(7)

+
+
+

+

The man utility is compliant with the + IEEE Std 1003.1-2008 (“POSIX.1”) + specification.

+

The flags [-aCcfhIKlMmOSsTWw], as well as + the environment variables MACHINE, + MANPAGER, and MANPATH, are + extensions to that specification.

+
+
+

+

A man command first appeared in + Version 2 AT&T UNIX.

+

The -w option first appeared in + Version 7 AT&T UNIX; + -f and -k in + /usr/usb/man in 4.0BSD; + -M in 4.3BSD; + -a in 4.3BSD-Tahoe; + -c and -m in + 4.3BSD-Reno; -h in + 4.3BSD-Net/2; -C in + NetBSD 1.0; -s and + -S in OpenBSD 2.3; and + -I, -K, + -l, -O, and + -W in OpenBSD 5.7. The + -T option first appeared in + AT&T System III UNIX and was also added + in OpenBSD 5.7.

+
+
+
August 4, + 2022 Linux 5.10.0-28-cloud-amd64
+

+
+ +
+ + diff --git a/search.html b/search.html new file mode 100644 index 0000000..28e47f7 --- /dev/null +++ b/search.html @@ -0,0 +1,94 @@ + + + + + + + Manup               Lonely MAN near You + + + + + + + + + + + +
+
+ + + +
+
+

Found 14 results

+
+
man (1)
+
an interface to the system reference manuals
+
manconv (1)
+
convert manual page from one encoding to another
+
mandb (8)
+
create or update the manual page index caches
+
mandoc (1)
+
format manual pages
+
mandoc.db (5)
+
manual page database
+
mandoc_char (7)
+
mandoc special characters
+
mandoc_eqn (7)
+
eqn language reference for mandoc
+
mandoc_man (7)
+
legacy formatting language for manual pages
+
mandoc_mdoc (7)
+
semantic markup language for formatting manual pages
+
mandoc_roff (7)
+
roff language reference for mandoc
+
mandoc_tbl (7)
+
tbl language reference for mandoc
+
mandocd (8)
+
server process to format manual pages in batch mode
+
manpath (1)
+
determine search path for manual pages
+
manpath (5)
+
format of the /etc/manpath.config file
+
+
+ +
+ + diff --git a/style/main.css b/style/main.css index 78558a6..f373e37 100644 --- a/style/main.css +++ b/style/main.css @@ -11,13 +11,15 @@ --bg: #FFFFFF; --bg-dark: #F2F2F2; --fg: #202124; - --fg-light: #CACACA; + --fg-mid: #5F6368; + --fg-light: #70757A; --border: #DADCE0; /* query input */ --qbg: transparent; --qborder: var(--border); + --qshadow: transparent; --qbgh: transparent; --qborderh: var(--border); @@ -66,73 +68,6 @@ --logo-d: #34A853; } -@media (prefers-color-scheme: dark) -{ - /* TODO: dew it */ - - :root - { - /* general */ - --bg: #202124; - --bg-dark: #171717; - --fg: #E8EAED; - --fg-light: #BDC1C6; - - --border: #3C4043; - - /* query input */ - --qbg: transparent; - --qborder: #5F6368; - - --qbgh: #303134; - --qborderh: transparent; - --qshadowh: #171717; - - /* buttons */ - --btn-bg: #303134; - --btn-fg: var(--fg); - --btn-shad: transparent; - --btn-brd: transparent; - - --btn-bgh: var(--btn-bg); - --btn-fgh: var(--btn-fg); - --btn-shadh: transparent; - --btn-brdh: #5F6368; - - --btn-bgf: var(--btn-bg); - --btn-fgf: var(--btn-fg); - --btn-shadf: transparent; - --btn-brdf: var(--btn-brdh); - - /* accent buttons */ - --abtn-bg: #8AB4F8; - --abtn-fg: #202124; - --abtn-brd: transparent; - --abtn-shad: transparent; - - --abtn-bgh: #93BAF9; - --abtn-fgh: var(--abtn-fg); - --abtn-brdh: transparent; - --abtn-shadh: transparent; - - --abtn-bgf: #A6C6FA; - --abtn-fgf: var(--abtn-fg); - --abtn-brdf: transparent; - --abtn-shadf: transparent; - - /* links */ - --a-unvis: #8AB4F8; - --a-vis: #C58AF9; - - /* misc */ - --logo-a: #FFFFFF; - --logo-b: #FFFFFF; - --logo-c: #FFFFFF; - --logo-d: #FFFFFF; - } - -} - /* TODO: credit fonts */ @font-face { @@ -181,7 +116,6 @@ a:hover { text-decoration: underline; } align-items: center; justify-content: center; - width: 100dvw; height: 100dvh; } @@ -189,7 +123,7 @@ a:hover { text-decoration: underline; } { display: flex; flex-direction: row; - align-items: flex-start; + align-items: baseline; justify-content: flex-end; flex-grow: 0.75; @@ -199,13 +133,19 @@ a:hover { text-decoration: underline; } padding: 0 1rem; } +#topnav +{ + display: flex; + flex-direction: row; + align-items: baseline; +} + #topnav_icon { display: inline-block; - width: 1.25rem; - height: 1.25rem; - line-height: 2.5rem; + width: 12pt; + height: 12pt; margin: 0 1rem; padding: 0; @@ -221,7 +161,6 @@ a:hover { text-decoration: underline; } height: 3rem; margin: 1rem 0.5rem; - border: 1px solid var(--btn-brd); border-radius: 0.35rem; @@ -321,6 +260,8 @@ button, input { all: unset; } background-color: var(--qbg); border: 1px solid var(--qborder); border-radius: 10rem; + + box-shadow: 0.5pt 0.75pt 0.5rem var(--qshadow); } #query_wrap:hover @@ -441,3 +382,70 @@ footer, #about_pane display: inline-block; transform: rotate(180deg); } + + +@media (prefers-color-scheme: dark) +{ + :root + { + /* general */ + --bg: #202124; + --bg-dark: #171717; + --fg: #E8EAED; + --fg-mid: #BDC1C6; + --fg-light: #BDC1C6; + + --border: #3C4043; + + /* query input */ + --qbg: transparent; + --qborder: #5F6368; + + --qbgh: #303134; + --qborderh: transparent; + --qshadowh: #171717; + + /* buttons */ + --btn-bg: #303134; + --btn-fg: var(--fg); + --btn-shad: transparent; + --btn-brd: transparent; + + --btn-bgh: var(--btn-bg); + --btn-fgh: var(--btn-fg); + --btn-shadh: transparent; + --btn-brdh: #5F6368; + + --btn-bgf: var(--btn-bg); + --btn-fgf: var(--btn-fg); + --btn-shadf: transparent; + --btn-brdf: var(--btn-brdh); + + /* accent buttons */ + --abtn-bg: #8AB4F8; + --abtn-fg: #202124; + --abtn-brd: transparent; + --abtn-shad: transparent; + + --abtn-bgh: #93BAF9; + --abtn-fgh: var(--abtn-fg); + --abtn-brdh: transparent; + --abtn-shadh: transparent; + + --abtn-bgf: #A6C6FA; + --abtn-fgf: var(--abtn-fg); + --abtn-brdf: transparent; + --abtn-shadf: transparent; + + /* links */ + --a-unvis: #8AB4F8; + --a-vis: #C58AF9; + + /* misc */ + --logo-a: #FFFFFF; + --logo-b: #FFFFFF; + --logo-c: #FFFFFF; + --logo-d: #FFFFFF; + } + +} diff --git a/style/man.css b/style/man.css new file mode 100644 index 0000000..12a00b2 --- /dev/null +++ b/style/man.css @@ -0,0 +1,51 @@ +/* + * Copyright (C) 2024 dwlr + * + * BSD 3-Clause License (BSD-3-Clause) + * See LICENSE for details + */ + +.manpage +{ + font-size: small; + + width: min(100% - 3rem, 9in); + padding: 0.25in; + margin: 1em 0 1em 0; + + border: 1px solid var(--border); + border-radius: 1em; +} + +.head +{ + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; +} + + +@media (width <= 800px) +{ + .manpage + { + width: unset; + border: none; + margin: 0; + padding: 0; + } +} + + +/* TODO: give copyright */ + +table.head, table.foot { width: 100%; } +td.head-rtitle, td.foot-os { text-align: right; } +td.head-vol { text-align: center; } +.Nd, .Bf, .Op { display: inline; } +.Pa, .Ad { font-style: italic; } +.Ms { font-weight: bold; } +.Bl-diag > dt { font-weight: bold; } +code.Nm, .Fl, .Cm, .Ic, code.In, .Fd, .Fn, .Cd { font-weight: bold; font-family: inherit; } diff --git a/style/search.css b/style/search.css new file mode 100644 index 0000000..945d778 --- /dev/null +++ b/style/search.css @@ -0,0 +1,166 @@ +/* + * Copyright (C) 2024 dwlr + * + * BSD 3-Clause License (BSD-3-Clause) + * See LICENSE for details + */ + +:root +{ + --qshadow: var(--qborder); + --qshadowh: #BEC0C4; +} + +#logo { font-size: 1rem; } +#logo > h1 { font-size: 1.5rem; } + +#gc-let { font-size: 1.25em; } +#gc-me { font-size: 1em; } +#gc-man { font-size: 0.9em; } +#gc-that { font-size: 1em; } +#gc-for { font-size: 1.15em; } +#gc-you { font-size: 1em; } + +#main +{ + justify-content: flex-start; + align-items: flex-start; +} + +#main > header +{ + flex-grow: 0; + justify-content: flex-start; + align-items: baseline; + + padding: 1.5rem 2% 1.5rem 5%; + padding-bottom: 0; + + border-bottom: solid 1px var(--border); +} + +#search_pane +{ + max-width: 95%; + flex-grow: 0; +} + +#logo { margin-right: 1.5rem; } + +#mank +{ + background-color: var(--qbg); + color: var(--fg-light); +} + +#man { padding-left: 5pt; } + +#man, #mank +{ + font-size: 13pt; + min-width: 25pt; + margin: 0; + border-radius: 0; +} + +#mank +{ + background-color: transparent; + color: var(--fg-light); + border-color: transparent; +} + +#man:hover, #mank:hover +{ + text-decoration: underline; + box-shadow: none; +} + +#query_wrap +{ + overflow: hidden; + padding: 0; +} + +#query { margin-left: 15pt; } + +#query_icon +{ + display: inline-block; + + background: no-repeat url("/imgs/search-wt.svg"); + background-size: contain; + + height: 12pt; + width: 12pt; + + margin: 3pt 0 0 0; +} + +@keyframes verscale +{ + 0%, 100% { transform: rotate(-10deg); } + 50% { transform: rotate( 10deg); } +} + +#topnav { margin-left: auto; } + +#results +{ + flex-grow: 1; + margin: 0 5%; +} + +#results > p +{ + font-size: small; + margin-bottom: 1.5rem; +} + +#results > dl > dt { font-size: large; } +#results > dl > dd +{ + color: var(--fg-mid); + margin: 5pt 0 2rem 0; + font-size: 12pt; +} + +@media (prefers-color-scheme: dark) +{ + :root + { + --qshadow: transparent; + --qshadowh: #171717; + } + + #query_wrap + { + background-color: var(--qbgh); + border: 1px solid var(--qborderh); + } + + #query_wrap:hover { box-shadow: 0.5pt 0.75pt 0.5rem var(--qshadowh); } + + #man { border-color: transparent; } +} + +@media (width <= 970px) +{ + #topnav { display: none; } +} + +@media (width <= 800px) +{ + #main > header + { + justify-content: center; + align-items: center; + + padding: 0; + margin: 0; + } + + #query_wrap { width: min(42rem, 95dvw); } + + #logo { display: none; } +} -- cgit v1.2.3