Skip to content

Commit

Permalink
CSS refactoring: dartdoc.scss, separation of third_party and customiz…
Browse files Browse the repository at this point in the history
…ation.
  • Loading branch information
isoos committed Jun 6, 2024
1 parent 3a65f0b commit ef011ee
Show file tree
Hide file tree
Showing 43 changed files with 111 additions and 155 deletions.
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ build/
*.sum

# Ignore files built when the server is started
/static/css/dartdoc.css
/static/css/dartdoc.css.map
/static/css/style.css
/static/css/style.css.map
/static/js/script.dart.js
Expand Down
17 changes: 1 addition & 16 deletions app/lib/dartdoc/dartdoc_page.dart
Original file line number Diff line number Diff line change
Expand Up @@ -110,21 +110,6 @@ extension DartDocPageRender on DartDocPage {
if (!options.isLatestStable)
d.meta(rel: 'alternate', href: options.latestStableDocumentationUrl),
d.link(rel: 'preconnect', href: 'https://fonts.gstatic.com'),
// HACK: This is not part of dartdoc
d.link(
rel: 'stylesheet',
type: 'text/css',
href: staticUrls.githubMarkdownCss),
// TODO: Consider using same github.css we use on pub.dev
d.link(
rel: 'stylesheet',
type: 'text/css',
href: staticUrls.dartdocGithubCss),
if (activeConfiguration.isStaging)
d.link(
rel: 'stylesheet',
type: 'text/css',
href: staticUrls.getAssetUrl('/static/css/staging-ribbon.css')),
d.link(
rel: 'stylesheet',
href:
Expand All @@ -136,7 +121,7 @@ extension DartDocPageRender on DartDocPage {
'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0',
),

d.link(rel: 'stylesheet', href: staticUrls.dartdocStylesCss),
d.link(rel: 'stylesheet', href: staticUrls.dartdocCss),
d.link(rel: 'icon', href: staticUrls.smallDartFavicon),
]);

