Flutter's website
The website for Flutter.
We welcome contributions and feedback on our website! Please file a request in our issue tracker and we'll take a look.
Install Jekyll and related tools by following the instructions provided by GitHub.
A tldr version follows:
-
Ensure you have Ruby installed; you need version 2.2.2 or later:
ruby --version
-
Ensure you have Bundler installed; if not install with:
gem install bundler
-
Install all dependencies:
bundle install
- On macOS, if you encounter errors while building native Ruby extensions, see Installing Nokogiri for troubleshooting tips.
-
Create a branch.
-
Make your changes.
-
Test your changes by serving the site locally:
bundle exec jekyll serve
(orjekyll serve -w --force_polling
) -
Prior to submitting, run link validation:
rake checklinks
For edits made directly in the GitHub web UI, the changes will be deployed to a
staging site (such as https://flutter-io-deploy-three.firebaseapp.com/inspector
)
by the Travis job.
For edits you make locally (using the 'developing' steps above), you can deploy them to a personal staging site as follows (steps 1 and 2 need to be done only once):
-
In the Firebase Console, create your own Firebase project (e.g. 'mit-flutter-staging')
-
Tell Firebase about that project with the firebase
use
command:$ firebase use --add ? Which project do you want to add? <select the project you created> ? What alias do you want to use for this project? (e.g. staging) staging
Tell Firebase that you want to deploy to staging:
$ firebase use staging Now using alias staging (<your project name>)
Tell Firebase to deploy:
$ firebase use staging Now using alias staging (<your project name>) $ firebase deploy === Deploying to '<your project name>'... i deploying hosting i hosting: preparing _site directory for upload... ✔ hosting: 213 files uploaded successfully i starting release process (may take several minutes)... ✔ Deploy complete!
(Eventually, this section should be expanded to its own page.)
If you have a document that spans multiple pages, you can add next and previous page links to make navigating these pages easier. It involves adding some information to the front matter of each page, and including some HTML.
--- layout: tutorial title: "Constraints" permalink: /tutorials/layout/constraints.html prev-page: /tutorials/layout/properties.html prev-page-title: "Container Properties" next-page: /tutorials/layout/create.html next-page-title: "Create a Layout" --- {% include prev-next-nav.html %} {:toc} <!-- PAGE CONTENT --> {% include prev-next-nav.html %}
Omit the "prev-page" info for the first page, and the "next-page" info for the last page.
The flutter.io website uses prism.js for syntax highlighting. This section covers how to use syntax highlighting, and how to update our syntax highlighter for new languages.
This website can syntax highlight the following languages:
- shell
- dart
- html
- css
- javascript
- java
- objectivec
- swift
The easiest way to syntax highlight a block of code is to wrap it with triple backticks followed by the language.
Here's an example:
```dart class ExampleWidget extends StatelessWidget { @override Widget build(BuildContext context) { return new Container(); } } ```
See the list of supported languages above for what to use following the first triple backticks.
The flutter.io website uses a custom build of prism, which includes only the languages the website requires. To improve load times and user experience, we do not support every language that prism supports.
To add a new language for syntax highlighting, you will need to generate a new copy of the
prism.js
file.Follow these steps to generate a new copy of
prism.js
:- Open
js/prism.js
- Copy the URL in the comment of the first line of the file
- Paste it into a browser window/tab
- Add the new language that you wish to syntax highlight
- DO NOT change the other plugins, languages, or settings
- Download the generated JavaScript, and use it to replace
js/prism.js
- Download the generated CSS, and use it to replace
_sass/_prism.scss
Do you want to highlight (make the background yellow) code inside a code block? Do you want to strike-through code inside a code block? We got that!
For syntax highlighting, plus yellow highlighting and strike-through formatting, use the
prettify
tag with additional custom inline markup.If you want to highlight a specific bit of code, use the
[[highlight]]highlight this text[[/highlight]]
syntax with theprettify
tag.For example:
{% prettify dart %} void main() { print([[highlight]]'Hello World'[[/highlight]]); } {% endprettify %}
If you want to strike-through a specific bit of code, use the
[[strike]]highlight this text[[/strike]]
syntax with theprettify
tag.For example:
{% prettify dart %} void main() { print([[strike]]'Hello World'[[/strike]]); } {% endprettify %}
The
prettify
plugin will also unindent your code.If you want to see how this functionality was added to this site, refer to this commit.
You can include a specific range of lines from a file:
{% include includelines filename=PATH start=INT count=INT %}
PATH
must be inside of_include
. If you are including source code, place that code into_include/code
to follow our convention.The code snippets in the markdown documentation are validated as part of the build process. Anything within a '```dart' code fence will be extracted into its own file and checked for analysis issues. Some ways to tweak that:
- If a code snippet should not be analyzed, immediately proceed it with
a
<!-- skip -->
comment - To include code to be analyzed, but not displayed, add that in a comment
immediately proceeding the snippet (e.g.,
<!-- someCodeHere(); -->
) - A snippet without any import statements will have an import
(
'package:flutter/material.dart'
) automatically added to it - We ignore special formatting tags like
[[highlight]]
.
The sample catalog's markdown files are generated by running sample_page.dart from the Flutter github repo. Starting from the root of the Flutter repo:
cd examples/catalog dart bin/sample_page.dart '<commit hashcode here>' cp examples/catalog/.generated/*.md <your website repo>/catalog/samples
The generated markdown files will contain cloud storage links for sample app screenshots. Screenshots for each sample app are automatically generated for each Flutter repo commit. Choose a recent commit hashcode and confirm that the screenshots look OK.
If new sample apps have been added, update
_data/catalog/widget.json
. The entry for each widget class that's featured in a sample app should contain"sample"
line like:"sample": "ListView_index",
The
sample_page.dart
app will print a list of all of the"sample"
properties that should appear in thewidget.json
file.Some form of broken links prevention is done automatically by
rake checklinks
on every commit (throughtool/travis.sh
). But this won't see any Firebase redirects (rake checklinks
doesn't run the Firebase server) and it won't check incoming links.Before we can move the more complete automated
linkcheck
solution from dartlang.org, we recommend manually running the following.-
First time setup:
pub global activate linkcheck npm install -g superstatic
Start the localhost Firebase server:
superstatic --port 3474
Run the link checker:
linkcheck :3474
Even better, to check that old URLs are correctly redirected:
linkcheck :3474 --input-file tool/sitemap.txt
website's People
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.