cssrr-markdownrstudiopagedown

pagedown html resume - How to move disclaimer section within aside section to the last page?


Taking the template resume from pagedown as an example, I would like the disclaimer section (currently on the bottom right of the first page, reading "This resume was made with the R package pagedown. Last updated on 2021-08-18.") moved to the bottom of the last page.

I've pasted the template r-markdown document below, but it is also accessible by opening a new R-markdown document in R Studio, and by selecting the "From Template" section and "HTML Resume".

I understand from the documentation and reading various customization solutions that CSS would be involved, but I'm unsure how to use CSS to force that section to the last page.

---
title: "Lijia Yu's resume"
author: Lijia Yu
date: "`r Sys.Date()`"
output:
  pagedown::html_resume:
    # set it to true for a self-contained HTML page but it'll take longer to render
    self_contained: false
# uncomment this line to produce HTML and PDF in RStudio:
#knit: pagedown::chrome_print
---

Aside
================================================================================


![Lijia Yu](https://avatars1.githubusercontent.com/u/895125?s=400&v=4){width=80%}


Contact Info {#contact}
--------------------------------------------------------------------------------

- <i class="fa fa-envelope"></i> lijia.yu@outlook.com
- <i class="fa fa-github"></i> [github.com/yulijia](https://github.com/yulijia)
- <i class="fa fa-phone"></i> +1 000-000-0000
- For more information, please contact me via email.


Skills {#skills}
--------------------------------------------------------------------------------

- Experienced in statistical analysis, statistical learning models, and optimization methods.

- Full experience with next generation sequencing data analysis.

- Highly skilled in R, Bash, Perl, Python, LaTeX


Disclaimer {#disclaimer}
--------------------------------------------------------------------------------

This resume was made with the R package [**pagedown**](https://github.com/rstudio/pagedown).

Last updated on `r Sys.Date()`.



Main
================================================================================

Lijia Yu {#title}
--------------------------------------------------------------------------------

### Currently searching for a PhD student position

Please note that this is a *real* resume, and I'm really looking for a PhD
student position at the moment. I made this resume because Yihui asked me
if I'd like to test the **pagedown** package with my resume. If you are
interested in my background and skills, please feel free to contact me.


Education {data-icon=graduation-cap data-concise=true}
--------------------------------------------------------------------------------

### Beijing University of Chemical Technology

B.S. in Information and Computing Sciences

Beijing, China

2010

Thesis: Dyadic wavelet and its application in edge detection

### University of Chinese Academy of Sciences

M.S. in Bioinformatics

Beijing, China

2014

Thesis: A multi-omics study for intra-individual divergence of the distributions between mRNA isoforms in mammals


Research Experience {data-icon=laptop}
--------------------------------------------------------------------------------

### Graduate Research Assistant

Beijing Institute of Genomics, Chinese Academy of Sciences

Beijing, China

2011 - 2014

- Performed computational biology research towards understanding regulation of alternative splicing in human and mouse transcriptome.
- Found EGFR pathway related mutations, aimed to understand the impacts of cancer mutations on EGFR signaling pathway.

### Bioinformatican

My Health Gene Technology Co., Ltd.

Beijing, China

2015 - 2016

- Investigated how cancer cells spread to other parts of the body at the single cell level.

### Visiting Scientist

University of Alabama at Birmingham

AL, USA

2016 - 2018

- Investigated the role of mitochondria in development of cancer.
- Investigated the evolution of genome architecture and its role in important evolutionary events.
- Detected thrombotic thrombocytopenic purpura related mutations in mutiple patients' blood genome.
  

Professional Experience {data-icon=suitcase}
--------------------------------------------------------------------------------

### Data Scientist, intern

SupStat Inc.

Beijing, China

2014

::: concise
- Taught R language to beginners. 
- Wrote Shiny app demos.
- Converted statistical tutorials from SPSS to R language.
:::

### Bioinformatician

My Health Gene Technology Co., Ltd.

Beijing, China

2015 - 2016

::: concise
- Analyzed whole-exome sequencing data. 
- Wrote analysis pipelines of ChIP-seq, single cell DNA-seq and single cell RNA-seq.
- Studied tumor metastasis and wrote research reports. 
- Also did case studies to identify the genetic defect causing rare disease.
:::


Teaching Experience {data-icon=chalkboard-teacher}
--------------------------------------------------------------------------------

### Introduction to R Language for Beginners.

Instructor of R and Data Mining Training Courses at SupStat Inc.

Beijing, China

2014

### Computational Biology and Bioinformatics.

Teaching assistant of GBS CB2-201 courses at UAB

AL, USA

2016 - 2017


Selected Publications and Posters {data-icon=file}
--------------------------------------------------------------------------------

### Genetic and epigenetic signals are found predictive to the distribution of intra-individual divergence of alternative splicing.

Poster for 2013 International Conference of Genomics

Qingdao, China

2014

**Yu L**, Chen B, Zhang Z.

### ESCRT-0 complex modulates Rbf mutant cell survival by regulating Rhomboid endosomal trafficking and EGFR signaling.

J Cell Sci. 2016 May 15;129(10):2075-84.

N/A

2016 

Sheng Z, **Yu L**, Zhang T, Pei X, Li X, Zhang Z and Du W. 

Solution

  • The best way for what you want is to ask the author to support this feature. Here is a hack to do so without changing the source code. Add this chunk to the end of your Rmd

    ```{js move_disclaim, echo=FALSE}
    (function() {
        var pages 
        var timer = 0;
        var changeDC = setInterval(function() {
            pages = document.querySelectorAll('.pagedjs_page');
            if(pages.length !== 2 && timer <= 5000) {
                timer += 200;
                return;
            }
            if(pages.length !== 2 && timer > 5000) return clearInterval(changeDC);
            var firstPage = pages[0];
            var lastePage = pages[pages.length - 1];
            var aside = firstPage.querySelector('#aside');
            var asideClone = aside.cloneNode();
            asideClone.id = "aside_last";
            var disclaim = document.querySelector('#disclaimer');
            asideClone.appendChild(disclaim);
            lastePage.querySelector('.pagedjs_page_content > div').appendChild(asideClone);
            clearInterval(changeDC);
        }, 200);
    })()
    ```
    

    What does it do:

    1. Why don't I only use CSS? Because I can't. The style of disclaimer is position: absolute within a div of position: relative. So it is locked inside the relative div. There is not much you can do about it (unless trick I don't know).
    2. My thought is to use js to move that element into the last page.
    3. The page layout is rendered on the fly with an async js function when every time you open the webpage. Maybe not as what you have imagined, when Rmarkdown finished rendering, we should have page ready. No, it is not, the author uses a library called {paged.js} to do the rendering. It generates the layout every time you open the browser tab.
    4. The author did not emit any event when the rendering is done, so I have no way to know the rendering is done. So I don't know when I can start to move.
    5. The way I do is to add a timer that runs every 200ms. If rendering is done, I do the move and remove the timer or if it takes more than 5s, I consider it something wrong, clear the timer and do nothing.
    6. One thing you need to define is pages.length !== 2. You need to know how many pages it will generate and this should be a fixed number you can easily get.

    enter image description here