mirror of https://github.com/AMT-Cheif/drift.git
Replace jekyll docs with docsy example
This commit is contained in:
Simon Binder
parent
aa6fea6caa
commit
03eaae4a60
|
|
@ -0,0 +1,4 @@
|
|||
|
||||
[submodule "docs/themes/docsy"]
|
||||
path = docs/themes/docsy
|
||||
url = https://github.com/google/docsy.git
|
||||
|
|
@ -1,3 +1,7 @@
|
|||
_site
|
||||
.sass-cache
|
||||
.jekyll-metadata
|
||||
|
||||
public/
|
||||
resources/
|
||||
node_modules/
|
||||
tech-doc-hugo
|
||||
|
||||
.vscode/
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
title: Page not found
|
||||
permalink: /404
|
||||
nav_exclude: true
|
||||
search_exclude: true
|
||||
sitemap: false
|
||||
exclude: true
|
||||
---
|
||||
|
||||
<h1>Page not found</h1>
|
||||
|
||||
<p>The page you requested could not be found. Try using the navigation {% if site.search_enabled %}or search {% endif %}to find what you're looking for or go to this <a href="{{ site.url }}{{ site.baseurl }}">site's home page</a>.</p>
|
||||
|
||||
<h2>Check out these features</h2>
|
||||
{% assign posts = site.pages | sort:"nav_order" %}
|
||||
<ul>
|
||||
{% for post in posts %}
|
||||
{% if post.layout == "feature" %}
|
||||
<li><a href="{{post.url | absolute_url}}">{{post.title}}</a></li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
<h2>Or these in-depth guides</h2>
|
||||
<ul>
|
||||
{% for post in posts %}
|
||||
{% if post.layout == "guide" %}
|
||||
<li><a href="{{post.url | absolute_url}}">{{post.title}}</a></li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
|
@ -1 +0,0 @@
|
|||
moor.simonbinder.eu
|
||||
24
docs/Gemfile
24
docs/Gemfile
|
|
@ -1,24 +0,0 @@
|
|||
source "https://rubygems.org"
|
||||
|
||||
# Hello! This is where you manage which Jekyll version is used to run.
|
||||
# When you want to use a different version, change it below, save the
|
||||
# file and run `bundle install`. Run Jekyll with `bundle exec`, like so:
|
||||
#
|
||||
# bundle exec jekyll serve
|
||||
#
|
||||
# This will help ensure the proper Jekyll version is running.
|
||||
# Happy Jekylling!
|
||||
|
||||
gem "just-the-docs"
|
||||
|
||||
# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
|
||||
# uncomment the line below. To upgrade, run `bundle update github-pages`.
|
||||
gem "github-pages", group: :jekyll_plugins
|
||||
|
||||
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
|
||||
gem "tzinfo-data", platforms: [:mingw, :mswin, :x64_mingw, :jruby]
|
||||
|
||||
# Performance-booster for watching directories on Windows
|
||||
gem "wdm", "~> 0.1.0" if Gem.win_platform?
|
||||
|
||||
gem 'jekyll-sitemap'
|
||||
|
|
@ -1,256 +0,0 @@
|
|||
GEM
|
||||
remote: https://rubygems.org/
|
||||
specs:
|
||||
activesupport (4.2.11.1)
|
||||
i18n (~> 0.7)
|
||||
minitest (~> 5.1)
|
||||
thread_safe (~> 0.3, >= 0.3.4)
|
||||
tzinfo (~> 1.1)
|
||||
addressable (2.6.0)
|
||||
public_suffix (>= 2.0.2, < 4.0)
|
||||
coffee-script (2.4.1)
|
||||
coffee-script-source
|
||||
execjs
|
||||
coffee-script-source (1.11.1)
|
||||
colorator (1.1.0)
|
||||
commonmarker (0.17.13)
|
||||
ruby-enum (~> 0.5)
|
||||
concurrent-ruby (1.1.5)
|
||||
dnsruby (1.61.2)
|
||||
addressable (~> 2.5)
|
||||
em-websocket (0.5.1)
|
||||
eventmachine (>= 0.12.9)
|
||||
http_parser.rb (~> 0.6.0)
|
||||
ethon (0.12.0)
|
||||
ffi (>= 1.3.0)
|
||||
eventmachine (1.2.7)
|
||||
execjs (2.7.0)
|
||||
faraday (0.15.4)
|
||||
multipart-post (>= 1.2, < 3)
|
||||
ffi (1.11.1)
|
||||
forwardable-extended (2.6.0)
|
||||
gemoji (3.0.1)
|
||||
github-pages (198)
|
||||
activesupport (= 4.2.11.1)
|
||||
github-pages-health-check (= 1.16.1)
|
||||
jekyll (= 3.8.5)
|
||||
jekyll-avatar (= 0.6.0)
|
||||
jekyll-coffeescript (= 1.1.1)
|
||||
jekyll-commonmark-ghpages (= 0.1.5)
|
||||
jekyll-default-layout (= 0.1.4)
|
||||
jekyll-feed (= 0.11.0)
|
||||
jekyll-gist (= 1.5.0)
|
||||
jekyll-github-metadata (= 2.12.1)
|
||||
jekyll-mentions (= 1.4.1)
|
||||
jekyll-optional-front-matter (= 0.3.0)
|
||||
jekyll-paginate (= 1.1.0)
|
||||
jekyll-readme-index (= 0.2.0)
|
||||
jekyll-redirect-from (= 0.14.0)
|
||||
jekyll-relative-links (= 0.6.0)
|
||||
jekyll-remote-theme (= 0.3.1)
|
||||
jekyll-sass-converter (= 1.5.2)
|
||||
jekyll-seo-tag (= 2.5.0)
|
||||
jekyll-sitemap (= 1.2.0)
|
||||
jekyll-swiss (= 0.4.0)
|
||||
jekyll-theme-architect (= 0.1.1)
|
||||
jekyll-theme-cayman (= 0.1.1)
|
||||
jekyll-theme-dinky (= 0.1.1)
|
||||
jekyll-theme-hacker (= 0.1.1)
|
||||
jekyll-theme-leap-day (= 0.1.1)
|
||||
jekyll-theme-merlot (= 0.1.1)
|
||||
jekyll-theme-midnight (= 0.1.1)
|
||||
jekyll-theme-minimal (= 0.1.1)
|
||||
jekyll-theme-modernist (= 0.1.1)
|
||||
jekyll-theme-primer (= 0.5.3)
|
||||
jekyll-theme-slate (= 0.1.1)
|
||||
jekyll-theme-tactile (= 0.1.1)
|
||||
jekyll-theme-time-machine (= 0.1.1)
|
||||
jekyll-titles-from-headings (= 0.5.1)
|
||||
jemoji (= 0.10.2)
|
||||
kramdown (= 1.17.0)
|
||||
liquid (= 4.0.0)
|
||||
listen (= 3.1.5)
|
||||
mercenary (~> 0.3)
|
||||
minima (= 2.5.0)
|
||||
nokogiri (>= 1.8.5, < 2.0)
|
||||
rouge (= 2.2.1)
|
||||
terminal-table (~> 1.4)
|
||||
github-pages-health-check (1.16.1)
|
||||
addressable (~> 2.3)
|
||||
dnsruby (~> 1.60)
|
||||
octokit (~> 4.0)
|
||||
public_suffix (~> 3.0)
|
||||
typhoeus (~> 1.3)
|
||||
html-pipeline (2.11.0)
|
||||
activesupport (>= 2)
|
||||
nokogiri (>= 1.4)
|
||||
http_parser.rb (0.6.0)
|
||||
i18n (0.9.5)
|
||||
concurrent-ruby (~> 1.0)
|
||||
jekyll (3.8.5)
|
||||
addressable (~> 2.4)
|
||||
colorator (~> 1.0)
|
||||
em-websocket (~> 0.5)
|
||||
i18n (~> 0.7)
|
||||
jekyll-sass-converter (~> 1.0)
|
||||
jekyll-watch (~> 2.0)
|
||||
kramdown (~> 1.14)
|
||||
liquid (~> 4.0)
|
||||
mercenary (~> 0.3.3)
|
||||
pathutil (~> 0.9)
|
||||
rouge (>= 1.7, < 4)
|
||||
safe_yaml (~> 1.0)
|
||||
jekyll-avatar (0.6.0)
|
||||
jekyll (~> 3.0)
|
||||
jekyll-coffeescript (1.1.1)
|
||||
coffee-script (~> 2.2)
|
||||
coffee-script-source (~> 1.11.1)
|
||||
jekyll-commonmark (1.3.1)
|
||||
commonmarker (~> 0.14)
|
||||
jekyll (>= 3.7, < 5.0)
|
||||
jekyll-commonmark-ghpages (0.1.5)
|
||||
commonmarker (~> 0.17.6)
|
||||
jekyll-commonmark (~> 1)
|
||||
rouge (~> 2)
|
||||
jekyll-default-layout (0.1.4)
|
||||
jekyll (~> 3.0)
|
||||
jekyll-feed (0.11.0)
|
||||
jekyll (~> 3.3)
|
||||
jekyll-gist (1.5.0)
|
||||
octokit (~> 4.2)
|
||||
jekyll-github-metadata (2.12.1)
|
||||
jekyll (~> 3.4)
|
||||
octokit (~> 4.0, != 4.4.0)
|
||||
jekyll-mentions (1.4.1)
|
||||
html-pipeline (~> 2.3)
|
||||
jekyll (~> 3.0)
|
||||
jekyll-optional-front-matter (0.3.0)
|
||||
jekyll (~> 3.0)
|
||||
jekyll-paginate (1.1.0)
|
||||
jekyll-readme-index (0.2.0)
|
||||
jekyll (~> 3.0)
|
||||
jekyll-redirect-from (0.14.0)
|
||||
jekyll (~> 3.3)
|
||||
jekyll-relative-links (0.6.0)
|
||||
jekyll (~> 3.3)
|
||||
jekyll-remote-theme (0.3.1)
|
||||
jekyll (~> 3.5)
|
||||
rubyzip (>= 1.2.1, < 3.0)
|
||||
jekyll-sass-converter (1.5.2)
|
||||
sass (~> 3.4)
|
||||
jekyll-seo-tag (2.5.0)
|
||||
jekyll (~> 3.3)
|
||||
jekyll-sitemap (1.2.0)
|
||||
jekyll (~> 3.3)
|
||||
jekyll-swiss (0.4.0)
|
||||
jekyll-theme-architect (0.1.1)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-cayman (0.1.1)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-dinky (0.1.1)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-hacker (0.1.1)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-leap-day (0.1.1)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-merlot (0.1.1)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-midnight (0.1.1)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-minimal (0.1.1)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-modernist (0.1.1)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-primer (0.5.3)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-github-metadata (~> 2.9)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-slate (0.1.1)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-tactile (0.1.1)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-time-machine (0.1.1)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-titles-from-headings (0.5.1)
|
||||
jekyll (~> 3.3)
|
||||
jekyll-watch (2.2.1)
|
||||
listen (~> 3.0)
|
||||
jemoji (0.10.2)
|
||||
gemoji (~> 3.0)
|
||||
html-pipeline (~> 2.2)
|
||||
jekyll (~> 3.0)
|
||||
just-the-docs (0.2.5)
|
||||
jekyll (~> 3.8.5)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
rake (~> 12.3.1)
|
||||
kramdown (1.17.0)
|
||||
liquid (4.0.0)
|
||||
listen (3.1.5)
|
||||
rb-fsevent (~> 0.9, >= 0.9.4)
|
||||
rb-inotify (~> 0.9, >= 0.9.7)
|
||||
ruby_dep (~> 1.2)
|
||||
mercenary (0.3.6)
|
||||
mini_portile2 (2.4.0)
|
||||
minima (2.5.0)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-feed (~> 0.9)
|
||||
jekyll-seo-tag (~> 2.1)
|
||||
minitest (5.11.3)
|
||||
multipart-post (2.1.1)
|
||||
nokogiri (1.10.3)
|
||||
mini_portile2 (~> 2.4.0)
|
||||
octokit (4.14.0)
|
||||
sawyer (~> 0.8.0, >= 0.5.3)
|
||||
pathutil (0.16.2)
|
||||
forwardable-extended (~> 2.6)
|
||||
public_suffix (3.1.1)
|
||||
rake (12.3.2)
|
||||
rb-fsevent (0.10.3)
|
||||
rb-inotify (0.10.0)
|
||||
ffi (~> 1.0)
|
||||
rouge (2.2.1)
|
||||
ruby-enum (0.7.2)
|
||||
i18n
|
||||
ruby_dep (1.5.0)
|
||||
rubyzip (1.2.3)
|
||||
safe_yaml (1.0.5)
|
||||
sass (3.7.4)
|
||||
sass-listen (~> 4.0.0)
|
||||
sass-listen (4.0.0)
|
||||
rb-fsevent (~> 0.9, >= 0.9.4)
|
||||
rb-inotify (~> 0.9, >= 0.9.7)
|
||||
sawyer (0.8.2)
|
||||
addressable (>= 2.3.5)
|
||||
faraday (> 0.8, < 2.0)
|
||||
terminal-table (1.8.0)
|
||||
unicode-display_width (~> 1.1, >= 1.1.1)
|
||||
thread_safe (0.3.6)
|
||||
typhoeus (1.3.1)
|
||||
ethon (>= 0.9.0)
|
||||
tzinfo (1.2.5)
|
||||
thread_safe (~> 0.1)
|
||||
unicode-display_width (1.6.0)
|
||||
|
||||
PLATFORMS
|
||||
ruby
|
||||
|
||||
DEPENDENCIES
|
||||
github-pages
|
||||
jekyll-sitemap
|
||||
just-the-docs
|
||||
tzinfo-data
|
||||
|
||||
BUNDLED WITH
|
||||
2.0.1
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
# Moor documentation
|
||||
Contains the source code for the moor documentation, live at moor.simonbinder.eu
|
||||
We use [Docsy](https://github.com/google/docsy), a Hugo theme for this website. You'll need the extended version of Hugo as described
|
||||
[here](https://www.docsy.dev/docs/getting-started/).
|
||||
|
||||
To work on the documentation, first cd into this directory, then run `git submodule update --init --recursive` an `npm install`.
|
||||
|
||||
## Running the website locally
|
||||
After the setup, it's just a simple
|
||||
```
|
||||
hugo server
|
||||
```
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
# Welcome to Jekyll!
|
||||
#
|
||||
# This config file is meant for settings that affect your whole blog, values
|
||||
# which you are expected to set up once and rarely edit after that. If you find
|
||||
# yourself editing this file very often, consider using Jekyll's data files
|
||||
# feature for the data you need to update frequently.
|
||||
#
|
||||
# For technical reasons, this file is *NOT* reloaded automatically when you use
|
||||
# 'bundle exec jekyll serve'. If you change this file, please restart the server process.
|
||||
|
||||
# Site settings
|
||||
# These are used to personalize your new site. If you look in the HTML files,
|
||||
# you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
|
||||
# You can create any custom variable you would like, and they will be accessible
|
||||
# in the templates via {{ site.myvariable }}.
|
||||
title: Moor
|
||||
#email: your-email@example.com
|
||||
description: >- # this means to ignore newlines until "baseurl:"
|
||||
Moor is an easy to use, reactive, typesafe persistence library for Flutter apps.
|
||||
baseurl: "/" # the subpath of your site, e.g. /blog
|
||||
url: "https://moor.simonbinder.eu" # the base hostname & protocol for your site, e.g. http://example.com
|
||||
#twitter_username: jekyllrb
|
||||
github_link: https://github.com/simolus3/moor
|
||||
|
||||
search_enabled: true
|
||||
|
||||
common_links:
|
||||
getting_started: "/getting-started"
|
||||
|
||||
# Build settings
|
||||
markdown: kramdown
|
||||
theme: just-the-docs
|
||||
plugins:
|
||||
- jekyll-feed
|
||||
- jekyll-sitemap
|
||||
|
||||
# Exclude from processing.
|
||||
# The following items will not be processed, by default. Create a custom list
|
||||
# to override the default setting.
|
||||
# exclude:
|
||||
# - Gemfile
|
||||
# - Gemfile.lock
|
||||
# - node_modules
|
||||
# - vendor/bundle/
|
||||
# - vendor/cache/
|
||||
# - vendor/gems/
|
||||
# - vendor/ruby/
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
### Adding the dependency
|
||||
First, let's add moor to your project's `pubspec.yaml`.
|
||||
At the moment, the current version of `moor_flutter` is [](https://pub.dartlang.org/packages/moor_flutter) and the current version of `moor_generator` is [](https://pub.dartlang.org/packages/moor_generator)
|
||||
|
||||
```yaml
|
||||
dependencies:
|
||||
moor_flutter: # use the latest version
|
||||
|
||||
dev_dependencies:
|
||||
moor_generator: # use the latest version
|
||||
build_runner:
|
||||
```
|
||||
We're going to use the `moor_flutter` library to specify tables and access the database. The
|
||||
`moor_generator` library will take care of generating the necessary code so the
|
||||
library knows what your table structure looks like.
|
||||
|
||||
### Declaring tables
|
||||
Using moor, you can model the structure of your tables with simple dart code:
|
||||
```dart
|
||||
import 'package:moor_flutter/moor_flutter.dart';
|
||||
|
||||
// assuming that your file is called filename.dart. This will give an error at first,
|
||||
// but it's needed for moor to know about the generated code
|
||||
part 'filename.g.dart';
|
||||
|
||||
// this will generate a table called "todos" for us. The rows of that table will
|
||||
// be represented by a class called "Todo".
|
||||
class Todos extends Table {
|
||||
IntColumn get id => integer().autoIncrement()();
|
||||
TextColumn get title => text().withLength(min: 6, max: 32)();
|
||||
TextColumn get content => text().named('body')();
|
||||
IntColumn get category => integer().nullable()();
|
||||
}
|
||||
|
||||
// This will make moor generate a class called "Category" to represent a row in this table.
|
||||
// By default, "Categorie" would have been used because it only strips away the trailing "s"
|
||||
// in the table name.
|
||||
@DataClassName("Category")
|
||||
class Categories extends Table {
|
||||
|
||||
IntColumn get id => integer().autoIncrement()();
|
||||
TextColumn get description => text()();
|
||||
}
|
||||
|
||||
// this annotation tells moor to prepare a database class that uses both of the
|
||||
// tables we just defined. We'll see how to use that database class in a moment.
|
||||
@UseMoor(tables: [Todos, Categories])
|
||||
class MyDatabase {
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
__⚠️ Note:__ The column definitions, the table name and the primary key must be known at
|
||||
compile time. For column definitions and the primary key, the function must use the `=>`
|
||||
operator and can't contain anything more than what's included in the documentation and the
|
||||
examples. Otherwise, the generator won't be able to know what's going on.
|
||||
|
||||
### Generating the code
|
||||
Moor integrates with Dart's `build` system, so you can generate all the code needed with
|
||||
`flutter packages pub run build_runner build`. If you want to continuously rebuild the generated code
|
||||
whever you change your code, run `flutter packages pub run build_runner watch` instead.
|
||||
After running either command once, the moor generator will have created a class for your
|
||||
database and data classes for your entities. To use it, change the `MyDatabase` class as
|
||||
follows:
|
||||
```dart
|
||||
@UseMoor(tables: [Todos, Categories])
|
||||
class MyDatabase extends _$MyDatabase {
|
||||
// we tell the database where to store the data with this constructor
|
||||
MyDatabase() : super(FlutterQueryExecutor.inDatabaseFolder(path: 'db.sqlite'));
|
||||
|
||||
// you should bump this number whenever you change or add a table definition. Migrations
|
||||
// are covered later in this readme.
|
||||
@override
|
||||
int get schemaVersion => 1;
|
||||
}
|
||||
```
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
||||
{% if page.meta_title != nil %}
|
||||
<title>{{ page.meta_title }}</title>
|
||||
{% else %}
|
||||
<title>{{ page.title }} - {{ site.title }}</title>
|
||||
{% endif %}
|
||||
|
||||
{% if page.description %}
|
||||
<meta name="Description" content="{{ page.description }}">
|
||||
{% endif %}
|
||||
|
||||
<link rel="stylesheet" href="{{ "/assets/css/just-the-docs.css" | absolute_url }}">
|
||||
|
||||
{% if site.search_enabled != nil %}
|
||||
<script type="text/javascript" src="{{ "/assets/js/vendor/lunr.min.js" | absolute_url }}"></script>
|
||||
{% endif %}
|
||||
<script type="text/javascript" src="{{ "/assets/js/just-the-docs.js" | absolute_url }}"></script>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
</head>
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
<nav role="navigation" aria-label="Main navigation">
|
||||
<ul class="navigation-list">
|
||||
{% assign pages_list = site.html_pages | sort:"nav_order" %}
|
||||
{% for node in pages_list %}
|
||||
{% unless node.nav_exclude %}
|
||||
{% if node.parent == nil %}
|
||||
<li class="navigation-list-item{% if page.url == node.url or page.parent == node.title or page.grand_parent == node.title %} active{% endif %}">
|
||||
{% if page.parent == node.title or page.grand_parent == node.title %}
|
||||
{% assign first_level_url = node.url | absolute_url %}
|
||||
{% endif %}
|
||||
<a href="{{ node.url | absolute_url }}" class="navigation-list-link{% if page.url == node.url %} active{% endif %}">{{ node.title }}</a>
|
||||
{% if node.has_children %}
|
||||
{% assign children_list = site.html_pages | sort:"nav_order" %}
|
||||
<ul class="navigation-list-child-list ">
|
||||
{% for child in children_list %}
|
||||
{% if child.parent == node.title %}
|
||||
<li class="navigation-list-item {% if page.url == child.url or page.parent == child.title %} active{% endif %}">
|
||||
{% if page.url == child.url or page.parent == child.title %}
|
||||
{% assign second_level_url = child.url | absolute_url %}
|
||||
{% endif %}
|
||||
<a href="{{ child.url | absolute_url }}" class="navigation-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a>
|
||||
{% if child.has_children %}
|
||||
{% assign grand_children_list = site.html_pages | sort:"nav_order" %}
|
||||
<ul class="navigation-list-child-list">
|
||||
{% for grand_child in grand_children_list %}
|
||||
{% if grand_child.parent == child.title %}
|
||||
<li class="navigation-list-item {% if page.url == grand_child.url %} active{% endif %}">
|
||||
<a href="{{ grand_child.url | absolute_url }}" class="navigation-list-link{% if page.url == grand_child.url %} active{% endif %}">{{ grand_child.title }}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
@ -1,85 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en-us">
|
||||
{% include head.html %}
|
||||
<body>
|
||||
|
||||
<div class="page-wrap">
|
||||
<div class="side-bar">
|
||||
<a href="{{ site.url }}{{ site.baseurl }}" class="site-title fs-6 lh-tight">{{ site.title }}</a>
|
||||
<span class="fs-3"><button class="js-main-nav-trigger navigation-list-toggle btn btn-outline" type="button" data-text-toggle="Hide">Menu</button></span>
|
||||
<div class="navigation main-nav js-main-nav">
|
||||
{% include nav.html %}
|
||||
</div>
|
||||
<footer role="contentinfo" class="site-footer">
|
||||
<p class="text-small text-grey-dk-000 mb-0">This site uses <a href="https://github.com/pmarsceill/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.</p>
|
||||
</footer>
|
||||
</div>
|
||||
<div class="main-content-wrap js-main-content" tabindex="0">
|
||||
<div class="page-header">
|
||||
<div class="main-content">
|
||||
{% if site.search_enabled != nil %}
|
||||
<div class="search js-search">
|
||||
<div class="search-input-wrap">
|
||||
<input type="text" class="js-search-input search-input" tabindex="0" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off">
|
||||
<svg width="14" height="14" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" class="search-icon"><title>Search</title><g fill-rule="nonzero"><path d="M17.332 20.735c-5.537 0-10-4.6-10-10.247 0-5.646 4.463-10.247 10-10.247 5.536 0 10 4.601 10 10.247s-4.464 10.247-10 10.247zm0-4c3.3 0 6-2.783 6-6.247 0-3.463-2.7-6.247-6-6.247s-6 2.784-6 6.247c0 3.464 2.7 6.247 6 6.247z"/><path d="M11.672 13.791L.192 25.271 3.02 28.1 14.5 16.62z"/></g></svg>
|
||||
</div>
|
||||
<div class="js-search-results search-results-wrap"></div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% comment %} Changes from upstream here to include pub badge {% endcomment %}
|
||||
<ul class="list-style-none text-small mt-md-1 mb-md-1 pb-4 pb-md-0 js-aux-nav aux-nav">
|
||||
<li><a href="https://pub.dartlang.org/packages/moor_flutter"><img src="https://img.shields.io/pub/v/moor_flutter.svg" alt="Pub version badge" /></a></li>
|
||||
<li><a href="{{site.github_link}}"><img src="https://img.shields.io/badge/repo-24292E.svg?logo=github&style=flat" alt="GitHub repository"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-content">
|
||||
{% unless page.url == "/" %}
|
||||
{% if page.parent %}
|
||||
<nav class="breadcrumb-nav">
|
||||
<ol class="breadcrumb-nav-list">
|
||||
{% if page.grand_parent %}
|
||||
<li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.grand_parent }}</a></li>
|
||||
<li class="breadcrumb-nav-list-item"><a href="{{ second_level_url }}">{{ page.parent }}</a></li>
|
||||
{% else %}
|
||||
<li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.parent }}</a></li>
|
||||
{% endif %}
|
||||
<li class="breadcrumb-nav-list-item"><span>{{ page.title }}</span></li>
|
||||
</ol>
|
||||
</nav>
|
||||
{% endif %}
|
||||
{% endunless %}
|
||||
<div id="main-content" class="page-content" role="main">
|
||||
{{ content }}
|
||||
|
||||
{% if page.has_children == true and page.has_toc != false %}
|
||||
<hr>
|
||||
<h2 class="text-delta">Table of contents</h2>
|
||||
{% assign children_list = site.pages | sort:"nav_order" %}
|
||||
<ul>
|
||||
{% for child in children_list %}
|
||||
{% if child.parent == page.title and child.title != page.title %}
|
||||
<li>
|
||||
<a href="{{ child.url | absolute_url }}">{{ child.title }}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
|
||||
<hr>
|
||||
<span class="fs-2">
|
||||
Was this page helpful? Please
|
||||
{% assign url = page.url | absolute_url %}
|
||||
{% assign body = 'Refers to the documentation: ' | append: url %}
|
||||
<a href="{{site.github_link}}/issues/new?body={{body | url_encode}}">report an issue</a>
|
||||
if you have questions or run into problems.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
---
|
||||
{% if page.since != nil %}
|
||||
<span class="label label-green">Available from {{page.since}}</span>
|
||||
{% endif %}
|
||||
|
||||
{{ content }}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
---
|
||||
|
||||
{{ content }}
|
||||
|
|
@ -1,110 +0,0 @@
|
|||
//
|
||||
// Base element style overrides
|
||||
//
|
||||
// stylelint-disable selector-no-type, selector-max-type
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: $white;
|
||||
background: $link-color;
|
||||
}
|
||||
|
||||
html {
|
||||
@include fs-4;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: $body-font-family;
|
||||
font-size: inherit;
|
||||
line-height: $body-line-height;
|
||||
color: $body-text-color;
|
||||
background-color: $body-background-color;
|
||||
}
|
||||
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
ol,
|
||||
ul,
|
||||
pre,
|
||||
address,
|
||||
blockquote,
|
||||
dl,
|
||||
div,
|
||||
fieldset,
|
||||
form,
|
||||
hr,
|
||||
noscript,
|
||||
table {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 1.2em;
|
||||
margin-bottom: 0.8em;
|
||||
font-weight: 500;
|
||||
line-height: $body-heading-line-height;
|
||||
color: $body-heading-color;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $link-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:not([class]) {
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient($border-color 0%, $border-color 100%);
|
||||
background-repeat: repeat-x;
|
||||
background-position: 0 100%;
|
||||
background-size: 1px 1px;
|
||||
|
||||
&:hover {
|
||||
background-image: linear-gradient(rgba($link-color, 0.45) 0%, rgba($link-color, 0.45) 100%);
|
||||
background-size: 1px 1px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: $mono-font-family;
|
||||
font-size: 12px;
|
||||
line-height: $body-line-height;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: $sp-6 0;
|
||||
background-color: $border-color;
|
||||
border: 0;
|
||||
}
|
||||
|
|
@ -1,118 +0,0 @@
|
|||
//
|
||||
// Buttons and things that look like buttons
|
||||
//
|
||||
// stylelint-disable color-named
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
padding-top: 0.3em;
|
||||
padding-right: 1em;
|
||||
padding-bottom: 0.3em;
|
||||
padding-left: 1em;
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
color: $link-color;
|
||||
text-decoration: none;
|
||||
vertical-align: baseline;
|
||||
cursor: pointer;
|
||||
background-color: $base-button-color;
|
||||
border-width: 0;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
|
||||
appearance: none;
|
||||
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px rgba(blue, 0.25);
|
||||
}
|
||||
|
||||
&:focus:hover,
|
||||
&.selected:focus {
|
||||
box-shadow: 0 0 0 3px rgba(blue, 0.25);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.zeroclipboard-is-hover {
|
||||
color: darken($link-color, 2%);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&.zeroclipboard-is-hover,
|
||||
&.zeroclipboard-is-active {
|
||||
text-decoration: none;
|
||||
background-color: darken($base-button-color, 1%);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.selected,
|
||||
&.zeroclipboard-is-active {
|
||||
background-color: darken($base-button-color, 3%);
|
||||
background-image: none;
|
||||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
&.selected:hover {
|
||||
background-color: darken(#dcdcdc, 5%);
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
&,
|
||||
&:hover {
|
||||
color: rgba(102, 102, 102, 0.5);
|
||||
cursor: default;
|
||||
background-color: rgba(229, 229, 229, 0.5);
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
color: $link-color;
|
||||
background: transparent;
|
||||
box-shadow: inset 0 0 0 2px $grey-lt-300;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&.zeroclipboard-is-hover,
|
||||
&.zeroclipboard-is-active {
|
||||
color: darken($link-color, 4%);
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
box-shadow: inset 0 0 0 3px $grey-lt-300;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
box-shadow: inset 0 0 0 2px $grey-dk-100, 0 0 0 3px rgba(blue, 0.25);
|
||||
}
|
||||
|
||||
&:focus:hover,
|
||||
&.selected:focus {
|
||||
box-shadow: inset 0 0 0 2px $grey-dk-100;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@include btn-color($white, $btn-primary-color);
|
||||
}
|
||||
|
||||
.btn-purple {
|
||||
@include btn-color($white, $purple-100);
|
||||
}
|
||||
|
||||
.btn-blue {
|
||||
@include btn-color($white, $blue-000);
|
||||
}
|
||||
|
||||
.btn-green {
|
||||
@include btn-color($white, $green-100);
|
||||
}
|
||||
|
|
@ -1,114 +0,0 @@
|
|||
//
|
||||
// Code and syntax highlighting
|
||||
//
|
||||
// stylelint-disable selector-no-qualifying-type, declaration-block-semicolon-newline-after,declaration-block-single-line-max-declarations, selector-no-type, selector-max-type
|
||||
|
||||
code {
|
||||
padding: 0.2em 0.15em;
|
||||
font-weight: 400;
|
||||
background-color: $code-background-color;
|
||||
border: $border $border-color;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
pre.highlight {
|
||||
padding: $sp-3;
|
||||
margin-bottom: 0;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
background-color: $code-background-color;
|
||||
|
||||
code {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.highlighter-rouge {
|
||||
margin-bottom: $sp-3;
|
||||
overflow: hidden;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
.highlight .c { color: #999988; font-style: italic } /* Comment */
|
||||
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
|
||||
.highlight .k { color: #000000; font-weight: bold } /* Keyword */
|
||||
.highlight .o { color: #000000; font-weight: bold } /* Operator */
|
||||
.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
|
||||
.highlight .cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */
|
||||
.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
|
||||
.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
|
||||
.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
|
||||
.highlight .ge { color: #000000; font-style: italic } /* Generic.Emph */
|
||||
.highlight .gr { color: #aa0000 } /* Generic.Error */
|
||||
.highlight .gh { color: #999999 } /* Generic.Heading */
|
||||
.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
|
||||
.highlight .go { color: #888888 } /* Generic.Output */
|
||||
.highlight .gp { color: #555555 } /* Generic.Prompt */
|
||||
.highlight .gs { font-weight: bold } /* Generic.Strong */
|
||||
.highlight .gu { color: #aaaaaa } /* Generic.Subheading */
|
||||
.highlight .gt { color: #aa0000 } /* Generic.Traceback */
|
||||
.highlight .kc { color: #000000; font-weight: bold } /* Keyword.Constant */
|
||||
.highlight .kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
|
||||
.highlight .kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
|
||||
.highlight .kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
|
||||
.highlight .kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
|
||||
.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
|
||||
.highlight .m { color: #009999 } /* Literal.Number */
|
||||
.highlight .s { color: #d01040 } /* Literal.String */
|
||||
.highlight .na { color: #008080 } /* Name.Attribute */
|
||||
.highlight .nb { color: #0086B3 } /* Name.Builtin */
|
||||
.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
|
||||
.highlight .no { color: #008080 } /* Name.Constant */
|
||||
.highlight .nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
|
||||
.highlight .ni { color: #800080 } /* Name.Entity */
|
||||
.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
|
||||
.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
|
||||
.highlight .nl { color: #990000; font-weight: bold } /* Name.Label */
|
||||
.highlight .nn { color: #555555 } /* Name.Namespace */
|
||||
.highlight .nt { color: #000080 } /* Name.Tag */
|
||||
.highlight .nv { color: #008080 } /* Name.Variable */
|
||||
.highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */
|
||||
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
|
||||
.highlight .mf { color: #009999 } /* Literal.Number.Float */
|
||||
.highlight .mh { color: #009999 } /* Literal.Number.Hex */
|
||||
.highlight .mi { color: #009999 } /* Literal.Number.Integer */
|
||||
.highlight .mo { color: #009999 } /* Literal.Number.Oct */
|
||||
.highlight .sb { color: #d01040 } /* Literal.String.Backtick */
|
||||
.highlight .sc { color: #d01040 } /* Literal.String.Char */
|
||||
.highlight .sd { color: #d01040 } /* Literal.String.Doc */
|
||||
.highlight .s2 { color: #d01040 } /* Literal.String.Double */
|
||||
.highlight .se { color: #d01040 } /* Literal.String.Escape */
|
||||
.highlight .sh { color: #d01040 } /* Literal.String.Heredoc */
|
||||
.highlight .si { color: #d01040 } /* Literal.String.Interpol */
|
||||
.highlight .sx { color: #d01040 } /* Literal.String.Other */
|
||||
.highlight .sr { color: #009926 } /* Literal.String.Regex */
|
||||
.highlight .s1 { color: #d01040 } /* Literal.String.Single */
|
||||
.highlight .ss { color: #990073 } /* Literal.String.Symbol */
|
||||
.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
|
||||
.highlight .vc { color: #008080 } /* Name.Variable.Class */
|
||||
.highlight .vg { color: #008080 } /* Name.Variable.Global */
|
||||
.highlight .vi { color: #008080 } /* Name.Variable.Instance */
|
||||
.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
|
||||
|
||||
//
|
||||
// Code examples (rendered)
|
||||
//
|
||||
|
||||
.code-example {
|
||||
padding: $sp-3;
|
||||
margin-bottom: $sp-3;
|
||||
overflow: auto;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $border-radius;
|
||||
|
||||
+ .highlighter-rouge,
|
||||
+ figure.highlight {
|
||||
position: relative;
|
||||
margin-top: -$sp-4;
|
||||
border-right: 1px solid $border-color;
|
||||
border-bottom: 1px solid $border-color;
|
||||
border-left: 1px solid $border-color;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
|
||||
$body-background-color: $grey-dk-300;
|
||||
$sidebar-color: $grey-dk-300;
|
||||
$border-color: $grey-dk-200;
|
||||
|
||||
$body-text-color: $grey-lt-300;
|
||||
$body-heading-color: $grey-lt-000;
|
||||
$nav-child-link-color: $grey-dk-000;
|
||||
|
||||
$link-color: $blue-000;
|
||||
$btn-primary-color: $blue-200;
|
||||
$base-button-color: $grey-dk-250;
|
||||
|
||||
$code-background-color: $grey-dk-250;
|
||||
|
|
@ -1,114 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
//
|
||||
// Styles for rendered markdown in the .main-content container
|
||||
//
|
||||
// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type
|
||||
|
||||
.page-content {
|
||||
a {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-type: none;
|
||||
counter-reset: step-counter;
|
||||
|
||||
> li {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0.2em;
|
||||
left: -1.6em;
|
||||
color: $grey-dk-000;
|
||||
content: counter(step-counter);
|
||||
counter-increment: step-counter;
|
||||
@include fs-3;
|
||||
|
||||
@include mq(sm) {
|
||||
top: 0.11em;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
counter-reset: sub-counter;
|
||||
|
||||
li {
|
||||
&::before {
|
||||
content: counter(sub-counter, lower-alpha);
|
||||
counter-increment: sub-counter;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
|
||||
> li {
|
||||
&::before {
|
||||
position: absolute;
|
||||
margin-left: -1.4em;
|
||||
color: $grey-dk-000;
|
||||
content: "•";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.task-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.task-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
.task-list-item-checkbox {
|
||||
margin-right: 0.6em;
|
||||
}
|
||||
|
||||
hr + * {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1:first-of-type {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
dl {
|
||||
display: grid;
|
||||
grid-template-columns: max-content 1fr;
|
||||
}
|
||||
|
||||
dt,
|
||||
dd {
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
text-align: right;
|
||||
|
||||
&::after {
|
||||
content: ":";
|
||||
}
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-left: 1em;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,120 +0,0 @@
|
|||
// //
|
||||
// // Typography
|
||||
// //
|
||||
//
|
||||
// $body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif;
|
||||
// $mono-font-family: "SFMono-Regular", Menlo, Consolas, Monospace;
|
||||
// $root-font-size: 16px; // Base font-size for rems
|
||||
// $body-line-height: 1.4;
|
||||
// $body-heading-line-height: 1.15;
|
||||
//
|
||||
// //
|
||||
// // Colors
|
||||
// //
|
||||
//
|
||||
// $white: #fff;
|
||||
//
|
||||
// $grey-dk-000: #959396;
|
||||
// $grey-dk-100: #5c5962;
|
||||
// $grey-dk-200: #44434d;
|
||||
// $grey-dk-250: #302d36 !default;
|
||||
// $grey-dk-300: #27262b;
|
||||
//
|
||||
// $grey-lt-000: #f5f6fa;
|
||||
// $grey-lt-100: #eeebee;
|
||||
// $grey-lt-200: #ecebed;
|
||||
// $grey-lt-300: #e6e1e8;
|
||||
//
|
||||
// $purple-000: #7253ed;
|
||||
// $purple-100: #5e41d0;
|
||||
// $purple-200: #4e26af;
|
||||
// $purple-300: #381885;
|
||||
//
|
||||
// $blue-000: #2c84fa;
|
||||
// $blue-100: #2869e6;
|
||||
// $blue-200: #264caf;
|
||||
// $blue-300: #183385;
|
||||
//
|
||||
// $green-000: #41d693;
|
||||
// $green-100: #11b584;
|
||||
// $green-200: #009c7b;
|
||||
// $green-300: #026e57;
|
||||
//
|
||||
// $body-background-color: $white !default;
|
||||
// $sidebar-color: $grey-lt-000 !default;
|
||||
// $code-background-color: $grey-lt-000 !default;
|
||||
|
||||
// $body-text-color: $grey-dk-100 !default;
|
||||
// $body-heading-color: $grey-dk-300 !default;
|
||||
// $nav-child-link-color: $grey-dk-100 !default;
|
||||
// $link-color: $purple-000 !default;
|
||||
// $btn-primary-color: $purple-100 !default;
|
||||
// $base-button-color: #f7f7f7 !default;
|
||||
//
|
||||
// //
|
||||
// // Media queries in pixels
|
||||
// //
|
||||
//
|
||||
// $media-queries: (
|
||||
// xs: 320px,
|
||||
// sm: 500px,
|
||||
// md: 740px,
|
||||
// lg: 1120px,
|
||||
// xl: 1400px
|
||||
// );
|
||||
//
|
||||
// //
|
||||
// // Spacing
|
||||
// //
|
||||
//
|
||||
// $spacing-unit: 1rem; // 1rem == 16px
|
||||
//
|
||||
// $spacers: (
|
||||
// sp-0: 0,
|
||||
// sp-1: $spacing-unit * 0.25,
|
||||
// sp-2: $spacing-unit * 0.5,
|
||||
// sp-3: $spacing-unit * 0.75,
|
||||
// sp-4: $spacing-unit,
|
||||
// sp-5: $spacing-unit * 1.5,
|
||||
// sp-6: $spacing-unit * 2,
|
||||
// sp-7: $spacing-unit * 2.5,
|
||||
// sp-8: $spacing-unit * 3,
|
||||
// sp-9: $spacing-unit * 3.5,
|
||||
// sp-10: $spacing-unit * 4
|
||||
// );
|
||||
//
|
||||
// $sp-1: map-get($spacers, sp-1); // 0.25 rem == 4px
|
||||
// $sp-2: map-get($spacers, sp-2); // 0.5 rem == 8px
|
||||
// $sp-3: map-get($spacers, sp-3); // 0.75 rem == 12px
|
||||
// $sp-4: map-get($spacers, sp-4); // 1 rem == 16px
|
||||
// $sp-5: map-get($spacers, sp-5); // 1.5 rem == 24px
|
||||
// $sp-6: map-get($spacers, sp-6); // 2 rem == 32px
|
||||
// $sp-7: map-get($spacers, sp-7); // 2.5 rem == 40px
|
||||
// $sp-8: map-get($spacers, sp-8); // 3 rem == 48px
|
||||
// $sp-9: map-get($spacers, sp-9); // 4 rem == 48px
|
||||
// $sp-10: map-get($spacers, sp-10); // 4.5 rem == 48px
|
||||
//
|
||||
// //
|
||||
// // Borders
|
||||
// //
|
||||
//
|
||||
// $border: 1px solid;
|
||||
// $border-radius: 4px;
|
||||
// $border-color: $grey-lt-100;
|
||||
//
|
||||
// //
|
||||
// // Grid system
|
||||
// //
|
||||
//
|
||||
// $gutter-spacing: $sp-6;
|
||||
// $gutter-spacing-sm: $sp-4;
|
||||
// $nav-width: 232px;
|
||||
// $content-width: 800px;
|
||||
//
|
||||
// $media-queries: (
|
||||
// xs: 320px,
|
||||
// sm: 500px,
|
||||
// md: 740px,
|
||||
// lg: 800px,
|
||||
// xl: 1316px
|
||||
// );
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
//
|
||||
// Labels (not the form kind)
|
||||
//
|
||||
|
||||
.label,
|
||||
.label-blue {
|
||||
display: inline-block;
|
||||
padding-top: 0.16em;
|
||||
padding-right: 0.42em;
|
||||
padding-bottom: 0.16em;
|
||||
padding-left: 0.42em;
|
||||
margin-right: $sp-1;
|
||||
margin-left: $sp-1;
|
||||
color: $white;
|
||||
text-transform: uppercase;
|
||||
vertical-align: middle;
|
||||
background-color: $blue-100;
|
||||
@include fs-2;
|
||||
}
|
||||
|
||||
.label-green {
|
||||
background-color: $green-200;
|
||||
}
|
||||
|
||||
.label-purple {
|
||||
background-color: $purple-100;
|
||||
}
|
||||
|
||||
.label-red {
|
||||
background-color: $red-200;
|
||||
}
|
||||
|
||||
.label-yellow {
|
||||
color: $grey-dk-200;
|
||||
background-color: $yellow-200;
|
||||
}
|
||||
|
|
@ -1,147 +0,0 @@
|
|||
//
|
||||
// The basic two column layout
|
||||
//
|
||||
|
||||
.page-wrap {
|
||||
@include mq(md) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.side-bar {
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-top: $gutter-spacing-sm;
|
||||
padding-bottom: $gutter-spacing-sm;
|
||||
background-color: $sidebar-color;
|
||||
|
||||
@include mq(md) {
|
||||
flex-wrap: nowrap;
|
||||
position: absolute;
|
||||
width: $nav-width + 16px;
|
||||
height: 100%;
|
||||
padding-top: $gutter-spacing * 2;
|
||||
padding-bottom: 0;
|
||||
flex-direction: column;
|
||||
border-right: $border $border-color;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
@include mq(lg) {
|
||||
width: calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width});
|
||||
min-width: $nav-width;
|
||||
}
|
||||
}
|
||||
|
||||
.main-content-wrap {
|
||||
@include mq(md) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 600px;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding-top: $gutter-spacing-sm;
|
||||
@include container;
|
||||
|
||||
@include mq(md) {
|
||||
position: relative;
|
||||
max-width: $content-width;
|
||||
padding-top: $gutter-spacing;
|
||||
padding-bottom: $gutter-spacing;
|
||||
padding-left: $gutter-spacing * 1.5;
|
||||
margin-left: $nav-width;
|
||||
}
|
||||
|
||||
@include mq(lg) {
|
||||
padding-left: $gutter-spacing;
|
||||
margin-left: calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width});
|
||||
}
|
||||
}
|
||||
|
||||
.js-main-content:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
background-color: $sidebar-color;
|
||||
|
||||
@include mq(md) {
|
||||
background-color: $body-background-color;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding-top: 0;
|
||||
|
||||
@include mq(md) {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
height: 60px;
|
||||
padding-top: $sp-4;
|
||||
padding-bottom: $sp-4;
|
||||
border-bottom: $border $border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation,
|
||||
.site-title,
|
||||
.site-footer {
|
||||
|
||||
@include container;
|
||||
|
||||
width: 100%;
|
||||
|
||||
@include mq(lg) {
|
||||
width: $nav-width + 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation {
|
||||
@include mq(md) {
|
||||
padding-top: $sp-8;
|
||||
overflow-y: auto;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
// stylelint-disable selector-no-type
|
||||
body {
|
||||
position: relative;
|
||||
padding-bottom: $sp-10;
|
||||
|
||||
@include mq(md) {
|
||||
position: static;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
// stylelint-enable selector-no-type
|
||||
|
||||
.site-footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
padding-top: $sp-4;
|
||||
padding-bottom: $sp-4;
|
||||
|
||||
@include mq(md) {
|
||||
position: static;
|
||||
align-self: flex-end;
|
||||
justify-self: end;
|
||||
background-color: $sidebar-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,152 +0,0 @@
|
|||
//
|
||||
// Main nav, breadcrumb, etc...
|
||||
//
|
||||
|
||||
.site-title {
|
||||
display: block;
|
||||
flex: 1 1 auto;
|
||||
color: $body-heading-color;
|
||||
background-color: $sidebar-color;
|
||||
|
||||
@include mq(md) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 101;
|
||||
height: 60px;
|
||||
padding-top: $sp-4;
|
||||
border-bottom: $border $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-list {
|
||||
padding: 0;
|
||||
margin-top: $sp-4;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
|
||||
@include mq(md) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-list-child-list {
|
||||
padding-left: $sp-3;
|
||||
list-style: none;
|
||||
|
||||
.navigation-list-link {
|
||||
color: $nav-child-link-color;
|
||||
}
|
||||
|
||||
.navigation-list-item {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
margin-top: 0.3em;
|
||||
margin-left: -0.8em;
|
||||
color: rgba($body-text-color, 0.3);
|
||||
content: "- ";
|
||||
}
|
||||
|
||||
&.active {
|
||||
&::before {
|
||||
color: $body-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-list-item {
|
||||
@include fs-4;
|
||||
margin: 0;
|
||||
|
||||
@include mq(md) {
|
||||
@include fs-3;
|
||||
}
|
||||
|
||||
.navigation-list-child-list {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.navigation-list-child-list {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-list-link {
|
||||
display: block;
|
||||
padding-top: $sp-1;
|
||||
padding-bottom: $sp-1;
|
||||
|
||||
&.active {
|
||||
font-weight: 600;
|
||||
color: $body-heading-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Small screen nav
|
||||
|
||||
.main-nav,
|
||||
.aux-nav {
|
||||
display: none;
|
||||
|
||||
&.nav-open {
|
||||
display: block;
|
||||
}
|
||||
@include mq(md) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.aux-nav li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.navigation-list-toggle {
|
||||
position: absolute;
|
||||
right: $sp-4;
|
||||
|
||||
@include mq(md) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Breadcrumb nav
|
||||
.breadcrumb-nav {
|
||||
@include mq(md) {
|
||||
margin-top: -$sp-4;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-nav-list {
|
||||
padding-left: 0;
|
||||
margin-bottom: $sp-3;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.breadcrumb-nav-list-item {
|
||||
display: table-cell;
|
||||
@include fs-2;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: inline-block;
|
||||
margin-right: $sp-2;
|
||||
margin-left: $sp-2;
|
||||
color: $grey-dk-000;
|
||||
content: "/";
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&::after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,114 +0,0 @@
|
|||
//
|
||||
// Search input and autocomplete
|
||||
//
|
||||
|
||||
.search {
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
display: none;
|
||||
flex-grow: 1;
|
||||
padding: $sp-2;
|
||||
margin-bottom: $sp-3;
|
||||
background-color: $white;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 3px 10px rgba(0, 0, 0, 0.05);
|
||||
|
||||
@include mq(md) {
|
||||
display: block;
|
||||
padding-top: $sp-1;
|
||||
padding-right: 0;
|
||||
padding-bottom: 0;
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.nav-open {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.search-results-wrap {
|
||||
display: none;
|
||||
|
||||
&.active {
|
||||
position: absolute;
|
||||
top: $sp-1;
|
||||
z-index: 100;
|
||||
display: block;
|
||||
width: 300px;
|
||||
margin-top: $gutter-spacing;
|
||||
background: lighten($body-background-color, 1%);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.search-input-wrap {
|
||||
display: flex;
|
||||
background-color: $body-background-color;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding-top: $sp-1;
|
||||
padding-bottom: $sp-1;
|
||||
background-color: $body-background-color;
|
||||
border-top: 0;
|
||||
border-right: 0;
|
||||
border-bottom: 0;
|
||||
border-left: 0;
|
||||
order: 2;
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
|
||||
+ .search-icon {
|
||||
fill: $link-color;
|
||||
}
|
||||
}
|
||||
|
||||
@include fs-5;
|
||||
|
||||
@include mq(sm) {
|
||||
@include fs-3;
|
||||
}
|
||||
|
||||
@include mq(md) {
|
||||
@include fs-2;
|
||||
}
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
align-self: center;
|
||||
margin-right: $sp-2;
|
||||
fill: $grey-dk-000;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.search-results-list {
|
||||
padding-left: 0;
|
||||
margin-top: $sp-1;
|
||||
margin-bottom: $sp-1;
|
||||
list-style: none;
|
||||
@include fs-3;
|
||||
}
|
||||
|
||||
.search-results-list-item {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.search-results-link {
|
||||
display: block;
|
||||
padding-top: $sp-1;
|
||||
padding-right: $sp-3;
|
||||
padding-bottom: $sp-1;
|
||||
padding-left: $sp-3;
|
||||
|
||||
&:hover {
|
||||
color: $body-heading-color;
|
||||
background-color: darken($body-background-color, 2%);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
@function rem($size, $unit:"") {
|
||||
$remSize: $size / $root-font-size;
|
||||
|
||||
@if ($unit == false) {
|
||||
@return #{$remSize};
|
||||
}
|
||||
@else {
|
||||
@return #{$remSize}rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,130 +0,0 @@
|
|||
//
|
||||
// Typography
|
||||
//
|
||||
|
||||
$body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif !default;
|
||||
$mono-font-family: "SFMono-Regular", Menlo, Consolas, Monospace !default;
|
||||
$root-font-size: 16px !default; // Base font-size for rems
|
||||
$body-line-height: 1.4 !default;
|
||||
$body-heading-line-height: 1.15 !default !default;
|
||||
|
||||
//
|
||||
// Colors
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
|
||||
$grey-dk-000: #959396 !default;
|
||||
$grey-dk-100: #5c5962 !default;
|
||||
$grey-dk-200: #44434d !default;
|
||||
$grey-dk-250: #302d36 !default;
|
||||
$grey-dk-300: #27262b !default;
|
||||
|
||||
$grey-lt-000: #f5f6fa !default;
|
||||
$grey-lt-100: #eeebee !default;
|
||||
$grey-lt-200: #ecebed !default;
|
||||
$grey-lt-300: #e6e1e8 !default;
|
||||
|
||||
$purple-000: #7253ed !default;
|
||||
$purple-100: #5e41d0 !default;
|
||||
$purple-200: #4e26af !default;
|
||||
$purple-300: #381885 !default;
|
||||
|
||||
$blue-000: #2c84fa !default;
|
||||
$blue-100: #2869e6 !default;
|
||||
$blue-200: #264caf !default;
|
||||
$blue-300: #183385 !default;
|
||||
|
||||
$green-000: #41d693 !default;
|
||||
$green-100: #11b584 !default;
|
||||
$green-200: #009c7b !default;
|
||||
$green-300: #026e57 !default;
|
||||
|
||||
$yellow-000: #ffeb82 !default;
|
||||
$yellow-100: #fadf50 !default;
|
||||
$yellow-200: #f7d12e !default;
|
||||
$yellow-300: #e7af06 !default;
|
||||
|
||||
$red-000: #f77e7e !default;
|
||||
$red-100: #f96e65 !default;
|
||||
$red-200: #e94c4c !default;
|
||||
$red-300: #dd2e2e !default;
|
||||
|
||||
$body-background-color: $white !default;
|
||||
$sidebar-color: $grey-lt-000 !default;
|
||||
$code-background-color: $grey-lt-000 !default;
|
||||
|
||||
$body-text-color: $grey-dk-100 !default;
|
||||
$body-heading-color: $grey-dk-300 !default;
|
||||
$nav-child-link-color: $grey-dk-100 !default;
|
||||
$link-color: $purple-000 !default;
|
||||
$btn-primary-color: $purple-100 !default;
|
||||
$base-button-color: #f7f7f7 !default;
|
||||
|
||||
//
|
||||
// Media queries in pixels
|
||||
//
|
||||
|
||||
$media-queries: (
|
||||
xs: 320px,
|
||||
sm: 500px,
|
||||
md: 740px,
|
||||
lg: 1120px,
|
||||
xl: 1400px
|
||||
) !default;
|
||||
|
||||
//
|
||||
// Spacing
|
||||
//
|
||||
|
||||
$spacing-unit: 1rem; // 1rem == 16px
|
||||
|
||||
$spacers: (
|
||||
sp-0: 0,
|
||||
sp-1: $spacing-unit * 0.25,
|
||||
sp-2: $spacing-unit * 0.5,
|
||||
sp-3: $spacing-unit * 0.75,
|
||||
sp-4: $spacing-unit,
|
||||
sp-5: $spacing-unit * 1.5,
|
||||
sp-6: $spacing-unit * 2,
|
||||
sp-7: $spacing-unit * 2.5,
|
||||
sp-8: $spacing-unit * 3,
|
||||
sp-9: $spacing-unit * 3.5,
|
||||
sp-10: $spacing-unit * 4
|
||||
) !default;
|
||||
|
||||
$sp-1: map-get($spacers, sp-1) !default; // 0.25 rem == 4px
|
||||
$sp-2: map-get($spacers, sp-2) !default; // 0.5 rem == 8px
|
||||
$sp-3: map-get($spacers, sp-3) !default; // 0.75 rem == 12px
|
||||
$sp-4: map-get($spacers, sp-4) !default; // 1 rem == 16px
|
||||
$sp-5: map-get($spacers, sp-5) !default; // 1.5 rem == 24px
|
||||
$sp-6: map-get($spacers, sp-6) !default; // 2 rem == 32px
|
||||
$sp-7: map-get($spacers, sp-7) !default; // 2.5 rem == 40px
|
||||
$sp-8: map-get($spacers, sp-8) !default; // 3 rem == 48px
|
||||
$sp-9: map-get($spacers, sp-9) !default; // 4 rem == 48px
|
||||
$sp-10: map-get($spacers, sp-10) !default; // 4.5 rem == 48px
|
||||
|
||||
//
|
||||
// Borders
|
||||
//
|
||||
|
||||
$border: 1px solid !default;
|
||||
$border-radius: 4px !default;
|
||||
$border-color: $grey-lt-100 !default;
|
||||
|
||||
//
|
||||
// Grid system
|
||||
//
|
||||
|
||||
$gutter-spacing: $sp-6 !default;
|
||||
$gutter-spacing-sm: $sp-4 !default;
|
||||
$nav-width: 232px !default;
|
||||
$content-width: 800px !default;
|
||||
|
||||
$media-queries: (
|
||||
xs: 320px,
|
||||
sm: 500px,
|
||||
md: 740px,
|
||||
lg: 800px,
|
||||
xl: 1316px
|
||||
) !default;
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
// Colored button
|
||||
|
||||
@mixin btn-color($fg, $bg) {
|
||||
color: $fg;
|
||||
background-color: darken($bg, 2%);
|
||||
background-image: linear-gradient(lighten($bg, 5%), darken($bg, 2%));
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 4px 10px rgba(0, 0, 0, 0.12);
|
||||
|
||||
&:hover,
|
||||
&.zeroclipboard-is-hover {
|
||||
color: $fg;
|
||||
background-color: darken($bg, 4%);
|
||||
background-image: linear-gradient((lighten($bg, 2%), darken($bg, 4%)));
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.selected,
|
||||
&.zeroclipboard-is-active {
|
||||
background-color: darken($bg, 5%);
|
||||
background-image: none;
|
||||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
&.selected:hover {
|
||||
background-color: darken($bg, 10%);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
// Media query
|
||||
|
||||
// Media query mixin
|
||||
// Usage:
|
||||
// @include mq(md) {
|
||||
// ..medium and up styles
|
||||
// }
|
||||
@mixin mq($name) {
|
||||
// Retrieves the value from the key
|
||||
$value: map-get($media-queries, $name);
|
||||
|
||||
// If the key exists in the map
|
||||
@if $value != null {
|
||||
// Prints a media query based on the value
|
||||
@media (min-width: rem($value)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@else {
|
||||
@warn "No value could be retrieved from `#{$media-query}`. "
|
||||
+ "Please make sure it is defined in `$media-queries` map.";
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive container
|
||||
|
||||
@mixin container {
|
||||
padding-right: $gutter-spacing-sm;
|
||||
padding-left: $gutter-spacing-sm;
|
||||
|
||||
@include mq(md) {
|
||||
padding-right: $gutter-spacing;
|
||||
padding-left: $gutter-spacing;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
// Font size
|
||||
|
||||
@mixin fs-1 {
|
||||
font-size: 9px !important;
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-2 {
|
||||
font-size: 11px !important;
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-3 {
|
||||
font-size: 12px !important;
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-4 {
|
||||
font-size: 14px !important;
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-5 {
|
||||
font-size: 16px !important;
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-6 {
|
||||
font-size: 18px !important;
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: 24px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-7 {
|
||||
font-size: 24px !important;
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: 32px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-8 {
|
||||
font-size: 32px !important;
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: 36px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-9 {
|
||||
font-size: 36px !important;
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: 42px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-10 {
|
||||
font-size: 42px !important;
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: 48px !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
@import "./layout";
|
||||
@import "./buttons";
|
||||
@import "./typography";
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
@import "./variables";
|
||||
@import "./functions";
|
||||
@import "./mixins/mixins";
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
//
|
||||
// Tables
|
||||
//
|
||||
// stylelint-disable max-nesting-depth, selector-no-type, selector-max-type
|
||||
|
||||
table {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin-bottom: $sp-5;
|
||||
overflow-x: auto;
|
||||
border-collapse: separate;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.05);
|
||||
|
||||
@include mq(sm) {
|
||||
display: table;
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
@include fs-3;
|
||||
min-width: 120px;
|
||||
padding-top: $sp-2;
|
||||
padding-right: $sp-3;
|
||||
padding-bottom: $sp-2;
|
||||
padding-left: $sp-3;
|
||||
background-color: lighten($body-background-color, 2%);
|
||||
border-bottom: $border rgba($border-color, 0.5);
|
||||
border-left: $border $border-color;
|
||||
|
||||
&:first-of-type {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
thead,
|
||||
tbody:first-child {
|
||||
tr {
|
||||
&:first-of-type {
|
||||
th,
|
||||
td {
|
||||
&:first-of-type {
|
||||
border-top-left-radius: $border-radius;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-top-right-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
&:last-of-type {
|
||||
th,
|
||||
td {
|
||||
border-bottom: 0;
|
||||
|
||||
&:first-of-type {
|
||||
border-bottom-left-radius: $border-radius;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom-right-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
thead {
|
||||
th {
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
//
|
||||
// Typography
|
||||
//
|
||||
// stylelint-disable primer/selector-no-utility, selector-no-type, selector-max-type
|
||||
|
||||
h1,
|
||||
.text-alpha {
|
||||
@include fs-8;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
h2,
|
||||
.text-beta {
|
||||
@include fs-6;
|
||||
}
|
||||
|
||||
h3,
|
||||
.text-gamma {
|
||||
@include fs-5;
|
||||
}
|
||||
|
||||
h4,
|
||||
.text-delta {
|
||||
@include fs-2;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
h5,
|
||||
.text-epsilon {
|
||||
@include fs-3;
|
||||
color: $grey-dk-200;
|
||||
}
|
||||
|
||||
h6,
|
||||
.text-zeta {
|
||||
@include fs-2;
|
||||
color: $grey-dk-200;
|
||||
}
|
||||
|
||||
li {
|
||||
.highlight {
|
||||
margin-top: $sp-2;
|
||||
}
|
||||
}
|
||||
|
||||
.text-small {
|
||||
@include fs-2;
|
||||
}
|
||||
|
||||
.text-mono {
|
||||
font-family: $mono-font-family !important;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
|
@ -1,239 +0,0 @@
|
|||
//
|
||||
// Utility classes for colors
|
||||
//
|
||||
|
||||
// Text colors
|
||||
|
||||
.text-grey-dk-000 {
|
||||
color: $grey-dk-000 !important;
|
||||
}
|
||||
|
||||
.text-grey-dk-100 {
|
||||
color: $grey-dk-100 !important;
|
||||
}
|
||||
|
||||
.text-grey-dk-200 {
|
||||
color: $grey-dk-200 !important;
|
||||
}
|
||||
|
||||
.text-grey-dk-250 {
|
||||
color: $grey-dk-250 !important;
|
||||
}
|
||||
|
||||
.text-grey-dk-300 {
|
||||
color: $grey-dk-300 !important;
|
||||
}
|
||||
|
||||
.text-grey-lt-000 {
|
||||
color: $grey-lt-000 !important;
|
||||
}
|
||||
|
||||
.text-grey-lt-100 {
|
||||
color: $grey-lt-100 !important;
|
||||
}
|
||||
|
||||
.text-grey-lt-200 {
|
||||
color: $grey-lt-200 !important;
|
||||
}
|
||||
|
||||
.text-grey-lt-300 {
|
||||
color: $grey-lt-300 !important;
|
||||
}
|
||||
|
||||
.text-blue-000 {
|
||||
color: $blue-000 !important;
|
||||
}
|
||||
|
||||
.text-blue-100 {
|
||||
color: $blue-100 !important;
|
||||
}
|
||||
|
||||
.text-blue-200 {
|
||||
color: $blue-200 !important;
|
||||
}
|
||||
|
||||
.text-blue-300 {
|
||||
color: $blue-300 !important;
|
||||
}
|
||||
|
||||
.text-green-000 {
|
||||
color: $green-000 !important;
|
||||
}
|
||||
|
||||
.text-green-100 {
|
||||
color: $green-100 !important;
|
||||
}
|
||||
|
||||
.text-green-200 {
|
||||
color: $green-200 !important;
|
||||
}
|
||||
|
||||
.text-green-300 {
|
||||
color: $green-300 !important;
|
||||
}
|
||||
|
||||
.text-purple-000 {
|
||||
color: $purple-000 !important;
|
||||
}
|
||||
|
||||
.text-purple-100 {
|
||||
color: $purple-100 !important;
|
||||
}
|
||||
|
||||
.text-purple-200 {
|
||||
color: $purple-200 !important;
|
||||
}
|
||||
|
||||
.text-purple-300 {
|
||||
color: $purple-300 !important;
|
||||
}
|
||||
|
||||
.text-yellow-000 {
|
||||
color: $yellow-000 !important;
|
||||
}
|
||||
|
||||
.text-yellow-100 {
|
||||
color: $yellow-100 !important;
|
||||
}
|
||||
|
||||
.text-yellow-200 {
|
||||
color: $yellow-200 !important;
|
||||
}
|
||||
|
||||
.text-yellow-300 {
|
||||
color: $yellow-300 !important;
|
||||
}
|
||||
|
||||
.text-red-000 {
|
||||
color: $red-000 !important;
|
||||
}
|
||||
|
||||
.text-red-100 {
|
||||
color: $red-100 !important;
|
||||
}
|
||||
|
||||
.text-red-200 {
|
||||
color: $red-200 !important;
|
||||
}
|
||||
|
||||
.text-red-300 {
|
||||
color: $red-300 !important;
|
||||
}
|
||||
|
||||
// Background colors
|
||||
|
||||
.bg-grey-dk-000 {
|
||||
background-color: $grey-dk-000 !important;
|
||||
}
|
||||
|
||||
.bg-grey-dk-100 {
|
||||
background-color: $grey-dk-100 !important;
|
||||
}
|
||||
|
||||
.bg-grey-dk-200 {
|
||||
background-color: $grey-dk-200 !important;
|
||||
}
|
||||
|
||||
.bg-grey-dk-250 {
|
||||
background-color: $grey-dk-250 !important;
|
||||
}
|
||||
|
||||
.bg-grey-dk-300 {
|
||||
background-color: $grey-dk-300 !important;
|
||||
}
|
||||
|
||||
.bg-grey-lt-000 {
|
||||
background-color: $grey-lt-000 !important;
|
||||
}
|
||||
|
||||
.bg-grey-lt-100 {
|
||||
background-color: $grey-lt-100 !important;
|
||||
}
|
||||
|
||||
.bg-grey-lt-200 {
|
||||
background-color: $grey-lt-200 !important;
|
||||
}
|
||||
|
||||
.bg-grey-lt-300 {
|
||||
background-color: $grey-lt-300 !important;
|
||||
}
|
||||
|
||||
.bg-blue-000 {
|
||||
background-color: $blue-000 !important;
|
||||
}
|
||||
|
||||
.bg-blue-100 {
|
||||
background-color: $blue-100 !important;
|
||||
}
|
||||
|
||||
.bg-blue-200 {
|
||||
background-color: $blue-200 !important;
|
||||
}
|
||||
|
||||
.bg-blue-300 {
|
||||
background-color: $blue-300 !important;
|
||||
}
|
||||
|
||||
.bg-green-000 {
|
||||
background-color: $green-000 !important;
|
||||
}
|
||||
|
||||
.bg-green-100 {
|
||||
background-color: $green-100 !important;
|
||||
}
|
||||
|
||||
.bg-green-200 {
|
||||
background-color: $green-200 !important;
|
||||
}
|
||||
|
||||
.bg-green-300 {
|
||||
background-color: $green-300 !important;
|
||||
}
|
||||
|
||||
.bg-purple-000 {
|
||||
background-color: $purple-000 !important;
|
||||
}
|
||||
|
||||
.bg-purple-100 {
|
||||
background-color: $purple-100 !important;
|
||||
}
|
||||
|
||||
.bg-purple-200 {
|
||||
background-color: $purple-200 !important;
|
||||
}
|
||||
|
||||
.bg-purple-300 {
|
||||
background-color: $purple-300 !important;
|
||||
}
|
||||
|
||||
.bg-yellow-000 {
|
||||
background-color: $yellow-000 !important;
|
||||
}
|
||||
|
||||
.bg-yellow-100 {
|
||||
background-color: $yellow-100 !important;
|
||||
}
|
||||
|
||||
.bg-yellow-200 {
|
||||
background-color: $yellow-200 !important;
|
||||
}
|
||||
|
||||
.bg-yellow-300 {
|
||||
background-color: $yellow-300 !important;
|
||||
}
|
||||
|
||||
.bg-red-000 {
|
||||
background-color: $red-000 !important;
|
||||
}
|
||||
|
||||
.bg-red-100 {
|
||||
background-color: $red-100 !important;
|
||||
}
|
||||
|
||||
.bg-red-200 {
|
||||
background-color: $red-200 !important;
|
||||
}
|
||||
|
||||
.bg-red-300 {
|
||||
background-color: $red-300 !important;
|
||||
}
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
// stylelint-disable primer/selector-no-utility
|
||||
//
|
||||
// Utility classes for layout
|
||||
//
|
||||
|
||||
// Display
|
||||
|
||||
.d-block { display: block !important; }
|
||||
.d-flex { display: flex !important; }
|
||||
.d-inline { display: inline !important; }
|
||||
.d-inline-block { display: inline-block !important; }
|
||||
.d-none { display: none !important; }
|
||||
|
||||
@each $media-query in map-keys($media-queries) {
|
||||
@for $i from 1 through length($spacers) {
|
||||
@include mq($media-query) {
|
||||
$size: #{map-get($spacers, sp-#{$i - 1})};
|
||||
$scale: #{$i - 1};
|
||||
|
||||
// .d-sm-block, .d-md-none, .d-lg-inline
|
||||
.d-#{$media-query}-block { display: block !important; }
|
||||
.d-#{$media-query}-flex { display: flex !important; }
|
||||
.d-#{$media-query}-inline { display: inline !important; }
|
||||
.d-#{$media-query}-inline-block { display: inline-block !important; }
|
||||
.d-#{$media-query}-none { display: none !important; }
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Vertical alignment
|
||||
|
||||
.v-align-baseline { vertical-align: baseline !important; }
|
||||
.v-align-bottom { vertical-align: bottom !important; }
|
||||
.v-align-middle { vertical-align: middle !important; }
|
||||
.v-align-text-bottom { vertical-align: text-bottom !important; }
|
||||
.v-align-text-top { vertical-align: text-top !important; }
|
||||
.v-align-top { vertical-align: top !important; }
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
//
|
||||
// Utility classes for lists
|
||||
//
|
||||
|
||||
// stylelint-disable primer/selector-no-utility
|
||||
|
||||
.list-style-none {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
list-style: none !important;
|
||||
}
|
||||
|
|
@ -1,121 +0,0 @@
|
|||
//
|
||||
// Utility classes for margins and padding
|
||||
//
|
||||
|
||||
// scss-lint:disable SpaceAfterPropertyName
|
||||
// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility
|
||||
|
||||
// Margin spacer utilities
|
||||
|
||||
@for $i from 1 through length($spacers) {
|
||||
$size: #{map-get($spacers, sp-#{$i - 1})};
|
||||
$scale: #{$i - 1};
|
||||
|
||||
// .m-0, .m-1, .m-2...
|
||||
.m-#{$scale} { margin: #{$size} !important; }
|
||||
.mt-#{$scale} { margin-top: #{$size} !important; }
|
||||
.mr-#{$scale} { margin-right: #{$size} !important; }
|
||||
.mb-#{$scale} { margin-bottom: #{$size} !important; }
|
||||
.ml-#{$scale} { margin-left: #{$size} !important; }
|
||||
|
||||
.mx-#{$scale} {
|
||||
margin-right: #{$size} !important;
|
||||
margin-left: #{$size} !important;
|
||||
}
|
||||
|
||||
.my-#{$scale} {
|
||||
margin-top: #{$size} !important;
|
||||
margin-bottom: #{$size} !important;
|
||||
}
|
||||
|
||||
.mxn-#{$scale} {
|
||||
margin-right: -#{$size} !important;
|
||||
margin-left: -#{$size} !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-right: auto !important;
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
@each $media-query in map-keys($media-queries) {
|
||||
@for $i from 1 through length($spacers) {
|
||||
@include mq($media-query) {
|
||||
$size: #{map-get($spacers, sp-#{$i - 1})};
|
||||
$scale: #{$i - 1};
|
||||
|
||||
// .m-sm-0, .m-md-1, .m-lg-2...
|
||||
.m-#{$media-query}-#{$scale} { margin: #{$size} !important; }
|
||||
.mt-#{$media-query}-#{$scale} { margin-top: #{$size} !important; }
|
||||
.mr-#{$media-query}-#{$scale} { margin-right: #{$size} !important; }
|
||||
.mb-#{$media-query}-#{$scale} { margin-bottom: #{$size} !important; }
|
||||
.ml-#{$media-query}-#{$scale} { margin-left: #{$size} !important; }
|
||||
|
||||
.mx-#{$media-query}-#{$scale} {
|
||||
margin-right: #{$size} !important;
|
||||
margin-left: #{$size} !important;
|
||||
}
|
||||
|
||||
.my-#{$media-query}-#{$scale} {
|
||||
margin-top: #{$size} !important;
|
||||
margin-bottom: #{$size} !important;
|
||||
}
|
||||
|
||||
.mxn-#{$media-query}-#{$scale} {
|
||||
margin-right: -#{$size} !important;
|
||||
margin-left: -#{$size} !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Padding spacer utilities
|
||||
|
||||
@for $i from 1 through length($spacers) {
|
||||
$size: #{map-get($spacers, sp-#{$i - 1})};
|
||||
$scale: #{$i - 1};
|
||||
|
||||
// .p-0, .p-1, .p-2...
|
||||
.p-#{$scale} { padding: #{$size} !important; }
|
||||
.pt-#{$scale} { padding-top: #{$size} !important; }
|
||||
.pr-#{$scale} { padding-right: #{$size} !important; }
|
||||
.pb-#{$scale} { padding-bottom: #{$size} !important; }
|
||||
.pl-#{$scale} { padding-left: #{$size} !important; }
|
||||
|
||||
.px-#{$scale} {
|
||||
padding-right: #{$size} !important;
|
||||
padding-left: #{$size} !important;
|
||||
}
|
||||
|
||||
.py-#{$scale} {
|
||||
padding-top: #{$size} !important;
|
||||
padding-bottom: #{$size} !important;
|
||||
}
|
||||
}
|
||||
|
||||
@each $media-query in map-keys($media-queries) {
|
||||
@include mq($media-query) {
|
||||
@for $i from 1 through length($spacers) {
|
||||
$size: #{map-get($spacers, sp-#{$i - 1})};
|
||||
$scale: #{$i - 1};
|
||||
|
||||
// .p-sm-0, .p-md-1, .p-lg-2...
|
||||
.p-#{$media-query}-#{$scale} { padding: #{$size} !important; }
|
||||
.pt-#{$media-query}-#{$scale} { padding-top: #{$size} !important; }
|
||||
.pr-#{$media-query}-#{$scale} { padding-right: #{$size} !important; }
|
||||
.pb-#{$media-query}-#{$scale} { padding-bottom: #{$size} !important; }
|
||||
.pl-#{$media-query}-#{$scale} { padding-left: #{$size} !important; }
|
||||
|
||||
.px-#{$media-query}-#{$scale} {
|
||||
padding-right: #{$size} !important;
|
||||
padding-left: #{$size} !important;
|
||||
}
|
||||
|
||||
.py-#{$media-query}-#{$scale} {
|
||||
padding-top: #{$size} !important;
|
||||
padding-bottom: #{$size} !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
//
|
||||
// Utility classes for typography
|
||||
//
|
||||
|
||||
// stylelint-disable primer/selector-no-utility
|
||||
|
||||
.fs-1 {
|
||||
@include fs-1;
|
||||
}
|
||||
|
||||
.fs-2 {
|
||||
@include fs-2;
|
||||
}
|
||||
|
||||
.fs-3 {
|
||||
@include fs-3;
|
||||
}
|
||||
|
||||
.fs-4 {
|
||||
@include fs-4;
|
||||
}
|
||||
|
||||
.fs-5 {
|
||||
@include fs-5;
|
||||
}
|
||||
|
||||
.fs-6 {
|
||||
@include fs-6;
|
||||
}
|
||||
|
||||
.fs-7 {
|
||||
@include fs-7;
|
||||
}
|
||||
|
||||
.fs-8 {
|
||||
@include fs-8;
|
||||
}
|
||||
|
||||
.fs-9 {
|
||||
@include fs-9;
|
||||
}
|
||||
|
||||
.fs-10 {
|
||||
@include fs-10;
|
||||
}
|
||||
|
||||
.fw-300 {
|
||||
font-weight: 300 !important;
|
||||
}
|
||||
|
||||
.fw-400 {
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
.fw-500 {
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.fw-700 {
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
.lh-0 {
|
||||
line-height: 0 !important;
|
||||
}
|
||||
|
||||
.lh-default {
|
||||
line-height: $body-line-height;
|
||||
}
|
||||
|
||||
.lh-tight {
|
||||
line-height: $body-heading-line-height;
|
||||
}
|
||||
|
||||
.ls-5 {
|
||||
letter-spacing: 0.05em !important;
|
||||
}
|
||||
|
||||
.ls-10 {
|
||||
letter-spacing: 0.1em !important;
|
||||
}
|
||||
|
||||
.ls-0 {
|
||||
letter-spacing: 0 !important;
|
||||
}
|
||||
|
||||
.text-uppercase {
|
||||
text-transform: uppercase !important;
|
||||
}
|
||||
|
||||
// stylelint-enable primer/selector-no-utility
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
@import "./colors";
|
||||
@import "./layout";
|
||||
@import "./typography";
|
||||
@import "./lists";
|
||||
@import "./spacing";
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
# normalize.scss v0.1.0
|
||||
|
||||
Normalize.scss is the SCSS version of [normalize.css](http://necolas.github.io/normalize.css), a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards.
|
||||
|
||||
[View the normalize.css test file](http://necolas.github.io/normalize.css/latest/test.html)
|
||||
|
||||
## Install
|
||||
|
||||
* [npm](http://npmjs.org/): `npm install --save normalize.scss`
|
||||
* [Component(1)](https://github.com/component/component/): `component install guerrero/normalize.scss`
|
||||
* [Bower](http://bower.io/): `bower install --save normalize.scss`
|
||||
* Download: Go to [this link](https://raw.githubusercontent.com/guerrero/normalize.scss/master/normalize.scss), press right-click on the page and choose "Save as..."
|
||||
|
||||
No other styles should come before Normalize.scss.
|
||||
|
||||
It's recommendable to modify `normalize.scss` to suit it to your project
|
||||
|
||||
## What does it do?
|
||||
|
||||
* Preserves useful defaults, unlike many CSS resets.
|
||||
* Normalizes styles for a wide range of elements.
|
||||
* Corrects bugs and common browser inconsistencies.
|
||||
* Improves usability with subtle improvements.
|
||||
* Explains what code does using detailed comments.
|
||||
|
||||
## Browser support
|
||||
|
||||
* Google Chrome (latest)
|
||||
* Mozilla Firefox (latest)
|
||||
* Mozilla Firefox 4
|
||||
* Opera (latest)
|
||||
* Apple Safari 6+
|
||||
* Internet Explorer 8+
|
||||
|
||||
[Normalize.css v1 provides legacy browser
|
||||
support](https://github.com/necolas/normalize.css/tree/v1) (IE 6+, Safari 4+),
|
||||
but is no longer actively developed.
|
||||
|
||||
## Extended details
|
||||
|
||||
Additional detail and explanation of the esoteric parts of normalize.css.
|
||||
|
||||
#### `pre, code, kbd, samp`
|
||||
|
||||
The `font-family: monospace, monospace` hack fixes the inheritance and scaling
|
||||
of font-size for preformated text. The duplication of `monospace` is
|
||||
intentional. [Source](http://en.wikipedia.org/wiki/User:Davidgothberg/Test59).
|
||||
|
||||
#### `sub, sup`
|
||||
|
||||
Normally, using `sub` or `sup` affects the line-box height of text in all
|
||||
browsers. [Source](http://gist.github.com/413930).
|
||||
|
||||
#### `svg:not(:root)`
|
||||
|
||||
Adding `overflow: hidden` fixes IE9's SVG rendering. Earlier versions of IE
|
||||
don't support SVG, so we can safely use the `:not()` and `:root` selectors that
|
||||
modern browsers use in the default UA stylesheets to apply this style. [SVG
|
||||
Mailing List discussion](http://lists.w3.org/Archives/Public/public-svg-wg/2008JulSep/0339.html)
|
||||
|
||||
#### `input[type="search"]`
|
||||
|
||||
The search input is not fully stylable by default. In Chrome and Safari on
|
||||
OSX/iOS you can't control `font`, `padding`, `border`, or `background`. In
|
||||
Chrome and Safari on Windows you can't control `border` properly. It will apply
|
||||
`border-width` but will only show a border color (which cannot be controlled)
|
||||
for the outer 1px of that border. Applying `-webkit-appearance: textfield`
|
||||
addresses these issues without removing the benefits of search inputs (e.g.
|
||||
showing past searches).
|
||||
|
||||
#### `legend`
|
||||
|
||||
Adding `border: 0` corrects an IE 8–11 bug where `color` (yes, `color`) is not
|
||||
inherited by `legend`.
|
||||
|
||||
## Acknowledgements
|
||||
|
||||
Normalize.scss is a project by [Alex Guerrero](https://github.com/guerrero) based on [normalize.css](http://necolas.github.io/normalize.css) from [Nicolas Gallagher](https://github.com/necolas), co-created with [Jonathan Neal](https://github.com/jonathantneal).
|
||||
|
|
@ -1,427 +0,0 @@
|
|||
/*! normalize.scss v0.1.0 | MIT License | based on git.io/normalize */
|
||||
|
||||
/**
|
||||
* 1. Set default font family to sans-serif.
|
||||
* 2. Prevent iOS text size adjust after orientation change, without disabling
|
||||
* user zoom.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: sans-serif; /* 1 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove default margin.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Correct `block` display not defined for any HTML5 element in IE 8/9.
|
||||
* Correct `block` display not defined for `details` or `summary` in IE 10/11
|
||||
* and Firefox.
|
||||
* Correct `block` display not defined for `main` in IE 11.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
menu,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct `inline-block` display not defined in IE 8/9.
|
||||
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
progress,
|
||||
video {
|
||||
display: inline-block; /* 1 */
|
||||
vertical-align: baseline; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent modern browsers from displaying `audio` without controls.
|
||||
* Remove excess height in iOS 5 devices.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `[hidden]` styling not present in IE 8/9/10.
|
||||
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
|
||||
*/
|
||||
|
||||
[hidden],
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Links
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background color from active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability when focused and also mouse hovered in all browsers.
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in Safari and Chrome.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address variable `h1` font-size and margin within `section` and `article`
|
||||
* contexts in Firefox 4+, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent and variable font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove border when inside `a` element in IE 8/9/10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct overflow not hidden in IE 9/10/11.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address margin not present in IE 8/9 and Safari.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address differences between Firefox and other browsers.
|
||||
*/
|
||||
|
||||
hr {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Contain overflow in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address odd `em`-unit font size rendering in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Known limitation: by default, Chrome and Safari on OS X allow very limited
|
||||
* styling of `select`, unless a `border` property is set.
|
||||
*/
|
||||
|
||||
/**
|
||||
* 1. Correct color not being inherited.
|
||||
* Known issue: affects color of disabled elements.
|
||||
* 2. Correct font properties not being inherited.
|
||||
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
color: inherit; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
margin: 0; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `overflow` set to `hidden` in IE 8/9/10/11.
|
||||
*/
|
||||
|
||||
button {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||
* All other form control elements do not inherit `text-transform` values.
|
||||
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
|
||||
* Correct `select` style inheritance in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
* and `video` controls.
|
||||
* 2. Correct inability to style clickable `input` types in iOS.
|
||||
* 3. Improve usability and consistency of cursor style between image-type
|
||||
* `input` and others.
|
||||
*/
|
||||
|
||||
button,
|
||||
html input[type="button"], /* 1 */
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
cursor: pointer; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Re-set default cursor for disabled elements.
|
||||
*/
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and border in Firefox 4+.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||
* the UA stylesheet.
|
||||
*/
|
||||
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/**
|
||||
* It's recommended that you don't attempt to style these elements.
|
||||
* Firefox's implementation doesn't respect box-sizing, padding, or width.
|
||||
*
|
||||
* 1. Address box sizing set to `content-box` in IE 8/9/10.
|
||||
* 2. Remove excess padding in IE 8/9/10.
|
||||
*/
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
|
||||
* `font-size` values of the `input`, it causes the cursor style of the
|
||||
* decrement button to change from `default` to `text`.
|
||||
*/
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
|
||||
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
|
||||
* (include `-moz` to future-proof).
|
||||
*/
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; /* 2 */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
|
||||
* Safari (but not Chrome) clips the cancel button when the search input has
|
||||
* padding (and `textfield` appearance).
|
||||
*/
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Define consistent border, margin, and padding.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct `color` not being inherited in IE 8/9/10/11.
|
||||
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||||
*/
|
||||
|
||||
legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove default vertical scrollbar in IE 8/9/10/11.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Don't inherit the `font-weight` (applied by a rule above).
|
||||
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
|
||||
*/
|
||||
|
||||
optgroup {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Tables
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove most spacing between table cells.
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
{
|
||||
"_args": [
|
||||
[
|
||||
"normalize.scss",
|
||||
"/Users/pmarsceill/_projects/just-the-docs"
|
||||
]
|
||||
],
|
||||
"_from": "normalize.scss@*",
|
||||
"_id": "normalize.scss@0.1.0",
|
||||
"_inCache": true,
|
||||
"_installable": true,
|
||||
"_location": "/normalize.scss",
|
||||
"_nodeVersion": "0.10.32",
|
||||
"_npmUser": {
|
||||
"email": "alexguerrero1092@gmail.com",
|
||||
"name": "alexguerrero"
|
||||
},
|
||||
"_npmVersion": "2.0.2",
|
||||
"_phantomChildren": {},
|
||||
"_requested": {
|
||||
"name": "normalize.scss",
|
||||
"raw": "normalize.scss",
|
||||
"rawSpec": "",
|
||||
"scope": null,
|
||||
"spec": "*",
|
||||
"type": "range"
|
||||
},
|
||||
"_requiredBy": [
|
||||
"#DEV:/"
|
||||
],
|
||||
"_resolved": "https://registry.npmjs.org/normalize.scss/-/normalize.scss-0.1.0.tgz",
|
||||
"_shasum": "4a21dc25bd4c019c857785f829b658aba2a8f9ab",
|
||||
"_shrinkwrap": null,
|
||||
"_spec": "normalize.scss",
|
||||
"_where": "/Users/pmarsceill/_projects/just-the-docs",
|
||||
"author": "",
|
||||
"bugs": {
|
||||
"url": "https://github.com/guerrero/normalize.scss/issues"
|
||||
},
|
||||
"dependencies": {},
|
||||
"description": "Normalize.scss as a node packaged module",
|
||||
"devDependencies": {},
|
||||
"directories": {},
|
||||
"dist": {
|
||||
"shasum": "4a21dc25bd4c019c857785f829b658aba2a8f9ab",
|
||||
"tarball": "https://registry.npmjs.org/normalize.scss/-/normalize.scss-0.1.0.tgz"
|
||||
},
|
||||
"files": [
|
||||
"normalize.scss"
|
||||
],
|
||||
"gitHead": "d67d517e28615a873066438af1d4845c157c9baf",
|
||||
"homepage": "https://github.com/guerrero/normalize.scss",
|
||||
"license": "MIT",
|
||||
"maintainers": [
|
||||
{
|
||||
"name": "alexguerrero",
|
||||
"email": "alexguerrero1092@gmail.com"
|
||||
}
|
||||
],
|
||||
"name": "normalize.scss",
|
||||
"optionalDependencies": {},
|
||||
"readme": "ERROR: No README data found!",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/guerrero/normalize.scss.git"
|
||||
},
|
||||
"scripts": {},
|
||||
"style": "normalize.scss",
|
||||
"version": "0.1.0"
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
---
|
||||
---
|
||||
{
|
||||
{% for page in site.html_pages %}"{{ forloop.index0 }}": {
|
||||
"id": "{{ forloop.index0 }}",
|
||||
"title": "{{ page.title | xml_escape }}",
|
||||
"content": "{{ page.content | markdownify | strip_html | xml_escape | remove: 'Table of contents' | strip_newlines | replace: '\', ' ' }}",
|
||||
"url": "{{ page.url | absolute_url | xml_escape }}",
|
||||
"relUrl": "{{ page.url | xml_escape }}"
|
||||
}{% if forloop.last %}{% else %},
|
||||
{% endif %}{% endfor %}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
/*
|
||||
|
||||
Add styles or override variables from the theme here.
|
||||
|
||||
*/
|
||||
|
||||
|
|
@ -0,0 +1,136 @@
|
|||
baseURL = "/"
|
||||
title = "Moor"
|
||||
|
||||
enableRobotsTXT = true
|
||||
|
||||
# Hugo allows theme composition (and inheritance). The precedence is from left to right.
|
||||
theme = ["docsy"]
|
||||
|
||||
# Will give values to .Lastmod etc.
|
||||
enableGitInfo = true
|
||||
|
||||
# Language settings
|
||||
contentDir = "content/en"
|
||||
defaultContentLanguage = "en"
|
||||
defaultContentLanguageInSubdir = false
|
||||
# Useful when translating.
|
||||
#enableMissingTranslationPlaceholders = true
|
||||
|
||||
disableKinds = ["taxonomy", "taxonomyTerm"]
|
||||
|
||||
# Highlighting config
|
||||
pygmentsCodeFences = true
|
||||
pygmentsUseClasses = false
|
||||
# Use the new Chroma Go highlighter in Hugo.
|
||||
pygmentsUseClassic = false
|
||||
#pygmentsOptions = "linenos=table"
|
||||
# See https://help.farbox.com/pygments.html
|
||||
pygmentsStyle = "tango"
|
||||
|
||||
# First one is picked as the Twitter card image if not set on page.
|
||||
#images = ["images/project-illustration.png"]
|
||||
|
||||
# Configure how URLs look like per section.
|
||||
[permalinks]
|
||||
blog = "/:section/:year/:month/:day/:slug/"
|
||||
|
||||
## Configuration for BlackFriday markdown parser: https://github.com/russross/blackfriday
|
||||
[blackfriday]
|
||||
plainIDAnchors = true
|
||||
hrefTargetBlank = true
|
||||
angledQuotes = false
|
||||
latexDashes = true
|
||||
|
||||
# Image processing configuration.
|
||||
[imaging]
|
||||
resampleFilter = "CatmullRom"
|
||||
quality = 75
|
||||
anchor = "smart"
|
||||
|
||||
[services]
|
||||
[services.googleAnalytics]
|
||||
# Comment out the next line to disable GA tracking. Also disables the feature described in [params.ui.feedback].
|
||||
#id = "UA-00000000-0"
|
||||
|
||||
# Language configuration
|
||||
|
||||
[languages]
|
||||
[languages.en]
|
||||
title = "Goldydocs"
|
||||
description = "A Docsy example site"
|
||||
languageName ="English"
|
||||
# Weight used for sorting.
|
||||
weight = 1
|
||||
#[languages.no]
|
||||
#title = "Goldydocs"
|
||||
#description = "Docsy er operativsystem for skyen"
|
||||
#languageName ="Norsk"
|
||||
#contentDir = "content/no"
|
||||
#time_format_default = "02.01.2006"
|
||||
#time_format_blog = "02.01.2006"
|
||||
|
||||
|
||||
# Everything below this are Site Params
|
||||
|
||||
[params]
|
||||
copyright = "Simon Binder"
|
||||
#privacy_policy = "https://policies.google.com/privacy"
|
||||
|
||||
# Menu title if your navbar has a versions selector to access old versions of your site.
|
||||
# This menu appears only if you have at least one [params.versions] set.
|
||||
version_menu = "Releases"
|
||||
|
||||
# Repository configuration (URLs for in-page links to opening issues and suggesting changes)
|
||||
github_repo = "https://github.com/simolus3/moor"
|
||||
|
||||
# Specify a value here if your content directory is not in your repo's root directory
|
||||
github_subdir = "docs"
|
||||
|
||||
# Google Custom Search Engine ID. Remove or comment out to disable search.
|
||||
gcs_engine_id = " 002567324444333206795:_yptu7lact8 "
|
||||
|
||||
# User interface configuration
|
||||
[params.ui]
|
||||
# Enable to show the side bar menu in its compact state.
|
||||
sidebar_menu_compact = false
|
||||
# Set to true to disable breadcrumb navigation.
|
||||
breadcrumb_disable = false
|
||||
# Set to true to hide the sidebar search box (the top nav search box will still be displayed if search is enabled)
|
||||
sidebar_search_disable = false
|
||||
# Set to false if you don't want to display a logo (/assets/icons/logo.svg) in the top nav bar
|
||||
navbar_logo = false
|
||||
|
||||
[params.links]
|
||||
# End user relevant links. These will show up on left side of footer and in the community page if you have one.
|
||||
[[params.links.user]]
|
||||
name = "User mailing list"
|
||||
url = "https://example.org/mail"
|
||||
icon = "fa fa-envelope"
|
||||
desc = "Discussion and help from your fellow users"
|
||||
[[params.links.user]]
|
||||
name ="Twitter"
|
||||
url = "https://example.org/twitter"
|
||||
icon = "fab fa-twitter"
|
||||
desc = "Follow us on Twitter to get the latest news!"
|
||||
[[params.links.user]]
|
||||
name = "Stack Overflow"
|
||||
url = "https://example.org/stack"
|
||||
icon = "fab fa-stack-overflow"
|
||||
desc = "Practical questions and curated answers"
|
||||
# Developer relevant links. These will show up on right side of footer and in the community page if you have one.
|
||||
[[params.links.developer]]
|
||||
name = "GitHub"
|
||||
url = "https://github.com/google/docsy"
|
||||
icon = "fab fa-github"
|
||||
desc = "Development takes place here!"
|
||||
[[params.links.developer]]
|
||||
name = "Slack"
|
||||
url = "https://example.org/slack"
|
||||
icon = "fab fa-slack"
|
||||
desc = "Chat with other project developers"
|
||||
[[params.links.developer]]
|
||||
name = "Developer mailing list"
|
||||
url = "https://example.org/mail"
|
||||
icon = "fa fa-envelope"
|
||||
desc = "Discuss development issues around the project"
|
||||
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
+++
|
||||
title = "Goldydocs"
|
||||
linkTitle = "Goldydocs"
|
||||
|
||||
+++
|
||||
|
||||
{{< blocks/cover title="Welcome to Goldydocs: A Docsy Example Project!" image_anchor="top" height="full" color="orange" >}}
|
||||
<div class="mx-auto">
|
||||
<a class="btn btn-lg btn-primary mr-3 mb-4" href="{{< relref "/docs" >}}">
|
||||
Learn More <i class="fas fa-arrow-alt-circle-right ml-2"></i>
|
||||
</a>
|
||||
<a class="btn btn-lg btn-secondary mr-3 mb-4" href="https://github.com/google/docsy-example">
|
||||
Download <i class="fab fa-github ml-2 "></i>
|
||||
</a>
|
||||
<p class="lead mt-5">Porridge temperature assessment - in the cloud!</p>
|
||||
<div class="mx-auto mt-5">
|
||||
{{< blocks/link-down color="info" >}}
|
||||
</div>
|
||||
</div>
|
||||
{{< /blocks/cover >}}
|
||||
|
||||
|
||||
{{% blocks/lead color="primary" %}}
|
||||
Goldydocs provides a single web UI providing visibility into porridge temperature, chair size, and bed softness metrics! You can even find out who's been eating **your** porridge.
|
||||
|
||||
(Sadly, Goldydocs isn't a real project, but you can use this site as an example to create your own real websites with [Docsy](http://docsy.dev))
|
||||
{{% /blocks/lead %}}
|
||||
|
||||
{{< blocks/section color="dark" >}}
|
||||
{{% blocks/feature icon="fa-lightbulb" title="New chair metrics!" %}}
|
||||
The Goldydocs UI now shows chair size metrics by default.
|
||||
|
||||
Please follow this space for updates!
|
||||
{{% /blocks/feature %}}
|
||||
|
||||
|
||||
{{% blocks/feature icon="fab fa-github" title="Contributions welcome!" url="https://github.com/google/docsy-example" %}}
|
||||
We do a [Pull Request](https://github.com/gohugoio/hugo/pulls) contributions workflow on **GitHub**. New users are always welcome!
|
||||
{{% /blocks/feature %}}
|
||||
|
||||
|
||||
{{% blocks/feature icon="fab fa-twitter" title="Follow us on Twitter!" url="https://twitter.com/docsydocs" %}}
|
||||
For announcement of latest features etc.
|
||||
{{% /blocks/feature %}}
|
||||
|
||||
|
||||
{{< /blocks/section >}}
|
||||
|
||||
|
||||
{{< blocks/section >}}
|
||||
<div class="col">
|
||||
<h1 class="text-center">This is the second Section</h1>
|
||||
</div>
|
||||
|
||||
{{< /blocks/section >}}
|
||||
|
||||
|
||||
|
||||
{{< blocks/section >}}
|
||||
{{% blocks/feature icon="fab fa-app-store-ios" title="Download **from AppStore**" %}}
|
||||
Get the Goldydocs app!
|
||||
{{% /blocks/feature %}}
|
||||
|
||||
|
||||
{{% blocks/feature icon="fab fa-github" title="Contributions welcome!" url="https://github.com/gohugoio/hugo" %}}
|
||||
We do a [Pull Request](https://github.com/gohugoio/hugo/pulls) contributions workflow on **GitHub**. New users are always welcome!
|
||||
{{% /blocks/feature %}}
|
||||
|
||||
|
||||
{{% blocks/feature icon="fab fa-twitter" title="Follow us on Twitter!" url="https://twitter.com/GoHugoIO" %}}
|
||||
For announcement of latest features etc.
|
||||
{{% /blocks/feature %}}
|
||||
|
||||
|
||||
{{< /blocks/section >}}
|
||||
|
||||
{{< blocks/section >}}
|
||||
|
||||
<div class="col-12">
|
||||
<h1 class="text-center">This is another Section</h1>
|
||||
</div>
|
||||
|
||||
{{< /blocks/section >}}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
---
|
||||
title: About Goldydocs
|
||||
linkTitle: About
|
||||
menu:
|
||||
main:
|
||||
weight: 10
|
||||
|
||||
---
|
||||
|
||||
|
||||
{{< blocks/cover title="About Goldydocs" image_anchor="bottom" height="min" >}}
|
||||
|
||||
<p class="lead mt-5">A sample site using the Docsy Hugo theme.
|
||||
</p>
|
||||
|
||||
{{< /blocks/cover >}}
|
||||
|
||||
{{% blocks/lead %}}
|
||||
Goldydocs is a sample site using the <a href="https://github.com/google/docsy">Docsy</a> Hugo theme that shows what it can do and provides you with a template site structure. It’s designed for you to clone and edit as much as you like. See the different sections of the documentation and site for more ideas.
|
||||
{{% /blocks/lead %}}
|
||||
|
||||
|
||||
{{< blocks/section >}}
|
||||
<div class="col-12">
|
||||
<h1 class="text-center">This is another section</h1>
|
||||
</div>
|
||||
|
||||
{{< /blocks/section >}}
|
||||
|
||||
|
||||
|
||||
{{< blocks/section >}}
|
||||
|
||||
<div class="col-12">
|
||||
<h1 class="text-center">This is another section</h1>
|
||||
</div>
|
||||
|
||||
{{< /blocks/section >}}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
|
||||
---
|
||||
title: "Examples"
|
||||
linkTitle: "Examples"
|
||||
weight: 3
|
||||
date: 2017-01-05
|
||||
description: >
|
||||
See your project in action!
|
||||
---
|
||||
|
||||
{{% pageinfo %}}
|
||||
This is a placeholder page that shows you how to use this template site.
|
||||
{{% /pageinfo %}}
|
||||
|
||||
Do you have any example **applications** or **code** for your users in your repo or elsewhere? Link to your examples here.
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
---
|
||||
title: "Getting Started"
|
||||
linkTitle: "Getting Started"
|
||||
weight: 2
|
||||
description: >
|
||||
What does your user need to know to try your project?
|
||||
---
|
||||
|
||||
{{% pageinfo %}}
|
||||
This is a placeholder page that shows you how to use this template site.
|
||||
{{% /pageinfo %}}
|
||||
|
||||
Information in this section helps your user try your project themselves.
|
||||
|
||||
* What do your users need to do to start using your project? This could include downloading/installation instructions, including any prerequisites or system requirements.
|
||||
|
||||
* Introductory “Hello World” example, if appropriate. More complex tutorials should live in the Tutorials section.
|
||||
|
||||
Consider using the headings below for your getting started page. You can delete any that are not applicable to your project.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Are there any system requirements for using your project? What languages are supported (if any)? Do users need to already have any software or tools installed?
|
||||
|
||||
## Installation
|
||||
|
||||
Where can your user find your project code? How can they install it (binaries, installable package, build from source)? Are there multiple options/versions they can install and how should they choose the right one for them?
|
||||
|
||||
## Setup
|
||||
|
||||
Is there any initial setup users need to do after installation to try your project?
|
||||
|
||||
## Try it out!
|
||||
|
||||
Can your users test their installation, for example by running a commmand or deploying a Hello World example?
|
||||
|
||||
|
|
@ -0,0 +1,239 @@
|
|||
---
|
||||
title: "Example Page"
|
||||
linkTitle: "Example Page"
|
||||
date: 2017-01-05
|
||||
description: >
|
||||
A short lead descripton about this content page. It can be **bold** or _italic_ and can be split over multiple paragraphs.
|
||||
---
|
||||
|
||||
{{% pageinfo %}}
|
||||
This is a placeholder page. Replace it with your own content.
|
||||
{{% /pageinfo %}}
|
||||
|
||||
|
||||
Text can be **bold**, _italic_, or ~~strikethrough~~. [Links](https://gohugo.io) should be blue with no underlines (unless hovered over).
|
||||
|
||||
There should be whitespace between paragraphs. Vape migas chillwave sriracha poutine try-hard distillery. Tattooed shabby chic small batch, pabst art party heirloom letterpress air plant pop-up. Sustainable chia skateboard art party banjo cardigan normcore affogato vexillologist quinoa meggings man bun master cleanse shoreditch readymade. Yuccie prism four dollar toast tbh cardigan iPhone, tumblr listicle live-edge VHS. Pug lyft normcore hot chicken biodiesel, actually keffiyeh thundercats photo booth pour-over twee fam food truck microdosing banh mi. Vice activated charcoal raclette unicorn live-edge post-ironic. Heirloom vexillologist coloring book, beard deep v letterpress echo park humblebrag tilde.
|
||||
|
||||
90's four loko seitan photo booth gochujang freegan tumeric listicle fam ugh humblebrag. Bespoke leggings gastropub, biodiesel brunch pug fashion axe meh swag art party neutra deep v chia. Enamel pin fanny pack knausgaard tofu, artisan cronut hammock meditation occupy master cleanse chartreuse lumbersexual. Kombucha kogi viral truffaut synth distillery single-origin coffee ugh slow-carb marfa selfies. Pitchfork schlitz semiotics fanny pack, ugh artisan vegan vaporware hexagon. Polaroid fixie post-ironic venmo wolf ramps **kale chips**.
|
||||
|
||||
> There should be no margin above this first sentence.
|
||||
>
|
||||
> Blockquotes should be a lighter gray with a border along the left side in the secondary color.
|
||||
>
|
||||
> There should be no margin below this final sentence.
|
||||
|
||||
## First Header 2
|
||||
|
||||
This is a normal paragraph following a header. Knausgaard kale chips snackwave microdosing cronut copper mug swag synth bitters letterpress glossier **craft beer**. Mumblecore bushwick authentic gochujang vegan chambray meditation jean shorts irony. Viral farm-to-table kale chips, pork belly palo santo distillery activated charcoal aesthetic jianbing air plant woke lomo VHS organic. Tattooed locavore succulents heirloom, small batch sriracha echo park DIY af. Shaman you probably haven't heard of them copper mug, crucifix green juice vape *single-origin coffee* brunch actually. Mustache etsy vexillologist raclette authentic fam. Tousled beard humblebrag asymmetrical. I love turkey, I love my job, I love my friends, I love Chardonnay!
|
||||
|
||||
Deae legum paulatimque terra, non vos mutata tacet: dic. Vocant docuique me plumas fila quin afuerunt copia haec o neque.
|
||||
|
||||
On big screens, paragraphs and headings should not take up the full container width, but we want tables, code blocks and similar to take the full width.
|
||||
|
||||
Scenester tumeric pickled, authentic crucifix post-ironic fam freegan VHS pork belly 8-bit yuccie PBR&B. **I love this life we live in**.
|
||||
|
||||
|
||||
## Second Header 2
|
||||
|
||||
> This is a blockquote following a header. Bacon ipsum dolor sit amet t-bone doner shank drumstick, pork belly porchetta chuck sausage brisket ham hock rump pig. Chuck kielbasa leberkas, pork bresaola ham hock filet mignon cow shoulder short ribs biltong.
|
||||
|
||||
### Header 3
|
||||
|
||||
```
|
||||
This is a code block following a header.
|
||||
```
|
||||
|
||||
Next level leggings before they sold out, PBR&B church-key shaman echo park. Kale chips occupy godard whatever pop-up freegan pork belly selfies. Gastropub Belinda subway tile woke post-ironic seitan. Shabby chic man bun semiotics vape, chia messenger bag plaid cardigan.
|
||||
|
||||
#### Header 4
|
||||
|
||||
* This is an unordered list following a header.
|
||||
* This is an unordered list following a header.
|
||||
* This is an unordered list following a header.
|
||||
|
||||
##### Header 5
|
||||
|
||||
1. This is an ordered list following a header.
|
||||
2. This is an ordered list following a header.
|
||||
3. This is an ordered list following a header.
|
||||
|
||||
###### Header 6
|
||||
|
||||
| What | Follows |
|
||||
|-----------|-----------------|
|
||||
| A table | A header |
|
||||
| A table | A header |
|
||||
| A table | A header |
|
||||
|
||||
----------------
|
||||
|
||||
There's a horizontal rule above and below this.
|
||||
|
||||
----------------
|
||||
|
||||
Here is an unordered list:
|
||||
|
||||
* Liverpool F.C.
|
||||
* Chelsea F.C.
|
||||
* Manchester United F.C.
|
||||
|
||||
And an ordered list:
|
||||
|
||||
1. Michael Brecker
|
||||
2. Seamus Blake
|
||||
3. Branford Marsalis
|
||||
|
||||
And an unordered task list:
|
||||
|
||||
- [x] Create a Hugo theme
|
||||
- [x] Add task lists to it
|
||||
- [ ] Take a vacation
|
||||
|
||||
And a "mixed" task list:
|
||||
|
||||
- [ ] Pack bags
|
||||
- ?
|
||||
- [ ] Travel!
|
||||
|
||||
And a nested list:
|
||||
|
||||
* Jackson 5
|
||||
* Michael
|
||||
* Tito
|
||||
* Jackie
|
||||
* Marlon
|
||||
* Jermaine
|
||||
* TMNT
|
||||
* Leonardo
|
||||
* Michelangelo
|
||||
* Donatello
|
||||
* Raphael
|
||||
|
||||
Definition lists can be used with Markdown syntax. Definition headers are bold.
|
||||
|
||||
Name
|
||||
: Godzilla
|
||||
|
||||
Born
|
||||
: 1952
|
||||
|
||||
Birthplace
|
||||
: Japan
|
||||
|
||||
Color
|
||||
: Green
|
||||
|
||||
|
||||
----------------
|
||||
|
||||
Tables should have bold headings and alternating shaded rows.
|
||||
|
||||
| Artist | Album | Year |
|
||||
|-------------------|-----------------|------|
|
||||
| Michael Jackson | Thriller | 1982 |
|
||||
| Prince | Purple Rain | 1984 |
|
||||
| Beastie Boys | License to Ill | 1986 |
|
||||
|
||||
If a table is too wide, it should scroll horizontally.
|
||||
|
||||
| Artist | Album | Year | Label | Awards | Songs |
|
||||
|-------------------|-----------------|------|-------------|----------|-----------|
|
||||
| Michael Jackson | Thriller | 1982 | Epic Records | Grammy Award for Album of the Year, American Music Award for Favorite Pop/Rock Album, American Music Award for Favorite Soul/R&B Album, Brit Award for Best Selling Album, Grammy Award for Best Engineered Album, Non-Classical | Wanna Be Startin' Somethin', Baby Be Mine, The Girl Is Mine, Thriller, Beat It, Billie Jean, Human Nature, P.Y.T. (Pretty Young Thing), The Lady in My Life |
|
||||
| Prince | Purple Rain | 1984 | Warner Brothers Records | Grammy Award for Best Score Soundtrack for Visual Media, American Music Award for Favorite Pop/Rock Album, American Music Award for Favorite Soul/R&B Album, Brit Award for Best Soundtrack/Cast Recording, Grammy Award for Best Rock Performance by a Duo or Group with Vocal | Let's Go Crazy, Take Me With U, The Beautiful Ones, Computer Blue, Darling Nikki, When Doves Cry, I Would Die 4 U, Baby I'm a Star, Purple Rain |
|
||||
| Beastie Boys | License to Ill | 1986 | Mercury Records | noawardsbutthistablecelliswide | Rhymin & Stealin, The New Style, She's Crafty, Posse in Effect, Slow Ride, Girls, (You Gotta) Fight for Your Right, No Sleep Till Brooklyn, Paul Revere, Hold It Now, Hit It, Brass Monkey, Slow and Low, Time to Get Ill |
|
||||
|
||||
----------------
|
||||
|
||||
Code snippets like `var foo = "bar";` can be shown inline.
|
||||
|
||||
Also, `this should vertically align` ~~`with this`~~ ~~and this~~.
|
||||
|
||||
Code can also be shown in a block element.
|
||||
|
||||
```
|
||||
foo := "bar";
|
||||
bar := "foo";
|
||||
```
|
||||
|
||||
Code can also use syntax highlighting.
|
||||
|
||||
```go
|
||||
func main() {
|
||||
input := `var foo = "bar";`
|
||||
|
||||
lexer := lexers.Get("javascript")
|
||||
iterator, _ := lexer.Tokenise(nil, input)
|
||||
style := styles.Get("github")
|
||||
formatter := html.New(html.WithLineNumbers())
|
||||
|
||||
var buff bytes.Buffer
|
||||
formatter.Format(&buff, style, iterator)
|
||||
|
||||
fmt.Println(buff.String())
|
||||
}
|
||||
```
|
||||
|
||||
```
|
||||
Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.
|
||||
```
|
||||
|
||||
Inline code inside table cells should still be distinguishable.
|
||||
|
||||
| Language | Code |
|
||||
|-------------|--------------------|
|
||||
| Javascript | `var foo = "bar";` |
|
||||
| Ruby | `foo = "bar"{` |
|
||||
|
||||
----------------
|
||||
|
||||
Small images should be shown at their actual size.
|
||||
|
||||
|
||||
|
||||
Large images should always scale down and fit in the content container.
|
||||
|
||||
|
||||
|
||||
_The photo above of the Spruce Picea abies shoot with foliage buds: Bjørn Erik Pedersen, CC-BY-SA._
|
||||
|
||||
|
||||
## Components
|
||||
|
||||
### Alerts
|
||||
|
||||
{{< alert >}}This is an alert.{{< /alert >}}
|
||||
{{< alert title="Note" >}}This is an alert with a title.{{< /alert >}}
|
||||
{{% alert title="Note" %}}This is an alert with a title and **Markdown**.{{% /alert %}}
|
||||
{{< alert color="success" >}}This is a successful alert.{{< /alert >}}
|
||||
{{< alert color="warning" >}}This is a warning.{{< /alert >}}
|
||||
{{< alert color="warning" title="Warning" >}}This is a warning with a title.{{< /alert >}}
|
||||
|
||||
|
||||
## Another Heading
|
||||
|
||||
Add some sections here to see how the ToC looks like. Bacon ipsum dolor sit amet t-bone doner shank drumstick, pork belly porchetta chuck sausage brisket ham hock rump pig. Chuck kielbasa leberkas, pork bresaola ham hock filet mignon cow shoulder short ribs biltong.
|
||||
|
||||
### This Document
|
||||
|
||||
Inguina genus: Anaphen post: lingua violente voce suae meus aetate diversi. Orbis unam nec flammaeque status deam Silenum erat et a ferrea. Excitus rigidum ait: vestro et Herculis convicia: nitidae deseruit coniuge Proteaque adiciam *eripitur*? Sitim noceat signa *probat quidem*. Sua longis *fugatis* quidem genae.
|
||||
|
||||
|
||||
### Pixel Count
|
||||
|
||||
Tilde photo booth wayfarers cliche lomo intelligentsia man braid kombucha vaporware farm-to-table mixtape portland. PBR&B pickled cornhole ugh try-hard ethical subway tile. Fixie paleo intelligentsia pabst. Ennui waistcoat vinyl gochujang. Poutine salvia authentic affogato, chambray lumbersexual shabby chic.
|
||||
|
||||
### Contact Info
|
||||
|
||||
Plaid hell of cred microdosing, succulents tilde pour-over. Offal shabby chic 3 wolf moon blue bottle raw denim normcore poutine pork belly.
|
||||
|
||||
|
||||
### External Links
|
||||
|
||||
Stumptown PBR&B keytar plaid street art, forage XOXO pitchfork selvage affogato green juice listicle pickled everyday carry hashtag. Organic sustainable letterpress sartorial scenester intelligentsia swag bushwick. Put a bird on it stumptown neutra locavore. IPhone typewriter messenger bag narwhal. Ennui cold-pressed seitan flannel keytar, single-origin coffee adaptogen occupy yuccie williamsburg chillwave shoreditch forage waistcoat.
|
||||
|
||||
|
||||
|
||||
```
|
||||
This is the final element on the page and there should be no margin below this.
|
||||
```
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
---
|
||||
title: "Overview"
|
||||
linkTitle: "Overview"
|
||||
weight: 1
|
||||
description: >
|
||||
Here's where your user finds out if your project is for them.
|
||||
---
|
||||
|
||||
{{% pageinfo %}}
|
||||
This is a placeholder page that shows you how to use this template site.
|
||||
{{% /pageinfo %}}
|
||||
|
||||
|
||||
The Overview is where your users find out about your project. Depending on the size of your docset, you can have a separate overview page (like this one) or put your overview contents in the Documentation landing page (like in the Docsy User Guide).
|
||||
|
||||
Try answering these questions for your user in this page:
|
||||
|
||||
## What is it?
|
||||
|
||||
Introduce your project, including what it does or lets you do, why you would use it, and its primary goal (and how it achieves it). This should be similar to your README description, though you can go into a little more detail here if you want.
|
||||
|
||||
## Why do I want it?
|
||||
|
||||
Help your user know if your project will help them. Useful information can include:
|
||||
|
||||
* **What is it good for?**: What types of problems does your project solve? What are the benefits of using it?
|
||||
|
||||
* **What is it not good for?**: For example, point out situations that might intuitively seem suited for your project, but aren't for some reason. Also mention known limitations, scaling issues, or anything else that might let your users know if the project is not for them.
|
||||
|
||||
* **What is it *not yet* good for?**: Highlight any useful features that are coming soon.
|
||||
|
||||
## Where should I go next?
|
||||
|
||||
Give your users next steps from the Overview. For example:
|
||||
|
||||
* [Getting Started](/getting-started/): Get started with $project
|
||||
* [Examples](/examples/): Check out some example code!
|
||||
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
|
||||
---
|
||||
title: "Documentation"
|
||||
linkTitle: "Documentation"
|
||||
weight: 20
|
||||
menu:
|
||||
main:
|
||||
weight: 20
|
||||
---
|
||||
|
||||
{{% pageinfo %}}
|
||||
This is a placeholder page that shows you how to use this template site.
|
||||
{{% /pageinfo %}}
|
||||
|
||||
|
||||
This section is where the user documentation for your project lives - all the information your users need to understand and successfully use your project.
|
||||
|
||||
For large documentation sets we recommend adding content under the headings in this section, though if some or all of them don’t apply to your project feel free to remove them or add your own. You can see an example of a smaller Docsy documentation site in the [Docsy User Guide](https://docsy.dev/docs/), which lives in the [Docsy theme repo](https://github.com/google/docsy/tree/master/userguide) if you'd like to copy its docs section.
|
||||
|
||||
Other content such as marketing material, case studies, and community updates should live in the [About](/about/) and [Community](/community/) pages.
|
||||
|
||||
Find out how to use the Docsy theme in the [Docsy User Guide](https://docsy.dev/docs/). You can learn more about how to organize your documentation (and how we organized this site) in [Organizing Your Content](https://docsy.dev/docs/best-practices/organizing-content/).
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: Search Results
|
||||
layout: search
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
---
|
||||
layout: guide
|
||||
title: Modularity with DAOs
|
||||
nav_order: 5
|
||||
permalink: /daos/
|
||||
---
|
||||
|
||||
# Extracting functionality with DAOs
|
||||
When you have a lot of queries, putting them all into one class might become
|
||||
tedious. You can avoid this by extracting some queries into classes that are
|
||||
available from your main database class. Consider the following code:
|
||||
```dart
|
||||
part 'todos_dao.g.dart';
|
||||
|
||||
// the _TodosDaoMixin will be created by moor. It contains all the necessary
|
||||
// fields for the tables. The <MyDatabase> type annotation is the database class
|
||||
// that should use this dao.
|
||||
@UseDao(tables: [Todos])
|
||||
class TodosDao extends DatabaseAccessor<MyDatabase> with _$TodosDaoMixin {
|
||||
// this constructor is required so that the main database can create an instance
|
||||
// of this object.
|
||||
TodosDao(MyDatabase db) : super(db);
|
||||
|
||||
Stream<List<TodoEntry>> todosInCategory(Category category) {
|
||||
if (category == null) {
|
||||
return (select(todos)..where((t) => isNull(t.category))).watch();
|
||||
} else {
|
||||
return (select(todos)..where((t) => t.category.equals(category.id)))
|
||||
.watch();
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
If we now change the annotation on the `MyDatabase` class to `@UseMoor(tables: [Todos, Categories], daos: [TodosDao])`
|
||||
and re-run the code generation, a generated getter `todosDao` can be used to access the instance of that dao.
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
---
|
||||
title: Frequently asked questions
|
||||
nav_order: 6
|
||||
permalink: /faq/
|
||||
---
|
||||
|
||||
## Using the database
|
||||
If you've created a `MyDatabase` class by following the [getting started guide]({{site.url}}/getting-started/), you
|
||||
still need to somehow obtain an instance of it. It's recommended to only have one (singleton) instance of your database,
|
||||
so you could store that instance in a global variable:
|
||||
|
||||
### Vanilla flutter
|
||||
```dart
|
||||
MyDatabase database;
|
||||
|
||||
void main() {
|
||||
database = MyDatabase();
|
||||
runApp(MyFlutterApp());
|
||||
}
|
||||
```
|
||||
It would be cleaner to use `InheritedWidgets` for that, and the `provider` package helps here:
|
||||
|
||||
### Provider
|
||||
If you're using the [provider](https://pub.dev/packages/provider) package, you can wrap your top-level widget in a
|
||||
provider that manages the database instance:
|
||||
```dart
|
||||
void main() {
|
||||
runApp(
|
||||
Provider<MyDatabase>(
|
||||
builder: (context) => MyDatabase(),
|
||||
child: MyFlutterApp(),
|
||||
),
|
||||
);
|
||||
}
|
||||
```
|
||||
Your widgets would then have access to the database using `Provider.of<MyDatabase>(context)`.
|
||||
|
||||
### A more complex architecture
|
||||
If you're strict on keeping your business logic out of the widget layer, you probably use some dependency injection
|
||||
framework like `kiwi` or `get_it` to instantiate services and view models. Creating a singleton instance of `MyDatabase`
|
||||
in your favorite dependency injection framework for flutter hence solves this problem for you.
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
---
|
||||
layout: guide
|
||||
title: Getting started
|
||||
nav_order: 1
|
||||
permalink: /getting-started/
|
||||
---
|
||||
|
||||
# Getting started
|
||||
_Note:_ If you prefer a tutorial video, Reso Coder has made a detailed video explaining
|
||||
how to get started. You can watch it [here](https://youtu.be/zpWsedYMczM).
|
||||
|
||||
{% include content/getting_started.md %}
|
||||
|
||||
Congratulations, you now have a class which you can use to easily write queries.
|
||||
A detailed guide on how to do that in Dart is written [here]({{"/queries" | absolute_url}}).
|
||||
If you prefer to write SQL and have moor generate the mapping out, check out
|
||||
[custom queries]({{"queries/custom" | absolute_url}})
|
||||
|
||||
PS: You might be asking how you would actually obtain an instance of `MyDatabase` for
|
||||
your widgets. If so, [here]({{site.url}}/faq/#using-the-database) is some guidance.
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
---
|
||||
layout: feature
|
||||
title: Migrations
|
||||
nav_order: 4
|
||||
permalink: /migrations/
|
||||
---
|
||||
# Migrations
|
||||
Moor provides a migration API that can be used to gradually apply schema changes after bumping
|
||||
the `schemaVersion` getter inside the `Database` class. To use it, override the `migration`
|
||||
getter. Here's an example: Let's say you wanted to add a due date to your todo entries:
|
||||
```dart
|
||||
class Todos extends Table {
|
||||
IntColumn get id => integer().autoIncrement()();
|
||||
TextColumn get title => text().withLength(min: 6, max: 10)();
|
||||
TextColumn get content => text().named('body')();
|
||||
IntColumn get category => integer().nullable()();
|
||||
DateTimeColumn get dueDate => dateTime().nullable()(); // new, added column
|
||||
}
|
||||
```
|
||||
We can now change the `database` class like this:
|
||||
```dart
|
||||
@override
|
||||
int get schemaVersion => 2; // bump because the tables have changed
|
||||
|
||||
@override
|
||||
MigrationStrategy get migration => MigrationStrategy(
|
||||
onCreate: (Migrator m) {
|
||||
return m.createAllTables();
|
||||
},
|
||||
onUpgrade: (Migrator m, int from, int to) async {
|
||||
if (from == 1) {
|
||||
// we added the dueDate property in the change from version 1
|
||||
await m.addColumn(todos, todos.dueDate);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// rest of class can stay the same
|
||||
```
|
||||
You can also add individual tables or drop them - see the reference of [Migrator](https://pub.dev/documentation/moor/latest/moor/Migrator-class.html)
|
||||
for all the available options. You can't use the high-level query API in migrations - calling `select` or similar
|
||||
methods will throw.
|
||||
|
||||
`sqlite` can feel a bit limiting when it comes to migrations - there only are methods to create tables and columns.
|
||||
Existing columns can't be altered or removed. A workaround is described [here](https://stackoverflow.com/a/805508), it
|
||||
can be used together with [`issueCustomQuery`](https://pub.dev/documentation/moor/latest/moor/Migrator/issueCustomQuery.html)
|
||||
to run the statements.
|
||||
|
||||
## Post-migration callbacks
|
||||
Starting from moor 1.5, you can use the `beforeOpen` parameter in the `MigrationStrategy` which will be called after
|
||||
migrations, but after any other queries are run. You could use it to populate data after the database has been created:
|
||||
```dart
|
||||
beforeOpen: (db, details) async {
|
||||
if (details.wasCreated) {
|
||||
final workId = await db.into(categories).insert(Category(description: 'Work'));
|
||||
|
||||
await db.into(todos).insert(TodoEntry(
|
||||
content: 'A first todo entry',
|
||||
category: null,
|
||||
targetDate: DateTime.now(),
|
||||
));
|
||||
|
||||
await db.into(todos).insert(
|
||||
TodoEntry(
|
||||
content: 'Rework persistence code',
|
||||
category: workId,
|
||||
targetDate: DateTime.now().add(const Duration(days: 4)),
|
||||
));
|
||||
}
|
||||
},
|
||||
```
|
||||
You could also activate pragma statements that you need:
|
||||
```dart
|
||||
beforeOpen: (db, details) async {
|
||||
if (details.wasCreated) {
|
||||
// ...
|
||||
}
|
||||
await db.customStatement('PRAGMA foreign_keys = ON');
|
||||
}
|
||||
```
|
||||
It is important that you run these queries on `db` explicitly. Failing to do so causes a deadlock which prevents the
|
||||
database from being opened.
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
---
|
||||
layout: feature
|
||||
title: Transactions
|
||||
nav_order: 3
|
||||
since: 1.1
|
||||
permalink: /transactions
|
||||
---
|
||||
|
||||
# Transactions
|
||||
Moor has support for transactions and allows multiple queries to run atomically.
|
||||
To begin a transaction, call the `transaction` method on your database or a DAO.
|
||||
It takes a function as an argument that will be run on the transaction. In the
|
||||
following example, which deals with deleting a category, we move all todo entries
|
||||
in that category back to the default category:
|
||||
```dart
|
||||
Future deleteCategory(Category category) {
|
||||
return transaction((t) async {
|
||||
// first, move the affected todo entries back to the default category
|
||||
await t.customUpdate(
|
||||
'UPDATE todos SET category = NULL WHERE category = ?',
|
||||
updates: {todos},
|
||||
variables: [Variable.withInt(category.id)],
|
||||
);
|
||||
|
||||
// then, delete the category
|
||||
await t.delete(categories).delete(category);
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
## ⚠️ Gotchas
|
||||
There are a couple of things that should be kept in mind when working with transactions:
|
||||
1. __Await all calls__: All queries inside the transaction must be `await`-ed. The transaction
|
||||
will complete when the inner method completes. Without `await`, some queries might be operating
|
||||
on the transaction after it has been closed!
|
||||
2. __No select streams in transactions__: Inside a `transaction` callback, select statements can't
|
||||
be `.watch()`ed. The reasons behind this is that it's unclear how a stream should behave when a
|
||||
transaction completes. Should the stream complete as well? Update to data changes made outside of the
|
||||
transaction? Both seem inconsistent, so moor forbids this.
|
||||
|
||||
## Transactions and query streams
|
||||
Query streams that have been created outside a transaction work nicely together with
|
||||
updates made in a transaction: All changes to tables will only be reported after the
|
||||
transaction completes. Updates inside a transaction don't have an immediate effect on
|
||||
streams, so your data will always be consistent.
|
||||
|
||||
However, as mentioned above, note that streams can't be created inside a `transaction` block.
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
---
|
||||
layout: feature
|
||||
title: Type converters
|
||||
since: 1.7
|
||||
nav_order: 8
|
||||
permalink: /type_converters
|
||||
---
|
||||
|
||||
# Type converters
|
||||
Moor supports a variety of types out of the box, but sometimes you need to store more complex types.
|
||||
You can achieve this by using `TypeConverters`. In this example, we'll use the the
|
||||
[json_serializable](https://pub.dev/packages/json_annotation) package to store a custom object in a
|
||||
column. Moor supports any Dart object, but using that package can make serialization easier.
|
||||
```dart
|
||||
import 'dart:convert';
|
||||
|
||||
import 'package:json_annotation/json_annotation.dart' as j;
|
||||
import 'package:moor/moor.dart';
|
||||
|
||||
part 'database.g.dart';
|
||||
|
||||
@j.JsonSerializable()
|
||||
class Preferences {
|
||||
bool receiveEmails;
|
||||
String selectedTheme;
|
||||
|
||||
Preferences(this.receiveEmails, this.selectedTheme);
|
||||
|
||||
factory Preferences.fromJson(Map<String, dynamic> json) =>
|
||||
_$PreferencesFromJson(json);
|
||||
|
||||
Map<String, dynamic> toJson() => _$PreferencesToJson(this);
|
||||
}
|
||||
```
|
||||
|
||||
Next, we have to tell moor how to store a `Preferences` object in the database. We write
|
||||
a `TypeConverter` for that:
|
||||
```dart
|
||||
// stores preferences as strings
|
||||
class PreferenceConverter extends TypeConverter<Preferences, String> {
|
||||
const PreferenceConverter();
|
||||
@override
|
||||
Preferences mapToDart(String fromDb) {
|
||||
if (fromDb == null) {
|
||||
return null;
|
||||
}
|
||||
return Preferences.fromJson(json.decode(fromDb) as Map<String, dynamic>);
|
||||
}
|
||||
|
||||
@override
|
||||
String mapToSql(Preferences value) {
|
||||
if (value == null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return json.encode(value.toJson());
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Finally, we can use that converter in a table declaration:
|
||||
```dart
|
||||
class Users extends Table {
|
||||
IntColumn get id => integer().autoIncrement()();
|
||||
TextColumn get name => text()();
|
||||
|
||||
TextColumn get preferences =>
|
||||
text().map(const PreferenceConverter()).nullable()();
|
||||
}
|
||||
```
|
||||
|
||||
The generated `User` class will then have a `preferences` column of type
|
||||
`Preferences`. Moor will automatically take care of storing and loading
|
||||
the object in `select`, `update` and `insert` statements. This feature
|
||||
also works with [compiled custom queries]({{ "/queries/custom" | absolute_url }}).
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
---
|
||||
layout: feature
|
||||
title: Web support
|
||||
nav_order: 7
|
||||
since: 1.6
|
||||
permalink: /web
|
||||
---
|
||||
|
||||
# Web support
|
||||
Starting from moor `1.6`, you can experimentally use moor in Dart webapps. Moor web supports
|
||||
Flutter Web, AngularDart, plain `dart:html` or any other web framework.
|
||||
|
||||
## Getting started
|
||||
Instead of depending on `moor_flutter`, you need to depend on on `moor` directly. Apart from that, you can
|
||||
follow the [getting started guide]({{ site.common_links.getting_started | absolute_url }}).
|
||||
Also, instead of using a `FlutterQueryExecutor` in your database classes, you can use a `WebDatabase` executor:
|
||||
```dart
|
||||
import 'package:moor/moor_web.dart';
|
||||
|
||||
@UseMoor(tables: [Todos, Categories])
|
||||
class MyDatabase extends _$MyDatabase {
|
||||
// here, "app" is the name of the database - you can choose any name you want
|
||||
MyDatabase() : super(WebDatabase('app'));
|
||||
```
|
||||
|
||||
Moor web is built on top of the [sql.js](https://github.com/kripken/sql.js/) library, which you need to include:
|
||||
```html
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<script defer src="sql-wasm.js"></script>
|
||||
<script defer src="main.dart.js" type="application/javascript"></script>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
```
|
||||
You can grab the latest version of `sql-wasm.js` and `sql-wasm.wasm` [here](https://github.com/kripken/sql.js/tree/master/dist)
|
||||
and copy them into your `web` folder.
|
||||
|
||||
## Gotchas
|
||||
The database implementation uses WebAssembly, which needs to be supported by your browser.
|
||||
Also, make sure that your webserver serves the `.wasm` file as `application/wasm`, browsers
|
||||
won't accept it otherwise.
|
||||
|
||||
## Sharing code between native apps and web
|
||||
If you want to share your database code between native applications and webapps, just import the
|
||||
basic `moor` library and make the `QueryExecutor` configurable:
|
||||
```dart
|
||||
// don't import moor_web.dart or moor_flutter/moor_flutter.dart in shared code
|
||||
import 'package:moor/moor.dart';
|
||||
|
||||
@UseMoor(/* ... */)
|
||||
class SharedDatabase extends _$MyDatabase {
|
||||
SharedDatabase(QueryExecutor e): super(e);
|
||||
}
|
||||
```
|
||||
With native Flutter, you can create an instance of your database with
|
||||
```dart
|
||||
import 'package:moor_flutter/moor_flutter.dart';
|
||||
SharedDatabase constructDb() {
|
||||
return SharedDatabase(FlutterQueryExecutor.inDatabaseFolder(path: 'db.sqlite'));
|
||||
}
|
||||
```
|
||||
On the web, you can use
|
||||
```dart
|
||||
import 'package:moor/moor_web.dart';
|
||||
SharedDatabase constructDb() {
|
||||
return SharedDatabase(WebDatabse('db'));
|
||||
}
|
||||
```
|
||||
|
||||
## Debugging
|
||||
You can see all queries sent from moor to the underlying database engine by enabling the `logStatements`
|
||||
parameter on the `WebDatabase` - they will appear in the console.
|
||||
When you have assertions enabled (e.g. in debug mode), moor will expose the underlying
|
||||
[database](http://kripken.github.io/sql.js/documentation/#http://kripken.github.io/sql.js/documentation/class/Database.html)
|
||||
object via `window.db`. If you need to quickly run a query to check the state of the database, you can use
|
||||
`db.exec(sql)`.
|
||||
If you need to delete your databases, there stored using local storage. You can clear all your data with `localStorage.clear()`.
|
||||
|
||||
Web support is experimental at the moment, so please [report all issues](https://github.com/simolus3/moor/issues/new) you find.
|
||||
|
|
@ -1,85 +0,0 @@
|
|||
---
|
||||
layout: feature
|
||||
title: Custom queries
|
||||
parent: Writing queries
|
||||
permalink: /queries/custom
|
||||
---
|
||||
|
||||
# Custom statements
|
||||
Altough moor includes a fluent api that can be used to model most statements, advanced
|
||||
features like `GROUP BY` statements or window functions are not yet supported. You can
|
||||
use these features with custom statements. You don't have to miss out on other benefits
|
||||
moor brings, though: Parsing the rows and query-streams also work on custom statements.
|
||||
|
||||
## Statements with a generated api
|
||||
Starting from version `1.5`, you can instruct moor to automatically generate a typesafe
|
||||
API for your select statements. At the moment, this feature is in an experimental state
|
||||
but it can already handle most statements (`select`, `update` and `delete`). Of course,
|
||||
you can still write custom sql manually. See the sections below for details.
|
||||
|
||||
To use this feature, all you need to is define your queries in your `UseMoor` annotation:
|
||||
```dart
|
||||
@UseMoor(
|
||||
tables: [Todos, Categories],
|
||||
queries: {
|
||||
'categoriesWithCount':
|
||||
'SELECT *, (SELECT COUNT(*) FROM todos WHERE category = c.id) AS "amount" FROM categories c;'
|
||||
},
|
||||
)
|
||||
class MyDatabase extends _$MyDatabase {
|
||||
// rest of class stays the same
|
||||
}
|
||||
```
|
||||
After running the build step again, moor will have written the `CategoriesWithCountResult` class for you -
|
||||
it will hold the result of your query. Also, the `_$MyDatabase` class from which you inherit will have the
|
||||
methods `categoriesWithCount` (which runs the query once) and `watchCategoriesWithCount` (which returns
|
||||
an auto-updating stream).
|
||||
|
||||
Queries can have parameters in them by using the `?` or `:name` syntax. When your queries contain parameters,
|
||||
moor will figure out an appropriate type for them and include them in the generated methods. For instance,
|
||||
`'categoryById': 'SELECT * FROM categories WHERE id = :id'` will generate the method `categoryById(int id)`.
|
||||
|
||||
You can also use `UPDATE` or `DELETE` statements here. Of course, this feature is also available for [daos]({{"/daos" | absolute_url}}),
|
||||
and it perfectly integrates with auto-updating streams by analyzing what tables you're reading from or
|
||||
writing to.
|
||||
|
||||
## Custom select statements
|
||||
You can issue custom queries by calling `customSelect` for a one-time query or
|
||||
`customSelectStream` for a query stream that automatically emits a new set of items when
|
||||
the underlying data changes. Using the todo example introduced in the
|
||||
[getting started guide]({{site.common_links.getting_started | absolute_url}}), we can
|
||||
write this query which will load the amount of todo entries in each category:
|
||||
```dart
|
||||
class CategoryWithCount {
|
||||
final Category category;
|
||||
final int count; // amount of entries in this category
|
||||
|
||||
CategoryWithCount(this.category, this.count);
|
||||
}
|
||||
|
||||
// then, in the database class:
|
||||
Stream<List<CategoryWithCount>> categoriesWithCount() {
|
||||
// select all categories and load how many associated entries there are for
|
||||
// each category
|
||||
return customSelectStream(
|
||||
'SELECT *, (SELECT COUNT(*) FROM todos WHERE category = c.id) AS "amount" FROM categories c;',
|
||||
readsFrom: {todos, categories}, // used for the stream: the stream will update when either table changes
|
||||
).map((rows) {
|
||||
// we get list of rows here. We just have to turn the raw data from the row into a
|
||||
// CategoryWithCount. As we defined the Category table earlier, moor knows how to parse
|
||||
// a category. The only thing left to do manually is extracting the amount
|
||||
return rows
|
||||
.map((row) => CategoryWithCount(Category.fromData(row.data, this), row.readInt('amount')))
|
||||
.toList();
|
||||
});
|
||||
}
|
||||
```
|
||||
For custom selects, you should use the `readsFrom` parameter to specify from which tables the query is
|
||||
reading. When using a `Stream`, moor will be able to know after which updates the stream should emit
|
||||
items.
|
||||
|
||||
## Custom update statements
|
||||
For update and delete statements, you can use `customUpdate`. Just like `customSelect`, that method
|
||||
also takes a sql statement and optional variables. You can also tell moor which tables will be
|
||||
affected by your query using the optional `updates` parameter. That will help with other select
|
||||
streams, which will then update automatically.
|
||||
|
|
@ -1,117 +0,0 @@
|
|||
---
|
||||
layout: feature
|
||||
title: Table joins
|
||||
parent: Writing queries
|
||||
since: 1.3
|
||||
permalink: /queries/joins
|
||||
---
|
||||
|
||||
# Joins
|
||||
Moor supports sql joins to write queries that operate on more than one table. To use that feature, start
|
||||
a select regular select statement with `select(table)` and then add a list of joins using `.join()`. For
|
||||
inner and left outer joins, a `ON` expression needs to be specified. Here's an example using the tables
|
||||
defined in the [example]({{ site.common_links.getting_started | absolute_url }}).
|
||||
|
||||
```dart
|
||||
// we define a data class to contain both a todo entry and the associated category
|
||||
class EntryWithCategory {
|
||||
EntryWithCategory(this.entry, this.category);
|
||||
|
||||
final TodoEntry entry;
|
||||
final Category category;
|
||||
}
|
||||
|
||||
// in the database class, we can then load the category for each entry
|
||||
Stream<List<EntryWithCategory>> entriesWithCategory() {
|
||||
final query = select(todos).join([
|
||||
leftOuterJoin(categories, categories.id.equalsExp(todos.category)),
|
||||
]);
|
||||
|
||||
// see next section on how to parse the result
|
||||
}
|
||||
```
|
||||
|
||||
## Parsing results
|
||||
Calling `get()` or `watch` on a select statement with join returns a `Future` or `Stream` of
|
||||
`List<TypedResult>` respectively. Each `TypedResult` represents a row from which data can be
|
||||
read. It contains a `rawData` getter to obtain the raw row. But more importantly, the
|
||||
`readTable` method can be used to read a data class from a table.
|
||||
|
||||
In the example query above, we can read the todo entry and the category from each row like this:
|
||||
```dart
|
||||
return query.watch().map((rows) {
|
||||
return rows.map((row) {
|
||||
return EntryWithCategory(
|
||||
row.readTable(todos),
|
||||
row.readTable(categories),
|
||||
);
|
||||
}).toList();
|
||||
});
|
||||
```
|
||||
|
||||
_Note_: `readTable` returns `null` when an entity is not present in the row. For instance, todo entries
|
||||
might not be in any category. In that case, `row.readTable(categories)` returns `null`.
|
||||
## Aliases
|
||||
Sometimes, a query references a table more than once. Consider the following example to store saved routes for a
|
||||
navigation system:
|
||||
```dart
|
||||
class GeoPoints extends Table {
|
||||
IntColumn get id => integer().autoIncrement()();
|
||||
TextColumn get name => text()();
|
||||
TextColumn get latitude => text()();
|
||||
TextColumn get longitude => text()();
|
||||
}
|
||||
|
||||
class Routes extends Table {
|
||||
|
||||
IntColumn get id => integer().autoIncrement()();
|
||||
TextColumn get name => text()();
|
||||
|
||||
// contains the id for the start and destination geopoint.
|
||||
IntColumn get start => integer()();
|
||||
IntColumn get destination => integer()();
|
||||
}
|
||||
```
|
||||
|
||||
Now, let's say we wanted to also load the start and destination `GeoPoint` object for each route. We'd have to use
|
||||
a join on the `geo-points` table twice: For the start and destination point. To express that in a query, aliases
|
||||
can be used:
|
||||
```dart
|
||||
class RouteWithPoints {
|
||||
final Route route;
|
||||
final GeoPoint start;
|
||||
final GeoPoint destination;
|
||||
|
||||
RouteWithPoints({this.route, this.start, this.destination});
|
||||
}
|
||||
|
||||
// inside the database class:
|
||||
Future<List<RouteWithPoints>> loadRoutes() async {
|
||||
// create aliases for the geoPoints table so that we can reference it twice
|
||||
final start = alias(geoPoints, 's');
|
||||
final destination = alias(geoPoints, 'd');
|
||||
|
||||
final rows = await select(routes).join([
|
||||
innerJoin(start, start.id.equalsExp(routes.start)),
|
||||
innerJoin(destination, destination.id.equalsExp(routes.destination)),
|
||||
]).get();
|
||||
|
||||
return rows.map((resultRow) {
|
||||
return RouteWithPoints(
|
||||
route: resultRow.readTable(routes),
|
||||
start: resultRow.readTable(start),
|
||||
destination: resultRow.readTable(destination),
|
||||
);
|
||||
}).toList();
|
||||
}
|
||||
```
|
||||
The generated statement then looks like this:
|
||||
```sql
|
||||
SELECT
|
||||
routes.id, routes.name, routes.start, routes.destination,
|
||||
s.id, s.name, s.latitude, s.longitude,
|
||||
d.id, d.name, d.latitude, d.longitude
|
||||
FROM routes
|
||||
INNER JOIN geo_points s ON s.id = routes.start
|
||||
INNER JOIN geo_points d ON d.id = routes.destination
|
||||
```
|
||||
|
|
@ -1,109 +0,0 @@
|
|||
---
|
||||
layout: guide
|
||||
title: Writing queries
|
||||
nav_order: 2
|
||||
has_children: true
|
||||
permalink: /queries/
|
||||
---
|
||||
|
||||
__Note__: This assumes that you already have your database class ready.
|
||||
Follow the [instructions][getting-started] over here on how to do that.
|
||||
|
||||
# Writing queries
|
||||
The examples here use the tables defined [here][getting-started].
|
||||
For each table you've specified in the `@UseMoor` annotation on your database class,
|
||||
a corresponding getter for a table will be generated. That getter can be used to
|
||||
run statements:
|
||||
```dart
|
||||
// inside the database class, the `todos` getter has been created by moor.
|
||||
|
||||
// loads all todo entries
|
||||
Future<List<Todo>> get allTodoEntries => select(todos).get();
|
||||
|
||||
// watches all todo entries in a given category. The stream will automatically
|
||||
// emit new items whenever the underlying data changes.
|
||||
Stream<List<TodoEntry>> watchEntriesInCategory(Category c) {
|
||||
return (select(todos)..where((t) => t.category.equals(c.id))).watch();
|
||||
}
|
||||
```
|
||||
## Select statements
|
||||
You can create `select` statements by starting them with `select(tableName)`, where the
|
||||
table name
|
||||
is a field generated for you by moor. Each table used in a database will have a matching field
|
||||
to run queries against. Any query can be run once with `get()` or be turned into an auto-updating
|
||||
stream using `watch()`.
|
||||
### Where
|
||||
You can apply filters to a query by calling `where()`. The where method takes a function that
|
||||
should map the given table to an `Expression` of boolean. A common way to create such expression
|
||||
is by using `equals` on expressions. Integer columns can also be compared with `isBiggerThan`
|
||||
and `isSmallerThan`. You can compose expressions using `and(a, b), or(a, b)` and `not(a)`.
|
||||
### Limit
|
||||
You can limit the amount of results returned by calling `limit` on queries. The method accepts
|
||||
the amount of rows to return and an optional offset.
|
||||
### Ordering
|
||||
You can use the `orderBy` method on the select statement. It expects a list of functions that extract the individual
|
||||
ordering terms from the table.
|
||||
```dart
|
||||
Future<List<TodoEntry>> sortEntriesAlphabetically() {
|
||||
return (select(todos)..orderBy([(t) => OrderingTerm(expression: t.title)])).get();
|
||||
}
|
||||
```
|
||||
You can also reverse the order by setting the `mode` property of the `OrderingTerm` to
|
||||
`OrderingMode.desc`.
|
||||
## Updates and deletes
|
||||
You can use the generated classes to update individual fields of any row:
|
||||
```dart
|
||||
Future moveImportantTasksIntoCategory(Category target) {
|
||||
// for updates, we use the "companion" version of a generated class. This wraps the
|
||||
// fields in a "Value" type which can be set to be absent using "Value.absent()". This
|
||||
// allows us to separate between "SET category = NULL" (`category: Value(null)`) and not
|
||||
// updating the category at all: `category: Value.absent()`.
|
||||
return (update(todos)
|
||||
..where((t) => t.title.like('%Important%'))
|
||||
).write(TodosCompanion(
|
||||
category: Value(target.id),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Future update(TodoEntry entry) {
|
||||
// using replace will update all fields from the entry that are not marked as a primary key.
|
||||
// it will also make sure that only the entry with the same primary key will be updated.
|
||||
// Here, this means that the row that has the same id as entry will be updated to reflect
|
||||
// the entry's title, content and category. As it set's its where clause automatically, it
|
||||
// can not be used together with where.
|
||||
return update(todos).replace(entry);
|
||||
}
|
||||
|
||||
Future feelingLazy() {
|
||||
// delete the oldest nine tasks
|
||||
return (delete(todos)..where((t) => t.id.isSmallerThanValue(10))).go();
|
||||
}
|
||||
```
|
||||
__⚠️ Caution:__ If you don't explicitly add a `where` clause on updates or deletes,
|
||||
the statement will affect all rows in the table!
|
||||
|
||||
## Inserts
|
||||
You can very easily insert any valid object into tables. As some values can be absent
|
||||
(like default values that we don't have to set explicitly), we again use the
|
||||
companion version.
|
||||
```dart
|
||||
// returns the generated id
|
||||
Future<int> addTodoEntry(TodosCompanion entry) {
|
||||
return into(todos).insert(entry);
|
||||
}
|
||||
```
|
||||
All row classes generated will have a constructor that can be used to create objects:
|
||||
```dart
|
||||
addTodoEntry(
|
||||
TodosCompanion(
|
||||
title: Value('Important task'),
|
||||
content: Value('Refactor persistence code'),
|
||||
),
|
||||
);
|
||||
```
|
||||
If a column is nullable or has a default value (this includes auto-increments), the field
|
||||
can be omitted. All other fields must be set and non-null. The `insert` method will throw
|
||||
otherwise.
|
||||
|
||||
[getting-started]: {{ site.common_links.getting_started | absolute_url }}
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
---
|
||||
layout: home
|
||||
title: Home
|
||||
meta_title: Moor - Reactive persistence library for Dart
|
||||
description: Moor is an easy to use, typesafe and reactive persistence library for Flutter and webapps written in Dart.
|
||||
nav_order: 0
|
||||
---
|
||||
|
||||
# Moor - persistence library for Dart
|
||||
{: .fs-9 }
|
||||
|
||||
Moor is an easy to use, reactive persistence library for Flutter apps. Define your
|
||||
database tables in pure Dart and enjoy a fluent query API, auto-updating streams
|
||||
and more!
|
||||
{: .fs-6 .fw-300 }
|
||||
|
||||
[](https://cirrus-ci.com/github/simolus3/moor)
|
||||
[](https://codecov.io/gh/simolus3/moor)
|
||||
|
||||
[Get started now]({{ site.common_links.getting_started | absolute_url }}){: .btn .btn-green .fs-5 .mb-4 .mb-md-0 .mr-2 }
|
||||
[View on GitHub]({{site.github_link}}){: .btn .btn-outline .fs-5 .mb-4 .mb-md-0 .mr-2 }
|
||||
|
||||
---
|
||||
|
||||
## Declarative tables
|
||||
With moor, you can declare your tables in pure dart without having to miss out on advanced sqlite
|
||||
features. Moor will take care of writing the `CREATE TABLE` statements when the database is created.
|
||||
|
||||
## Fluent queries
|
||||
Thanks to the power of Dart build system, moor will let you write typesafe queries:
|
||||
```dart
|
||||
Future<User> userById(int id) {
|
||||
return (select(users)..where((user) => user.id.equals(id))).getSingle();
|
||||
// runs SELECT * FROM users WHERE id = ?, automatically binds the parameter
|
||||
// and parses the result row.
|
||||
}
|
||||
```
|
||||
No more hard to debug typos in sql, no more annoying to write mapping code - moor takes
|
||||
care of all the boring parts.
|
||||
|
||||
## Prefer SQL? Moor got you covered
|
||||
Moor contains a powerful sql parser and analyzer, allowing it to create typesafe APIs for
|
||||
all your sql queries:
|
||||
```dart
|
||||
@UseMoor(
|
||||
tables: [Categories],
|
||||
queries: {
|
||||
'categoryById': 'SELECT * FROM categories WHERE id = :id'
|
||||
},
|
||||
)
|
||||
class MyDatabase extends _$MyDatabase {
|
||||
// the _$MyDatabase class will have the categoryById(int id) and watchCategoryById(int id)
|
||||
// methods that execute the sql and parse its result into a generated class.
|
||||
```
|
||||
All queries are validated and analyzed during build-time, so that moor can provide hints
|
||||
about potential errors quickly and generate efficient mapping code once.
|
||||
|
||||
## Auto-updating streams
|
||||
For all your queries, moor can generate a `Stream` that will automatically emit new results
|
||||
whenever the underlying data changes. This is first-class feature that perfectly integrates
|
||||
with custom queries, daos and all the other features. Having an auto-updating single source
|
||||
of truth makes managing perstistent state much easier!
|
||||
|
||||
## And much moor...
|
||||
Moor also supports transactions, DAOs, powerful helpers for migrations, batched inserts and
|
||||
many more features that makes writing persistence code much easier.
|
||||
|
||||
## Getting started
|
||||
{% include content/getting_started.md %}
|
||||
|
||||
You can ignore the `schemaVersion` at the moment, the important part is that you can
|
||||
now run your queries with fluent Dart code
|
||||
|
||||
## [Writing queries]({{"queries" | absolute_url }})
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
{{ define "main"}}
|
||||
<main id="main">
|
||||
<div>
|
||||
<h1 id="title">Not found</h1>
|
||||
<p>Oops! This page doesn't exist. Try going back to our <a href="{{ "/" | relURL }}">home page</a>.</p>
|
||||
|
||||
<p>You can learn how to make a 404 page like this in <a href="https://gohugo.io/templates/404/">Custom 404 Pages</a>.</p>
|
||||
</div>
|
||||
</main>
|
||||
{{ end }}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,24 @@
|
|||
{
|
||||
"name": "tech-doc-hugo",
|
||||
"version": "0.0.1",
|
||||
"description": "Hugo theme for technical documentation.",
|
||||
"main": "none.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/bep/tech-doc-hugo.git"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"bugs": {
|
||||
"url": "https://github.com/bep/tech-doc-hugo/issues"
|
||||
},
|
||||
"homepage": "https://github.com/bep/tech-doc-hugo#readme",
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^9.4.6",
|
||||
"postcss-cli": "^5.0.1"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
Subproject commit 97488e0b9b63fd028fc1ae21e8a18a997439b5cd
|
||||
Loading…
Reference in New Issue