- The document discusses redesigning LINE's developer documentation site by moving from WordPress to a static site built with Middleman. - Key goals were improving the authoring experience, enabling better collaboration, and implementing a "docs as code" workflow with content in Markdown and menus in YAML formatted for version control. - The new process sees documents written in Markdown and built automatically from a GitHub source with Middleman and custom plugins to apply styles and render special elements.

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

25. Thank you