Render on html the hugo export with css style

This commit is contained in:
Oscar Najera 2023-10-22 05:26:41 +02:00
parent 98875d53f5
commit f1fe584ad5
8 changed files with 120 additions and 31 deletions

View file

@ -2,10 +2,16 @@ baseURL = "https://titan-c.gitlab.io/org-cv/"
languageCode = "en-us" languageCode = "en-us"
title = "Org CV" title = "Org CV"
theme = "project-landing-page" theme = "project-landing-page"
[markup.goldmark.renderer]
unsafe = true
[markup.goldmark.parser.attribute]
title = true
block = true
[params] [params]
description = "Org-mode backend exporters for Curriculum Vita" description = "Org-mode backend exporters for Curriculum Vita"
author_url = "http://blog.oscarnajera.com" author_url = "http://oscarnajera.com"
author = "Titan-C" author = "Titan-C"
project_url = "https://gitlab.com/Titan-C/org-cv/" project_url = "https://gitlab.com/Titan-C/org-cv/"
logo = "https://upload.wikimedia.org/wikipedia/commons/a/a6/Org-mode-unicorn.svg" logo = "https://upload.wikimedia.org/wikipedia/commons/a/a6/Org-mode-unicorn.svg"

View file

@ -31,7 +31,7 @@ put your foreseen job.
</div> </div>
```org ```org
#+TITLE: My dream job #+TITLE: My dream job an ORG-CV example
#+AUTHOR: John Doe #+AUTHOR: John Doe
#+email: john@doe.lost #+email: john@doe.lost
#+options: tags:nil #+options: tags:nil

View file

@ -20,15 +20,39 @@ You are responsible for styling your website. Use all the CSS magic you know.
Each entry is inside a `div` container and each element of the properties has Each entry is inside a `div` container and each element of the properties has
its own class. its own class.
Make sure that your hugo config has the markup parser attributes active Make sure that your hugo config has the markup parser attributes active and allows
for html rendering.
```yaml ```yaml
markup: markup:
goldmark: goldmark:
renderer:
unsafe: true
parser: parser:
attribute: attribute:
title: true title: true
block: true block: true
``` ```
<iframe src="/post/cv/" title="rendered CV"></iframe> You can also use an awards section for a different styling. Here you tag each
entry with `cvhonor`.
```org
* Awards
** First place :cvhonor:
:PROPERTIES:
:CV_ENV: cventry
:DATE: <2014-09-01>
:LOCATION: a city, a country
:EVENT: The RACE
:END:
** Sport Scholarship :cvhonor:
:PROPERTIES:
:DATE: <2013-09-01>
:LOCATION: my city, your country
:ORGANIZATION: The nice millionaire
:END:
```
Next is the rendered result for the special entries with styling.

View file

@ -2,7 +2,7 @@
title = "License" title = "License"
author = ["Óscar Nájera"] author = ["Óscar Nájera"]
draft = false draft = false
weight = 1006 weight = 1007
+++ +++
> org-cv > org-cv

View file

@ -2,7 +2,7 @@
title = "Tips" title = "Tips"
author = ["Óscar Nájera"] author = ["Óscar Nájera"]
draft = false draft = false
weight = 1007 weight = 1008
+++ +++
If you have found this project useful. Please consider giving back. You can If you have found this project useful. Please consider giving back. You can

View file

@ -0,0 +1,38 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<base href="{{ .Site.BaseURL }}" />
<title>{{ .Title }}</title>
<!-- Bootstrap Core CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
crossorigin="anonymous"
/>
<!-- Custom CSS -->
<link href="css/landing-page.css" rel="stylesheet" />
<link href="css/cv.css" rel="stylesheet" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
/>
<!-- Custom Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic"
rel="stylesheet"
type="text/css"
/>
<style>
{{ printf "%v" (partial "template.css" . ) | safeCSS }}
</style>
</head>
</html>

22
doc/static/css/cv.css vendored
View file

