SlideShare a Scribd company logo
LINE developers site the tech behind the docs
LINE Developers Site:
The Tech Behind the Docs
Mark Serrano

Technical Consulting Team
- Goals for the Redesign
- Moving from Wordpress to a
Static Site
- Implementing the New
Document Site in Middleman
Agenda
Goals for the Design
Improve Developer Experience
Goals for the Redesign
Do this by improving the authoring process so that we
can focus on writing higher quality documentation
Lower barriers for writing docs
Improvements to the Authoring Process
Transparent Documentation
Encourage collaboration
Plain Text Format Version Control Built like source
code
Docs as Code
Documents are written in Markdown
Docs as Code at LINE
All documents are managed on GitHub
Documents are built using an automated process
Moving from Wordpress to a
Static Site
Not as flexible as we needed
Wordpress Pains
Maintenance and security patches required
Collaboration and reviews were difficult
Version control system is not ideal
What is a Static Site Generator?
Templates
Content
Data
Static Site Generator
HTML
Pages
HTML
Pages
Static
HTML
Pages
Flexibility
Advantages of going Static
GitHub Workflow
Low maintenance
Load speed
Static site generator built in Ruby
High level of customization
Markdown renderer support
ERB Templates
Enter the Middleman
Implementing the Site in
Middleman
Created ERB templates from static page designs
Implementing the Site
Custom middleman extension used to apply style
Content written in Markdown, menus in YAML files
Document authors only edit markdown and YAML files
Custom Middleman Plugin
Custom Middleman
Extension
Style
Converter
Custom

Markdown
Helper
Methods
Markdown
Content
---
title: "Social API overview"
source_language: "en"
---
The Social API is an HTTP-based API that provides access to
data on the LINE Platform such as LINE user IDs, display
names, profile images, and status messages.
## Getting a user token
Sending Social API requests requires the use of an access
token to access data on a user's behalf. To get an access
token, integrate [LINE Login][line-login] into your app. For
more information on using LINE Login with different types of
apps, see the following articles.
- [Integrate LINE Login for iOS][integrate-login-ios]
- [Integrate LINE Login for Android][integrate-login-
android]
- [Integrate LINE Login for web][integrate-login-web]
## Guides
See the following pages for more information on using the
Social API.
- [Getting user profiles][get-profile-social]
- [Logging out users][logout-social]
- [Managing access tokens][tokens-social]
Document Content in Markdown
sidebar_title: "Social API"
menu_items:
- title: "Guides"
url:
subpages:
- title: "Overview"
url: "/docs/social-api/overview"
subpages: []
- title: "Getting user profiles"
url: "/docs/social-api/getting-user-
profiles"
subpages: []
- title: "Logging out users"
url: "/docs/social-api/logging-out-
users"
subpages: []
- title: "Managing access tokens"
url: "/docs/social-api/managing-
access-tokens"
subpages: []
- title: "Reference"
url:
subpages:
- title: "Social API Reference"
url: "/docs/social-api/reference"
subpages: []
Menus in YAML
Inherited from Redcarpet markdown renderer
Custom Markdown
Used to render elements that standard markdown
cannot
Normal Markdown Table
#### Request headers
Request header | Description
-------------- | ---
Content-Type | application/json
Authorization | Bearer `{Channel Access Token}`
Headerless Table
|>|
|| **Superclass** | `NSObject` |
|| **Declared in** | LineSDKAPI.h |
|>|
Helper Method: Glossary Entry
## Friends
<%= display_glossary_definition "beacon-banner" %>
## Friends 2
<%= display_glossary_definition "add-friend-button" %>
Document Build Process
Doc Author
Pull
Request
Master
Branch
Middleman

Build
Deploy
Automated

Testing
We focused on improving the authoring process in our
developer site redesign
In Conclusion
We moved from Wordpress to a static site
generator called Middleman
We created a custom middleman extension that helps
our document writers focus on writing content
A better authoring process allows our writers to focus
on writing higher quality docs for you
Thank you

More Related Content

What's hot (20)

PPTX
Visual Studio ❤ JavaScript
Robert MacLean
 
PPTX
Rest With Raml
vijay dhanakodi
 
PPTX
Developing an aspnet web application
Rahul Bansal
 
PDF
Designing an effective hybrid apps automation framework
Andrea Tino
 
