Skip to content

adam-ard/static-website-literate-demo

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Static Website Literate Demo

Tangle

(org-babel-tangle)

export page

Put cursor over the page name and run export-page defined below. An html exported version will appear below it that is configured to tangle correctly to a html file.

(defun export-page ()
  (interactive)
  (org-beginning-of-line)
  (search-forward "page:")
  (save-selected-window
	(let ((filename (buffer-substring-no-properties (point) (line-end-position))))
	  (save-excursion
		(org-html-export-as-html nil t nil t)
		(insert (concat "** file:" filename "\n\n#+begin_src html :tangle " filename " :noweb no-export\n<<top>>\n"))
		(goto-char (point-max))
		(insert "<<bottom>>\n#+end_src"))
	  (if (search-forward (concat "** file:" filename) nil t nil)
		  (org-cut-subtree)
		(goto-char (point-max)))
	  (insert-buffer-substring "*Org HTML Export*")
	  (insert "\n"))))

To host locally

build a simple executable to serve static assets locally

go build

To run, execute the following. The server will launch in a separate window.

(async-shell-command "./static-website-literate-demo")

file:static/css/style.css

I just started with what w3 schools recommended for a navbar. I tweaked it from there:

https://www.w3schools.com/howto/howto_css_fixed_sidebar.asp

.sidenav {
  height: 100%;
  width: 160px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  color: #818181;
  display: block;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.main {
  margin-left: 160px; /* Same as the width of the sidenav */
  padding: 0px 10px;
  width: 800px;
}

.example {
  background-color: #eee;
  border: 1px solid #999;
  display: block;
  padding: 20px;
}

code { background-color: #eee; }

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

Navbar

A simple little navbar

navbar+=

<div class="sidenav">
  <a href="index.html">Home</a>
  <a href="essays.html">Essays</a>
  <a href="refs.html">Links</a>
  <a href="bio.html">Bio</a>
</div>

Top

top+=

<!DOCTYPE html>
<html>
  <<headers>>
  <body>
    <<navbar>>
    <div class="main">
    <<banner>>

Bottom

bottom+=

    </div>
  </body>
</html>

Headers

headers+=

<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

file:static/index.html

<<top>>
<img src="img/typewriter.jpg"></br>
Image by <a href="https://pixabay.com/photos/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=407695">Free-Photos</a>
    from <a href="https://pixabay.com/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=407695">Pixabay</a></br></br>

New: <a href="one.html">One Essay</a>,
<a href="another.html">Another Essay</a>
<<bottom>>

Banner

banner+=

<h2>----Static Website Literate Demo----</h2></br>

file:static/bio.html

<<top>>
<h2>Bio</h2>
<p>Put a bio here</p>
<<bottom>>

file:static/essays.html

<<top>>
<h2>Essays</h2></br>
2020-11-25 <a href="one.html">One Essay</a></br>
2020-10-18 <a href="another.html">Another Essay</a></br>
<<bottom>>

file:static/refs.html

<<top>>
  <h2>Some of My Favorites Resources</h2></br>
<<bottom>>

file:static/one.html

<<top>>
  <h2>One Essay</h2>
<<bottom>>

page:static/another.html

Another Essay

  1. item 1
  2. item 2
  3. item 3
  4. item 4

file:static/another.html

<<top>>
<div id="outline-container-org13c65d3" class="outline-2">
<h2 id="org13c65d3">Another Essay</h2>
<div class="outline-text-2" id="text-org13c65d3">
<ol class="org-ol">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ol>
</div>
</div>
<<bottom>>

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Languages