Skip to content

Integrate styles from flutter_test_goldens #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 12 commits into
base: main
Choose a base branch
from
Open

Integrate styles from flutter_test_goldens #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
3aaef14
Adding files from flutter_test_goldens
matthew-carroll Jul 23, 2025
cd3e00b
Combined styles into one file
matthew-carroll Jul 23, 2025
058db37
Moved sass variables to a dedicated file
matthew-carroll Jul 24, 2025
df029f5
Fixed bad sass import
matthew-carroll Jul 24, 2025
0240395
Tried using a namespace for imported variables to get them to work
matthew-carroll Jul 24, 2025
ae6653b
Fix typo from last vars commit
matthew-carroll Jul 24, 2025
6a246ee
Try using a full project path @use path
matthew-carroll Jul 24, 2025
3e9463a
Fix syntax from '.' to 'vars.$'
matthew-carroll Jul 24, 2025
e2716f5
Reverting variable file import to use name with no path
matthew-carroll Jul 24, 2025
ff45338
Trying a dedicated theme-overrides.scss file that's empty
matthew-carroll Jul 24, 2025
ecd873f
Add import file extension
matthew-carroll Jul 24, 2025
d237750
Remove extension, it shouldn't be needed, that's not the problem
matthew-carroll Jul 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions theme/_includes/components/footer.jinja
View file
Open in desktop

This file was deleted.

40 changes: 0 additions & 40 deletions theme/_includes/components/highlightJs.jinja
View file
Open in desktop

This file was deleted.

42 changes: 7 additions & 35 deletions theme/_includes/components/navMain.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,47 +1,19 @@
<nav class="main">
<ol class="organization-links">
<!-- Hard-coded, specific top-level menu items -->
{% if package.github != null %}
<a href="{{ package.github.url }}" target="_blank" role="button" class="btn"><span class="fa fa-brands fa-github"></span>&nbsp;&nbsp;GitHub</a>
{% endif %}

{% if package.discord != null %}
<a href="{{ package.discord }}" target="_blank" role="button" class="btn"><span class="fa fa-brands fa-discord"></span>&nbsp;&nbsp;Discord</a>
{% endif %}

{% if package.sponsorship != null %}
<a href="{{ package.sponsorship }}" target="_blank" role="button" class="btn"><span class="fa fa-dollar-sign"></span>&nbsp;&nbsp;Sponsor</a>
{% endif %}
</ol>

<div class="organization-nav-divider">&nbsp;</div>

{% if navigation != null %}
<ol>
{% for item in navigation.items %}
{% if item.tag == null and item.items == null %}
{% if item.tag == null %}
<!-- Top-level menu item -->
<li><a href="{{ item.url }}">{{ item.title }}</a></li>
<li><a href="{{ item.url }}">{{ item.title }}</a></li>
{% else %}
<!-- Group of menu items -->
<div class="link-group">
<span class="title">{{ item.title }}</span>

{% if item.tag != null %}
<span class="title">{{ item.title }}</span>
<ol>
{% for page in pages.byTag(item.tag, sortBy=item.sortBy) %}
<li><a href="/{{ page.data.url }}">{{ page.data.title }}</a></li>
<li><a href="{{ page.data.url }}">{{ page.data.title }}</a></li>
{% endfor %}
</ol>
{% endif %}