PDF
Wso2 product release webinar introducing jaggery
WSO2
 
PDF
Why Would A Programmer Fall In Love With SPA?
Netguru
 
PDF
Anatomy of a Progressive Web App
Mike North
 
PDF
Progressive Web Application by Citytech
Ritwik Das
 
PPTX
Lightning web components
Cloud Analogy
 
PPTX
ASP.NET
Robert MacLean
 
PPT
Restful services with ColdFusion
ColdFusionConference
 
PPT
ASP.NET OVERVIEW
Rishi Kothari
 
PPTX
Using WordPress as a web application platform
Joe Querin
 
PDF
Building Desktop RIAs with PHP, HTML & Javascript in AIR
funkatron
 
PPTX
Software components design for poc and mvp, keep it simple but be ready to sc...
Roman Taluyev
 
PPTX
40行で書ける! Serverless LINE BOT
LINE Corporation
 
PDF
API for Beginners
Sébastien Saunier
 
PPT
Developing an ASP.NET Web Application
Rishi Kothari
 
PPT
Intro To Asp Net And Web Forms
SAMIR BHOGAYTA
 
PPTX
Selenium webcrawler
Rabia Khalid
 
Visual Studio ❤ JavaScript
Robert MacLean
 
Rest With Raml
vijay dhanakodi
 
Developing an aspnet web application
Rahul Bansal
 
Designing an effective hybrid apps automation framework
Andrea Tino
 
Wso2 product release webinar introducing jaggery
WSO2
 
Why Would A Programmer Fall In Love With SPA?
Netguru
 
Anatomy of a Progressive Web App
Mike North
 
Progressive Web Application by Citytech
Ritwik Das
 
Lightning web components
Cloud Analogy
 
Restful services with ColdFusion
ColdFusionConference
 
ASP.NET OVERVIEW
Rishi Kothari
 
Using WordPress as a web application platform
Joe Querin
 
Building Desktop RIAs with PHP, HTML & Javascript in AIR
funkatron
 
Software components design for poc and mvp, keep it simple but be ready to sc...
Roman Taluyev
 
40行で書ける! Serverless LINE BOT
LINE Corporation
 
API for Beginners
Sébastien Saunier
 
Developing an ASP.NET Web Application
Rishi Kothari
 
Intro To Asp Net And Web Forms
SAMIR BHOGAYTA
 
Selenium webcrawler
Rabia Khalid
 

Similar to LINE developers site the tech behind the docs (20)

PDF
A Complete Guide to Python Web Development
SparxIT
 
PPT
TERMINALFOUR t44u 2008 - Piero Tintori - Integration Publishing To Share Poin...
Terminalfour
 
PDF
Summit Australia 2019 - PowerApp Portals - Andrew Ly & Lachlan Wright
Andrew Ly
 
PPT
Build Database Applications for SharePoint!
Iron Speed
 
PPT
Build Database Applications for SharePoint
Iron Speed
 
PPT
Microsoft Share Point Branding & Customization
yeschandana
 
PPT
Getting Started with Iron Speed Designer
Iron Speed
 
PPT
IBM WebSphere Portal
Vincent Perrin
 
