css: use aditya's css, update readme

ref: bwaklog/bwaklog.github.io@621ddf9
anna-ssg · Feb 27, 2024 · d7c162c · d7c162c · bwaklog · Feb 27, 2024
1 parent 4c09895
commit d7c162c
Show file tree

Hide file tree

Showing 8 changed files with 199 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,7 @@
 # Static Site Generator
 
+Checkout this doc-page [rendered](https://ssg-test-org.github.io/docs.html) using our ssg
+
 ## Directory structure
 
 The ssg currently requires the following directory structure
@@ -93,9 +95,9 @@ navbar:
   - posts
 
 baseURL: http://localhost:8000/
-# Replace this with the actual canonical-url of your site.
 
-# baseURL tells search-engines (SEO), web-crawlers (robots.txt) so people can discover your site on the internet. It's also embeded in your sitemap / atom feed and can be used to change metadata about your site. 
+# baseURL tells search-engines (SEO), web-crawlers (robots.txt) so people can discover your site on the internet. 
+# It's also embeded in your sitemap / atom feed and can be used to change metadata about your site. 
 ```
 
 ## Flags

diff --git a/cmd/ssg/main.go b/cmd/ssg/main.go
@@ -151,7 +151,7 @@ func (g *Generator) replaceBaseURL(addr string) {
 	}
 }
 
-// link sitemap ad the end of robots.txt
+// link sitemap at the end of robots.txt
 func (g *Generator) parseRobots() {
 	tmpl, err := template.ParseFiles("layout/robots.txt")
 	if err != nil {

diff --git a/content/docs.md b/content/docs.md
@@ -0,0 +1,116 @@
+---
+title: Documentation
+date: 2024-02-27
+---
+
+## Directory structure
+
+The ssg currently requires the following directory structure
+
+```text
+ssg/
+|--content/  
+|  |--index.md (This file is necessary and cannot be omitted)  
+|  |--about.md  
+|  |--posts/
+|     |--post1.md
+|  ....  
+|
+|--layout/  
+|  |--page.html (This file is necessary and cannot be omitted)
+|  |--posts.html (This file is necessary to create a 'Posts' section) 
+|  |--partials/
+|     |--header.html
+|  ....
+|  |--config.yml (This file is necessary and cannot be omitted)
+|
+|--static/
+|  |--image1.jpg
+|  |--fonts
+|     |--font1.ttf
+|  |--images
+|     |--image2.png
+|  ....
+|
+|--rendered/ (This directory is created by the ssg)
+   |--index.html
+   |--about.html
+   |--posts.html
+   |--posts/
+      |--post1.html
+   |--static/
+      |--image1.jpg
+      |--fonts/
+   ....
+```
+
+## Description of the directory structure
+
+- The markdown content for the site is stored in content/. It can contain subdirectories as the folder is recursively rendered
+- Static assets such as images and fonts are stored in static/
+- The layout of the site is configured using html files in layout/
+
+   - The 'config.yml' file stores the configuration of the site and includes details such as the baseURL
+   - The 'page.html' file defines the layout of a basic page of the site
+   - The 'posts.html' file defines the layout of a page displaying all the posts of the site
+   - The layout files can be composed of smaller html files which are stored in the partials/ folder
+
+#### Layout
+
+The layout files can access the following rendered data from the markdown files:
+
+- {{.Body}} : Returns the markdown body rendered to HTML
+- {{.Frontmatter.[Tagname]}} : Returns the value of the frontmatter tag
+   - Example: {{.Frontmatter.Title}} : Returns the value of the title tag
+- {{.Layout.[Tagname]}}: Returns the particular configuration detail of the page
+   - Example: {{.Layout.Navbar}} : Returns a string slice with the names of all the navbar elements
+
+## Notes
+
+1. Images: To add images, add it to the 'static/' folder or a subdirectory under it. Use "static/[imagename.format]" as the image link format in the markdown files.
+
+2. CSS: CSS can be added in the following ways:
+
+- In an external file in the 'static/' directory and linked to the layout files
+    - To link the stylesheet, use the baseURL along with the relative path
+
+       Example: `<link rel="stylesheet" href="{{.Layout.BaseURL}}static/style.css">`
+- Placed inside `<style></style>` tags in the `<head></head>` of the layout files
+- Inline with the html elements
+
+3. Frontmatter: Metadata such as the title of the page can be added as frontmatter to the markdown files in the YAML format. Currently, the following tags are supported:
+
+- title : The title of the current page
+- date: The date of the current page
+
+4. config.yml: This file stores additional information regarding the layout
+
+- navbar: Stores the links to be added to the navbar (same name as the markdown files)
+- baseURL: Stores the base URL of the site
+
+Sample config.yml:
+
+```yml
+navbar:
+  - about
+  - posts
+
+baseURL: http://localhost:8000/
+# Replace this with the actual canonical-url of your site.
+
+# baseURL tells search-engines (SEO), web-crawlers (robots.txt) so people can discover your site on the internet. 
+# It's also embeded in your sitemap / atom feed and can be used to change metadata about your site. 
+```
+
+## Flags
+
+```
+Usage:
+  ssg [flags]
+
+Flags:
+  -a, --addr string   ip address to serve rendered content to (default "8000")
+  -d, --draft         renders draft posts
+  -h, --help          help for ssg
+  -s, --serve         serve the rendered content
+```
diff --git a/content/posts/markdown_test.md b/content/posts/markdown_test.md
@@ -0,0 +1,22 @@
+---
+title: Sample Post
+author: John Doe
+date: 2024-02-23
+categories:
+  - Technology
+  - Programming
+---
+
+# heading L1
+
+Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim
+labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi
+anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est
+aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud
+officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat
+
+## heading L2
+
+***bold and italics*** 
+
+> quote text
diff --git a/go.mod b/go.mod
@@ -12,5 +12,4 @@ require (
 require (
 	github.com/inconshreveable/mousetrap v1.1.0 // indirect
 	github.com/spf13/pflag v1.0.5 // indirect
-	gopkg.in/yaml.v2 v2.4.0 // indirect
 )
diff --git a/go.sum b/go.sum
@@ -10,7 +10,5 @@ github.com/yuin/goldmark v1.7.0 h1:EfOIvIMZIzHdB/R/zVrikYLPPwJlfMcNczJFMs1m6sA=
 github.com/yuin/goldmark v1.7.0/go.mod h1:uzxRWxtg69N339t3louHJ7+O03ezfj6PlliRlaOzY1E=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405 h1:yhCVgyC4o1eVCa2tZl7eS0r+SDo693bJlVdllGtEeKM=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
-gopkg.in/yaml.v2 v2.4.0 h1:D8xgwECY7CYvx+Y2n4sBz93Jn9JRvxdiyyo8CTfuKaY=
-gopkg.in/yaml.v2 v2.4.0/go.mod h1:RDklbk79AGWmwhnvt/jBztapEOGDOx6ZbXqjP6csGnQ=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
 gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
diff --git a/layout/config.yml b/layout/config.yml
@@ -1,5 +1,6 @@
 navbar:
     - index
     - about
+    - docs
     - posts
 baseURL: http://localhost:8000/
diff --git a/static/style.css b/static/style.css
@@ -10,22 +10,26 @@
 }
 
 body {
-  width: 100%;
-  height: 100%;
   padding: 1rem;
   font-size: 1.2rem;
-  font-family: custom-font, sans-serif;
+  font-family: monospace, custom-font, sans-serif;
   color: white;
   background-color: black;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 2rem;
+
+  margin-inline: 10rem;
 }
 
 nav {
   display: flex;
   gap: 2rem;
+
+  & > a {
+    font-size: 1.3rem;
+  }
 }
 
 a {
@@ -39,7 +43,54 @@ a {
   align-items: center;
 }
 
+.body > p {
+  /* margin-inline: 2rem; */
+  margin: auto;
+}
+
+.body > a {
+  font-size: 1.5rem;
+  word-break: break-all;
+}
+
+.body > p {
+  font-size: 1.1rem;
+}
+
 img {
-  height: 500px;
+  height: 35rem;
   width: auto;
+  border-radius: .2rem;
+
+  transition: opacity 300ms ease-in-out;
+  &:hover {
+    opacity: 0.85;
+  }
+}
+
+ul > li {
+  font-size: 1.5rem;
+}
+
+@media screen and (max-width: 900px) {
+  img {
+    max-width: 300px;
+    height: auto;
+  }
+  body {
+    margin-inline: 1.3rem;
+    margin: auto;
+    text-align: justify;
+  }
+  p {
+    font-size: 1.1rem;
+  }
+  ul > li {
+    font-size: 1.1rem;
+    margin-inline: 1rem;
+  }
+
+  .body > a {
+    font-size: 1.1rem;
+  }
 }