Skip to content

Commit bd664db

Browse files
stephenszulinskistephenszulinski
authored
Initial commit
0 parents  commit bd664db

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+2417
-0
lines changed

‎Hello.png

317 KB
Loading

‎Overview.png

152 KB
Loading

‎README.md

+158
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
---
2+
datapackage:
3+
title: Welcome to your template dataset page!
4+
description: This is a template for publishing your dataset with Datahub Cloud.
5+
created: 2024-01-01
6+
updated: 2024-01-31
7+
licenses:
8+
- path: http://opendatacommons.org/licenses/pddl/
9+
title: Open Data Commons Public Domain Dedication and License v1.0
10+
sources:
11+
- path: http://link.to/data/source
12+
title: Link to data source
13+
resources:
14+
- name: c02-per-decade
15+
title: C02 PPM per decade
16+
description: C02 PPM per decade
17+
lastModified: 2024-01-15
18+
path: data.csv
19+
---
20+
21+
<div class="hero">
22+
<h1 class="hero-title">Readme.md content<br/></h1>
23+
<p class="hero-description">Welcome to the body of your site. Everything above this section is part of the Data package front matter. I am adding here markdown text and other data-rich elements and they render beautifully.</p>
24+
</div>
25+
26+
27+
# Hello
28+
29+
![[Hello.png]]
30+
31+
*(Photo by Kassandra O'Shea on [flicker](http://www.flickr.com/photos/kyabean/8194627569/))*
32+
·
33+
## Overview
34+
35+
Here is a quick overview of the template you're looking at:
36+
37+
![[Overview.png]]
38+
39+
We have a frontmatter at the top, followed by the "body" of your site, which consists of unstructured data and/or data-rich components.
40+
41+
Feel free to customize the data package frontmatter accordingly when publishing your own data.
42+
43+
> [!info]
44+
> Frontmatter refers to the metadata placed at the beginning of the markdown file enclosed within triple dashes (---). This metadata provides essential information about the file and its content, enabling better organization, configuration, and processing by tools and platforms.
45+
46+
```mermaid
47+
graph TD;
48+
Data-Package-Frontmatter-->Dataset-title
49+
Data-Package-Frontmatter-->Data-package-metadata
50+
Data-Package-Frontmatter-->Short-description;
51+
Data-Package-Frontmatter-->Data-files-list;
52+
Data-Package-Frontmatter-->Data-Previews;
53+
```
54+
55+
This is the frontmatter in this README.md:
56+
57+
```
58+
---
59+
datapackage:
60+
title: Welcome to your template dataset page!
61+
description: This is a template for publishing your dataset with Datahub Cloud.
62+
created: 2024-01-01
63+
updated: 2024-01-31
64+
licenses:
65+
- path: http://opendatacommons.org/licenses/pddl/
66+
title: Open Data Commons Public Domain Dedication and License v1.0
67+
sources:
68+
- path: http://link.to/data/source
69+
title: Link to data source
70+
resources:
71+
- name: c02-per-decade
72+
title: C02 PPM per decade
73+
description: C02 PPM per decade
74+
lastModified: 2024-01-15
75+
path: data.csv
76+
---
77+
```
78+
79+
You can either update it if you have some data files / datasets that you would want to publish or delete it completely if you have markdown content only (suitable for blogs, data stories, articles, etc.)
80+
81+
## Okay, I published the template. Now what?
82+
83+
You can add as many markdown files to your GitHub repository as you like, and you can freely nest them in subdirectories. You can also enhance your content with other data visualisation components and markdown features.
84+
85+
> Note: For a full list of supported markdown features visit [Markdown syntax support](https://datahub.io/@olayway/docs/Markdown%20syntax%20support)
86+
87+
Here are some quick examples:
88+
89+
> [!info] This is cool!
90+
> Here's a callout block.
91+
> It supports **markdown** and ```[[Internal link|wikilinks]]```.
92+
93+
Or you can quickly embed a piece of code as follows:
94+
95+
```
96+
const ExampleCode = () => {
97+
return <div> .... </div>;
98+
};
99+
```
100+
101+
### How to take this template to the next level
102+
103+
> [!note]
104+
> The template works best for datasets. If you don't have any data files, we suggest deleting the frontmatter and following this [quick tutorial on publishing data-rich stories](https://datahub.io/@olayway/docs/Publish%20data-rich%20stories)
105+
106+
You may also want to check out:
107+
108+
<div class="middle-button-container">
109+
<a href="https://datahub.io/@olayway/docs/Customize%20Your%20DataHub%20Cloud%20Site%20with%20CSS" class="middle-button">Customize your site with CSS and HTML</a>
110+
</div>
111+
112+
<div class="middle-button-container">
113+
<a href="https://datahub.io/@olayway/docs/Add%20visuals%20and%20data-rich%20components" class="middle-button">Add visuals and data-rich components</a>
114+
</div>
115+
116+
<div class="middle-button-container">
117+
<a href="https://datahub.io/@olayway/docs/Add%20sidebar%20navigation" class="middle-button">Add sidebar navigation</a>
118+
</div>
119+
120+
<div class="middle-button-container">
121+
<a href="https://datahub.io/@olayway/docs/Configuring%20Nav%20bar%20and%20SEO%20fields" class="middle-button">How to Configure Basic SEO Fields and Nav Bar</a>
122+
</div>
123+
124+
> [!important]
125+
> For any questions, refer to the [Docs](https://datahub.io/@olayway/docs)
126+
127+
> [!warning]
128+
> Just testing some callout blocks here.
129+
130+
> [!done]
131+
> Test passed.
132+
133+
## Testing data-rich components
134+
135+
I will add a data table from my data.csv file below:
136+
<FlatUiTable
137+
data={{
138+
url: 'data.csv'
139+
}}
140+
/>
141+
142+
Looks kinda cool. What about a linechart? Let's see what this would look like:
143+
144+
<LineChart
145+
data={{
146+
url: 'data.csv'
147+
}}
148+
title="C02 PPM per decade"
149+
xAxis="year"
150+
yAxis="co2"
151+
/>
152+
153+
If you want to explore more of what's possible:
154+
155+
<div class="middle-button-container">
156+
<a href="https://datahub.io/@olayway/docs" class="middle-button">Go to the docs</a>
157+
</div>
158+

‎config.json

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"title": "DataHub Cloud Template",
3+
"description": "You can use this template repository to bootstrap your own DataHub Cloud site.",
4+
"logo": "https://datahub.io/datahub-cube.svg",
5+
"navbarTitle": {
6+
"logo": "https://datahub.io/datahub-cube.svg",
7+
"text": "DataHub Cloud Site Template"
8+
},
9+
"author": {
10+
"name": "DataHub",
11+
"url": "https://datahub.io/",
12+
"logo": "https://datahub.io/datahub-cube.svg"
13+
},
14+
"navLinks": [
15+
{ "href": "/docs", "name": "Docs" }
16+
],
17+
"showSidebar": false
18+
}

‎custom.css

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
/* Change heading fonts and colors */
2+
.bg-background {
3+
background: #fff !important;
4+
}
5+
6+
h1, h2, h3, h4, h5, h6 {
7+
font-family: "Open Sans", sans-serif !important;
8+
font-weight: bold !important;
9+
}
10+
11+
h1, h4 {
12+
color: #ed9e0c !important;
13+
}
14+
15+
h2, h5 {
16+
color: #ed9e0c !important;
17+
}
18+
19+
h3, h6 {
20+
color: #ed9e0c !important;
21+
}
22+
23+
...
24+
25+
.hero {
26+
background-color: #fff;
27+
height: 500px;
28+
display: flex;
29+
flex-direction: column;
30+
justify-content: center;
31+
align-items: center;
32+
text-align: center;
33+
color: #ed9e0c;
34+
padding: 0 36px;
35+
}
36+
37+
.hero-title {
38+
font-size: 4rem;
39+
color: #ed9e0c !important;
40+
margin-bottom: 0px;
41+
}
42+
43+
.hero-description {
44+
font-size: 1rem;
45+
margin-bottom: 30px;
46+
}
47+
48+
.hero-button {
49+
background-color: #d4e4ff;
50+
color: #333;
51+
padding: 10px 20px;
52+
border-radius: 5px;
53+
text-decoration: none;
54+
font-weight: bold;
55+
transition: all 0.3s ease-in-out;
56+
}
57+
58+
.hero-button:hover {
59+
background-color: #d4e4ff;
60+
color: #ebdcf7;
61+
}
62+
63+
.middle-button-container {
64+
text-align: center;
65+
margin: 30px 0;
66+
}
67+
68+
.middle-button {
69+
background-color: #d4e4ff;
70+
color: #333;
71+
padding: 10px 20px;
72+
border-radius: 5px;
73+
text-decoration: none;
74+
font-weight: bold;
75+
transition: all 0.3s ease-in-out;
76+
}
77+
78+
.middle-button:hover {
79+
background-color: #ed9e0c;
80+
color: #333;
81+
}

‎data.csv

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
year,co2,test,test2,test3,test4,test5
2+
1960,316,1,2,3,4,5
3+
1970,325,6,7,8,9,10
4+
1980,338,11,12,13,14,15
5+
1990,354,16,17,18,19,20
6+
2000,369,21,22,23,24,25
7+
2010,388,26,27,28,29,30
8+
2020,412,31,32,33,34,35

‎docs/Add sidebar navigation.md

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<div class="hero">
2+
<h1 class="hero-title">Add sidebar navigation <br/></h1>
3+
<p class="hero-description">A well-structured sidebar can significantly enhance the usability and navigability of your documentation or data site. With Datahub Cloud, you can easily implement sidebar navigation to help users quickly find and access the content they need. This section will guide you through the steps to add and customize a sidebar for your site.</p>
4+
</div>
5+
6+
## Add sidebar navigation
7+
8+
You can enable the sidebar by adding config.json file in the root of your site's repository (or its subfolder if you're publishing only this subfolder with DH Cloud) with the following content:
9+
10+
```
11+
{
12+
"showSidebar": true
13+
}
14+
```
15+
16+
Here's how it should look like:"
17+
18+
![[./assets/Screenshot3.png]]

0 commit comments

Comments
 (0)