<div align="center">
</div>
<div align="center">
</div>
<div align="center">
<a href="
https://testmysite.io/61e5ff836a840eeeef7e78e9/bgoonz-blog.netlify.app
" rel="Test My Site Results">
</a>
</div>
<details>
<summary> Bash Commands</summary>
My Commands # Find To find files by case-insensitive extension (ex: .jpg, .jpg, .jpG) find . -iname "\*.jpg"
To find directories find . -type d
To find files find . -type f
To find files by octal permission find . -type f -perm 777
To find files with setuid bit set find . -xdev \( -perm -4000 \) -type f -print0 | xargs -0 ls -l
To find files with extension '.txt' and remove them find ./path/ -name '\*.txt' -exec rm '{}' \;
To find files with extension '.txt' and look for a string into them find ./path/ -name '\*.txt' | xargs grep 'string'
To find files with size bigger than 5 Mebibyte and sort them by size find . -size +5M -type f -print0 | xargs -0 ls -Ssh | sort -z
To find files bigger than 2 Megabyte and list them find . -type f -size +200000000c -exec ls -lh {} \; | awk '{ print $9 ": " $5 }'
To find files modified more than 7 days ago and list file information find . -type f -mtime +7d -ls
To find symlinks owned by a user and list file information find . -type l -user <username-or-userid> -ls
To search for and delete empty directories find . -type d -empty -exec rmdir {} \;
To search for directories named build at a max depth of 2 directories find . -maxdepth 2 -name build -type d
To search all files who are not in .git directory find . ! -iwholename '.git ' -type f
To find all files that have the same node (hard link) as MY_FILE_HERE find . -type f -samefile MY_FILE_HERE 2> /dev/null
To find all files in the current directory and modify their permissions find . -type f -exec chmod 644 {} \;
1. Remove spaces from file and folder names and then remove numbers from files and folder names Description: need to : sudo apt install rename Notes: Issue when renaming file without numbers collides with existing file name... # code find . -name "* *" - type d | rename 's/ /_/g'
find . -name "* *" - type f | rename 's/ /_/g'
```sh
find $dir -type f | sed 's |\\( .*/ \\)[ ^A-Z ]*\\([ A-Z ].*\\)|mv \\ "&\\" \\ "\\1\\2\\" |' | sh
find $dir -type d | sed 's |\\( .*/ \\)[ ^A-Z ]*\\([ A-Z ].*\\)|mv \\ "&\\" \\ "\\1\\2\\" |' | sh
for i in *.html ; do mv "$i" "${i%-*}.html"; done
for i in *.* ; do mv "$i" "${i%-*}.${i##*.}"; done
---
## Description: combine the contents of every file in the contaning directory.
> Notes: this includes the contents of the file it 's self...
## # code:
```js
//APPEND-DIR.js
const fs = require( 'fs ') ;
let cat = require( 'child_process ')
.execSync( 'cat *')
.toString( 'UTF-8 ') ;
fs.writeFile( 'output.md ', cat, err => {
if ( err ) throw err ;
}) ;
2. Download Website Using Wget Description Notes: ==> sudo apt install wget ## code
wget --limit-rate=200k --no-clobber --convert-links --random-wait -r -p -E -e robots=off -U mozilla <https: //bootcamp42.gitbook.io/python/ >
3. Clean Out Messy Git Repo Description: recursively removes git related folders as well as internal use files / attributions in addition to empty folders Notes: To clear up clutter in repositories that only get used on your local machine. ## code
find . -empty - type d -print -delete
find . \\( - name ".git" -o - name ".gitignore" -o - name ".gitmodules" -o - name ".gitattributes" \\) - exec rm -rf -- {} +
find . \\( - name "*SECURITY.txt" -o - name "*RELEASE.txt" -o - name "*CHANGELOG.txt" -o - name "*LICENSE.txt" -o - name "*CONTRIBUTING.txt" - name "*HISTORY.md" -o - name "*LICENSE" -o - name "*SECURITY.md" -o - name "*RELEASE.md" -o - name "*CHANGELOG.md" -o - name "*LICENSE.md" -o - name "*CODE_OF_CONDUCT.md" -o - name "*CONTRIBUTING.md" \\) - exec rm -rf -- {} +
4. clone all of a user's git repositories Description: clone all of a user or organization's git repositories Notes: ## code Generalized
CNTX={users|orgs}; NAME={username|orgname}; PAGE=1
curl "<https://api.github.com/ $CNTX / $NAME /repos?page= $PAGE &per_page=100>" |
grep -e 'git_url*' |
cut -d \\" -f 4 |
xargs -L1 git clone
Clone all Git User CNTX={users}; NAME={bgoonz}; PAGE =1
curl "<https://api.github.com/ $CNTX / $NAME /repos?page= $PAGE &per_page=200>" ? branch =master |
grep -e 'git_url*' |
cut -d \\ " -f 4 |
xargs -L1 git clone
Clone all Git Organization
CNTX={organizations}; NAME={TheAlgorithms}; PAGE =1
curl "<https://api.github.com/ $CNTX / $NAME /repos?page= $PAGE &per_page=200>" ? branch =master |
grep -e 'git_url*' |
cut -d \\ " -f 4 |
xargs -L1 git clone
5. Git Workflow Description ## code git pull
git init
git add .
git commit -m "update"
git push -u origin master
git init
git add .
git commit -m "update"
git push -u origin main
git init
git add .
git commit -m "update"
git push -u origin bryan-guner
git init
git add .
git commit -m "update"
git push -u origin gh-pages
git init
git add .
git commit -m "update"
git push -u origin preview
6. Recursive Unzip In Place Description: recursively unzips folders and then deletes the zip file by the same name Notes: ## code
find . -name "*.zip" | while read filename; do unzip -o -d "`dirname " $filename "`" " $filename " ; done;
find . -name "*.zip" -type f - print -delete
7. git pull keeping local changes Description Notes: ## code
git stash
git pull
git stash pop
8. Prettier Code Formatter Description Notes: ## code
sudo npm i prettier -g
prettier --write .
9. Pandoc Description Notes: ## code
find ./ -iname "*.md" - type f - exec sh -c 'pandoc --standalone " ${ 0 } " -o " ${ 0 %.md}.html "' {} \\;
find ./ -iname "*.html" - type f - exec sh -c 'pandoc --wrap=none --from html --to markdown_strict " ${ 0 } " -o " ${ 0 %.html}.md "' {} \\;
find ./ -iname "*.docx" - type f - exec sh -c 'pandoc " ${ 0 } " -o " ${ 0 %.docx}.md "' {} \\;
10. Gitpod Installs Description Notes: ## code sudo apt install tree
sudo apt install pandoc -y
sudo apt install rename -y
sudo apt install black -y
sudo apt install wget -y
npm i lebab -g
npm i prettier -g
npm i npm- recursive - install -g
black .
prettier --write .
npm-recursive-install
11. Repo Utils Package Description: my standard repo utis package Notes: ## code npm i @bgoonz11/repoutils
12. Unix Tree Package Usage Description Notes: ## code tree -d -I 'node_modules'
tree -I 'node_modules'
tree -f -I 'node_modules' > TREE . md
tree -f -L 2 > README. md
tree -f -I 'node_modules' > listing- path . md
tree -f -I 'node_modules' -d > TREE . md
tree -f > README. md
13. Find & Replace string in file & folder names recursively Description Notes: ## code
find . - type f -exec rename 's/string1/string2/g' {} +
find . - type d -exec rename 's/-master//g' {} +
find . - type f -exec rename 's/\\.download//g' {} +
find . - type d -exec rename 's/-main//g' {} +
rename 's/\\.js\\.download$/.js/' *.js\\.download
rename 's/\\.html\\.markdown$/.md/' *.html\\.markdown
find . - type d -exec rename 's/es6//g' {} +
14. Remove double extensions Description Notes: ## code #!/bin/bash
for file in *.md.md
do
mv " ${file} " " ${file%.md} "
done
#!/bin/bash
for file in *.html.html
do
mv " ${file} " " ${file%.html} "
done
#!/bin/bash
for file in *.html.png
do
mv " ${file} " " ${file%.png} "
done
for file in *.jpg.jpg
do
mv " ${file} " " ${file%.png} "
done
15. Truncate folder names down to 12 characters Description Notes: ## code
for d in ./*; do mv $d ${d:0:12} ; done
16.Appendir.js Description: combine the contents of every file in the contaning directory Notes: this includes the contents of the file it's self... ## code //APPEND-DIR.js
const fs = require( 'fs ') ;
let cat = require( 'child_process ').execSync( 'cat *').toString( 'UTF-8 ') ;
fs.writeFile( 'output.md ', cat, ( err ) => {
if ( err ) throw err ;
}) ;
17. Replace space in filename with underscore Description: followed by replace '#' with '_' in directory name Notes: Can be re-purposed to find and replace any set of strings in file or folder names. ## code find . -name "* *" - type f | rename 's/_//g'
find . -name "* *" - type d | rename 's/#/_/g'
18. Filter & delete files by name and extension Description Notes: ## code find . - name '.bin' - type d -prune - exec rm -rf '{}' +
find . - name '*.html' - type d -prune - exec rm -rf '{}' +
find . - name 'nav-index' - type d -prune - exec rm -rf '{}' +
find . - name 'node-gyp' - type d -prune - exec rm -rf '{}' +
find . - name 'deleteme.txt' - type f -prune - exec rm -rf '{}' +
find . - name 'right.html' - type f -prune - exec rm -rf '{}' +
find . - name 'left.html' - type f -prune - exec rm -rf '{}' +
19. Remove lines containing string Description Notes: Remove lines not containing '.js'
sudo sed -i '/\\ .js/ !d' ./ *scrap2.md
## code sudo sed -i ' /githubusercontent/d ' ./ *sandbox.md
sudo sed -i ' /githubusercontent/d ' ./ *scrap2.md
sudo sed -i ' /github \\ .com/d ' ./ *out.md
sudo sed -i ' /author/d ' ./ *
20. Remove duplicate lines from a text file Description Notes:
//...syntax of uniq...//
$uniq [OPTION] [INPUT[OUTPUT]]
The syntax of this is quite easy to understand. Here, INPUT refers to the input file in which repeated lines need to be filtered out and if INPUT isn't specified then uniq reads from the standard input. OUTPUT refers to the output file in which you can store the filtered output generated by uniq command and as in case of INPUT if OUTPUT isn't specified then uniq writes to the standard output. Now, let's understand the use of this with the help of an example. Suppose you have a text file named kt.txt which contains repeated lines that needs to be omitted. This can simply be done with uniq.
## code sudo apt install uniq
uniq -u input .txt output .txt
21. Remove lines containing string Description Notes: ## code sudo sed -i ' /githubusercontent/d ' ./ *sandbox.md
sudo sed -i ' /githubusercontent/d ' ./ *scrap2.md
sudo sed -i ' /github \\ .com/d ' ./ *out.md
---
title: add_days
tags: date,intermediate
firstSeen: 2020-10-28T16 :19 :04 +02 :00
lastUpdated: 2020-10-28T16 :19 :04 +02 :00
---
sudo sed -i ' /title : /d ' ./ *output.md
sudo sed -i ' /firstSeen/d ' ./ *output.md
sudo sed -i ' /lastUpdated/d ' ./ *output.md
sudo sed -i ' /tags : /d ' ./ *output.md
sudo sed -i ' /badstring/d ' ./ *
sudo sed -i ' /stargazers/d ' ./repo.txt
sudo sed -i ' /node_modules/d ' ./index.html
sudo sed -i ' /right \\ .html/d ' ./index.html
sudo sed -i ' /right \\ .html/d ' ./right.html
22. Zip directory excluding .git and node_modules all the way down (Linux) Description Notes: ## code
#!/bin/bash
TSTAMP=`date '+%Y%m%d-%H%M%S' `
zip -r $1 . $TSTAMP .zip $1 -x "**.git/*" -x "**node_modules/*" ` shift ; echo $@ ;`
printf "\\nCreated: $1 . $TSTAMP .zip\\n"
# usage:
# - zipdir thedir
# - zip thedir -x "**anotherexcludedsubdir/*" (important the double quotes to prevent glob expansion)
# if in windows/git-bash, add 'zip' command this way:
# <https://stackoverflow.com/a/55749636/1482990>
23. Delete files containing a certain string Description Notes: ## code find . | xargs grep -l www.redhat.com | awk '{print "rm " $1}' > doit.sh
vi doit.sh // check for murphy and his law
source doit.sh
24 Description Notes: ## code
#!/bin/sh
# find ./ | grep -i "\\.*$" > files
find ./ | sed -E -e 's/([^ ]+[ ]+){8}//' | grep -i "\\.*$" > files
listing= "files"
out= ""
html= "sitemap.html"
out= "basename $out .html"
html= "sitemap.html"
cmd () {
echo ' <!DOCTYPE html> '
echo '<html> '
echo '<head> '
echo ' <meta http-equiv="Content-Type" content="text/html"> '
echo ' <meta name="Author" content="Bryan Guner"> '
echo '<link rel="stylesheet" href="./assets/prism.css"> '
echo ' <link rel="stylesheet" href="./assets/style.css"> '
echo ' <script async defer src="./assets/prism.js"> </script> '
echo " <title> directory </title> "
echo '<link rel="stylesheet" href="<https://cdn.jsdelivr.net/gh/bgoonz/GIT-CDN-FILES/mdn-article.css>"> '
echo '<link rel="stylesheet" href="<https://cdn.jsdelivr.net/gh/bgoonz/GIT-CDN-FILES/markdown-to-html-style.css>"> '
echo ""
echo '<style> '
echo ' a {'
echo ' color: black;'
echo ' }'
echo ''
echo ' li {'
echo ' border: 1px solid black !important;'
echo ' font-size: 20px;'
echo ' letter-spacing: 0px;'
echo ' font-weight: 700;'
echo ' line-height: 16px;'
echo ' text-decoration: none !important;'
echo ' text-transform: uppercase;'
echo ' background: #194ccdaf !important;'
echo ' color: black !important;'
echo ' border: none;'
echo ' cursor: pointer;'
echo ' justify-content: center;'
echo ' padding: 30px 60px;'
echo ' height: 48px;'
echo ' text-align: center;'
echo ' white-space: normal;'
echo ' border-radius: 10px;'
echo ' min-width: 45em;'
echo ' padding: 1.2em 1em 0;'
echo ' box-shadow: 0 0 5px;'
echo ' margin: 1em;'
echo ' display: grid;'
echo ' -webkit-border-radius: 10px;'
echo ' -moz-border-radius: 10px;'
echo ' -ms-border-radius: 10px;'
echo ' -o-border-radius: 10px;'
echo ' }'
echo ' </style> '
echo '</head> '
echo '<body> '
echo ""
# continue with the HTML stuff
echo ""
echo ""
echo "<ul> "
awk '{print "<li> <a href=\\""$1"\\"> ",$1," </a> </li> "}' $listing
# awk '{print "<li> "};
# {print " <a href=\\""$1"\\"> ",$1,"</a> </li> "}' \\ $listing
echo ""
echo "</ul> "
echo "</body> "
echo "</html> "
}
cmd $listing --sort=extension > > $html
25. Index of Iframes Description: Creates an index.html file that contains all the files in the working directory or any of it's sub folders as iframes instead of anchor tags Notes: Useful Follow up Code: ## code
#!/bin/sh
# find ./ | grep -i "\\.*$" > files
find ./ | sed -E -e 's/([^ ]+[ ]+){8}//' | grep -i "\\.*$" > files
listing= "files"
out= ""
html= "index.html"
out= "basename $out .html"
html= "index.html"
cmd () {
echo ' <!DOCTYPE html> '
echo '<html> '
echo '<head> '
echo ' <meta http-equiv="Content-Type" content="text/html"> '
echo ' <meta name="Author" content="Bryan Guner"> '
echo '<link rel="stylesheet" href="./assets/prism.css"> '
echo ' <link rel="stylesheet" href="./assets/style.css"> '
echo ' <script async defer src="./assets/prism.js"> </script> '
echo " <title> directory </title> "
echo ""
echo '<style> '
echo ' a {'
echo ' color: black;'
echo ' }'
echo ''
echo ' li {'
echo ' border: 1px solid black !important;'
echo ' font-size: 20px;'
echo ' letter-spacing: 0px;'
echo ' font-weight: 700;'
echo ' line-height: 16px;'
echo ' text-decoration: none !important;'
echo ' text-transform: uppercase;'
echo ' background: #194ccdaf !important;'
echo ' color: black !important;'
echo ' border: none;'
echo ' cursor: pointer;'
echo ' justify-content: center;'
echo ' padding: 30px 60px;'
echo ' height: 48px;'
echo ' text-align: center;'
echo ' white-space: normal;'
echo ' border-radius: 10px;'
echo ' min-width: 45em;'
echo ' padding: 1.2em 1em 0;'
echo ' box-shadow: 0 0 5px;'
echo ' margin: 1em;'
echo ' display: grid;'
echo ' -webkit-border-radius: 10px;'
echo ' -moz-border-radius: 10px;'
echo ' -ms-border-radius: 10px;'
echo ' -o-border-radius: 10px;'
echo ' }'
echo ' </style> '
echo '</head> '
echo '<body> '
echo ""
# continue with the HTML stuff
echo ""
echo ""
echo "<ul> "
awk '{print "<iframe style="-webkit-transform:scale(0.7);-moz-transform-scale(0.7); src=\\""$1"\\">","</iframe>"}' $listing
# awk '{print "<li> "};
# {print " <a href=\\""$1"\\"> ",$1,"</a> </li> "}' \\ $listing
echo ""
echo "</ul> "
echo "</body> "
echo "</html> "
}
cmd $listing --sort=extension > > $html
26. Filter Corrupted Git Repo For Troublesome File Description Notes: ## code
git filter -branch -- index - filter 'git rm -r --cached --ignore-unmatch assets/_index.html' HEAD
27. OVERWRITE LOCAL CHANGES Description Important: If you have any local changes, they will be lost. With or without --hard option, any local commits that haven't been pushed will be lost.[*]
If you have any files that are not tracked by Git (e.g. uploaded user content), these files will not be affected.
Notes:
First, run a fetch to update all origin/<branch> refs to latest: ## code
git fetch --all
# Backup your current branch:
git branch backup - master
# Then, you have two options:
git reset --hard origin/master
# OR If you are on some other branch:
git reset --hard origin/<branch_name>
# Explanation:
# git fetch downloads the latest from remote without trying to merge or rebase anything.
# Then the git reset resets the master branch to what you just fetched. The --hard option changes all the files in your working tree to match the files in origin/master
git fetch --all
git reset --hard origin/master
28. Remove Submodules Description: To remove a submodule you need to Notes: Delete the relevant section from the .gitmodules file.
Stage the .gitmodules changes git add .gitmodules
Delete the relevant section from .git/config.
Run git rm --cached path_to_submodule (no trailing slash).
Run rm -rf .git/modules/path_to_submodule (no trailing slash).
Commit git commit -m "Removed submodule "
Delete the now untracked submodule files rm -rf path_to_submodule ## code git submodule deinit
29. GET GISTS Description Notes: ## code sudo apt install wget
wget -q - O - <https://api.github.com/users/bgoonz/gists> | grep raw_url | awk -F\\" '{print $4}' | xargs -n3 wget
wget -q -O - <https://api.github.com/users/amitness/gists> | grep raw_url | awk -F\\" '{print $4}' | xargs -n3 wget
wget -q -O - <https://api.github.com/users/drodsou/gists> | grep raw_url | awk -F\\" '{print $4}' | xargs -n1 wget
wget -q -O - <https://api.github.com/users/thomasmb/gists> | grep raw_url | awk -F\\" '{print $4}' | xargs -n1 wget
30. Remove Remote OriginL Description Notes: ## code
git remote remove origin
31. just clone .git folder Description Notes: ## code
git clone --bare -- branch= master --single-branch <https://github.com/bgoonz/My-Web-Dev-Archive.git>
32. Undo recent pull request Description Notes: ## code
git reset --hard master@{ "10 minutes ago" }
33. Lebab Description: ES5 --> ES6 Notes: ## code # Safe:
lebab --replace ./ --transform arrow
lebab --replace ./ --transform arrow- return
lebab --replace ./ --transform for -of
lebab --replace ./ --transform for -each
lebab --replace ./ --transform arg-rest
lebab --replace ./ --transform arg-spread
lebab --replace ./ --transform obj-method
lebab --replace ./ --transform obj-shorthand
lebab --replace ./ --transform multi-var
# ALL:
lebab --replace ./ --transform obj-method
lebab --replace ./ --transform class
lebab -- replace ./ -- transform arrow
lebab -- replace ./ -- transform let
lebab -- replace ./ -- transform arg - spread
lebab -- replace ./ -- transform arg - rest
lebab -- replace ./ -- transform for - each
lebab -- replace ./ -- transform for - of
lebab -- replace ./ -- transform commonjs
lebab -- replace ./ -- transform exponent
lebab -- replace ./ -- transform multi - var
lebab -- replace ./ -- transform template
lebab -- replace ./ -- transform default - param
lebab -- replace ./ -- transform destruct - param
lebab -- replace ./ -- transform includes
lebab -- replace ./ -- transform obj - method
lebab -- replace ./ -- transform class
lebab -- replace ./ -- transform arrow
lebab -- replace ./ -- transform arg - spread
lebab -- replace ./ -- transform arg - rest
lebab -- replace ./ -- transform for - each
lebab -- replace ./ -- transform for - of
lebab -- replace ./ -- transform commonjs
lebab -- replace ./ -- transform exponent
lebab -- replace ./ -- transform multi - var
lebab -- replace ./ -- transform template
lebab -- replace ./ -- transform default - param
lebab -- replace ./ -- transform destruct - param
lebab -- replace ./ -- transform includes
34. Troubleshoot Ubuntu Input/Output Error Description: Open Powershell as Administrator Notes: ## code
wsl.exe --shutdown
Get -Service LxssManager | Restart -Service
35. Export Medium as Markdown Description Notes: ## code npm i mediumexporter -g
mediumexporter <https://medium.com/codex/fundamental-data-structures-in-javascript- 8 f 9 f 709 c 15 b 4 > > ds.md
36. Delete files in violation of a given size range (100MB for git) Description Notes: ## code
find . -size +75M -a - print -a -exec rm -f {} \\;
find . -size +98M -a - print -a -exec rm -f {} \\;
37. download all links of given file type Description Notes: ## code
wget -r - A . pdf <https: //overapi.com/git>
38. Kill all node processes Description Notes: ## code killall -s KILL node
39. Remove string from file names recursively Description: In the example below I am using this command to remove the string "-master" from all file names in the working directory and all of it's sub directories ## code find <mydir> - type f - exec sed -i 's/<string1> /<string2> /g' {} +
find . - type f - exec rename 's/-master//g' {} +
Notes: The same could be done for folder names by changing the -type f flag (for file) to a -type d flag (for directory) find <mydir> - type d - exec sed -i 's/<string1> /<string2> /g' {} +
find . - type d - exec rename 's/-master//g' {} +
40. Remove spaces from file and folder names recursively Description: replaces spaces in file and folder names with an _ underscore Notes: need to run sudo apt install rename to use this command ## code
find . -name "* *" - type d | rename 's/ /_/g'
find . -name "* *" - type f | rename 's/ /_/g'
41. Zip Each subdirectories in a given directory into their own zip file Description Notes: ## code for i in */; do zip -r " ${i%/} .zip" " $i " ; done
90 91. Unzip PowerShell Description Notes: ## code
PARAM (
[ string ] $ZipFilesPath = "./" ,
[ string ] $UnzipPath = "./RESULT"
)
$Shell = New-Object -com Shell.Application
$Location = $Shell .NameSpace( $UnzipPath )
$ZipFiles = Get-Childitem $ZipFilesPath -Recurse -Include *.ZIP
$progress = 1
foreach ( $ZipFile in $ZipFiles ) {
Write-Progress -Activity "Unzipping to $ ( $UnzipPath )" -PercentComplete (( $progress / ( $ZipFiles .Count + 1 )) * 100 ) -CurrentOperation $ZipFile .FullName -Status "File $ ( $Progress ) of $ ( $ZipFiles .Count)"
$ZipFolder = $Shell .NameSpace( $ZipFile .fullname)
$Location .Copyhere( $ZipFolder .items(), 1040 ) # 1040 - No msgboxes to the user - <http://msdn.microsoft.com/en-us/library/bb787866%28VS.85%29.aspx>
$progress ++
}
92. return to bash from zsh Description Notes: ## code sudo apt --purge remove zsh
93. Symbolic Link Description: to working directory Notes: ## code
ln -s " $(pwd) " ~/NameOfLink
ln -s " $(pwd) " ~/Downloads
94. auto generate readme Description: rename existing readme to blueprint.md Notes: ## code
npx @appnest/readme generate
95. Log into postgres Description Notes: ## code sudo -u postgres psql
Technologies Used URL https://bgoonz-blog.netlify.app Miscellaneous webpack ; Prism Widgets Facebook ; AddThis Analytics Moat ; Google Analytics ; Google Ads Conversion Tracking Comment systems Facebook API & REPL.it Database Security Netlify Access Font scripts Google Font API CDN Unpkg ; jsDelivr ; jQuery CDN ; Netlify Marketing automation MailChimp Advertising Google AdSense Tag managers Google Tag Manager Live chat Smartsupp ; LiveChat : Mesibo API JavaScript libraries Lodash ; Dojo ; core-js ; jQuery
</div>
96. URL To Subscribe To YouTube Channel Description Notes: ## code
<https: // www.youtube.com /channel/ UC1HDa0wWnIKUf-b4yY9JecQ?sub_confirmation= 1 >
97. Embed Repl.it In Medium Post ## code
<https: // repl.it /@bgoonz/ Data-Structures-Algos-Codebase?lite=true&referrer=https% 3 A% 2 F% 2 Fbryanguner.medium.com>
<https: // repl.it /@bgoonz/ node-db1-project?lite=true&referrer=https% 3 A% 2 F% 2 Fbryanguner.medium.com>
<https: // repl.it /@bgoonz/i nterview-prac?lite=true&referrer=https% 3 A% 2 F% 2 Fbryanguner.medium.com>
<https: // repl.it /@bgoonz/ Database-Prac?lite=true&referrer=https% 3 A% 2 F% 2 Fbryanguner.medium.com>
98 Description Notes: ## code
find . - name *right.html - type f - exec sed -i 's/target="_parent"//g' {} +
find . - name *right.html - type f - exec sed -i 's/target="_parent"//g' {} +
</details>
Wiki Nav
Technoloy SOURCECODE
bryan@LAPTOP- 9 LGJ3JGS: /c/MY -WEB-DEV /BLOG____2.0/ BLOG_2. 0 /src$ tree -f
.
├── ./components
│ ├── . /components/ ActionLink.js
│ ├── . /components/ CtaButtons.js
│ ├── . /components/ DocsMenu.js
│ ├── . /components/ DocsSubmenu.js
│ ├── . /components/ Footer.js
│ ├── . /components/ Header.js
│ ├── . /components/I con.js
│ ├── . /components/ Layout.js
│ ├── . /components/ SectionContent.js
│ ├── . /components/ SectionCta.js
│ ├── . /components/ SectionDocs.js
│ ├── . /components/ SectionGrid.js
│ ├── . /components/ SectionHero.js
│ ├── . /components/ Submenu.js
│ ├── . /components/g lobal.css
│ └── . /components/i ndex.js
├── ./data
│ └── . /data/ doc_sections.yml
├── ./hooks
│ └── . /hooks/u seScript.js
├── ./html.js
├── ./pages
│ ├── . /pages/ blog
│ │ ├── . /pages/ blog/blog-archive.md
│ │ ├── . /pages/ blog/blogwcomments.md
│ │ ├── . /pages/ blog/data-structures.md
│ │ ├── . /pages/ blog/index.md
│ │ ├── . /pages/ blog/my-medium.md
│ │ ├── . /pages/ blog/platform-docs.md
│ │ ├── . /pages/ blog/python- for -js-dev.md
│ │ ├── . /pages/ blog/python-resources.md
│ │ └── . /pages/ blog/web-scraping.md
│ ├── . /pages/ docs
│ │ ├── . /pages/ docs/about
│ │ │ ├── . /pages/ docs /about/i ndex.md
│ │ │ ├── . /pages/ docs /about/m e.md
│ │ │ ├── . /pages/ docs /about/ node
│ │ │ │ ├── . /pages/ docs /about/ node/install.md
│ │ │ │ ├── . /pages/ docs /about/ node/intro.md
│ │ │ │ ├── . /pages/ docs /about/ node/nodejs.md
│ │ │ │ ├── . /pages/ docs /about/ node/nodevsbrowser.md
│ │ │ │ ├── . /pages/ docs /about/ node/reading-files.md
│ │ │ │ └── . /pages/ docs /about/ node/writing-files.md
│ │ │ ├── . /pages/ docs /about/ npm.md
│ │ │ └── . /pages/ docs /about/ resume.md
│ │ ├── . /pages/ docs/articles
│ │ │ ├── . /pages/ docs /articles/ algo.md
│ │ │ ├── . /pages/ docs /articles/ article-compilation.md
│ │ │ ├── . /pages/ docs /articles/ basic-web-dev.md
│ │ │ ├── . /pages/ docs /articles/gi sts.md
│ │ │ ├── . /pages/ docs /articles/i ndex.md
│ │ │ ├── . /pages/ docs /articles/i nstall.md
│ │ │ ├── . /pages/ docs /articles/i ntro.md
│ │ │ ├── . /pages/ docs /articles/ python.md
│ │ │ ├── . /pages/ docs /articles/ reading-files.md
│ │ │ ├── . /pages/ docs /articles/ resources.md
│ │ │ ├── . /pages/ docs /articles/ ten-jamstack-apis-to-checkout.md
│ │ │ └── . /pages/ docs /articles/ writing-files.md
│ │ ├── . /pages/ docs/docs
│ │ │ └── . /pages/ docs /docs/ tools
│ │ │ └── . /pages/ docs /docs/ tools/ file -types.md
│ │ ├── . /pages/ docs/faq
│ │ │ ├── . /pages/ docs /faq/ contact.md
│ │ │ └── . /pages/ docs /faq/i ndex.md
│ │ ├── . /pages/ docs/gists.md
│ │ ├── . /pages/ docs/index.md
│ │ ├── . /pages/ docs/interact
│ │ │ ├── . /pages/ docs /interact/ clock.md
│ │ │ ├── . /pages/ docs /interact/i ndex.md
│ │ │ └── . /pages/ docs /interact/ jupyter-notebooks.md
│ │ ├── . /pages/ docs/links
│ │ │ ├── . /pages/ docs /links/i ndex.md
│ │ │ ├── . /pages/ docs /links/m edium-links.md
│ │ │ ├── . /pages/ docs /links/my -websites.md
│ │ │ └── . /pages/ docs /links/ social.md
│ │ ├── . /pages/ docs/quick-reference
│ │ │ ├── . /pages/ docs /quick-reference/ Emmet.md
│ │ │ ├── . /pages/ docs /quick-reference/ docs.md
│ │ │ ├── . /pages/ docs /quick-reference/i ndex.md
│ │ │ ├── . /pages/ docs /quick-reference/i nstallation.md
│ │ │ └── . /pages/ docs /quick-reference/ new -repo-instructions.md
│ │ ├── . /pages/ docs/react
│ │ │ ├── . /pages/ docs /react/ createReactApp.md
│ │ │ ├── . /pages/ docs /react/i ndex.md
│ │ │ └── . /pages/ docs /react/ react2.md
│ │ ├── . /pages/ docs/react-in-depth.md
│ │ ├── . /pages/ docs/sitemap.md
│ │ └── . /pages/ docs/tools
│ │ ├── . /pages/ docs /tools/i ndex.md
│ │ ├── . /pages/ docs /tools/ notes-template.md
│ │ ├── . /pages/ docs /tools/ plug-ins.md
│ │ └── . /pages/ docs /tools/ vscode.md
│ ├── . /pages/i ndex.md
│ ├── . /pages/ notes-template.md
│ ├── . /pages/ review.md
│ └── . /pages/ showcase.md
├── ./sass
│ ├── . /sass/im ports
│ │ ├── . /sass/im ports/_animations.scss
│ │ ├── . /sass/im ports/_buttons.scss
│ │ ├── . /sass/im ports/_docs.scss
│ │ ├── . /sass/im ports/_footer.scss
│ │ ├── . /sass/im ports/_forms.scss
│ │ ├── . /sass/im ports/_functions.scss
│ │ ├── . /sass/im ports/_general.scss
│ │ ├── . /sass/im ports/_header.scss
│ │ ├── . /sass/im ports/_helpers.scss
│ │ ├── . /sass/im ports/_icons.scss
│ │ ├── . /sass/im ports/_palettes.scss
│ │ ├── . /sass/im ports/_posts.scss
│ │ ├── . /sass/im ports/_prism.scss
│ │ ├── . /sass/im ports/_reset.scss
│ │ ├── . /sass/im ports/_sections.scss
│ │ ├── . /sass/im ports/_structure.scss
│ │ ├── . /sass/im ports/_tables.scss
│ │ └── . /sass/im ports/_variables.scss
│ └── . /sass/m ain.scss
├── ./templates
│ ├── . /templates/ advanced.js
│ ├── . /templates/ blog.js
│ ├── . /templates/ docs.js
│ ├── . /templates/ page.js
│ └── . /templates/ post.js
└── ./utils
├── . /utils/ attribute.js
├── . /utils/ classNames.js
├── . /utils/ cycler.js
├── . /utils/g etData.js
├── . /utils/g etPage.js
├── . /utils/g etPageByFilePath.js
├── . /utils/g etPages.js
├── . /utils/ htmlToReact.js
├── . /utils/i ndex.js
├── . /utils/ link.js
├── . /utils/m arkdownify.js
├── . /utils/ pathJoin.js
├── . /utils/ toStyleObj.js
├── . /utils/ toUrl.js
└── . /utils/ withPrefix.js
21 directories, 119 files
bryan@LAPTOP- 9 LGJ3JGS: /c/MY -WEB-DEV /BLOG____2.0/ BLOG_2. 0 /src$
Source Code <details>
<summary> Folder Structure (src) </summary>
.
├── Combined_____-_____Doc .md
├── components
│ ├── ActionLink .js
│ ├── CtaButtons .js
│ ├── DarkToggle
│ │ ├── index .js
│ │ └── styles .js
│ ├── DocsMenu .js
│ ├── DocsSubmenu .js
│ ├── Footer .js
│ ├── Header .js
│ ├── Icon .js
│ ├── Layout .js
│ ├── SectionContent .js
│ ├── SectionCta .js
│ ├── SectionDocs .js
│ ├── SectionGrid .js
│ ├── SectionHero .js
│ ├── Submenu .js
│ ├── global .css
│ └── index .js
├── data
│ └── doc_sections .yml
├── hooks
│ ├── addScript .js
│ ├── index .js
│ ├── useDarkMode .js
│ ├── useEventListener .js
│ ├── useMediaQuery .js
│ ├── useOnClickOutside .js
│ ├── useQueryParam .js
│ ├── useSize .js
│ └── useStorage .js
├── html .js
├── pages
│ ├── blog
│ │ ├── 300 -react-questions .md
│ │ ├── awesome-graphql .md
│ │ ├── big-o-complexity .md
│ │ ├── blog-archive .md
│ │ ├── blogwcomments .md
│ │ ├── data-structures .md
│ │ ├── flow-control- in -python .md
│ │ ├── functions- in -python .md
│ │ ├── git-gateway .md
│ │ ├── index .md
│ │ ├── interview-questions-js .md
│ │ ├── netlify-cms .md
│ │ ├── platform-docs .md
│ │ ├── python- for -js-dev .md
│ │ ├── python-resources .md
│ │ ├── web-dev-trends .md
│ │ └── web-scraping .md
│ ├── docs
│ │ ├── about
│ │ │ ├── eng-portfolio .md
│ │ │ ├── ideas- for -this-website .md
│ │ │ ├── index .md
│ │ │ ├── intrests .md
│ │ │ ├── job-search .md
│ │ │ └── resume .md
│ │ ├── articles
│ │ │ ├── basic-web-dev .md
│ │ │ ├── buffers .md
│ │ │ ├── dev-dep .md
│ │ │ ├── event-loop .md
│ │ │ ├── fs-module .md
│ │ │ ├── how-the-web-works .md
│ │ │ ├── http .md
│ │ │ ├── index .md
│ │ │ ├── install .md
│ │ │ ├── intro .md
│ │ │ ├── modules .md
│ │ │ ├── nextjs .md
│ │ │ ├── node-api-express .md
│ │ │ ├── node-cli-args .md
│ │ │ ├── node-common-modules .md
│ │ │ ├── node-env-variables .md
│ │ │ ├── node-js-language .md
│ │ │ ├── node-package-manager .md
│ │ │ ├── node-repl .md
│ │ │ ├── node-run-cli .md
│ │ │ ├── nodejs .md
│ │ │ ├── nodevsbrowser .md
│ │ │ ├── npm .md
│ │ │ ├── npx .md
│ │ │ ├── os-module .md
│ │ │ ├── reading-files .md
│ │ │ ├── semantic- html .md
│ │ │ ├── semantic .md
│ │ │ ├── the-uniform-resource-locator-(url) .md
│ │ │ ├── understanding-firebase .md
│ │ │ ├── v8 .md
│ │ │ ├── web-standards-checklist .md
│ │ │ ├── webdev-tools .md
│ │ │ └── writing-files .md
│ │ ├── audio
│ │ │ ├── audio-feature-extraction .md
│ │ │ ├── audio .md
│ │ │ ├── dfft .md
│ │ │ ├── discrete-fft .md
│ │ │ ├── dtw-python-explained .md
│ │ │ ├── dynamic-time-warping .md
│ │ │ ├── index .md
│ │ │ └── web-audio-api .md
│ │ ├── career
│ │ │ ├── dev-interview .md
│ │ │ ├── index .md
│ │ │ ├── interview-dos-n-donts .md
│ │ │ └── job-boards .md
│ │ ├── community
│ │ │ ├── an-open-letter- 2 -future-developers .md
│ │ │ ├── index .md
│ │ │ └── video-chat .md
│ │ ├── content
│ │ │ ├── algo .md
│ │ │ ├── archive .md
│ │ │ ├── gatsby-Queries-Mutations .md
│ │ │ ├── history-api .md
│ │ │ ├── index .md
│ │ │ ├── main-projects .md
│ │ │ └── trouble-shooting .md
│ │ ├── data-structures
│ │ │ └── index .md
│ │ ├── docs
│ │ │ ├── appendix .md
│ │ │ ├── art-of-command-line .md
│ │ │ ├── bash .md
│ │ │ ├── content .md
│ │ │ ├── css .md
│ │ │ ├── data-structures-docs .md
│ │ │ ├── es- 6 -features .md
│ │ │ ├── git-reference .md
│ │ │ ├── git-repos .md
│ │ │ ├── html-spec .md
│ │ │ ├── index .md
│ │ │ ├── markdown .md
│ │ │ ├── no-whiteboarding .md
│ │ │ ├── node-docs-complete .md
│ │ │ ├── node-docs-full .md
│ │ │ ├── regex- in -js .md
│ │ │ └── sitemap .md
│ │ ├── faq
│ │ │ ├── contact .md
│ │ │ ├── index .md
│ │ │ └── plug- ins .md
│ │ ├── gists .md
│ │ ├── index .md
│ │ ├── interact
│ │ │ ├── callstack-visual .md
│ │ │ ├── clock .md
│ │ │ ├── index .md
│ │ │ ├── jupyter-notebooks .md
│ │ │ ├── other-sites .md
│ │ │ └── video-chat .md
│ │ ├── interview
│ │ │ ├── index .md
│ │ │ ├── job-search- nav .md
│ │ │ └── review-concepts .md
│ │ ├── javascript
│ │ │ ├── arrow-functions .md
│ │ │ ├── asyncjs .md
│ │ │ ├── await-keyword .md
│ │ │ ├── bigo .md
│ │ │ ├── clean- code .md
│ │ │ ├── constructor-functions .md
│ │ │ ├── index .md
│ │ │ ├── promises .md
│ │ │ ├── review .md
│ │ │ └── this-is-about-this .md
│ │ ├── leetcode
│ │ │ └── index .md
│ │ ├── privacy-policy .md
│ │ ├── projects
│ │ │ ├── embeded-websites .md
│ │ │ ├── index .md
│ │ │ ├── list-of-projects .md
│ │ │ ├── mini-projects .md
│ │ │ └── my-websites .md
│ │ ├── python
│ │ │ ├── at-length .md
│ │ │ ├── cheat-sheet .md
│ │ │ ├── comprehensive-guide .md
│ │ │ ├── examples .md
│ │ │ ├── flow-control .md
│ │ │ ├── functions .md
│ │ │ ├── google-sheets-api .md
│ │ │ ├── index .md
│ │ │ ├── intro- for -js-devs .md
│ │ │ ├── python-ds .md
│ │ │ └── snippets .md
│ │ ├── quick-reference
│ │ │ ├── Emmet .md
│ │ │ ├── all-emojis .md
│ │ │ ├── create-react-app .md
│ │ │ ├── git-bash .md
│ │ │ ├── git-tricks .md
│ │ │ ├── google-firebase .md
│ │ │ ├── heroku-error-codes .md
│ │ │ ├── index .md
│ │ │ ├── installation .md
│ │ │ ├── markdown-dropdowns .md
│ │ │ ├── minifiction .md
│ │ │ ├── new-repo-instructions .md
│ │ │ ├── psql-setup .md
│ │ │ ├── pull-request-rubric .md
│ │ │ ├── quick-links .md
│ │ │ ├── topRepos .md
│ │ │ ├── understanding-path .md
│ │ │ └── vscode-themes .md
│ │ ├── react
│ │ │ ├── ajax-n-apis .md
│ │ │ ├── cheatsheet .md
│ │ │ ├── createReactApp .md
│ │ │ ├── demo .md
│ │ │ ├── dont-use-index-as-keys .md
│ │ │ ├── index .md
│ │ │ ├── jsx .md
│ │ │ ├── react-docs .md
│ │ │ ├── react- in -depth .md
│ │ │ ├── react2 .md
│ │ │ └── render-elements .md
│ │ ├── reference
│ │ │ ├── awesome-lists .md
│ │ │ ├── awesome-static .md
│ │ │ ├── bash-commands .md
│ │ │ ├── bookmarks .md
│ │ │ ├── embed-the-web .md
│ │ │ ├── github-search .md
│ │ │ ├── google-cloud .md
│ │ │ ├── how- 2 -reinstall-npm .md
│ │ │ ├── how-to-kill-a-process .md
│ │ │ ├── index .md
│ │ │ ├── installing-node .md
│ │ │ ├── intro-to-nodejs .md
│ │ │ ├── notes-template .md
│ │ │ ├── psql .md
│ │ │ ├── resources .md
│ │ │ ├── vscode .md
│ │ │ └── web-api 's.md
│ │ ├── search.md
│ │ ├── sitemap.md
│ │ ├── tips
│ │ │ ├── array-methods.md
│ │ │ ├── index.md
│ │ │ └── insert-into-array.md
│ │ ├── tools
│ │ │ ├── Archive.md
│ │ │ ├── data-structures.md
│ │ │ ├── dev-utilities.md
│ │ │ ├── index.md
│ │ │ └── markdown-html.md
│ │ └── tutorials
│ │ ├── enviorment-setup.md
│ │ └── index.md
│ ├── index.md
│ ├── privacy-policy.md
│ ├── readme.md
│ └── showcase.md
├── sass
│ ├── imports
│ │ ├── _animations.scss
│ │ ├── _buttons.scss
│ │ ├── _docs.scss
│ │ ├── _footer.scss
│ │ ├── _forms.scss
│ │ ├── _functions.scss
│ │ ├── _general.scss
│ │ ├── _header.scss
│ │ ├── _helpers.scss
│ │ ├── _icons.scss
│ │ ├── _palettes.scss
│ │ ├── _posts.scss
│ │ ├── _prism.scss
│ │ ├── _reset.scss
│ │ ├── _sections.scss
│ │ ├── _structure.scss
│ │ ├── _tables.scss
│ │ └── _variables.scss
│ └── main.scss
├── templates
│ ├── advanced.js
│ ├── blog.js
│ ├── docs.js
│ ├── page.js
│ ├── post.js
│ └── templates.md
└── utils
├── attribute.js
├── blm-badge.js
├── classNames.js
├── cycler.js
├── getData.js
├── getPage.js
├── getPageByFilePath.js
├── getPages.js
├── htmlToReact.js
├── index.js
├── link.js
├── markdownify.js
├── pathJoin.js
├── toStyleObj.js
├── toUrl.js
└── withPrefix.js
32 directories, 272 files
</details>
<details>
<summary> Click To See Component Sourcecode </summary>
Component Structure .
├── ActionLink . js
├── CtaButtons . js
├── DarkToggle
│ ├── index.js
│ └── styles.js
├── DocsMenu . js
├── DocsSubmenu . js
├── Footer . js
├── Header . js
├── Icon . js
├── Layout . js
├── SectionContent . js
├── SectionCta . js
├── SectionDocs . js
├── SectionGrid . js
├── SectionHero . js
├── Submenu . js
├── global.css
└── index.js
import React from 'react' ;
import _ from 'lodash' ;
import { Link, withPrefix, classNames } from '../utils' ;
import Icon from './Icon' ;
export default class ActionLink extends React.Component {
render() {
let action = _. get (this.props, 'action' , null );
return (
<Link
to ={withPrefix(_. get (action, 'url' , null ))}
{ .. .(_. get (action, 'new_window' , null ) ? { target: '_blank' } : null )}
{ .. .(_. get (action, 'new_window' , null ) || _. get (action, 'no_follow' , null )
? {
rel: (_. get (action, 'new_window' , null ) ? 'noopener ' : '' ) + (_. get (action, 'no_follow' , null ) ? 'nofollow' : '' )
}
: null )}
className={classNames({
button: _. get (action, 'style' , null ) !== 'link' ,
'button-secondary' : _. get (action, 'style' , null ) === 'secondary' ,
'button-icon' : _. get (action, 'style' , null ) === 'icon'
})}
>
{_. get (action, 'style' , null ) === 'icon' && _. get (action, 'icon_class' , null ) ? (
<React.Fragment>
<Icon { .. .this.props} icon={_. get (action, 'icon_class' , null )} />
<span className = "screen-reader-text" > {_. get (action, 'label' , null )}</span>
</React.Fragment>
) : (
_. get (action, 'label' , null )
)}
</Link>
);
}
}
import React from 'react ' ;
import _ from 'lodash ' ;
import { Link, withPrefix, classNames } from '../utils ' ;
export default class CtaButtons extends React.Component {
render() {
let actions = _.get( this.props , 'actions ', null) ;
return _.map( actions , ( action , action_idx) => (
<Link
key={action_idx}
to={withPrefix( _.get ( action , 'url ', null))}
{...( _.get ( action , 'new_window ', null) ? { target: '_blank ' } : null)}
{...( _.get ( action , 'new_window ', null) || _.get( action , 'no_follow ', null)
? {
rel: ( _.get ( action , 'new_window ', null) ? 'noopener ' : '') + ( _.get ( action , 'no_follow ', null) ? 'nofollow ' : '')
}
: null)}
className={classNames({
button: _.get( action , 'style ', null) === 'primary ' || _.get( action , 'style ', null) === 'secondary ',
'button-secondary ': _.get( action , 'style ', null) === 'secondary '
})}
>
{_.get( action , 'label ', null)}
</Link>
)) ;
}
}
import React from 'react' ;
import _ from 'lodash' ;
import { getPage, classNames, Link, withPrefix, pathJoin, getPages } from '../utils' ;
import DocsSubmenu from './DocsSubmenu' ;
export default class DocsMenu extends React.Component {
render() {
let site = _. get (this.props, 'site' , null );
let page = _. get (this.props, 'page' , null );
let root_docs_path = _. get (site, 'data.doc_sections.root_docs_path' , null );
let root_page = getPage(this.props.pageContext.pages, root_docs_path);
return (
<nav id = "docs-nav" className = "docs-nav" >
<div id = "docs-nav-inside" className = "docs-nav-inside sticky" >
<button id = "docs-nav-toggle" className = "docs-nav-toggle" >
Navigate Docs
<span className = "icon-angle-right" aria-hidden = "true" />
</button>
<div className = "docs-nav-menu" >
<ul id = "docs-menu" className = "docs-menu" >
<li
className={classNames( 'docs-menu-item' , {
current: _. get (page, 'url' , null ) === _. get (root_page, 'url' , null )
})}
>
<Link to ={withPrefix(_. get (root_page, 'url' , null ))}> {_. get (root_page, 'frontmatter.title' , null )}</Link>
</li>
{_.map(_. get (site, 'data.doc_sections.sections' , null ), (section, section_idx) => {
let section_path = pathJoin(root_docs_path, section);
let section_page = getPage(this.props.pageContext.pages, section_path);
let child_pages = _.orderBy(getPages(this.props.pageContext.pages, section_path), 'frontmatter.weight' );
let child_count = _.size(child_pages);
let has_children = child_count > 0 ? true : false ;
let is_current_page = _. get (page, 'url' , null ) === _. get (section_page, 'url' , null ) ? true : false ;
let is_active = _. get (page, 'url' , null ).startsWith(_. get (section_page, 'url' , null ));
return (
<React.Fragment key={section_idx + '.1' }>
<li
key={section_idx}
className={classNames( 'docs-menu-item' , {
'has-children' : has_children,
current: is_current_page,
active: is_active
})}
>
<Link to ={withPrefix(_. get (section_page, 'url' , null ))}> {_. get (section_page, 'frontmatter.title' , null )}</Link>
{has_children && (
<React.Fragment>
<button className = "docs-submenu-toggle" >
<span className = "screen-reader-text" > Submenu</span>
<span className = "icon-angle-right" aria-hidden = "true" />
</button>
<DocsSubmenu { .. .this.props} child_pages={child_pages} page={page} site={site} />
</React.Fragment>
)}
</li>
</React.Fragment>
);
})}
</ul>
</div>
</div>
</nav>
);
}
}
import React from 'react' ;
import _ from 'lodash' ;
import { classNames, Link, withPrefix } from '../utils' ;
export default class DocsSubmenu extends React.Component {
render() {
let child_pages = _. get (this.props, 'child_pages' , null );
let page = _. get (this.props, 'page' , null );
return (
<ul className = "docs-submenu" >
{_.map(child_pages, (child_page, child_page_idx) => (
<li
key={child_page_idx}
className={classNames( 'docs-menu-item' , {
current: _. get (page, 'url' , null ) === _. get (child_page, 'url' , null )
})}
>
<Link to ={withPrefix(_. get (child_page, 'url' , null ))}> {_. get (child_page, 'frontmatter.title' , null )}</Link>
</li>
))}
</ul>
);
}
}
import _ from 'lodash' ;
import React from 'react' ;
import { htmlToReact } from '../utils' ;
import ActionLink from './ActionLink' ;
import addScript from './../hooks/addScript' ;
const Script = (props) => {
importScript( './../hooks/addScript.js' );
};
export default class Footer extends React.Component {
render() {
return (
<footer id = "colophon" className = "site-footer outer" >
<div>
<center>
<br />
<link rel = "stylesheet" href = "<https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@1/dist/algoliasearchNetlify.css>" />
<br />
<table cellPadding={0} cellSpacing={0} border={0}>
<tbody>
<tr>
<td
style={{
fontFamily: 'Arial, Helvetica, sans-serif' ,
fontSize: '7.5pt'
}}
>
<center>
<table
width = "95%"
cellPadding={0}
cellSpacing={0}
border={0}
style={{
fontFamily: 'Arial, Helvetica, sans-serif' ,
fontSize: '7.5pt'
}}
>
<tbody>
<tr>
<td
style={{
fontFamily: 'Arial, Helvetica, sans-serif' ,
fontSize: '7.5pt'
}}
align = "left"
>
<a target = "_blank" href = "<https://search.freefind.com/siteindex.html?si=14588965>" >
index
</a>
</td>
<td
style={{
fontFamily: 'Arial, Helvetica, sans-serif' ,
fontSize: '7.5pt'
}}
align = "center"
>
<a target = "_blank" href = "<https://search.freefind.com/find.html?si=14588965&m=0&p=0>" >
sitemap
</a>
</td>
<td
style={{
fontFamily: 'Arial, Helvetica, sans-serif' ,
fontSize: '7.5pt'
}}
align = "right"
>
<a target = "_blank" href = "<https://search.freefind.com/find.html?si=14588965&pid=a>" >
advanced
</a>
</td>
</tr>
</tbody>
</table>
</center>
<form
style={{
margin: '0px' ,
marginTop: '2px'
}}
action = "<https://search.freefind.com/find.html>"
method = "get"
acceptCharset = "utf-8"
target = "_self"
>
<input type = "hidden" name = "si" defaultValue={14588965} />
<input type = "hidden" name = "pid" defaultValue = "r" />
<input type = "hidden" name = "n" defaultValue={0} />
<input type = "hidden" name = "_charset_" defaultValue />
<input type = "hidden" name = "bcd" defaultValue = "÷" />
<input type = "text" name = "query" size={15} />
<input type = "submit" defaultValue = "search" />
</form>
</td>
</tr>
<tr>
<td
style={{
textAlign: 'center' ,
fontFamily: 'Arial, Helvetica, sans-serif' ,
fontSize: '7.5pt' ,
paddingTop: '4px'
}}
>
<a
style={{
textDecoration: 'none' ,
color: 'transparent'
}}
href = "<https://www.freefind.com>"
rel = "nofollow"
>
search engine
</a>
<a
style={{
textDecoration: 'none' ,
color: 'transparent'
}}
href = "<https://www.freefind.com>"
rel = "nofollow"
>
by
<span style={{ color: 'transparent' }}> freefind</span>
</a>
{
<iframe
src = "<https://bgoonz.github.io/fb-and-twitter-api-embeds/>"
frameborder = "0"
id = "social-embed"
width = "100%!important"
>
{ ' ' }
</iframe>
}
</td>
</tr>
</tbody>
</table>
<a href = "//pdfcrowd.com/url_to_pdf/?" onclick = "if(!this.p)href+='&url='+encodeURIComponent(location.href);this.p=1" >
Save to PDF
</a>
</center>
</div>
<div className = "inner" >
<div id = "search" className = "inner" >
{ ' ' }
</div>
<div className = "site-footer-inside" >
<p className = "site-info" >
{_. get (this.props, 'pageContext.site.siteMetadata.footer.content' , null ) && (
<span className = "copyright" > {htmlToReact(_. get (this.props, 'pageContext.site.siteMetadata.footer.content' , null ))}</span>
)}
{_.map(_. get (this.props, 'pageContext.site.siteMetadata.footer.links' , null ), (action, action_idx) => (
<ActionLink key={action_idx} { .. .this.props} action={action} />
))}{ ' ' }
</p>
{_. get (this.props, 'pageContext.site.siteMetadata.footer.has_social' , null ) && (
<div className = "social-links" >
{_.map(_. get (this.props, 'pageContext.site.siteMetadata.footer.social_links' , null ), (action, action_idx) => (
<ActionLink key={action_idx} { .. .this.props} action={action} />
))}{ ' ' }
</div>
)}{ ' ' }
</div>
</div>
</footer>
);
}
}
import React from 'react' ;
import _ from 'lodash' ;
import { Link, withPrefix, classNames } from '../utils' ;
import ActionLink from './ActionLink' ;
import Submenu from './Submenu' ;
export default class Header extends React.Component {
render() {
return (
<header id = "masthead" className = "site-header outer" >
{/* <link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@1/dist/algoliasearchNetlify.css>" /> */}
<br />
<div className = "inner" >
<div className = "site-header-inside" >
<div className = "site-branding" >
{_. get (this.props, 'pageContext.site.siteMetadata.header.logo_img' , null ) ? (
<p className = "site-logo" >
<Link to ={withPrefix(_. get (this.props, 'pageContext.site.siteMetadata.header.url' , null ) || '/' )}>
<img
src={withPrefix(_. get (this.props, 'pageContext.site.siteMetadata.header.logo_img' , null ))}
alt={_. get (this.props, 'pageContext.site.siteMetadata.header.logo_img_alt' , null )}
/>
</Link>
</p>
) : (
<p className = "site-title" >
{ ' ' }
WebDevHub
<Link to ={withPrefix(_. get (this.props, 'pageContext.site.siteMetadata.header.url' , null ) || '/' )}>
{_. get (this.props, 'pageContext.site.siteMetadata.header.title' , null )}
</Link>
</p>
)}
</div>
<div id = "search" className = "inner" >
{ ' ' }
</div>
{_. get (this.props, 'pageContext.site.siteMetadata.header.has_nav' , null ) && (
<React.Fragment>
<nav id = "main-navigation" className = "site-navigation" aria-label = "Main Navigation" >
<div className = "site-nav-inside" >
<button id = "menu-close" className = "menu-toggle" >
<span className = "screen-reader-text" > Open Menu</span>
<span className = "icon-close" aria-hidden = "true" />
</button>
<ul className = "menu" >
{_.map(_. get (this.props, 'pageContext.site.siteMetadata.header.nav_links' , null ), (action, action_idx) => {
let page_url = _.trim(_. get (this.props, 'pageContext.url' , null ), '/' );
let action_url = _.trim(_. get (action, 'url' , null ), '/' );
return (
<li
key={action_idx}
className={classNames( 'menu-item' , {
'has-children' : _. get (action, 'has_subnav' , null ) && _. get (action, 'subnav_links' , null ),
current: page_url === action_url,
'menu-button' : _. get (action, 'style' , null ) !== 'link'
})}
>
<ActionLink { .. .this.props} action={action} />
{_. get (action, 'has_subnav' , null ) && _. get (action, 'subnav_links' , null ) && (
<React.Fragment>
<button className = "submenu-toggle" >
<span className = "icon-angle-right" aria-hidden = "true" />
<span className = "screen-reader-text" > Sub-menu</span>
</button>
<Submenu
{ .. .this.props}
submenu={_. get (action, 'subnav_links' , null )}
menu_class={ 'submenu' }
page={this.props.pageContext}
/>
</React.Fragment>
)}
</li>
);
})}
</ul>
</div>
</nav>
<button id = "menu-open" className = "menu-toggle" >
<span className = "screen-reader-text" > Close Menu</span>
<span className = "icon-menu" aria-hidden = "true" />
</button>
</React.Fragment>
)}
</div>
</div>
<div>
<a className = "github-corner" href = "<https://github.com/bgoonz/BGOONZ_BLOG_2.0>" aria-label = "View source on Github" >
<svg
aria-hidden = "true"
width={40}
height={40}
viewBox = "0 0 250 250"
style={{
zIndex: 100000,
fill: 'black' ,
color: '#fff' ,
position: 'fixed' ,
top: '0px' ,
border: 0,
left: '0px' ,
transform: 'scale(-1.5, 1.5)'
}}
>
<path d = "M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" > </path>
<path
className = "octo-arm"
d = "M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
fill = "currentColor"
style={{ transformOrigin: '130px 106px' }}
>
{ ' ' }
</path>
<path
className = "octo-body"
d = "M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
fill = "currentColor"
>
{ ' ' }
</path>
</svg>
</a>
</div>
</header>
);
}
}
import React from 'react' ;
import _ from 'lodash' ;
export default class Icon extends React.Component {
render() {
let icon = _.get(this.props, 'icon', null) ;
return (
<svg className="icon" viewBox=" 0 0 24 24 " xmlns="<http://www.w3.org/ 2000 /svg>">
{icon === 'dev' ? (
<path d="M7. 42 10 . 05 c-. 18 -. 16 -. 46 -. 23 -. 84 -. 23 H6l. 02 2.44.04 2 . 45 . 56 -. 02 c. 41 0 . 63 -. 07 . 83 -. 26 . 24 -. 24 . 26 -. 36.26-2.2 0 - 1 . 91 -. 02 - 1 . 96 -. 29 - 2 . 18 zM 0 4.94v14 . 12h 24V4. 94 H0zM8. 56 15 . 3 c-. 44.58-1.06 . 77 - 2.53.77H4 . 71V8.53h1 . 4c1.67 0 2.16.18 2 . 6.9.27.43 . 29.6.32 2 . 57.05 2.23 -. 02 2 . 73 -. 47 3 . 3 zm5. 09 - 5 . 47h - 2 . 47v1.77h1 . 52 v1. 28 l-. 72 . 04 -. 75 . 03v1.77l1 . 22.03 1.2 . 04 v1. 28h - 1 . 6 c- 1.53 0-1 . 6 -. 01 - 1 . 87 -. 3 l-. 3 -. 28 v- 3.16c0-3 . 02.01-3.18 . 25-3.48.23 -. 31 . 25 -. 31 1 . 88 -. 31h1.64v1 . 3 zm4. 68 5 . 45 c-. 17 . 43 -. 64 . 79 - 1 . 79 -. 18 0 -. 45 -. 15 -. 67 -. 39 -. 32 -. 32 -. 45 -. 63 -. 82 - 2 . 08 l-. 9 - 3 . 39 -. 45 - 1 . 67h . 76 c. 4 0 . 75.02.75.05 0 . 06 1.16 4 . 54 1.26 4 . 83.04.15.32 -. 7 . 73 - 2 . 3 l. 66-2.52.74 -. 04 c. 4 -. 02 . 73 0 . 73 . 04 0 . 14-1.67 6 . 38-1.8 6 . 68 z" />
) : icon === 'facebook' ? (
<path d="M23. 998 12c0 - 6.628-5 . 372-12-11 . 999-12C5 . 372 0 0 5.372 0 12 c 0 5.988 4.388 10 . 952 10.124 11 . 852 v- 8.384H7 . 078 v- 3.469h3 . 046 V 9.356c0 - 3.008 1 . 792 - 4.669 4 . 532 - 4.669 1 . 313 0 2 . 686.234 2 . 686.234v2 . 953 H15. 83 c- 1.49 0-1 . 955.925 - 1.955 1 . 874V12h3 . 328 l-. 532 3 . 469h - 2.796v8 . 384 c5. 736 -. 9 10.124-5 . 864 10.124 - 11 . 853 z" />
) : icon === 'github' ? (
<path d="M12 . 297 c- 6.63 0-12 5.373-12 12 0 5.303 3.438 9 . 8 8.205 11 . 385.6.113 . 82 -. 258 . 82 -. 577 0 -. 285 -. 01 - 1 . 04 -. 015-2.04 - 3 . 338.724 - 4.042-1 . 61-4.042 - 1 . 61C4.422 18 . 07 3.633 17 . 7 3.633 17 . 7 c- 1 . 087 -. 744.084 -. 729.084 -. 729 1.205 . 084 1.838 1 . 236 1.838 1.236 1.07 1.835 2 . 809 1.305 3 . 495.998 . 108 -. 776.417 - 1.305.76 - 1.605-2 . 665 -. 3-5.466 - 1.332-5 . 466-5.93 0 - 1.31.465 - 2.38 1.235 - 3 . 22 -. 135 -. 303 -. 54-1.523 . 105-3.176 0 0 1.005 -. 322 3.3 1 . 23 . 96 -. 267 1.98 -. 399 3 -. 405 1.02 . 006 2.04 . 138 3 . 405 2.28 - 1.552 3 . 285-1.23 3.285-1 . 23.645 1 . 653.24 2 . 873.12 3 . 176.765.84 1.23 1.91 1.23 3.22 0 4.61-2 . 805 5.625-5 . 475 5.92 . 42.36.81 1 . 096.81 2 . 22 0 1.606 -. 015 2 . 896 -. 015 3.286 0 . 315.21.69 . 825.57C20 . 565 22.092 24 17.592 24 12.297c0 - 6.627-5 . 373-12-12 - 12 " />
) : icon === 'instagram' ? (
<path d="M 12 0C8.74 0 8.333 . 015 7 . 053.072 5.775.132 4 . 905.333 4 . 14 . 63 c-. 789.306 - 1 . 459.717 - 2.126 1 . 384 S. 935 3.35 . 63 4 . 14 C. 333 4.905.131 5 . 775.072 7 . 053.012 8.333 0 8 . 74 0 12 s. 015 3 . 667.072 4 . 947 c. 06 1.277 . 261 2.148 . 558 2.913a5 . 885 5.885 0 001.384 2.126A5 . 868 5.868 0 004.14 23 . 37 c. 766.296 1 . 636.499 2 . 913 . 558 C 8.333 23 . 988 8.74 24 12 24s3 . 667 -. 015 4 . 947 -. 072 c1. 277 -. 06 2.148 -. 262 2 . 913 -. 558 a 5.898 5 . 898 0 002.126 - 1.384 5 . 86 5.86 0 001.384 - 2 . 126 c. 296 -. 765.499 - 1 . 636.558 - 2.913.06 - 1.28.072 - 1 . 687.072 - 4 . 947 s-. 015 - 3 . 667 -. 072 - 4 . 947 c-. 06-1.277 -. 262-2.149 -. 558 - 2.913a5 . 89 5.89 0 00-1.384 - 2.126A5 . 847 5.847 0 0019 . 86 . 63 c-. 765 -. 297 - 1 . 636 -. 499 - 2 . 913 -. 558 C15. 667.012 15.26 0 12 0 zm 0 2.16c3 . 203 0 3 . 585.016 4.85.071 1.17.055 1.805.249 2.227.415 . 562.217.96 . 477 1 . 382.896 . 419 . 42 . 679.819 . 896 1.381.164 . 422.36 1 . 057.413 2.227.057 1.266.07 1.646.07 4 . 85 s-. 015 3 . 585 -. 074 4 . 85 c-. 061 1.17 -. 256 1 . 805 -. 421 2.227a3.81 3.81 0 01 -. 899 1.382 3 . 744 3.744 0 01 - 1 . 38 . 896 c-. 42.164-1 . 065.36-2 . 235.413-1 . 274.057 - 1.649.07 - 4.859.07 - 3.211 0-3 . 586 -. 015 - 4 . 859 -. 074-1.171 -. 061 - 1 . 816 -. 256-2.236 -. 421 a 3.716 3 . 716 0 01 - 1 . 379 -. 899 3.644 3 . 644 0 01 -. 9 - 1 . 38 c-. 165 -. 42 -. 359 - 1 . 065 -. 42-2.235 -. 045-1.26 -. 061 - 1 . 649 -. 061 - 4.844 0 - 3.196.016 - 3 . 586.061 - 4 . 861.061 - 1.17.255-1 . 814.42-2 . 234 . 21 -. 57 . 479 -. 96 . 9-1.381 . 419 -. 419 . 81 -. 689 1 . 379 -. 898 . 42 -. 166 1.051 -. 361 2.221 -. 421 1 . 275 -. 045 1.65 -. 06 4.859 -. 06 l. 045 . 03 zm0 3.678a6 . 162 6.162 0 100 12.324 6.162 6.162 0 100-12 . 324 zM12 16 c- 2.21 0-4 - 1 . 79-4-4s1 . 79-4 4-4 4 1.79 4 4-1.79 4 - 4 4 zm 7.846-10 . 405 a 1.441 1 . 441 0 01 - 2.88 0 1 . 44 1.44 0 012 . 88 0 z" />
) : icon === 'linkedin' ? (
<path d="M 20.447 20 . 452h - 3 . 554 v- 5.569c0 - 1 . 328 -. 027 - 3.037-1 . 852 - 3.037-1 . 853 0-2 . 136 1.445 - 2.136 2 . 939 v 5.667H9 . 351V9h3 . 414 v1. 561h . 046 c. 477 -. 9 1.637 - 1.85 3.37 - 1 . 85 3.601 0 4.267 2 . 37 4.267 5.455v6 . 286 zM 5.337 7 . 433 a 2.062 2 . 062 0 01 - 2.063-2 . 065 2.064 2 . 064 0 112 . 063 2 . 065 zm 1.782 13 . 019 H3. 555V9h3 . 564 v11. 452 zM 22.225 0H1 . 771 C. 792 0 0 . 774 0 1 . 729 v 20.542C0 23.227.792 24 1.771 24h 20.451C23 . 2 24 24 23 . 227 24 22 . 271 V 1.729C24 . 774 23.2 0 22.222 0h . 003 z" />
) : icon === 'pinterest' ? (
<path d="M12. 017 0C5 . 396 0 . 029 5 . 367.029 11.987c0 5.079 3 . 158 9.417 7.618 11 . 162 -. 105 -. 949 -. 199-2.403 . 041 - 3.439.219 -. 937 1.406-5 . 957 1.406-5 . 957 s-. 359 -. 72 -. 359 - 1.781c0 - 1 . 663.967 - 2.911 2 . 168-2.911 1.024 0 1 . 518.769 1.518 1 . 688 0 1 . 029 -. 653 2 . 567 -. 992 3 . 992 -. 285 1.193 . 6 2.165 1 . 775 2.165 2.128 0 3 . 768-2.245 3.768-5 . 487 0-2 . 861 - 2.063-4 . 869 - 5.008-4 . 869-3.41 0-5.409 2.562-5 . 409 5.199 0 1.033 . 394 2.143 . 889 2 . 741.099 . 12.112.225 . 085.345 -. 09 . 375 -. 293 1.199 -. 334 1 . 363 -. 053.225 -. 172.271 -. 401.165-1 . 495 -. 69-2.433 - 2.878-2 . 433 - 4.646 0 - 3.776 2 . 748-7.252 7.92-7.252 4.158 0 7 . 392 2.967 7 . 392 6.923 0 4.135-2 . 607 7.462-6 . 233 7.462 - 1.214 0-2 . 354 -. 629 - 2.758-1 . 379 l-. 749 2 . 848 c-. 269 1.045-1 . 004 2.352-1 . 498 3.146 1.123.345 2 . 306.535 3.55.535 6.607 0 11.985-5 . 365 11.985-11 . 987C23.97 5 . 39 18.592 . 026 11 . 985 . 026 L12. 017 0 z" />
) : icon === 'reddit' ? (
<path d="M 12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0 zm5. 01 4 . 744 c. 688 0 1 . 25.561 1 . 25 1.249a1 . 25 1.25 0 0 1-2.498 . 056 l- 2 . 597 -. 547 -. 8 3.747c1 . 824.07 3 . 48.632 4 . 674 1 . 488.308 -. 309 . 73 -. 491 1.207 -. 491.968 0 1.754 . 786 1.754 1 . 754 0 . 716 -. 435 1.333-1 . 01 1.614a3 . 111 3.111 0 0 1 . 042.52c0 2.694-3 . 13 4.87-7 . 004 4.87 - 3.874 0 - 7.004-2 . 176-7.004 - 4 . 87 0 -. 183.015 -. 366.043 -. 534 A 1.748 1 . 748 0 0 1 4.028 12 c0-. 968.786 - 1.754 1 . 754 - 1 . 754.463 0 . 898.196 1 . 207.49 1.207 -. 883 2.878-1 . 43 4.744 - 1 . 487 l. 885 - 4 . 182 a. 342.342 0 0 1 . 14 -. 197.35.35 0 0 1 . 238 -. 042 l2. 906 . 617a1.214 1.214 0 0 1 1.108 -. 701 zM 9.25 12C8 . 561 12 8 12.562 8 13 . 25 c0 . 687.561 1.248 1.25 1.248.687 0 1.248 -. 561 1.248 - 1.249 0 -. 688 -. 561-1.249 - 1.249-1 . 249 zm5. 5 0 c-. 687 0-1 . 248.561-1 . 248 1.25 0 . 687.561 1.248 1.249 1.248.688 0 1.249 -. 561 1.249 - 1.249 0 -. 687 -. 562-1.249 - 1 . 25 - 1 . 249 zm- 5.466 3 . 99 a. 327.327 0 0 0 -. 231.094.33 . 33 0 0 0 0 . 463 c. 842.842 2 . 484.913 2 . 961.913 . 477 0 2 . 105 -. 056 2 . 961 -. 913 a. 361.361 0 0 0 . 029 -. 463.33.33 0 0 0 -. 464 0 c-. 547.533 - 1.684.73 - 2.512.73 -. 828 0-1 . 979 -. 196-2.512 -. 73 a. 326.326 0 0 0 -. 232 -. 095 z" />
) : icon === 'twitter' ? (
<path d="M 23.954 4 . 569a10 10 0 01-2.825 . 775 4.958 4 . 958 0 002.163 - 2 . 723 c-. 951.555 - 2 . 005.959 - 3.127 1 . 184a4.92 4 . 92 0 00-8 . 384 4.482C7 . 691 8.094 4 . 066 6.13 1 . 64 3.161a4 . 822 4.822 0 00 -. 666 2.475c0 1.71.87 3 . 213 2.188 4 . 096 a 4.904 4 . 904 0 01 - 2 . 228 -. 616 v. 061 a 4.923 4 . 923 0 003.946 4.827 4 . 996 4.996 0 01-2.212 . 085 4.937 4 . 937 0 004.604 3.417 9 . 868 9.868 0 01-6.102 2 . 105 c-. 39 0 -. 779 -. 023-1.17 -. 067 a 13.995 13 . 995 0 007.557 2.209c9 . 054 0 13 . 999 - 7.496 13 . 999 - 13.986 0 -. 209 0 -. 42 -. 015 -. 63a9.936 9.936 0 002.46-2 . 548 l-. 047 -. 02 z" />
) : icon === 'youtube' ? (
<path d="M 23.495 6 . 205a3.007 3.007 0 00-2.088 - 2 . 088 c- 1 . 87 -. 501 - 9 . 396 -. 501 - 9 . 396 -. 501 s- 7 . 507 -. 01-9.396 . 501 A 3.007 3 . 007 0 00 . 527 6.205a31.247 31.247 0 00 -. 522 5.805 31 . 247 31.247 0 00.522 5 . 783 3.007 3 . 007 0 002.088 2.088c1 . 868.502 9 . 396.502 9 . 396 . 502 s 7.506 0 9 . 396 -. 502 a 3.007 3 . 007 0 002.088 - 2.088 31 . 247 31.247 0 00 . 5-5.783 31.247 31.247 0 00 -. 5 - 5 . 805 zM 9.609 15 . 601 V 8.408l6 . 264 3 . 602 z" />
) : (
icon === 'vimeo' && (
<path d="M 23.977 6 . 416 c-. 105 2.338 - 1.739 5 . 543 - 4.894 9 . 609 - 3.268 4 . 247-6.026 6.37-8.29 6 . 37-1.409 0-2.578 - 1.294-3 . 553 - 3.881L5 . 322 11 . 4C4.603 8.816 3 . 834 7.522 3 . 01 7 . 522 c-. 179 0 -. 806.378 - 1.881 1 . 132L0 7 . 197a315 . 065 315 . 065 0 003.501 - 3.128C5.08 2.701 6 . 266 1.984 7 . 055 1 . 91c1.867 -. 18 3.016 1 . 1 3.447 3 . 838.465 2 . 953.789 4 . 789.971 5 . 507.539 2.45 1.131 3.674 1 . 776 3 . 674.502 0 1.256 -. 796 2.265-2 . 385 1.004-1 . 589 1.54 - 2.797 1 . 612 - 3.628.144 - 1 . 371 -. 395 - 2.061-1 . 614 - 2 . 061 -. 574 0-1 . 167.121-1 . 777.391 1.186-3 . 868 3.434-5 . 757 6.762-5 . 637 2.473.06 3.628 1 . 664 3.493 4 . 797 l-. 013 . 01 z" />
)
)}
</svg>
) ;
}
}
import React from 'react' ;
import { Helmet } from 'react-helmet' ;
import _ from 'lodash' ;
import { withPrefix, attribute } from '../utils' ;
import '../sass/main.scss' ;
import Header from './Header' ;
import Footer from './Footer' ;
import addScript from './../hooks/addScript' ;
const Script = (props) => {
importScript( './../hooks/addScript.js' );
};
export default class Body extends React . Component {
render() {
return (
<React.Fragment>
<Helmet>
<title>
{ _ . get ( this .props, 'pageContext.frontmatter.seo.title' , null )
? _ . get ( this .props, 'pageContext.frontmatter.seo.title' , null )
: _ . get ( this .props, 'pageContext.frontmatter.title' , null ) + ' | ' + _ . get ( this .props, 'pageContext.site.siteMetadata.title' , null )}
</title>
<meta charSet= "utf-8" />
<meta name= "viewport" content= "width=device-width, initialScale=1.0" />
<meta name= "description" content={ _ . get ( this .props, 'pageContext.frontmatter.seo.description' , null ) || '' } />
{ _ . get ( this .props, 'pageContext.frontmatter.seo.robots' , null ) && (
<meta name= "robots" content={ _ .join( _ . get ( this .props, 'pageContext.frontmatter.seo.robots' , null ), ',' )} />
)}
{ _ .map( _ . get ( this .props, 'pageContext.frontmatter.seo.extra' , null ), (meta, meta_idx) => {
let key_name = _ . get (meta, 'keyName' , null ) || 'name' ;
return _ . get (meta, 'relativeUrl' , null ) ? (
_ . get ( this .props, 'pageContext.site.siteMetadata.domain' , null ) &&
(() => {
let domain = _ .trim( _ . get ( this .props, 'pageContext.site.siteMetadata.domain' , null ), '/' );
let rel_url = withPrefix( _ . get (meta, 'value' , null ));
let full_url = domain + rel_url;
return <meta key={meta_idx} {...attribute(key_name, _ . get (meta, 'name' , null ))} content={full_url} />;
})()
) : (
<meta key={meta_idx + '.1' } {...attribute(key_name, _ . get (meta, 'name' , null ))} content={ _ . get (meta, 'value' , null )} />
);
})}
<link rel= "preconnect" href= "<https://fonts.gstatic.com>" />
<link href= "<https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap>" rel= "stylesheet" />
{ _ . get ( this .props, 'pageContext.site.siteMetadata.favicon' , null ) && (
<link rel= "icon" href={withPrefix( _ . get ( this .props, 'pageContext.site.siteMetadata.favicon' , null ))} />
)}
<body className={ 'palette-' + _ . get ( this .props, 'pageContext.site.siteMetadata.palette' , null )} />
</Helmet>
<div id= "page" className= "site" >
<Header {... this .props} />
{ /* INSERT SEARCH BAR HERE */ }
{ /* <div className="fb-like" data-href="<https://developers.facebook.com/docs/plugins/>" data-width={100} data-layout="standard" data-action="like" data-size="small" data-share="true" /> */ }
<main id= "content" className= "site-content" >
{ this .props.children}
</main>
<Footer {... this .props} />
</div>
</React.Fragment>
);
}
}
import React from 'react' ;
import _ from 'lodash' ;
import { classNames, withPrefix, markdownify } from '../utils' ;
import CtaButtons from './CtaButtons' ;
export default class SectionContent extends React.Component {
render() {
let section = _. get (this.props, 'section' , null );
return (
<section id={_. get (section, 'section_id' , null )} className = "block block-text outer" >
<div className = "outter" >
<div
className={classNames( 'inner' , {
'grid-swap' : _. get (section, 'image' , null ) && _. get (section, 'image_position' , null ) === 'right'
})}
>
{_. get (section, 'image' , null ) && (
<div className = "grid-item block-image" >
<img src={withPrefix(_. get (section, 'image' , null ))} alt={_. get (section, 'image_alt' , null )} />
</div>
)}
<div>
{_. get (section, 'title' , null ) && (
<div className = "block-header" >
<h2 className = "block-title" > {_. get (section, 'title' , null )}</h2>
</div>
)}
{_. get (section, 'content' , null ) && <div className = "outer" > {markdownify(_. get (section, 'content' , null ))}</div>}
{_. get (section, 'actions' , null ) && (
<div className = "block-buttons" >
<CtaButtons { .. .this.props} actions={_. get (section, 'actions' , null )} />
</div>
)}
</div>
</div>
</div>
</section>
);
}
}
import React from 'react' ;
import _ from 'lodash' ;
import { htmlToReact } from '../utils' ;
import CtaButtons from './CtaButtons' ;
export default class SectionCta extends React.Component {
render() {
let section = _. get (this.props, 'section' , null );
return (
<section id={_. get (section, 'section_id' , null )} className = "block block-cta outer" >
<div className = "inner" >
<div className = "has-gradient" >
<div className = "grid grid-middle grid-center" >
{(_. get (section, 'title' , null ) || _. get (section, 'subtitle' , null )) && (
<div className = "grid-item block-header" >
{_. get (section, 'title' , null ) && <h2 className = "block-title" > {_. get (section, 'title' , null )}</h2>}
{_. get (section, 'subtitle' , null ) && <p className = "block-subtitle" > {htmlToReact(_. get (section, 'subtitle' , null ))}</p>}
</div>
)}
{_. get (section, 'actions' , null ) && (
<div className = "grid-item block-buttons" >
<CtaButtons { .. .this.props} actions={_. get (section, 'actions' , null )} />
</div>
)}
</div>
</div>
</div>
</section>
);
}
}
import React from 'react' ;
import _ from 'lodash' ;
import { classNames, htmlToReact, pathJoin, getPage, Link, withPrefix } from '../utils' ;
export default class SectionDocs extends React.Component {
render() {
let section = _. get (this.props, 'section' , null );
return (
<section
id={_. get (section, 'section_id' , null )}
className={classNames( 'block' , 'block-grid' , 'outer' , {
'has-header' : _. get (section, 'title' , null ) || _. get (section, 'subtitle' , null )
})}
>
<div className = "inner" >
{(_. get (section, 'title' , null ) || _. get (section, 'subtitle' , null )) && (
<div className = "block-header inner-sm" >
{_. get (section, 'title' , null ) && <h2 className = "block-title" > {_. get (section, 'title' , null )}</h2>}
{_. get (section, 'subtitle' , null ) && <p className = "block-subtitle" > {htmlToReact(_. get (section, 'subtitle' , null ))}</p>}
</div>
)}
<div className = "block-content" >
<div
className={classNames( 'grid' , {
'grid-col-2' : _. get (section, 'col_number' , null ) === 'two' ,
'grid-col-3' : _. get (section, 'col_number' , null ) === 'three'
})}
>
{_.map(_. get (this.props, 'pageContext.site.data.doc_sections.sections' , null ), (doc_section, doc_section_idx) => {
let doc_section_path = pathJoin(_. get (this.props, 'pageContext.site.data.doc_sections.root_docs_path' , null ), doc_section);
let doc_section_page = getPage(this.props.pageContext.pages, doc_section_path);
return (
<div key={doc_section_idx} className = "grid-item" >
<div className = "grid-item-inside" >
<h3 className = "grid-item-title line-left" >
<Link to ={withPrefix(_. get (doc_section_page, 'url' , null ))}>
{_. get (doc_section_page, 'frontmatter.title' , null )}
</Link>
</h3>
{_. get (doc_section_page, 'frontmatter.excerpt' , null ) && (
<div className = "grid-item-content" >
<p> {htmlToReact(_. get (doc_section_page, 'frontmatter.excerpt' , null ))}</p>
</div>
)}
<div className = "grid-item-buttons" >
<Link to ={withPrefix(_. get (doc_section_page, 'url' , null ))}> Learn More</Link>
</div>
</div>
</div>
);
})}
</div>
</div>
</div>
</section>
);
}
}
import React from 'react' ;
import _ from 'lodash' ;
import { classNames, htmlToReact, withPrefix, Link, markdownify } from '../utils' ;
import CtaButtons from './CtaButtons' ;
export default class SectionGrid extends React.Component {
render() {
let section = _. get (this.props, 'section' , null );
return (
<section
id={_. get (section, 'section_id' , null )}
className={classNames( 'block' , 'block-grid' , 'outer' , {
'has-header' : _. get (section, 'title' , null ) || _. get (section, 'subtitle' , null )
})}
>
<div className = "inner" >
{(_. get (section, 'title' , null ) || _. get (section, 'subtitle' , null )) && (
<div className = "block-header inner-sm" >
{_. get (section, 'title' , null ) && <h2 className = "block-title" > {_. get (section, 'title' , null )}</h2>}
{_. get (section, 'subtitle' , null ) && <p className = "block-subtitle" > {htmlToReact(_. get (section, 'subtitle' , null ))}</p>}
</div>
)}
{_. get (section, 'grid_items' , null ) && (
<div className = "block-content" >
<div
className={classNames( 'grid' , {
'grid-col-2' : _. get (section, 'col_number' , null ) === 'two' ,
'grid-col-3' : _. get (section, 'col_number' , null ) === 'three'
})}
>
{_.map(_. get (section, 'grid_items' , null ), (item, item_idx) => (
<div key={item_idx} className = "grid-item" >
<div className = "grid-item-inside" >
{_. get (item, 'image' , null ) && (
<div className = "grid-item-image" >
<img src={withPrefix(_. get (item, 'image' , null ))} alt={_. get (item, 'image_alt' , null )} />
</div>
)}
{_. get (item, 'title' , null ) && (
<h3 className = "grid-item-title line-left" >
{_. get (item, 'title_url' , null ) ? (
<Link to ={withPrefix(_. get (item, 'title_url' , null ))}> {_. get (item, 'title' , null )}</Link>
) : (
_. get (item, 'title' , null )
)}
</h3>
)}
{_. get (item, 'content' , null ) && (
<div className = "grid-item-content" > {markdownify(_. get (item, 'content' , null ))}</div>
)}
{_. get (item, 'actions' , null ) && (
<div className = "grid-item-buttons" >
<CtaButtons { .. .this.props} actions={_. get (item, 'actions' , null )} />
</div>
)}
</div>
</div>
))}
</div>
</div>
)}
</div>
</section>
);
}
}
import React from 'react' ;
import _ from 'lodash' ;
import { toStyleObj, withPrefix, markdownify } from '../utils' ;
import CtaButtons from './CtaButtons' ;
export default class SectionHero extends React.Component {
render() {
let section = _. get (this.props, 'section' , null );
return (
<section id={_. get (section, 'section_id' , null )} className = "block block-hero has-gradient outer" >
{_. get (section, 'image' , null ) && (
<div className = "bg-img" style={toStyleObj( "background-image: url('" + withPrefix(_. get (section, 'image' , null )) + "')" )} />
)}
<div className = "inner-sm" >
{_. get (section, 'title' , null ) && (
<div className = "block-header" >
<h1 className = "block-title" > {_. get (section, 'title' , null )}</h1>
</div>
)}
{_. get (section, 'content' , null ) && <div className = "block-content" > {markdownify(_. get (section, 'content' , null ))}</div>}
{_. get (section, 'actions' , null ) && (
<div className = "block-buttons" >
<CtaButtons { .. .this.props} actions={_. get (section, 'actions' , null )} />
</div>
)}
</div>
</section>
);
}
}
import React from 'react' ;
import _ from 'lodash' ;
import { classNames } from '../utils' ;
import ActionLink from './ActionLink' ;
export default class Submenu extends React . Component {
render() {
let page = _ . get ( this .props, 'page' , null );
return (
<ul className={ _ . get ( this .props, 'menu_class' , null )}>
{ _ .map( _ . get ( this .props, 'submenu' , null ), (action, action_idx) => {
let page_url = _ .trim( _ . get (page, 'url' , null ), '/' );
let action_url = _ .trim( _ . get (action, 'url' , null ), '/' );
return (
<li
key={action_idx}
className={classNames( 'menu-item' , {
current: page_url === action_url,
'menu-button' : _ . get (action, 'style' , null ) !== 'link'
})}
>
<ActionLink {... this .props} action={action} />
</li>
);
})}
</ul>
);
}
}
import ActionLink from './ActionLink' ;
import CtaButtons from './CtaButtons' ;
import DocsMenu from './DocsMenu' ;
import DocsSubmenu from './DocsSubmenu' ;
import Footer from './Footer' ;
import Header from './Header' ;
import Icon from './Icon' ;
import SectionContent from './SectionContent' ;
import SectionCta from './SectionCta' ;
import SectionDocs from './SectionDocs' ;
import SectionGrid from './SectionGrid' ;
import SectionHero from './SectionHero' ;
import Submenu from './Submenu' ;
import Layout from './Layout' ;
import addScript from './../hooks/addScript' ;
export {
ActionLink,
CtaButtons,
DocsMenu,
DocsSubmenu,
Footer,
Header ,
Icon,
SectionContent,
SectionCta,
SectionDocs,
SectionGrid,
SectionHero,
Submenu,
addScript,
Layout
};
export default {
ActionLink,
CtaButtons,
DocsMenu,
DocsSubmenu,
Footer,
Header ,
Icon,
SectionContent,
SectionCta,
SectionDocs,
SectionGrid,
SectionHero,
Submenu,
Layout,
addScript
};
</details>
<details>
<summary> Click To See Template Sourcecode </summary>
Templates
├── advanced. js
├── blog.js
├── docs. js
├── page. js
└── post. js
import React from 'react' ;
import _ from 'lodash' ;
import { graphql } from 'gatsby' ;
import components, { Layout } from '../components/index' ;
// this minimal GraphQL query ensures that when 'gatsby develop' is running,
// any changes to content files are reflected in browser
export const query = graphql`
query ($url: String ) {
sitePage ( path: { eq: $url } ) {
id
}
}
`;
export default class Advanced extends React . Component {
render() {
return (
<Layout {... this .props}>
{_.map(_.get( this .props, 'pageContext.frontmatter.sections' , null ), (section, section_idx) => {
let component = _.upperFirst(_.camelCase(_.get(section, 'type' , null )));
let Component = components[component];
return <Component key={section_idx} {... this .props} section={section} site={ this .props.pageContext.site} />;
})}
</Layout>
);
}
}
import React from 'react' ;
import _ from 'lodash' ;
import moment from 'moment-strftime' ;
import { graphql } from 'gatsby' ;
import { Layout } from '../components/index' ;
import { toStyleObj, withPrefix, getPages, Link } from '../utils' ;
// this minimal GraphQL query ensures that when 'gatsby develop' is running,
// any changes to content files are reflected in browser
export const query = graphql`
query ( $url : String) {
sitePage(path: { eq: $url }) {
id
}
}
`;
export default class Blog extends React.Component {
render() {
let display_posts = _.orderBy(getPages(this.props.pageContext.pages, '/blog' ), 'frontmatter.date' , 'desc' );
return (
<Layout { .. .this.props}>
<header className = "page-header has-gradient outer" >
{_. get (this.props, 'pageContext.frontmatter.image' , null ) && (
<div
className = "bg-img"
style={toStyleObj( "background-image: url('" + withPrefix(_. get (this.props, 'pageContext.frontmatter.image' , null )) + "')" )}
/>
)}
<div className = "inner-sm" >
<h1 className = "page-title" > {_. get (this.props, 'pageContext.frontmatter.title' , null )}</h1>
{_. get (this.props, 'pageContext.frontmatter.subtitle' , null ) && (
<p className = "page-subtitle" > {_. get (this.props, 'pageContext.frontmatter.subtitle' , null )}</p>
)}
</div>
</header>
<div className = "inner-md outer" >
<div className = "post-feed" >
{_.map(display_posts, (post, post_idx) => (
<article key={post_idx} className = "post" >
{_. get (post, 'frontmatter.thumb_image' , null ) && (
<Link className = "post-thumbnail" to ={withPrefix(_. get (post, 'url' , null ))}>
<img
src={withPrefix(_. get (post, 'frontmatter.thumb_image' , null ))}
alt={_. get (this.props, 'pageContext.frontmatter.thumb_image_alt' , null )}
/>
</Link>
)}
<header className = "post-header" >
<div className = "post-meta" >
<time className = "published" dateTime={moment(_. get (post, 'frontmatter.date' , null )).strftime( '%Y-%m-%d %H:%M' )}>
{moment(_. get (post, 'frontmatter.date' , null )).strftime( '%B %d, %Y' )}
</time>
</div>
<h2 className = "post-title line-left" >
<Link to ={withPrefix(_. get (post, 'url' , null ))} rel = "bookmark" >
{_. get (post, 'frontmatter.title' , null )}
</Link>
</h2>
</header>
{_. get (post, 'frontmatter.excerpt' , null ) && (
<React.Fragment>
<p className = "post-excerpt" > {_. get (post, 'frontmatter.excerpt' , null )}</p>
{_. get (this.props, 'pageContext.frontmatter.has_more_link' , null ) === true &&
_. get (this.props, 'pageContext.frontmatter.more_link_text' , null ) && (
<p className = "read-more" >
<Link className = "read-more-link" to ={withPrefix(_. get (post, 'url' , null ))}>
{_. get (this.props, 'pageContext.frontmatter.more_link_text' , null )}
</Link>
</p>
)}
</React.Fragment>
)}
</article>
))}
</div>
</div>
</Layout>
);
}
}
import React from 'react' ;
import _ from 'lodash' ;
import { graphql } from 'gatsby' ;
import { Layout } from '../components/index' ;
import DocsMenu from '../components/DocsMenu' ;
import { htmlToReact, getPages, Link, withPrefix } from '../utils' ;
// this minimal GraphQL query ensures that when 'gatsby develop' is running,
// any changes to content files are reflected in browser
export const query = graphql`
query ( $url : String) {
sitePage(path: { eq: $url }) {
id
}
}
`;
export default class Docs extends React.Component {
render() {
let root_docs_path = _.trim(_. get (this.props, 'pageContext.site.data.doc_sections.root_docs_path' , null ), '/' );
let current_page_url = _.trim(_. get (this.props, 'pageContext.url' , null ), '/' );
return (
<Layout { .. .this.props}>
<div className = "inner outer" >
<div className = "docs-content" >
<DocsMenu { .. .this.props} page={this.props.pageContext} site={this.props.pageContext.site} />
<article className = "post type-docs" >
<div className = "post-inside" >
<header className = "post-header" >
<h1 className = "post-title line-left" > {_. get (this.props, 'pageContext.frontmatter.title' , null )}</h1>
</header>
<div className = "post-content" >
{htmlToReact(_. get (this.props, 'pageContext.html' , null ))}
{root_docs_path !== current_page_url &&
(() => {
let child_pages = _.orderBy(getPages(this.props.pageContext.pages, current_page_url), 'frontmatter.weight' );
let child_count = _.size(child_pages);
let has_children = child_count > 0 ? true : false ;
return (
<React.Fragment>
{has_children && (
<ul id = "docs-section-items" className = "docs-section-items" >
{_.map(child_pages, (child_page, child_page_idx) => (
<li key={child_page_idx} className = "docs-section-item" >
<Link to ={withPrefix(_. get (child_page, 'url' , null ))} className = "docs-item-link" >
{_. get (child_page, 'frontmatter.title' , null )}
<span className = "icon-angle-right" aria-hidden = "true" />
</Link>
</li>
))}
</ul>
)}
</React.Fragment>
);
})()}
</div>
</div>
</article>
<nav id = "page-nav" className = "page-nav" >
<div id = "page-nav-inside" className = "page-nav-inside sticky" >
<h2 className = "page-nav-title" > Jump to Section</h2>
<div id = "page-nav-link-container" />
</div>
</nav>
</div>
</div>
</Layout>
);
}
}
import React from 'react' ;
import _ from 'lodash' ;
import { graphql } from 'gatsby' ;
import { Layout } from '../components/index' ;
import { toStyleObj, withPrefix, htmlToReact } from '../utils' ;
// this minimal GraphQL query ensures that when 'gatsby develop' is running,
// any changes to content files are reflected in browser
export const query = graphql`
query ( $url : String) {
sitePage(path: { eq: $url }) {
id
}
}
`;
export default class Page extends React.Component {
render() {
return (
<Layout { .. .this.props}>
<article className = "post post-full" >
<header className = "post-header has-gradient outer" >
{_. get (this.props, 'pageContext.frontmatter.image' , null ) && (
<div
className = "bg-img"
style={toStyleObj( "background-image: url('" + withPrefix(_. get (this.props, 'pageContext.frontmatter.image' , null )) + "')" )}
/>
)}
<div className = "inner-sm" >
<h1 className = "post-title" > {_. get (this.props, 'pageContext.frontmatter.title' , null )}</h1>
{_. get (this.props, 'pageContext.frontmatter.subtitle' , null ) && (
<div className = "post-subtitle" > {htmlToReact(_. get (this.props, 'pageContext.frontmatter.subtitle' , null ))}</div>
)}
</div>
</header>
<div className = "inner-md outer" >
<div className = "post-content" > {htmlToReact(_. get (this.props, 'pageContext.html' , null ))}</div>
</div>
</article>
</Layout>
);
}
}
import React from 'react' ;
import _ from 'lodash' ;
import moment from 'moment-strftime' ;
import { graphql } from 'gatsby' ;
import { Layout } from '../components/index' ;
import { toStyleObj, withPrefix, htmlToReact } from '../utils' ;
// this minimal GraphQL query ensures that when 'gatsby develop' is running,
// any changes to content files are reflected in browser
export const query = graphql`
query ( $url : String) {
sitePage(path: { eq: $url }) {
id
}
}
`;
export default class Post extends React.Component {
render() {
return (
<Layout { .. .this.props}>
<article className = "post post-full" >
<header className = "post-header has-gradient outer" >
{_. get (this.props, 'pageContext.frontmatter.image' , null ) && (
<div
className = "bg-img"
style={toStyleObj( "background-image: url('" + withPrefix(_. get (this.props, 'pageContext.frontmatter.image' , null )) + "')" )}
/>
)}
<div className = "inner-sm" >
<div className = "post-meta" >
<time
className = "published"
dateTime={moment(_. get (this.props, 'pageContext.frontmatter.date' , null )).strftime( '%Y-%m-%d %H:%M' )}
>
{moment(_. get (this.props, 'pageContext.frontmatter.date' , null )).strftime( '%B %d, %Y' )}
</time>
</div>
<h1 className = "post-title" > {_. get (this.props, 'pageContext.frontmatter.title' , null )}</h1>
{_. get (this.props, 'pageContext.frontmatter.subtitle' , null ) && (
<div className = "post-subtitle" > {htmlToReact(_. get (this.props, 'pageContext.frontmatter.subtitle' , null ))}</div>
)}
</div>
</header>
<div className = "inner-md outer" >
<div className = "post-content" > {htmlToReact(_. get (this.props, 'pageContext.html' , null ))}</div>
</div>
</article>
</Layout>
);
}
}
</details>