Expand Down
24 changes: 14 additions & 10 deletions app/lib/frontend/static_files.dart
Original file line number Diff line number Diff line change
Expand Up @@ -240,11 +240,7 @@ class StaticUrls {
late final pubDevLogoSvg = getAssetUrl('/static/img/pub-dev-logo.svg');
late final defaultProfilePng = getAssetUrl(
'/static/img/material-icon-twotone-account-circle-white-24dp.png');
late final githubMarkdownCss = getAssetUrl('/static/css/github-markdown.css');
late final dartdocGithubCss =
getAssetUrl('/static/dartdoc/resources/github.css');
late final dartdocStylesCss =
getAssetUrl('/static/dartdoc/resources/styles.css');
late final dartdocCss = getAssetUrl('/static/css/dartdoc.css');
late final dartdocScriptJs =
getAssetUrl('/static/dartdoc/resources/docs.dart.js');
late final dartdochighlightJs =
Expand Down Expand Up @@ -331,11 +327,19 @@ Future updateLocalBuiltFilesIfNeeded() async {

final webCssDir = Directory(resolveWebCssDirPath());
final webCssLastModified = await _detectLastModified(webCssDir);
final styleCss = File(path.join(staticDir.path, 'css', 'style.css'));
final styleCssExists = await styleCss.exists();
final styleCssLastModified =
styleCssExists ? await styleCss.lastModified() : null;
if (!styleCssExists || (styleCssLastModified!.isBefore(webCssLastModified))) {

Future<bool> cssNeedsUpdate(String filename) async {
final styleCss = File(path.join(staticDir.path, 'css', filename));
final styleCssExists = await styleCss.exists();
final styleCssLastModified =
styleCssExists ? await styleCss.lastModified() : null;
return !styleCssExists ||
(styleCssLastModified!.isBefore(webCssLastModified));
}

final needsCssBuild = (await cssNeedsUpdate('style.css')) ||
(await cssNeedsUpdate('dartdoc.css'));
if (needsCssBuild) {
_logger.info('Building pkg/web_css');
await updateWebCssBuild();
}
Expand Down
4 changes: 2 additions & 2 deletions app/test/dartdoc/dartdoc_page_test.dart
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ void main() {
_removeSharedXmlNodes(fileXmlRoot, renderedXmlDoc);

// cleanup <head> differences
for (final link in ['/styles.css', '/favicon.png']) {
for (final link in ['/styles.css', '/github.css', '/favicon.png']) {
fileXmlRoot.descendantElements
.firstWhere((e) =>
e.localName == 'link' &&
Expand All @@ -149,7 +149,7 @@ void main() {
renderedHead.childElements
.firstWhereOrNull((e) => e.getAttribute('content') == 'noindex')
?.remove();
expect(renderedHead.children, hasLength(7));
expect(renderedHead.children, hasLength(6));
for (final c in [...renderedHead.childElements]) {
c.remove();
}
Expand Down
6 changes: 6 additions & 0 deletions app/test/frontend/static_files_test.dart
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,7 @@ void main() {
..remove('/static/js/survey-helper.js')
// debug-helper files are served, but not referenced
..removeAll([
'/static/css/dartdoc.css.map',
'/static/css/style.css.map',
'/static/js/script.dart.js.deps',
'/static/js/script.dart.js.info.json',
Expand Down Expand Up @@ -161,6 +162,11 @@ void main() {
'/static/css/github-markdown.css',
'/static/highlight/github.css',
])
// dartdoc files included through dartdoc.scss
..removeAll([
'/static/dartdoc/resources/github.css',
'/static/dartdoc/resources/styles.css',
])
// dartdoc files not used, or included through javascript
..removeAll([
'/static/dartdoc/resources/favicon.png',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,9 @@
<link rel="canonical" href="https://pub.dev/documentation/oxygen/1.0.0/"/>
<meta rel="alternate" href="/documentation/oxygen/latest/"/>
<link rel="preconnect" href="https://fonts.gstatic.com"/>
<link rel="stylesheet" type="text/css" href="/static/hash-%%etag%%/css/github-markdown.css"/>
<link rel="stylesheet" type="text/css" href="/static/hash-%%etag%%/dartdoc/resources/github.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,300;0,400;0,500;0,700;1,400&amp;display=swap"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"/>
<link rel="stylesheet" href="/static/hash-%%etag%%/dartdoc/resources/styles.css"/>
<link rel="stylesheet" href="/static/hash-%%etag%%/css/dartdoc.css"/>
<link rel="icon" href="/favicon.ico?hash=mocked_hash_985685822"/>
</head>
<body class="light-theme" data-base-href="" data-using-base-href="false">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,9 @@
<link rel="canonical" href="https://pub.dev/documentation/oxygen/1.0.0/oxygen/MainClass-class.html"/>
<meta rel="alternate" href="/documentation/oxygen/latest/"/>
<link rel="preconnect" href="https://fonts.gstatic.com"/>
<link rel="stylesheet" type="text/css" href="/static/hash-%%etag%%/css/github-markdown.css"/>
<link rel="stylesheet" type="text/css" href="/static/hash-%%etag%%/dartdoc/resources/github.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,300;0,400;0,500;0,700;1,400&amp;display=swap"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"/>
<link rel="stylesheet" href="/static/hash-%%etag%%/dartdoc/resources/styles.css"/>
<link rel="stylesheet" href="/static/hash-%%etag%%/css/dartdoc.css"/>
<link rel="icon" href="/favicon.ico?hash=mocked_hash_985685822"/>
</head>
<body class="light-theme" data-base-href="../" data-using-base-href="false">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,9 @@
<link rel="canonical" href="https://pub.dev/documentation/oxygen/1.0.0/oxygen/MainClass/MainClass.html"/>
<meta rel="alternate" href="/documentation/oxygen/latest/"/>
<link rel="preconnect" href="https://fonts.gstatic.com"/>
<link rel="stylesheet" type="text/css" href="/static/hash-%%etag%%/css/github-markdown.css"/>
<link rel="stylesheet" type="text/css" href="/static/hash-%%etag%%/dartdoc/resources/github.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,300;0,400;0,500;0,700;1,400&amp;display=swap"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"/>
<link rel="stylesheet" href="/static/hash-%%etag%%/dartdoc/resources/styles.css"/>
<link rel="stylesheet" href="/static/hash-%%etag%%/css/dartdoc.css"/>
<link rel="icon" href="/favicon.ico?hash=mocked_hash_985685822"/>
</head>
<body class="light-theme" data-base-href="../../" data-using-base-href="false">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,9 @@
<link rel="canonical" href="https://pub.dev/documentation/oxygen/1.0.0/oxygen/MainClass/text.html"/>
<meta rel="alternate" href="/documentation/oxygen/latest/"/>
<link rel="preconnect" href="https://fonts.gstatic.com"/>
<link rel="stylesheet" type="text/css" href="/static/hash-%%etag%%/css/github-markdown.css"/>
<link rel="stylesheet" type="text/css" href="/static/hash-%%etag%%/dartdoc/resources/github.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,300;0,400;0,500;0,700;1,400&amp;display=swap"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"/>
<link rel="stylesheet" href="/static/hash-%%etag%%/dartdoc/resources/styles.css"/>
<link rel="stylesheet" href="/static/hash-%%etag%%/css/dartdoc.css"/>
<link rel="icon" href="/favicon.ico?hash=mocked_hash_985685822"/>
</head>
<body class="light-theme" data-base-href="../../" data-using-base-href="false">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,9 @@
<link rel="canonical" href="https://pub.dev/documentation/oxygen/1.0.0/oxygen/MainClass/toLowerCase.html"/>
<meta rel="alternate" href="/documentation/oxygen/latest/"/>
<link rel="preconnect" href="https://fonts.gstatic.com"/>
<link rel="stylesheet" type="text/css" href="/static/hash-%%etag%%/css/github-markdown.css"/>
<link rel="stylesheet" type="text/css" href="/static/hash-%%etag%%/dartdoc/resources/github.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,300;0,400;0,500;0,700;1,400&amp;display=swap"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"/>
<link rel="stylesheet" href="/static/hash-%%etag%%/dartdoc/resources/styles.css"/>
<link rel="stylesheet" href="/static/hash-%%etag%%/css/dartdoc.css"/>
<link rel="icon" href="/favicon.ico?hash=mocked_hash_985685822"/>
</head>
<body class="light-theme" data-base-href="../../" data-using-base-href="false">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,9 @@
<link rel="canonical" href="https://pub.dev/documentation/oxygen/1.0.0/oxygen/MainClass/toString.html"/>
<meta rel="alternate" href="/documentation/oxygen/latest/"/>
<link rel="preconnect" href="https://fonts.gstatic.com"/>
<link rel="stylesheet" type="text/css" href="/static/hash-%%etag%%/css/github-markdown.css"/>
<link rel="stylesheet" type="text/css" href="/static/hash-%%etag%%/dartdoc/resources/github.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,300;0,400;0,500;0,700;1,400&amp;display=swap"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"/>
<link rel="stylesheet" href="/static/hash-%%etag%%/dartdoc/resources/styles.css"/>
<link rel="stylesheet" href="/static/hash-%%etag%%/css/dartdoc.css"/>
<link rel="icon" href="/favicon.ico?hash=mocked_hash_985685822"/>
</head>
<body class="light-theme" data-base-href="../../" data-using-base-href="false">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,9 @@
<link rel="canonical" href="https://pub.dev/documentation/oxygen/1.0.0/oxygen/TypeEnum.html"/>
<meta rel="alternate" href="/documentation/oxygen/latest/"/>
<link rel="preconnect" href="https://fonts.gstatic.com"/>
<link rel="stylesheet" type="text/css" href="/static/hash-%%etag%%/css/github-markdown.css"/>
<link rel="stylesheet" type="text/css" href="/static/hash-%%etag%%/dartdoc/resources/github.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,300;0,400;0,500;0,700;1,400&amp;display=swap"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"/>
<link rel="stylesheet" href="/static/hash-%%etag%%/dartdoc/resources/styles.css"/>
<link rel="stylesheet" href="/static/hash-%%etag%%/css/dartdoc.css"/>
<link rel="icon" href="/favicon.ico?hash=mocked_hash_985685822"/>
</head>
<body class="light-theme" data-base-href="../" data-using-base-href="false">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,9 @@
<link rel="canonical" href="https://pub.dev/documentation/oxygen/1.0.0/oxygen/TypeEnum/TypeEnum.html"/>
<meta rel="alternate" href="/documentation/oxygen/latest/"/>
<link rel="preconnect" href="https://fonts.gstatic.com"/>
<link rel="stylesheet" type="text/css" href="/static/hash-%%etag%%/css/github-markdown.css"/>
<link rel="stylesheet" type="text/css" href="/static/hash-%%etag%%/dartdoc/resources/github.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,300;0,400;0,500;0,700;1,400&amp;display=swap"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"/>
<link rel="stylesheet" href="/static/hash-%%etag%%/dartdoc/resources/styles.css"/>
<link rel="stylesheet" href="/static/hash-%%etag%%/css/dartdoc.css"/>
<link rel="icon" href="/favicon.ico?hash=mocked_hash_985685822"/>
</head>
<body class="light-theme" data-base-href="../../" data-using-base-href="false">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,9 @@
<link rel="canonical" href="https://pub.dev/documentation/oxygen/1.0.0/oxygen/TypeEnum/values-constant.html"/>
<meta rel="alternate" href="/documentation/oxygen/latest/"/>
<link rel="preconnect" href="https://fonts.gstatic.com"/>
<link rel="stylesheet" type="text/css" href="/static/hash-%%etag%%/css/github-markdown.css"/>
<link rel="stylesheet" type="text/css" href="/static/hash-%%etag%%/dartdoc/resources/github.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,300;0,400;0,500;0,700;1,400&amp;display=swap"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"/>
<link rel="stylesheet" href="/static/hash-%%etag%%/dartdoc/resources/styles.css"/>
<link rel="stylesheet" href="/static/hash-%%etag%%/css/dartdoc.css"/>
<link rel="icon" href="/favicon.ico?hash=mocked_hash_985685822"/>
</head>
<body class="light-theme" data-base-href="../../" data-using-base-href="false">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,9 @@
<link rel="canonical" href="https://pub.dev/documentation/oxygen/1.0.0/oxygen/main.html"/>
<meta rel="alternate" href="/documentation/oxygen/latest/"/>
<link rel="preconnect" href="https://fonts.gstatic.com"/>
<link rel="stylesheet" type="text/css" href="/static/hash-%%etag%%/css/github-markdown.css"/>
<link rel="stylesheet" type="text/css" href="/static/hash-%%etag%%/dartdoc/resources/github.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,300;0,400;0,500;0,700;1,400&amp;display=swap"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"/>
<link rel="stylesheet" href="/static/hash-%%etag%%/dartdoc/resources/styles.css"/>
<link rel="stylesheet" href="/static/hash-%%etag%%/css/dartdoc.css"/>
<link rel="icon" href="/favicon.ico?hash=mocked_hash_985685822"/>
</head>
<body class="light-theme" data-base-href="../" data-using-base-href="false">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,9 @@
<link rel="canonical" href="https://pub.dev/documentation/oxygen/1.0.0/oxygen/oxygen-library.html"/>
<meta rel="alternate" href="/documentation/oxygen/latest/"/>
<link rel="preconnect" href="https://fonts.gstatic.com"/>
<link rel="stylesheet" type="text/css" href="/static/hash-%%etag%%/css/github-markdown.css"/>
<link rel="stylesheet" type="text/css" href="/static/hash-%%etag%%/dartdoc/resources/github.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,300;0,400;0,500;0,700;1,400&amp;display=swap"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"/>
<link rel="stylesheet" href="/static/hash-%%etag%%/dartdoc/resources/styles.css"/>
<link rel="stylesheet" href="/static/hash-%%etag%%/css/dartdoc.css"/>
<link rel="icon" href="/favicon.ico?hash=mocked_hash_985685822"/>
</head>
<body class="light-theme" data-base-href="../" data-using-base-href="false">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,9 @@
<title>oxygen - Dart API docs</title>
<link rel="canonical" href="https://pub.dev/documentation/oxygen/2.0.0/"/>
<link rel="preconnect" href="https://fonts.gstatic.com"/>
<link rel="stylesheet" type="text/css" href="/static/hash-%%etag%%/css/github-markdown.css"/>
<link rel="stylesheet" type="text/css" href="/static/hash-%%etag%%/dartdoc/resources/github.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,300;0,400;0,500;0,700;1,400&amp;display=swap"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"/>
<link rel="stylesheet" href="/static/hash-%%etag%%/dartdoc/resources/styles.css"/>
<link rel="stylesheet" href="/static/hash-%%etag%%/css/dartdoc.css"/>
<link rel="icon" href="/favicon.ico?hash=mocked_hash_985685822"/>
</head>
<body class="light-theme" data-base-href="" data-using-base-href="false">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,9 @@
<title>MainClass class - oxygen library - Dart API</title>
<link rel="canonical" href="https://pub.dev/documentation/oxygen/2.0.0/oxygen/MainClass-class.html"/>
<link rel="preconnect" href="https://fonts.gstatic.com"/>
<link rel="stylesheet" type="text/css" href="/static/hash-%%etag%%/css/github-markdown.css"/>
<link rel="stylesheet" type="text/css" href="/static/hash-%%etag%%/dartdoc/resources/github.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,300;0,400;0,500;0,700;1,400&amp;display=swap"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"/>
<link rel="stylesheet" href="/static/hash-%%etag%%/dartdoc/resources/styles.css"/>
<link rel="stylesheet" href="/static/hash-%%etag%%/css/dartdoc.css"/>
<link rel="icon" href="/favicon.ico?hash=mocked_hash_985685822"/>
</head>
<body class="light-theme" data-base-href="../" data-using-base-href="false">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,9 @@
<title>MainClass constructor - MainClass - oxygen library - Dart API</title>
<link rel="canonical" href="https://pub.dev/documentation/oxygen/2.0.0/oxygen/MainClass/MainClass.html"/>
<link rel="preconnect" href="https://fonts.gstatic.com"/>
<link rel="stylesheet" type="text/css" href="/static/hash-%%etag%%/css/github-markdown.css"/>
<link rel="stylesheet" type="text/css" href="/static/hash-%%etag%%/dartdoc/resources/github.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,300;0,400;0,500;0,700;1,400&amp;display=swap"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"/>
<link rel="stylesheet" href="/static/hash-%%etag%%/dartdoc/resources/styles.css"/>
<link rel="stylesheet" href="/static/hash-%%etag%%/css/dartdoc.css"/>
<link rel="icon" href="/favicon.ico?hash=mocked_hash_985685822"/>
</head>
<body class="light-theme" data-base-href="../../" data-using-base-href="false">
Expand Down
Loading

0 comments on commit ef011ee

Please sign in to comment.