PPT
Castle in the Clouds: SaaS Enabling JavaServer™ Faces Applications (JavaOne 2...
Lucas Jellema
 
PDF
An Introduction to Django Web Framework
David Gibbons
 
DOCX
E-COMMERCE-PPROJECT-REPORT FOR ALL DESIGN AND ASSCESSORIES MAKE A REPORT
Rai University
 
PPTX
Introducción al SharePoint Framework SPFx
SUGES (SharePoint Users Group España)
 
PPTX
Electronic Commerce Basic concept and Security
CHITHRA D
 
PDF
HIDDAYAT RESUME-SHAREPOINT DEVELOPER
HIDDAYAT RASHEED
 
PPTX
Share Point For Beginners V1
MJ Ferdous
 
PPTX
Web development services
webinfomatrix3
 
PPTX
ONLINE PORTAL WITH COMPILER USING C#
Pritam Guchhait
 
PPT
AD303: Building Composite Applications for IBM Workplace Collaboration Servic...
Brian O'Gorman
 
PPTX
PPT on web development & SEO
Prakrati Bansal
 
PPTX
SharePoint 2013 App Provisioning Models
Shailen Sukul
 
A Complete Guide to Python Web Development
SparxIT
 
TERMINALFOUR t44u 2008 - Piero Tintori - Integration Publishing To Share Poin...
Terminalfour
 
Summit Australia 2019 - PowerApp Portals - Andrew Ly & Lachlan Wright
Andrew Ly
 
Build Database Applications for SharePoint!
Iron Speed
 
Build Database Applications for SharePoint
Iron Speed
 
Microsoft Share Point Branding & Customization
yeschandana
 
Getting Started with Iron Speed Designer
Iron Speed
 
IBM WebSphere Portal
Vincent Perrin
 
Castle in the Clouds: SaaS Enabling JavaServer™ Faces Applications (JavaOne 2...
Lucas Jellema
 
An Introduction to Django Web Framework
David Gibbons
 
E-COMMERCE-PPROJECT-REPORT FOR ALL DESIGN AND ASSCESSORIES MAKE A REPORT
Rai University
 
Introducción al SharePoint Framework SPFx
SUGES (SharePoint Users Group España)
 
Electronic Commerce Basic concept and Security
CHITHRA D
 
HIDDAYAT RESUME-SHAREPOINT DEVELOPER
HIDDAYAT RASHEED
 
Share Point For Beginners V1
MJ Ferdous
 
Web development services
webinfomatrix3
 
ONLINE PORTAL WITH COMPILER USING C#
Pritam Guchhait
 
AD303: Building Composite Applications for IBM Workplace Collaboration Servic...
Brian O'Gorman
 
PPT on web development & SEO
Prakrati Bansal
 
SharePoint 2013 App Provisioning Models
Shailen Sukul
 
Ad

More from LINE Corporation (20)

PDF
JJUG CCC 2018 Fall 懇親会LT
LINE Corporation
 
PDF
Reduce dependency on Rx with Kotlin Coroutines
LINE Corporation
 
PDF
Kotlin/NativeでAndroidのNativeメソッドを実装してみた
LINE Corporation
 
PDF
Use Kotlin scripts and Clova SDK to build your Clova extension
LINE Corporation
 
PDF
The Magic of LINE 購物 Testing
LINE Corporation
 
PPTX
GA Test Automation
LINE Corporation
 
PDF
UI Automation Test with JUnit5
LINE Corporation
 
PDF
Feature Detection for UI Testing
LINE Corporation
 
PDF
LINE 新星計劃介紹與新創團隊分享
LINE Corporation
 
PDF
​LINE 技術合作夥伴與應用分享
LINE Corporation
 
PDF
LINE 開發者社群經營與技術推廣
LINE Corporation
 
PDF
日本開發者大會短講分享
LINE Corporation
 
PDF
LINE Chatbot - 活動報名報到設計分享
LINE Corporation
 
PDF
在 LINE 私有雲中使用 Managed Kubernetes
LINE Corporation
 
PDF
LINE TODAY高效率的敏捷測試開發技巧
LINE Corporation
 
PDF
LINE 區塊鏈平台及代幣經濟 - LINK Chain及LINK介紹
LINE Corporation
 
PDF
LINE Things - LINE IoT平台新技術分享
LINE Corporation
 
PDF
LINE Pay - 一卡通支付新體驗
LINE Corporation
 
PDF
LINE Platform API Update - 打造一個更好的Chatbot服務
LINE Corporation
 
PDF
Keynote - ​LINE 的技術策略佈局與跨國產品開發
LINE Corporation
 
JJUG CCC 2018 Fall 懇親会LT
LINE Corporation
 
Reduce dependency on Rx with Kotlin Coroutines
LINE Corporation
 
Kotlin/NativeでAndroidのNativeメソッドを実装してみた
LINE Corporation
 
Use Kotlin scripts and Clova SDK to build your Clova extension
LINE Corporation
 
The Magic of LINE 購物 Testing
LINE Corporation
 
GA Test Automation
LINE Corporation
 
UI Automation Test with JUnit5
LINE Corporation
 
Feature Detection for UI Testing
LINE Corporation
 
LINE 新星計劃介紹與新創團隊分享
LINE Corporation
 
​LINE 技術合作夥伴與應用分享
LINE Corporation
 
LINE 開發者社群經營與技術推廣
LINE Corporation
 
日本開發者大會短講分享
LINE Corporation
 
LINE Chatbot - 活動報名報到設計分享
LINE Corporation
 
在 LINE 私有雲中使用 Managed Kubernetes
LINE Corporation
 
LINE TODAY高效率的敏捷測試開發技巧
LINE Corporation
 
LINE 區塊鏈平台及代幣經濟 - LINK Chain及LINK介紹
LINE Corporation
 
LINE Things - LINE IoT平台新技術分享
LINE Corporation
 
LINE Pay - 一卡通支付新體驗
LINE Corporation
 
LINE Platform API Update - 打造一個更好的Chatbot服務
LINE Corporation
 
Keynote - ​LINE 的技術策略佈局與跨國產品開發
LINE Corporation
 
Ad

Recently uploaded (20)

PDF
Bitcoin for Millennials podcast with Bram, Power Laws of Bitcoin
Stephen Perrenod
 
PDF
"AI Transformation: Directions and Challenges", Pavlo Shaternik
Fwdays
 
PDF
CIFDAQ Market Insights for July 7th 2025
CIFDAQ
 
PPTX
Building Search Using OpenSearch: Limitations and Workarounds
Sease
 
PPTX
From Sci-Fi to Reality: Exploring AI Evolution
Svetlana Meissner
 
PDF
Transcript: New from BookNet Canada for 2025: BNC BiblioShare - Tech Forum 2025
BookNet Canada
 
PDF
Empower Inclusion Through Accessible Java Applications
Ana-Maria Mihalceanu
 
PDF
"Beyond English: Navigating the Challenges of Building a Ukrainian-language R...
Fwdays
 
PDF
Biography of Daniel Podor.pdf
Daniel Podor
 
PPTX
Future Tech Innovations 2025 – A TechLists Insight
TechLists
 
PPTX
The Project Compass - GDG on Campus MSIT
dscmsitkol
 
PDF
DevBcn - Building 10x Organizations Using Modern Productivity Metrics
Justin Reock
 
PDF
July Patch Tuesday
Ivanti
 
PDF
Jak MŚP w Europie Środkowo-Wschodniej odnajdują się w świecie AI
dominikamizerska1
 
PDF
The Rise of AI and IoT in Mobile App Tech.pdf
IMG Global Infotech
 
PDF
Exolore The Essential AI Tools in 2025.pdf
Srinivasan M
 
DOCX
Python coding for beginners !! Start now!#
Rajni Bhardwaj Grover
 
PDF
Using FME to Develop Self-Service CAD Applications for a Major UK Police Force
Safe Software
 
PDF
CIFDAQ Market Wrap for the week of 4th July 2025
CIFDAQ
 
PDF
Reverse Engineering of Security Products: Developing an Advanced Microsoft De...
nwbxhhcyjv
 
Bitcoin for Millennials podcast with Bram, Power Laws of Bitcoin
Stephen Perrenod
 
"AI Transformation: Directions and Challenges", Pavlo Shaternik
Fwdays
 
CIFDAQ Market Insights for July 7th 2025
CIFDAQ
 
Building Search Using OpenSearch: Limitations and Workarounds
Sease
 
From Sci-Fi to Reality: Exploring AI Evolution
Svetlana Meissner
 
Transcript: New from BookNet Canada for 2025: BNC BiblioShare - Tech Forum 2025
BookNet Canada
 
Empower Inclusion Through Accessible Java Applications
Ana-Maria Mihalceanu
 
"Beyond English: Navigating the Challenges of Building a Ukrainian-language R...
Fwdays
 
Biography of Daniel Podor.pdf
Daniel Podor
 
Future Tech Innovations 2025 – A TechLists Insight
TechLists
 
The Project Compass - GDG on Campus MSIT
dscmsitkol
 
DevBcn - Building 10x Organizations Using Modern Productivity Metrics
Justin Reock
 
July Patch Tuesday
Ivanti
 
Jak MŚP w Europie Środkowo-Wschodniej odnajdują się w świecie AI
dominikamizerska1
 
The Rise of AI and IoT in Mobile App Tech.pdf
IMG Global Infotech
 
Exolore The Essential AI Tools in 2025.pdf
Srinivasan M
 
Python coding for beginners !! Start now!#
Rajni Bhardwaj Grover
 
Using FME to Develop Self-Service CAD Applications for a Major UK Police Force
Safe Software
 
CIFDAQ Market Wrap for the week of 4th July 2025
CIFDAQ
 
Reverse Engineering of Security Products: Developing an Advanced Microsoft De...
nwbxhhcyjv
 

LINE developers site the tech behind the docs

  • 2. LINE Developers Site: The Tech Behind the Docs Mark Serrano
 Technical Consulting Team
  • 3. - Goals for the Redesign - Moving from Wordpress to a Static Site - Implementing the New Document Site in Middleman Agenda
  • 4. Goals for the Design
  • 5. Improve Developer Experience Goals for the Redesign Do this by improving the authoring process so that we can focus on writing higher quality documentation
  • 6. Lower barriers for writing docs Improvements to the Authoring Process Transparent Documentation Encourage collaboration
  • 7. Plain Text Format Version Control Built like source code Docs as Code
  • 8. Documents are written in Markdown Docs as Code at LINE All documents are managed on GitHub Documents are built using an automated process
  • 9. Moving from Wordpress to a Static Site
  • 10. Not as flexible as we needed Wordpress Pains Maintenance and security patches required Collaboration and reviews were difficult Version control system is not ideal
  • 11. What is a Static Site Generator? Templates Content Data Static Site Generator HTML Pages HTML Pages Static HTML Pages
  • 12. Flexibility Advantages of going Static GitHub Workflow Low maintenance Load speed
  • 13. Static site generator built in Ruby High level of customization Markdown renderer support ERB Templates Enter the Middleman
  • 14. Implementing the Site in Middleman
  • 15. Created ERB templates from static page designs Implementing the Site Custom middleman extension used to apply style Content written in Markdown, menus in YAML files Document authors only edit markdown and YAML files
  • 16. Custom Middleman Plugin Custom Middleman Extension Style Converter Custom
 Markdown Helper Methods Markdown Content
  • 17. --- title: "Social API overview" source_language: "en" --- The Social API is an HTTP-based API that provides access to data on the LINE Platform such as LINE user IDs, display names, profile images, and status messages. ## Getting a user token Sending Social API requests requires the use of an access token to access data on a user's behalf. To get an access token, integrate [LINE Login][line-login] into your app. For more information on using LINE Login with different types of apps, see the following articles. - [Integrate LINE Login for iOS][integrate-login-ios] - [Integrate LINE Login for Android][integrate-login- android] - [Integrate LINE Login for web][integrate-login-web] ## Guides See the following pages for more information on using the Social API. - [Getting user profiles][get-profile-social] - [Logging out users][logout-social] - [Managing access tokens][tokens-social] Document Content in Markdown
  • 18. sidebar_title: "Social API" menu_items: - title: "Guides" url: subpages: - title: "Overview" url: "/docs/social-api/overview" subpages: [] - title: "Getting user profiles" url: "/docs/social-api/getting-user- profiles" subpages: [] - title: "Logging out users" url: "/docs/social-api/logging-out- users" subpages: [] - title: "Managing access tokens" url: "/docs/social-api/managing- access-tokens" subpages: [] - title: "Reference" url: subpages: - title: "Social API Reference" url: "/docs/social-api/reference" subpages: [] Menus in YAML
  • 19. Inherited from Redcarpet markdown renderer Custom Markdown Used to render elements that standard markdown cannot
  • 20. Normal Markdown Table #### Request headers Request header | Description -------------- | --- Content-Type | application/json Authorization | Bearer `{Channel Access Token}`
  • 21. Headerless Table |>| || **Superclass** | `NSObject` | || **Declared in** | LineSDKAPI.h | |>|
  • 22. Helper Method: Glossary Entry ## Friends <%= display_glossary_definition "beacon-banner" %> ## Friends 2 <%= display_glossary_definition "add-friend-button" %>
  • 23. Document Build Process Doc Author Pull Request Master Branch Middleman
 Build Deploy Automated
 Testing
  • 24. We focused on improving the authoring process in our developer site redesign In Conclusion We moved from Wordpress to a static site generator called Middleman We created a custom middleman extension that helps our document writers focus on writing content A better authoring process allows our writers to focus on writing higher quality docs for you