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"
title = "Org CV"
theme = "project-landing-page"
[markup.goldmark.renderer]
unsafe = true
[markup.goldmark.parser.attribute]
title = true
block = true
[params]
description = "Org-mode backend exporters for Curriculum Vita"
author_url = "http://blog.oscarnajera.com"
author_url = "http://oscarnajera.com"
author = "Titan-C"
project_url = "https://gitlab.com/Titan-C/org-cv/"
logo = "https://upload.wikimedia.org/wikipedia/commons/a/a6/Org-mode-unicorn.svg"

View file

@ -31,7 +31,7 @@ put your foreseen job.
</div>
```org
#+TITLE: My dream job
#+TITLE: My dream job an ORG-CV example
#+AUTHOR: John Doe
#+email: john@doe.lost
#+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
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
markup:
goldmark:
renderer:
unsafe: true
parser:
attribute:
title: 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"
author = ["Óscar Nájera"]
draft = false
weight = 1006
weight = 1007
+++
> org-cv

View file

@ -2,7 +2,7 @@
title = "Tips"
author = ["Óscar Nájera"]
draft = false
weight = 1007
weight = 1008
+++
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-honor .cv-host::before {
font-family: "Font Awesome 6 Free";
@ -33,7 +42,7 @@
}
.cv-honor .cv-role {
margin-left: 3.25rem;
margin-left: 5.5rem;
}
.cv-honor .cv-date {
@ -99,17 +108,6 @@
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 ul,
.cv-honor p,

View file

@ -66,7 +66,7 @@ put your foreseen job.
| PHOTO | path to photo file |
#+BEGIN_SRC org :tangle basic_cv.org
,#+TITLE: My dream job
,#+TITLE: My dream job an ORG-CV example
,#+AUTHOR: John Doe
,#+email: john@doe.lost
,#+options: tags:nil
@ -82,7 +82,7 @@ put your foreseen job.
#+END_SRC
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:
cventry= property. You should also include the =FROM= and =TO= properties
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
its own class.
#+begin_src org :exports none :tangle hugocv.org
,#+HTML: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
,#+HTML: <link rel="stylesheet" href="/css/cv.css" />
#+end_src
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.
#+begin_src yaml
markup:
goldmark:
renderer:
unsafe: true
parser:
attribute:
title: true
@ -474,15 +472,40 @@ markup:
# Next block is to generate exports
#+BEGIN_SRC org :exports none :tangle hugocv.org
,#+hugo_custom_front_matter: :weight
,#+hugo_custom_front_matter: :weight 1006
,#+include: basic_cv.org
,#+include: sideactivities.org
,#+include: workcontent.org
# (org-export-to-file 'hugocv "doc/content/post/cv.md")
#+END_SRC
#+BEGIN_EXPORT md
<iframe src="/post/cv/" title="rendered CV"></iframe>
#+END_EXPORT
You can also use an awards section for a different styling. Here you tag each
entry with =cvhonor=.
#+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
:PROPERTIES:
:EXPORT_FILE_NAME: license