Skip to content

Commit 00b9e1e

Browse files
jdestefano-mongoi80and
jdestefano-mongo
authored and
i80and
committed
Split up the landing page into a templateand various components to build together and individually. (#1)
1 parent 33f70de commit 00b9e1e

File tree

8 files changed

+149
-65
lines changed

8 files changed

+149
-65
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/build/
12
/build-temp/
23
node_modules/
34
.DS_Store

‎Makefile

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ URL="https://docs-mongodborg-staging.corp.mongodb.com"
44
PRODUCTION_BUCKET=docs-mongodb-org-prod
55
PREFIX=landing
66

7-
.PHONY: help stage fake-deploy build-temp lint
7+
.PHONY: help stage fake-deploy build-temp lint build
88

99
CSS_ERRORS=errors,empty-rules,duplicate-properties,selector-max-approaching
1010
CSS_WARNINGS=regex-selectors,unqualified-attributes,text-indent
@@ -42,6 +42,20 @@ build-temp: style.min.css header.js
4242
mkdir $@
4343
cp -p index.html mongodb-logo.png style.min.css header.js *webfont* $@/
4444

45+
build: style.min.css header.js
46+
# Clean build directory
47+
rm -rf $@
48+
# Create output directories
49+
mkdir -p $@/landing
50+
mkdir -p $@/cloud
51+
mkdir -p $@/tools
52+
# Copy CSS and JS files to output directories
53+
cp -p index.html mongodb-logo.png style.min.css header.js *webfont* $@/landing
54+
cp -p index.html mongodb-logo.png style.min.css header.js *webfont* $@/cloud
55+
cp -p index.html mongodb-logo.png style.min.css header.js *webfont* $@/tools
56+
# Run the script to generate each landing page
57+
python ./gen_landings.py $@
58+
4559
# Don't grab node_modules unless we have to
4660
style.min.css: normalize.css style.css header.css
4761
$(MAKE) node_modules lint

‎cloud.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<a href="https://docs.atlas.mongodb.com/">
2+
<div class="tile landing-flex">
3+
<h2 class="tile__h1">MongoDB Atlas</h2>
4+
<div class="tile__divider"></div>
5+
<p class="tile__p">MongoDB Atlas is a database as a service created by the experts who design and engineer MongoDB.</p>
6+
</div>
7+
</a>
8+
9+
<a href="https://docs.cloudmanager.mongodb.com/">
10+
<div class="tile landing-flex">
11+
<h2 class="tile__h1">MongoDB Cloud Manager</h2>
12+
<div class="tile__divider"></div>
13+
<p class="tile__p">MongoDB Cloud Manager is a hosted operations management solution for MongoDB.</p>
14+
</div>
15+
</a>
16+
17+
<a href="https://docs.opsmanager.mongodb.com/current/">
18+
<div class="tile landing-flex">
19+
<h2 class="tile__h1">MongoDB Ops Manager</h2>
20+
<div class="tile__divider"></div>
21+
<p class="tile__p">MongoDB Ops Manager is an enterprise operations management solution for MongoDB.</p>
22+
</div>
23+
</a>

‎drivers.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<a href="https://docs.mongodb.com/ecosystem/drivers/">
2+
<div class="tile landing-flex">
3+
<h2 class="tile__h1">MongoDB Drivers</h2>
4+
<div class="tile__divider"></div>
5+
<p class="tile__p">MongoDB Drivers allow you to work with MongoDB databases from your favorite programming languages.</p>
6+
</div>
7+
</a>

‎gen_landings.py

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
#!/usr/bin/env python3
2+
import os.path
3+
4+
from sys import argv
5+
6+
# Build directory name will be the name of Makefile recipe
7+
BUILD_DIR = argv[1]
8+
9+
# Paths of source files
10+
MANUAL_INPUT_PATH = './manual.html'
11+
CLOUD_INPUT_PATH = './cloud.html'
12+
DRIVERS_INPUT_PATH = './drivers.html'
13+
TOOLS_INPUT_PATH = './tools.html'
14+
15+
# Path of the output files
16+
LANDING_OUTPUT_PATH = os.path.join(BUILD_DIR, 'landing', 'index.html')
17+
CLOUD_OUTPUT_PATH = os.path.join(BUILD_DIR, 'cloud', 'index.html')
18+
TOOLS_OUTPUT_PATH = os.path.join(BUILD_DIR, 'tools', 'index.html')
19+
20+
# Order of which all cards will show on the main landing page
21+
RENDER_ORDER = (MANUAL_INPUT_PATH, CLOUD_INPUT_PATH,
22+
DRIVERS_INPUT_PATH, TOOLS_INPUT_PATH)
23+
24+
25+
def build_all(template):
26+
"""Build the main landing page for docs.mongodb.com"""
27+
html = ''
28+
29+
# Read each file and concatenate the HTML
30+
fragments = []
31+
for f in RENDER_ORDER:
32+
with open(f) as in_file:
33+
fragments.append(in_file.read())
34+
html = '\n'.join(fragments)
35+
36+
# Substitute the template placeholder w/ HTML
37+
file_contents = template.replace('{0}', html)
38+
39+
# Write the output file
40+
with open(LANDING_OUTPUT_PATH, 'w') as out_file:
41+
out_file.write(file_contents)
42+
43+
44+
def build_individual(template, input_path, output_path):
45+
"""Build a landing page from a single source file
46+
pyfe.g., Cloud landing page, Tools..."""
47+
html = ''
48+
49+
# Read the source file
50+
with open(input_path, 'r') as in_file:
51+
html = in_file.read()
52+
53+
# Substitute the template placeholder w/ HTML
54+
file_contents = template.replace('{0}', html)
55+
56+
# Write the output file
57+
with open(output_path, 'w') as out_file:
58+
out_file.write(file_contents)
59+
60+
61+
def main():
62+
# Read the template
63+
with open('./index.html', 'r') as in_file:
64+
template = in_file.read()
65+
66+
# Build each landing page using the template
67+
build_all(template)
68+
build_individual(template, CLOUD_INPUT_PATH, CLOUD_OUTPUT_PATH)
69+
build_individual(template, TOOLS_INPUT_PATH, TOOLS_OUTPUT_PATH)
70+
71+
if __name__ == '__main__':
72+
main()

‎index.html

Lines changed: 1 addition & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -34,70 +34,7 @@ <h1 class="header__h1">MongoDB Documentation</h1>
3434

3535
<main class="main landing-flex">
3636

37-
<a href="https://docs.mongodb.com/manual">
38-
<div class="tile landing-flex">
39-
<h2 class="tile__h1">MongoDB Server</h2>
40-
<div class="tile__divider"></div>
41-
<p class="tile__p">MongoDB Server is an open-source, document database designed for ease of development and scaling.</p>
42-
</div>
43-
</a>
44-
45-
<a href="https://docs.atlas.mongodb.com/">
46-
<div class="tile landing-flex">
47-
<h2 class="tile__h1">MongoDB Atlas</h2>
48-
<div class="tile__divider"></div>
49-
<p class="tile__p">MongoDB Atlas is a database as a service created by the experts who design and engineer MongoDB.</p>
50-
</div>
51-
</a>
52-
53-
<a href="https://docs.cloudmanager.mongodb.com/">
54-
<div class="tile landing-flex">
55-
<h2 class="tile__h1">MongoDB Cloud Manager</h2>
56-
<div class="tile__divider"></div>
57-
<p class="tile__p">MongoDB Cloud Manager is a hosted operations management solution for MongoDB.</p>
58-
</div>
59-
</a>
60-
61-
<a href="https://docs.opsmanager.mongodb.com/current/">
62-
<div class="tile landing-flex">
63-
<h2 class="tile__h1">MongoDB Ops Manager</h2>
64-
<div class="tile__divider"></div>
65-
<p class="tile__p">MongoDB Ops Manager is an enterprise operations management solution for MongoDB.</p>
66-
</div>
67-
</a>
68-
69-
<a href="https://docs.mongodb.com/ecosystem/drivers/">
70-
<div class="tile landing-flex">
71-
<h2 class="tile__h1">MongoDB Drivers</h2>
72-
<div class="tile__divider"></div>
73-
<p class="tile__p">MongoDB Drivers allow you to work with MongoDB databases from your favorite programming languages.</p>
74-
</div>
75-
</a>
76-
77-
78-
<a href="https://docs.mongodb.com/compass">
79-
<div class="tile landing-flex">
80-
<h2 class="tile__h1">MongoDB Compass</h2>
81-
<div class="tile__divider"></div>
82-
<p class="tile__p">MongoDB Compass is a visual data exploration and analysis tool.</p>
83-
</div>
84-
</a>
85-
86-
<a href="https://docs.mongodb.com/spark-connector/">
87-
<div class="tile landing-flex">
88-
<h2 class="tile__h1">MongoDB Spark Connector</h2>
89-
<div class="tile__divider"></div>
90-
<p class="tile__p">MongoDB Connector for Spark provides integration between MongoDB and Apache Spark.</p>
91-
</div>
92-
</a>
93-
94-
<a href="https://docs.mongodb.com/bi-connector/current/">
95-
<div class="tile landing-flex">
96-
<h2 class="tile__h1">MongoDB BI Connector</h2>
97-
<div class="tile__divider"></div>
98-
<p class="tile__p">MongoDB Connector for Business Intelligence connects business intelligence tools to your MongoDB databases.</p>
99-
</div>
100-
</a>
37+
{0}
10138
</main>
10239
</div>
10340

‎manual.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<a href="https://docs.mongodb.com/manual">
2+
<div class="tile landing-flex">
3+
<h2 class="tile__h1">MongoDB Server</h2>
4+
<div class="tile__divider"></div>
5+
<p class="tile__p">MongoDB Server is an open-source, document database designed for ease of development and scaling.</p>
6+
</div>
7+
</a>

‎tools.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<a href="https://docs.mongodb.com/compass">
2+
<div class="tile landing-flex">
3+
<h2 class="tile__h1">MongoDB Compass</h2>
4+
<div class="tile__divider"></div>
5+
<p class="tile__p">MongoDB Compass is a visual data exploration and analysis tool.</p>
6+
</div>
7+
</a>
8+
9+
<a href="https://docs.mongodb.com/spark-connector/">
10+
<div class="tile landing-flex">
11+
<h2 class="tile__h1">MongoDB Spark Connector</h2>
12+
<div class="tile__divider"></div>
13+
<p class="tile__p">MongoDB Connector for Spark provides integration between MongoDB and Apache Spark.</p>
14+
</div>
15+
</a>
16+
17+
<a href="https://docs.mongodb.com/bi-connector/current/">
18+
<div class="tile landing-flex">
19+
<h2 class="tile__h1">MongoDB BI Connector</h2>
20+
<div class="tile__divider"></div>
21+
<p class="tile__p">MongoDB Connector for Business Intelligence connects business intelligence tools to your MongoDB databases.</p>
22+
</div>
23+
</a>

0 commit comments

Comments
 (0)