@ -1,3 +1,12 @@
.cv-entry .cv-host,
.cv-entry .cv-date,
.cv-entry .cv-location,
.cv-honor .cv-host,
.cv-honor .cv-date,
.cv-honor .cv-location {
margin: 0;
}
.cv-entry .cv-host::before, .cv-entry .cv-host::before,
.cv-honor .cv-host::before { .cv-honor .cv-host::before {
font-family: "Font Awesome 6 Free"; font-family: "Font Awesome 6 Free";
@ -33,7 +42,7 @@
} }
.cv-honor .cv-role { .cv-honor .cv-role {
margin-left: 3.25rem; margin-left: 5.5rem;
} }
.cv-honor .cv-date { .cv-honor .cv-date {
@ -99,17 +108,6 @@
position: relative; position: relative;
} }
.cv-honor .cv-role,
.cv-entry .cv-role,
.cv-entry .cv-host,
.cv-entry .cv-date,
.cv-entry .cv-location,
.cv-honor .cv-host,
.cv-honor .cv-date,
.cv-honor .cv-location {
margin: 0;
}
.cv-entry p, .cv-entry p,
.cv-entry ul, .cv-entry ul,
.cv-honor p, .cv-honor p,

View file

@ -66,7 +66,7 @@ put your foreseen job.
| PHOTO | path to photo file | | PHOTO | path to photo file |
#+BEGIN_SRC org :tangle basic_cv.org #+BEGIN_SRC org :tangle basic_cv.org
,#+TITLE: My dream job ,#+TITLE: My dream job an ORG-CV example
,#+AUTHOR: John Doe ,#+AUTHOR: John Doe
,#+email: john@doe.lost ,#+email: john@doe.lost
,#+options: tags:nil ,#+options: tags:nil
@ -82,7 +82,7 @@ put your foreseen job.
#+END_SRC #+END_SRC
You can use org-modes hierarchical structure to describe your CV. To make a You can use org-modes hierarchical structure to describe your CV. To make a
specific subtree an item describing an experience point (Job you have, degree specific sub-tree an item describing an experience point (Job you have, degree
you pursued, etc.) you use the org properties drawer and with the =:CV_ENV: you pursued, etc.) you use the org properties drawer and with the =:CV_ENV:
cventry= property. You should also include the =FROM= and =TO= properties cventry= property. You should also include the =FROM= and =TO= properties
defining the span of the entry, as well as =LOCATION= and =EMPLOYER=. defining the span of the entry, as well as =LOCATION= and =EMPLOYER=.
@ -457,15 +457,13 @@ You are responsible for styling your website. Use all the CSS magic you know.
Each entry is inside a =div= container and each element of the properties has Each entry is inside a =div= container and each element of the properties has
its own class. its own class.
#+begin_src org :exports none :tangle hugocv.org Make sure that your hugo config has the markup parser attributes active and allows
,#+HTML: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" /> for html rendering.
,#+HTML: <link rel="stylesheet" href="/css/cv.css" />
#+end_src
Make sure that your hugo config has the markup parser attributes active
#+begin_src yaml #+begin_src yaml
markup: markup:
goldmark: goldmark:
renderer:
unsafe: true
parser: parser:
attribute: attribute:
title: true title: true
@ -474,15 +472,40 @@ markup:
# Next block is to generate exports # Next block is to generate exports
#+BEGIN_SRC org :exports none :tangle hugocv.org #+BEGIN_SRC org :exports none :tangle hugocv.org
,#+hugo_custom_front_matter: :weight ,#+hugo_custom_front_matter: :weight 1006
,#+include: basic_cv.org ,#+include: basic_cv.org
,#+include: sideactivities.org
,#+include: workcontent.org ,#+include: workcontent.org
# (org-export-to-file 'hugocv "doc/content/post/cv.md")
#+END_SRC #+END_SRC
#+BEGIN_EXPORT md You can also use an awards section for a different styling. Here you tag each
<iframe src="/post/cv/" title="rendered CV"></iframe> entry with =cvhonor=.
#+END_EXPORT #+BEGIN_SRC org :tangle hugocv.org
,* Awards
,** First place :cvhonor:
:PROPERTIES:
:CV_ENV: cventry
:DATE: <2014-09-01>
:LOCATION: a city, a country
:EVENT: The RACE
:END:
,** Sport Scholarship :cvhonor:
:PROPERTIES:
:DATE: <2013-09-01>
:LOCATION: my city, your country
:ORGANIZATION: The nice millionaire
:END:
#+END_SRC
Next is the rendered result for the special entries with styling.
* CV
:PROPERTIES:
:EXPORT_FILE_NAME: cv
:END:
Place holder stuff
* License * License
:PROPERTIES: :PROPERTIES:
:EXPORT_FILE_NAME: license :EXPORT_FILE_NAME: license