{% if item.items != null %}
<ol>
{% for subItem in item.items %}
<li><a href="/{{ subItem.url }}">{{ subItem.title }}</a></li>
{% endfor %}
</ol>
{% endif %}
</div>
{% endif %}
{% endfor %}
Expand All @@ -50,22 +22,22 @@
{% if navigation.show_contributors %}
{% set contributors = github[package.github.organization][package.github.name] %}
<div class="contributors">
<span class="title">Contributors <span class="count">({{ contributors | length }})</span></span>
<span class="title">Contributors <span class="count">({{ contributors | length }})</span></span>
<ol>
{% for contributor in (contributors|take(4)) %}
<li class="contributor">
<!-- Note: We show the contributor photo as a background image because -->
<!-- displaying it as an <img> results in a few extra pixels above -->
<!-- the image that we couldn't get rid of -->
<a href="{{ contributor.userUrl }}" target="_blank" title="{{ contributor.userId }}" style="background-image: url('{{ contributor.avatarUrl }}');">
<a href="{{ contributor.userUrl }}" target="_blank" title="{{ contributor.userId }}" style="background-image: url('{{ contributor.avatarUrl }}');">
</a>
</li>
{% endfor %}

{% if contributors|length > 4 %}
<li class="remaining-count">
<div class="bubble">
<span class="count">+{{ contributors|length - 4 }}</span>
<span class="count">+{{ contributors|length - 4 }}</span>
</div>
</li>
{% endif %}
Expand Down
99 changes: 53 additions & 46 deletions theme/_includes/layouts/docs_page.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,56 @@
<!doctype html>

