Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

LINE developers site the tech behind the docs

2,326 views

Published on

LINE DEVELOPER DAY 2017 C-5

Published in: Technology
  • Be the first to comment

LINE developers site the tech behind the docs

  1. 1. LINE Developers Site: The Tech Behind the Docs Mark Serrano
 Technical Consulting Team
  2. 2. - Goals for the Redesign - Moving from Wordpress to a Static Site - Implementing the New Document Site in Middleman Agenda
  3. 3. Goals for the Design
  4. 4. Improve Developer Experience Goals for the Redesign Do this by improving the authoring process so that we can focus on writing higher quality documentation
  5. 5. Lower barriers for writing docs Improvements to the Authoring Process Transparent Documentation Encourage collaboration
  6. 6. Plain Text Format Version Control Built like source code Docs as Code
  7. 7. Documents are written in Markdown Docs as Code at LINE All documents are managed on GitHub Documents are built using an automated process
  8. 8. Moving from Wordpress to a Static Site
  9. 9. Not as flexible as we needed Wordpress Pains Maintenance and security patches required Collaboration and reviews were difficult Version control system is not ideal
  10. 10. What is a Static Site Generator? Templates Content Data Static Site Generator HTML Pages HTML Pages Static HTML Pages
  11. 11. Flexibility Advantages of going Static GitHub Workflow Low maintenance Load speed
  12. 12. Static site generator built in Ruby High level of customization Markdown renderer support ERB Templates Enter the Middleman
  13. 13. Implementing the Site in Middleman
  14. 14. 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
  15. 15. Custom Middleman Plugin Custom Middleman Extension Style Converter Custom
 Markdown Helper Methods Markdown Content
  16. 16. --- 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
  17. 17. 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
  18. 18. Inherited from Redcarpet markdown renderer Custom Markdown Used to render elements that standard markdown cannot
  19. 19. Normal Markdown Table #### Request headers Request header | Description -------------- | --- Content-Type | application/json Authorization | Bearer `{Channel Access Token}`
  20. 20. Headerless Table |>| || **Superclass** | `NSObject` | || **Declared in** | LineSDKAPI.h | |>|
  21. 21. Helper Method: Glossary Entry ## Friends <%= display_glossary_definition "beacon-banner" %> ## Friends 2 <%= display_glossary_definition "add-friend-button" %>
  22. 22. Document Build Process Doc Author Pull Request Master Branch Middleman
 Build Deploy Automated
 Testing
  23. 23. 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
  24. 24. Thank you

×