SlideShare une entreprise Scribd logo
1  sur  65
Télécharger pour lire hors ligne
JBake Workshop
Mario Garcia
Me
● Mario Garcia
● Working at Kaleidos.net
● Mostly Backend Developer (Java, Groovy)
● Some Frontend lately (React, Vue, CSS still not my thing)
Schedule
● What is JBake and use cases
● Installation
● Basic commands
● Blog
○ Create content
○ Templates
○ Custom content
○ Asciidoctor extensions
○ Push it to Github
Schedule
● Break (15 min)
● Project OSS
○ Some code in Gradle project
○ Configure bake
○ Include javadoc
○ Include asciidoctor doc
What is JBake
“JBake is a Java based, open source, static site/blog
generator for developers & designers”
Some features
● Self contained
● Integrated with other build tools (Gradle, Maven, SBT…)
● Content formats (asciidoctor, markdown, html)
● Multiple template support
● Draft support
● ….
Installation
Who hasn’t installed JBaked yet ?
Installation
Who hasn’t installed JBaked yet ?
● Prerequisites
○ JDK 8
● Three scenarios
○ Download BINARY directly
○ Install via SDKMAN command line (sdkman.io)
○ Integrate with your favourite BUILDING TOOL
Installation
SDKMAN
● Install sdkman (https://sdkman.io/install)
● Then “sdk install jbake”
Download binary
● Go to https://jbake.org/download.html
● Click on the latest distribution
● Decompress the zip wherever you want
● Make sure the jbake command is available in your console path
○ If you’re in linux e.g. modify .bashrc to add jbake command to the $PATH
Integrate with your build tool
We’ll see an example in the second part of this workshop
with Gradle
Use your favourite IDE
● Use any IDE with syntax highlight for
○ Asciidoctor
○ Markdown
○ HTML
○ Groovy
Get used with the basics
Basic commands
● We’re still playing so create a temporary folder
○ Check JBake help
■ jbake --help
○ Create folder nameofproject
■ jbake -i <nameofproject>
○ Browse the structure with your favourite editor
Basic commands
● Bake content to get html
○ Get into the <nameoftheproject> folder then execute
■ jbake -b
○ That will produce the final output of the blog, to browse it as if it were published online, do:
■ jbake -s
Create a new blog
Create greachblog
● Create the new project using Groovy MTE as template engine
○ jbake -i -t groovy-mte greachblog
● Lets comment on the structure and templates a little bit
Structure
● Directories
○ assets: css, js, images…
○ content: asciidoctor, markdown or html files
○ templates: Templates to interpret content files and produce the final ouput result
● jbake.properties
○ JBake configuration
About Groovy templates
About Groovy templates
● No need for enclosing tag. Braces mark the scope
About Groovy templates
● Plain strings can be inserted using yield or yieldUnscaped
Lets create a new entry
Open the project in your favourite editor
● Mines are (the ones I can help you with)
○ Emacs
○ IntelliJ
● But any editor should work.
● Look for plugins/extensions that could help you rendering/highlighting Markdown or Asciidoctor
syntax
Asciidoctor
● “A fast text processor & publishing toolchain for converting AsciiDoc to HTML5, DocBook &
more”.
○ Asciidoctor: https://asciidoctor.org/
○ Syntax Reference: https://asciidoctor.org/docs/asciidoc-syntax-quick-reference
Create an entry for today
● Create an asciidoctor file
○ greachblog/content/2019/03/28/greach_jbake_workshop.adoc
● Copy the following content:
https://asciidoctor.org/docs/asciidoc-syntax-quick-reference
Then bake it and serve it locally
● Execute with -s (it does bake and serve altogether)
○ jbake -s
Modifying templates
I don’t see my name in the entry
● We would like all blog entries to show the name of the author
● What do we need ?
○ Know about the JBAKE DATA MODEL
○ Modify the template to add the property author
○ Bake it again
JBake Data Model
● Global variables: These data variables are available to all templates regardless of the type.
● Page / Post / Custom: Variables for predefined templates as well as any custom templates you
created yourself
● Index: The index template has extra data variables available to it related to paging
● Tags: Data related to published tagged documents
https://jbake.org/docs/2.6.4/#data_model
Add the author
● Task 1
○ Go to post-brick.tpl and add the author somewhere
○ Check JBake post related variables https://jbake.org/docs/2.6.4/#data_model
● Task 2
○ I would like to write code in its own source file and then show it partially in the blog entry. I also want to be
able to download the sample code
■ You can add a :metaproperty: in the asciidoc document header called attached with the name of the
script
■ Add the script at the same place as the asciidoc document
■ Add an href in the header to “download” the attached document getting the name from the post
headers
Attach code to entry
Custom content
Pages, Posts, Tags… Videos ?
● Create a new template named videos.tpl
● The new content of type video should set it in the content file header :type:
● We will pass the youtube video id to the template via content header :video:
● If you want to add a new type of content you should associate the new type of templates in
jbake.properties
○ template.<newtype>.tpl=<nameofthetemplate>
Videos
Asciidoctor Extensions
Asciidoctor extensions
● Add extra features to your entries adding extension such as:
○ Comments
○ Render mathematical formulas
○ Diagrams
○ QR Code
○ ...
Asciidoctor Diagram
● Already added to JBake
● We have to enable it in the jbake.properties
Create a diagram
● In your asciidoctor content files write a ditaa diagram:
Add Disqus
● Puravida extensions
○ https://puravida-software.gitlab.io/asciidoctor-extensions/
● Add the following inline directive to your content file
Replace asciidoctor-extensions with the id you registered in Disqus.com
More extensions
● Asciidoctor site extension list
○ https://asciidoctor.org/docs/extensions/
● Puravida extensions
○ https://gitlab.com/puravida-software/asciidoctor-extensions
Add a site to our OSS project
JBake integrates with build tools
● I’ve got an OSS project and I would like to create the project’s site
○ The project is already using a build tool
○ The project already generates different types of docs you’d like to link from the site
■ Javadocs, using guides...etc
● In this case I’ll be using Gradle
○ www.gradle.org
OSS Project
● Simple Gradle Java Project
○ Site
○ Javadoc
● I would like it to have its own site and integrate the javadoc in it
● Show some source code in the web site
Clone project
git clone https://github.com/mariogarcia/jbake_greach.git
Add JBake plugin
● In your build.gradle.kts
Add source code in site
Make asciidoctor content files aware...
● You need to pass where the source files are to being able to include them in the web page
○ Set configuration.asciidoctor.attributes
Include source code in documentation
● Use asciidoctor include directive
Access javadoc from site
Include javadoc
● Generate javadoc
● Copy javadoc to jbake output dir
● Add link to javadoc index.html page
Include javadoc (cont.)
Include javadoc
● Link it from documentation.adoc
● It’s just a relative link to javadoc/index.html
Include javadoc
Add Disqus
Add Disqus
● Add Puravida Extensions
Add Disqus
● Add disqus directive to documentation.adoc
○ Check https://puravida-software.gitlab.io/asciidoctor-extensions
Integrate asciidoc
Asciidoctor user guide
● Add asciidoctor plugin
Asciidoctor
● Generate content (modify src/main/index.adoc) and then
○ ./gradlew ascii
● Copy generated output to jbake output
○ from build/asciidoc/html5
○ into build/jbake/guide
● Include relative link to user guide in documentation.adoc
Asciidoctor
Asciidoctor
Summary
Summary
● Jbake great for create blog content or micro sites
● Good integration with existing build tools
● Good integration with asciidoctor
● I hope you liked it

Contenu connexe

Tendances

Chicago Salesforce Saturday - Tools Presentation
Chicago Salesforce Saturday  - Tools PresentationChicago Salesforce Saturday  - Tools Presentation
Chicago Salesforce Saturday - Tools PresentationDavid Helgerson
 
Mobile Browser Internal (Blink Rendering Engine)
Mobile Browser Internal (Blink Rendering Engine)Mobile Browser Internal (Blink Rendering Engine)
Mobile Browser Internal (Blink Rendering Engine)Hyungwook Lee
 
GWT - Building Rich Internet Applications Using OO Tools
GWT - Building Rich Internet Applications Using OO ToolsGWT - Building Rich Internet Applications Using OO Tools
GWT - Building Rich Internet Applications Using OO Toolsbarciszewski
 
JavascriptMVC: Another choice of web framework
JavascriptMVC: Another choice of web frameworkJavascriptMVC: Another choice of web framework
JavascriptMVC: Another choice of web frameworkAlive Kuo
 
Chromium contribution
Chromium contributionChromium contribution
Chromium contributionGyuyoung Kim
 
React JS Belgium Touch Base - React, Flux, React Native
React JS Belgium Touch Base - React, Flux, React NativeReact JS Belgium Touch Base - React, Flux, React Native
React JS Belgium Touch Base - React, Flux, React NativePhilos.io
 
Drupal BigPipe: What have I learned
Drupal BigPipe: What have I learnedDrupal BigPipe: What have I learned
Drupal BigPipe: What have I learnedRadim Klaška
 
The state of navigator.register protocolhandler
The state of navigator.register protocolhandlerThe state of navigator.register protocolhandler
The state of navigator.register protocolhandlerGyuyoung Kim
 
Exploring Google APIs with Python
Exploring Google APIs with PythonExploring Google APIs with Python
Exploring Google APIs with Pythonwesley chun
 
The Internal Architecture of Chrome Developer Tools
The Internal Architecture of Chrome Developer ToolsThe Internal Architecture of Chrome Developer Tools
The Internal Architecture of Chrome Developer ToolsMiroslav Bajtoš
 
WebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 Revolution
WebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 RevolutionWebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 Revolution
WebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 Revolutionjuanjosanchezpenas
 
Saigon Wordpress Meetup - Best practices for plugin development - A WordPress...
Saigon Wordpress Meetup - Best practices for plugin development - A WordPress...Saigon Wordpress Meetup - Best practices for plugin development - A WordPress...
Saigon Wordpress Meetup - Best practices for plugin development - A WordPress...Triết Sài Gòn
 
G Suite & Google APIs coding workshop
G Suite & Google APIs coding workshopG Suite & Google APIs coding workshop
G Suite & Google APIs coding workshopwesley chun
 
WebKit and Blink: open development powering the HTML5 revolution
WebKit and Blink: open development powering the HTML5 revolutionWebKit and Blink: open development powering the HTML5 revolution
WebKit and Blink: open development powering the HTML5 revolutionjuanjosanchezpenas
 
React Conf, Dhaka 2018 - Understanding React: The React Way of Doing Things b...
React Conf, Dhaka 2018 - Understanding React: The React Way of Doing Things b...React Conf, Dhaka 2018 - Understanding React: The React Way of Doing Things b...
React Conf, Dhaka 2018 - Understanding React: The React Way of Doing Things b...Tamal Chowdhury
 
Building a Browser for Automotive: Alternatives, Challenges and Recommendations
Building a Browser for Automotive: Alternatives, Challenges and RecommendationsBuilding a Browser for Automotive: Alternatives, Challenges and Recommendations
Building a Browser for Automotive: Alternatives, Challenges and Recommendationsjuanjosanchezpenas
 
OVERVIEW: Chromium Source Tree
OVERVIEW: Chromium Source TreeOVERVIEW: Chromium Source Tree
OVERVIEW: Chromium Source TreeChang W. Doh
 

Tendances (19)

Chicago Salesforce Saturday - Tools Presentation
Chicago Salesforce Saturday  - Tools PresentationChicago Salesforce Saturday  - Tools Presentation
Chicago Salesforce Saturday - Tools Presentation
 
Mobile Browser Internal (Blink Rendering Engine)
Mobile Browser Internal (Blink Rendering Engine)Mobile Browser Internal (Blink Rendering Engine)
Mobile Browser Internal (Blink Rendering Engine)
 
GWT - Building Rich Internet Applications Using OO Tools
GWT - Building Rich Internet Applications Using OO ToolsGWT - Building Rich Internet Applications Using OO Tools
GWT - Building Rich Internet Applications Using OO Tools
 
Chromium wayland
Chromium waylandChromium wayland
Chromium wayland
 
JavascriptMVC: Another choice of web framework
JavascriptMVC: Another choice of web frameworkJavascriptMVC: Another choice of web framework
JavascriptMVC: Another choice of web framework
 
Chromium contribution
Chromium contributionChromium contribution
Chromium contribution
 
React JS Belgium Touch Base - React, Flux, React Native
React JS Belgium Touch Base - React, Flux, React NativeReact JS Belgium Touch Base - React, Flux, React Native
React JS Belgium Touch Base - React, Flux, React Native
 
Drupal BigPipe: What have I learned
Drupal BigPipe: What have I learnedDrupal BigPipe: What have I learned
Drupal BigPipe: What have I learned
 
The state of navigator.register protocolhandler
The state of navigator.register protocolhandlerThe state of navigator.register protocolhandler
The state of navigator.register protocolhandler
 
Exploring Google APIs with Python
Exploring Google APIs with PythonExploring Google APIs with Python
Exploring Google APIs with Python
 
The Internal Architecture of Chrome Developer Tools
The Internal Architecture of Chrome Developer ToolsThe Internal Architecture of Chrome Developer Tools
The Internal Architecture of Chrome Developer Tools
 
WebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 Revolution
WebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 RevolutionWebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 Revolution
WebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 Revolution
 
Rails + Webpack
Rails + WebpackRails + Webpack
Rails + Webpack
 
Saigon Wordpress Meetup - Best practices for plugin development - A WordPress...
Saigon Wordpress Meetup - Best practices for plugin development - A WordPress...Saigon Wordpress Meetup - Best practices for plugin development - A WordPress...
Saigon Wordpress Meetup - Best practices for plugin development - A WordPress...
 
G Suite & Google APIs coding workshop
G Suite & Google APIs coding workshopG Suite & Google APIs coding workshop
G Suite & Google APIs coding workshop
 
WebKit and Blink: open development powering the HTML5 revolution
WebKit and Blink: open development powering the HTML5 revolutionWebKit and Blink: open development powering the HTML5 revolution
WebKit and Blink: open development powering the HTML5 revolution
 
React Conf, Dhaka 2018 - Understanding React: The React Way of Doing Things b...
React Conf, Dhaka 2018 - Understanding React: The React Way of Doing Things b...React Conf, Dhaka 2018 - Understanding React: The React Way of Doing Things b...
React Conf, Dhaka 2018 - Understanding React: The React Way of Doing Things b...
 
Building a Browser for Automotive: Alternatives, Challenges and Recommendations
Building a Browser for Automotive: Alternatives, Challenges and RecommendationsBuilding a Browser for Automotive: Alternatives, Challenges and Recommendations
Building a Browser for Automotive: Alternatives, Challenges and Recommendations
 
OVERVIEW: Chromium Source Tree
OVERVIEW: Chromium Source TreeOVERVIEW: Chromium Source Tree
OVERVIEW: Chromium Source Tree
 

Similaire à Jbake workshop (Greach 2019)

Architektura html, css i javascript - Jan Kraus
Architektura html, css i javascript - Jan KrausArchitektura html, css i javascript - Jan Kraus
Architektura html, css i javascript - Jan KrausWomen in Technology Poland
 
A New CLI for Spring Developer Productivity
A New CLI for Spring Developer ProductivityA New CLI for Spring Developer Productivity
A New CLI for Spring Developer ProductivityVMware Tanzu
 
2014 03-25 - GDG Nantes - Web Components avec Polymer
2014 03-25 - GDG Nantes - Web Components avec Polymer2014 03-25 - GDG Nantes - Web Components avec Polymer
2014 03-25 - GDG Nantes - Web Components avec PolymerHoracio Gonzalez
 
React native: building native iOS apps with javascript
React native: building native iOS apps with javascriptReact native: building native iOS apps with javascript
React native: building native iOS apps with javascriptPolidea
 
2016 stop writing javascript frameworks by Joe Gregorio
2016 stop writing javascript frameworks by Joe Gregorio2016 stop writing javascript frameworks by Joe Gregorio
2016 stop writing javascript frameworks by Joe GregorioDavid Zapateria Besteiro
 
SHOW202: How to customize Lotus Quickr Templates Using HTML, Javascript and C...
SHOW202: How to customize Lotus Quickr Templates Using HTML, Javascript and C...SHOW202: How to customize Lotus Quickr Templates Using HTML, Javascript and C...
SHOW202: How to customize Lotus Quickr Templates Using HTML, Javascript and C...Brian O'Gorman
 
Gutenberg Extended
Gutenberg ExtendedGutenberg Extended
Gutenberg ExtendedSören Wrede
 
Iteria lowcode 2022-01-10
Iteria lowcode 2022-01-10Iteria lowcode 2022-01-10
Iteria lowcode 2022-01-10Jozef Slezak
 
HTML, CSS & Javascript Architecture (extended version) - Jan Kraus
HTML, CSS & Javascript Architecture (extended version) - Jan KrausHTML, CSS & Javascript Architecture (extended version) - Jan Kraus
HTML, CSS & Javascript Architecture (extended version) - Jan KrausWomen in Technology Poland
 
Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...
Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...
Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...Develcz
 
Second Skin: Real-Time Retheming a Legacy Web Application with Diazo in the C...
Second Skin: Real-Time Retheming a Legacy Web Application with Diazo in the C...Second Skin: Real-Time Retheming a Legacy Web Application with Diazo in the C...
Second Skin: Real-Time Retheming a Legacy Web Application with Diazo in the C...Chris Shenton
 
project_proposal_osrf
project_proposal_osrfproject_proposal_osrf
project_proposal_osrfom1234567890
 
Best Practices in Component Development for MODX
Best Practices in Component Development for MODXBest Practices in Component Development for MODX
Best Practices in Component Development for MODXJan Tezner
 
Developing word press professionally
Developing word press professionallyDeveloping word press professionally
Developing word press professionallyAustin Gil
 
GitBucket: Open source self-hosting Git server built by Scala
GitBucket: Open source self-hosting Git server built by ScalaGitBucket: Open source self-hosting Git server built by Scala
GitBucket: Open source self-hosting Git server built by Scalatakezoe
 
Speedrun: Build a Website with Panels, Media, and More in 45 Minutes
Speedrun: Build a Website with Panels, Media, and More in 45 MinutesSpeedrun: Build a Website with Panels, Media, and More in 45 Minutes
Speedrun: Build a Website with Panels, Media, and More in 45 MinutesAcquia
 

Similaire à Jbake workshop (Greach 2019) (20)

Architektura html, css i javascript - Jan Kraus
Architektura html, css i javascript - Jan KrausArchitektura html, css i javascript - Jan Kraus
Architektura html, css i javascript - Jan Kraus
 
A New CLI for Spring Developer Productivity
A New CLI for Spring Developer ProductivityA New CLI for Spring Developer Productivity
A New CLI for Spring Developer Productivity
 
Html5 training
Html5 trainingHtml5 training
Html5 training
 
2014 03-25 - GDG Nantes - Web Components avec Polymer
2014 03-25 - GDG Nantes - Web Components avec Polymer2014 03-25 - GDG Nantes - Web Components avec Polymer
2014 03-25 - GDG Nantes - Web Components avec Polymer
 
React native: building native iOS apps with javascript
React native: building native iOS apps with javascriptReact native: building native iOS apps with javascript
React native: building native iOS apps with javascript
 
2016 stop writing javascript frameworks by Joe Gregorio
2016 stop writing javascript frameworks by Joe Gregorio2016 stop writing javascript frameworks by Joe Gregorio
2016 stop writing javascript frameworks by Joe Gregorio
 
SHOW202: How to customize Lotus Quickr Templates Using HTML, Javascript and C...
SHOW202: How to customize Lotus Quickr Templates Using HTML, Javascript and C...SHOW202: How to customize Lotus Quickr Templates Using HTML, Javascript and C...
SHOW202: How to customize Lotus Quickr Templates Using HTML, Javascript and C...
 
Code-Hub
Code-HubCode-Hub
Code-Hub
 
Gutenberg Extended
Gutenberg ExtendedGutenberg Extended
Gutenberg Extended
 
Iteria lowcode 2022-01-10
Iteria lowcode 2022-01-10Iteria lowcode 2022-01-10
Iteria lowcode 2022-01-10
 
Bootstrap4 x pages
Bootstrap4 x pagesBootstrap4 x pages
Bootstrap4 x pages
 
HTML, CSS & Javascript Architecture (extended version) - Jan Kraus
HTML, CSS & Javascript Architecture (extended version) - Jan KrausHTML, CSS & Javascript Architecture (extended version) - Jan Kraus
HTML, CSS & Javascript Architecture (extended version) - Jan Kraus
 
Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...
Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...
Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...
 
Second Skin: Real-Time Retheming a Legacy Web Application with Diazo in the C...
Second Skin: Real-Time Retheming a Legacy Web Application with Diazo in the C...Second Skin: Real-Time Retheming a Legacy Web Application with Diazo in the C...
Second Skin: Real-Time Retheming a Legacy Web Application with Diazo in the C...
 
project_proposal_osrf
project_proposal_osrfproject_proposal_osrf
project_proposal_osrf
 
Best Practices in Component Development for MODX
Best Practices in Component Development for MODXBest Practices in Component Development for MODX
Best Practices in Component Development for MODX
 
Developing word press professionally
Developing word press professionallyDeveloping word press professionally
Developing word press professionally
 
GitBucket: Open source self-hosting Git server built by Scala
GitBucket: Open source self-hosting Git server built by ScalaGitBucket: Open source self-hosting Git server built by Scala
GitBucket: Open source self-hosting Git server built by Scala
 
Drools & jBPM Workshop London 2013
Drools & jBPM Workshop London 2013Drools & jBPM Workshop London 2013
Drools & jBPM Workshop London 2013
 
Speedrun: Build a Website with Panels, Media, and More in 45 Minutes
Speedrun: Build a Website with Panels, Media, and More in 45 MinutesSpeedrun: Build a Website with Panels, Media, and More in 45 Minutes
Speedrun: Build a Website with Panels, Media, and More in 45 Minutes
 

Plus de Mario García

Blockchain 101 (spanish)
Blockchain 101 (spanish)Blockchain 101 (spanish)
Blockchain 101 (spanish)Mario García
 
Groovy 2.5 and 3.0 (Spanish)
Groovy 2.5 and 3.0 (Spanish)Groovy 2.5 and 3.0 (Spanish)
Groovy 2.5 and 3.0 (Spanish)Mario García
 
Calidad del codigo (MadridGUG)
Calidad del codigo (MadridGUG)Calidad del codigo (MadridGUG)
Calidad del codigo (MadridGUG)Mario García
 
Macro macro, burrito burrit
Macro macro, burrito burritMacro macro, burrito burrit
Macro macro, burrito burritMario García
 
Creating ASTTs The painful truth
Creating ASTTs The painful truthCreating ASTTs The painful truth
Creating ASTTs The painful truthMario García
 
Functional Programming with Groovy
Functional Programming with GroovyFunctional Programming with Groovy
Functional Programming with GroovyMario García
 
Test Motherfucker...Test
Test Motherfucker...TestTest Motherfucker...Test
Test Motherfucker...TestMario García
 
Programación concurrente con GPars
Programación concurrente con GParsProgramación concurrente con GPars
Programación concurrente con GParsMario García
 
Greach 2011 : Creando Plugins Con Griffon
Greach 2011 : Creando Plugins Con GriffonGreach 2011 : Creando Plugins Con Griffon
Greach 2011 : Creando Plugins Con GriffonMario García
 

Plus de Mario García (16)

Blockchain 101 (spanish)
Blockchain 101 (spanish)Blockchain 101 (spanish)
Blockchain 101 (spanish)
 
Groovy 2.5 and 3.0 (Spanish)
Groovy 2.5 and 3.0 (Spanish)Groovy 2.5 and 3.0 (Spanish)
Groovy 2.5 and 3.0 (Spanish)
 
GraphQL & Ratpack
GraphQL & RatpackGraphQL & Ratpack
GraphQL & Ratpack
 
GraphQL y Groovy
GraphQL y GroovyGraphQL y Groovy
GraphQL y Groovy
 
Calidad del codigo (MadridGUG)
Calidad del codigo (MadridGUG)Calidad del codigo (MadridGUG)
Calidad del codigo (MadridGUG)
 
GraphQL and Groovy
GraphQL and GroovyGraphQL and Groovy
GraphQL and Groovy
 
Macro macro, burrito burrit
Macro macro, burrito burritMacro macro, burrito burrit
Macro macro, burrito burrit
 
Creating ASTTs The painful truth
Creating ASTTs The painful truthCreating ASTTs The painful truth
Creating ASTTs The painful truth
 
Groovy android
Groovy androidGroovy android
Groovy android
 
Groovy on Android
Groovy on AndroidGroovy on Android
Groovy on Android
 
Gpars Workshop 2014
Gpars Workshop 2014Gpars Workshop 2014
Gpars Workshop 2014
 
Functional Programming with Groovy
Functional Programming with GroovyFunctional Programming with Groovy
Functional Programming with Groovy
 
Test Motherfucker...Test
Test Motherfucker...TestTest Motherfucker...Test
Test Motherfucker...Test
 
Programación concurrente con GPars
Programación concurrente con GParsProgramación concurrente con GPars
Programación concurrente con GPars
 
Gradle vs Maven
Gradle vs MavenGradle vs Maven
Gradle vs Maven
 
Greach 2011 : Creando Plugins Con Griffon
Greach 2011 : Creando Plugins Con GriffonGreach 2011 : Creando Plugins Con Griffon
Greach 2011 : Creando Plugins Con Griffon
 

Dernier

Generative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilGenerative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilVICTOR MAESTRE RAMIREZ
 
Streamlining Your Application Builds with Cloud Native Buildpacks
Streamlining Your Application Builds  with Cloud Native BuildpacksStreamlining Your Application Builds  with Cloud Native Buildpacks
Streamlining Your Application Builds with Cloud Native BuildpacksVish Abrams
 
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfTobias Schneck
 
Why Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfWhy Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfBrain Inventory
 
Webinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.pptWebinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.pptkinjal48
 
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Jaydeep Chhasatia
 
eAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionseAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionsNirav Modi
 
OpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorOpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorShane Coughlan
 
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.Sharon Liu
 
Fields in Java and Kotlin and what to expect.pptx
Fields in Java and Kotlin and what to expect.pptxFields in Java and Kotlin and what to expect.pptx
Fields in Java and Kotlin and what to expect.pptxJoão Esperancinha
 
Sales Territory Management: A Definitive Guide to Expand Sales Coverage
Sales Territory Management: A Definitive Guide to Expand Sales CoverageSales Territory Management: A Definitive Guide to Expand Sales Coverage
Sales Territory Management: A Definitive Guide to Expand Sales CoverageDista
 
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...OnePlan Solutions
 
How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?AmeliaSmith90
 
Cybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadCybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadIvo Andreev
 
JS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIJS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIIvo Andreev
 
IA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeIA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeNeo4j
 
Kawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies
 
AI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyAI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyRaymond Okyere-Forson
 
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine HarmonyLeveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmonyelliciumsolutionspun
 
online pdf editor software solutions.pdf
online pdf editor software solutions.pdfonline pdf editor software solutions.pdf
online pdf editor software solutions.pdfMeon Technology
 

Dernier (20)

Generative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilGenerative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-Council
 
Streamlining Your Application Builds with Cloud Native Buildpacks
Streamlining Your Application Builds  with Cloud Native BuildpacksStreamlining Your Application Builds  with Cloud Native Buildpacks
Streamlining Your Application Builds with Cloud Native Buildpacks
 
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
 
Why Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfWhy Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdf
 
Webinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.pptWebinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.ppt
 
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
 
eAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionseAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspections
 
OpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorOpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS Calculator
 
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
 
Fields in Java and Kotlin and what to expect.pptx
Fields in Java and Kotlin and what to expect.pptxFields in Java and Kotlin and what to expect.pptx
Fields in Java and Kotlin and what to expect.pptx
 
Sales Territory Management: A Definitive Guide to Expand Sales Coverage
Sales Territory Management: A Definitive Guide to Expand Sales CoverageSales Territory Management: A Definitive Guide to Expand Sales Coverage
Sales Territory Management: A Definitive Guide to Expand Sales Coverage
 
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
 
How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?
 
Cybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadCybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and Bad
 
JS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIJS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AI
 
IA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeIA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG time
 
Kawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in Trivandrum
 
AI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyAI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human Beauty
 
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine HarmonyLeveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
 
online pdf editor software solutions.pdf
online pdf editor software solutions.pdfonline pdf editor software solutions.pdf
online pdf editor software solutions.pdf
 

Jbake workshop (Greach 2019)

  • 2. Me ● Mario Garcia ● Working at Kaleidos.net ● Mostly Backend Developer (Java, Groovy) ● Some Frontend lately (React, Vue, CSS still not my thing)
  • 3. Schedule ● What is JBake and use cases ● Installation ● Basic commands ● Blog ○ Create content ○ Templates ○ Custom content ○ Asciidoctor extensions ○ Push it to Github
  • 4. Schedule ● Break (15 min) ● Project OSS ○ Some code in Gradle project ○ Configure bake ○ Include javadoc ○ Include asciidoctor doc
  • 5. What is JBake “JBake is a Java based, open source, static site/blog generator for developers & designers”
  • 6. Some features ● Self contained ● Integrated with other build tools (Gradle, Maven, SBT…) ● Content formats (asciidoctor, markdown, html) ● Multiple template support ● Draft support ● ….
  • 9. ● Prerequisites ○ JDK 8 ● Three scenarios ○ Download BINARY directly ○ Install via SDKMAN command line (sdkman.io) ○ Integrate with your favourite BUILDING TOOL Installation
  • 10. SDKMAN ● Install sdkman (https://sdkman.io/install) ● Then “sdk install jbake”
  • 11. Download binary ● Go to https://jbake.org/download.html ● Click on the latest distribution ● Decompress the zip wherever you want ● Make sure the jbake command is available in your console path ○ If you’re in linux e.g. modify .bashrc to add jbake command to the $PATH
  • 12. Integrate with your build tool We’ll see an example in the second part of this workshop with Gradle
  • 13. Use your favourite IDE ● Use any IDE with syntax highlight for ○ Asciidoctor ○ Markdown ○ HTML ○ Groovy
  • 14. Get used with the basics
  • 15. Basic commands ● We’re still playing so create a temporary folder ○ Check JBake help ■ jbake --help ○ Create folder nameofproject ■ jbake -i <nameofproject> ○ Browse the structure with your favourite editor
  • 16. Basic commands ● Bake content to get html ○ Get into the <nameoftheproject> folder then execute ■ jbake -b ○ That will produce the final output of the blog, to browse it as if it were published online, do: ■ jbake -s
  • 17. Create a new blog
  • 18. Create greachblog ● Create the new project using Groovy MTE as template engine ○ jbake -i -t groovy-mte greachblog ● Lets comment on the structure and templates a little bit
  • 19. Structure ● Directories ○ assets: css, js, images… ○ content: asciidoctor, markdown or html files ○ templates: Templates to interpret content files and produce the final ouput result ● jbake.properties ○ JBake configuration
  • 21. About Groovy templates ● No need for enclosing tag. Braces mark the scope
  • 22. About Groovy templates ● Plain strings can be inserted using yield or yieldUnscaped
  • 23. Lets create a new entry
  • 24. Open the project in your favourite editor ● Mines are (the ones I can help you with) ○ Emacs ○ IntelliJ ● But any editor should work. ● Look for plugins/extensions that could help you rendering/highlighting Markdown or Asciidoctor syntax
  • 25. Asciidoctor ● “A fast text processor & publishing toolchain for converting AsciiDoc to HTML5, DocBook & more”. ○ Asciidoctor: https://asciidoctor.org/ ○ Syntax Reference: https://asciidoctor.org/docs/asciidoc-syntax-quick-reference
  • 26. Create an entry for today ● Create an asciidoctor file ○ greachblog/content/2019/03/28/greach_jbake_workshop.adoc ● Copy the following content:
  • 28. Then bake it and serve it locally ● Execute with -s (it does bake and serve altogether) ○ jbake -s
  • 30. I don’t see my name in the entry ● We would like all blog entries to show the name of the author ● What do we need ? ○ Know about the JBAKE DATA MODEL ○ Modify the template to add the property author ○ Bake it again
  • 31. JBake Data Model ● Global variables: These data variables are available to all templates regardless of the type. ● Page / Post / Custom: Variables for predefined templates as well as any custom templates you created yourself ● Index: The index template has extra data variables available to it related to paging ● Tags: Data related to published tagged documents https://jbake.org/docs/2.6.4/#data_model
  • 32. Add the author ● Task 1 ○ Go to post-brick.tpl and add the author somewhere ○ Check JBake post related variables https://jbake.org/docs/2.6.4/#data_model
  • 33. ● Task 2 ○ I would like to write code in its own source file and then show it partially in the blog entry. I also want to be able to download the sample code ■ You can add a :metaproperty: in the asciidoc document header called attached with the name of the script ■ Add the script at the same place as the asciidoc document ■ Add an href in the header to “download” the attached document getting the name from the post headers Attach code to entry
  • 35. Pages, Posts, Tags… Videos ? ● Create a new template named videos.tpl ● The new content of type video should set it in the content file header :type: ● We will pass the youtube video id to the template via content header :video: ● If you want to add a new type of content you should associate the new type of templates in jbake.properties ○ template.<newtype>.tpl=<nameofthetemplate>
  • 38. Asciidoctor extensions ● Add extra features to your entries adding extension such as: ○ Comments ○ Render mathematical formulas ○ Diagrams ○ QR Code ○ ...
  • 39. Asciidoctor Diagram ● Already added to JBake ● We have to enable it in the jbake.properties
  • 40. Create a diagram ● In your asciidoctor content files write a ditaa diagram:
  • 41. Add Disqus ● Puravida extensions ○ https://puravida-software.gitlab.io/asciidoctor-extensions/ ● Add the following inline directive to your content file Replace asciidoctor-extensions with the id you registered in Disqus.com
  • 42. More extensions ● Asciidoctor site extension list ○ https://asciidoctor.org/docs/extensions/ ● Puravida extensions ○ https://gitlab.com/puravida-software/asciidoctor-extensions
  • 43. Add a site to our OSS project
  • 44. JBake integrates with build tools ● I’ve got an OSS project and I would like to create the project’s site ○ The project is already using a build tool ○ The project already generates different types of docs you’d like to link from the site ■ Javadocs, using guides...etc ● In this case I’ll be using Gradle ○ www.gradle.org
  • 45. OSS Project ● Simple Gradle Java Project ○ Site ○ Javadoc ● I would like it to have its own site and integrate the javadoc in it ● Show some source code in the web site
  • 46. Clone project git clone https://github.com/mariogarcia/jbake_greach.git
  • 47. Add JBake plugin ● In your build.gradle.kts
  • 48. Add source code in site
  • 49. Make asciidoctor content files aware... ● You need to pass where the source files are to being able to include them in the web page ○ Set configuration.asciidoctor.attributes
  • 50. Include source code in documentation ● Use asciidoctor include directive
  • 52. Include javadoc ● Generate javadoc ● Copy javadoc to jbake output dir ● Add link to javadoc index.html page
  • 54. Include javadoc ● Link it from documentation.adoc ● It’s just a relative link to javadoc/index.html
  • 57. Add Disqus ● Add Puravida Extensions
  • 58. Add Disqus ● Add disqus directive to documentation.adoc ○ Check https://puravida-software.gitlab.io/asciidoctor-extensions
  • 60. Asciidoctor user guide ● Add asciidoctor plugin
  • 61. Asciidoctor ● Generate content (modify src/main/index.adoc) and then ○ ./gradlew ascii ● Copy generated output to jbake output ○ from build/asciidoc/html5 ○ into build/jbake/guide ● Include relative link to user guide in documentation.adoc
  • 65. Summary ● Jbake great for create blog content or micro sites ● Good integration with existing build tools ● Good integration with asciidoctor ● I hope you liked it