Commit 198194ea194b6f091868e71f7b129e36caa4d6f4 - mmm

layout fixes: - link from logo to root - links to path/: unless `STATIC` is set s-ol 3 years ago

4 changed file(s) with 168 addition(s) and 150 deletion(s). Raw diff Collapse all Expand all

-1

mmm/mmmfs/converts.moon less more

41	41	{
42	42	inp: 'text/html%+frag',
43	43	out: 'text/html',
44		transform: (html, fileder) -> render html, fileder
	44	transform: (html, fileder) ->
	45	html = '<div class="content">' .. html .. '</div>'
	46	render html, fileder
45	47	},
46	48	{
47	49	inp: 'text/html%+frag',

+68

-58

mmm/mmmfs/layout.moon less more

4	4	pick = (...) ->
5	5	num = select '#', ...
6	6	i = math.ceil math.random! * num
7		select i, ...
	7	(select i, ...)
8	8
9	9	iconlink = (href, src, alt, style) -> a {
10	10	class: 'iconlink',

29	29	}
30	30	}
31	31
32		header = header {
33		div {
34		h1 {
35		logo
36		span {
37		span 'mmm', class: 'bold'
38		''
39		'.s‑ol.nu'
	32	gen_header = ->
	33	header {
	34	div {
	35	h1 {
	36	navigate_to '', logo
	37	span {
	38	span 'mmm', class: 'bold'
	39	''
	40	'.s‑ol.nu'
	41	}
	42	}
	43	-- span "fun stuff with code and wires"
	44	table.concat {
	45	pick 'fun', 'cool', 'weird', 'interesting', 'new', 'pleasant'
	46	pick 'stuff', 'things', 'projects', 'experiments', 'visuals', 'ideas'
	47	pick "with", 'and'
	48	pick 'mostly code', 'code and wires', 'silicon', 'electronics', 'shaders',
	49	'oscilloscopes', 'interfaces', 'hardware', 'FPGAs'
	50	}, ' '
	51	}
	52	aside {
	53	navigate_to '/about', 'about me'
	54	navigate_to '/games', 'games'
	55	navigate_to '/projects', 'other'
	56	a {
	57	href: 'mailto:s%20[removethis]%20[at]%20s-ol.nu'
	58	'contact'
	59	script "
	60	var l = document.currentScript.parentElement;
	61	l.href = l.href.replace('%20[at]%20', '@');
	62	l.href = l.href.replace('%20[removethis]', '') + '?subject=Hey there :)';
	63	"
40	64	}
41	65	}
42		span "fun stuff with code and wires"
43		-- pick 'fun', 'cool', 'weird', 'interesting', 'new'
44		-- pick 'stuff', 'things', 'projects', 'experiments', 'news'
45		-- "with"
46		-- pick 'mostly code', 'code and wires', 'silicon', 'electronics'
47	66	}
48		aside {
49		navigate_to '/about', 'about me'
50		navigate_to '/games', 'games'
51		navigate_to '/projects', 'other'
52		a {
53		href: 'mailto:s%20[removethis]%20[at]%20s-ol.nu'
54		'contact'
55		script "
56		var l = document.currentScript.parentElement;
57		l.href = l.href.replace('%20[at]%20', '@');
58		l.href = l.href.replace('%20[removethis]', '') + '?subject=Hey there :)';
59		"
60		}
61		}
62		}
63	67
64	68	footer = footer {
65	69	span {

107	111
108	112	meta
109	113
110		render = (content, fileder) ->
	114	render = (content, fileder, opts={}) ->
	115	opts.meta or= get_meta fileder
	116	opts.scripts or= ''
	117
	118	unless opts.noview
	119	content = [[
	120	<div class="view main">
	121	<div class="content">
	122	]] .. content .. [[
	123	</div>
	124	</div>
	125	]]
	126
111	127	buf = [[
112	128	<!DOCTYPE html>
113	129	<html>
114	130	<head>
115		<link rel="stylesheet" type="text/css" href="/main.css" />
116		<!--
117		<link rel="preload" as="fetch" href="/mmm/dom/init.lua" />
118		<link rel="preload" as="fetch" href="/mmm/component/init.lua" />
119		<link rel="preload" as="fetch" href="/mmm/mmmfs/init.lua" />
120		<link rel="preload" as="fetch" href="/mmm/mmmfs/fileder.lua" />
121		<link rel="preload" as="fetch" href="/mmm/mmmfs/browser.lua" />
122		-->
123
124		<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400" rel="stylesheet">
	131	<link rel="stylesheet" type="text/css" href="/?main.css" />
	132	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400" />
125	133	]]
126	134	buf ..= "
127	135	#{get_meta fileder}
128	136	</head>
129	137	<body>
130		#{header}
	138	#{gen_header!}
131	139
132	140	#{content}
133	141
134	142	#{footer}
135	143	"
136	144	buf ..= [[
137		<script src="/highlight.pack.js"></script>
138		<script src="//cdnjs.cloudflare.com/ajax/libs/marked/0.5.1/marked.min.js"></script>
139		<script src="//cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.6/svg.min.js"></script>
140		<script src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
141		<script src="/fengari-web.js"></script>
142		<script type="application/lua" src="/mmm.bundle.lua"></script>
	145	<script type="application/javascript" src="/?highlight.pack.js"></script>
	146	<script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/marked/0.5.1/marked.min.js"></script>
	147	<script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.6/svg.min.js"></script>
	148	<script type="application/javascript" src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
	149	<script type="application/javascript" src="/?fengari-web.js"></script>
	150	<script type="application/lua" src="/?mmm.bundle.lua"></script>
143	151	<script type="application/lua">require 'mmm'</script>
144	152	]]
	153
	154	buf ..= opts.scripts
	155	-- <script type=\"application/lua\">
	156	-- on_load = on_load or {}
	157	-- table.insert(on_load, function()
	158	-- local path = #{string.format '%q', path}
	159	-- local browser = require 'mmm.mmmfs.browser'
	160	-- local root = dofile '/$bundle.lua'
	161	-- root:mount('', true)
	162
	163	-- BROWSER = browser.Browser(root, path, true)
	164	-- end)
	165	-- </script>
145	166	buf ..= "
146		<script type=\"application/lua\">
147		on_load = on_load or {}
148		table.insert(on_load, function()
149		local path = #{string.format '%q', path}
150		local browser = require 'mmm.mmmfs.browser'
151		local root = dofile '/$bundle.lua'
152		root:mount('', true)
153
154		BROWSER = browser.Browser(root, path, true)
155		end)
156		</script>
157	167	</body>
158	168	</html>
159	169	"

-2

mmm/mmmfs/util.moon less more

1	1	with attr = {k,v for k,v in pairs orig}
2	2	for k,v in pairs extra
3	3	attr[k] = v
	4
	5	tourl = (path) ->
	6	if STATIC
	7	path
	8	else
	9	"#{path}/:"
4	10
5	11	(elements) ->
6	12	import a, div, pre from elements

13	19	assert fileder, "no fileder passed."
14	20
15	21	navigate_to = (path, name, opts={}) ->
16		opts.href = path
	22	opts.href = tourl path
17	23	opts.onclick = if MODE == 'CLIENT' then (e) =>
18	24	e\preventDefault!
19	25	BROWSER\navigate path

29	35	a name, merge attr, :href, target: '_blank'
30	36	else
31	37	a name, merge attr, {
32		href: fileder.path
	38	href: tourl fileder.path
33	39	onclick: if MODE == 'CLIENT' then (e) =>
34	40	e\preventDefault!
35	41	BROWSER\navigate fileder.path

+89

-89

scss/_browser.scss less more

2	2	flex: 1;
3	3
4	4	border-top: 0.2rem solid $gray-bright;
	5	}
5	6
6		.view {
7		display: flex;
8		flex-direction: column;
	7	.view {
	8	display: flex;
	9	flex-direction: column;
9	10
10		flex: 1 1 0;
11		min-width: 0;
	11	flex: 1 1 0;
	12	min-width: 0;
12	13
13		&.inspector {
14		top: 0;
15		position: sticky;
16		max-height: 100vh;
17		color: #c5c8c6;
	14	&.inspector {
	15	top: 0;
	16	position: sticky;
	17	max-height: 100vh;
	18	color: #c5c8c6;
18	19
19		@include left-border;
20		border-color: $gray-dark;
21		background: $gray-dark;
22
23		nav {
24		background: inherit;
25		}
26
27		.content {
28		margin: 0;
29		padding: 0;
30		display: flex;
31		background: $gray-darker;
32
33		> * {
34		display: block;
35		margin: 0;
36		padding: 1em;
37		border-radius: 0;
38		border: 0;
39		flex: 1;
40		}
41		}
42		}
	20	@include left-border;
	21	border-color: $gray-dark;
	22	background: $gray-dark;
43	23
44	24	nav {
45		position: sticky;
46		top: 0;
47
48		display: flex;
49		flex: 0 0 auto;
50		flex-wrap: wrap;
51		justify-content: space-between;
52		background: $gray-bright;
53		z-index: 1000;
54
55		> span:first-of-type {
56		flex: 1 0 auto;
57		}
58
59		> * {
60		margin: 1em;
61		white-space: nowrap;
62		}
63
64		> .inspect-btn {
65		@include media-small() { display: none; }
66		}
67		}
68
69		.error-wrap {
70		flex: 0 0 auto;
71		padding: 1em 2em;
72		overflow: hidden;
73
74		background: $gray-fail;
75
76		&.empty {
77		display: none;
78		}
79
80		> span {
81		display: inline-block;
82		margin-bottom: 0.5em;
83
84		font-weight: bold;
85		color: #f00;
86		}
87
88		> pre {
89		margin: 0;
90		}
	25	background: inherit;
91	26	}
92	27
93	28	.content {
94		flex: 1 1 auto;
95		overflow: auto;
96		padding: 1em 2em;
	29	margin: 0;
	30	padding: 0;
	31	display: flex;
	32	background: $gray-darker;
97	33
98		position: relative;
	34	> * {
	35	display: block;
	36	margin: 0;
	37	padding: 1em;
	38	border-radius: 0;
	39	border: 0;
	40	flex: 1;
	41	}
	42	}
	43	}
	44
	45	nav {
	46	position: sticky;
	47	top: 0;
	48
	49	display: flex;
	50	flex: 0 0 auto;
	51	flex-wrap: wrap;
	52	justify-content: space-between;
	53	background: $gray-bright;
	54	z-index: 1000;
	55
	56	> span:first-of-type {
	57	flex: 1 0 auto;
	58	}
	59
	60	> * {
	61	margin: 1em;
	62	white-space: nowrap;
	63	}
	64
	65	> .inspect-btn {
	66	@include media-small() { display: none; }
	67	}
	68	}
	69
	70	.error-wrap {
	71	flex: 0 0 auto;
	72	padding: 1em 2em;
	73	overflow: hidden;
	74
	75	background: $gray-fail;
	76
	77	&.empty {
	78	display: none;
	79	}
	80
	81	> span {
	82	display: inline-block;
	83	margin-bottom: 0.5em;
	84
	85	font-weight: bold;
	86	color: #f00;
	87	}
	88
	89	> pre {
	90	margin: 0;
99	91	}
100	92	}
101	93
102	94	.content {
103		opacity: 1;
104		transition: opacity 150ms;
	95	flex: 1 1 auto;
	96	overflow: auto;
	97	padding: 1em 2em;
105	98
106		body.loading & {
107		opacity: 0;
108		}
	99	position: relative;
109	100	}
110	101	}
	102
	103	.content {
	104	opacity: 1;
	105	transition: opacity 150ms;
	106
	107	body.loading & {
	108	opacity: 0;
	109	}
	110	}