<html lang="en" data-bs-theme="light">
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="utf-8">
<title>{{ title }}</title>
<title>{{ title }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="apple-touch-icon" sizes="180x180" href="/images/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon/favicon-16x16.png">
<link rel="manifest" href="/images/favicon/site.webmanifest">
<link rel="mask-icon" href="/images/favicon/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/images/favicon/favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/images/favicon/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<link rel="icon" type="image/png" href="/images/favicon/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/images/favicon/favicon.svg" />
<link rel="shortcut icon" href="/images/favicon/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/images/favicon/apple-touch-icon.png" />
<meta name="apple-mobile-web-app-title" content="Flutter Test Goldens" />
<link rel="manifest" href="/images/favicon/site.webmanifest" />

<!-- Open Graph Social Media -->
<meta property="og:url" content="https://fluttergoldens.com" />
<meta property="og:title" content="Flutter Test Goldens" />
<meta property="og:description" content="The best package for writing golden tests." />
<meta property="og:image" content="https://fluttergoldens.com/images/branding/social.png" />
<meta property="og:type" content="website" />

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@SuprDeclarative" />
<meta name="twitter:url" content="https://fluttergoldens.com" />
<meta name="twitter:title" content="Flutter Test Goldens" />
<meta name="twitter:description" content="The best package for writing golden tests." />
<meta name="twitter:image" content="https://fluttergoldens.com/images/branding/social.png" />

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" type="text/css">

{{ components.highlightJs() }}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/obsidian.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/dart.min.js"></script>
<script>
hljs.highlightAll();
</script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />

<link rel="stylesheet" href="/styles/docs_page_layout.css">
<link rel="stylesheet" href="/styles/docs_page_layout_light.css">
<link rel="stylesheet" href="/styles/docs_page_layout_dark.css">
</head>

<body>
<nav class="navbar navbar-expand-lg">
<div class="container">
<a class="navbar-brand" href="/"><img src="/images/branding/logo.png" height="32"><span class="name">{{ package.title }}</span></a>
<a class="navbar-brand" href="/"><img src="/images/branding/logo.png" height="32"><span class="name">{{ package.title }}</span></a>

<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#drawerNav" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
Expand All @@ -43,31 +60,27 @@
<ul class="navbar-nav mb-lg-0 ms-auto align-items-center">
{% if package.is_on_pub %}
<li class="nav-item">
<a class="nav-link" href="https://pub.dev/documentation/{{ package.name }}/latest/" target="_blank">API Docs</a>
<a class="nav-link" href="https://pub.dev/documentation/{{ package.name }}/latest/" target="_blank">API Docs</a>
</li>
{% endif %}

{% if package.github != null %}
<li class="nav-item">
<a href="{{ package.github.url }}" target="_blank"><span class="fa fa-brands fa-github"></span></a>
<a href="{{ package.github.url }}" target="_blank"><span class="fa fa-brands fa-github"></span></a>
</li>
{% endif %}

{% if package.discord != null %}
<li class="nav-item">
<a href="{{ package.discord }}" target="_blank"><span class="fa fa-brands fa-discord"></span></a>
<a href="{{ package.discord }}" target="_blank"><span class="fa fa-brands fa-discord"></span></a>
</li>
{% endif %}

{% if package.sponsorship != null %}
<li class="nav-item">
<a class="nav-link" href="{{ package.sponsorship }}" target="_blank"><span class="fa fa-dollar-sign"></span></a>
<a class="nav-link" href="{{ package.sponsorship }}" target="_blank"><span class="fa fa-dollar-sign"></span></a>
</li>
{% endif %}

<li class="nav-item">
<span id="brightness-button" onclick="toggleBrightness()" class="fa fa-moon"></span>
</li>
</ul>
</div>

Expand All @@ -82,7 +95,7 @@

<!-- Offscreen drawer that shows navigation on mobile -->
<div id="drawerNav" class="drawer-nav offcanvas offcanvas-start">
{{ components.navMain() }}
{{ components.navMain() }}

<a type="button" class="exit" data-bs-toggle="offcanvas" data-bs-target="#drawerNav">
<span class="fa fa-xmark"></span>
Expand All @@ -93,23 +106,29 @@
<div class="row">
<!-- Main nav menu on left side of screen on desktop -->
<div class="col col-2 d-none d-lg-block">
{{ components.navMain() }}
{{ components.navMain() }}
</div>

<!-- Page/article content -->
<main class="page-content col-12 col-lg-10 col-xl-8">
{% if headerImage is defined %}
<header class="image">
<img class="background" src="{{ headerImage }}">
</header>
{% else %}
<header>
<h1>{{ title }}</h1>
<h1>{{ title }}</h1>
</header>
{% endif %}

{{ content }}
{{ content }}
</main>

<!-- Table of contents for the page/article on desktop -->
<nav class="table-of-contents col col-2 d-none d-xl-block">
{% if tableOfContents is defined and tableOfContents.linkCountBeyondLevel(0) > 1 %}
<div class="table-of-contents">
{{ tableOfContents.renderHtmlList(startingLevel = 1) }}
{{ tableOfContents.renderHtmlList(startingLevel = 1) }}
</div>
{% endif %}
</nav>
Expand All @@ -127,12 +146,12 @@
// - not in an "onload" function - because we need this code to
// run before anything is painted. Otherwise we get a flicker from
// light mode to dark mode on load.
var brightness = localStorage.getItem('brightness');
if (brightness === "light" || brightness === null) {
goToLightMode();
} else {
//var brightness = localStorage.getItem('brightness');
//if (brightness === "light" || brightness === null) {
// goToLightMode();
//} else {
goToDarkMode();
}
//}

// Configure the global text search input.
//docsearch({
Expand All @@ -153,35 +172,23 @@
}

function goToLightMode() {
localStorage.setItem('brightness', 'light');

var html = document.getElementsByTagName("html")[0];
html.setAttribute("data-bs-theme", "light");

// For Algolia Docsearch bar theme
html.setAttribute("data-theme", "light");

var button = document.getElementById("brightness-button");
button.classList.remove("fa-sun");
button.classList.add("fa-moon");

goToHighlightJsLightMode();
localStorage.setItem('brightness', 'light');
}

function goToDarkMode() {
localStorage.setItem('brightness', 'dark');

var html = document.getElementsByTagName("html")[0];
html.setAttribute("data-bs-theme", "dark");

// For Algolia Docsearch bar theme
html.setAttribute("data-theme", "dark");

var button = document.getElementById("brightness-button");
button.classList.remove("fa-moon");
button.classList.add("fa-sun");

goToHighlightJsDarkMode();
localStorage.setItem('brightness', 'dark');
}
</script>
</body>
Expand Down
Loading